Skip to content

Commit

Permalink
Use EditDialog instead of MUI's Dialog in best practices stories (#…
Browse files Browse the repository at this point in the history 
…2901)
  • Loading branch information
@andrearutrecht
andrearutrecht authored Jan 28, 2025
1 parent 3068eaf commit c570858
Showing 1 changed file with 53 additions and 101 deletions.
154 changes: 53 additions & 101 deletions storybook/src/docs/bestPractices/GridAndFormLayouts.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {
Button,
CancelButton,
CrudMoreActionsMenu,
DataGridToolbar,
FieldSet,
Expand All @@ -11,7 +10,6 @@ import {
GridColDef,
GridFilterButton,
Loading,
OkayButton,
RouterTab,
RouterTabs,
SaveBoundary,
Expand All @@ -28,9 +26,10 @@ import {
ToolbarAutomaticTitleItem,
ToolbarBackButton,
ToolbarItem,
useEditDialog,
} from "@comet/admin";
import { Add, Edit, Html, Select as SelectIcon } from "@comet/admin-icons";
import { Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography } from "@mui/material";
import { IconButton, Typography } from "@mui/material";
import { DataGrid, GridSelectionModel, GridToolbarQuickFilter } from "@mui/x-data-grid";
import { useEffect, useState } from "react";

Expand Down Expand Up @@ -198,20 +197,19 @@ export const LargeFormOnAPage = {

export const SimpleFormInADialog = {
render: () => {
const Form = ({ id }: { id?: string }) => {
const Form = ({ id, mode = "add" }: { id?: string; mode?: "edit" | "add" }) => {
const { rows, loading } = useData();
const editingExistingItem = Boolean(id);

if (editingExistingItem && loading) {
if (mode === "edit" && loading) {
return <Loading />;
}

return (
<FinalForm
onSubmit={() => {
// Submit data
onSubmit={async ({ title, description }) => {
window.alert(`title: ${title}\ndescription: ${description}`);
}}
mode={editingExistingItem ? "edit" : "add"}
mode={mode}
initialValues={rows.find((row) => row.id === id)}
>
<TextField name="title" required fullWidth variant="horizontal" label="Title" />
Expand All @@ -220,33 +218,25 @@ export const SimpleFormInADialog = {
);
};

const [showDialog, setShowDialog] = useState(true); // In a real application, this would generally be `false` by default
const editingId: string | undefined = undefined; // In a real application, this would be set when editing an existing item
const [EditDialog, { id: selectedId, mode }, editDialogApi] = useEditDialog();

return (
<SaveBoundary onAfterSave={() => setShowDialog(false)}>
<>
<StackToolbar>
<ToolbarBackButton />
<ToolbarAutomaticTitleItem />
<FillSpace />
<ToolbarActions>
<Button onClick={() => setShowDialog(true)}>Open dialog</Button>
<Button onClick={() => editDialogApi.openAddDialog(selectedId)}>Open dialog</Button>
</ToolbarActions>
</StackToolbar>
<StackMainContent>
<Typography variant="h3">Open the dialog to see the form.</Typography>
<Dialog open={showDialog} onClose={() => setShowDialog(false)}>
<DialogTitle>Dialog title</DialogTitle>
<DialogContent>
<Form id={editingId} />
</DialogContent>
<DialogActions>
<CancelButton onClick={() => setShowDialog(false)} />
<SaveBoundarySaveButton />
</DialogActions>
</Dialog>
</StackMainContent>
</SaveBoundary>
<EditDialog title="Dialog title">
<Form id={selectedId} mode={mode} />
</EditDialog>
</>
);
},
};
Expand All @@ -263,8 +253,8 @@ export const LargeFormInADialog = {

return (
<FinalForm
onSubmit={() => {
// Submit data
onSubmit={async ({ title, description }) => {
window.alert(`title: ${title}\ndescription: ${description}`);
}}
mode={editingExistingItem ? "edit" : "add"}
initialValues={rows.find((row) => row.id === id)}
Expand All @@ -286,33 +276,25 @@ export const LargeFormInADialog = {
);
};

const [showDialog, setShowDialog] = useState(true); // In a real application, this would generally be `false` by default
const editingId: string | undefined = undefined; // In a real application, this would be set when editing an existing item
const [EditDialog, { id: selectedId }, editDialogApi] = useEditDialog();

return (
<SaveBoundary onAfterSave={() => setShowDialog(false)}>
<>
<StackToolbar>
<ToolbarBackButton />
<ToolbarAutomaticTitleItem />
<FillSpace />
<ToolbarActions>
<Button onClick={() => setShowDialog(true)}>Open dialog</Button>
<Button onClick={() => editDialogApi.openAddDialog(selectedId)}>Open dialog</Button>
</ToolbarActions>
</StackToolbar>
<StackMainContent>
<Typography variant="h3">Open the dialog to see the form.</Typography>
<Dialog open={showDialog} onClose={() => setShowDialog(false)}>
<DialogTitle>Dialog title</DialogTitle>
<DialogContent>
<Form id={editingId} />
</DialogContent>
<DialogActions>
<CancelButton onClick={() => setShowDialog(false)} />
<SaveBoundarySaveButton />
</DialogActions>
</Dialog>
<EditDialog title="Dialog title">
<Form id={selectedId} />
</EditDialog>
</StackMainContent>
</SaveBoundary>
</>
);
},
};
Expand Down Expand Up @@ -408,8 +390,8 @@ export const GridWithFormInADialog = {

return (
<FinalForm
onSubmit={() => {
// Submit data
onSubmit={async ({ title, description }) => {
window.alert(`title: ${title}\ndescription: ${description}`);
}}
mode={editingExistingItem ? "edit" : "add"}
initialValues={rows.find((row) => row.id === id)}
Expand All @@ -420,7 +402,7 @@ export const GridWithFormInADialog = {
);
};

const [editingId, setEditingId] = useState<string | undefined>();
const [EditDialog, { id: selectedId, mode }, editDialogApi] = useEditDialog();
const { rows, loading } = useData();

const GridToolbar = () => {
Expand All @@ -434,7 +416,7 @@ export const GridWithFormInADialog = {
</ToolbarItem>
<FillSpace />
<ToolbarActions>
<Button startIcon={<Add />} onClick={() => setEditingId("add")}>
<Button startIcon={<Add />} onClick={() => editDialogApi.openAddDialog()}>
Add new item
</Button>
</ToolbarActions>
Expand All @@ -450,7 +432,7 @@ export const GridWithFormInADialog = {
headerName: "",
width: 52,
renderCell: ({ row }) => (
<IconButton color="primary" onClick={() => setEditingId(row.id)}>
<IconButton color="primary" onClick={() => editDialogApi.openEditDialog(row.id)}>
<Edit />
</IconButton>
),
Expand All @@ -466,18 +448,9 @@ export const GridWithFormInADialog = {
<StackMainContent fullHeight>
<DataGrid disableSelectionOnClick rows={rows} columns={columns} loading={loading} components={{ Toolbar: GridToolbar }} />
</StackMainContent>
<Dialog open={!!editingId} onClose={() => setEditingId(undefined)}>
<SaveBoundary onAfterSave={() => setEditingId(undefined)}>
<DialogTitle>{editingId === "add" ? "Add new item" : `${rows.find((row) => row.id === editingId)?.title}`}</DialogTitle>
<DialogContent>
<Form id={editingId === "add" ? undefined : editingId} />
</DialogContent>
<DialogActions>
<CancelButton onClick={() => setEditingId(undefined)} />
<SaveBoundarySaveButton />
</DialogActions>
</SaveBoundary>
</Dialog>
<EditDialog title={mode === "add" ? "Add new item" : `${rows.find((row) => row.id === selectedId)?.title}`}>
<Form id={selectedId} />
</EditDialog>
</>
);
},
Expand All @@ -495,8 +468,8 @@ export const GridWithFormOnAPage = {

return (
<FinalForm
onSubmit={() => {
// Submit data
onSubmit={async ({ title, description }) => {
window.alert(`title: ${title}\ndescription: ${description}`);
}}
mode={editingExistingItem ? "edit" : "add"}
initialValues={rows.find((row) => row.id === id)}
Expand Down Expand Up @@ -606,8 +579,8 @@ export const NestedGridsAndFormsWithTabs = {

return (
<FinalForm
onSubmit={() => {
// Submit data
onSubmit={async ({ title, description }) => {
window.alert(`title: ${title}\ndescription: ${description}`);
}}
mode={editingExistingItem ? "edit" : "add"}
initialValues={rows.find((row) => row.id === id)}
Expand All @@ -618,7 +591,7 @@ export const NestedGridsAndFormsWithTabs = {
);
};

const [showAddDialog, setShowAddDialog] = useState(false);
const [EditDialog, , editDialogApi] = useEditDialog();
const { rows, loading } = useData();

const GridToolbar = () => {
Expand All @@ -632,7 +605,7 @@ export const NestedGridsAndFormsWithTabs = {
</ToolbarItem>
<FillSpace />
<ToolbarActions>
<Button startIcon={<Add />} onClick={() => setShowAddDialog(true)}>
<Button startIcon={<Add />} onClick={() => editDialogApi.openAddDialog()}>
Add new item
</Button>
</ToolbarActions>
Expand Down Expand Up @@ -707,18 +680,9 @@ export const NestedGridsAndFormsWithTabs = {
}}
</StackPage>
</StackSwitch>
<Dialog open={showAddDialog} onClose={() => setShowAddDialog(false)}>
<SaveBoundary onAfterSave={() => setShowAddDialog(false)}>
<DialogTitle>Add new item</DialogTitle>
<DialogContent>
<Form />
</DialogContent>
<DialogActions>
<CancelButton onClick={() => setShowAddDialog(false)} />
<SaveBoundarySaveButton />
</DialogActions>
</SaveBoundary>
</Dialog>
<EditDialog title="Add new item">
<Form />
</EditDialog>
</>
);
},
Expand All @@ -736,8 +700,8 @@ export const NestedFormInGridInTabsInGrid = {

return (
<FinalForm
onSubmit={() => {
// Submit data
onSubmit={async ({ title, description }) => {
window.alert(`title: ${title}\ndescription: ${description}`);
}}
mode={editingExistingItem ? "edit" : "add"}
initialValues={rows.find((row) => row.id === id)}
Expand All @@ -748,7 +712,7 @@ export const NestedFormInGridInTabsInGrid = {
);
};

const [showAddDialog, setShowAddDialog] = useState(false);
const [EditDialog, , editDialogApi] = useEditDialog();
const { rows, loading } = useData();

const GridToolbar = () => {
Expand All @@ -762,7 +726,7 @@ export const NestedFormInGridInTabsInGrid = {
</ToolbarItem>
<FillSpace />
<ToolbarActions>
<Button startIcon={<Add />} onClick={() => setShowAddDialog(true)}>
<Button startIcon={<Add />} onClick={() => editDialogApi.openAddDialog()}>
Add new item
</Button>
</ToolbarActions>
Expand Down Expand Up @@ -852,18 +816,9 @@ export const NestedFormInGridInTabsInGrid = {
}}
</StackPage>
</StackSwitch>
<Dialog open={showAddDialog} onClose={() => setShowAddDialog(false)}>
<SaveBoundary onAfterSave={() => setShowAddDialog(false)}>
<DialogTitle>Add new item</DialogTitle>
<DialogContent>
<Form />
</DialogContent>
<DialogActions>
<CancelButton onClick={() => setShowAddDialog(false)} />
<SaveBoundarySaveButton />
</DialogActions>
</SaveBoundary>
</Dialog>
<EditDialog title="Add new item">
<Form />
</EditDialog>
</>
);
},
Expand Down Expand Up @@ -944,10 +899,11 @@ export const GridWithSelectionAndMoreActionsMenu = {

export const GridWithSelectionInDialog = {
render: () => {
const [showDialog, setShowDialog] = useState(true); // In a real application, this would generally be `false` by default
const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]); // TODO: Check why this is reset every time the dialog is opened. Is this only in storybook?
const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]);
const { rows, loading } = useData();

const [EditDialog, , editDialogApi] = useEditDialog();

const GridToolbar = () => {
return (
<DataGridToolbar>
Expand All @@ -973,7 +929,7 @@ export const GridWithSelectionInDialog = {
<ToolbarAutomaticTitleItem />
<FillSpace />
<ToolbarActions>
<Button startIcon={<SelectIcon />} onClick={() => setShowDialog(true)}>
<Button startIcon={<SelectIcon />} onClick={() => editDialogApi.openAddDialog()}>
Select items
</Button>
</ToolbarActions>
Expand Down Expand Up @@ -1001,8 +957,7 @@ export const GridWithSelectionInDialog = {
<Typography variant="h4">No items selected :(</Typography>
)}
</StackMainContent>
<Dialog open={showDialog} onClose={() => setShowDialog(false)}>
<DialogTitle>Selected items</DialogTitle>
<EditDialog onAfterSave={() => editDialogApi.closeDialog()} title="Selected items">
<DataGrid
disableSelectionOnClick
rows={rows}
Expand All @@ -1014,10 +969,7 @@ export const GridWithSelectionInDialog = {
selectionModel={selectionModel}
onSelectionModelChange={setSelectionModel}
/>
<DialogActions>
<OkayButton onClick={() => setShowDialog(false)} />
</DialogActions>
</Dialog>
</EditDialog>
</>
);
},
Expand Down

0 comments on commit c570858

Please sign in to comment.