Skip to content

Commit b7ececd

Browse files
ArneiArnei
authored
Merge pull request #1054 from Arnei/wizardnavigationbuttons-everywhere-part-2
WizardNavigationButtons everywhere - Part 2
2 parents c9ca979 + 90005ff commit b7ececd

24 files changed

Lines changed: 317 additions & 487 deletions

‎src/components/configuration/partials/wizard/ThemeDetails.tsx‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import React, { useState } from "react";
2-
import { useTranslation } from "react-i18next";
3-
import cn from "classnames";
42
import { Formik } from "formik";
53
import GeneralPage from "./GeneralPage";
64
import BumperPage from "./BumperPage";
@@ -15,6 +13,7 @@ import ModalNavigation from "../../../shared/modals/ModalNavigation";
1513
import { NewThemeSchema } from "../../../../utils/validate";
1614
import { useAppDispatch, useAppSelector } from "../../../../store";
1715
import { updateThemeDetails } from "../../../../slices/themeDetailsSlice";
16+
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
1817
import { ThemeDetailsInitialValues } from "../../../../slices/themeSlice";
1918

2019
/**
@@ -25,7 +24,6 @@ const ThemeDetails = ({
2524
}: {
2625
close: () => void,
2726
}) => {
28-
const { t } = useTranslation();
2927
const dispatch = useAppDispatch();
3028

3129
const [page, setPage] = useState(0);
@@ -116,21 +114,13 @@ const ThemeDetails = ({
116114
{page === 4 && <WatermarkPage formik={formik} isEdit />}
117115
{page === 5 && <UsagePage themeUsage={themeUsage} />}
118116
{/* submit and cancel button */}
119-
<footer>
120-
<button
121-
className={cn("submit", {
122-
active: formik.dirty && formik.isValid,
123-
inactive: !(formik.dirty && formik.isValid),
124-
})}
125-
disabled={!(formik.dirty && formik.isValid)}
126-
onClick={() => formik.handleSubmit()}
127-
>
128-
{t("SUBMIT")}
129-
</button>
130-
<button className="cancel" onClick={() => close()}>
131-
{t("CANCEL")}
132-
</button>
133-
</footer>
117+
<WizardNavigationButtons
118+
isLast
119+
formik={formik}
120+
previousPage={() => close()}
121+
createTranslationString={"SUBMIT"}
122+
cancelTranslationString={"CANCEL"}
123+
/>
134124

135125
<div className="btm-spacer" />
136126
</div>

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

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from "react";
22
import { useTranslation } from "react-i18next";
33
import { Formik, FormikProps } from "formik";
44
import { Field } from "../../../shared/Field";
5-
import cn from "classnames";
65
import _ from "lodash";
76
import Notifications from "../../../shared/Notifications";
87
import RenderMultiField from "../../../shared/wizard/RenderMultiField";
@@ -16,6 +15,7 @@ import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils"
1615
import { useAppDispatch, useAppSelector } from "../../../../store";
1716
import { MetadataCatalog } from "../../../../slices/eventSlice";
1817
import { AsyncThunk } from "@reduxjs/toolkit";
18+
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
1919

2020
/**
2121
* This component renders metadata details of a certain event or series
@@ -144,25 +144,14 @@ const DetailsExtendedMetadataTab = ({
144144
{formik.dirty && (
145145
<>
146146
{/* Render buttons for updating metadata */}
147-
<footer>
148-
<button
149-
type="submit"
150-
onClick={() => formik.handleSubmit()}
151-
disabled={!checkValidity(formik)}
152-
className={cn("submit", {
153-
active: checkValidity(formik),
154-
inactive: !checkValidity(formik),
155-
})}
156-
>
157-
{t("SAVE")}
158-
</button>
159-
<button
160-
className="cancel"
161-
onClick={() => formik.resetForm()}
162-
>
163-
{t("CANCEL")}
164-
</button>
165-
</footer>
147+
<WizardNavigationButtons
148+
formik={formik}
149+
customValidation={!checkValidity(formik)}
150+
previousPage={() => formik.resetForm()}
151+
createTranslationString="SAVE"
152+
cancelTranslationString="CANCEL"
153+
isLast
154+
/>
166155

