Skip to content

Commit 431b8df

Browse files
ascariandreaascariandrea
authored
fix(admin): resource edit forms layout with Grid (#2568)
1 parent f1a571b commit 431b8df

28 files changed

+363
-585
lines changed

‎packages/@liexp/core/src/frontend/vite/config.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,13 @@ export const defineViteConfig = <A extends Record<string, any>>(
9696

9797
resolve: {
9898
// preserveSymlinks: true,
99-
dedupe: ["react", "react-dom"],
99+
dedupe: [
100+
"react",
101+
"react-dom",
102+
"@mui/material",
103+
"@mui/icons-material",
104+
"@mui/system",
105+
],
100106
extensions: [
101107
".ts",
102108
".cts",

‎packages/@liexp/ui/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@
4343
"@fortawesome/react-fontawesome": "^0.2.2",
4444
"@liexp/core": "workspace:*",
4545
"@liexp/shared": "workspace:*",
46-
"@mui/icons-material": "7.1.0",
46+
"@mui/icons-material": "^7.1.0",
4747
"@mui/lab": "7.0.0-beta.12",
48-
"@mui/material": "7.1.0",
48+
"@mui/material": "^7.1.0",
4949
"@mui/system": "^7.1.0",
5050
"@mui/x-data-grid": "^8.3.0",
5151
"@react-spring/web": "^9.7.4",

‎packages/@liexp/ui/src/components/admin/Modal/ShareModalContent.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,8 @@ export const ShareModalContent: React.FC<ShareModalContentProps> = ({
106106
<GroupList
107107
groups={(payload?.groups ?? []).map((g) => ({
108108
...g,
109+
body: null,
110+
excerpt: null,
109111
selected: true,
110112
}))}
111113
onItemClick={() => {}}

‎packages/@liexp/ui/src/components/admin/SocialPost/SocialPostStatus.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import * as SocialPost from "@liexp/shared/lib/io/http/SocialPost.js";
22
import * as React from "react";
33
import { Box, Stack } from "../../mui/index.js";
4-
import { SelectInput } from "../react-admin.js";
4+
import { SelectInput, useRecordContext } from "../react-admin.js";
55
import { PublishNowButton } from "./PublishNowButton.js";
66

77
export const SocialPostStatus: React.FC = () => {
8+
const record = useRecordContext();
89
return (
910
<Stack
1011
direction="row"
@@ -22,7 +23,9 @@ export const SocialPostStatus: React.FC = () => {
2223
}))}
2324
/>
2425
<Box>
25-
<PublishNowButton platforms={{ IG: true, TG: true }} />
26+
<PublishNowButton
27+
platforms={record?.platforms ?? { IG: false, TG: true }}
28+
/>
2629
</Box>
2730
</Stack>
2831
);

‎packages/@liexp/ui/src/components/admin/common/EditForm.tsx

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -35,62 +35,62 @@ export const EditForm: React.FC<React.PropsWithChildren<EditFormProps>> = ({
3535
actions={actions}
3636
transform={transform}
3737
>
38-
<Grid container direction="column" width="100%">
39-
<Grid size={12}>
40-
<Grid container width={"100%"}>
41-
<div>
42-
<Grid
43-
container
44-
size={12}
45-
direction="row"
46-
justifyContent="space-between"
47-
>
48-
<Grid size={{ md: 6, lg: 6 }}>
49-
<Stack direction={"row"}>
50-
{resource && (
51-
<WebPreviewButton resource={resource} source="id" />
52-
)}
53-
<RestoreButton />
54-
</Stack>
55-
</Grid>
56-
<Grid size={{ md: 6, lg: 6 }}>
57-
<Stack alignItems={"flex-end"}>
58-
<Button
59-
label={`${showPreview ? "Hide" : "Show"} Preview`}
60-
onClick={() => {
61-
setShowPreview(!showPreview);
62-
}}
63-
/>
64-
</Stack>
65-
</Grid>
66-
</Grid>
67-
</div>
38+
<div>
39+
<Grid
40+
container
41+
width="100%"
42+
justifyContent="space-between"
43+
alignItems="start"
44+
size={12}
45+
>
46+
<Grid size={6}>
47+
<Stack direction={"row"}>
48+
{resource && <WebPreviewButton resource={resource} source="id" />}
49+
<RestoreButton />
50+
</Stack>
6851
</Grid>
69-
</Grid>
70-
<Grid size={12}>
71-
<Grid container width={"100%"}>
72-
<div style={{ width: "100%" }}>
73-
<Grid container width={"100%"} direction={"row"}>
74-
<Grid
75-
size={{
76-
md: showPreview ? 6 : 12,
77-
lg: showPreview ? 8 : 12,
78-
xl: showPreview ? 8 : 12,
79-
}}
80-
style={{
81-
width: !showPreview ? "100%" : undefined,
82-
}}
83-
>
84-
{children}
85-
</Grid>
86-
{showPreview && !!preview ? (
87-
<Grid size={{ md: 6, lg: 4 }}>{preview}</Grid>
88-
) : null}
89-
</Grid>
90-
</div>
52+
<Grid size={6}>
53+
<Stack alignItems={"flex-end"}>
54+
<Button
55+
label={`${showPreview ? "Hide" : "Show"} Preview`}
56+
onClick={() => {
57+
if (preview) {
58+
setShowPreview(!showPreview);
59+
}
60+
}}
61+
/>
62+
</Stack>
9163
</Grid>
64+
<Grid
65+
size={{
66+
md: showPreview ? 6 : 12,
67+
lg: showPreview ? 6 : 12,
68+
xl: showPreview ? 6 : 12,
69+
}}
70+
>
71+
{children}
72+
</Grid>
73+
{showPreview ? (
74+
<Grid
75+
size={{
76+
md: 6,
77+
lg: 6,
78+
xl: 6,
79+
}}
80+
>
81+
<div
82+
style={{
83+
overflow: "scroll",
84+
height: "100%",
85+
maxHeight: 800,
86+
}}
87+
>
88+
{preview}
89+
</div>
90+
</Grid>
91+
) : null}
9292
</Grid>
93-
</Grid>
93+
</div>
9494
</Edit>
9595
);
9696
};

‎packages/@liexp/ui/src/components/admin/common/SocialPostButton.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
type Identifier,
1212
} from "react-admin";
1313
import { useConfiguration } from "../../../context/ConfigurationContext.js";
14-
import { Box, Button } from "../../mui/index.js";
14+
import { Button, Stack } from "../../mui/index.js";
1515
import { ShareModal, emptySharePayload } from "../Modal/ShareModal.js";
1616

1717
interface OnLoadSharePayloadClickOpts {
@@ -42,7 +42,7 @@ export const SocialPostButton: React.FC<SocialPostButtonProps> = ({
4242
}>({ payload: emptySharePayload, multipleMedia: false, media: [] });
4343

4444
return (
45-
<Box style={{ display: "flex", marginRight: 10 }}>
45+
<Stack spacing={2}>
4646
<Button
4747
color="secondary"
4848
variant="contained"
@@ -84,6 +84,6 @@ export const SocialPostButton: React.FC<SocialPostButtonProps> = ({
8484
}}
8585
/>
8686
) : null}
87-
</Box>
87+
</Stack>
8888
);
8989
};

‎packages/@liexp/ui/src/components/admin/common/inputs/ColorInput.tsx

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import {
44
} from "@liexp/shared/lib/utils/colors.js";
55
import get from "lodash/get.js";
66
import * as React from "react";
7+
import { useRecordContext, type TextInputProps, useInput } from "react-admin";
78
import {
8-
Button,
9-
useRecordContext,
10-
type TextInputProps,
11-
useInput,
12-
} from "react-admin";
13-
import { Box, TextField, FormControl } from "../../../mui/index.js";
9+
TextField,
10+
FormControl,
11+
Stack,
12+
IconButton,
13+
Icons,
14+
} from "../../../mui/index.js";
1415

1516
export const ColorInput: React.FC<TextInputProps> = ({
1617
source,
@@ -25,24 +26,25 @@ export const ColorInput: React.FC<TextInputProps> = ({
2526

2627
return (
2728
<FormControl>
28-
<Box
29-
display="flex"
29+
<Stack
30+
direction="row"
31+
spacing={2}
32+
alignItems={"center"}
33+
justifyContent="center"
3034
style={{
31-
alignItems: "center",
32-
justifyContent: "center",
3335
border: `2px solid ${toColorHash(field.value)}`,
3436
padding: "10px 20px",
3537
}}
3638
>
37-
<Button
39+
<IconButton
3840
size="small"
39-
label="random"
40-
variant="contained"
4141
onClick={() => {
4242
const color = generateRandomColor();
4343
field.onChange({ target: { value: color } });
4444
}}
45-
/>
45+
>
46+
<Icons.Refresh style={{ stroke: toColorHash(field.value) }} />
47+
</IconButton>
4648
<TextField
4749
size="small"
4850
label={props.label ?? "color"}
@@ -52,7 +54,7 @@ export const ColorInput: React.FC<TextInputProps> = ({
5254
field.onChange({ target: { value: e.target.value } });
5355
}}
5456
/>
55-
</Box>
57+
</Stack>
5658
</FormControl>
5759
);
5860
};

‎packages/@liexp/ui/src/components/admin/common/inputs/EventTypeInput.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ export const EventTypeInput: React.FC<InputProps> = ({
142142
</Select>
143143
<Button
144144
label="Transform"
145+
size="small"
145146
disabled={value === type}
146147
onClick={() => {
147148
void doTransform(record);

‎packages/@liexp/ui/src/components/admin/events/tabs/BookEditFormTab.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import {
44
} from "@liexp/shared/lib/io/http/Media/MediaType.js";
55
import * as React from "react";
66
import { TextInput } from "react-admin";
7-
import { Box, Grid, Stack } from "../../../mui/index.js";
7+
import { Grid, Stack } from "../../../mui/index.js";
88
import ReferenceArrayBySubjectInput from "../../common/inputs/BySubject/ReferenceArrayBySubjectInput.js";
99
import ReferenceBySubjectInput from "../../common/inputs/BySubject/ReferenceBySubjectInput.js";
1010
import ReferenceMediaInput from "../../media/input/ReferenceMediaInput.js";
1111

1212
export const BookEditFormTab: React.FC = () => {
1313
return (
14-
<Box>
14+
<Stack direction="column" width="100%" spacing={2}>
1515
<TextInput source="payload.title" fullWidth />
1616
<ReferenceMediaInput
1717
source="payload.media.pdf"
@@ -31,6 +31,6 @@ export const BookEditFormTab: React.FC = () => {
3131
</Grid>
3232
</Grid>
3333
</Stack>
34-
</Box>
34+
</Stack>
3535
);
3636
};

‎packages/@liexp/ui/src/components/admin/events/tabs/DeathEventEditFormTab.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import * as React from "react";
2-
import { Box } from "../../../mui/index.js";
2+
import { Stack } from "../../../mui/index.js";
33
import ReferenceActorInput from "../../actors/ReferenceActorInput.js";
44
import ReferenceAreaInput from "../../areas/input/ReferenceAreaInput.js";
55

66
export const DeathEventEditFormTab: React.FC = () => {
77
return (
8-
<Box>
8+
<Stack direction="column">
99
<ReferenceActorInput source="payload.victim" />
1010
<ReferenceAreaInput source="payload.location" />
11-
</Box>
11+
</Stack>
1212
);
1313
};

‎packages/@liexp/ui/src/components/admin/keywords/ImportKeywordButton.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export const ImportKeywordButton: React.FC<{
4949
record && (
5050
<Button
5151
label={`Import from ${source}`}
52+
variant="contained"
5253
onClick={() => {
5354
handleKeywordImport(record);
5455
}}

‎packages/@liexp/ui/src/components/admin/keywords/ReferenceArrayKeywordInput.tsx

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,17 @@ import {
88
type ReferenceInputProps,
99
} from "react-admin";
1010
import { useDataProvider } from "../../../hooks/useDataProvider.js";
11-
import { Box, TextField } from "../../mui/index.js";
11+
import { Box, Stack, TextField } from "../../mui/index.js";
1212
import { ColorInput } from "../common/inputs/ColorInput.js";
1313
import { ImportKeywordButton } from "./ImportKeywordButton.js";
1414

1515
const ReferenceArrayKeywordInput: React.FC<
16-
Omit<ReferenceInputProps, "children"> & { source: string; showAdd: boolean }
17-
> = ({ showAdd, ...props }) => {
16+
Omit<ReferenceInputProps, "children"> & {
17+
source: string;
18+
showAdd: boolean;
19+
fullWidth?: boolean;
20+
}
21+
> = ({ showAdd, fullWidth, ...props }) => {
1822
const refresh = useRefresh();
1923
const apiProvider = useDataProvider();
2024

@@ -29,19 +33,25 @@ const ReferenceArrayKeywordInput: React.FC<
2933
});
3034
}, [tag, color]);
3135
return (
32-
<Box>
33-
<ReferenceArrayInput {...props} reference="keywords">
34-
<AutocompleteArrayInput
35-
size="small"
36-
optionText="tag"
37-
filterToQuery={(q) => ({ q })}
38-
/>
39-
</ReferenceArrayInput>
40-
{showAdd ? <ImportKeywordButton /> : null}
36+
<Stack spacing={2}>
37+
<Stack direction="row" spacing={2}>
38+
<ReferenceArrayInput {...props} reference="keywords">
39+
<AutocompleteArrayInput
40+
size="small"
41+
optionText="tag"
42+
filterToQuery={(q) => ({ q })}
43+
fullWidth={fullWidth}
44+
/>
45+
</ReferenceArrayInput>
46+
<Box>
47+
<ImportKeywordButton />
48+
</Box>
49+
</Stack>
4150
{showAdd ? (
42-
<Box style={{ display: "flex" }}>
51+
<Stack spacing={2} direction="row" width="100%">
4352
<TextField
4453
value={tag}
54+
placeholder="Insert new keyword"
4555
onChange={(e) => {
4656
setKeyword((k) => ({ ...k, tag: e.target.value }));
4757
}}
@@ -65,9 +75,9 @@ const ReferenceArrayKeywordInput: React.FC<
6575
doKeywordCreate();
6676
}}
6777
/>
68-
</Box>
78+
</Stack>
6979
) : null}
70-
</Box>
80+
</Stack>
7181
);
7282
};
7383

0 commit comments

Comments
 (0)