POC: Add `Dialog` - Ddfform 500 #1048

kasperbirch1 · 2024-03-20T13:54:35Z

Link to issue

https://reload.atlassian.net/browse/DDFFORM-500

Description

This is a proof of concept for utilizing the "new" native HTML dialog element with the open attribute. By default, it is accessible with focus and keyboard navigation.

In this version, it triggers a dialog/modal upon clicking on an event. The dialog includes a close button (the dialog also closes when pressing the escape key or clicking on the backdrop) and a button that currently displays an alert with the event's updated data. handleEventEditing will later be an update request to the API.

Note:
Run docker compose up in dpl-react to spin up wiremock

I found some inspiration for the dialog setup in this video, but I have made changes to keep the logic in a custom React hook for simplicity and readability.
https://www.youtube.com/watch?v=YwHJMlvZRCc&t=809s

Screenshot of the result

Skaermoptagelse.2024-03-21.kl.15.54.44.mov

.docker/wiremock/cms/mappings/dummy-479e26d6-5197-4d8f-a2dd-fefe64aabc14.json

src/apps/opening-hours-editor/Dialog.tsx

src/apps/opening-hours-editor/DialogFomular.tsx

src/apps/opening-hours-editor/helper.ts

spaceo

Looking good!
I have written some thoughts...

src/apps/opening-hours-editor/useDialog.tsx

src/apps/opening-hours-editor/useOpeningHours.tsx

This is to be able to see the date on the current week for development. Run `docker compose up` in dpl-react to spin up wiremock

This is a proof of concept for utilizing the "new" native HTML `dialog` element with the `open` attribute. By default, it is accessible with focus and keyboard navigation. In this version, it triggers a dialog/modal upon clicking on an event. The dialog includes a close button (the dialog also closes when pressing the escape key or clicking on the backdrop) and a button that currently displays an alert with the event's title. `handleEventEditing` will later be an update request to the API.

Error: src/apps/opening-hours-editor/useDialog.tsx(10,23): error TS2339: Property 'close' does not exist on type 'HTMLDialogElement'. Error: src/apps/opening-hours-editor/useDialog.tsx(16,23): error TS2339: Property 'showModal' does not exist on type 'HTMLDialogElement'. This should probably be fixed by updating the TypeScript version.

This will present the relevant values for the current event in input fields where the user can edit them. There is a small change to the placeholder function `handleEventEditing` that now alerts the complete event data that will later be sent to the API. I have removed `handleEventClick` as it is now unnecessary.

Converted date/time to object types for clear context and enhanced strict typing, replacing string representations.

- This component is highly generic and will be useful across all applications. - Additionally, I've added an icon for the close button and some CSS classes for future styling.

This is a more proactive choice for deleting an event. It is meaningful to keep the editing and removal options in the same place. A translation string for the 'Remove' button has been added.

This update allows users to specify opening hours from the month view, similar to the functionality available in the week view. As our API does not process full-day values, this modification will not introduce any problems

`handleEventRemove` now uses the mutate hook `useDplOpeningHoursDeleteDELETE` to delete an event. After the success is achieved, it will refetch the data from `useDplOpeningHoursListGET`.

There was a problem with date selection persistence when the dialog was closed using the escape key. I've implemented a `useEscapeKey` hook that listens for the escape keydown event and calls the `onClose` function.

Cleaned up code in `useOpeningHours` to streamline `onSuccess` and `onError` handling

The updated code works as expected. Events now behave in the same way in fullcalender regarding the data object that is sent to dpl-cms In addition, 'day.js' is now used for efficient handling of date objects.

The `children` prop is utilized to manage additional elements such as the remove button, ensuring the form styles remain intact.

We use useConfig to manage props in order to handle arrays and number props. This is not the optimal solution since useConfig is starting to get a bit messy as, for example, these props here have nothing to do with config. We must deal with this another time. I have removed GuardedApp since it is only related to login - Implement `useWireMockStartDate` Boolean This boolean aligns the full calendar start date with our wiremock data. Also renamed the mocked data

This upgrade was necessary because `orval` did not correctly capitalize (uppercase) the HTTP request methods. Additionally, I plan to run the codegen for the other `orval` clients in separate commits following this one. These will include: - "codegen:client:fbs" - "codegen:client:cover" - "codegen:client:publizon"

This hook is exclusively for the `OpeningHoursEditor`. Renaming it will prevent conflicts with the `useOpeningHours` hook that is used for presenting the opening hours in our React app.

kasperbirch1 force-pushed the DDFFORM-500-tilfoj-dialog-modal branch 2 times, most recently from 0e404df to fcb881a Compare March 20, 2024 14:16

kasperbirch1 assigned kasperg and spaceo Mar 20, 2024

kasperg assigned LasseStaus Mar 21, 2024

kasperbirch1 force-pushed the DDFFORM-500-tilfoj-dialog-modal branch 2 times, most recently from 7cce14b to cd1ace4 Compare March 22, 2024 12:31