167156
<div className="btm-spacer" />
168157
</>

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

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from "react";
22
import { useTranslation } from "react-i18next";
33
import { Formik, FormikProps } from "formik";
44
import { Field } from "../../../shared/Field";
5-
import cn from "classnames";
65
import _ from "lodash";
76
import Notifications from "../../../shared/Notifications";
87
import RenderDate from "../../../shared/RenderDate";
@@ -14,6 +13,7 @@ import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils"
1413
import { useAppDispatch, useAppSelector } from "../../../../store";
1514
import { MetadataCatalog } from "../../../../slices/eventSlice";
1615
import { AsyncThunk } from "@reduxjs/toolkit";
16+
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
1717

1818
/**
1919
* This component renders metadata details of a certain event or series
@@ -138,25 +138,14 @@ const DetailsMetadataTab = ({
138138
{formik.dirty && (
139139
<>
140140
{/* Render buttons for updating metadata */}
141-
<footer>
142-
<button
143-
type="submit"
144-
onClick={() => formik.handleSubmit()}
145-
disabled={!checkValidity(formik)}
146-
className={cn("submit", {
147-
active: checkValidity(formik),
148-
inactive: !checkValidity(formik),
149-
})}
150-
>
151-
{t("SAVE")}
152-
</button>
153-
<button
154-
className="cancel"
155-
onClick={() => formik.resetForm()}
156-
>
157-
{t("CANCEL")}
158-
</button>
159-
</footer>
141+
<WizardNavigationButtons
142+
formik={formik}
143+
customValidation={!checkValidity(formik)}
144+
previousPage={() => formik.resetForm()}
145+
createTranslationString="SAVE"
146+
cancelTranslationString="CANCEL"
147+
isLast
148+
/>
160149

161150
<div className="btm-spacer" />
162151
</>

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

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useEffect } from "react";
22
import { useTranslation } from "react-i18next";
3-
import cn from "classnames";
43
import { FieldArray, FormikProps } from "formik";
54
import Notifications from "../../../shared/Notifications";
65
import { getTimezoneOffset, hasAccess } from "../../../../utils/utils";
@@ -22,6 +21,7 @@ import {
2221
} from "../../../../slices/eventSlice";
2322
import { Recording } from "../../../../slices/recordingSlice";
2423
import lodash, { groupBy } from "lodash";
24+
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
2525
import SchedulingTime from "../wizards/scheduling/SchedulingTime";
2626
import SchedulingLocation from "../wizards/scheduling/SchedulingLocation";
2727

@@ -401,15 +401,10 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
401401
</div>
402402

403403
{/* Navigation buttons */}
404-
<footer>
405-
<button
406-
type="submit"
407-
className={cn("submit", {
408-
active: formik.dirty && formik.isValid,
409-
inactive: !(formik.dirty && formik.isValid),
410-
})}
411-
disabled={!(formik.dirty && formik.isValid)}
412-
onClick={async () => {
404+
<WizardNavigationButtons
405+
formik={formik}
406+
nextPage={
407+
async () => {
413408
dispatch(removeNotificationWizardForm());
414409
if (
415410
await checkSchedulingConflicts(
@@ -420,24 +415,18 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
420415
) {
421416
nextPage(formik.values);
422417
}
423-
}}
424-
>
425-
{t("WIZARD.NEXT_STEP")}
426-
</button>
427-
428-
<button
429-
className="cancel"
430-
onClick={() => {
418+
}
419+
}
420+
previousPage={
421+
() => {
431422
previousPage(formik.values);
432423
if (!formik.isValid) {
433424
// set page as not filled out
434425
setPageCompleted([]);
435426
}
436-
}}
437-
>
438-
{t("WIZARD.BACK")}
439-
</button>
440-
</footer>
427+
}
428+
}
429+
/>
441430

442431
<div className="btm-spacer" />
443432
</>

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

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
import { useAppSelector } from "../../../../store";
1515
import { FormikProps } from "formik";
1616
import { Event } from "../../../../slices/eventSlice";
17+
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
1718

1819
/**
1920
* This component renders the table overview of selected events in edit scheduled events bulk action
@@ -130,30 +131,17 @@ const EditScheduledEventsGeneralPage = <T extends RequiredFormProps>({
130131
</div>
131132

132133
{/* Button for navigation to next page */}
133-
<footer>
134-
<button
135-
type="submit"
136-
className={cn("submit", {
137-
active: checkValidityUpdateScheduleEventSelection(
138-
formik.values,
139-
user
140-
),
141-
inactive: !checkValidityUpdateScheduleEventSelection(
142-
formik.values,
143-
user
144-
),
145-
})}
146-
disabled={
147-
!checkValidityUpdateScheduleEventSelection(formik.values, user)
148-
}
149-
onClick={() => {
150-
nextPage(formik.values);
151-
}}
152-
tabIndex={100}
153-
>
154-
{t("WIZARD.NEXT_STEP")}
155-
</button>
156-
</footer>
134+
<WizardNavigationButtons
135+
formik={formik}
136+
nextPage={nextPage}
137+
customValidation={
138+
!checkValidityUpdateScheduleEventSelection(
139+
formik.values,
140+
user
141+
)
142+
}
143+
isFirst
144+
/>
157145

