Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Mantine datatables #5218

Merged
merged 460 commits into from
Jul 27, 2023

Conversation

SchrodingersGat
Copy link
Member

@SchrodingersGat SchrodingersGat commented Jul 10, 2023

This PR is a major refactor of the existing table infrastructure, moving from bootstrap-table to mantine datatable

Example:

image

Functionality

  1. Platform UI

Notes

src/frontend/vite.config.ts Outdated Show resolved Hide resolved
Comment on lines +18 to +22
},
server: {
watch: {
usePolling: true
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need polling, doesn't the default websocket works better?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On my setup (devcontainer / windows10 / wsl2) polling and auto-reload doesn't work without this setting. I will happily revert this if you can help me work it out :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SchrodingersGat why do you added this here? I also have a few other comments here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you see my previous comment? On my setup (windows / devcontainer) it won't auto-reload unless I have this configured.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, because you haven't posted it before, you just added comments that were pending and now you commented all of them.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Guilty :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can apply this setting conditionally like checking if we run on windows.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something like:

Suggested change
},
server: {
watch: {
usePolling: true
}
},
server: {
watch: {
usePolling: process.platform === "win32"
}

yarn.lock Show resolved Hide resolved
src/frontend/src/pages/Index/Stock.tsx Outdated Show resolved Hide resolved
src/frontend/src/components/tables/Search.tsx Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
@SchrodingersGat
Copy link
Member Author

Coming together nicely, I see. Regarding custom filters: You could but the whole section for that on a HoverCard, that way you do not consume a lot of space when it is not in use but lots of for the inputs etc.

Current draft is to have a button which shows number of active filters, click to expand:

image

image

Still pretty rough, but the mechanics are getting there

- Save active filters to local storage
- Add some example filters to the part table
- Add FilterBadge component
- useDebouncedValue
@SchrodingersGat
Copy link
Member Author

Custom filters are now working quite well. The UX might need a bit of polish, but the functionality is all there:

image
image
image

@SchrodingersGat
Copy link
Member Author

@wolflu05 @matmair given that the image auth question might be somewhat involved, I'm happy to proceed with this, and handle images in a separate PR.

LMK if there are any outstanding issues with this before merge

@wolflu05
Copy link
Contributor

There are some unresolved conversations. I do not have permissions to resolve them so maybe you should take a look at that and see what has already been addressed.

@SchrodingersGat
Copy link
Member Author

Ok, merging this one in - any issues pop up we can address them. But it will be good to have this framework in place to work frmo

@SchrodingersGat SchrodingersGat merged commit 339eae5 into inventree:master Jul 27, 2023
14 checks passed
@SchrodingersGat SchrodingersGat deleted the mantine-datatables branch July 27, 2023 00:10
src/frontend/src/components/items/Thumbnail.tsx Outdated Show resolved Hide resolved
}) {

// Check if any columns are switchable (can be hidden)
const hasSwitchableColumns = columns.some((col: any) => col.switchable);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wolflu05 can you provide an example of what that would look like? Still getting my head around react :)

src/frontend/src/components/tables/InvenTreeTable.tsx Outdated Show resolved Hide resolved
src/frontend/vite.config.ts Outdated Show resolved Hide resolved
yarn.lock Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
src/frontend/src/components/tables/Search.tsx Outdated Show resolved Hide resolved
src/frontend/src/components/tables/InvenTreeTable.tsx Outdated Show resolved Hide resolved
Comment on lines +18 to +22
},
server: {
watch: {
usePolling: true
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you see my previous comment? On my setup (windows / devcontainer) it won't auto-reload unless I have this configured.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Platform UI Related to the React based User Interface refactor
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants