From 24d3c5a1597462941c9c20e616d5387939e9d3af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= Date: Tue, 30 Apr 2024 16:26:01 +0200 Subject: [PATCH 01/13] Use Hermod sprint 14 branch of design system --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 2c6ed23676..5f6167330a 100644 --- a/package.json +++ b/package.json @@ -144,7 +144,7 @@ "prop-types": "Since we use former ddb-react components that depend on prop-types we keep this. Should be removed when usage of prop-types is deprecated." }, "dependencies": { - "@danskernesdigitalebibliotek/dpl-design-system": "2024.18.0-d02b9076284ebf6320a0c838eccdc62087aa2ff5", + "@danskernesdigitalebibliotek/dpl-design-system": "0.0.0-51816d0799b74f931debf64bb88571e5ec772f67", "@fullcalendar/core": "^6.1.11", "@fullcalendar/daygrid": "^6.1.11", "@fullcalendar/interaction": "^6.1.11", diff --git a/yarn.lock b/yarn.lock index dd3704e4d8..3c63404e00 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1533,10 +1533,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@danskernesdigitalebibliotek/dpl-design-system@2024.18.0-d02b9076284ebf6320a0c838eccdc62087aa2ff5": - version "2024.18.0-d02b9076284ebf6320a0c838eccdc62087aa2ff5" - resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/2024.18.0-d02b9076284ebf6320a0c838eccdc62087aa2ff5/f1d5da5b17e3ac3e7763c72b9a7a88d79ba31442#f1d5da5b17e3ac3e7763c72b9a7a88d79ba31442" - integrity sha512-ve+ANGj9pphqRcFDxYanAA+2mv9y91PsvzhlOlvNXjULgwp9wHIz/lvt/Frz5i6zvE47NbX9LmbkQIy/OmzJ7A== +"@danskernesdigitalebibliotek/dpl-design-system@0.0.0-51816d0799b74f931debf64bb88571e5ec772f67": + version "0.0.0-51816d0799b74f931debf64bb88571e5ec772f67" + resolved "https://npm.pkg.github.com/download/@danskernesdigitalebibliotek/dpl-design-system/0.0.0-51816d0799b74f931debf64bb88571e5ec772f67/4ed9cfa331255243f3d6dd788322495f502925af#4ed9cfa331255243f3d6dd788322495f502925af" + integrity sha512-+tvOYNUB/Jx9fUXhUNx73oxIie1kmjxuVQ2d6a3wkQ5ckcJMeBkq6LyIqRVllsm0I6ZwaykWM2ZDh4A1Ed5OZg== "@discoveryjs/json-ext@^0.5.0", "@discoveryjs/json-ext@^0.5.3": version "0.5.7" From 6c32158529120ae2e1a6b1f54d81ed3e76f64c42 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Fri, 26 Apr 2024 18:27:36 +0200 Subject: [PATCH 02/13] Move opening hour logic from `EventForm` to `DialogFormAdd` This change ensures `EventForm` is simplified, enhancing its reusability and the overall readability and structure of the code. --- .../opening-hours-editor/DialogFormAdd.tsx | 53 +++- .../opening-hours-editor/DialogFormEdit.tsx | 4 +- src/apps/opening-hours-editor/EventForm.tsx | 255 ++++++++---------- 3 files changed, 156 insertions(+), 156 deletions(-) diff --git a/src/apps/opening-hours-editor/DialogFormAdd.tsx b/src/apps/opening-hours-editor/DialogFormAdd.tsx index b3bda1cdad..83a88c9de7 100644 --- a/src/apps/opening-hours-editor/DialogFormAdd.tsx +++ b/src/apps/opening-hours-editor/DialogFormAdd.tsx @@ -13,6 +13,9 @@ import { DplOpeningHoursCreatePOSTBodyRepetitionType } from "../../core/dpl-cms/model"; import { OpeningHoursCategoriesType } from "./types"; +import useDialog from "../../components/dialog/useDialog"; +import ConfirmAddRepeatedOpeningHour from "./ConfirmAddRepeatedOpeningHour"; +import Dialog from "../../components/dialog/Dialog"; type DialogFormAddProps = { selectedEventInfo: DateSelectArg; @@ -24,19 +27,22 @@ type DialogFormAddProps = { const DialogFormAdd: React.FC = ({ selectedEventInfo, handleEventAdd, - closeDialog, + closeDialog: closeAddDialog, openingHoursCategories }) => { + const { dialogContent, openDialogWithContent, closeDialog, dialogRef } = + useDialog(); const calendarApi = selectedEventInfo.view.calendar; const isDayGridMonth = selectedEventInfo.view.type === "dayGridMonth"; const isTimeGridWeek = selectedEventInfo.view.type === "timeGridWeek"; - const handleSubmit: EventFormOnSubmitType = ( + const handleSubmit = ({ category, startTime, endTime, + startDate, repeatedEndDate - ) => { + }: EventFormOnSubmitType) => { const start = updateDateTime(selectedEventInfo.start, startTime); const startStr = formatDateStr(start); let end = updateDateTime(selectedEventInfo.end, endTime); @@ -80,18 +86,41 @@ const DialogFormAdd: React.FC = ({ } }); - handleEventAdd(cmsEvent); - closeDialog(); + if (repeatedEndDate) { + openDialogWithContent( + { + handleEventAdd(cmsEvent); + closeAddDialog(); + }} + closeDialog={closeDialog} + /> + ); + } else { + handleEventAdd(cmsEvent); + closeAddDialog(); + } }; return ( - + <> + + + + {dialogContent} + + ); }; diff --git a/src/apps/opening-hours-editor/DialogFormEdit.tsx b/src/apps/opening-hours-editor/DialogFormEdit.tsx index 7fc09f217e..344cbf1ef5 100644 --- a/src/apps/opening-hours-editor/DialogFormEdit.tsx +++ b/src/apps/opening-hours-editor/DialogFormEdit.tsx @@ -27,11 +27,11 @@ const DialogFormEdit: React.FC = ({ }) => { const t = useText(); - const handleSubmit: EventFormOnSubmitType = ( + const handleSubmit = ({ category, startTime, endTime - ) => { + }: EventFormOnSubmitType) => { if (!eventInfo.start || !eventInfo.end) { // eslint-disable-next-line no-alert alert(t("openingHoursInvalidEventText")); diff --git a/src/apps/opening-hours-editor/EventForm.tsx b/src/apps/opening-hours-editor/EventForm.tsx index e28ecbaa01..0606fe767b 100644 --- a/src/apps/opening-hours-editor/EventForm.tsx +++ b/src/apps/opening-hours-editor/EventForm.tsx @@ -10,22 +10,20 @@ import { getStringForDateInput, getWeekDayName } from "./helper"; -import useDialog from "../../components/dialog/useDialog"; -import Dialog from "../../components/dialog/Dialog"; -import ConfirmAddRepeatedOpeningHour from "./ConfirmAddRepeatedOpeningHour"; -export type EventFormOnSubmitType = ( - category: OpeningHoursCategoriesType, - startTime: string, - endTime: string, - repeatedEndDate: string | null -) => void; +export type EventFormOnSubmitType = { + category: OpeningHoursCategoriesType; + startTime: string; + endTime: string; + startDate: Date; + repeatedEndDate: string | null; +}; type EventFormProps = { initialTitle?: string; startDate: Date; endDate: Date; - onSubmit: EventFormOnSubmitType; + onSubmit: (EventFormOnSubmitType: EventFormOnSubmitType) => void; openingHoursCategories: OpeningHoursCategoriesType[]; children?: React.ReactNode; isRepeatedOpeningHour?: boolean; @@ -41,8 +39,6 @@ const EventForm: React.FC = ({ isRepeatedOpeningHour }) => { const t = useText(); - const { dialogContent, openDialogWithContent, closeDialog, dialogRef } = - useDialog(); const initialCategory = initialTitle ? openingHoursCategories.find((category) => category.title === initialTitle) @@ -82,145 +78,120 @@ const EventForm: React.FC = ({ if (!category) { return; } - - if (repeatedEndDate) { - openDialogWithContent( - - onSubmit(category, startTime, endTime, repeatedEndDate) - } - closeDialog={closeDialog} - /> - ); - } else { - onSubmit(category, startTime, endTime, repeatedEndDate); - } + onSubmit({ category, startTime, endTime, startDate, repeatedEndDate }); }; return ( - <> -
+ + + + setStartTime(e.target.value)} + /> + + setEndTime(e.target.value)} + min={startTime} + max="00:00" + /> + {isRepeatedOpeningHour && ( + <> +
+ setIsRepeated(e.target.checked)} + /> - setRepeatedEndDate(e.target.value)} - /> - - )} - - {children} - +
- - {dialogContent} - - + + setRepeatedEndDate(e.target.value)} + /> + + )} + + {children} + ); }; From 087e1e5a9a6119b699c9647f54e2bb53b0165da6 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 29 Apr 2024 15:53:53 +0200 Subject: [PATCH 03/13] Update to latest openAPI spec from DPL-CMS The `target` inside `orval.config.ts` should be set back to develop when https://github.com/danskernesdigitalebibliotek/dpl-cms/pull/1057 is merged. --- orval.config.ts | 2 +- src/core/dpl-cms/dpl-cms.ts | 4 ++-- ...ePOST200.ts => dplOpeningHoursCreatePOST200Item.ts} | 10 +++++----- ....ts => dplOpeningHoursCreatePOST200ItemCategory.ts} | 2 +- ...s => dplOpeningHoursCreatePOST200ItemRepetition.ts} | 10 +++++----- ... dplOpeningHoursCreatePOST200ItemRepetitionType.ts} | 6 +++--- ...eningHoursCreatePOST200ItemRepetitionWeeklyData.ts} | 2 +- .../dpl-cms/model/dplOpeningHoursDeleteDELETEParams.ts | 4 ++++ src/core/dpl-cms/model/index.ts | 10 +++++----- 9 files changed, 27 insertions(+), 23 deletions(-) rename src/core/dpl-cms/model/{dplOpeningHoursCreatePOST200.ts => dplOpeningHoursCreatePOST200Item.ts} (60%) rename src/core/dpl-cms/model/{dplOpeningHoursCreatePOST200Category.ts => dplOpeningHoursCreatePOST200ItemCategory.ts} (84%) rename src/core/dpl-cms/model/{dplOpeningHoursCreatePOST200Repetition.ts => dplOpeningHoursCreatePOST200ItemRepetition.ts} (59%) rename src/core/dpl-cms/model/{dplOpeningHoursCreatePOST200RepetitionType.ts => dplOpeningHoursCreatePOST200ItemRepetitionType.ts} (72%) rename src/core/dpl-cms/model/{dplOpeningHoursCreatePOST200RepetitionWeeklyData.ts => dplOpeningHoursCreatePOST200ItemRepetitionWeeklyData.ts} (86%) diff --git a/orval.config.ts b/orval.config.ts index 7c84e1c862..9655bde6a8 100644 --- a/orval.config.ts +++ b/orval.config.ts @@ -139,7 +139,7 @@ export default defineConfig({ }, input: { target: - "https://raw.githubusercontent.com/danskernesdigitalebibliotek/dpl-cms/opening-hours-repeated/openapi.json", + "https://raw.githubusercontent.com/danskernesdigitalebibliotek/dpl-cms/3b85ed74cd528c830646d59d3a846bfebc1d2383/openapi.json", converterOptions: { indent: 2 } diff --git a/src/core/dpl-cms/dpl-cms.ts b/src/core/dpl-cms/dpl-cms.ts index 1605557402..9a2cb3c5ca 100644 --- a/src/core/dpl-cms/dpl-cms.ts +++ b/src/core/dpl-cms/dpl-cms.ts @@ -19,7 +19,7 @@ import type { CampaignMatchPOST200, CampaignMatchPOSTBodyItem, CampaignMatchPOSTParams, - DplOpeningHoursCreatePOST200, + DplOpeningHoursCreatePOST200Item, DplOpeningHoursCreatePOSTBody, DplOpeningHoursCreatePOSTParams, DplOpeningHoursDeleteDELETEParams, @@ -138,7 +138,7 @@ export const dplOpeningHoursCreatePOST = ( dplOpeningHoursCreatePOSTBody: BodyType, params: DplOpeningHoursCreatePOSTParams ) => { - return fetcher({ + return fetcher({ url: `/dpl_opening_hours`, method: "POST", headers: { "Content-Type": "application/json" }, diff --git a/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200.ts b/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200Item.ts similarity index 60% rename from src/core/dpl-cms/model/dplOpeningHoursCreatePOST200.ts rename to src/core/dpl-cms/model/dplOpeningHoursCreatePOST200Item.ts index 99b20ff5fb..9285c8ce86 100644 --- a/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200.ts +++ b/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200Item.ts @@ -5,20 +5,20 @@ * The REST API provide by the core REST module. * OpenAPI spec version: Versioning not supported */ -import type { DplOpeningHoursCreatePOST200Category } from "./dplOpeningHoursCreatePOST200Category"; -import type { DplOpeningHoursCreatePOST200Repetition } from "./dplOpeningHoursCreatePOST200Repetition"; +import type { DplOpeningHoursCreatePOST200ItemCategory } from "./dplOpeningHoursCreatePOST200ItemCategory"; +import type { DplOpeningHoursCreatePOST200ItemRepetition } from "./dplOpeningHoursCreatePOST200ItemRepetition"; -export type DplOpeningHoursCreatePOST200 = { +export type DplOpeningHoursCreatePOST200Item = { /** The id for the branch the instance belongs to */ branch_id: number; - category: DplOpeningHoursCreatePOST200Category; + category: DplOpeningHoursCreatePOST200ItemCategory; /** The date which the opening hours applies to. In ISO 8601 format. */ date: string; /** When the opening hours end. In format HH:MM */ end_time: string; /** An serial unique id of the opening hours instance. */ id: number; - repetition: DplOpeningHoursCreatePOST200Repetition; + repetition: DplOpeningHoursCreatePOST200ItemRepetition; /** When the opening hours start. In format HH:MM */ start_time: string; }; diff --git a/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200Category.ts b/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemCategory.ts similarity index 84% rename from src/core/dpl-cms/model/dplOpeningHoursCreatePOST200Category.ts rename to src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemCategory.ts index 611f06bce0..e87465a6d1 100644 --- a/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200Category.ts +++ b/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemCategory.ts @@ -6,7 +6,7 @@ * OpenAPI spec version: Versioning not supported */ -export type DplOpeningHoursCreatePOST200Category = { +export type DplOpeningHoursCreatePOST200ItemCategory = { /** A CSS compatible color code which can be used to represent the category */ color: string; title: string; diff --git a/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200Repetition.ts b/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemRepetition.ts similarity index 59% rename from src/core/dpl-cms/model/dplOpeningHoursCreatePOST200Repetition.ts rename to src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemRepetition.ts index 5d0220c39b..2d4b501a82 100644 --- a/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200Repetition.ts +++ b/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemRepetition.ts @@ -5,13 +5,13 @@ * The REST API provide by the core REST module. * OpenAPI spec version: Versioning not supported */ -import type { DplOpeningHoursCreatePOST200RepetitionType } from "./dplOpeningHoursCreatePOST200RepetitionType"; -import type { DplOpeningHoursCreatePOST200RepetitionWeeklyData } from "./dplOpeningHoursCreatePOST200RepetitionWeeklyData"; +import type { DplOpeningHoursCreatePOST200ItemRepetitionType } from "./dplOpeningHoursCreatePOST200ItemRepetitionType"; +import type { DplOpeningHoursCreatePOST200ItemRepetitionWeeklyData } from "./dplOpeningHoursCreatePOST200ItemRepetitionWeeklyData"; -export type DplOpeningHoursCreatePOST200Repetition = { +export type DplOpeningHoursCreatePOST200ItemRepetition = { /** A serial unique id of the repetition. All instances with the same id belongs to the same repetition. */ id: number; /** If/how the instance should be repeated in the future:
- single: The instance should not be repeated
- weekly: The instance should be repeated weekly from the first day of the repetition until the provided end date. The week day of the first instance defines which weekday should be used for the repeated instances. */ - type: DplOpeningHoursCreatePOST200RepetitionType; - weekly_data?: DplOpeningHoursCreatePOST200RepetitionWeeklyData; + type: DplOpeningHoursCreatePOST200ItemRepetitionType; + weekly_data?: DplOpeningHoursCreatePOST200ItemRepetitionWeeklyData; }; diff --git a/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200RepetitionType.ts b/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemRepetitionType.ts similarity index 72% rename from src/core/dpl-cms/model/dplOpeningHoursCreatePOST200RepetitionType.ts rename to src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemRepetitionType.ts index b12c33c0d1..e81933dbd4 100644 --- a/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200RepetitionType.ts +++ b/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemRepetitionType.ts @@ -9,11 +9,11 @@ /** * If/how the instance should be repeated in the future:
- single: The instance should not be repeated
- weekly: The instance should be repeated weekly from the first day of the repetition until the provided end date. The week day of the first instance defines which weekday should be used for the repeated instances. */ -export type DplOpeningHoursCreatePOST200RepetitionType = - typeof DplOpeningHoursCreatePOST200RepetitionType[keyof typeof DplOpeningHoursCreatePOST200RepetitionType]; +export type DplOpeningHoursCreatePOST200ItemRepetitionType = + typeof DplOpeningHoursCreatePOST200ItemRepetitionType[keyof typeof DplOpeningHoursCreatePOST200ItemRepetitionType]; // eslint-disable-next-line @typescript-eslint/no-redeclare -export const DplOpeningHoursCreatePOST200RepetitionType = { +export const DplOpeningHoursCreatePOST200ItemRepetitionType = { none: "none", weekly: "weekly" } as const; diff --git a/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200RepetitionWeeklyData.ts b/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemRepetitionWeeklyData.ts similarity index 86% rename from src/core/dpl-cms/model/dplOpeningHoursCreatePOST200RepetitionWeeklyData.ts rename to src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemRepetitionWeeklyData.ts index b8e8fecb21..0b508c9253 100644 --- a/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200RepetitionWeeklyData.ts +++ b/src/core/dpl-cms/model/dplOpeningHoursCreatePOST200ItemRepetitionWeeklyData.ts @@ -6,7 +6,7 @@ * OpenAPI spec version: Versioning not supported */ -export type DplOpeningHoursCreatePOST200RepetitionWeeklyData = { +export type DplOpeningHoursCreatePOST200ItemRepetitionWeeklyData = { /** The end date of the repetition. If the end date is not on the same week day as the first instance then the preceding occurrence of the weekday will be the last instance.