158146
<div className="btm-spacer" />
159147
</>

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

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useEffect } from "react";
2-
import cn from "classnames";
32
import _ from "lodash";
43
import DatePicker from "react-datepicker";
54
import { Formik, FormikErrors, FormikProps } from "formik";
@@ -46,6 +45,7 @@ import {
4645
} from "../../../../slices/notificationSlice";
4746
import { Recording } from "../../../../slices/recordingSlice";
4847
import { useTranslation } from "react-i18next";
48+
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
4949
import SchedulingTime from "../wizards/scheduling/SchedulingTime";
5050
import SchedulingEndDateDisplay from "../wizards/scheduling/SchedulingEndDateDisplay";
5151
import SchedulingLocation from "../wizards/scheduling/SchedulingLocation";
@@ -509,29 +509,18 @@ const EventDetailsSchedulingTab = ({
509509
{formik.dirty && (
510510
<>
511511
{/* Render buttons for updating scheduling */}
512-
<footer>
513-
<button
514-
type="submit"
515-
onClick={() => formik.handleSubmit()}
516-
disabled={!checkValidity(formik)}
517-
className={cn("submit", {
518-
active: checkValidity(formik),
519-
inactive: !checkValidity(formik),
520-
})}
521-
>
522-
{t("SAVE") /* Save */}
523-
</button>
524-
<button
525-
className="cancel"
526-
onClick={() => {
527-
formik.resetForm({
528-
values: getInitialValues(),
529-
});
530-
}}
531-
>
532-
{t("CANCEL") /* Cancel */}
533-
</button>
534-
</footer>
512+
<WizardNavigationButtons
513+
formik={formik}
514+
customValidation={!checkValidity(formik)}
515+
previousPage={() => {
516+
formik.resetForm({
517+
values: getInitialValues(),
518+
});
519+
}}
520+
createTranslationString="SAVE"
521+
cancelTranslationString="CANCEL"
522+
isLast
523+
/>
535524

536525
<div className="btm-spacer" />
537526
</>

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

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useEffect, useState } from "react";
22
import { useTranslation } from "react-i18next";
3-
import cn from "classnames";
43
import Notifications from "../../../shared/Notifications";
54
import {
65
Role,
@@ -20,6 +19,7 @@ import { filterRoles, getAclTemplateText } from "../../../../utils/aclUtils";
2019
import { useAppDispatch, useAppSelector } from "../../../../store";
2120
import { fetchSeriesDetailsAcls } from "../../../../slices/seriesDetailsSlice";
2221
import { getSeriesDetailsAcl } from "../../../../selectors/seriesDetailsSelectors";
22+
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
2323
import { TransformedAcl } from "../../../../slices/aclDetailsSlice";
2424

2525
/**
@@ -351,31 +351,15 @@ const NewAccessPage = <T extends RequiredFormProps>({
351351
</div>
352352
</div>
353353
{/* Button for navigation to next page and previous page */}
354-
<footer>
355-
<button
356-
type="submit"
357-
className={cn("submit", {
358-
active: formik.dirty && formik.isValid,
359-
inactive: !(formik.dirty && formik.isValid),
360-
})}
361-
disabled={!(formik.dirty && formik.isValid)}
362-
onClick={async () => {
363-
if (await dispatch(checkAcls(formik.values.acls))) {
364-
nextPage(formik.values);
365-
}
366-
}}
367-
tabIndex={100}
368-
>
369-
{t("WIZARD.NEXT_STEP")}
370-
</button>
371-
<button
372-
className="cancel"
373-
onClick={() => previousPage(formik.values, false)}
374-
tabIndex={101}
375-
>
376-
{t("WIZARD.BACK")}
377-
</button>
378-
</footer>
354+
<WizardNavigationButtons
355+
formik={formik}
356+
nextPage={async () => {
357+
if (await dispatch(checkAcls(formik.values.acls))) {
358+
nextPage(formik.values);
359+
}
360+
}}
361+
previousPage={previousPage}
362+
/>
379363

380364
<div className="btm-spacer" />
381365
</>

0 commit comments

Comments
 (0)