CRUD component#4486
Conversation
apedroferreira
added
type: new feature
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
Netlify deploy preview |
github-actions
bot
added
the
PR: out-of-date
|
|
||
| An `id` field (string or number) is mandatory so that individual items can be identified. | ||
|
|
||
| An additional type `longString` is provided for multiline form fields. |
There was a problem hiding this comment.
| An additional type `longString` is provided for multiline form fields. | |
| - An additional type `longString` is provided for multiline form fields. |
| components: Crud, CrudProvider, List, Show, Create, Edit, CrudForm | ||
| --- | ||
|
|
||
| # Crud |
There was a problem hiding this comment.
Should it be CRUD or Crud?
There was a problem hiding this comment.
According to what we discussed about MUI component casing the component should be called Crud.
|
|
||
| The `Crud` component automatically generates CRUD pages for your data source, automatically integrated with your routing solution. All that is required is a `dataSource` definition and a `rootPath` for the CRUD pages. | ||
|
|
||
| {{"demo": "CrudBasic.js", "height": 600, "iframe": true}} |
There was a problem hiding this comment.
In case of TS, code highlight doesn't seem to be applied for the preview code. It's happening for some other demos as well. I'm not sure if it's an issue and can be fixed. Just thought of sharing this observation.
There was a problem hiding this comment.
I know, it doesn't seem like it's ready for components like <Crud<Note> but that's valid Typescript, I guess it's an issue with the coloring/highlighting in the editor...
bharatkashyap
left a comment
bharatkashyap
left a comment
There was a problem hiding this comment.
Looks great @apedroferreira! A huge addition to the component set.
I think the only missing piece is integration with the new LocalizationProvider (#4620) so that we're not using any hard-coded strings and all text can be overridden.
|
|
||
| Displays a form for creating a new item for a data source, automatically generated from the given `fields` and field `type`s. | ||
|
|
||
| The supported field types are `string`, `longString`, `number`, `boolean`, `date`, `dateTime` and `singleSelect`. |
There was a problem hiding this comment.
Wondering whether longstring makes sense as its own type. I'd expect users wanting to add all kinds of refinements and validations to the basic string type such as min/max length, regex, email,...
"multiline" could be one such refinement. I'd rather expect the data model type to be loosely coupled to the UI control in the form. i.e. we use the data model type to generate a good default, then add ways on top to refine this control further.
But perhaps we can keep this for now and see where users want to take this?
There was a problem hiding this comment.
Got it, wouldn't be a lot of work to already include a slot for this and get rid of longString, it would also be more consistent with the data grid types. So will probably do it quickly if that sounds ok.
There was a problem hiding this comment.
Nevermind a slot will not be changeable per field type. I'll remove longString for now and we could improve things in the future.
|
|
||
| This function will run automatically against the current values when the user tries to submit a form inside the `Crud` component, or changes any of its fields. | ||
|
|
||
| #### Integration with external schema libraries |
There was a problem hiding this comment.
Hadn't seen it, we can probably make the validate function be compatible with this standard.
There was a problem hiding this comment.
I've changed the format of the validate function to follow the Standard Schema, this should make it really straightforward to integrate with schema libraries that adhere to it: https://deploy-preview-4486--mui-toolpad-docs.netlify.app/toolpad/core/react-crud/#form-validation
Janpot
left a comment
Janpot
left a comment
There was a problem hiding this comment.
I believe we can start with this initial feature set 👍
github-actions
bot
removed
the
PR: out-of-date
Here are the localization changes if you want to take a look, anyway it seems to work fine just followed the work you did in the other components. 00342c9 Tagging you for review just in case but I'll merge soon anyway probably. Oh, and interpolation in these would be useful because the delete confirmation messages used to include the |
|
Review feedback has been addressed, will merge and release soon. |
5 participants
Implement CRUD feature as specified in #4146
https://deploy-preview-4486--mui-toolpad-docs.netlify.app/toolpad/core/react-crud/
Tests and examples will be added in separate PRs as this PR has already grown too large.
To help review, the contents of this PR are mostly:
packages/toolpad-core.docs, many examples but with a lot of repetition between them, feel free to just mostly take a look at the new documentation page for theCrudcomponent.playgrounds for Vite, Next.js App Router and Next.js Pages Router.It took a while to reach this first version but still feel free to provide any major or minor feedback!