This field must be provided if type is 'weekly' */ end_date?: string; }; diff --git a/src/core/dpl-cms/model/dplOpeningHoursDeleteDELETEParams.ts b/src/core/dpl-cms/model/dplOpeningHoursDeleteDELETEParams.ts index 703c616efc..c983db0a7c 100644 --- a/src/core/dpl-cms/model/dplOpeningHoursDeleteDELETEParams.ts +++ b/src/core/dpl-cms/model/dplOpeningHoursDeleteDELETEParams.ts @@ -12,4 +12,8 @@ export type DplOpeningHoursDeleteDELETEParams = { * Request format */ _format?: DplOpeningHoursDeleteDELETE_Format; + /** + * The id of the repetition to delete.
If this is provided then all opening hours from the provided instance to the final instance in the provided repetition will be deleted. + */ + repetition_id?: number; }; diff --git a/src/core/dpl-cms/model/index.ts b/src/core/dpl-cms/model/index.ts index 6dba853f46..87092b69cf 100644 --- a/src/core/dpl-cms/model/index.ts +++ b/src/core/dpl-cms/model/index.ts @@ -13,11 +13,11 @@ export * from "./campaignMatchPOSTBodyItem"; export * from "./campaignMatchPOSTBodyItemValuesItem"; export * from "./campaignMatchPOSTFormat"; export * from "./campaignMatchPOSTParams"; -export * from "./dplOpeningHoursCreatePOST200"; -export * from "./dplOpeningHoursCreatePOST200Category"; -export * from "./dplOpeningHoursCreatePOST200Repetition"; -export * from "./dplOpeningHoursCreatePOST200RepetitionType"; -export * from "./dplOpeningHoursCreatePOST200RepetitionWeeklyData"; +export * from "./dplOpeningHoursCreatePOST200Item"; +export * from "./dplOpeningHoursCreatePOST200ItemCategory"; +export * from "./dplOpeningHoursCreatePOST200ItemRepetition"; +export * from "./dplOpeningHoursCreatePOST200ItemRepetitionType"; +export * from "./dplOpeningHoursCreatePOST200ItemRepetitionWeeklyData"; export * from "./dplOpeningHoursCreatePOSTBody"; export * from "./dplOpeningHoursCreatePOSTBodyCategory"; export * from "./dplOpeningHoursCreatePOSTBodyRepetition"; From f8cedf0f047f5e958b13c9691baad7132c3fac49 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 29 Apr 2024 14:28:00 +0200 Subject: [PATCH 04/13] Implement removal of opening hours series When an opening hour is deleted, a modal `ConfirmEditRepeatedOpeningHour` will appear, asking whether the deletion should apply to just this instance or all future instances. If it is for all future instances, we send the `repetition_id` to the `handleEventRemove` function. - Added the `isOpeningHourWeeklyRepetition` function to determine if an event is part of a weekly series. --- .../ConfirmAddRepeatedOpeningHour.tsx | 2 +- .../ConfirmEditRepeatedOpeningHour.tsx | 80 ++++++++++++++++++ .../opening-hours-editor/DialogFormEdit.tsx | 83 ++++++++++++++----- .../OpeningHoursEditor.dev.tsx | 17 +++- .../OpeningHoursEditor.entry.tsx | 5 +- .../OpeningHoursEditorEventContent.tsx | 6 +- src/apps/opening-hours-editor/helper.ts | 19 ++++- src/apps/opening-hours-editor/types.ts | 5 ++ .../useOpeningHoursEditor.tsx | 9 +- 9 files changed, 193 insertions(+), 33 deletions(-) create mode 100644 src/apps/opening-hours-editor/ConfirmEditRepeatedOpeningHour.tsx diff --git a/src/apps/opening-hours-editor/ConfirmAddRepeatedOpeningHour.tsx b/src/apps/opening-hours-editor/ConfirmAddRepeatedOpeningHour.tsx index 089d701a7e..2b9960ae1d 100644 --- a/src/apps/opening-hours-editor/ConfirmAddRepeatedOpeningHour.tsx +++ b/src/apps/opening-hours-editor/ConfirmAddRepeatedOpeningHour.tsx @@ -79,7 +79,7 @@ const ConfirmAddRepeatedOpeningHour = ({ closeDialog(); }} > - {t("openingHoursConfirmAddRepeatedSubmitText")} + {t("openingHoursConfirmRepeatedSubmitText")} ); diff --git a/src/apps/opening-hours-editor/ConfirmEditRepeatedOpeningHour.tsx b/src/apps/opening-hours-editor/ConfirmEditRepeatedOpeningHour.tsx new file mode 100644 index 0000000000..f0dbcf3618 --- /dev/null +++ b/src/apps/opening-hours-editor/ConfirmEditRepeatedOpeningHour.tsx @@ -0,0 +1,80 @@ +import React, { ChangeEvent, FC, useState } from "react"; +import { useText } from "../../core/utils/text"; + +enum OptionValue { + THIS = "this", + All = "all" +} + +type ConfirmEditRepeatedOpeningHourType = { + title: string; + confirmSubmit: (editSerie: boolean) => void; + closeDialog: () => void; +}; + +const ConfirmEditRepeatedOpeningHour: FC< + ConfirmEditRepeatedOpeningHourType +> = ({ confirmSubmit, closeDialog, title }) => { + const t = useText(); + const options = [ + { + value: OptionValue.THIS, + label: t("openingHoursEditEventConfirmOptionThisText") + }, + { + value: OptionValue.All, + label: t("openingHoursEditEventConfirmOptionAllText") + } + ]; + + const [selectedOption, setSelectedOption] = useState(options[0].value); + + const handleRadioChange = (event: ChangeEvent) => { + if ( + event.target.value === OptionValue.THIS || + event.target.value === OptionValue.All + ) { + setSelectedOption(event.target.value); + } + }; + + return ( +
+

{title}

+ {options.map(({ value, label }) => ( +
+ + +
+ ))} + + + +
+ ); +}; + +export default ConfirmEditRepeatedOpeningHour; diff --git a/src/apps/opening-hours-editor/DialogFormEdit.tsx b/src/apps/opening-hours-editor/DialogFormEdit.tsx index 344cbf1ef5..7a8e1b43ef 100644 --- a/src/apps/opening-hours-editor/DialogFormEdit.tsx +++ b/src/apps/opening-hours-editor/DialogFormEdit.tsx @@ -3,29 +3,38 @@ import { EventImpl } from "@fullcalendar/core/internal"; import { adjustEndDateBasedOnStartDate, formatFullCalendarEventToCmsEventEdit, + isOpeningHourWeeklyRepetition, updateDateTime } from "./helper"; import EventForm, { EventFormOnSubmitType } from "./EventForm"; import { useText } from "../../core/utils/text"; -import { OpeningHoursCategoriesType } from "./types"; +import { HandleEventRemoveType, OpeningHoursCategoriesType } from "./types"; import { DplOpeningHoursUpdatePATCHBody } from "../../core/dpl-cms/model"; +import useDialog from "../../components/dialog/useDialog"; +import Dialog from "../../components/dialog/Dialog"; +import ConfirmEditRepeatedOpeningHour from "./ConfirmEditRepeatedOpeningHour"; type DialogFormEditProps = { eventInfo: EventImpl; handleEventEditing: (event: DplOpeningHoursUpdatePATCHBody) => void; closeDialog: () => void; - handleEventRemove: (eventId: string) => void; + handleEventRemove: ({ + eventId, + repetition_id + }: HandleEventRemoveType) => void; openingHoursCategories: OpeningHoursCategoriesType[]; }; const DialogFormEdit: React.FC = ({ eventInfo, handleEventEditing, - closeDialog, + closeDialog: closeEditDialog, handleEventRemove, openingHoursCategories }) => { const t = useText(); + const { dialogContent, openDialogWithContent, closeDialog, dialogRef } = + useDialog(); const handleSubmit = ({ category, @@ -57,7 +66,7 @@ const DialogFormEdit: React.FC = ({ }; handleEventEditing(formatFullCalendarEventToCmsEventEdit(cmsEvent)); - closeDialog(); + closeEditDialog(); }; if (!eventInfo.start || !eventInfo.end) { @@ -66,27 +75,55 @@ const DialogFormEdit: React.FC = ({ return null; } + const handleEventRemoveConfirm = (editSerie: boolean) => { + handleEventRemove({ + eventId: eventInfo.id, + ...(editSerie + ? { repetition_id: eventInfo.extendedProps.repetition.id } + : {}) + }); + eventInfo.remove(); + closeDialog(); + closeEditDialog(); + }; + + const handleRemoveButtonClick = () => { + if (isOpeningHourWeeklyRepetition(eventInfo)) { + openDialogWithContent( + + ); + } else { + handleEventRemoveConfirm(false); + } + }; + return ( - - - + + + + + {dialogContent} + + ); }; diff --git a/src/apps/opening-hours-editor/OpeningHoursEditor.dev.tsx b/src/apps/opening-hours-editor/OpeningHoursEditor.dev.tsx index b8f1e162da..0253b3f99a 100644 --- a/src/apps/opening-hours-editor/OpeningHoursEditor.dev.tsx +++ b/src/apps/opening-hours-editor/OpeningHoursEditor.dev.tsx @@ -86,7 +86,7 @@ export default { defaultValue: "Cancel", control: { type: "text" } }, - openingHoursConfirmAddRepeatedSubmitText: { + openingHoursConfirmRepeatedSubmitText: { name: "Opening hours confirm add repeated submit", defaultValue: "I'm sure", control: { type: "text" } @@ -95,6 +95,21 @@ export default { name: "Opening hours repeated icon alt text", defaultValue: "Repeated opening hour", control: { type: "text" } + }, + openingHoursEditEventConfirmOptionThisText: { + name: "Opening hours remove event confirm option this", + defaultValue: "Only this instance", + control: { type: "text" } + }, + openingHoursEditEventConfirmOptionAllText: { + name: "Opening hours remove event confirm option all", + defaultValue: "This and feuture instances", + control: { type: "text" } + }, + openingHoursRemoveEventTitleText: { + name: "Opening hours remove event title", + defaultValue: "Remove opening hour", + control: { type: "text" } } } } as ComponentMeta; diff --git a/src/apps/opening-hours-editor/OpeningHoursEditor.entry.tsx b/src/apps/opening-hours-editor/OpeningHoursEditor.entry.tsx index 71da485599..b7f00e60be 100644 --- a/src/apps/opening-hours-editor/OpeningHoursEditor.entry.tsx +++ b/src/apps/opening-hours-editor/OpeningHoursEditor.entry.tsx @@ -19,8 +19,11 @@ interface OpeningHoursEditorEntryTextProps { openingHoursEventFormStartDateText: string; openingHoursConfirmAddRepeatedText: string; openingHoursConfirmAddRepeatedCancelText: string; - openingHoursConfirmAddRepeatedSubmitText: string; + openingHoursConfirmRepeatedSubmitText: string; openingHoursRepeatedIconAltText: string; + openingHoursEditEventConfirmOptionThisText: string; + openingHoursEditEventConfirmOptionAllText: string; + openingHoursRemoveEventTitleText: string; } interface OpeningHoursEditorEntryConfigProps { diff --git a/src/apps/opening-hours-editor/OpeningHoursEditorEventContent.tsx b/src/apps/opening-hours-editor/OpeningHoursEditorEventContent.tsx index ef67a07685..732af27e38 100644 --- a/src/apps/opening-hours-editor/OpeningHoursEditorEventContent.tsx +++ b/src/apps/opening-hours-editor/OpeningHoursEditorEventContent.tsx @@ -1,7 +1,7 @@ import React from "react"; import logo from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/logo/reload_logo_black.svg"; import { EventInput } from "@fullcalendar/core"; -import { extractTime } from "./helper"; +import { extractTime, isOpeningHourWeeklyRepetition } from "./helper"; type OpeningHoursEditorEventContentProps = { eventInput: EventInput; @@ -12,8 +12,6 @@ const OpeningHoursEditorEventContent: React.FC< OpeningHoursEditorEventContentProps > = ({ eventInput, iconAltText }) => { const { event } = eventInput; - const { repetition } = event.extendedProps; - const isSeries = repetition?.type === "weekly"; return (
- {isSeries && ( + {isOpeningHourWeeklyRepetition(event) && (
{iconAltText}
diff --git a/src/apps/opening-hours-editor/helper.ts b/src/apps/opening-hours-editor/helper.ts index 5b1a0feb8c..3b715e9ec9 100644 --- a/src/apps/opening-hours-editor/helper.ts +++ b/src/apps/opening-hours-editor/helper.ts @@ -1,9 +1,11 @@ import dayjs from "dayjs"; import { EventInput } from "@fullcalendar/core"; +import { EventImpl } from "@fullcalendar/core/internal"; import { DplOpeningHoursListGET200Item, DplOpeningHoursCreatePOSTBody, - DplOpeningHoursUpdatePATCHBody + DplOpeningHoursUpdatePATCHBody, + DplOpeningHoursListGET200ItemRepetitionType } from "../../core/dpl-cms/model"; const formatDateTimeString = (date: string, time: string): string => { @@ -154,3 +156,18 @@ export const getDateString = (date: Date) => { export const getStringForDateInput = (date: Date) => { return dayjs(date).format("YYYY-MM-DD"); }; + +export const isOpeningHourWeeklyRepetition = ( + event: EventImpl | EventInput +) => { + if ("event" in event) { + return ( + event.event.extendedProps?.repetition?.type === + DplOpeningHoursListGET200ItemRepetitionType.weekly + ); + } + return ( + event.extendedProps?.repetition?.type === + DplOpeningHoursListGET200ItemRepetitionType.weekly + ); +}; diff --git a/src/apps/opening-hours-editor/types.ts b/src/apps/opening-hours-editor/types.ts index 0289c23a57..a214ec0304 100644 --- a/src/apps/opening-hours-editor/types.ts +++ b/src/apps/opening-hours-editor/types.ts @@ -2,3 +2,8 @@ export type OpeningHoursCategoriesType = { title: string; color: string; }; + +export type HandleEventRemoveType = { + eventId: string; + repetition_id?: number; +}; diff --git a/src/apps/opening-hours-editor/useOpeningHoursEditor.tsx b/src/apps/opening-hours-editor/useOpeningHoursEditor.tsx index 51279a8341..9731d79949 100644 --- a/src/apps/opening-hours-editor/useOpeningHoursEditor.tsx +++ b/src/apps/opening-hours-editor/useOpeningHoursEditor.tsx @@ -14,6 +14,7 @@ import { DplOpeningHoursUpdatePATCHBody } from "../../core/dpl-cms/model"; import { useConfig } from "../../core/utils/config"; +import { HandleEventRemoveType } from "./types"; const useOpeningHoursEditor = () => { const config = useConfig(); @@ -94,12 +95,16 @@ const useOpeningHoursEditor = () => { ); }; - const handleEventRemove = (eventId: string) => { + const handleEventRemove = ({ + eventId, + repetition_id + }: HandleEventRemoveType) => { removeOpeningHours( { id: eventId, params: { - _format: "json" + _format: "json", + ...(repetition_id ? { repetition_id } : {}) } }, { From ce30b6c50fe1c33fa4c36bdeab1bd2b36a8adafe Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Tue, 7 May 2024 11:02:41 +0200 Subject: [PATCH 05/13] Fix spelling errors and standardize text casing --- .../ConfirmAddRepeatedOpeningHour.tsx | 8 ++++---- .../ConfirmEditRepeatedOpeningHour.tsx | 12 ++++++------ .../opening-hours-editor/OpeningHoursEditor.dev.tsx | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/apps/opening-hours-editor/ConfirmAddRepeatedOpeningHour.tsx b/src/apps/opening-hours-editor/ConfirmAddRepeatedOpeningHour.tsx index 2b9960ae1d..a52ad7c926 100644 --- a/src/apps/opening-hours-editor/ConfirmAddRepeatedOpeningHour.tsx +++ b/src/apps/opening-hours-editor/ConfirmAddRepeatedOpeningHour.tsx @@ -26,14 +26,14 @@ const ConfirmAddRepeatedOpeningHour = ({ return (

{t("openingHoursConfirmAddRepeatedText")}

@@ -63,7 +63,7 @@ const ConfirmAddRepeatedOpeningHour = ({
-