From 47d0018d8abb09fb01d004c396ba5d1bbe93bef2 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 14 Jan 2025 12:58:24 +0100 Subject: [PATCH] Reduce duplicate code for modal content This code structure appears in like 50 files, so I'm putting it in a component so I don't have to see it again. --- .../partials/wizard/BumperPage.tsx | 127 ++- .../partials/wizard/GeneralPage.tsx | 63 +- .../partials/wizard/ThemeSummaryPage.tsx | 147 ++- .../partials/wizard/TitleSlidePage.tsx | 145 ++- .../partials/wizard/UsagePage.tsx | 51 +- .../partials/wizard/WatermarkPage.tsx | 241 +++-- .../DetailsExtendedMetadataTab.tsx | 198 ++-- .../ModalTabsAndPages/DetailsMetadataTab.tsx | 166 ++-- .../EditScheduledEventsEditPage.tsx | 769 +++++++------- .../EditScheduledEventsGeneralPage.tsx | 137 ++- .../EditScheduledEventsSummaryPage.tsx | 97 +- .../EventDetailsAssetAttachmentDetails.tsx | 230 +++-- .../EventDetailsAssetAttachments.tsx | 160 ++- .../EventDetailsAssetCatalogDetails.tsx | 222 ++--- .../EventDetailsAssetCatalogs.tsx | 152 ++- .../EventDetailsAssetMedia.tsx | 128 ++- .../EventDetailsAssetMediaDetails.tsx | 670 +++++++------ .../EventDetailsAssetPublicationDetails.tsx | 230 +++-- .../EventDetailsAssetPublications.tsx | 144 ++- .../EventDetailsAssetsAddAsset.tsx | 193 ++-- .../EventDetailsAssetsTab.tsx | 290 +++--- .../EventDetailsCommentsTab.tsx | 498 +++++----- .../EventDetailsPublicationTab.tsx | 124 ++- .../EventDetailsSchedulingTab.tsx | 938 +++++++++--------- .../EventDetailsStatisticsTab.tsx | 95 +- .../EventDetailsWorkflowDetails.tsx | 551 +++++----- .../EventDetailsWorkflowErrorDetails.tsx | 241 +++-- .../EventDetailsWorkflowErrors.tsx | 207 ++-- .../EventDetailsWorkflowOperationDetails.tsx | 329 +++--- .../EventDetailsWorkflowOperations.tsx | 157 ++- .../ModalTabsAndPages/NewAccessPage.tsx | 457 +++++---- .../ModalTabsAndPages/NewAssetUploadPage.tsx | 109 +- .../NewMetadataExtendedPage.tsx | 117 ++- .../ModalTabsAndPages/NewMetadataPage.tsx | 85 +- .../ModalTabsAndPages/NewProcessingPage.tsx | 105 +- .../ModalTabsAndPages/NewSourcePage.tsx | 229 +++-- .../ModalTabsAndPages/NewThemePage.tsx | 83 +- .../ModalTabsAndPages/NewTobiraPage.tsx | 7 +- .../SeriesDetailsFeedsTab.tsx | 51 +- .../SeriesDetailsStatisticTab.tsx | 95 +- .../SeriesDetailsThemeTab.tsx | 127 ++- .../StartTaskGeneralPage.tsx | 133 ++- .../StartTaskSummaryPage.tsx | 95 +- .../StartTaskWorkflowPage.tsx | 97 +- .../partials/modals/DeleteEventsModal.tsx | 119 ++- .../partials/modals/DeleteSeriesModal.tsx | 139 ++- .../modals/EditMetadataEventsModal.tsx | 225 ++--- .../partials/wizards/NewEventSummary.tsx | 385 ++++--- .../partials/wizards/NewSeriesSummary.tsx | 117 ++- .../wizards/CapabilitiesDetailsTab.tsx | 69 +- .../wizards/ConfigurationDetailsTab.tsx | 69 +- .../partials/wizards/GeneralDetailsTab.tsx | 69 +- src/components/shared/EditTableViewModal.tsx | 203 ++-- src/components/shared/HotKeyCheatSheet.tsx | 116 ++- src/components/shared/RegistrationModal.tsx | 857 ++++++++-------- src/components/shared/modals/ModalContent.tsx | 25 + .../shared/modals/ModalContentTable.tsx | 32 + .../modals/ResourceDetailsAccessPolicyTab.tsx | 679 +++++++------ .../users/partials/wizard/AclAccessPage.tsx | 479 +++++---- .../users/partials/wizard/AclMetadataPage.tsx | 69 +- .../partials/wizard/EditUserGeneralTab.tsx | 153 ++- .../partials/wizard/GroupMetadataPage.tsx | 51 +- .../users/partials/wizard/GroupRolesPage.tsx | 31 +- .../users/partials/wizard/GroupUsersPage.tsx | 31 +- .../partials/wizard/NewAclSummaryPage.tsx | 113 +-- .../partials/wizard/NewGroupSummaryPage.tsx | 57 +- .../partials/wizard/NewUserGeneralTab.tsx | 165 ++- .../partials/wizard/UserEffectiveRolesTab.tsx | 51 +- .../users/partials/wizard/UserRolesTab.tsx | 33 +- 69 files changed, 6842 insertions(+), 6985 deletions(-) create mode 100644 src/components/shared/modals/ModalContent.tsx create mode 100644 src/components/shared/modals/ModalContentTable.tsx diff --git a/src/components/configuration/partials/wizard/BumperPage.tsx b/src/components/configuration/partials/wizard/BumperPage.tsx index 293715682a..6b353dd81e 100644 --- a/src/components/configuration/partials/wizard/BumperPage.tsx +++ b/src/components/configuration/partials/wizard/BumperPage.tsx @@ -5,6 +5,7 @@ import FileUpload from "../../../shared/wizard/FileUpload"; import { FormikProps } from "formik"; import { Field } from "../../../shared/Field"; import Notifications from "../../../shared/Notifications"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders the bumper/trailer (depending on isTrailer flag) page for new themes in the new themes wizard @@ -33,79 +34,75 @@ const BumperPage = ({ return ( <> -
-
-
-

- {t( - !isTrailer - ? "CONFIGURATION.THEMES.DETAILS.BUMPER.DESCRIPTION" - : "CONFIGURATION.THEMES.DETAILS.TRAILER.DESCRIPTION" - )} -

- {/* notifications */} - -
-
- {t( - !isTrailer - ? "CONFIGURATION.THEMES.DETAILS.BUMPER.ACTIVE" - : "CONFIGURATION.THEMES.DETAILS.TRAILER.ACTIVE" - )} -
-
-
-
- -
- {/* Checkbox for activating bumper/trailer */} -
-
- -
-
-
-
-
- - {/* if checkbox is checked, then render object for uploading files */} - {((!isTrailer && formik.values.bumperActive) || - (isTrailer && formik.values.trailerActive)) && ( -
-
+ +

+ {t( + !isTrailer + ? "CONFIGURATION.THEMES.DETAILS.BUMPER.DESCRIPTION" + : "CONFIGURATION.THEMES.DETAILS.TRAILER.DESCRIPTION" + )} +

+ {/* notifications */} + +
+
+ {t( + !isTrailer + ? "CONFIGURATION.THEMES.DETAILS.BUMPER.ACTIVE" + : "CONFIGURATION.THEMES.DETAILS.TRAILER.ACTIVE" + )} +
+
+
+
+
-
- {/* Upload file for bumper/trailer */} - +
+ {/* Checkbox for activating bumper/trailer */} +
+
+
- )} +
-
+ + {/* if checkbox is checked, then render object for uploading files */} + {((!isTrailer && formik.values.bumperActive) || + (isTrailer && formik.values.trailerActive)) && ( +
+
+ {t( + !isTrailer + ? "CONFIGURATION.THEMES.DETAILS.BUMPER.SELECT" + : "CONFIGURATION.THEMES.DETAILS.TRAILER.SELECT" + )} +
+
+ {/* Upload file for bumper/trailer */} + +
+
+ )} + {/* Show navigation buttons only if page is used for a new theme*/} {!isEdit && ( diff --git a/src/components/configuration/partials/wizard/GeneralPage.tsx b/src/components/configuration/partials/wizard/GeneralPage.tsx index 2e0ea8cb35..5da3865fb6 100644 --- a/src/components/configuration/partials/wizard/GeneralPage.tsx +++ b/src/components/configuration/partials/wizard/GeneralPage.tsx @@ -4,6 +4,7 @@ import Notifications from "../../../shared/Notifications"; import { FormikProps } from "formik"; import { Field } from "../../../shared/Field"; import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders the general page for new themes in the new themes wizard @@ -30,41 +31,37 @@ const GeneralPage = ({ return ( <> {/* Fields for name and description */} -
-
-
-
-
- - - -
-
- - -
-
+ +
+
+ + + +
+
+ +
-
+ {/* Show navigation buttons only if page is used for a new theme*/} {!isEdit && ( diff --git a/src/components/configuration/partials/wizard/ThemeSummaryPage.tsx b/src/components/configuration/partials/wizard/ThemeSummaryPage.tsx index d7edcbaf01..0b0d0b77c6 100644 --- a/src/components/configuration/partials/wizard/ThemeSummaryPage.tsx +++ b/src/components/configuration/partials/wizard/ThemeSummaryPage.tsx @@ -2,6 +2,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons"; import { FormikProps } from "formik"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders the summary page for new themes in the new theme wizard. @@ -29,83 +30,79 @@ const ThemeSummaryPage = ({ return ( <> -
-
-
-
-
- {t("CONFIGURATION.THEMES.DETAILS.SUMMARY.CAPTION")} -
-
-
    - {/* show only when file is uploaded for a list item */} - {formik.values.bumperFile && ( -
  • -

    - {t("CONFIGURATION.THEMES.DETAILS.BUMPER.CAPTION")} -

    -

    - - {t( - "CONFIGURATION.THEMES.DETAILS.BUMPER.FILE_UPLOADED" - )} - - {formik.values.bumperFileName} -

    -
    • - )} - {formik.values.trailerFile && ( -
  • -

    - {t("CONFIGURATION.THEMES.DETAILS.TRAILER.CAPTION")} -

    -

    - - {t( - "CONFIGURATION.THEMES.DETAILS.TRAILER.FILE_UPLOADED" - )} - - {formik.values.trailerFileName} -

    -
    • - )} - {formik.values.titleSlideMode === "upload" && - formik.values.titleSlideBackground && ( -
  • -

    - {t("CONFIGURATION.THEMES.DETAILS.TITLE.CAPTION")} -

    -

    - - {t( - "CONFIGURATION.THEMES.DETAILS.TITLE.FILE_UPLOADED" - )} - - {formik.values.titleSlideBackgroundName} -

    -
    • - )} - {formik.values.watermarkFile && ( -
  • -

    - {t("CONFIGURATION.THEMES.DETAILS.WATERMARK.CAPTION")} -

    -

    - - {t( - "CONFIGURATION.THEMES.DETAILS.WATERMARK.FILE_UPLOADED" - )} - - {formik.values.watermarkFileName} -

    -
    • - )} -
-
-
+ +
+
+ {t("CONFIGURATION.THEMES.DETAILS.SUMMARY.CAPTION")} +
+
+
    + {/* show only when file is uploaded for a list item */} + {formik.values.bumperFile && ( +
  • +

    + {t("CONFIGURATION.THEMES.DETAILS.BUMPER.CAPTION")} +

    +

    + + {t( + "CONFIGURATION.THEMES.DETAILS.BUMPER.FILE_UPLOADED" + )} + + {formik.values.bumperFileName} +

    +
    • + )} + {formik.values.trailerFile && ( +
  • +

    + {t("CONFIGURATION.THEMES.DETAILS.TRAILER.CAPTION")} +

    +

    + + {t( + "CONFIGURATION.THEMES.DETAILS.TRAILER.FILE_UPLOADED" + )} + + {formik.values.trailerFileName} +

    +
    • + )} + {formik.values.titleSlideMode === "upload" && + formik.values.titleSlideBackground && ( +
  • +

    + {t("CONFIGURATION.THEMES.DETAILS.TITLE.CAPTION")} +

    +

    + + {t( + "CONFIGURATION.THEMES.DETAILS.TITLE.FILE_UPLOADED" + )} + + {formik.values.titleSlideBackgroundName} +

    +
    • + )} + {formik.values.watermarkFile && ( +
  • +

    + {t("CONFIGURATION.THEMES.DETAILS.WATERMARK.CAPTION")} +

    +

    + + {t( + "CONFIGURATION.THEMES.DETAILS.WATERMARK.FILE_UPLOADED" + )} + + {formik.values.watermarkFileName} +

    +
    • + )} +
-
+ {/* Button for navigation to next page */} ({ return ( <> -
-
-
-

- {t("CONFIGURATION.THEMES.DETAILS.TITLE.DESCRIPTION")} -

-
- {/*todo: Notification*/} -
-
{t("CONFIGURATION.THEMES.DETAILS.TITLE.ACTIVE")}
-
- {/* Checkbox for activation of title slide*/} -
-
- -
- {/* Checkbox for activating title slide */} -
-
- -
+ +

+ {t("CONFIGURATION.THEMES.DETAILS.TITLE.DESCRIPTION")} +

+ {/*todo: Notification*/} +
+
{t("CONFIGURATION.THEMES.DETAILS.TITLE.ACTIVE")}
+
+ {/* Checkbox for activation of title slide*/} +
+
+ +
+ {/* Checkbox for activating title slide */} +
+
+
+
- {/* Radio buttons for choosing between extraction of title slide or uploading file */} - {formik.values.titleSlideActive && ( -
-
- {t("CONFIGURATION.THEMES.DETAILS.TITLE.BACKGROUND")} -
-
-
-
- {/* Radio button for choosing title slide mode*/} -
- - -
-
- - -
+ {/* Radio buttons for choosing between extraction of title slide or uploading file */} + {formik.values.titleSlideActive && ( +
+
+ {t("CONFIGURATION.THEMES.DETAILS.TITLE.BACKGROUND")} +
+
+
+
+ {/* Radio button for choosing title slide mode*/} +
+ + +
+
+ +
- {/*If title slide mode upload is chosen, use component for file upload */} - {formik.values.titleSlideMode === "upload" && ( - - )}
+ {/*If title slide mode upload is chosen, use component for file upload */} + {formik.values.titleSlideMode === "upload" && ( + + )}
- )} -
-
+
+ )} + {/* Show navigation buttons only if page is used for a new theme*/} {!isEdit && ( //Button for navigation to next page diff --git a/src/components/configuration/partials/wizard/UsagePage.tsx b/src/components/configuration/partials/wizard/UsagePage.tsx index 869a1c5457..6d6dbca46f 100644 --- a/src/components/configuration/partials/wizard/UsagePage.tsx +++ b/src/components/configuration/partials/wizard/UsagePage.tsx @@ -1,6 +1,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { Usage } from "../../../../slices/themeDetailsSlice"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders the usage of a theme in the theme details modal @@ -13,36 +14,32 @@ const UsagePage = ({ const { t } = useTranslation(); return ( -
-
-
-
-
- - - - + +
+
+
{t("CONFIGURATION.THEMES.DETAILS.USAGE.SERIE")}
+ + + + + + + {!!themeUsage.series && themeUsage.series.length > 0 ? ( + themeUsage.series.map((usage, key) => ( + + - - - {!!themeUsage.series && themeUsage.series.length > 0 ? ( - themeUsage.series.map((usage, key) => ( - - - - )) - ) : ( - - - - )} - -
{t("CONFIGURATION.THEMES.DETAILS.USAGE.SERIE")}
{usage.title}
{usage.title}
{t("CONFIGURATION.THEMES.DETAILS.USAGE.EMPTY")}
-
-
+ )) + ) : ( + + {t("CONFIGURATION.THEMES.DETAILS.USAGE.EMPTY")} + + )} + +
-
+ ); }; diff --git a/src/components/configuration/partials/wizard/WatermarkPage.tsx b/src/components/configuration/partials/wizard/WatermarkPage.tsx index 91d6f52a14..b9a8925b66 100644 --- a/src/components/configuration/partials/wizard/WatermarkPage.tsx +++ b/src/components/configuration/partials/wizard/WatermarkPage.tsx @@ -6,6 +6,7 @@ import { Field } from "../../../shared/Field"; import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons"; import FileUpload from "../../../shared/wizard/FileUpload"; import Notifications from "../../../shared/Notifications"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders the watermark page for new themes in the new themes wizard @@ -37,138 +38,134 @@ const WatermarkPage = ({ return ( <> -
-
-
-

{t("CONFIGURATION.THEMES.DETAILS.WATERMARK.DESCRIPTION")}

- + +

{t("CONFIGURATION.THEMES.DETAILS.WATERMARK.DESCRIPTION")}

+ +
+
+ {t("CONFIGURATION.THEMES.DETAILS.WATERMARK.CAPTION")} +
+
+
+
+ +
+ {/* Checkbox for activating watermark */} +
+
+ +
+
+
+
+
+ + {/* if checkbox is checked, then render object for uploading files */} + {formik.values.watermarkActive && ( + <>
- {t("CONFIGURATION.THEMES.DETAILS.WATERMARK.CAPTION")} + {t("CONFIGURATION.THEMES.DETAILS.WATERMARK.UPLOAD")}
-
-
-
- -
- {/* Checkbox for activating watermark */} -
-
- -
-
-
+
+
- {/* if checkbox is checked, then render object for uploading files */} - {formik.values.watermarkActive && ( - <> -
-
- {t("CONFIGURATION.THEMES.DETAILS.WATERMARK.UPLOAD")} -
-
- -
-
- - {/*if file uploaded, then render buttons for choice of position*/} - {formik.values.watermarkFile && ( -
-
- {t("CONFIGURATION.THEMES.DETAILS.WATERMARK.POSITION")} -
-
-
-
-
- - - - -
-
+ {/*if file uploaded, then render buttons for choice of position*/} + {formik.values.watermarkFile && ( +
+
+ {t("CONFIGURATION.THEMES.DETAILS.WATERMARK.POSITION")} +
+
+
+
+
+ + + +
- )} - +
+
)} -
-
-
+ + )} + {/* Show navigation buttons only if page is used for a new theme*/} {!isEdit && ( //Button for navigation to next page diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsExtendedMetadataTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsExtendedMetadataTab.tsx index 3854a366a6..80585cf0c7 100644 --- a/src/components/events/partials/ModalTabsAndPages/DetailsExtendedMetadataTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/DetailsExtendedMetadataTab.tsx @@ -16,6 +16,7 @@ import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils" import { useAppDispatch, useAppSelector } from "../../../../store"; import { MetadataCatalog } from "../../../../slices/eventSlice"; import { AsyncThunk } from "@reduxjs/toolkit"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders metadata details of a certain event or series @@ -69,112 +70,107 @@ const DetailsExtendedMetadataTab = ({ }; return ( -
-
- {/* Notifications */} - - -
- { - //iterate through metadata catalogs - !!metadata && - metadata.length > 0 && - metadata.map((catalog, key) => ( - // initialize form - handleSubmit(values, catalog)} - > - {(formik) => ( - /* Render table for each metadata catalog */ -
-
- {t(catalog.title)} -
-
- - - {/* Render table row for each metadata field depending on type */} - {!!catalog.fields && - catalog.fields.map((field, index) => ( - - - {field.readOnly || - !hasAccess(editAccessRole, user) ? ( - // non-editable field if readOnly is set or user doesn't have edit access rights - !!field.collection && - field.collection.length !== 0 ? ( - - ) : ( - - ) + } + > + { + //iterate through metadata catalogs + !!metadata && + metadata.length > 0 && + metadata.map((catalog, key) => ( + // initialize form + handleSubmit(values, catalog)} + > + {(formik) => ( + /* Render table for each metadata catalog */ +
+
+ {t(catalog.title)} +
+
+
- {t(field.label)} - {field.required && ( - * - )} - {getMetadataCollectionFieldName(field, field, t)}{field.value}
+ + {/* Render table row for each metadata field depending on type */} + {!!catalog.fields && + catalog.fields.map((field, index) => ( + + + {field.readOnly || + !hasAccess(editAccessRole, user) ? ( + // non-editable field if readOnly is set or user doesn't have edit access rights + !!field.collection && + field.collection.length !== 0 ? ( + + ) : ( + + ) + ) : ( + + )} - - ))} - -
+ {t(field.label)} + {field.required && ( + * + )} + {getMetadataCollectionFieldName(field, field, t)}{field.value} + {/* Render single value or multi value editable input */} + {field.type === "mixed_text" && + field.collection?.length !== 0 ? ( + ) : ( - - {/* Render single value or multi value editable input */} - {field.type === "mixed_text" && - field.collection?.length !== 0 ? ( - - ) : ( - - )} -
-
+ + )} + + ))} + + +
- {formik.dirty && ( - <> - {/* Render buttons for updating metadata */} -
- - -
+ {formik.dirty && ( + <> + {/* Render buttons for updating metadata */} +
+ + +
-
- - )} -
+
+ )} - - )) - } -
-
-
+
+ )} + + )) + } + ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx index 09007b0bde..233ffb4cdd 100644 --- a/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx @@ -14,6 +14,7 @@ import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils" import { useAppDispatch, useAppSelector } from "../../../../store"; import { MetadataCatalog } from "../../../../slices/eventSlice"; import { AsyncThunk } from "@reduxjs/toolkit"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders metadata details of a certain event or series @@ -76,95 +77,92 @@ const DetailsMetadataTab = ({ > {(formik) => ( <> -
-
- -
-
-
{t(header)}
-
- - - {/* Render table row for each metadata field depending on type */} - {!!metadataFields && - !!metadataFields.fields && - metadataFields.fields.map((field, key) => ( - - - {field.readOnly ? ( - // non-editable field if readOnly is set - !!field.collection && - field.collection.length !== 0 ? ( - - ) : ( - - ) + } + > +
+
{t(header)}
+
+
- {t(field.label)} - {field.required && ( - * - )} - {getMetadataCollectionFieldName(field, field, t)}{ - field.type === "time" || field.type === "date" - ? - : field.value - }
+ + {/* Render table row for each metadata field depending on type */} + {!!metadataFields && + !!metadataFields.fields && + metadataFields.fields.map((field, key) => ( + + + {field.readOnly ? ( + // non-editable field if readOnly is set + !!field.collection && + field.collection.length !== 0 ? ( + + ) : ( + + ) + ) : ( + + )} - - ))} - -
+ {t(field.label)} + {field.required && ( + * + )} + {getMetadataCollectionFieldName(field, field, t)}{ + field.type === "time" || field.type === "date" + ? + : field.value + } + {/* Render single value or multi value editable input */} + {field.type === "mixed_text" && + field.collection?.length !== 0 ? ( + ) : ( - - {/* Render single value or multi value editable input */} - {field.type === "mixed_text" && - field.collection?.length !== 0 ? ( - - ) : ( - - )} -
-
+ + )} + + ))} + + +
- {formik.dirty && ( - <> - {/* Render buttons for updating metadata */} -
- - -
+ {formik.dirty && ( + <> + {/* Render buttons for updating metadata */} +
+ + +
-
- - )} -
-
+
+ + )}
-
+ )} diff --git a/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx b/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx index a9b5f305ef..0f0ea3bc61 100644 --- a/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx @@ -22,6 +22,7 @@ import { } from "../../../../slices/eventSlice"; import { Recording } from "../../../../slices/recordingSlice"; import lodash, { groupBy } from "lodash"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders the edit page for scheduled events of the corresponding bulk action @@ -112,414 +113,410 @@ const EditScheduledEventsEditPage = ({ return ( <> -
-
-
- + + - {/* Table that shows conflicts with other events*/} - {conflicts.length > 0 && ( -
- - - - - - - - {conflicts.map((conflict) => - conflict.conflicts.map((c, key) => ( - - - - - - - )) + {/* Table that shows conflicts with other events*/} + {conflicts.length > 0 && ( +
+
- {t( - "BULK_ACTIONS.EDIT_EVENTS.GENERAL.CONFLICT_FIRST_EVENT" - )} - - {t( - "BULK_ACTIONS.EDIT_EVENTS.GENERAL.CONFLICT_SECOND_EVENT" - )} - {t("EVENTS.EVENTS.TABLE.START")}{t("EVENTS.EVENTS.TABLE.END")}
{conflict.eventId}{c.title}{c.start}{c.end}
+ +
+ {t( + "BULK_ACTIONS.EDIT_EVENTS.GENERAL.CONFLICT_FIRST_EVENT" )} -
-
- )} + + + {t( + "BULK_ACTIONS.EDIT_EVENTS.GENERAL.CONFLICT_SECOND_EVENT" + )} + + {t("EVENTS.EVENTS.TABLE.START")} + {t("EVENTS.EVENTS.TABLE.END")} + + {conflicts.map((conflict) => + conflict.conflicts.map((c, key) => ( + + {conflict.eventId} + {c.title} + {c.start} + {c.end} + + )) + )} + +
+ )} -
- {t("BULK_ACTIONS.EDIT_EVENTS.EDIT.HEADER")} -
+
+ {t("BULK_ACTIONS.EDIT_EVENTS.EDIT.HEADER")} +
- {/* Repeat table for each selected event */} - {!loading && ( - - {({ insert, remove, push }) => ( - <> - {hasAccess( - "ROLE_UI_EVENTS_DETAILS_METADATA_EDIT", - user - ) && ( + {/* Repeat table for each selected event */} + {!loading && ( + + {({ insert, remove, push }) => ( + <> + {hasAccess( + "ROLE_UI_EVENTS_DETAILS_METADATA_EDIT", + user + ) && ( +
+
{t("BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.FIELDS")}
+
+ + + + + + + + + + + +
+ + {t( + "EVENTS.EVENTS.DETAILS.METADATA.TITLE" + )} + + + {/* + * Per event there are 14 input fields, so with 'key * 14', the right + * event is reached. After the '+' comes the number of the input field. + * This is the first input field for this event. + */} + { + formik.values.editedEvents.forEach((_, i) => { + formik.setFieldValue( + `editedEvents.${i}.changedTitle`, + element.target.value + ); + }); + }} + defaultValue={formik.values.editedEvents.length > 0 ? reduceGroupedEvent(formik.values.editedEvents).title : ""} + /> +
+ + {t( + "EVENTS.EVENTS.DETAILS.METADATA.SERIES" + )} + + + {/* + * Per event there are 14 input fields, so with 'key * 14', the right + * event is reached. After the '+' comes the number of the input field. + * This is the second input field for this event. + */} + 0 ? reduceGroupedEvent(formik.values.editedEvents).changedSeries : "" + } + text={ + formik.values.editedEvents.length > 0 ? findSeriesName(seriesOptions, formik.values.editedEvents) : "" + } + options={seriesOptions} + type={"isPartOf"} + required={false} + handleChange={(element) => { + if (element) { + formik.values.editedEvents.forEach((_, i) => { + formik.setFieldValue( + `editedEvents.${i}.changedSeries`, + element.value + ); + }); + } + }} + placeholder={formik.values.editedEvents.length > 0 ? reduceGroupedEvent(formik.values.editedEvents).series : ""} + tabIndex={2 * 14 + 2} + /> +
+
+
+ )} + { + reduceGroupEvents(Object.values(groupBy(formik.values.editedEvents, i => i.weekday))).map((groupedEvent, key) => (
-
{t("BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.FIELDS")}
+
{t("EVENTS.EVENTS.NEW.WEEKDAYSLONG." + groupedEvent.weekday) + + " (" + + t("BULK_ACTIONS.EDIT_EVENTS.EDIT.EVENTS") + + " " + + formik.values.editedEvents.reduce((acc, cur) => cur.weekday === groupedEvent.weekday ? ++acc : acc, 0) + + ")"} +
- - - - - - - - - -
- - {t( - "EVENTS.EVENTS.DETAILS.METADATA.TITLE" - )} - - - {/* - * Per event there are 14 input fields, so with 'key * 14', the right - * event is reached. After the '+' comes the number of the input field. - * This is the first input field for this event. - */} - { - formik.values.editedEvents.forEach((_, i) => { - formik.setFieldValue( - `editedEvents.${i}.changedTitle`, - element.target.value - ); - }); - }} - defaultValue={formik.values.editedEvents.length > 0 ? reduceGroupedEvent(formik.values.editedEvents).title : ""} - /> -
- - {t( - "EVENTS.EVENTS.DETAILS.METADATA.SERIES" - )} - - - {/* - * Per event there are 14 input fields, so with 'key * 14', the right - * event is reached. After the '+' comes the number of the input field. - * This is the second input field for this event. - */} - 0 ? reduceGroupedEvent(formik.values.editedEvents).changedSeries : "" - } - text={ - formik.values.editedEvents.length > 0 ? findSeriesName(seriesOptions, formik.values.editedEvents) : "" - } - options={seriesOptions} - type={"isPartOf"} - required={false} - handleChange={(element) => { - if (element) { - formik.values.editedEvents.forEach((_, i) => { - formik.setFieldValue( - `editedEvents.${i}.changedSeries`, - element.value - ); - }); - } - }} - placeholder={formik.values.editedEvents.length > 0 ? reduceGroupedEvent(formik.values.editedEvents).series : ""} - tabIndex={2 * 14 + 2} - /> -
-
-
- )} - { - reduceGroupEvents(Object.values(groupBy(formik.values.editedEvents, i => i.weekday))).map((groupedEvent, key) => ( -
-
{t("EVENTS.EVENTS.NEW.WEEKDAYSLONG." + groupedEvent.weekday) - + " (" - + t("BULK_ACTIONS.EDIT_EVENTS.EDIT.EVENTS") - + " " - + formik.values.editedEvents.reduce((acc, cur) => cur.weekday === groupedEvent.weekday ? ++acc : acc, 0) - + ")"} -
-
- - - {hasAccess( - "ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT", - user - ) && ( - <> - - - - - - - + + + + + + - - - - + + + + - + } + }} + placeholder={t( + "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR" + )} + /> - {/* Dropdown for location/input device - * - * Per event there are 14 input fields, so with 'key * 14', the right - * event is reached. After the '+' comes the number of the input field. - * This is the third input field for this event. - */} - - - + + + {/* Dropdown for location/input device + * + * Per event there are 14 input fields, so with 'key * 14', the right + * event is reached. After the '+' comes the number of the input field. + * This is the third input field for this event. + */} + + + + + {/* Radio buttons for weekdays + * + */} + + + - - {/* Radio buttons for weekdays - * - */} - - - - - - )} - -
- {t( - "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.TIMEZONE" - )} - {"UTC" + getTimezoneOffset()}
- {t( - "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_TIME" - )} - - {/* drop-down for hour - * - * Per event there are 14 input fields, so with 'key * 14', the right - * event is reached. After the '+' comes the number of the input field. - * This is the third input field for this event. - */} - { - if (element) { - for (const [i, value] of formik.values.editedEvents.entries()) { - if (value.weekday === groupedEvent.weekday ) { - formik.setFieldValue( - `editedEvents.${i}.changedStartTimeHour`, - element.value - ) - } - } + {hasAccess( + "ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT", + user + ) && ( + <> +
+ {t( + "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.TIMEZONE" + )} + {"UTC" + getTimezoneOffset()}
+ {t( + "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_TIME" + )} + + {/* drop-down for hour + * + * Per event there are 14 input fields, so with 'key * 14', the right + * event is reached. After the '+' comes the number of the input field. + * This is the third input field for this event. + */} + { + if (element) { + for (const [i, value] of formik.values.editedEvents.entries()) { + if (value.weekday === groupedEvent.weekday ) { + formik.setFieldValue( + `editedEvents.${i}.changedStartTimeHour`, + element.value + ) } - }} - placeholder={t( - "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR" - )} - /> - - {/* drop-down for minute - * - * Per event there are 14 input fields, so with 'key * 14', the right - * event is reached. After the '+' comes the number of the input field. - * This is the third input field for this event. - */} - { - if (element) { - for (const [i, value] of formik.values.editedEvents.entries()) { - if (value.weekday === groupedEvent.weekday ) { - formik.setFieldValue( - `editedEvents.${i}.changedStartTimeMinutes`, - element.value - ) - } - } + } + }} + placeholder={t( + "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR" + )} + /> + + {/* drop-down for minute + * + * Per event there are 14 input fields, so with 'key * 14', the right + * event is reached. After the '+' comes the number of the input field. + * This is the third input field for this event. + */} + { + if (element) { + for (const [i, value] of formik.values.editedEvents.entries()) { + if (value.weekday === groupedEvent.weekday ) { + formik.setFieldValue( + `editedEvents.${i}.changedStartTimeMinutes`, + element.value + ) } - }} - placeholder={t( - "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE" - )} - /> -
- {t( - "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.END_TIME" - )} - - {/* drop-down for hour - * - * Per event there are 14 input fields, so with 'key * 14', the right - * event is reached. After the '+' comes the number of the input field. - * This is the third input field for this event. - */} - { - if (element) { - for (const [i, value] of formik.values.editedEvents.entries()) { - if (value.weekday === groupedEvent.weekday ) { - formik.setFieldValue( - `editedEvents.${i}.changedEndTimeHour`, - element.value - ) - } - } + } + }} + placeholder={t( + "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE" + )} + /> +
+ {t( + "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.END_TIME" + )} + + {/* drop-down for hour + * + * Per event there are 14 input fields, so with 'key * 14', the right + * event is reached. After the '+' comes the number of the input field. + * This is the third input field for this event. + */} + { + if (element) { + for (const [i, value] of formik.values.editedEvents.entries()) { + if (value.weekday === groupedEvent.weekday ) { + formik.setFieldValue( + `editedEvents.${i}.changedEndTimeHour`, + element.value + ) } - }} - placeholder={t( - "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR" - )} - /> - - {/* drop-down for minute - * - * Per event there are 14 input fields, so with 'key * 14', the right - * event is reached. After the '+' comes the number of the input field. - * This is the third input field for this event. - */} - { - if (element) { - for (const [i, value] of formik.values.editedEvents.entries()) { - if (value.weekday === groupedEvent.weekday ) { - formik.setFieldValue( - `editedEvents.${i}.changedEndTimeMinutes`, - element.value - ) - } - } - } - }} - placeholder={t( - "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE" - )} - /> -
- {t( - "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION" - )} - - { + if (element) { + for (const [i, value] of formik.values.editedEvents.entries()) { + if (value.weekday === groupedEvent.weekday ) { + formik.setFieldValue( + `editedEvents.${i}.changedEndTimeMinutes`, + element.value + ) + } } - text={ - groupedEvent - .changedLocation + } + }} + placeholder={t( + "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE" + )} + /> +
+ {t( + "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION" + )} + + { + if (element) { + for (const [i, value] of formik.values.editedEvents.entries()) { + if (value.weekday === groupedEvent.weekday ) { + formik.setFieldValue( + `editedEvents.${i}.changedLocation`, + element.value + ) + formik.setFieldValue( + `editedEvents.${i}.changedDeviceInputs`, + element.value + ) + } } - options={inputDevices} - type={"captureAgent"} - required={true} - handleChange={(element) => { - if (element) { - for (const [i, value] of formik.values.editedEvents.entries()) { - if (value.weekday === groupedEvent.weekday ) { - formik.setFieldValue( - `editedEvents.${i}.changedLocation`, - element.value - ) - formik.setFieldValue( - `editedEvents.${i}.changedDeviceInputs`, - element.value - ) - } + } + }} + placeholder={`-- ${t( + "SELECT_NO_OPTION_SELECTED" + )} --`} + /> +
+ {t( + "EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_MULTIPLE.WEEKDAY" + )} + +
+ {weekdays.map((day, index) => ( +
- {t( - "EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_MULTIPLE.WEEKDAY" - )} - -
- {weekdays.map((day, index) => ( - - ))} -
-
-
-
- )) - } - - )} - + {t(day.label)} + + ))} + + + + + )} + + +
+
+ )) + } + )} -
-
-
+ + )} + {/* Navigation buttons */}