Skip to content

Commit 9e75fb8

Browse files
lkiesowlkiesow
committed
All metadata should be in the metadata step of the add event wizard
The “source” step of the add event wizard also contains metadata. This doesn't really make sense since there is a whole step dedicated to metadata. We should move “Start date” in there. - The problem: This field should only be shown for a file upload. Not for a scheduled event. - The solution: Make “Source” step 1 and metadata step 2. We then know if we need a start date once we are in the metadata tab. This fixes #487
1 parent be83afb commit 9e75fb8

File tree

6 files changed

+144
-63
lines changed

6 files changed

+144
-63
lines changed

‎src/components/events/partials/ModalTabsAndPages/NewMetadataPage.tsx

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,25 @@ import RenderField from "../../../shared/wizard/RenderField";
55
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
66
import RenderMultiField from "../../../shared/wizard/RenderMultiField";
77
import { MetadataCatalog } from "../../../../slices/eventSlice";
8+
import { sourceMetadata } from "../../../../configs/sourceConfig";
9+
10+
interface RequiredFormProps {
11+
sourceMode: string,
12+
}
813

914
/**
1015
* This component renders the metadata page for new events and series in the wizards.
1116
*/
12-
const NewMetadataPage = <T,>({
17+
const NewMetadataPage = <T extends RequiredFormProps>({
18+
//const NewMetadataPage = <T,>({
1319
formik,
20+
previousPage,
1421
nextPage,
1522
metadataFields,
1623
header
1724
}: {
1825
formik: FormikProps<T>,
26+
previousPage: (values: T, twoPagesBack?: boolean) => void | undefined,
1927
nextPage: (values: T) => void,
2028
metadataFields: MetadataCatalog,
2129
header: string
@@ -67,12 +75,41 @@ const NewMetadataPage = <T,>({
6775
</table>
6876
</div>
6977
</div>
78+
{formik.values.sourceMode === "UPLOAD" && (
79+
<div className="obj list-obj">
80+
<header className="no-expand">
81+
{t("EVENTS.EVENTS.NEW.SOURCE.UPLOAD.RECORDING_METADATA")}
82+
</header>
83+
<div className="obj-container">
84+
<table className="main-tbl">
85+
<tbody>
86+
{/* One row for each metadata field*/}
87+
{sourceMetadata.UPLOAD && sourceMetadata.UPLOAD.metadata.map((field, key) => (
88+
<tr key={key}>
89+
<td>
90+
<span>{t(field.label)}</span>
91+
{field.required && <i className="required">*</i>}
92+
</td>
93+
<td className="editable">
94+
<Field
95+
name={field.id}
96+
metadataField={field}
97+
component={RenderField}
98+
/>
99+
</td>
100+
</tr>
101+
))}
102+
</tbody>
103+
</table>
104+
</div>
105+
</div>
106+
)}
70107
</div>
71108
</div>
72109
</div>
73110

74111
{/* Button for navigation to next page */}
75-
<WizardNavigationButtons isFirst formik={formik} nextPage={nextPage} />
112+
<WizardNavigationButtons formik={formik} previousPage={previousPage} nextPage={nextPage} />
76113
</>
77114
);
78115
};

‎src/components/events/partials/ModalTabsAndPages/NewSeriesMetadataPage.tsx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from "react";
2+
import { useTranslation } from "react-i18next";
3+
import { Field, FormikProps } from "formik";
4+
import RenderField from "../../../shared/wizard/RenderField";
5+
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
6+
import RenderMultiField from "../../../shared/wizard/RenderMultiField";
7+
import { MetadataCatalog } from "../../../../slices/eventSlice";
8+
9+
/**
10+
* This component renders the metadata page for new events and series in the wizards.
11+
*/
12+
const NewSeriesMetadataPage = <T,>({
13+
formik,
14+
nextPage,
15+
metadataFields,
16+
header
17+
}: {
18+
formik: FormikProps<T>,
19+
nextPage: (values: T) => void,
20+
metadataFields: MetadataCatalog,
21+
header: string
22+
}) => {
23+
const { t } = useTranslation();
24+
25+
return (
26+
<>
27+
<div className="modal-content">
28+
<div className="modal-body">
29+
<div className="full-col">
30+
<div className="obj tbl-list">
31+
<header className="no-expand">{t(header)}</header>
32+
{/* Table view containing input fields for metadata */}
33+
<div className="obj-container">
34+
<table className="main-tbl">
35+
<tbody>
36+
{/* Render table row for each metadata field depending on type*/}
37+
{!!metadataFields.fields &&
38+
metadataFields.fields.map((field, key) => (
39+
<tr key={key}>
40+
<td>
41+
<span>{t(field.label)}</span>
42+
{field.required ? (
43+
<i className="required">*</i>
44+
) : null}
45+
</td>
46+
<td className="editable ng-isolated-scope">
47+
{/* Render single value or multi value input */}
48+
{field.type === "mixed_text" &&
49+
field.collection?.length !== 0 ? (
50+
<Field
51+
name={field.id}
52+
fieldInfo={field}
53+
component={RenderMultiField}
54+
/>
55+
) : (
56+
<Field
57+
name={field.id}
58+
metadataField={field}
59+
isFirstField={key === 0}
60+
component={RenderField}
61+
/>
62+
)}
63+
</td>
64+
</tr>
65+
))}
66+
</tbody>
67+
</table>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
74+
{/* Button for navigation to next page */}
75+
<WizardNavigationButtons isFirst formik={formik} nextPage={nextPage} />
76+
</>
77+
);
78+
};
79+
80+
export default NewSeriesMetadataPage;

‎src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
import { Field, FieldArray, FormikProps } from "formik";
1212
import RenderField from "../../../shared/wizard/RenderField";
1313
import { getRecordings } from "../../../../selectors/recordingSelectors";
14-
import { sourceMetadata } from "../../../../configs/sourceConfig";
1514
import { hours, minutes, weekdays } from "../../../../configs/modalConfig";
1615
import { getUserInformation } from "../../../../selectors/userInfoSelectors";
1716
import {
@@ -65,11 +64,9 @@ interface RequiredFormProps {
6564
const NewSourcePage = <T extends RequiredFormProps>({
6665
formik,
6766
nextPage,
68-
previousPage,
6967
}: {
7068
formik: FormikProps<T>,
7169
nextPage: (values: T) => void,
72-
previousPage: (values: T, twoPagesBack?: boolean) => void,
7370
}) => {
7471
const { t } = useTranslation();
7572
const dispatch = useAppDispatch();
@@ -84,6 +81,7 @@ const NewSourcePage = <T extends RequiredFormProps>({
8481
dispatch(fetchRecordings("inputs"));
8582

8683
// validate form because dependent default values need to be checked
84+
console.info(formik);
8785
formik.validateForm().then((r) => console.info(r));
8886
// eslint-disable-next-line react-hooks/exhaustive-deps
8987
}, []);
@@ -246,13 +244,6 @@ const NewSourcePage = <T extends RequiredFormProps>({
246244
>
247245
{t("WIZARD.NEXT_STEP")}
248246
</button>
249-
<button
250-
className="cancel"
251-
onClick={() => previousPage(formik.values, false)}
252-
tabIndex={101}
253-
>
254-
{t("WIZARD.BACK")}
255-
</button>
256247
</footer>
257248

258249
<div className="btm-spacer" />
@@ -336,33 +327,6 @@ const Upload = ({ formik }) => {
336327
</table>
337328
</div>
338329
</div>
339-
<div className="obj list-obj">
340-
<header className="no-expand">
341-
{t("EVENTS.EVENTS.NEW.SOURCE.UPLOAD.RECORDING_METADATA")}
342-
</header>
343-
<div className="obj-container">
344-
<table className="main-tbl">
345-
<tbody>
346-
{/* One row for each metadata field*/}
347-
{sourceMetadata.UPLOAD && sourceMetadata.UPLOAD.metadata.map((field, key) => (
348-
<tr key={key}>
349-
<td>
350-
<span>{t(field.label)}</span>
351-
{field.required && <i className="required">*</i>}
352-
</td>
353-
<td className="editable">
354-
<Field
355-
name={field.id}
356-
metadataField={field}
357-
component={RenderField}
358-
/>
359-
</td>
360-
</tr>
361-
))}
362-
</tbody>
363-
</table>
364-
</div>
365-
</div>
366330
</>
367331
);
368332
};

‎src/components/events/partials/wizards/NewEventWizard.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,6 @@ const NewEventWizard: React.FC<{
5858

5959
// Caption of steps used by Stepper
6060
const steps = [
61-
{
62-
translation: "EVENTS.EVENTS.NEW.METADATA.CAPTION",
63-
name: "metadata",
64-
hidden: false,
65-
},
66-
{
67-
translation: "EVENTS.EVENTS.DETAILS.TABS.EXTENDED-METADATA",
68-
name: "metadata-extended",
69-
hidden: !(!!extendedMetadata && extendedMetadata.length > 0),
70-
},
7161
{
7262
translation: "EVENTS.EVENTS.NEW.SOURCE.CAPTION",
7363
name: "source",
@@ -80,6 +70,16 @@ const NewEventWizard: React.FC<{
8070
uploadAssetOptions.filter((asset) => asset.type !== "track").length ===
8171
0,
8272
},
73+
{
74+
translation: "EVENTS.EVENTS.NEW.METADATA.CAPTION",
75+
name: "metadata",
76+
hidden: false,
77+
},
78+
{
79+
translation: "EVENTS.EVENTS.DETAILS.TABS.EXTENDED-METADATA",
80+
name: "metadata-extended",
81+
hidden: !(!!extendedMetadata && extendedMetadata.length > 0),
82+
},
8383
{
8484
translation: "EVENTS.EVENTS.NEW.PROCESSING.CAPTION",
8585
name: "processing",
@@ -159,33 +159,33 @@ const NewEventWizard: React.FC<{
159159
/>
160160
<div>
161161
{page === 0 && (
162-
<NewMetadataPage
162+
<NewSourcePage
163163
nextPage={nextPage}
164164
formik={formik}
165-
metadataFields={metadataFields}
166-
header={steps[page].translation}
167165
/>
168166
)}
169167
{page === 1 && (
170-
<NewMetadataExtendedPage
168+
<NewAssetUploadPage
171169
previousPage={previousPage}
172170
nextPage={nextPage}
173171
formik={formik}
174-
extendedMetadataFields={extendedMetadata}
175172
/>
176173
)}
177174
{page === 2 && (
178-
<NewSourcePage
175+
<NewMetadataPage
179176
previousPage={previousPage}
180177
nextPage={nextPage}
181178
formik={formik}
179+
metadataFields={metadataFields}
180+
header={steps[page].translation}
182181
/>
183182
)}
184183
{page === 3 && (
185-
<NewAssetUploadPage
184+
<NewMetadataExtendedPage
186185
previousPage={previousPage}
187186
nextPage={nextPage}
188187
formik={formik}
188+
extendedMetadataFields={extendedMetadata}
189189
/>
190190
)}
191191
{page === 4 && (

‎src/components/events/partials/wizards/NewSeriesWizard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
getSeriesExtendedMetadata,
77
getSeriesMetadata,
88
} from "../../../../selectors/seriesSeletctor";
9-
import NewMetadataPage from "../ModalTabsAndPages/NewMetadataPage";
9+
import NewSeriesMetadataPage from "../ModalTabsAndPages/NewSeriesMetadataPage";
1010
import NewMetadataExtendedPage from "../ModalTabsAndPages/NewMetadataExtendedPage";
1111
import NewAccessPage from "../ModalTabsAndPages/NewAccessPage";
1212
import WizardStepper from "../../../shared/wizard/WizardStepper";
@@ -156,7 +156,7 @@ const NewSeriesWizard: React.FC<{
156156
/>
157157
<div>
158158
{page === 0 && (
159-
<NewMetadataPage
159+
<NewSeriesMetadataPage
160160
nextPage={nextPage}
161161
formik={formik}
162162
metadataFields={metadataFields}

‎src/utils/validate.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@ today.setHours(0, 0, 0, 0);
99

1010
// Validation Schema used in new event wizard (each step has its own yup validation object)
1111
export const NewEventSchema = [
12-
Yup.object().shape({
13-
title: Yup.string().required("Required"),
14-
}),
15-
Yup.object().shape({}),
1612
Yup.object().shape({
1713
uploadAssetsTrack: Yup.array().when("sourceMode", {
1814
// @ts-expect-error TS(7006): Parameter 'value' implicitly has an 'any' type.
@@ -84,7 +80,11 @@ export const NewEventSchema = [
8480
}),
8581
}),
8682
Yup.object().shape({
87-
processingWorkflow: Yup.string().required("Required"),
83+
title: Yup.string().required("Title is required"),
84+
}),
85+
Yup.object().shape({}),
86+
Yup.object().shape({
87+
processingWorkflow: Yup.string().required("Workflow is required"),
8888
}),
8989
];
9090

0 commit comments

Comments
 (0)