-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Add dynamic row dialog (#4261)
* add customize button text dialog * update element schema to handle dynamic row properties
- Loading branch information
Showing
11 changed files
with
308 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
...]/(form administration)/form-builder/[id]/edit/components/elements/CustomizeSetButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| "use client"; | ||
| import React, { useState } from "react"; | ||
| import { DynamicRowDialog } from "@formBuilder/components/shared/DynamicRowDialog"; | ||
| import { Button } from "@clientComponents/globals"; | ||
| import { useTranslation } from "@i18n/client"; | ||
| import { MoreIcon } from "@serverComponents/icons/MoreIcon"; | ||
|
|
||
| export const CustomizeSetButton = ({ | ||
| itemId, | ||
| itemIndex, | ||
| }: { | ||
| itemId: number; | ||
| itemIndex: number; | ||
| }) => { | ||
| const { t } = useTranslation("form-builder"); | ||
| const [showCustomizeSetDialog, setShowCustomizeSetDialog] = useState(false); | ||
| return ( | ||
| <> | ||
| <div className="mb-4"> | ||
| <Button | ||
| onClick={() => { | ||
| setShowCustomizeSetDialog(true); | ||
| }} | ||
| theme="link" | ||
| className="group/button mb-2 !px-4 !py-2 text-sm leading-6" | ||
| > | ||
| <> | ||
| <MoreIcon className="mr-2 size-[24px] rounded-sm border-1 border-black group-focus/button:border-white group-focus/button:fill-white" /> | ||
| {t("dynamicRow.dialog.customizeElement")} | ||
| </> | ||
| </Button> | ||
| </div> | ||
| {showCustomizeSetDialog && ( | ||
| <DynamicRowDialog | ||
| itemId={itemId} | ||
| itemIndex={itemIndex} | ||
| handleClose={() => setShowCustomizeSetDialog(false)} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
147 changes: 147 additions & 0 deletions
147
...forms)/[locale]/(form administration)/form-builder/components/shared/DynamicRowDialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| "use client"; | ||
| import React, { useState } from "react"; | ||
| import { useTranslation } from "@i18n/client"; | ||
| import { Button } from "@clientComponents/globals"; | ||
| import { useDialogRef, Dialog } from "./Dialog"; | ||
| import { useTemplateStore } from "@lib/store/useTemplateStore"; | ||
|
|
||
| export const TextInput = ({ label, children }: { label: string; children: React.ReactElement }) => { | ||
| return ( | ||
| <div className="mb-4 flex rounded-md border-1 border-black"> | ||
| <label className="block rounded-l-md border-r-1 border-black bg-slate-50 p-4 text-sm"> | ||
| {label} | ||
| </label> | ||
| {React.cloneElement(children, { | ||
| className: "block w-full rounded-r-md p-2 outline-offset-[-5px]", | ||
| })} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const DynamicRowDialog = ({ | ||
| itemId, | ||
| itemIndex, | ||
| handleClose, | ||
| }: { | ||
| itemId: number; | ||
| itemIndex: number; | ||
| handleClose: () => void; | ||
| }) => { | ||
| const dialog = useDialogRef(); | ||
| const { t } = useTranslation("form-builder"); | ||
|
|
||
| const { updateField, elements } = useTemplateStore((s) => ({ | ||
| elements: s.form.elements, | ||
| updateField: s.updateField, | ||
| })); | ||
|
|
||
| const item = elements.find((el) => el.id === itemId); | ||
| const rowProps = item?.properties?.dynamicRow; | ||
|
|
||
| const [addButtonValueEn, setAddButtonValueEn] = useState(rowProps?.addButtonTextEn || ""); | ||
| const [addButtonValueFr, setAddButtonValueFr] = useState(rowProps?.addButtonTextFr || ""); | ||
|
|
||
| const [removeButtonValueEn, setRemoveButtonValueEn] = useState( | ||
| rowProps?.removeButtonTextEn || "" | ||
| ); | ||
| const [removeButtonValueFr, setRemoveButtonValueFr] = useState( | ||
| rowProps?.removeButtonTextFr || "" | ||
| ); | ||
|
|
||
| const addButtonTextA11yEn = t("dynamicRow.addButtonTextA11yEn"); | ||
| const addButtonTextA11yFr = t("dynamicRow.addButtonTextA11yFr"); | ||
|
|
||
| const removeButtonTextA11yEn = t("dynamicRow.removeButtonTextA11yEn"); | ||
| const removeButtonTextA11yFr = t("dynamicRow.removeButtonTextA11yFr"); | ||
|
|
||
| const actions = ( | ||
| <> | ||
| <Button | ||
| theme="secondary" | ||
| onClick={() => { | ||
| dialog.current?.close(); | ||
| handleClose && handleClose(); | ||
| }} | ||
| > | ||
| {t("dynamicRow.dialog.cancel")} | ||
| </Button> | ||
| <Button | ||
| className="ml-5" | ||
| theme="primary" | ||
| onClick={() => { | ||
| dialog.current?.close(); | ||
|
|
||
| if (!item || !item.properties) return; | ||
|
|
||
| const properties = { | ||
| ...item.properties, | ||
| dynamicRow: { | ||
| addButtonTextEn: addButtonValueEn, | ||
| addButtonTextFr: addButtonValueFr, | ||
| removeButtonTextEn: removeButtonValueEn, | ||
| removeButtonTextFr: removeButtonValueFr, | ||
| }, | ||
| }; | ||
| updateField(`form.elements[${itemIndex}].properties`, properties); | ||
| handleClose && handleClose(); | ||
| }} | ||
| dataTestId="confirm-delete" | ||
| > | ||
| {t("dynamicRow.dialog.save")} | ||
| </Button> | ||
| </> | ||
| ); | ||
|
|
||
| return ( | ||
| <Dialog | ||
| handleClose={handleClose} | ||
| dialogRef={dialog} | ||
| actions={actions} | ||
| title={t("dynamicRow.dialog.title")} | ||
| > | ||
| <div className="p-5"> | ||
| {/* Add button */} | ||
| <div className="mb-8"> | ||
| <h4 className="mb-4 block font-bold">{t("dynamicRow.dialog.addButton.title")}</h4> | ||
| <p className="mb-4 text-sm">{t("dynamicRow.dialog.addButton.description")}</p> | ||
| <TextInput label={t("dynamicRow.dialog.english")}> | ||
| <input | ||
| aria-label={addButtonTextA11yEn} | ||
| value={addButtonValueEn} | ||
| onChange={(e) => setAddButtonValueEn(e.target.value)} | ||
| /> | ||
| </TextInput> | ||
| <TextInput label={t("dynamicRow.dialog.french")}> | ||
| <input | ||
| aria-label={addButtonTextA11yFr} | ||
| value={addButtonValueFr} | ||
| onChange={(e) => setAddButtonValueFr(e.target.value)} | ||
| /> | ||
| </TextInput> | ||
| </div> | ||
|
|
||
| {/* Remove button */} | ||
| <div> | ||
| <label className="mb-4 block font-bold"> | ||
| {t("dynamicRow.dialog.removeButton.title")} | ||
| </label> | ||
| <p className="mb-4 text-sm">{t("dynamicRow.dialog.removeButton.description")}</p> | ||
| <TextInput label={t("dynamicRow.dialog.english")}> | ||
| <input | ||
| aria-label={removeButtonTextA11yEn} | ||
| value={removeButtonValueEn} | ||
| onChange={(e) => setRemoveButtonValueEn(e.target.value)} | ||
| /> | ||
| </TextInput> | ||
| <TextInput label={t("dynamicRow.dialog.french")}> | ||
| <input | ||
| aria-label={removeButtonTextA11yFr} | ||
| value={removeButtonValueFr} | ||
| onChange={(e) => setRemoveButtonValueFr(e.target.value)} | ||
| /> | ||
| </TextInput> | ||
| </div> | ||
| </div> | ||
| </Dialog> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.