Skip to content

Commit 196bbe5

Browse files
Tristan-WorkGHTristan-WorkGH
committed
fixing page design & form validation
1 parent f442311 commit 196bbe5

File tree

2 files changed

+93
-63
lines changed

2 files changed

+93
-63
lines changed

‎src/pages/announcements/add-announcement-form.tsx‎

Lines changed: 78 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
66
*/
77

8-
import { useCallback } from 'react';
8+
import { useCallback, useMemo } from 'react';
99
import { Grid } from '@mui/material';
1010
import { type DateOrTimeView } from '@mui/x-date-pickers';
1111
import { useIntl } from 'react-intl';
12-
import { type Option, SubmitButton, useSnackMessage } from '@gridsuite/commons-ui';
12+
import { SubmitButton, useSnackMessage } from '@gridsuite/commons-ui';
1313
import yup from '../../utils/yup-config';
1414
import { type InferType } from 'yup';
1515
import { type SubmitHandler, useForm } from 'react-hook-form';
@@ -28,19 +28,26 @@ export type AddAnnouncementFormProps = {
2828
onAnnouncementCreated?: () => void;
2929
};
3030

31-
const severitySelect: Option[] = Object.values(UserAdminSrv.AnnouncementSeverity).map((value) => ({
32-
id: value,
33-
label: `announcements.severity.${value}`,
34-
}));
35-
3631
const formSchema = yup
3732
.object()
3833
.shape({
39-
[MESSAGE]: yup.string().trim().min(1).required(),
40-
[START_DATE]: yup.string().datetime({ precision: 0 }).required(),
41-
[END_DATE]: yup.string().datetime({ precision: 0 }).required(),
34+
[MESSAGE]: yup.string().nullable().trim().min(1).required(),
35+
[START_DATE]: yup.string().nullable().datetime().required(),
36+
[END_DATE]: yup
37+
.string()
38+
.nullable()
39+
.datetime()
40+
.required()
41+
.when(START_DATE, (startDate, schema) =>
42+
schema.test(
43+
'is-after-start',
44+
'End date must be after start date',
45+
(endDate) => !startDate || !endDate || new Date(endDate) > new Date(startDate as unknown as string)
46+
)
47+
),
4248
[SEVERITY]: yup
4349
.string<UserAdminSrv.AnnouncementSeverity>()
50+
.nullable()
4451
.oneOf(Object.values(UserAdminSrv.AnnouncementSeverity))
4552
.required(),
4653
})
@@ -59,20 +66,23 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
5966

6067
const formContext = useForm({
6168
resolver: yupResolver(formSchema),
62-
/*TODO defaultValues: {
69+
defaultValues: {
70+
// @ts-expect-error: nullable() is called, so null is accepted as default value
6371
[MESSAGE]: null,
72+
// @ts-expect-error: nullable() is called, so null is accepted as default value
6473
[START_DATE]: null,
74+
// @ts-expect-error: nullable() is called, so null is accepted as default value
6575
[END_DATE]: null,
76+
// @ts-expect-error: nullable() is called, so null is accepted as default value
6677
[SEVERITY]: null,
67-
},*/
78+
},
6879
});
6980
const { formState, getValues } = formContext;
7081
const startDateValue = getValues(START_DATE);
7182

