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 7b148b4ae9..56651b53bd 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")} -

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

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

+ +
+
{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/DetailsMetadataTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx index 3a63e64cef..08d2252b30 100644 --- a/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx @@ -17,6 +17,7 @@ import { AsyncThunk } from "@reduxjs/toolkit"; import RenderDate from "../../../shared/RenderDate"; import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons"; import { ParseKeys } from "i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders metadata details of a certain event or series @@ -71,103 +72,98 @@ const DetailsMetadataTab = ({ }; 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(header ? header : catalog.title as ParseKeys)} -
-
- - - {/* 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(header ? header : catalog.title as ParseKeys)} +
+
+
- {t(field.label as ParseKeys)} - {field.required && ( - * - )} - {getMetadataCollectionFieldName(field, field, t)}{ - field.type === "time" || field.type === "date" - ? - : 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 as ParseKeys)} + {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" ? ( + ) : ( - - {/* Render single value or multi value editable input */} - {field.type === "mixed_text" ? ( - - ) : ( - - )} -
-
+ + )} + + ))} + + +
- {formik.dirty && ( - <> - {/* Render buttons for updating metadata */} - formik.resetForm()} - createTranslationString="SAVE" - cancelTranslationString="CANCEL" - isLast - /> + {formik.dirty && ( + <> + {/* Render buttons for updating metadata */} + formik.resetForm()} + createTranslationString="SAVE" + cancelTranslationString="CANCEL" + isLast + /> - - )} -
+ )} - - )) - } -
-
-
+
+ )} + + )) + } + ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx b/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx index 3117cef315..4a8ce12105 100644 --- a/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx @@ -24,6 +24,7 @@ import lodash, { groupBy } from "lodash"; import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons"; import SchedulingTime from "../wizards/scheduling/SchedulingTime"; import SchedulingLocation from "../wizards/scheduling/SchedulingLocation"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders the edit page for scheduled events of the corresponding bulk action @@ -114,288 +115,284 @@ 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.map((option) => ({ label: option.name, value: option.value }) )} + 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) + + ")"} +
- - - + + + + { + for (const [i, entry] of formik.values.editedEvents.entries()) { + if (entry.weekday === groupedEvent.weekday ) { + formik.setFieldValue( + `editedEvents.${i}.changedStartTimeHour`, + value + ) + } + } + }} + callbackMinute={(value: string) => { + for (const [i, entry] of formik.values.editedEvents.entries()) { + if (entry.weekday === groupedEvent.weekday ) { + formik.setFieldValue( + `editedEvents.${i}.changedStartTimeMinutes`, + value + ) + } + } }} - defaultValue={formik.values.editedEvents.length > 0 ? reduceGroupedEvent(formik.values.editedEvents).title : ""} /> - - - - - - + + {/* Dropdown for location/input device */} + { + for (const [i, entry] of formik.values.editedEvents.entries()) { + if (entry.weekday === groupedEvent.weekday ) { + formik.setFieldValue( + `editedEvents.${i}.changedLocation`, + value + ) + formik.setFieldValue( + `editedEvents.${i}.changedDeviceInputs`, + value + ) + } + } + }} + /> + {/* Radio buttons for weekdays + * + */} + + + + + + )}
- - {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 - ); - }); + {hasAccess( + "ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT", + user + ) && ( + <> +
+ {t( + "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.TIMEZONE" + )} + {"UTC" + getTimezoneOffset()}
- - {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.map((option) => ({ label: option.name, value: option.value }) )} - required={false} - handleChange={(element) => { - if (element) { - formik.values.editedEvents.forEach((_, i) => { + { + for (const [i, entry] of formik.values.editedEvents.entries()) { + if (entry.weekday === groupedEvent.weekday ) { + formik.setFieldValue( + `editedEvents.${i}.changedEndTimeHour`, + value + ) + } + } + }} + callbackMinute={(value: string) => { + for (const [i, entry] of formik.values.editedEvents.entries()) { + if (entry.weekday === groupedEvent.weekday ) { formik.setFieldValue( - `editedEvents.${i}.changedSeries`, - element.value - ); - }); + `editedEvents.${i}.changedEndTimeMinutes`, + value + ) + } } }} - placeholder={formik.values.editedEvents.length > 0 ? reduceGroupedEvent(formik.values.editedEvents).series : ""} - tabIndex={2 * 14 + 2} /> -
+ {t( + "EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_MULTIPLE.WEEKDAY" + )} + +
+ {weekdays.map((day, index) => ( + + ))} +
+
- )} - { - 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 - ) && ( - <> - - - - - { - for (const [i, entry] of formik.values.editedEvents.entries()) { - if (entry.weekday === groupedEvent.weekday ) { - formik.setFieldValue( - `editedEvents.${i}.changedStartTimeHour`, - value - ) - } - } - }} - callbackMinute={(value: string) => { - for (const [i, entry] of formik.values.editedEvents.entries()) { - if (entry.weekday === groupedEvent.weekday ) { - formik.setFieldValue( - `editedEvents.${i}.changedStartTimeMinutes`, - value - ) - } - } - }} - /> - { - for (const [i, entry] of formik.values.editedEvents.entries()) { - if (entry.weekday === groupedEvent.weekday ) { - formik.setFieldValue( - `editedEvents.${i}.changedEndTimeHour`, - value - ) - } - } - }} - callbackMinute={(value: string) => { - for (const [i, entry] of formik.values.editedEvents.entries()) { - if (entry.weekday === groupedEvent.weekday ) { - formik.setFieldValue( - `editedEvents.${i}.changedEndTimeMinutes`, - value - ) - } - } - }} - /> - - {/* Dropdown for location/input device */} - { - for (const [i, entry] of formik.values.editedEvents.entries()) { - if (entry.weekday === groupedEvent.weekday ) { - formik.setFieldValue( - `editedEvents.${i}.changedLocation`, - value - ) - formik.setFieldValue( - `editedEvents.${i}.changedDeviceInputs`, - value - ) - } - } - }} - /> - {/* Radio buttons for weekdays - * - */} - - - - - - )} - -
- {t( - "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.TIMEZONE" - )} - {"UTC" + getTimezoneOffset()}
- {t( - "EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_MULTIPLE.WEEKDAY" - )} - -
- {weekdays.map((day, index) => ( - - ))} -
-
-
-
- )) - } - - )} - + )) + } + )} -
-
-
+ + )} + {/* Navigation buttons */} ({ return ( <> -
-
-
- {/* Show only if non-scheduled event is selected*/} - {!isAllScheduleEditable(selectedEvents) && ( -
-

{t("BULK_ACTIONS.EDIT_EVENTS.GENERAL.CANNOTSTART")}

-
- )} - {/* Show only if user doesn't have access to all agents*/} - {!isAllAgentAccess(selectedEvents, user) && ( -
-

- {t("BULK_ACTIONS.EDIT_EVENTS.GENERAL.CANNOTEDITSCHEDULE")} -

-
- )} -
-
-
-
{t("BULK_ACTIONS.EDIT_EVENTS.GENERAL.CAPTION")}
-
- - - -
+ +
+ {/* Show only if non-scheduled event is selected*/} + {!isAllScheduleEditable(selectedEvents) && ( +
+

{t("BULK_ACTIONS.EDIT_EVENTS.GENERAL.CANNOTSTART")}

+
+ )} + {/* Show only if user doesn't have access to all agents*/} + {!isAllAgentAccess(selectedEvents, user) && ( +
+

+ {t("BULK_ACTIONS.EDIT_EVENTS.GENERAL.CANNOTEDITSCHEDULE")} +

+
+ )} +
+
+
+
{t("BULK_ACTIONS.EDIT_EVENTS.GENERAL.CAPTION")}
+
+ + + + + + + + + + + {/* Repeat for each selected event */} + {selectedEvents.map((event, key) => ( + + - - + + + + - - - {/* Repeat for each selected event */} - {selectedEvents.map((event, key) => ( - - - - - - - ))} - -
+ onChangeAllSelected(e)} + /> + + {t("EVENTS.EVENTS.TABLE.TITLE")} + + {t("EVENTS.EVENTS.TABLE.SERIES")} + + {t("EVENTS.EVENTS.TABLE.STATUS")} +
onChangeAllSelected(e)} + name="events" + onChange={(e) => onChangeSelected(e, event.id)} + checked={event.selected} /> - - - {t("EVENTS.EVENTS.TABLE.TITLE")} - - {t("EVENTS.EVENTS.TABLE.SERIES")} - - {t("EVENTS.EVENTS.TABLE.STATUS")} - {event.title} + {event.series ? event.series.title : ""} + {t(event.event_status as ParseKeys)}
- onChangeSelected(e, event.id)} - checked={event.selected} - /> - {event.title} - {event.series ? event.series.title : ""} - {t(event.event_status as ParseKeys)}
-
+ ))} + +
-
+ {/* Button for navigation to next page */} ({ return ( <> -
-
- {changes.length > 0 ? ( -
- {/*Repeat for each changed event*/} - {changes.map((event, key) => ( -
-
- {t( - "BULK_ACTIONS.EDIT_EVENTS.SUMMARY.SINGLE_EVENT_CAPTION", - { title: event.title } - )} -
-
- - - - - - + + {changes.length > 0 ? ( +
+ {/*Repeat for each changed event*/} + {changes.map((event, key) => ( +
+
+ {t( + "BULK_ACTIONS.EDIT_EVENTS.SUMMARY.SINGLE_EVENT_CAPTION", + { title: event.title } + )} +
+
+
- {t("BULK_ACTIONS.EDIT_EVENTS.SUMMARY.TYPE")} - - {t("BULK_ACTIONS.EDIT_EVENTS.SUMMARY.PREVIOUS")} - - {t("BULK_ACTIONS.EDIT_EVENTS.SUMMARY.NEXT")} -
+ + + + + + + + + {/* Add table row with old value and new one if something has changed */} + {event.changes.map((row, key) => ( + + + + - - - {/* Add table row with old value and new one if something has changed */} - {event.changes.map((row, key) => ( - - - - - - ))} - -
+ {t("BULK_ACTIONS.EDIT_EVENTS.SUMMARY.TYPE")} + + {t("BULK_ACTIONS.EDIT_EVENTS.SUMMARY.PREVIOUS")} + + {t("BULK_ACTIONS.EDIT_EVENTS.SUMMARY.NEXT")} +
{t(row.type)}{row.previous}{row.next}
{t(row.type)}{row.previous}{row.next}
-
+ ))} + +
- ))} -
- ) : ( -
- {/* Show only if there no changes*/} -
-

{t("BULK_ACTIONS.EDIT_EVENTS.GENERAL.NOCHANGES")}

+ ))} +
+ ) : ( +
+ {/* Show only if there no changes*/} +
+

{t("BULK_ACTIONS.EDIT_EVENTS.GENERAL.NOCHANGES")}

- )} -
-
+
+ )} + {/* Navigation buttons */} { const isFetching = useAppSelector(state => isFetchingAssetAttachmentDetails(state)); return ( -
-
- {/* Notifications */} - - - {/* table with details for the attachment */} -
-
-
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.CAPTION" - ) /* Attachment Details */ - } -
-
- - {isFetching || ( - - - - - - - - - - - - - - {!!attachment.size && attachment.size > 0 && ( - - - - - )} - - - - - - - - - - - - - - - - - + } + > + {/* table with details for the attachment */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.CAPTION" + ) /* Attachment Details */ + } +
+
+
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.ID" - ) /* Id */ - } - {attachment.id}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.TYPE" - ) /* Type */ - } - {attachment.type}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.MIMETYPE" - ) /* Mimetype */ - } - {attachment.mimetype}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.SIZE" - ) /* Size */ - } - {humanReadableBytesFilter(attachment.size)}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.CHECKSUM" - ) /* Checksum */ - } - {attachment.checksum}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.REFERENCE" - ) /* Reference */ - } - {attachment.reference}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.TAGS" - ) /* Tags */ - } - - {!!attachment.tags && attachment.tags.length > 0 - ? attachment.tags.join(", ") - : null} -
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.URL" - ) /* Link */ - } - - {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} - -
+ {isFetching || ( + + + + + + + + + + + + + + {!!attachment.size && attachment.size > 0 && ( + + + + )} -
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.ID" + ) /* Id */ + } + {attachment.id}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.TYPE" + ) /* Type */ + } + {attachment.type}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.MIMETYPE" + ) /* Mimetype */ + } + {attachment.mimetype}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.SIZE" + ) /* Size */ + } + {humanReadableBytesFilter(attachment.size)}
-
-
+ + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.CHECKSUM" + ) /* Checksum */ + } + + {attachment.checksum} + + + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.REFERENCE" + ) /* Reference */ + } + + {attachment.reference} + + + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.TAGS" + ) /* Tags */ + } + + + {!!attachment.tags && attachment.tags.length > 0 + ? attachment.tags.join(", ") + : null} + + + + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.DETAILS.URL" + ) /* Link */ + } + + + {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} + + + + + )} +
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachments.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachments.tsx index 7dc38c7004..5814564f1d 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachments.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachments.tsx @@ -9,6 +9,7 @@ import { fetchAssetAttachmentDetails, setModalAssetsTabHierarchy } from "../../. import { AssetTabHierarchy } from "../modals/EventDetails"; import { useTranslation } from "react-i18next"; import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the attachments sub-tab for assets tab of event details modal @@ -32,91 +33,86 @@ const EventDetailsAssetAttachments = ({ }; return ( -
-
- {/* Notifications */} - - - {/* table with list of attachments */} -
-
-
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.CAPTION" - ) /* Attachments */ - } -
-
- - - - - - - -
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.ID" - ) /* ID */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.TYPE" - ) /* Type */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.MIMETYPE" - ) /* Mimetype */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.TAGS" - ) /* Tags */ - } - + } + > + {/* table with list of attachments */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.CAPTION" + ) /* Attachments */ + } +
+
+ + + + + + + + + + + {isFetching || + attachments.map((item, key) => ( + + + + + + - - - {isFetching || - attachments.map((item, key) => ( - - - - - - - - ))} - -
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.ID" + ) /* ID */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.TYPE" + ) /* Type */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.MIMETYPE" + ) /* Mimetype */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.TAGS" + ) /* Tags */ + } + +
{item.id}{item.type}{item.mimetype} + {!!item.tags && item.tags.length > 0 + ? item.tags.join(", ") + : null} + + + openSubTab("attachment-details", item.id) + } + > + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" + ) /* Details */ + } + +
{item.id}{item.type}{item.mimetype} - {!!item.tags && item.tags.length > 0 - ? item.tags.join(", ") - : null} - - - openSubTab("attachment-details", item.id) - } - > - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" - ) /* Details */ - } - -
-
-
+ ))} + +
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx index bb43bcaeea..f3cb7bf1b0 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx @@ -7,6 +7,7 @@ import { import { humanReadableBytesFilter } from "../../../../utils/eventDetailsUtils"; import { useAppSelector } from "../../../../store"; import { useTranslation } from "react-i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the catalog details sub-tab for assets tab of event details modal @@ -18,122 +19,117 @@ const EventDetailsAssetCatalogDetails = () => { const isFetching = useAppSelector(state => isFetchingAssetCatalogDetails(state)); return ( -
-
- {/* Notifications */} - - - {/* table with details for the catalog */} -
-
-
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.CAPTION" - ) /* Catalog Details */ - } -
-
- - {isFetching || ( - - - - - - - - - - - - - - {catalog.size > 0 && ( - - - - - )} - - - - - - - - - - - - - - - - - + } + > + {/* table with details for the catalog */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.CAPTION" + ) /* Catalog Details */ + } +
+
+
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.ID" - ) /* Id */ - } - {catalog.id}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.TYPE" - ) /* Type */ - } - {catalog.type}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.MIMETYPE" - ) /* Mimetype */ - } - {catalog.mimetype}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.SIZE" - ) /* Size */ - } - {humanReadableBytesFilter(catalog.size)}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.CHECKSUM" - ) /* Checksum */ - } - {catalog.checksum}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.REFERENCE" - ) /* Reference */ - } - {catalog.reference}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.TAGS" - ) /* Tags */ - } - - {!!catalog.tags && catalog.tags.length > 0 - ? catalog.tags.join(", ") - : null} -
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.URL" - ) /* Link */ - } - - {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} - -
+ {isFetching || ( + + + + + + + + + + + + + + {catalog.size > 0 && ( + + + + )} -
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.ID" + ) /* Id */ + } + {catalog.id}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.TYPE" + ) /* Type */ + } + {catalog.type}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.MIMETYPE" + ) /* Mimetype */ + } + {catalog.mimetype}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.SIZE" + ) /* Size */ + } + {humanReadableBytesFilter(catalog.size)}
-
-
+ + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.CHECKSUM" + ) /* Checksum */ + } + + {catalog.checksum} + + + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.REFERENCE" + ) /* Reference */ + } + + {catalog.reference} + + + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.TAGS" + ) /* Tags */ + } + + + {!!catalog.tags && catalog.tags.length > 0 + ? catalog.tags.join(", ") + : null} + + + + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.DETAILS.URL" + ) /* Link */ + } + + + {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} + + + + + )} +
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogs.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogs.tsx index f10c724024..fdbf506af2 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogs.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogs.tsx @@ -9,6 +9,7 @@ import { fetchAssetCatalogDetails, setModalAssetsTabHierarchy } from "../../../. import { AssetTabHierarchy } from "../modals/EventDetails"; import { useTranslation } from "react-i18next"; import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the catalogs sub-tab for assets tab of event details modal @@ -32,87 +33,82 @@ const EventDetailsAssetCatalogs = ({ }; return ( -
-
- {/* Notifications */} - - - {/* table with list of catalogs */} -
-
-
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.CAPTION" - ) /* Catalogs */ - } -
-
- - - - - - - -
- {t("EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.ID") /* ID */} - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.TYPE" - ) /* Type */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.MIMETYPE" - ) /* Mimetype */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.TAGS" - ) /* Tags */ - } - + } + > + {/* table with list of catalogs */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.CAPTION" + ) /* Catalogs */ + } +
+
+ + + + + + + + + + + {isFetching || + catalogs.map((item, key) => ( + + + + + + - - - {isFetching || - catalogs.map((item, key) => ( - - - - - - - - ))} - -
+ {t("EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.ID") /* ID */} + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.TYPE" + ) /* Type */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.MIMETYPE" + ) /* Mimetype */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.TAGS" + ) /* Tags */ + } + +
{item.id}{item.type}{item.mimetype} + {!!item.tags && item.tags.length > 0 + ? item.tags.join(", ") + : null} + + + openSubTab("catalog-details", item.id) + } + > + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" + ) /* Details */ + } + +
{item.id}{item.type}{item.mimetype} - {!!item.tags && item.tags.length > 0 - ? item.tags.join(", ") - : null} - - - openSubTab("catalog-details", item.id) - } - > - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" - ) /* Details */ - } - -
-
-
+ ))} + +
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMedia.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMedia.tsx index 4c8e32cd7f..13e5055831 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMedia.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMedia.tsx @@ -9,6 +9,7 @@ import { fetchAssetMediaDetails, setModalAssetsTabHierarchy } from "../../../../ import { AssetTabHierarchy } from "../modals/EventDetails"; import { useTranslation } from "react-i18next"; import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the media sub-tab for assets tab of event details modal @@ -32,75 +33,70 @@ const EventDetailsAssetMedia = ({ }; return ( -
-
- {/* Notifications */} - - - {/* table with list of media */} -
-
-
- {t("EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.CAPTION") /* Media */} -
-
- - - - - - - -
- {t("EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.ID") /* ID */} - - {t("EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.TYPE") /* Type */} - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.MIMETYPE" - ) /* Mimetype */ - } - - {t("EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.TAGS") /* Tags */} - + } + > + {/* table with list of media */} +
+
+ {t("EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.CAPTION") /* Media */} +
+
+ + + + + + + + + + + {isFetching || + media.map((item, key) => ( + + + + + + - - - {isFetching || - media.map((item, key) => ( - - - - - - - - ))} - -
+ {t("EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.ID") /* ID */} + + {t("EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.TYPE") /* Type */} + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.MIMETYPE" + ) /* Mimetype */ + } + + {t("EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.TAGS") /* Tags */} + +
+ {item.id} + {item.type}{item.mimetype} + {!!item.tags && item.tags.length > 0 + ? item.tags.join(", ") + : null} + + openSubTab("media-details", item.id)} + > + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" + ) /* Details */ + } + +
- {item.id} - {item.type}{item.mimetype} - {!!item.tags && item.tags.length > 0 - ? item.tags.join(", ") - : null} - - openSubTab("media-details", item.id)} - > - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" - ) /* Details */ - } - -
-
-
+ ))} + +
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx index 479e92d8b6..01abdbc6ca 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx @@ -10,6 +10,7 @@ import { } from "../../../../utils/eventDetailsUtils"; import { useAppSelector } from "../../../../store"; import { useTranslation } from "react-i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the media details sub-tab for assets tab of event details modal @@ -31,359 +32,354 @@ const EventDetailsAssetMediaDetails = () => { }, [media.url]); return ( -
-
- {/* Notifications */} - - -
- {/* table with general details for the media */} -
-
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TITLE" - ) /* Media Details */ - } -
-
- - {isFetching || ( - - - - - - - - - - - - - - - - - - - - - - {!!media.size && media.size > 0 && ( - - - - - )} - - - - - - )} -
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.ID" - ) /* Id */ - } - {media.id}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TYPE" - ) /* Type */ - } - {media.type}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.MIMETYPE" - ) /* Mimetype */ - } - {media.mimetype}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TAGS" - ) /* Tags */ - } - - {!!media.tags && media.tags.length > 0 - ? media.tags.join(", ") - : null} -
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.DURATION" - ) /* Duration */ - } - - {!!media.duration - ? formatDuration(media.duration) - : null} -
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SIZE" - ) /* Size */ - } - {humanReadableBytesFilter(media.size)}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.URL" - ) /* Link */ - } - - {media.url.split("?")[0]} -
-
-
- - {/* section with details for the media streams */} -
-
- {t("EVENTS.EVENTS.DETAILS.ASSETS.STREAMS") /* Streams */} -
-
-
- {/* table with details for the audio streams */} -
-
+ } + > + {/* table with general details for the media */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TITLE" + ) /* Media Details */ + } +
+
+ + {isFetching || ( + + + + + + + + + + + + + + + +
{ t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.STREAM_AUDIO" - ) /* Audio streams */ + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.ID" + ) /* Id */ } - - - - - - - - - - - - - - - - - - {!!media.streams.audio && - media.streams.audio.map((audioStream, key) => ( - - - - - - - - - - - - - ))} - -
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.ID" - ) /* ID */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TYPE" - ) /* Type */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.CHANNELS" - ) /* Channels */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.BITRATE" - ) /* Bitrate */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.BITDEPTH" - ) /* Bitdepth */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SAMPLINGRATE" - ) /* Samplingrate */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.FRAMECOUNT" - ) /* Framecount */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.PEAKLEVELDB" - ) /* Peak level DB */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.RMSLEVELDB" - ) /* RMS level DB */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.RMSPEAKDB" - ) /* RMS speak DB */ - } -
{key}{audioStream.type}{audioStream.channels}{audioStream.bitrate}{audioStream.bitdepth}{audioStream.samplingrate}{audioStream.framecount}{audioStream.peakleveldb}{audioStream.rmsleveldb}{audioStream.rmspeakdb}
- - - {/* table with details for the video streams */} -
-
+
{media.id}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TYPE" + ) /* Type */ + } + {media.type}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.MIMETYPE" + ) /* Mimetype */ + } + {media.mimetype}
{ t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.STREAM_VIDEO" - ) /* Video streams */ + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TAGS" + ) /* Tags */ } - - - - - - - - - - - - + + + + + + + + {!!media.size && media.size > 0 && ( + + + + + )} + + + + + + )} +
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.ID" - ) /* ID */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TYPE" - ) /* Type */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.FRAMERATE" - ) /* Framerate */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.BITRATE" - ) /* Bitrate */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.RESOLUTION" - ) /* Resolution */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.FRAMECOUNT" - ) /* Framecount */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SCANTYPE" - ) /* Scantype */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SCANORDER" - ) /* Scanorder */ - } - + {!!media.tags && media.tags.length > 0 + ? media.tags.join(", ") + : null} +
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.DURATION" + ) /* Duration */ + } + + {!!media.duration + ? formatDuration(media.duration) + : null} +
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SIZE" + ) /* Size */ + } + {humanReadableBytesFilter(media.size)}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.URL" + ) /* Link */ + } + + {media.url.split("?")[0]} +
+ + + + {/* section with details for the media streams */} +
+
+ {t("EVENTS.EVENTS.DETAILS.ASSETS.STREAMS") /* Streams */} +
+
+
+ {/* table with details for the audio streams */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.STREAM_AUDIO" + ) /* Audio streams */ + } +
+ + + + + + + + + + + + + + + + + {!!media.streams.audio && + media.streams.audio.map((audioStream, key) => ( + + + + + + + + + + + - - - {!!media.streams.video && - media.streams.video.map((videoStream, key) => ( - - - - - - - - - - - ))} - -
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.ID" + ) /* ID */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TYPE" + ) /* Type */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.CHANNELS" + ) /* Channels */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.BITRATE" + ) /* Bitrate */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.BITDEPTH" + ) /* Bitdepth */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SAMPLINGRATE" + ) /* Samplingrate */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.FRAMECOUNT" + ) /* Framecount */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.PEAKLEVELDB" + ) /* Peak level DB */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.RMSLEVELDB" + ) /* RMS level DB */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.RMSPEAKDB" + ) /* RMS speak DB */ + } +
{key}{audioStream.type}{audioStream.channels}{audioStream.bitrate}{audioStream.bitdepth}{audioStream.samplingrate}{audioStream.framecount}{audioStream.peakleveldb}{audioStream.rmsleveldb}{audioStream.rmspeakdb}
{key} - {videoStream.type} - - - {videoStream.framerate} - - - {videoStream.bitrate} - - - {videoStream.resolution} - - - {videoStream.framecount} - - - {videoStream.scantype} - - - {videoStream.scanorder} - -
-
-
+ ))} +
-
- {/* preview video/audio player (only if we actually have video/audio) */} - {(media.has_video || media.has_audio) && ( -
+ {/* table with details for the video streams */} +
- {t("EVENTS.EVENTS.DETAILS.ASSETS.PREVIEW") /* Preview */} + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.STREAM_VIDEO" + ) /* Video streams */ + }
-
+ + + + + + + + + + + + + + + {!!media.streams.video && + media.streams.video.map((videoStream, key) => ( + + + + + + + + + + + ))} + +
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.ID" + ) /* ID */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.TYPE" + ) /* Type */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.FRAMERATE" + ) /* Framerate */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.BITRATE" + ) /* Bitrate */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.RESOLUTION" + ) /* Resolution */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.FRAMECOUNT" + ) /* Framecount */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SCANTYPE" + ) /* Scantype */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.DETAILS.SCANORDER" + ) /* Scanorder */ + } +
{key} + {videoStream.type} + + + {videoStream.framerate} + + + {videoStream.bitrate} + + + {videoStream.resolution} + + + {videoStream.framecount} + + + {videoStream.scantype} + + + {videoStream.scanorder} + +
+
+
+
+
+ + {/* preview video/audio player (only if we actually have video/audio) */} + {(media.has_video || media.has_audio) && ( +
+
+ {t("EVENTS.EVENTS.DETAILS.ASSETS.PREVIEW") /* Preview */} +
+
+
+ {/* video player */} +
- {/* video player */} -
-
- - - -
-
+ + +
- )} +
-
-
+ )} + ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx index 91876a4769..e69b819808 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx @@ -7,6 +7,7 @@ import { import { humanReadableBytesFilter } from "../../../../utils/eventDetailsUtils"; import { useAppSelector } from "../../../../store"; import { useTranslation } from "react-i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the publication details sub-tab for assets tab of event details modal @@ -18,126 +19,121 @@ const EventDetailsAssetPublicationDetails = () => { const isFetching = useAppSelector(state => isFetchingAssetPublicationDetails(state)); return ( -
-
- {/* Notifications */} - - - {/* table with details for the publication */} -
-
-
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.CAPTION" - ) /* Publication Details */ - } -
-
- - {isFetching || ( - - - - - - - - - - - - - - {!!publication.size && publication.size > 0 && ( - - - - - )} - - - - - - - - - - - - - - - - - + } + > + {/* table with details for the publication */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.CAPTION" + ) /* Publication Details */ + } +
+
+
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.ID" - ) /* Id */ - } - {publication.id}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.TYPE" - ) /* Type */ - } - {publication.type}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.MIMETYPE" - ) /* Mimetype */ - } - {publication.mimetype}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.SIZE" - ) /* Size */ - } - {humanReadableBytesFilter(publication.size)}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.CHANNEL" - ) /* Channel */ - } - {publication.channel}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.REFERENCE" - ) /* Reference */ - } - {publication.reference}
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.TAGS" - ) /* Tags */ - } - - {!!publication.tags && publication.tags.length > 0 - ? publication.tags.join(", ") - : null} -
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.URL" - ) /* Link */ - } - - {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} - -
+ {isFetching || ( + + + + + + + + + + + + + + {!!publication.size && publication.size > 0 && ( + + + + )} -
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.ID" + ) /* Id */ + } + {publication.id}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.TYPE" + ) /* Type */ + } + {publication.type}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.MIMETYPE" + ) /* Mimetype */ + } + {publication.mimetype}
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.SIZE" + ) /* Size */ + } + {humanReadableBytesFilter(publication.size)}
-
-
+ + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.CHANNEL" + ) /* Channel */ + } + + {publication.channel} + + + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.REFERENCE" + ) /* Reference */ + } + + {publication.reference} + + + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.TAGS" + ) /* Tags */ + } + + + {!!publication.tags && publication.tags.length > 0 + ? publication.tags.join(", ") + : null} + + + + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.DETAILS.URL" + ) /* Link */ + } + + + {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} + + + + + )} +
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublications.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublications.tsx index bd740dbb8a..c13025d23b 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublications.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublications.tsx @@ -9,6 +9,7 @@ import { fetchAssetPublicationDetails, setModalAssetsTabHierarchy } from "../../ import { AssetTabHierarchy } from "../modals/EventDetails"; import { useTranslation } from "react-i18next"; import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the publications sub-tab for assets tab of event details modal @@ -32,83 +33,78 @@ const EventDetailsAssetPublications = ({ }; return ( -
-
- {/* Notifications */} - - - {/* table with list of publications */} -
-
-
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.CAPTION" - ) /* Publications */ - } -
-
- - - - - - -
- { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.ID" - ) /* ID */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.CHANNEL" - ) /* Channel */ - } - - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.TAGS" - ) /* Tags */ - } - + } + > + {/* table with list of publications */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.CAPTION" + ) /* Publications */ + } +
+
+ + + + + + + + + + {isFetching || + publications.map((item, key) => ( + + + + + - - - {isFetching || - publications.map((item, key) => ( - - - - - - - ))} - -
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.ID" + ) /* ID */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.CHANNEL" + ) /* Channel */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.TAGS" + ) /* Tags */ + } + +
{item.id}{item.channel} + {!!item.tags && item.tags.length > 0 + ? item.tags.join(", ") + : null} + + + openSubTab("publication-details", item.id) + } + > + { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" + ) /* Details */ + } + +
{item.id}{item.channel} - {!!item.tags && item.tags.length > 0 - ? item.tags.join(", ") - : null} - - - openSubTab("publication-details", item.id) - } - > - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" - ) /* Details */ - } - -
-
-
+ ))} + +
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx index d0a169b18a..07cf5a4105 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx @@ -10,6 +10,7 @@ import { setModalAssetsTabHierarchy, updateAssets } from "../../../../slices/eve import { AssetTabHierarchy } from "../modals/EventDetails"; import { useTranslation } from "react-i18next"; import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the add asset sub-tab for assets tab of event details modal @@ -52,108 +53,105 @@ const EventDetailsAssetsAddAsset = ({ }; return ( -
- {/* Hierarchy navigation */} - - -
- {/* Notifications */} - + + } + modalBodyChildren={} + > - {/* section for adding assets */} -
-
-
- {t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.ADD") /* Attachments */} -
-
- saveAssets(values)} - > - {(formik) => ( -
- {/* file select for upload for different types of assets */} - - - {uploadAssets.length === 0 ? ( - - - - ) : ( - uploadAssets.map((asset, key) => ( - - - + {/*Button to remove asset*/} + + + )) + )} + +
- {t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.NO_OPTIONS")} -
- {" "} - {translateOverrideFallback(asset, t)} - -
- - handleChange(e, formik, asset.id) - } - type="file" - tabIndex={0} - /> - {formik.values[asset.id] && ( - - {formik.values[asset.id].name.substr( - 0, - 50 - )} - + {/* section for adding assets */} +
+
+ {t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.ADD") /* Attachments */} +
+
+ saveAssets(values)} + > + {(formik) => ( +
+ {/* file select for upload for different types of assets */} + + + {uploadAssets.length === 0 ? ( + + + + ) : ( + uploadAssets.map((asset, key) => ( + + + - {/*Button to remove asset*/} - - - )) - )} - -
+ {t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.NO_OPTIONS")} +
+ {" "} + {translateOverrideFallback(asset, t)} + +
+ + handleChange(e, formik, asset.id) + } + type="file" + tabIndex={0} + /> + {formik.values[asset.id] && ( + + {formik.values[asset.id].name.substr( + 0, + 50 )} -
- 		- { - formik.setFieldValue(asset.id, null); - const element = document.getElementById(asset.id) as HTMLInputElement; - if (element) { - element.value = ""; - } - }} - /> -
+ + )} +
+
+ { + formik.setFieldValue(asset.id, null); + const element = document.getElementById(asset.id) as HTMLInputElement; + if (element) { + element.value = ""; + } + }} + /> +
- {/* add asset button */} -
- -
-
- )} - -
-
+ {/* add asset button */} +
+ +
+
+ )} +
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsTab.tsx index 3a0b934ae2..95f9d17ada 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsTab.tsx @@ -33,6 +33,7 @@ import EventDetailsAssetPublications from "./EventDetailsAssetPublications"; import EventDetailsAssetPublicationDetails from "./EventDetailsAssetPublicationDetails"; import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor"; import { ParseKeys } from "i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the main assets tab of event details modal @@ -137,167 +138,162 @@ const EventDetailsAssetsTab = ({ ))} {((assetsTabHierarchy === "entry" && ( -
-
- {/* Notifications */} - - - {/* table with types of assets */} -
-
- {" "} - {/* Assets */} -
{t("EVENTS.EVENTS.DETAILS.ASSETS.CAPTION")}
-
- {isFetching || ( - - - - - - - - - - - + + +
- {" "} - {t("EVENTS.EVENTS.DETAILS.ASSETS.TYPE") /* Type */} - - {" "} - {t("EVENTS.EVENTS.DETAILS.ASSETS.SIZE") /* Size */} - - {!isFetchingAssetUploadOptions && - !!uploadAssetOptions && - uploadAssetOptions.filter( - (asset) => asset.type !== "track" - ).length > 0 && - !transactionsReadOnly && - hasAccess( - "ROLE_UI_EVENTS_DETAILS_ASSETS_EDIT", - user - ) && ( - - openSubTab( - "add-asset", - "newassetupload", - ) - } - > - {t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.ADD")} - - )} -
+ } + > + {/* table with types of assets */} +
+ {" "} + {/* Assets */} +
{t("EVENTS.EVENTS.DETAILS.ASSETS.CAPTION")}
+
+ {isFetching || ( + + + + + + + + + + + + + - - - - - + + + + + - - - - - + + + + + + + + + + - - - - - - - - - -
+ {" "} + {t("EVENTS.EVENTS.DETAILS.ASSETS.TYPE") /* Type */} + + {" "} + {t("EVENTS.EVENTS.DETAILS.ASSETS.SIZE") /* Size */} + + {!isFetchingAssetUploadOptions && + !!uploadAssetOptions && + uploadAssetOptions.filter( + (asset) => asset.type !== "track" + ).length > 0 && + !transactionsReadOnly && + hasAccess( + "ROLE_UI_EVENTS_DETAILS_ASSETS_EDIT", + user + ) && ( + + openSubTab( + "add-asset", + "newassetupload", + ) + } + > + {t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.ADD")} + + )} +
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.CAPTION" + ) /* Attachments */ + } + {assets.attachments} + {assets.attachments > 0 && ( + + openSubTab("asset-attachments", "attachment") + } + > { t( - "EVENTS.EVENTS.DETAILS.ASSETS.ATTACHMENTS.CAPTION" - ) /* Attachments */ + "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" + ) /* Details */ } - {assets.attachments} - {assets.attachments > 0 && ( - - openSubTab("asset-attachments", "attachment") - } - > - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" - ) /* Details */ - } - - )} -
+ + )} +
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.CAPTION" + ) /* Catalogs */ + } + {assets.catalogs} + {assets.catalogs > 0 && ( + + openSubTab("asset-catalogs", "catalog") + } + > { t( - "EVENTS.EVENTS.DETAILS.ASSETS.CATALOGS.CAPTION" - ) /* Catalogs */ + "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" + ) /* Details */ } - {assets.catalogs} - {assets.catalogs > 0 && ( - - openSubTab("asset-catalogs", "catalog") - } - > - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" - ) /* Details */ - } - - )} -
+ + )} +
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.CAPTION" + ) /* Media */ + } + {assets.media} + {assets.media > 0 && ( + openSubTab("asset-media", "media")} + > { t( - "EVENTS.EVENTS.DETAILS.ASSETS.MEDIA.CAPTION" - ) /* Media */ + "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" + ) /* Details */ + } + + )} +
+ { + t( + "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.CAPTION" + ) /* Publications */ + } + {assets.publications} + {assets.publications > 0 && ( + + openSubTab("asset-publications", "publication") } - {assets.media} - {assets.media > 0 && ( - openSubTab("asset-media", "media")} - > - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" - ) /* Details */ - } - - )} -
+ > { t( - "EVENTS.EVENTS.DETAILS.ASSETS.PUBLICATIONS.CAPTION" - ) /* Publications */ + "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" + ) /* Details */ } - {assets.publications} - {assets.publications > 0 && ( - - openSubTab("asset-publications", "publication") - } - > - { - t( - "EVENTS.EVENTS.DETAILS.ASSETS.DETAILS" - ) /* Details */ - } - - )} -
- )} -
-
+ + )} +
+ )}
-
+ )) || (assetsTabHierarchy === "add-asset" && ( -
- -
-
-
{t(header)}
-
-
- { - /* all comments listed below each other */ - comments.map((comment, key) => ( - /* one comment */ -
-
- - {/* details about the comment */} -
- {t("dateFormats.dateTime.short", { - dateTime: renderValidDate(comment.creationDate), - }) || ""} -
-

{comment.author.name}

- - - {t("EVENTS.EVENTS.DETAILS.COMMENTS.REASON")} - - :{" " + t(comment.reason as ParseKeys) || ""} - - - {/* comment text */} -

{comment.text}

- - {/* links with performable actions for the comment */} - {hasAccess( - "ROLE_UI_EVENTS_DETAILS_COMMENTS_DELETE", - user - ) && ( - deleteComment(comment)} - extraClassName="delete" - > - {t("EVENTS.EVENTS.DETAILS.COMMENTS.DELETE")} - - )} - {hasAccess( - "ROLE_UI_EVENTS_DETAILS_COMMENTS_REPLY", - user - ) && ( - replyTo(comment, key) /* enters reply mode */ - } - extraClassName="reply" - > - {t("EVENTS.EVENTS.DETAILS.COMMENTS.REPLY")} - - )} - - {t("EVENTS.EVENTS.DETAILS.COMMENTS.RESOLVED")} - - - { - /* all replies to this comment listed below each other */ - comment.replies.map((reply, replyKey) => ( -
-
- - {/* details about the reply and reply text */} -
- {t("dateFormats.dateTime.short", { - dateTime: renderValidDate(reply.creationDate), - }) || ""} -
-

{reply.author.name}

- - - {t("EVENTS.EVENTS.DETAILS.COMMENTS.REASON")} - - :{" " + t(comment.reason as ParseKeys) || ""} - -

- @{comment.author.name} {reply.text} -

- - {/* link for deleting the reply */} - {hasAccess( - "ROLE_UI_EVENTS_DETAILS_COMMENTS_DELETE", - user - ) && ( - - deleteReply(comment, reply) - } - extraClassName="delete" - > - - {t("EVENTS.EVENTS.DETAILS.COMMENTS.DELETE")} - - )} -
- )) - } -
- )) - } -
-
- + } + > +
+
{t(header)}
+
+
{ - /* form for writing a comment (not shown, while replying to a comment is active) */ - replyToComment || - (hasAccess("ROLE_UI_EVENTS_DETAILS_COMMENTS_CREATE", user) && ( -
- {/* text field */} - + /* all comments listed below each other */ + comments.map((comment, key) => ( + /* one comment */ +
+
- {/* drop-down for selecting a reason for the comment */} -
- ({ label: value, value: key }))} - required={true} - handleChange={(element) => { - if (element) { - setCommentReason(element.value) - } - }} - placeholder={t( - "EVENTS.EVENTS.DETAILS.COMMENTS.SELECTPLACEHOLDER" - )} - customCSS={{width: 200, optionPaddingTop: 5, optionLineHeight: "105%"}} - /> -
+ {/* details about the comment */} +
+ {t("dateFormats.dateTime.short", { + dateTime: renderValidDate(comment.creationDate), + }) || ""} +
+

{comment.author.name}

+ + + {t("EVENTS.EVENTS.DETAILS.COMMENTS.REASON")} + + :{" " + t(comment.reason as ParseKeys) || ""} + - {/* submit button for comment (only active, if text has been written and a reason has been selected) */} - - - )) - } + {/* comment text */} +

{comment.text}

- { - /* form for writing a reply to a comment (only shown, while replying to a comment is active) */ - replyToComment && ( -
- {/* text field */} - - - {/* 'resolved' checkbox */} + {/* links with performable actions for the comment */} {hasAccess( - "ROLE_UI_EVENTS_DETAILS_COMMENTS_RESOLVE", + "ROLE_UI_EVENTS_DETAILS_COMMENTS_DELETE", user ) && ( - <> -
- - setCommentReplyIsResolved(!commentReplyIsResolved) - } - /> - -
- + deleteComment(comment)} + extraClassName="delete" + > + {t("EVENTS.EVENTS.DETAILS.COMMENTS.DELETE")} + )} - - {/* cancel button (exits reply mode) */} - - - {/* submit button for comment reply (only active, if text has been written) */} - -
- ) + {t("EVENTS.EVENTS.DETAILS.COMMENTS.RESOLVED")} + + + { + /* all replies to this comment listed below each other */ + comment.replies.map((reply, replyKey) => ( +
+
+ + {/* details about the reply and reply text */} +
+ {t("dateFormats.dateTime.short", { + dateTime: renderValidDate(reply.creationDate), + }) || ""} +
+

{reply.author.name}

+ + + {t("EVENTS.EVENTS.DETAILS.COMMENTS.REASON")} + + :{" " + t(comment.reason as ParseKeys) || ""} + +

+ @{comment.author.name} {reply.text} +

+ + {/* link for deleting the reply */} + {hasAccess( + "ROLE_UI_EVENTS_DETAILS_COMMENTS_DELETE", + user + ) && ( + + deleteReply(comment, reply) + } + extraClassName="delete" + > + + {t("EVENTS.EVENTS.DETAILS.COMMENTS.DELETE")} + + )} +
+ )) + } +
+ )) }
+ + { + /* form for writing a comment (not shown, while replying to a comment is active) */ + replyToComment || + (hasAccess("ROLE_UI_EVENTS_DETAILS_COMMENTS_CREATE", user) && ( +
+ {/* text field */} + + + {/* drop-down for selecting a reason for the comment */} +
+ ({ label: value, value: key }))} + required={true} + handleChange={(element) => { + if (element) { + setCommentReason(element.value) + } + }} + placeholder={t( + "EVENTS.EVENTS.DETAILS.COMMENTS.SELECTPLACEHOLDER" + )} + customCSS={{width: 200, optionPaddingTop: 5, optionLineHeight: "105%"}} + /> +
+ + {/* submit button for comment (only active, if text has been written and a reason has been selected) */} + +
+ )) + } + + { + /* form for writing a reply to a comment (only shown, while replying to a comment is active) */ + replyToComment && ( +
+ {/* text field */} + + + {/* 'resolved' checkbox */} + {hasAccess( + "ROLE_UI_EVENTS_DETAILS_COMMENTS_RESOLVE", + user + ) && ( + <> +
+ + setCommentReplyIsResolved(!commentReplyIsResolved) + } + /> + +
+ + )} + + {/* cancel button (exits reply mode) */} + + + {/* submit button for comment reply (only active, if text has been written) */} + +
+ ) + }
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx index 5e8e8d7bae..ab37254b02 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx @@ -5,6 +5,7 @@ import { getPublications } from "../../../../selectors/eventDetailsSelectors"; import { useAppDispatch, useAppSelector } from "../../../../store"; import { fetchEventPublications } from "../../../../slices/eventDetailsSlice"; import { ParseKeys } from "i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; const EventDetailsPublicationTab = ({ eventId, @@ -29,74 +30,71 @@ const EventDetailsPublicationTab = ({ return ( <> -
-
- -
-
-
{t("EVENTS.EVENTS.DETAILS.PUBLICATIONS.CAPTION")}
-
- {publications?.length > 0 ? ( - <> -

- {t( - "EVENTS.EVENTS.DETAILS.PUBLICATIONS.PUBLICATION_DESCRIPTION" - )} -

- {/* list all publications depending on their existing information */} - + + ) : ( +

+ {t( + "EVENTS.EVENTS.DETAILS.PUBLICATIONS.NO_PUBLICATIONS_AVAILABLE" )} -

-
+

+ )}
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx index 7d91e5b58a..1af8e2480a 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx @@ -52,6 +52,7 @@ import SchedulingLocation from "../wizards/scheduling/SchedulingLocation"; import SchedulingInputs from "../wizards/scheduling/SchedulingInputs"; import SchedulingConflicts from "../wizards/scheduling/SchedulingConflicts"; import { ParseKeys } from "i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /**../wizards/scheduling/SchedulingTime * This component manages the main assets tab of event details modal @@ -220,321 +221,316 @@ const EventDetailsSchedulingTab = ({ }; return ( -
-
- {/* Notifications */} - - -
- { - - } - - { - /* Scheduling configuration */ - hasSchedulingProperties && ( - /* Initialize form */ - submitForm(values).then((r) => {})} - > - {(formik) => ( -
-
- - { - t( - "EVENTS.EVENTS.DETAILS.SCHEDULING.CAPTION" - ) /* Scheduling configuration */ - } - -
-
- - - {/* time zone */} - - - - - - {/* start date */} - - - - + } + > + { + + } - {/* start time */} - {hasAccessRole && ( - { - changeStartHour( - value, - formik.values, - formik.setFieldValue, - eventId, - checkConflictsWrapper - ) - }} - callbackMinute={(value: string) => { - changeStartMinute( - value, - formik.values, - formik.setFieldValue, - eventId, - checkConflictsWrapper - ) - }} - /> + { + /* Scheduling configuration */ + hasSchedulingProperties && ( + /* Initialize form */ + submitForm(values).then((r) => {})} + > + {(formik) => ( +
+
+ + { + t( + "EVENTS.EVENTS.DETAILS.SCHEDULING.CAPTION" + ) /* Scheduling configuration */ + } + +
+
+
- {t( - "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.TIMEZONE" - )} - {tz}
- {t( - "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_DATE" - )} - - {hasAccessRole && - accessAllowed(formik.values.captureAgent) ? ( - /* date picker for start date */ - - value && changeStartDate( - value, - formik.values, - formik.setFieldValue, - eventId, - checkConflictsWrapper - ) - } - showYearDropdown - showMonthDropdown - yearDropdownItemNumber={2} - dateFormat="P" - popperClassName="datepicker-custom" - className="datepicker-custom-input" - portalId="root" - locale={currentLanguage?.dateLocale} - strictParsing - /> - ) : ( - <> - {sourceStartDate.toLocaleDateString( - currentLanguage ? currentLanguage.dateLocale.code : undefined - )} - - )} -
+ + {/* time zone */} + + - - - + + + + + {/* start date */} + + + - - - + )} - {/* end time */} - {hasAccessRole && ( - { - changeEndHour( - value, - formik.values, - formik.setFieldValue, - eventId, - checkConflictsWrapper - ) - }} - callbackMinute={(value: string) => { - changeEndMinute( - value, - formik.values, - formik.setFieldValue, - eventId, - checkConflictsWrapper - ) - }} - /> + + + + {/* start time */} + {hasAccessRole && ( + { + changeStartHour( + value, + formik.values, + formik.setFieldValue, + eventId, + checkConflictsWrapper + ) + }} + callbackMinute={(value: string) => { + changeStartMinute( + value, + formik.values, + formik.setFieldValue, + eventId, + checkConflictsWrapper + ) + }} + /> + )} + {!hasAccessRole && ( + + + + + )} + {/* duration */} + {hasAccessRole && ( + { + changeDurationHour( + value, + formik.values, + formik.setFieldValue, + eventId, + checkConflictsWrapper + ) + }} + callbackMinute={(value: string) => { + changeDurationMinute( + value, + formik.values, + formik.setFieldValue, + eventId, + checkConflictsWrapper + ) + }} + /> + )} + {!hasAccessRole && ( + + + + + )} + {/* end time */} + {hasAccessRole && ( + { + changeEndHour( + value, + formik.values, + formik.setFieldValue, + eventId, + checkConflictsWrapper ) - } - {!hasAccessRole && ( - - - + + - + )} - {/* capture agent (aka. room or location) */} - {hasAccessRole && ( - filterCaptureAgents(a))} - disabled={!accessAllowed(formik.values.captureAgent)} - title={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION"} - placeholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION"} - callback={(value: string) => { - changeInputs( - value, - formik.setFieldValue - ) - }} - /> - )} - {!hasAccessRole && - - - - - } - - {/* inputs */} + + + )} + {/* capture agent (aka. room or location) */} + {hasAccessRole && ( + filterCaptureAgents(a))} + disabled={!accessAllowed(formik.values.captureAgent)} + title={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION"} + placeholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION"} + callback={(value: string) => { + changeInputs( + value, + formik.setFieldValue + ) + }} + /> + )} + {!hasAccessRole && - + - -
+ {t( + "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.TIMEZONE" )} - {!hasAccessRole && ( -
- {t("EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_TIME")} - - {source.start.hour ? makeTwoDigits(source.start.hour) : ""}: - {source.start.minute ? makeTwoDigits(source.start.minute) : ""} -
{tz}
+ {t( + "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_DATE" )} - {/* duration */} - {hasAccessRole && ( - { - changeDurationHour( - value, - formik.values, - formik.setFieldValue, - eventId, - checkConflictsWrapper - ) - }} - callbackMinute={(value: string) => { - changeDurationMinute( + + {hasAccessRole && + accessAllowed(formik.values.captureAgent) ? ( + /* date picker for start date */ + + value && changeStartDate( value, formik.values, formik.setFieldValue, eventId, checkConflictsWrapper ) - }} + } + showYearDropdown + showMonthDropdown + yearDropdownItemNumber={2} + dateFormat="P" + popperClassName="datepicker-custom" + className="datepicker-custom-input" + portalId="root" + locale={currentLanguage?.dateLocale} + strictParsing /> - )} - {!hasAccessRole && ( -
- {t( - "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.DURATION" + ) : ( + <> + {sourceStartDate.toLocaleDateString( + currentLanguage ? currentLanguage.dateLocale.code : undefined )} - - {source.duration.hour ? makeTwoDigits(source.duration.hour) : ""}: - {source.duration.minute ? makeTwoDigits(source.duration.minute) : ""} -
+ {t("EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_TIME")} + + {source.start.hour ? makeTwoDigits(source.start.hour) : ""}: + {source.start.minute ? makeTwoDigits(source.start.minute) : ""} +
+ {t( + "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.DURATION" )} - {hasAccessRole && - formik.values.scheduleEndDate.toString() !== - formik.values.scheduleStartDate.toString() && ( - + + {source.duration.hour ? makeTwoDigits(source.duration.hour) : ""}: + {source.duration.minute ? makeTwoDigits(source.duration.minute) : ""} +
- {t( - "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.END_TIME" - )} - - {source.end.hour ? makeTwoDigits(source.end.hour) : ""}: - {source.end.minute ? makeTwoDigits(source.end.minute) : ""} - {formik.values.scheduleEndDate.toString() !== - formik.values.scheduleStartDate.toString() && ( - - {new Date( - formik.values.scheduleEndDate - ).toLocaleDateString( - currentLanguage ? currentLanguage.dateLocale.code : undefined - )} - + }} + callbackMinute={(value: string) => { + changeEndMinute( + value, + formik.values, + formik.setFieldValue, + eventId, + checkConflictsWrapper + ) + }} + /> + )} + {hasAccessRole && + formik.values.scheduleEndDate.toString() !== + formik.values.scheduleStartDate.toString() && ( + + ) + } + {!hasAccessRole && ( +
+ {t( + "EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.END_TIME" + )} + + {source.end.hour ? makeTwoDigits(source.end.hour) : ""}: + {source.end.minute ? makeTwoDigits(source.end.minute) : ""} + {formik.values.scheduleEndDate.toString() !== + formik.values.scheduleStartDate.toString() && ( + + {new Date( + formik.values.scheduleEndDate + ).toLocaleDateString( + currentLanguage ? currentLanguage.dateLocale.code : undefined )} -
- {t( - "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION" - )} - {source.device.name}
{t( - "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.INPUTS" + "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION" )} - {!!formik.values.captureAgent && - !!getInputs(formik.values.captureAgent) && - getInputs(formik.values.captureAgent).length > - 0 && - (hasAccessRole && - accessAllowed(formik.values.captureAgent) - ? - : formik.values.inputs.map((input, key) => ( - - {getInputForAgent(formik.values.captureAgent, input)} -
- - )))} - 		{source.device.name}
-
+ } - {/* Save and cancel buttons */} - {formik.dirty && ( - <> - {/* Render buttons for updating scheduling */} - { - formik.resetForm({ - values: getInitialValues(), - }); - }} - createTranslationString="SAVE" - cancelTranslationString="CANCEL" - isLast - /> - - )} -
+ {/* inputs */} + + + {t( + "EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.INPUTS" + )} + + + {!!formik.values.captureAgent && + !!getInputs(formik.values.captureAgent) && + getInputs(formik.values.captureAgent).length > + 0 && + (hasAccessRole && + accessAllowed(formik.values.captureAgent) + ? + : formik.values.inputs.map((input, key) => ( + + {getInputForAgent(formik.values.captureAgent, input)} +
+ + )))} + + + + +
+ + {/* Save and cancel buttons */} + {formik.dirty && ( + <> + {/* Render buttons for updating scheduling */} + { + formik.resetForm({ + values: getInitialValues(), + }); + }} + createTranslationString="SAVE" + cancelTranslationString="CANCEL" + isLast + /> + )} - - ) - } -
-
-
+
+ )} + + ) + } + ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsStatisticsTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsStatisticsTab.tsx index 8d07c2364e..25fa7722a3 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsStatisticsTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsStatisticsTab.tsx @@ -9,6 +9,7 @@ import { fetchEventStatisticsValueUpdate } from "../../../../slices/eventDetails import { useTranslation } from "react-i18next"; import { createChartOptions } from "../../../../utils/statisticsUtils"; import { ParseKeys } from "i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the statistics tab of the event details modal @@ -34,57 +35,53 @@ const EventDetailsStatisticsTab = ({ }; return ( -
-
-
- {hasError ? ( - /* error message */ -
-
{t(header) /* Statistics */}
-
- {t("STATISTICS.NOT_AVAILABLE")} -
-
- ) : ( - /* iterates over the different available statistics */ - statistics.map((stat, key) => ( -
- {/* title of statistic */} -
{t(stat.title as ParseKeys)}
+ + {hasError ? ( + /* error message */ +
+
{t(header) /* Statistics */}
+
+ {t("STATISTICS.NOT_AVAILABLE")} +
+
+ ) : ( + /* iterates over the different available statistics */ + statistics.map((stat, key) => ( +
+ {/* title of statistic */} +
{t(stat.title as ParseKeys)}
- {stat.providerType === "timeSeries" ? ( - /* visualization of statistic for time series data */ -
- -
- ) : ( - /* unsupported type message */ -
- {t("STATISTICS.UNSUPPORTED_TYPE")} -
- )} + {stat.providerType === "timeSeries" ? ( + /* visualization of statistic for time series data */ +
+
- )) - )} -
-
-
+ ) : ( + /* unsupported type message */ +
+ {t("STATISTICS.UNSUPPORTED_TYPE")} +
+ )} +
+ )) + )} + ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx index e6b7f014d5..4f065b16fd 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx @@ -19,6 +19,7 @@ import { WorkflowTabHierarchy } from "../modals/EventDetails"; import { useTranslation } from "react-i18next"; import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor"; import { ParseKeys } from "i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the workflow details for the workflows tab of the event details modal @@ -52,17 +53,17 @@ const EventDetailsWorkflowDetails = ({ } return ( -
- {/* Hierarchy navigation */} + - -
-
+ } + > {/* Notifications */} @@ -351,9 +352,7 @@ const EventDetailsWorkflowDetails = ({
)} -
-
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx index 6138bdc2eb..694255d914 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx @@ -12,6 +12,7 @@ import { renderValidDate } from "../../../../utils/dateUtils"; import { WorkflowTabHierarchy } from "../modals/EventDetails"; import { useTranslation } from "react-i18next"; import { setModalWorkflowTabHierarchy } from "../../../../slices/eventDetailsSlice"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the workflow error details for the workflows tab of the event details modal @@ -29,9 +30,10 @@ const EventDetailsWorkflowErrorDetails = () => { }; return ( -
- {/* Hierarchy navigation */} - { } subTabArgument2={"workflow-error-details"} /> + } + modalBodyChildren={} + > + {/* 'Error Details' table */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HEADER" + ) /* Error Details */ + } +
+
+ + {isFetching || ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
- {/* Notifications */} - - - {/* 'Error Details' table */} -
-
-
- { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HEADER" - ) /* Error Details */ - } -
-
-
+ { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.SEVERITY" + ) /* Severity */ + } + {errorDetails.severity}
+ { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TITLE" + ) /* Title */ + } + {errorDetails.title}
+ { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.DESCRIPTION" + ) /* Description */ + } + {errorDetails.description}
+ { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.JOB_ID" + ) /* Job ID */ + } + {errorDetails.job_id}
+ { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.DATE" + ) /* Date */ + } + + {t("dateFormats.dateTime.medium", { + dateTime: renderValidDate(errorDetails.timestamp), + })} +
+ { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HOST" + ) /* Host */ + } + {errorDetails.processing_host}
+ { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TYPE" + ) /* Type */ + } + {errorDetails.service_type}
+ { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TECHNICAL_DETAILS" + ) /* Technical Details */ + } +
- {isFetching || ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* list of technical error details */} - - - - )} -
- { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.SEVERITY" - ) /* Severity */ - } - {errorDetails.severity}
- { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TITLE" - ) /* Title */ - } - {errorDetails.title}
- { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.DESCRIPTION" - ) /* Description */ - } - {errorDetails.description}
- { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.JOB_ID" - ) /* Job ID */ - } - {errorDetails.job_id}
- { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.DATE" - ) /* Date */ - } - - {t("dateFormats.dateTime.medium", { - dateTime: renderValidDate(errorDetails.timestamp), - })} -
- { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HOST" - ) /* Host */ - } - {errorDetails.processing_host}
- { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TYPE" - ) /* Type */ - } - {errorDetails.service_type}
- { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TECHNICAL_DETAILS" - ) /* Technical Details */ - } - - {errorDetails.details.map((item, key) => ( -
-

{item.name}

-
- 
{item.value}
-
-
- ))} -
-
-
+ {/* list of technical error details */} + + {errorDetails.details.map((item, key) => ( +
+

{item.name}

+
+ 
{item.value}
+
+
+ ))} + + + + )} +
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx index 7f74baaed2..7c55d52d89 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx @@ -18,6 +18,7 @@ import { renderValidDate } from "../../../../utils/dateUtils"; import { WorkflowTabHierarchy } from "../modals/EventDetails"; import { useTranslation } from "react-i18next"; import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the workflow errors for the workflows tab of the event details modal @@ -62,120 +63,116 @@ const EventDetailsWorkflowErrors = ({ }; return ( -
- {/* Hierarchy navigation */} - + + } + modalBodyChildren={} + > + {/* 'Errors & Warnings' table */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.HEADER" + ) /* Errors & Warnings */ + } +
-
- {/* Notifications */} - - - {/* 'Errors & Warnings' table */} -
-
-
- { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.HEADER" - ) /* Errors & Warnings */ - } -
+
+ + {isFetching || ( + <> + + + + + + + + { + /* error details */ + errors.entries.map((item, key) => ( + + + + -
-
+ + { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DATE" + ) /* Date */ + } + + + { + t( + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.TITLE" + ) /* Errors & Warnings */ + } + + +
+ {!!item.severity && ( +
+ )} +
+ {t("dateFormats.dateTime.medium", { + dateTime: renderValidDate(item.timestamp), + })} + {item.title}
- {isFetching || ( - <> - + {/* link to 'Error Details' sub-Tab */} + + + )) + } + { + /* No errors message */ + errors.entries.length === 0 && ( - - - - - { - /* error details */ - errors.entries.map((item, key) => ( - - - - - - {/* link to 'Error Details' sub-Tab */} - - - )) - } - { - /* No errors message */ - errors.entries.length === 0 && ( - - - - ) - } - - - )} -
+ + openSubTab("workflow-error-details", item.id) + } + > + { + t( + "EVENTS.EVENTS.DETAILS.MEDIA.DETAILS" + ) /* Details */ + } + +
- - { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DATE" - ) /* Date */ - } - - + { t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.TITLE" - ) /* Errors & Warnings */ + "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.EMPTY" + ) /* No errors found. */ } - - - +
- {!!item.severity && ( -
- )} -
- {t("dateFormats.dateTime.medium", { - dateTime: renderValidDate(item.timestamp), - })} - {item.title} - - openSubTab("workflow-error-details", item.id) - } - > - { - t( - "EVENTS.EVENTS.DETAILS.MEDIA.DETAILS" - ) /* Details */ - } - -
- { - t( - "EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.EMPTY" - ) /* No errors found. */ - } -
-
-
+ ) + } + + + )} +
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx index dffc2b2f6d..b473ec19d6 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx @@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next"; import { setModalWorkflowTabHierarchy } from "../../../../slices/eventDetailsSlice"; import { WorkflowTabHierarchy } from "../modals/EventDetails"; import { ParseKeys } from "i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the workflow operation details for the workflows tab of the event details modal @@ -29,8 +30,9 @@ const EventDetailsWorkflowOperationDetails = () => { }; return ( -
- {/* Hierarchy navigation */} + { translationKey2={"EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TITLE"} subTabArgument2={"workflow-operation-details"} /> - -
- {/* Notifications */} - - - {/* 'Operation Details' table */} -
-
-
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TITLE" - ) /* Operation Details */ - } -
-
- - {isFetching || ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - )} -
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.TITLE" - ) /* Title */ - } - {operationDetails.name}
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.DESCRIPTION" - ) /* Description */ - } - {operationDetails.description}
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.STATE" - ) /* State */ - } - {t(operationDetails.state as ParseKeys)}
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.EXECUTION_HOST" - ) /* Execution Host */ - } - {operationDetails.execution_host}
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.JOB" - ) /* Job */ - } - {operationDetails.job}
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.TIME_IN_QUEUE" - ) /* Time in Queue */ - } - {operationDetails.time_in_queue}ms
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.STARTED" - ) /* Started */ - } - - {t("dateFormats.dateTime.medium", { - dateTime: renderValidDate(operationDetails.started), - })} -
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.FINISHED" - ) /* Finished */ - } - - {t("dateFormats.dateTime.medium", { - dateTime: renderValidDate(operationDetails.completed), - })} -
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.RETRY_STRATEGY" - ) /* Retry Strategy */ - } - {operationDetails.retry_strategy}
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.FAILED_ATTEMPTS" - ) /* Failed Attempts */ - } - {operationDetails.failed_attempts}
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.MAX_ATTEMPTS" - ) /* Max */ - } - {operationDetails.max_attempts}
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.EXCEPTION_HANDLER_WORKFLOW" - ) /* Exception Handler Workflow */ - } - {operationDetails.exception_handler_workflow}
- { - t( - "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.FAIL_ON_ERROR" - ) /* Fail on Error */ - } - {operationDetails.fail_on_error}
-
-
+ } + modalBodyChildren={} + > + {/* 'Operation Details' table */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TITLE" + ) /* Operation Details */ + } +
+
+ + {isFetching || ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + )} +
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.TITLE" + ) /* Title */ + } + {operationDetails.name}
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.DESCRIPTION" + ) /* Description */ + } + {operationDetails.description}
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.STATE" + ) /* State */ + } + {t(operationDetails.state as ParseKeys)}
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.EXECUTION_HOST" + ) /* Execution Host */ + } + {operationDetails.execution_host}
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.JOB" + ) /* Job */ + } + {operationDetails.job}
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.TIME_IN_QUEUE" + ) /* Time in Queue */ + } + {operationDetails.time_in_queue}ms
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.STARTED" + ) /* Started */ + } + + {t("dateFormats.dateTime.medium", { + dateTime: renderValidDate(operationDetails.started), + })} +
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.FINISHED" + ) /* Finished */ + } + + {t("dateFormats.dateTime.medium", { + dateTime: renderValidDate(operationDetails.completed), + })} +
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.RETRY_STRATEGY" + ) /* Retry Strategy */ + } + {operationDetails.retry_strategy}
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.FAILED_ATTEMPTS" + ) /* Failed Attempts */ + } + {operationDetails.failed_attempts}
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.MAX_ATTEMPTS" + ) /* Max */ + } + {operationDetails.max_attempts}
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.EXCEPTION_HANDLER_WORKFLOW" + ) /* Exception Handler Workflow */ + } + {operationDetails.exception_handler_workflow}
+ { + t( + "EVENTS.EVENTS.DETAILS.OPERATION_DETAILS.TABLE_HEADERS.FAIL_ON_ERROR" + ) /* Fail on Error */ + } + {operationDetails.fail_on_error}
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperations.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperations.tsx index 9183e4826f..0be45da20b 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperations.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperations.tsx @@ -13,6 +13,7 @@ import { useTranslation } from "react-i18next"; import { WorkflowTabHierarchy } from "../modals/EventDetails"; import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor"; import { ParseKeys } from "i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component manages the workflow operations for the workflows tab of the event details modal @@ -54,93 +55,89 @@ const EventDetailsWorkflowOperations = ({ }; return ( -
- {/* Hierarchy navigation */} - + + } + modalBodyChildren={} + > + {/* 'Workflow Operations' table */} +
+
+ { + t( + "EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TITLE" + ) /* Workflow Operations */ + } +
+
+ + + + + + + + + + {/* workflow operation details */} + {operations.entries.map((item, key) => ( + + + + -
- {/* Notifications */} - - - {/* 'Workflow Operations' table */} -
-
-
- { - t( - "EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TITLE" - ) /* Workflow Operations */ - } -
-
-
+ { + t( + "EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.STATUS" + ) /* Status */ + } + + { + t( + "EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.TITLE" + ) /* Title */ + } + + + { + t( + "EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.DESCRIPTION" + ) /* Description */ + } + + +
{t(item.status as ParseKeys)}{item.title}{item.description}
- - - - - - - - {/* workflow operation details */} - {operations.entries.map((item, key) => ( - - - - - - {/* link to 'Operation Details' sub-Tab */} - - - ))} - -
- { - t( - "EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.STATUS" - ) /* Status */ + {/* link to 'Operation Details' sub-Tab */} + + + openSubTab("workflow-operation-details", key) } - - + > { t( - "EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.TITLE" - ) /* Title */ + "EVENTS.EVENTS.DETAILS.MEDIA.DETAILS" + ) /* Details */ } - - - { - t( - "EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.DESCRIPTION" - ) /* Description */ - } - - -
{t(item.status as ParseKeys)}{item.title}{item.description} - - openSubTab("workflow-operation-details", key) - } - > - { - t( - "EVENTS.EVENTS.DETAILS.MEDIA.DETAILS" - ) /* Details */ - } - -
-
-
+ + + + ))} + +
-
+ ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/NewAccessPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewAccessPage.tsx index 93a837413e..a9dc70d0ea 100644 --- a/src/components/events/partials/ModalTabsAndPages/NewAccessPage.tsx +++ b/src/components/events/partials/ModalTabsAndPages/NewAccessPage.tsx @@ -23,6 +23,7 @@ import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButt import { TransformedAcl } from "../../../../slices/aclDetailsSlice"; import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor"; import { formatAclRolesForDropdown, formatAclTemplatesForDropdown } from "../../../../utils/dropDownUtils"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders the access page for new events and series in the wizards. @@ -109,249 +110,245 @@ const NewAccessPage = ({ return ( <> -
-
-
- {/* Notifications */} - - {!loading && ( -
    -
  • -
    -
    - {t("EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.TITLE")} -
    -
    -

    - {t( - "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.DESCRIPTION" - )} -

    + + {/* Notifications */} + + {!loading && ( +
      +
    • +
      +
      + {t("EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.TITLE")} +
      +
      +

      + {t( + "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.DESCRIPTION" + )} +

      - {/* Template selection*/} -
      - - - - - - - - - {aclTemplates.length > 0 ? ( - - ) : ( - //Show if no option is available - - )} - - -
      - {t("EVENTS.SERIES.NEW.ACCESS.TEMPLATES.TITLE")} -
      -
      - {/* dropdown for selecting a policy template */} - { - if (element) { - handleTemplateChange(element.value) - } - }} - placeholder={t( - "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.LABEL" - )} - autoFocus={true} - customCSS={{ width: 200, optionPaddingTop: 5 }} - /> -
      -       		-
      - {t( - "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.EMPTY" - )} -
      -
      -
      -
      - - {/* Area for editing acls */} -
      -
      -
      - {t( - "EVENTS.SERIES.DETAILS.ACCESS.ACCESS_POLICY.DETAILS" - )} -
      -
      - - - - -
      - {t( - "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ROLE" - )} - - {t( - "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.READ" + {/* Template selection*/} +
      + + + + + + + + + {aclTemplates.length > 0 ? ( + - {aclActions.length > 0 && ( - + autoFocus={true} + customCSS={{ width: 200, optionPaddingTop: 5 }} + /> + + + ) : ( + //Show if no option is available + - - - - {/*Add fieldArray/row for each policy in acls field*/} - - {({ insert, remove, push }) => ( - <> - {roles.length > 0 ? ( - formik.values.acls.length > 0 && - formik.values.acls.map( - (policy, index) => ( - - {/* dropdown for acl (/policy) role */} - - {/* Checkboxes for policy.read and policy.write*/} - - - {/* Show only if policy has actions*/} - {aclActions.length > 0 && ( - + + + )} + + +
      + {t("EVENTS.SERIES.NEW.ACCESS.TEMPLATES.TITLE")} +
      +
      + {/* dropdown for selecting a policy template */} + -
      		- {t( - "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.WRITE" + options={formatAclTemplatesForDropdown(aclTemplates)} + required={true} + handleChange={(element) => { + if (element) { + handleTemplateChange(element.value) + } + }} + placeholder={t( + "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.LABEL" )} - - {t( - "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" - )} - +
      + {t( + "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.EMPTY" )} -
      		- {t( - "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ACTION" - )} -
      - { - if (element) { - formik.setFieldValue( - `acls.${index}.role`, - element.value - ) - } - }} - placeholder={t( - "EVENTS.SERIES.NEW.ACCESS.ROLES.LABEL" - )} - disabled={ - !hasAccess( - editAccessRole, - user - ) - } - customCSS={{ width: 360, optionPaddingTop: 5 }} - /> - - - - - -
      - -
      -
      +
      + + + {/* Area for editing acls */} +
      +
      +
      + {t( + "EVENTS.SERIES.DETAILS.ACCESS.ACCESS_POLICY.DETAILS" + )} +
      +
      + + + + + + + {aclActions.length > 0 && ( + + )} + + + + + {/*Add fieldArray/row for each policy in acls field*/} + + {({ insert, remove, push }) => ( + <> + {roles.length > 0 ? ( + formik.values.acls.length > 0 && + formik.values.acls.map( + (policy, index) => ( + + {/* dropdown for acl (/policy) role */} + + {/* Checkboxes for policy.read and policy.write*/} + + + {/* Show only if policy has actions*/} + {aclActions.length > 0 && ( + - - ) - ) - ) : ( - + + + )} + {/*Remove policy*/} - - )} - - {hasAccess(editAccessRole, user) && ( - - {/*Add additional policy row*/} - - )} - + ) + ) + ) : ( + + + + )} + + {hasAccess(editAccessRole, user) && ( + + {/*Add additional policy row*/} + + )} - - -
      + {t( + "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ROLE" + )} + + {t( + "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.READ" + )} + + {t( + "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.WRITE" + )} + + {t( + "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" + )} + + {t( + "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ACTION" + )} +
      + { + if (element) { + formik.setFieldValue( + `acls.${index}.role`, + element.value + ) + } + }} + placeholder={t( + "EVENTS.SERIES.NEW.ACCESS.ROLES.LABEL" )} - {/*Remove policy*/} - - remove(index)} - extraClassName="remove" + disabled={ + !hasAccess( + editAccessRole, + user + ) + } + customCSS={{ width: 360, optionPaddingTop: 5 }} + /> + + + + + +
      + -
      - {t( - "EVENTS.SERIES.NEW.ACCESS.ROLES.EMPTY" - )} -
      { - push({ - role: "", - read: false, - write: false, - actions: [], - }); - dispatch(checkAcls(formik.values.acls)); - }} - > - +{" "} - {t( - "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.NEW" - )} - + onClick={() => remove(index)} + extraClassName="remove" + />
      + {t( + "EVENTS.SERIES.NEW.ACCESS.ROLES.EMPTY" + )} +
      + { + push({ + role: "", + read: false, + write: false, + actions: [], + }); + dispatch(checkAcls(formik.values.acls)); + }} + > + +{" "} + {t( + "EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.NEW" + )} + +
      -
      -
      + + )} + + +
      -
      • -
    - )} -
    -
    -
+
+
+ + + )} + {/* Button for navigation to next page and previous page */} ({ return ( <> -
-
-
-
-
{t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.SELECT_TYPE")}
-
- - - {uploadAssets.length === 0 ? ( - - - - ) : ( - uploadAssets.map((asset, key) => ( - - - - {/*Button to remove asset*/} - - - )) - )} - -
- {t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.NO_OPTIONS")} -
- {" "} - {translateOverrideFallback(asset, t)} - -
- handleChange(e, asset.id)} - type="file" - tabIndex={0} - /> - {formik.values[asset.id] && ( - - {formik.values[asset.id].name.substr(0, 50)} - - )} -
- 		- { - formik.setFieldValue(asset.id, null); - (document.getElementById(asset.id) as HTMLInputElement).value = ""; - }} - /> -
-
-
+ +
+
{t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.SELECT_TYPE")}
+
+ + + {uploadAssets.length === 0 ? ( + + + + ) : ( + uploadAssets.map((asset, key) => ( + + + + {/*Button to remove asset*/} + + + )) + )} + +
+ {t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.NO_OPTIONS")} +
+ {" "} + {translateOverrideFallback(asset, t)} + +
+ handleChange(e, asset.id)} + type="file" + tabIndex={0} + /> + {formik.values[asset.id] && ( + + {formik.values[asset.id].name.substr(0, 50)} + + )} +
+ 		+ { + formik.setFieldValue(asset.id, null); + (document.getElementById(asset.id) as HTMLInputElement).value = ""; + }} + /> +
-
+ {/* Button for navigation to next page */} -
-
- { - //iterate through metadata catalogs - !!metadataCatalogs && - metadataCatalogs.length > 0 && - metadataCatalogs.map((catalog, index) => ( -
- {/*
{t(header)}
*/} -
- {t(header ? header : catalog.title as ParseKeys)} -
- {/* Table view containing input fields for metadata */} -
- - - {/* Render table row for each metadata field depending on type*/} - {!!catalog.fields && - catalog.fields.map((field, key) => ( - - - {field.readOnly ? ( - // non-editable field if readOnly is set or user doesn't have edit access rights - !!field.collection ? ( - - ) : ( - - ) - ) : ( - - )} - - ))} - -
- {t(field.label as ParseKeys)} - {field.required && ( - * - )} - {getMetadataCollectionFieldName(field, field, t)}{field.value} - {/* Render single value or multi value input */} - {field.type === "mixed_text" && - field.collection?.length !== 0 ? ( - - ) : ( - - )} -
-
-
- )) - } + + { + //iterate through metadata catalogs + !!metadataCatalogs && + metadataCatalogs.length > 0 && + metadataCatalogs.map((catalog, index) => ( +
+ {/*
{t(header)}
*/} +
+ {t(header ? header : catalog.title as ParseKeys)} +
+ {/* Table view containing input fields for metadata */} +
+ + + {/* Render table row for each metadata field depending on type*/} + {!!catalog.fields && + catalog.fields.map((field, key) => ( + + + {field.readOnly ? ( + // non-editable field if readOnly is set or user doesn't have edit access rights + !!field.collection ? ( + + ) : ( + + ) + ) : ( + + )} + + ))} + +
+ {t(field.label as ParseKeys)} + {field.required && ( + * + )} + {getMetadataCollectionFieldName(field, field, t)}{field.value} + {/* Render single value or multi value input */} + {field.type === "mixed_text" && + field.collection?.length !== 0 ? ( + + ) : ( + + )} +
+
-
-
+ )) + } + ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/NewProcessingPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewProcessingPage.tsx index 7743a3f3ce..fe90e4fea9 100644 --- a/src/components/events/partials/ModalTabsAndPages/NewProcessingPage.tsx +++ b/src/components/events/partials/ModalTabsAndPages/NewProcessingPage.tsx @@ -9,6 +9,7 @@ import { fetchWorkflowDef } from "../../../../slices/workflowSlice"; import { FormikProps } from "formik"; import { formatWorkflowsForDropdown } from "../../../../utils/dropDownUtils"; import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders the processing page for new events in the new event wizard. @@ -68,65 +69,61 @@ const NewProcessingPage = ({ return ( <> -
-
-
- {/* Workflow definition Selection*/} -
-
- {t("EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW")} -
-
- {workflowDef.length > 0 ? ( -
- - formik.values.processingWorkflow === workflow.id - )?.title ?? "" - } - options={formatWorkflowsForDropdown(workflowDef)} - required={true} - handleChange={(element) => { - if (element) { - setDefaultValues(element.value) - } - }} - placeholder={t( - "EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW" - )} - customCSS={{width: "100%"}} - /> -
- ) : ( - - {t("EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW_EMPTY")} - - )} + + {/* Workflow definition Selection*/} +
+
+ {t("EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW")} +
+
+ {workflowDef.length > 0 ? ( +
+ + formik.values.processingWorkflow === workflow.id + )?.title ?? "" + } + options={formatWorkflowsForDropdown(workflowDef)} + required={true} + handleChange={(element) => { + if (element) { + setDefaultValues(element.value) + } + }} + placeholder={t( + "EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW" + )} + customCSS={{width: "100%"}} + /> +
+ ) : ( + + {t("EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW_EMPTY")} + + )} - {/* Configuration panel of selected workflow */} -
-
- {formik.values.processingWorkflow ? ( - - ) : null} -
-
+ {/* Configuration panel of selected workflow */} +
+
+ {formik.values.processingWorkflow ? ( + + ) : null}
-
+ {/* Button for navigation to next page and previous page */} ({ return ( <> -
-
-
- {/*Show notifications with context events-form*/} - + + {/*Show notifications with context events-form*/} + + { + + } - { - - } - -
-
- {t("EVENTS.EVENTS.NEW.SOURCE.SELECT_SOURCE")} -
- {/* Radio buttons for choosing source mode */} -
-
    - {scheduleOptionAvailable() ? ( -
  • - -
    • - ) : ( -
  • - -
    • - )} - {scheduleOptionAvailable() && ( - <> -
  • - -
    • -
  • - -
    • - - )} -
-
-
- - {/* Render rest of page depending on which source mode is chosen */} - {formik.values.sourceMode === "UPLOAD" && ( - - )} - {scheduleOptionAvailable() && - (formik.values.sourceMode === "SCHEDULE_SINGLE" || - formik.values.sourceMode === "SCHEDULE_MULTIPLE") && ( - +
+
+ {t("EVENTS.EVENTS.NEW.SOURCE.SELECT_SOURCE")} +
+ {/* Radio buttons for choosing source mode */} +
+
    + {scheduleOptionAvailable() ? ( +
  • + +
    • + ) : ( +
  • + +
    • )} + {scheduleOptionAvailable() && ( + <> +
  • + +
    • +
  • + +
    • + + )} +
-
+ + {/* Render rest of page depending on which source mode is chosen */} + {formik.values.sourceMode === "UPLOAD" && ( + + )} + {scheduleOptionAvailable() && + (formik.values.sourceMode === "SCHEDULE_SINGLE" || + formik.values.sourceMode === "SCHEDULE_MULTIPLE") && ( + + )} + {/* Button for navigation to next page and previous page */} ({ return ( <> -
-
-
-
-
- {t("EVENTS.SERIES.NEW.THEME.TITLE")} -
-
-
    -
  • -

    {t("EVENTS.SERIES.NEW.THEME.DESCRIPTION.TEXT")}

    - {seriesThemes.length > 0 ? ( - <> -

    -

    - ({ label: theme.name, value: theme.id}))} - required={false} - handleChange={(element) => { - if (element) { - formik.setFieldValue("theme", element.value) - } - }} - placeholder={t("EVENTS.SERIES.NEW.THEME.LABEL")} - customCSS={{ width: "100%" }} - /> -
    -

    - {!!formik.values.theme && ( -

    {getDescription(formik.values.theme)}

    - )} - - ) : ( -

    {t("EVENTS.SERIES.NEW.THEME.EMPTY")}

    + +
    +
    + {t("EVENTS.SERIES.NEW.THEME.TITLE")} +
    +
    +
      +
    • +

      {t("EVENTS.SERIES.NEW.THEME.DESCRIPTION.TEXT")}

      + {seriesThemes.length > 0 ? ( + <> +

      +

      + ({ label: theme.name, value: theme.id}))} + required={false} + handleChange={(element) => { + if (element) { + formik.setFieldValue("theme", element.value) + } + }} + placeholder={t("EVENTS.SERIES.NEW.THEME.LABEL")} + customCSS={{ width: "100%" }} + /> +
      +

      + {!!formik.values.theme && ( +

      {getDescription(formik.values.theme)}

      )} -
      • -
    -
    -
    + + ) : ( +

    {t("EVENTS.SERIES.NEW.THEME.EMPTY")}

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

{t("EVENTS.SERIES.NEW.TOBIRA.DESCRIPTION")}

{!error && <>
@@ -364,7 +364,6 @@ const NewTobiraPage = ({

{!mode.edit &&

{t("EVENTS.SERIES.NEW.TOBIRA.DIRECT_LINK")}

} } -
{/* Render buttons for saving or resetting updated path */} {mode.edit && ({ submit={() => formik.handleSubmit()} {...{ isValid }} />} -
+ {/* Button for navigation to next page and previous page */} {!mode.edit && -
-
- {hasError ? ( - /* error message */ -
-
{t(header) /* Statistics */}
-
- {t("STATISTICS.NOT_AVAILABLE")} -
-
- ) : ( - /* iterates over the different available statistics */ - statistics.map((stat, key) => ( -
- {/* title of statistic */} -
{t(stat.title as ParseKeys)}
+ + {hasError ? ( + /* error message */ +
+
{t(header) /* Statistics */}
+
+ {t("STATISTICS.NOT_AVAILABLE")} +
+
+ ) : ( + /* iterates over the different available statistics */ + statistics.map((stat, key) => ( +
+ {/* title of statistic */} +
{t(stat.title as ParseKeys)}
- {stat.providerType === "timeSeries" ? ( - /* visualization of statistic for time series data */ -
- -
- ) : ( - /* unsupported type message */ -
- {t("STATISTICS.UNSUPPORTED_TYPE")} -
- )} + {stat.providerType === "timeSeries" ? ( + /* visualization of statistic for time series data */ +
+
- )) - )} -
-
-
+ ) : ( + /* unsupported type message */ +
+ {t("STATISTICS.UNSUPPORTED_TYPE")} +
+ )} +
+ )) + )} + ); }; export default SeriesDetailsStatisticTab; diff --git a/src/components/events/partials/ModalTabsAndPages/SeriesDetailsThemeTab.tsx b/src/components/events/partials/ModalTabsAndPages/SeriesDetailsThemeTab.tsx index a102926001..14858caae1 100644 --- a/src/components/events/partials/ModalTabsAndPages/SeriesDetailsThemeTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/SeriesDetailsThemeTab.tsx @@ -9,6 +9,7 @@ import DropDown from "../../../shared/DropDown"; import { useAppDispatch, useAppSelector } from "../../../../store"; import { updateSeriesTheme } from "../../../../slices/seriesDetailsSlice"; import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders the tab for editing the theme of a certain series @@ -51,60 +52,56 @@ const SeriesDetailsThemeTab = ({ > {(formik) => ( <> -
-
-
- {/* Notifications */} - -
-
{t("CONFIGURATION.NAVIGATION.THEMES")}
-
-
    -
  • -

    {t("EVENTS.SERIES.NEW.THEME.DESCRIPTION.TEXT")}

    - {themeNames.length > 0 && ( -
    - ({ label: names.value, value: names.id }))} - required={false} - handleChange={(element) => { - if (element) { - formik.setFieldValue("theme", element.value) - } - }} - placeholder={t("EVENTS.SERIES.NEW.THEME.LABEL")} - disabled={ - !hasAccess( - "ROLE_UI_SERIES_DETAILS_THEMES_EDIT", - user - ) - } - customCSS={{ width: "100%" }} - /> -
    - )} -
    • -
-
- {formik.dirty && ( - <> - {/* Render buttons for updating theme */} - formik.resetForm()} - createTranslationString="SAVE" - cancelTranslationString="CANCEL" - isLast - /> - - )} -
+ + {/* Notifications */} + +
+
{t("CONFIGURATION.NAVIGATION.THEMES")}
+
+
    +
  • +

    {t("EVENTS.SERIES.NEW.THEME.DESCRIPTION.TEXT")}

    + {themeNames.length > 0 && ( +
    + ({ label: names.value, value: names.id }))} + required={false} + handleChange={(element) => { + if (element) { + formik.setFieldValue("theme", element.value) + } + }} + placeholder={t("EVENTS.SERIES.NEW.THEME.LABEL")} + disabled={ + !hasAccess( + "ROLE_UI_SERIES_DETAILS_THEMES_EDIT", + user + ) + } + customCSS={{ width: "100%" }} + /> +
    + )} +
    • +
+ {formik.dirty && ( + <> + {/* Render buttons for updating theme */} + formik.resetForm()} + createTranslationString="SAVE" + cancelTranslationString="CANCEL" + isLast + /> + + )}
-
+ )} diff --git a/src/components/events/partials/ModalTabsAndPages/StartTaskGeneralPage.tsx b/src/components/events/partials/ModalTabsAndPages/StartTaskGeneralPage.tsx index 08b698c533..0ef0d404d7 100644 --- a/src/components/events/partials/ModalTabsAndPages/StartTaskGeneralPage.tsx +++ b/src/components/events/partials/ModalTabsAndPages/StartTaskGeneralPage.tsx @@ -16,6 +16,7 @@ import { import { useAppSelector } from "../../../../store"; import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons"; import { ParseKeys } from "i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders the table overview of selected events in start task bulk action @@ -53,80 +54,78 @@ const StartTaskGeneralPage = ({ return ( <> -
-
-
- {/* Show only if task not startable */} - {!isTaskStartable(selectedEvents) && ( -
-

{t("BULK_ACTIONS.SCHEDULE_TASK.GENERAL.CANNOTSTART")}

-
- )} - -
-
-
-
- {t("BULK_ACTIONS.SCHEDULE_TASK.GENERAL.CAPTION")} - - {t("BULK_ACTIONS.SCHEDULE_TASK.GENERAL.SUMMARY", { - count: selectedEvents.filter((e) => e.selected === true) - .length, - })} - -
-
- - - -
+ +
+ {/* Show only if task not startable */} + {!isTaskStartable(selectedEvents) && ( +
+

{t("BULK_ACTIONS.SCHEDULE_TASK.GENERAL.CANNOTSTART")}

+
+ )} + +
+
+
+
+ {t("BULK_ACTIONS.SCHEDULE_TASK.GENERAL.CAPTION")} + + {t("BULK_ACTIONS.SCHEDULE_TASK.GENERAL.SUMMARY", { + count: selectedEvents.filter((e) => e.selected === true) + .length, + })} + +
+
+ + + + + + + + + + + {/* Repeat for each event chosen */} + {selectedEvents.map((event, key) => ( + + - - + + + + - - - {/* Repeat for each event chosen */} - {selectedEvents.map((event, key) => ( - - - - - - - ))} - -
+ onChangeAllSelected(e)} + /> + + {t("EVENTS.EVENTS.TABLE.TITLE")} + + {t("EVENTS.EVENTS.TABLE.SERIES")} + + {t("EVENTS.EVENTS.TABLE.STATUS")} +
onChangeAllSelected(e)} + onChange={(e) => onChangeSelected(e, event.id)} + checked={event.selected} /> - - - {t("EVENTS.EVENTS.TABLE.TITLE")} - - {t("EVENTS.EVENTS.TABLE.SERIES")} - - {t("EVENTS.EVENTS.TABLE.STATUS")} - {event.title} + {event.series ? event.series.title : ""} + {t(event.event_status as ParseKeys)}
- onChangeSelected(e, event.id)} - checked={event.selected} - /> - {event.title} - {event.series ? event.series.title : ""} - {t(event.event_status as ParseKeys)}
-
+ ))} + +
-
+ {/* Button for navigation to next page and previous page */} ({ return ( <> -
-
-
-
-
{t("BULK_ACTIONS.SCHEDULE_TASK.SUMMARY.CAPTION")}
-
- {/* List configuration for task to be started */} -
    -
  • - - {t("BULK_ACTIONS.SCHEDULE_TASK.SUMMARY.EVENTS")} - -

    - {t("BULK_ACTIONS.SCHEDULE_TASK.SUMMARY.EVENTS_SUMMARY", { - numberOfEvents: formik.values.events.filter( - (e) => e.selected === true - ).length, - })} + +

    +
    {t("BULK_ACTIONS.SCHEDULE_TASK.SUMMARY.CAPTION")}
    +
    + {/* List configuration for task to be started */} +
      +
    • + + {t("BULK_ACTIONS.SCHEDULE_TASK.SUMMARY.EVENTS")} + +

      + {t("BULK_ACTIONS.SCHEDULE_TASK.SUMMARY.EVENTS_SUMMARY", { + numberOfEvents: formik.values.events.filter( + (e) => e.selected === true + ).length, + })} +

      +
      • +
    • + + {t("BULK_ACTIONS.SCHEDULE_TASK.SUMMARY.WORKFLOW")} + +

      + { + workflowDef.find( + (workflow) => + formik.values.workflow === workflow.id + )?.title ?? "" + } +

      +
      • +
    • + + {t("BULK_ACTIONS.SCHEDULE_TASK.SUMMARY.CONFIGURATION")} + + {Object.keys(formik.values.configuration).map( + (config, key) => ( +

      + {config} :{" "} + {formik.values.configuration[config].toString()}

      -
      • -
    • - - {t("BULK_ACTIONS.SCHEDULE_TASK.SUMMARY.WORKFLOW")} - -

      - { - workflowDef.find( - (workflow) => - formik.values.workflow === workflow.id - )?.title ?? "" - } -

      -
      • -
    • - - {t("BULK_ACTIONS.SCHEDULE_TASK.SUMMARY.CONFIGURATION")} - - {Object.keys(formik.values.configuration).map( - (config, key) => ( -

      - {config} :{" "} - {formik.values.configuration[config].toString()} -

      - ) - )} -
      • -
    -
    -
    + ) + )} +
    • +
-
+ {/* Navigation buttons */} ({ return ( <> -
-
-
- {/* Workflow definition Selection*/} -
-
{t("BULK_ACTIONS.SCHEDULE_TASK.TASKS.SELECT")}
-
- {workflowDef.length > 0 && ( -
- - workflowDef.id === formik.values.workflow - )?.title ?? "" - } - options={formatWorkflowsForDropdown(workflowDef)} - required={true} - handleChange={(element) => { - if (element) { - setDefaultValues(element.value) - } - }} - placeholder={t( - "EVENTS.EVENTS.DETAILS.PUBLICATIONS.SELECT_WORKFLOW" - )} - tabIndex={99} - customCSS={{width: "100%"}} - /> -
- )} - {formik.values.workflow && ( - <> - {/* Configuration panel of selected workflow */} -
- -
- - )} + + {/* Workflow definition Selection*/} +
+
{t("BULK_ACTIONS.SCHEDULE_TASK.TASKS.SELECT")}
+
+ {workflowDef.length > 0 && ( +
+ + workflowDef.id === formik.values.workflow + )?.title ?? "" + } + options={formatWorkflowsForDropdown(workflowDef)} + required={true} + handleChange={(element) => { + if (element) { + setDefaultValues(element.value) + } + }} + placeholder={t( + "EVENTS.EVENTS.DETAILS.PUBLICATIONS.SELECT_WORKFLOW" + )} + tabIndex={99} + customCSS={{width: "100%"}} + />
-
+ )} + {formik.values.workflow && ( + <> + {/* Configuration panel of selected workflow */} +
+ +
+ + )}
-
+ {/* Button for navigation to next page and previous page */} -
-
-
-
-
-

{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE1")}

-

{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE2")}

-
+ +
+
+

{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE1")}

+

{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE2")}

+
-
-
-
- {t("BULK_ACTIONS.DELETE.EVENTS.DELETE_EVENTS")} -
- - - - - - - - - - {/* Repeat for each marked event*/} - {selectedEvents.map((event, key) => ( - - - - + + ))} + +
- onChangeAllSelected(e)} - className="select-all-cbox" - /> - {t("EVENTS.EVENTS.TABLE.TITLE")}{t("EVENTS.EVENTS.TABLE.PRESENTERS")}
- onChangeSelected(e, isEvent(event) ? event.id : "")} - /> - {isEvent(event) && event.title} - {/* Repeat for each presenter*/} +
+
+
+ {t("BULK_ACTIONS.DELETE.EVENTS.DELETE_EVENTS")} +
+ + + + + + + + + + {/* Repeat for each marked event*/} + {selectedEvents.map((event, key) => ( + + + + - - ))} - -
+ onChangeAllSelected(e)} + className="select-all-cbox" + /> + {t("EVENTS.EVENTS.TABLE.TITLE")}{t("EVENTS.EVENTS.TABLE.PRESENTERS")}
+ onChangeSelected(e, isEvent(event) ? event.id : "")} + /> + {isEvent(event) && event.title} + {/* Repeat for each presenter*/} {/* @ts-expect-error TS(7006): Parameter 'presenter' implicitly has an 'any' type... Remove this comment to see the full error message */} - {event.presenters.map((presenter, key) => ( - - {presenter} - - ))} -
-
-
+ {event.presenters.map((presenter, key) => ( + + {presenter} + + ))} +
-
+ -
-
-
-

{t("BULK_ACTIONS.DELETE_SERIES_WARNING_LINE1")}

-

{t("BULK_ACTIONS.DELETE_SERIES_WARNING_LINE2")}

-
+ +
+

{t("BULK_ACTIONS.DELETE_SERIES_WARNING_LINE1")}

+

{t("BULK_ACTIONS.DELETE_SERIES_WARNING_LINE2")}

+
- {/* Only show if series not allowed to be deleted */} - {!isAllowed() && ( -
-

{t("BULK_ACTIONS.DELETE.SERIES.CANNOT_DELETE")}

-
- )} - -
-
-
{t("EVENTS.SERIES.TABLE.CAPTION")}
-
- - - - + + ))} + +
+ {/* Only show if series not allowed to be deleted */} + {!isAllowed() && ( +
+

{t("BULK_ACTIONS.DELETE.SERIES.CANNOT_DELETE")}

+
+ )} + +
+
+
{t("EVENTS.SERIES.TABLE.CAPTION")}
+
+ + + + + + + + + + + {/* Repeat for each marked series */} + {selectedSeries.map((series, key) => ( + + - - - - - - {/* Repeat for each marked series */} - {selectedSeries.map((series, key) => ( - - - - + + - {/* Only show check if row has events, else empty cell*/} - - - ))} - -
+ onChangeAllSelected(e)} + className="select-all-cbox" + /> + {t("EVENTS.SERIES.TABLE.TITLE")}{t("EVENTS.SERIES.TABLE.ORGANIZERS")}{t("EVENTS.SERIES.TABLE.HAS_EVENTS")}
onChangeAllSelected(e)} - className="select-all-cbox" + name="selection" + checked={series.selected} + onChange={(e) => onChangeSelected(e, isSeries(series) ?series.id : "")} + className="child-cbox" /> - - {t("EVENTS.SERIES.TABLE.TITLE")}{t("EVENTS.SERIES.TABLE.ORGANIZERS")}{t("EVENTS.SERIES.TABLE.HAS_EVENTS")}
- onChangeSelected(e, isSeries(series) ?series.id : "")} - className="child-cbox" - /> - {isSeries(series) && series.title} - {/*Repeat for each creator*/} + {isSeries(series) && series.title} + {/*Repeat for each creator*/} {/* @ts-expect-error TS(7006): Parameter 'organizer' implicitly has an 'any' type */} - {series.organizers.map((organizer, key) => ( - - {organizer} - - ))} - - {series.hasEvents && } -
-
+ {series.organizers.map((organizer, key) => ( + + {organizer} + + ))} + + {/* Only show check if row has events, else empty cell*/} +
+ {series.hasEvents && } +
-
+ {/* Loading spinner */} {loading && ( -
-
-
- -
+ +
+
-
+ )} {/* Fatal error view */} {!!fatalError && ( -
-
-
-
-

- {t("BULK_ACTIONS.EDIT_EVENTS_METADATA.FATAL_ERROR", { - fatalError: fatalError, - })} -

-
+ +
+
+

+ {t("BULK_ACTIONS.EDIT_EVENTS_METADATA.FATAL_ERROR", { + fatalError: fatalError, + })} +

-
+ )} {/* todo: Request Errors View and Update Errors View (not quite sure what this is used for) */} @@ -178,105 +175,101 @@ const EditMetadataEventsModal = ({ > {(formik) => ( <> -
-
-
-
- - {t( - "BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.DESCRIPTION" - )} - -
-
-
- - {t( - "BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.CAPTION" - )} - -
-
- - - - - - - - - {metadataFields.mergedMetadata.map( - (metadata, key) => - !metadata.readOnly && ( - - - - - - ) + +
+ + {t( + "BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.DESCRIPTION" + )} + +
+
+
+ + {t( + "BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.CAPTION" + )} + +
+
+
- - {t( - "BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.FIELDS" - )} - - {t( - "BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.VALUES" - )} -
- - onChangeSelected(e, metadata.id) - } - className="child-cbox" - /> - - {t(metadata.label as ParseKeys)} - {metadata.required && ( - * - )} - - {/* Render single value or multi value input */} - {metadata.type === "mixed_text" ? ( - - ) : ( - - )} -
+ + +
+ + {t( + "BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.FIELDS" )} - -
-
-
+ + + {t( + "BULK_ACTIONS.EDIT_EVENTS_METADATA.EDIT.TABLE.VALUES" + )} + + + + + {metadataFields.mergedMetadata.map( + (metadata, key) => + !metadata.readOnly && ( + + + + onChangeSelected(e, metadata.id) + } + className="child-cbox" + /> + + + {t(metadata.label as ParseKeys)} + {metadata.required && ( + * + )} + + + {/* Render single value or multi value input */} + {metadata.type === "mixed_text" ? ( + + ) : ( + + )} + + + ) + )} + +
-
+ {/* Buttons for cancel and submit */} ({ return ( <> -
-
-
- {/*Summary metadata*/} - + + {/*Summary metadata*/} + - {/*Summary metadata extended*/} - {!metaDataExtendedHidden && ( - - )} + {/*Summary metadata extended*/} + {!metaDataExtendedHidden && ( + + )} - {/*Summary upload assets*/} - {/*Show only if asset upload page is not hidden, the sourceMode is UPLOAD and the there - are actually upload assets provided by the user*/} - {!assetUploadHidden && - formik.values.sourceMode === "UPLOAD" && - uploadAssetsNonTrack.length > 0 ? ( -
-
- {t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.CAPTION")} -
-
- - - {/*Insert row for each upload asset user has provided*/} - {uploadAssetsNonTrack.map((asset, key) => ( - - - - - ))} - -
- {asset.translate} - {asset.value.name}
-
-
- ) : null} + {/*Summary upload assets*/} + {/*Show only if asset upload page is not hidden, the sourceMode is UPLOAD and the there + are actually upload assets provided by the user*/} + {!assetUploadHidden && + formik.values.sourceMode === "UPLOAD" && + uploadAssetsNonTrack.length > 0 ? ( +
+
+ {t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.CAPTION")} +
+
+ + + {/*Insert row for each upload asset user has provided*/} + {uploadAssetsNonTrack.map((asset, key) => ( + + + + + ))} + +
+ {asset.translate} + {asset.value.name}
+
+
+ ) : null} - {/* Summary source */} -
-
- {t("EVENTS.EVENTS.NEW.SOURCE.CAPTION")} -
-
- {/*Summary source mode UPLOAD*/} - {formik.values.sourceMode === "UPLOAD" && ( - - - {/*Insert row for each upload asset of type track user has provided*/} + {/* Summary source */} +
+
+ {t("EVENTS.EVENTS.NEW.SOURCE.CAPTION")} +
+
+ {/*Summary source mode UPLOAD*/} + {formik.values.sourceMode === "UPLOAD" && ( +
+ + {/*Insert row for each upload asset of type track user has provided*/} {/* @ts-expect-error TS(7006): Parameter 'asset' implicitly has an 'any' type. */} - {formik.values.uploadAssetsTrack.map((asset, key) => - !!asset.file ? ( - - - - - ) : null - )} - {!!formik.values.startDate && ( - - - - - )} - -
- {translateOverrideFallback(asset, t, "SHORT")} - {asset.file[0].name}
- {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_DATE")} - - {t("dateFormats.dateTime.short", { - dateTime: renderValidDate(formik.values.startDate), - })} -
- )} - {/*Summary source mode SCHEDULE-SINGLE/SCHEDULE-MULTIPLE*/} - {(formik.values.sourceMode === "SCHEDULE_SINGLE" || - formik.values.sourceMode === "SCHEDULE_MULTIPLE") && ( - - - - - - - - - - - {(!endsOnSameDay || formik.values.sourceMode === "SCHEDULE_MULTIPLE") && ( - - - - - )} - - - - - {formik.values.sourceMode === "SCHEDULE_MULTIPLE" && ( - - - - - )} - - - - - + {formik.values.uploadAssetsTrack.map((asset, key) => + !!asset.file ? ( + - + - {!!formik.values.deviceInputs && ( - - - - - )} - -
- {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_DATE")} - - {t("dateFormats.date.short", { - date: renderValidDate(formik.values.scheduleStartDate), - })} -
- {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_TIME")} - - {formik.values.scheduleStartHour}: - {formik.values.scheduleStartMinute} -
- {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_DATE")} - - {t("dateFormats.date.short", { - date: renderValidDate(formik.values.scheduleEndDate), - })} -
- {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_TIME")} - - {formik.values.scheduleEndHour}: - {formik.values.scheduleEndMinute} -
- {t( - "EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_MULTIPLE.WEEKDAYS" - )} - - {formik.values.repeatOn - .map((day) => - t(`EVENTS.EVENTS.NEW.WEEKDAYSLONG.${day}`) - ) - .join(", ")} -
- {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.DURATION")} - - {formik.values.scheduleDurationHours}: - {formik.values.scheduleDurationMinutes} -
- {t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION")} + {translateOverrideFallback(asset, t, "SHORT")} {formik.values.location}{asset.file[0].name}
{t("EVENTS.EVENTS.NEW.SUMMARY.SOURCE.INPUT")}{formik.values.deviceInputs.join(", ")}
- )} -
-
- - {/* Summary processing configuration */} -
-
- {t("EVENTS.EVENTS.NEW.PROCESSING.CAPTION")} -
+ ) : null + )} + {!!formik.values.startDate && ( + + + {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_DATE")} + + + {t("dateFormats.dateTime.short", { + dateTime: renderValidDate(formik.values.startDate), + })} + + + )} + + + )} + {/*Summary source mode SCHEDULE-SINGLE/SCHEDULE-MULTIPLE*/} + {(formik.values.sourceMode === "SCHEDULE_SINGLE" || + formik.values.sourceMode === "SCHEDULE_MULTIPLE") && ( - + - {/* Repeat entry for each configuration key/value pair */} - {Object.keys(formik.values.configuration).map( - (config, key) => ( - - - - - ) + + + + + {(!endsOnSameDay || formik.values.sourceMode === "SCHEDULE_MULTIPLE") && ( + + + + + )} + + + + + {formik.values.sourceMode === "SCHEDULE_MULTIPLE" && ( + + + + + )} + + + + + + + + + {!!formik.values.deviceInputs && ( + + + + )}
{t("EVENTS.EVENTS.NEW.PROCESSING.WORKFLOW")} - {!!workflowDefinition ? workflowDefinition.title : ""} + {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_DATE")} + + {t("dateFormats.date.short", { + date: renderValidDate(formik.values.scheduleStartDate), + })}
{config} - {formik.values.configuration[config].toString()} -
+ {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_TIME")} + + {formik.values.scheduleStartHour}: + {formik.values.scheduleStartMinute} +
+ {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_DATE")} + + {t("dateFormats.date.short", { + date: renderValidDate(formik.values.scheduleEndDate), + })} +
+ {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_TIME")} + + {formik.values.scheduleEndHour}: + {formik.values.scheduleEndMinute} +
+ {t( + "EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_MULTIPLE.WEEKDAYS" + )} + + {formik.values.repeatOn + .map((day) => + t(`EVENTS.EVENTS.NEW.WEEKDAYSLONG.${day}`) + ) + .join(", ")} +
+ {t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.DURATION")} + + {formik.values.scheduleDurationHours}: + {formik.values.scheduleDurationMinutes} +
+ {t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION")} + {formik.values.location}
{t("EVENTS.EVENTS.NEW.SUMMARY.SOURCE.INPUT")}{formik.values.deviceInputs.join(", ")}
-
- - {/*Summary access configuration*/} - + )}
-
+ + {/* Summary processing configuration */} +
+
+ {t("EVENTS.EVENTS.NEW.PROCESSING.CAPTION")} +
+ + + + + + + {/* Repeat entry for each configuration key/value pair */} + {Object.keys(formik.values.configuration).map( + (config, key) => ( + + + + + ) + )} + +
{t("EVENTS.EVENTS.NEW.PROCESSING.WORKFLOW")} + {!!workflowDefinition ? workflowDefinition.title : ""} +
{config} + {formik.values.configuration[config].toString()} +
+
+ + {/*Summary access configuration*/} + + {/* Button for navigation to next page and previous page */} ({ return ( <> -
-
-
+ {/*Summary metadata*/} ({ /> ) : null} - {/*Summary access configuration*/} - + {/*Summary access configuration*/} + - {/*Summary themes*/} - {!!formik.values.theme && ( -
-
- {t("EVENTS.SERIES.NEW.THEME.CAPTION")} -
- - - - - - - -
{t("EVENTS.SERIES.NEW.THEME.CAPTION")}{theme?.name}
-
- )} + {/*Summary themes*/} + {!!formik.values.theme && ( +
+
+ {t("EVENTS.SERIES.NEW.THEME.CAPTION")} +
+ + + + + + + +
{t("EVENTS.SERIES.NEW.THEME.CAPTION")}{theme?.name}
+
+ )} - {/*Summary Tobira*/} - {!!formik.values.selectedPage && ( -
-
- {t("EVENTS.SERIES.NEW.TOBIRA.CAPTION")} -
- - - - - - - -
{t("EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT")}{formik.values.selectedPage?.path}
-
- )} + {/*Summary Tobira*/} + {!!formik.values.selectedPage && ( +
+
+ {t("EVENTS.SERIES.NEW.TOBIRA.CAPTION")} +
+ + + + + + + +
{t("EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT")}{formik.values.selectedPage?.path}
-
-
+ )} + {/* Button for navigation to next page and previous page */} -
-
- {/* If capabilities has no item show corresponding message */} - {agent.capabilities.length > 0 ? ( -
-
- - {t("RECORDINGS.RECORDINGS.DETAILS.CAPABILITIES.CAPTION")} - -
-
- - - {/* Render table row for each capability item*/} - {agent.capabilities.map((item, key) => ( - - - - - ))} - -
{item.key}{item.value}
-
-
- ) : ( -
-

- {t( - "RECORDINGS.RECORDINGS.DETAILS.CAPABILITIES.NO_CAPABILITIES" - )} -

-
- )} + + {/* If capabilities has no item show corresponding message */} + {agent.capabilities.length > 0 ? ( +
+
+ + {t("RECORDINGS.RECORDINGS.DETAILS.CAPABILITIES.CAPTION")} + +
+
+ + + {/* Render table row for each capability item*/} + {agent.capabilities.map((item, key) => ( + + + + + ))} + +
{item.key}{item.value}
+
-
-
+ ) : ( +
+

+ {t( + "RECORDINGS.RECORDINGS.DETAILS.CAPABILITIES.NO_CAPABILITIES" + )} +

+
+ )} + ); }; diff --git a/src/components/recordings/partials/wizards/ConfigurationDetailsTab.tsx b/src/components/recordings/partials/wizards/ConfigurationDetailsTab.tsx index 7253d2a85e..629e170416 100644 --- a/src/components/recordings/partials/wizards/ConfigurationDetailsTab.tsx +++ b/src/components/recordings/partials/wizards/ConfigurationDetailsTab.tsx @@ -1,6 +1,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { RecordingDetails } from "../../../../slices/recordingDetailsSlice"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders details about the configuration of a recording/capture agent @@ -13,43 +14,39 @@ const ConfigurationDetailsTab: React.FC<{ const { t } = useTranslation(); return ( -
-
-
- {/* If configuration has no item show corresponding message */} - {agent.configuration.length > 0 ? ( -
-
- - {t("RECORDINGS.RECORDINGS.DETAILS.CONFIGURATION.CAPTION")} - -
-
- - - {/* Render table row for each configuration item*/} - {agent.configuration.map((item, key) => ( - - - - - ))} - -
{item.key}{item.value}
-
-
- ) : ( -
-

- {t( - "RECORDINGS.RECORDINGS.DETAILS.CONFIGURATION.NO_CONFIGURATION" - )} -

-
- )} + + {/* If configuration has no item show corresponding message */} + {agent.configuration.length > 0 ? ( +
+
+ + {t("RECORDINGS.RECORDINGS.DETAILS.CONFIGURATION.CAPTION")} + +
+
+ + + {/* Render table row for each configuration item*/} + {agent.configuration.map((item, key) => ( + + + + + ))} + +
{item.key}{item.value}
+
-
-
+ ) : ( +
+

+ {t( + "RECORDINGS.RECORDINGS.DETAILS.CONFIGURATION.NO_CONFIGURATION" + )} +

+
+ )} + ); }; diff --git a/src/components/recordings/partials/wizards/GeneralDetailsTab.tsx b/src/components/recordings/partials/wizards/GeneralDetailsTab.tsx index 5022595235..a551fb6a84 100644 --- a/src/components/recordings/partials/wizards/GeneralDetailsTab.tsx +++ b/src/components/recordings/partials/wizards/GeneralDetailsTab.tsx @@ -2,6 +2,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { RecordingDetails } from "../../../../slices/recordingDetailsSlice"; import { ParseKeys } from "i18next"; +import ModalContentTable from "../../../shared/modals/ModalContentTable"; /** * This component renders details about a recording/capture agent @@ -14,44 +15,40 @@ const GeneralDetailsTab: React.FC<{ const { t } = useTranslation(); return ( -
-
-
-
-
- {t("RECORDINGS.RECORDINGS.DETAILS.GENERAL.CAPTION")} -
-
- {/* Render table containing general information */} - - - - - - - - - - - - - - - - - - - -
{t("RECORDINGS.RECORDINGS.DETAILS.GENERAL.NAME")}{agent.name}
{t("RECORDINGS.RECORDINGS.DETAILS.GENERAL.URL")} - - {agent.url} - -
{t("RECORDINGS.RECORDINGS.DETAILS.GENERAL.STATUS")}{t(agent.status as ParseKeys)}
{t("RECORDINGS.RECORDINGS.DETAILS.GENERAL.UPDATE")}{agent.update}
-
-
+ +
+
+ {t("RECORDINGS.RECORDINGS.DETAILS.GENERAL.CAPTION")} +
+
+ {/* Render table containing general information */} + + + + + + + + + + + + + + + + + + + +
{t("RECORDINGS.RECORDINGS.DETAILS.GENERAL.NAME")}{agent.name}
{t("RECORDINGS.RECORDINGS.DETAILS.GENERAL.URL")} + + {agent.url} + +
{t("RECORDINGS.RECORDINGS.DETAILS.GENERAL.STATUS")}{t(agent.status as ParseKeys)}
{t("RECORDINGS.RECORDINGS.DETAILS.GENERAL.UPDATE")}{agent.update}
-
+ ); }; diff --git a/src/components/shared/EditTableViewModal.tsx b/src/components/shared/EditTableViewModal.tsx index ff4e53a759..162eaece12 100644 --- a/src/components/shared/EditTableViewModal.tsx +++ b/src/components/shared/EditTableViewModal.tsx @@ -23,6 +23,7 @@ import { themesTableConfig } from "../../configs/tableConfigs/themesTableConfig" import { Modal, ModalHandle } from "./modals/Modal"; import { Resource } from "../../slices/tableSlice"; import { ParseKeys } from "i18next"; +import ModalContentTable from "./modals/ModalContentTable"; /** * This component renders the modal for editing which columns are shown in the table @@ -170,117 +171,115 @@ const EditTableViewModalContent = ({ return ( <> -
-
-
-

- {t("PREFERENCES.TABLE.SUBHEADING", { - tableName: t(getTranslationForSubheading(resource)!), - })} -

-
+ +
+

+ {t("PREFERENCES.TABLE.SUBHEADING", { + tableName: t(getTranslationForSubheading(resource)!), + })} +

+
-
-
-
-
-

- { - t( - "PREFERENCES.TABLE.AVAILABLE_COLUMNS" - ) /* Available Columns */ - } -

-
-
    - {deactivatedCols.map((column, key) => - column ? ( -
  • -
    {t(column.label)}
    - changeColumn(column, false)} - > - {t("PREFERENCES.TABLE.ADD_COLUMN")} - -
    • - ) : null - )} -
-
+
+
+
+
+

+ { + t( + "PREFERENCES.TABLE.AVAILABLE_COLUMNS" + ) /* Available Columns */ + } +

+
+
    + {deactivatedCols.map((column, key) => + column ? ( +
  • +
    {t(column.label)}
    + changeColumn(column, false)} + > + {t("PREFERENCES.TABLE.ADD_COLUMN")} + +
    • + ) : null + )} +
+
-
-
-
-

- { - t( - "PREFERENCES.TABLE.SELECTED_COLUMNS" - ) /* Selected Columns */ - } -

-
-
    -
  • - - - {(provided, snapshot) => ( -
    - {activeCols.filter(col => col).map((column, key) => - ( - - {(provided, snapshot) => ( -
    -
    - {t(column.label)} -
    - changeColumn(column, true)} - > - {t("PREFERENCES.TABLE.REMOVE_COLUMN")} - +
    +
    +
    +

    + { + t( + "PREFERENCES.TABLE.SELECTED_COLUMNS" + ) /* Selected Columns */ + } +

    +
    +
      +
    • + + + {(provided, snapshot) => ( +
      + {activeCols.filter(col => col).map((column, key) => + ( + + {(provided, snapshot) => ( +
      +
      + {t(column.label)}
      - )} - - ) - )} - {provided.placeholder} -
      - )} - - + changeColumn(column, true)} + > + {t("PREFERENCES.TABLE.REMOVE_COLUMN")} + +
      + )} + + ) + )} + {provided.placeholder} +
    + )} + + -
    • -
-
+ +
+
-
-

- {/* The order and selection will be saved automatically. - Press "Reset" to restore the default view. */} - {t("PREFERENCES.TABLE.FOOTER_TEXT", { - resetTranslation: t("RESET"), - })} -

-
+
+

+ {/* The order and selection will be saved automatically. + Press "Reset" to restore the default view. */} + {t("PREFERENCES.TABLE.FOOTER_TEXT", { + resetTranslation: t("RESET"), + })} +

-
+