7283
const onSubmit = useCallback<SubmitHandler<FormSchema>>(
7384
(params) => {
7485
UserAdminSrv.addAnnouncement({
75-
//id: crypto.randomUUID(),
7686
message: params.message,
7787
startDate: params.startDate,
7888
endDate: params.endDate,
@@ -90,51 +100,68 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
90100
);
91101

92102
return (
93-
<FormContainer<FormSchema> formContext={formContext} onSuccess={onSubmit}>
94-
<DateTimePickerElement<FormSchema> name={END_DATE} />
95-
<Grid container spacing={1}>
96-
<Grid item xs={4}>
97-
<TextareaAutosizeElement<FormSchema>
98-
name={MESSAGE}
99-
label={intl.formatMessage({ id: 'announcements.form.message' })}
100-
minRows={2}
101-
maxRows={5}
102-
fullWidth
103-
//inputProps={{ maxLength: 200 }}
104-
/>
105-
</Grid>
106-
<Grid item xs={2}>
107-
<DateTimePickerElement<FormSchema>
108-
name={START_DATE}
109-
label={intl.formatMessage({ id: 'announcements.table.startDate' })}
110-
transform={datetimePickerTransform}
111-
timezone="system"
112-
views={pickerView}
113-
timeSteps={{ hours: 1, minutes: 1, seconds: 0 }}
114-
disablePast
115-
/>
103+
<FormContainer<FormSchema>
104+
formContext={formContext}
105+
onSuccess={onSubmit}
106+
//criteriaMode="all"
107+
//mode="all"
108+
mode="onChange"
109+
reValidateMode="onChange"
110+
//reValidateMode="onChange"
111+
FormProps={{ style: { height: '100%' } }}
112+
>
113+
<Grid container direction="column" spacing={1.5} height="100%">
114+
<Grid item container xs="auto" spacing={1}>
115+
<Grid item xs={12} lg={6}>
116+
<DateTimePickerElement<FormSchema>
117+
name={START_DATE}
118+
label={intl.formatMessage({ id: 'announcements.table.startDate' })}
119+
transform={datetimePickerTransform}
120+
timezone="system"
121+
views={pickerView}
122+
timeSteps={{ hours: 1, minutes: 1, seconds: 0 }}
123+
disablePast
124+
/>
125+
</Grid>
126+
<Grid item xs={12} lg={6}>
127+
<DateTimePickerElement<FormSchema>
128+
name={END_DATE}
129+
label={intl.formatMessage({ id: 'announcements.table.endDate' })}
130+
transform={datetimePickerTransform}
131+
timezone="system"
132+
views={pickerView}
133+
timeSteps={{ hours: 1, minutes: 1, seconds: 0 }}
134+
disablePast
135+
minDateTime={startDateValue ? new Date(startDateValue) : undefined}
136+
/>
137+
</Grid>
116138
</Grid>
117-
<Grid item xs={2}>
118-
<DateTimePickerElement<FormSchema>
119-
name={END_DATE}
120-
label={intl.formatMessage({ id: 'announcements.table.endDate' })}
121-
transform={datetimePickerTransform}
122-
timezone="system"
123-
views={pickerView}
124-
timeSteps={{ hours: 1, minutes: 1, seconds: 0 }}
125-
disablePast
126-
minDateTime={startDateValue ? new Date(startDateValue) : undefined}
127-
/>
128-
</Grid>
129-
<Grid item xs={2}>
139+
<Grid item xs="auto">
130140
<SelectElement<FormSchema>
131141
name={SEVERITY}
132142
label={intl.formatMessage({ id: 'announcements.severity' })}
133-
options={severitySelect}
143+
options={useMemo(
144+
() =>
145+
Object.values(UserAdminSrv.AnnouncementSeverity).map((value) => ({
146+
id: value,
147+
label: intl.formatMessage({ id: `announcements.severity.${value}` }),
148+
})),
149+
[intl]
150+
)}
134151
fullWidth
135152
/>
136153
</Grid>
137-
<Grid item xs={2}>
154+
<Grid item xs>
155+
<TextareaAutosizeElement<FormSchema>
156+
name={MESSAGE}
157+
label={intl.formatMessage({ id: 'announcements.form.message' })}
158+
style={{ height: '100%' }}
159+
rows={5} // why does it do nothing even if the field is set as multiline?!
160+
fullWidth
161+
//inputProps={{ maxLength: 200 }}
162+
/>
163+
</Grid>
164+
<Grid item xs="auto">
138165
<SubmitButton
139166
variant="outlined"
140167
type="submit"

‎src/pages/announcements/announcements-page.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import type { UUID } from 'crypto';
99
import { useCallback, useMemo, useRef, useState } from 'react';
1010
import { FormattedMessage, useIntl } from 'react-intl';
11-
import { Grid, type SxProps, type Theme, Typography } from '@mui/material';
11+
import { Divider, Grid, type SxProps, type Theme, Typography } from '@mui/material';
1212
import { useSnackMessage } from '@gridsuite/commons-ui';
1313
import type { ColDef, GetRowIdParams, ValueGetterParams } from 'ag-grid-community';
1414
import { type GridTableRef } from '../../components/Grid';
@@ -118,26 +118,29 @@ export default function AnnouncementsPage() {
118118
[intl, convertSeverity, handleDeleteAnnouncement]
119119
);
120120

121+
// Note: using <Stack/> for the columns didn't work
121122
return (
122-
<Grid container direction="column" sx={stylesLayout.root}>
123-
<Grid container item xs={3} direction="column">
124-
<Grid item xs sx={stylesLayout.columnContainer}>
125-
<h3>
123+
<Grid container spacing={1}>
124+
<Grid item container direction="column" xs={12} sm={6} md={4}>
125+
<Grid item xs="auto">
126+
<Typography variant="subtitle1">
126127
<FormattedMessage id="announcements.programNewMessage" />
127-
</h3>
128+
</Typography>
129+
</Grid>
130+
<Grid item xs="auto">
131+
<Divider sx={{ mt: 0.5, mb: 1.5 }} />
128132
</Grid>
129-
<Grid item xs paddingX="15px">
133+
<Grid item xs>
130134
<AddAnnouncementForm onAnnouncementCreated={refreshGrid} />
131135
</Grid>
132136
</Grid>
133-
134-
<Grid container item xs direction="column" marginBottom="15px">
135-
<Grid item sx={stylesLayout.columnContainer}>
136-
<Typography variant="h3">
137+
<Grid item container direction="column" xs={12} sm={6} md={8}>
138+
<Grid item xs="auto">
139+
<Typography variant="subtitle1" mb={0.5}>
137140
<FormattedMessage id="announcements.programmedMessage" />
138141
</Typography>
139142
</Grid>
140-
<Grid item xs paddingX="15px">
143+
<Grid item xs>
141144
<AgGrid<Announcement>
142145
ref={gridRef}
143146
rowData={data}

0 commit comments

Comments
 (0)