diff --git a/frontend/src/app-components/attachment/AttachmentForm.tsx b/frontend/src/app-components/attachment/AttachmentForm.tsx index 621273a2..190a471c 100644 --- a/frontend/src/app-components/attachment/AttachmentForm.tsx +++ b/frontend/src/app-components/attachment/AttachmentForm.tsx @@ -20,7 +20,7 @@ export type AttachmentFormData = { }; export const AttachmentForm: FC> = ({ - data, + data: { defaultValues: attachment }, Wrapper = Fragment, WrapperProps, ...rest @@ -33,7 +33,7 @@ export const AttachmentForm: FC> = ({ return ( { - data?.onChange?.(selected); + attachment?.onChange?.(selected); rest.onSuccess?.(); }} {...WrapperProps} @@ -45,7 +45,7 @@ export const AttachmentForm: FC> = ({ ); diff --git a/frontend/src/app-components/attachment/AttachmentFormDialog.tsx b/frontend/src/app-components/attachment/AttachmentFormDialog.tsx index e541a6e1..2ee8d3fa 100644 --- a/frontend/src/app-components/attachment/AttachmentFormDialog.tsx +++ b/frontend/src/app-components/attachment/AttachmentFormDialog.tsx @@ -9,16 +9,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { AttachmentForm, AttachmentFormData } from "./AttachmentForm"; +import { AttachmentForm } from "./AttachmentForm"; -export const AttachmentFormDialog = < - T extends AttachmentFormData = AttachmentFormData, ->( - props: ComponentFormDialogProps, +export const AttachmentFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + = ({ dialogs.open( AttachmentFormDialog, { - accept, - onChange, + defaultValues: { accept, onChange }, }, { maxWidth: "xl" }, ) diff --git a/frontend/src/app-components/dialogs/GenericFormDialog.tsx b/frontend/src/app-components/dialogs/GenericFormDialog.tsx index df387ecb..2fd66061 100644 --- a/frontend/src/app-components/dialogs/GenericFormDialog.tsx +++ b/frontend/src/app-components/dialogs/GenericFormDialog.tsx @@ -11,26 +11,27 @@ import React from "react"; import { FormDialog as Wrapper } from "@/app-components/dialogs"; import { useTranslate } from "@/hooks/useTranslate"; import { TTranslationKeys } from "@/i18n/i18n.types"; -import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; +import { + ComponentFormDialogProps, + TPayload, +} from "@/types/common/dialogs.types"; -type GenericFormDialogProps = ComponentFormDialogProps & { - Form: React.ElementType; - rowKey?: keyof T; - addText?: TTranslationKeys; - editText?: TTranslationKeys; -}; +type GenericFormDialogProps unknown> = + ComponentFormDialogProps & { + Form: React.ElementType; + addText?: TTranslationKeys; + editText?: TTranslationKeys; + } & { payload: TPayload | null }; -export const GenericFormDialog = ({ +export const GenericFormDialog = ({ Form, - rowKey, payload: data, editText, addText, ...rest -}: GenericFormDialogProps) => { +}: GenericFormDialogProps) => { const { t } = useTranslate(); - const hasRow = rowKey ? data?.[rowKey] : data; - const translationKey = hasRow ? editText : addText; + const translationKey = data?.defaultValues ? editText : addText; return (
> = ({ - data, + data: { defaultValues: menu }, Wrapper = Fragment, WrapperProps, ...rest @@ -79,23 +79,23 @@ export const MenuForm: FC> = ({ const { url, ...rest } = params; const payload = typeValue === "web_url" ? { ...rest, url } : rest; - if (data?.row?.id) { + if (menu?.row?.id) { updateMenu({ - id: data.row.id, + id: menu.row.id, params: payload, }); } else { - createMenu({ ...payload, parent: data?.parentId }); + createMenu({ ...payload, parent: menu?.parentId }); } }; useEffect(() => { - if (data?.row) { - reset(data.row); + if (menu?.row) { + reset(menu.row); } else { reset(DEFAULT_VALUES); } - }, [reset, data?.row]); + }, [reset, menu?.row]); return ( @@ -164,7 +164,7 @@ export const MenuForm: FC> = ({ label={t("label.payload")} error={!!errors.payload} required - defaultValue={data?.row?.payload || ""} + defaultValue={menu?.row?.payload || ""} readOnlyValue={titleValue} helperText={ errors.payload ? errors.payload.message : null diff --git a/frontend/src/components/Menu/MenuFormDialog.tsx b/frontend/src/components/Menu/MenuFormDialog.tsx index dc5a95f6..1250b7e1 100644 --- a/frontend/src/components/Menu/MenuFormDialog.tsx +++ b/frontend/src/components/Menu/MenuFormDialog.tsx @@ -9,12 +9,12 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { MenuForm, MenuFormData } from "./MenuForm"; +import { MenuForm } from "./MenuForm"; -export const MenuFormDialog = ( - props: ComponentFormDialogProps, +export const MenuFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + { {hasPermission(EntityType.MENU, PermissionAction.CREATE) ? ( diff --git a/frontend/src/components/content-types/ContentTypeForm.tsx b/frontend/src/components/content-types/ContentTypeForm.tsx index 8430b17e..759408e8 100644 --- a/frontend/src/components/content-types/ContentTypeForm.tsx +++ b/frontend/src/components/content-types/ContentTypeForm.tsx @@ -25,7 +25,7 @@ import { FieldInput } from "./components/FieldInput"; import { FIELDS_FORM_DEFAULT_VALUES, READ_ONLY_FIELDS } from "./constants"; export const ContentTypeForm: FC> = ({ - data, + data: { defaultValues: contentType }, Wrapper = Fragment, WrapperProps, ...rest @@ -41,8 +41,8 @@ export const ContentTypeForm: FC> = ({ handleSubmit, } = useForm>({ defaultValues: { - name: data?.name || "", - fields: data?.fields || FIELDS_FORM_DEFAULT_VALUES, + name: contentType?.name || "", + fields: contentType?.fields || FIELDS_FORM_DEFAULT_VALUES, }, }); const { append, fields, remove } = useFieldArray({ @@ -87,23 +87,23 @@ export const ContentTypeForm: FC> = ({ return; } - if (data) { - updateContentType({ id: data.id, params }); + if (contentType) { + updateContentType({ id: contentType.id, params }); } else { createContentType(params); } }; useEffect(() => { - if (data) { + if (contentType) { reset({ - name: data.name, - fields: data.fields || FIELDS_FORM_DEFAULT_VALUES, + name: contentType.name, + fields: contentType.fields || FIELDS_FORM_DEFAULT_VALUES, }); } else { reset({ name: "", fields: FIELDS_FORM_DEFAULT_VALUES }); } - }, [data, reset]); + }, [contentType, reset]); return ( diff --git a/frontend/src/components/content-types/ContentTypeFormDialog.tsx b/frontend/src/components/content-types/ContentTypeFormDialog.tsx index 7675715f..619dd781 100644 --- a/frontend/src/components/content-types/ContentTypeFormDialog.tsx +++ b/frontend/src/components/content-types/ContentTypeFormDialog.tsx @@ -8,14 +8,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { IContentType } from "@/types/content-type.types"; import { ContentTypeForm } from "./ContentTypeForm"; -export const ContentTypeFormDialog = ( - props: ComponentFormDialogProps, +export const ContentTypeFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + { }, { label: ActionColumnLabel.Edit, - action: (row) => dialogs.open(ContentTypeFormDialog, row), + action: (row) => { + dialogs.open(ContentTypeFormDialog, { defaultValues: row }); + }, requires: [PermissionAction.UPDATE], }, { @@ -104,7 +106,11 @@ export const ContentTypes = () => { + accept="text/csv" + label={t("button.import")} + onChange={handleImportChange} + isLoading={isLoading} + /> ) : null} diff --git a/frontend/src/components/context-vars/ContextVarForm.tsx b/frontend/src/components/context-vars/ContextVarForm.tsx index de27bd53..34dd7e0f 100644 --- a/frontend/src/components/context-vars/ContextVarForm.tsx +++ b/frontend/src/components/context-vars/ContextVarForm.tsx @@ -22,7 +22,7 @@ import { IContextVar, IContextVarAttributes } from "@/types/context-var.types"; import { slugify } from "@/utils/string"; export const ContextVarForm: FC> = ({ - data, + data: { defaultValues: contextVar }, Wrapper = Fragment, WrapperProps, ...rest @@ -56,9 +56,9 @@ export const ContextVarForm: FC> = ({ handleSubmit, } = useForm({ defaultValues: { - name: data?.name || "", - label: data?.label || "", - permanent: data?.permanent || false, + name: contextVar?.name || "", + label: contextVar?.label || "", + permanent: contextVar?.permanent || false, }, }); const validationRules = { @@ -73,24 +73,24 @@ export const ContextVarForm: FC> = ({ }, }; const onSubmitForm = (params: IContextVarAttributes) => { - if (data) { - updateContextVar({ id: data.id, params }); + if (contextVar) { + updateContextVar({ id: contextVar.id, params }); } else { createContextVar(params); } }; useEffect(() => { - if (data) { + if (contextVar) { reset({ - name: data.name, - label: data.label, - permanent: data.permanent, + name: contextVar.name, + label: contextVar.label, + permanent: contextVar.permanent, }); } else { reset(); } - }, [data, reset]); + }, [contextVar, reset]); return ( diff --git a/frontend/src/components/context-vars/ContextVarFormDialog.tsx b/frontend/src/components/context-vars/ContextVarFormDialog.tsx index 6707dc7b..59b7a55b 100644 --- a/frontend/src/components/context-vars/ContextVarFormDialog.tsx +++ b/frontend/src/components/context-vars/ContextVarFormDialog.tsx @@ -8,14 +8,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { IContextVar } from "@/types/context-var.types"; import { ContextVarForm } from "./ContextVarForm"; -export const ContextVarFormDialog = ( - props: ComponentFormDialogProps, +export const ContextVarFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + { [ { label: ActionColumnLabel.Edit, - action: (row) => dialogs.open(ContextVarFormDialog, row), + action: (row) => { + dialogs.open(ContextVarFormDialog, { defaultValues: row }); + }, requires: [PermissionAction.UPDATE], }, { @@ -182,7 +184,9 @@ export const ContextVars = () => { startIcon={} variant="contained" sx={{ float: "right" }} - onClick={() => dialogs.open(ContextVarFormDialog, null)} + onClick={() => + dialogs.open(ContextVarFormDialog, { defaultValues: null }) + } > {t("button.add")} diff --git a/frontend/src/components/inbox/components/AttachmentViewer.tsx b/frontend/src/components/inbox/components/AttachmentViewer.tsx index 8a379a44..b28c3a77 100644 --- a/frontend/src/components/inbox/components/AttachmentViewer.tsx +++ b/frontend/src/components/inbox/components/AttachmentViewer.tsx @@ -49,7 +49,7 @@ const componentMap: { [key in FileType]: FC } = { onClick={() => dialogs.open( AttachmentViewerFormDialog, - { url }, + { defaultValues: { url } }, { hasButtons: false, }, diff --git a/frontend/src/components/inbox/components/AttachmentViewerForm.tsx b/frontend/src/components/inbox/components/AttachmentViewerForm.tsx index f5956d40..a2f14d8b 100644 --- a/frontend/src/components/inbox/components/AttachmentViewerForm.tsx +++ b/frontend/src/components/inbox/components/AttachmentViewerForm.tsx @@ -18,7 +18,11 @@ export type AttachmentViewerFormData = { export const AttachmentViewerForm: FC< ComponentFormProps -> = ({ data, Wrapper = Fragment, WrapperProps }) => { +> = ({ + data: { defaultValues: attachment }, + Wrapper = Fragment, + WrapperProps, +}) => { return ( {/* eslint-disable-next-line @next/next/no-img-element */} @@ -29,8 +33,8 @@ export const AttachmentViewerForm: FC< objectFit: "contain", maxHeight: "70vh", }} - alt={data?.url} - src={data?.url} + alt={attachment?.url} + src={attachment?.url} /> ); diff --git a/frontend/src/components/inbox/components/AttachmentViewerFormDialog.tsx b/frontend/src/components/inbox/components/AttachmentViewerFormDialog.tsx index a858269c..012d5319 100644 --- a/frontend/src/components/inbox/components/AttachmentViewerFormDialog.tsx +++ b/frontend/src/components/inbox/components/AttachmentViewerFormDialog.tsx @@ -9,19 +9,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { - AttachmentViewerForm, - AttachmentViewerFormData, -} from "./AttachmentViewerForm"; +import { AttachmentViewerForm } from "./AttachmentViewerForm"; -export const AttachmentViewerFormDialog = < - T extends AttachmentViewerFormData = AttachmentViewerFormData, ->( - props: ComponentFormDialogProps, +export const AttachmentViewerFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + diff --git a/frontend/src/components/labels/LabelForm.tsx b/frontend/src/components/labels/LabelForm.tsx index 57156e70..ebc9654a 100644 --- a/frontend/src/components/labels/LabelForm.tsx +++ b/frontend/src/components/labels/LabelForm.tsx @@ -21,7 +21,7 @@ import { ILabel, ILabelAttributes } from "@/types/label.types"; import { slugify } from "@/utils/string"; export const LabelForm: FC> = ({ - data, + data: { defaultValues: label }, Wrapper = Fragment, WrapperProps, ...rest @@ -48,9 +48,9 @@ export const LabelForm: FC> = ({ handleSubmit, } = useForm({ defaultValues: { - name: data?.name || "", - title: data?.title || "", - description: data?.description || "", + name: label?.name || "", + title: label?.title || "", + description: label?.description || "", }, }); const validationRules = { @@ -61,24 +61,24 @@ export const LabelForm: FC> = ({ description: {}, }; const onSubmitForm = (params: ILabelAttributes) => { - if (data) { - updateLabel({ id: data.id, params }); + if (label) { + updateLabel({ id: label.id, params }); } else { createLabel(params); } }; useEffect(() => { - if (data) { + if (label) { reset({ - name: data.name, - title: data.title, - description: data.description, + name: label.name, + title: label.title, + description: label.description, }); } else { reset(); } - }, [data, reset]); + }, [label, reset]); return ( diff --git a/frontend/src/components/labels/LabelFormDialog.tsx b/frontend/src/components/labels/LabelFormDialog.tsx index 8b183e3a..1eb840cc 100644 --- a/frontend/src/components/labels/LabelFormDialog.tsx +++ b/frontend/src/components/labels/LabelFormDialog.tsx @@ -8,14 +8,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { ILabel } from "@/types/label.types"; import { LabelForm } from "./LabelForm"; -export const LabelFormDialog = ( - props: ComponentFormDialogProps, +export const LabelFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + { [ { label: ActionColumnLabel.Edit, - action: (row) => dialogs.open(LabelFormDialog, row), + action: (row) => { + dialogs.open(LabelFormDialog, { + defaultValues: row, + }); + }, requires: [PermissionAction.UPDATE], }, { @@ -177,7 +181,9 @@ export const Labels = () => { startIcon={} variant="contained" sx={{ float: "right" }} - onClick={() => dialogs.open(LabelFormDialog, null)} + onClick={() => + dialogs.open(LabelFormDialog, { defaultValues: null }) + } > {t("button.add")} diff --git a/frontend/src/components/languages/LanguageForm.tsx b/frontend/src/components/languages/LanguageForm.tsx index b23e786e..65cb9acb 100644 --- a/frontend/src/components/languages/LanguageForm.tsx +++ b/frontend/src/components/languages/LanguageForm.tsx @@ -21,7 +21,7 @@ import { ComponentFormProps } from "@/types/common/dialogs.types"; import { ILanguage, ILanguageAttributes } from "@/types/language.types"; export const LanguageForm: FC> = ({ - data, + data: { defaultValues: language }, Wrapper = Fragment, WrapperProps, ...rest @@ -48,9 +48,9 @@ export const LanguageForm: FC> = ({ control, } = useForm({ defaultValues: { - title: data?.title || "", - code: data?.code || "", - isRTL: data?.isRTL || false, + title: language?.title || "", + code: language?.code || "", + isRTL: language?.isRTL || false, }, }); const validationRules = { @@ -62,24 +62,24 @@ export const LanguageForm: FC> = ({ }, }; const onSubmitForm = (params: ILanguageAttributes) => { - if (data) { - updateLanguage({ id: data.id, params }); + if (language) { + updateLanguage({ id: language.id, params }); } else { createLanguage(params); } }; useEffect(() => { - if (data) { + if (language) { reset({ - title: data.title, - code: data.code, - isRTL: data.isRTL, + title: language.title, + code: language.code, + isRTL: language.isRTL, }); } else { reset(); } - }, [data, reset]); + }, [language, reset]); return ( diff --git a/frontend/src/components/languages/LanguageFormDialog.tsx b/frontend/src/components/languages/LanguageFormDialog.tsx index 631202ce..19213fff 100644 --- a/frontend/src/components/languages/LanguageFormDialog.tsx +++ b/frontend/src/components/languages/LanguageFormDialog.tsx @@ -8,14 +8,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { ILanguage } from "@/types/language.types"; import { LanguageForm } from "./LanguageForm"; -export const LanguageFormDialog = ( - props: ComponentFormDialogProps, +export const LanguageFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + { [ { label: ActionColumnLabel.Edit, - action: (row) => dialogs.open(LanguageFormDialog, row), + action: (row) => { + dialogs.open(LanguageFormDialog, { defaultValues: row }); + }, requires: [PermissionAction.UPDATE], }, { diff --git a/frontend/src/components/nlp/components/NlpEntity.tsx b/frontend/src/components/nlp/components/NlpEntity.tsx index 43de506c..08489d69 100644 --- a/frontend/src/components/nlp/components/NlpEntity.tsx +++ b/frontend/src/components/nlp/components/NlpEntity.tsx @@ -121,7 +121,9 @@ const NlpEntity = () => { }, { label: ActionColumnLabel.Edit, - action: (row) => dialogs.open(NlpEntityFormDialog, row), + action: (row) => { + dialogs.open(NlpEntityFormDialog, { defaultValues: row }); + }, requires: [PermissionAction.UPDATE], }, { @@ -221,7 +223,9 @@ const NlpEntity = () => { startIcon={} variant="contained" sx={{ float: "right" }} - onClick={() => dialogs.open(NlpEntityFormDialog, null)} + onClick={() => + dialogs.open(NlpEntityFormDialog, { defaultValues: null }) + } > {t("button.add")} diff --git a/frontend/src/components/nlp/components/NlpEntityForm.tsx b/frontend/src/components/nlp/components/NlpEntityForm.tsx index e2fba34f..1451a190 100644 --- a/frontend/src/components/nlp/components/NlpEntityForm.tsx +++ b/frontend/src/components/nlp/components/NlpEntityForm.tsx @@ -31,7 +31,7 @@ import { } from "@/types/nlp-entity.types"; export const NlpEntityVarForm: FC> = ({ - data, + data: { defaultValues: nlpEntity }, Wrapper = Fragment, WrapperProps, ...rest @@ -57,9 +57,9 @@ export const NlpEntityVarForm: FC> = ({ handleSubmit, } = useForm({ defaultValues: { - name: data?.name || "", - doc: data?.doc || "", - lookups: data?.lookups || ["keywords"], + name: nlpEntity?.name || "", + doc: nlpEntity?.doc || "", + lookups: nlpEntity?.lookups || ["keywords"], }, }); const validationRules = { @@ -70,29 +70,29 @@ export const NlpEntityVarForm: FC> = ({ isChecked: {}, }; const onSubmitForm = (params: INlpEntityAttributes) => { - if (data) { - updateNlpEntity({ id: data.id, params }); + if (nlpEntity) { + updateNlpEntity({ id: nlpEntity.id, params }); } else { createNlpEntity(params); } }; useEffect(() => { - if (data) { + if (nlpEntity) { reset({ - name: data.name, - doc: data.doc, + name: nlpEntity.name, + doc: nlpEntity.doc, }); } else { reset(); } - }, [data, reset]); + }, [nlpEntity, reset]); return ( - {!data ? ( + {!nlpEntity ? ( {t("label.lookup_strategies")} diff --git a/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx b/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx index edf37b5c..f2fb3e5a 100644 --- a/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx +++ b/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx @@ -8,14 +8,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { INlpEntity } from "@/types/nlp-entity.types"; import { NlpEntityVarForm } from "./NlpEntityForm"; -export const NlpEntityFormDialog = ( - props: ComponentFormDialogProps, +export const NlpEntityFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + > = ({ - data, + data: { defaultValues: nlpDatasetSample }, Wrapper = Fragment, WrapperProps, ...rest @@ -41,10 +41,10 @@ export const NlpSampleForm: FC> = ({ }, }); const onSubmitForm = (form: INlpSampleFormAttributes) => { - if (data?.id) { + if (nlpDatasetSample?.id) { updateSample( { - id: data.id, + id: nlpDatasetSample.id, params: { text: form.text, type: form.type, @@ -63,7 +63,10 @@ export const NlpSampleForm: FC> = ({ return ( {}} {...WrapperProps}> - + ); }; diff --git a/frontend/src/components/nlp/components/NlpSampleFormDialog.tsx b/frontend/src/components/nlp/components/NlpSampleFormDialog.tsx index 333a9793..430d00d7 100644 --- a/frontend/src/components/nlp/components/NlpSampleFormDialog.tsx +++ b/frontend/src/components/nlp/components/NlpSampleFormDialog.tsx @@ -8,16 +8,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { INlpDatasetSample } from "@/types/nlp-sample.types"; import { NlpSampleForm } from "./NlpSampleForm"; -export const NlpSampleFormDialog = < - T extends INlpDatasetSample = INlpDatasetSample, ->( - props: ComponentFormDialogProps, +export const NlpSampleFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + > = ({ - data: props, +export const NlpValueForm: FC> = ({ + data: { defaultValues: nlpValue, presetValues: nlpEntity }, Wrapper = Fragment, WrapperProps, ...rest }) => { - const { defaultValues: nlpValue, presetValues: nlpEntity } = props || { - defaultValues: null, - presetValues: null, - }; const { t } = useTranslate(); const { toast } = useToast(); const { query } = useRouter(); diff --git a/frontend/src/components/nlp/components/NlpValueFormDialog.tsx b/frontend/src/components/nlp/components/NlpValueFormDialog.tsx index 491db2e2..cdbf2d4f 100644 --- a/frontend/src/components/nlp/components/NlpValueFormDialog.tsx +++ b/frontend/src/components/nlp/components/NlpValueFormDialog.tsx @@ -9,16 +9,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { NlpValueForm, NlpValueFormProps } from "./NlpValueForm"; +import { NlpValueForm } from "./NlpValueForm"; -export const NlpValueFormDialog = < - T extends NlpValueFormProps = NlpValueFormProps, ->( - props: ComponentFormDialogProps, +export const NlpValueFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + ( ); export const PermissionsBody: FC> = ({ - data: role, + data: { defaultValues: role }, Wrapper = Fragment, WrapperProps, ...rest diff --git a/frontend/src/components/roles/PermissionsBodyDialog.tsx b/frontend/src/components/roles/PermissionsBodyDialog.tsx index 3ee11651..06c6cbda 100644 --- a/frontend/src/components/roles/PermissionsBodyDialog.tsx +++ b/frontend/src/components/roles/PermissionsBodyDialog.tsx @@ -8,14 +8,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { IRole } from "@/types/role.types"; import { PermissionsBody } from "./PermissionsBody"; -export const PermissionBodyDialog = ( - props: ComponentFormDialogProps, +export const PermissionBodyDialog = ( + props: ComponentFormDialogProps, ) => ( - + > = ({ - data, + data: { defaultValues: role }, Wrapper = Fragment, WrapperProps, ...rest @@ -52,22 +52,22 @@ export const RoleForm: FC> = ({ }, }; const onSubmitForm = (params: IRoleAttributes) => { - if (data) { - updateRole({ id: data.id, params }); + if (role) { + updateRole({ id: role.id, params }); } else { createRole(params); } }; useEffect(() => { - if (data) { + if (role) { reset({ - name: data.name, + name: role.name, }); } else { reset(); } - }, [data, reset]); + }, [role, reset]); return ( diff --git a/frontend/src/components/roles/RoleFormDialog.tsx b/frontend/src/components/roles/RoleFormDialog.tsx index 92590398..8346b94a 100644 --- a/frontend/src/components/roles/RoleFormDialog.tsx +++ b/frontend/src/components/roles/RoleFormDialog.tsx @@ -8,14 +8,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { IRole } from "@/types/role.types"; import { RoleForm } from "./RoleForm"; -export const RoleFormDialog = ( - props: ComponentFormDialogProps, +export const RoleFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + { { label: ActionColumnLabel.Permissions, action: (row) => - dialogs.open(PermissionBodyDialog, row, { - hasButtons: false, - }), + dialogs.open( + PermissionBodyDialog, + { defaultValues: row }, + { + hasButtons: false, + }, + ), }, { label: ActionColumnLabel.Edit, - action: (row) => dialogs.open(RoleFormDialog, row), + action: (row) => { + dialogs.open(RoleFormDialog, { defaultValues: row }); + }, requires: [PermissionAction.UPDATE], }, @@ -144,7 +150,9 @@ export const Roles = () => { sx={{ float: "right", }} - onClick={() => dialogs.open(RoleFormDialog, null)} + onClick={() => + dialogs.open(RoleFormDialog, { defaultValues: null }) + } > {t("button.add")} diff --git a/frontend/src/components/subscribers/SubscriberForm.tsx b/frontend/src/components/subscribers/SubscriberForm.tsx index 48feb514..81babdf5 100644 --- a/frontend/src/components/subscribers/SubscriberForm.tsx +++ b/frontend/src/components/subscribers/SubscriberForm.tsx @@ -25,7 +25,7 @@ const getFullName = (subscriber: ISubscriber | null) => `${subscriber?.first_name} ${subscriber?.last_name}`; export const SubscriberForm: FC> = ({ - data, + data: { defaultValues: subscriber }, Wrapper = Fragment, WrapperProps, ...rest @@ -49,16 +49,16 @@ export const SubscriberForm: FC> = ({ handleSubmit, } = useForm(); const onSubmitForm = (params: ISubscriberAttributes) => { - if (data?.id) { - updateSubscriber({ id: data.id, params }); + if (subscriber?.id) { + updateSubscriber({ id: subscriber.id, params }); } }; useEffect(() => { - if (data) { - reset({ labels: data?.labels }); + if (subscriber) { + reset({ labels: subscriber?.labels }); } - }, [data, reset]); + }, [subscriber, reset]); return ( @@ -67,7 +67,7 @@ export const SubscriberForm: FC> = ({ ( - props: ComponentFormDialogProps, +export const SubscriberFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + { [ { label: ActionColumnLabel.Manage_Labels, - action: (row) => dialogs.open(SubscriberFormDialog, row), + action: (row) => { + dialogs.open(SubscriberFormDialog, { defaultValues: row }); + }, }, ], t("label.operations"), diff --git a/frontend/src/components/translations/TranslationForm.tsx b/frontend/src/components/translations/TranslationForm.tsx index e8b7936b..b9d7f34d 100644 --- a/frontend/src/components/translations/TranslationForm.tsx +++ b/frontend/src/components/translations/TranslationForm.tsx @@ -49,7 +49,7 @@ const TranslationInput: React.FC = ({ ); export const TranslationForm: FC> = ({ - data, + data: { defaultValues: translation }, Wrapper = Fragment, WrapperProps, ...rest @@ -74,11 +74,11 @@ export const TranslationForm: FC> = ({ }); const { control, handleSubmit } = useForm({ defaultValues: { - translations: data?.translations, + translations: translation?.translations, }, }); const onSubmitForm = (params: ITranslationAttributes) => { - if (data?.id) updateTranslation({ id: data.id, params }); + if (translation?.id) updateTranslation({ id: translation.id, params }); }; return ( @@ -86,7 +86,7 @@ export const TranslationForm: FC> = ({ {t("label.original_text")} - {data?.str} + {translation?.str} {languages diff --git a/frontend/src/components/translations/TranslationFormDialog.tsx b/frontend/src/components/translations/TranslationFormDialog.tsx index 20cb367c..9fae7f63 100644 --- a/frontend/src/components/translations/TranslationFormDialog.tsx +++ b/frontend/src/components/translations/TranslationFormDialog.tsx @@ -8,14 +8,13 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { ITranslation } from "@/types/translation.types"; import { TranslationForm } from "./TranslationForm"; -export const TranslationFormDialog = ( - props: ComponentFormDialogProps, +export const TranslationFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + { [ { label: ActionColumnLabel.Edit, - action: (row) => dialogs.open(TranslationFormDialog, row), + action: (row) => { + dialogs.open(TranslationFormDialog, { defaultValues: row }); + }, requires: [PermissionAction.UPDATE], }, { diff --git a/frontend/src/components/users/EditUserForm.tsx b/frontend/src/components/users/EditUserForm.tsx index 5eb4fafb..dbf9ad3b 100644 --- a/frontend/src/components/users/EditUserForm.tsx +++ b/frontend/src/components/users/EditUserForm.tsx @@ -23,12 +23,8 @@ import { IUser, IUserAttributes } from "@/types/user.types"; const getFullName = (user?: IUser) => `${user?.first_name} ${user?.last_name}`; -export type EditUserFormData = { - user: IUser; - roles: IRole[]; -}; -export const EditUserForm: FC> = ({ - data, +export const EditUserForm: FC> = ({ + data: { defaultValues: user, presetValues: roles }, Wrapper = Fragment, WrapperProps, ...rest @@ -51,7 +47,7 @@ export const EditUserForm: FC> = ({ formState: { errors }, handleSubmit, } = useForm({ - defaultValues: { roles: data?.roles.map((role) => role.id) }, + defaultValues: { roles: roles?.map((role) => role.id) }, }); const validationRules = { roles: { @@ -59,19 +55,19 @@ export const EditUserForm: FC> = ({ }, }; const onSubmitForm = (params: IUserAttributes) => { - if (data?.user.id) { + if (user?.id) { updateUser({ - id: data.user.id, + id: user.id, params, }); } }; useEffect(() => { - if (data?.user) { - reset({ roles: data?.user?.roles }); + if (user) { + reset({ roles: user.roles }); } - }, [reset, data?.user]); + }, [reset, user]); return ( @@ -81,7 +77,7 @@ export const EditUserForm: FC> = ({ > = ({ name="roles" rules={validationRules.roles} control={control} - defaultValue={data?.roles?.map(({ id }) => id) || []} + defaultValue={roles?.map(({ id }) => id) || []} render={({ field }) => { const { onChange, ...rest } = field; diff --git a/frontend/src/components/users/EditUserFormDialog.tsx b/frontend/src/components/users/EditUserFormDialog.tsx index fc7cb5a1..238c37c1 100644 --- a/frontend/src/components/users/EditUserFormDialog.tsx +++ b/frontend/src/components/users/EditUserFormDialog.tsx @@ -9,14 +9,12 @@ import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { EditUserForm, EditUserFormData } from "./EditUserForm"; +import { EditUserForm } from "./EditUserForm"; -export const CategoryFormDialog = < - T extends EditUserFormData = EditUserFormData, ->( - props: ComponentFormDialogProps, +export const CategoryFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + ( - props: ComponentFormDialogProps, +export const InviteUserFormFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + }} diff --git a/frontend/src/components/users/index.tsx b/frontend/src/components/users/index.tsx index caad6fa7..1cbd0531 100644 --- a/frontend/src/components/users/index.tsx +++ b/frontend/src/components/users/index.tsx @@ -73,11 +73,12 @@ export const Users = () => { [ { label: ActionColumnLabel.Manage_Roles, - action: (row) => + action: (row) => { dialogs.open(CategoryFormDialog, { - user: row, - roles: roles || [], - }), + defaultValues: row, + presetValues: roles, + }); + }, requires: [PermissionAction.CREATE], }, ], @@ -208,7 +209,11 @@ export const Users = () => { sx={{ float: "right", }} - onClick={() => dialogs.open(InviteUserFormFormDialog)} + onClick={() => + dialogs.open(InviteUserFormFormDialog, { + defaultValues: null, + }) + } > {t("button.invite")} diff --git a/frontend/src/components/visual-editor/BlockEditForm.tsx b/frontend/src/components/visual-editor/BlockEditForm.tsx index 5c5f98c4..59cb0d82 100644 --- a/frontend/src/components/visual-editor/BlockEditForm.tsx +++ b/frontend/src/components/visual-editor/BlockEditForm.tsx @@ -32,7 +32,7 @@ import { TriggersForm } from "./form/TriggersForm"; type TSelectedTab = "triggers" | "options" | "messages"; export const BlockEditForm: FC> = ({ - data: block, + data: { defaultValues: block }, Wrapper = Fragment, WrapperProps, ...rest diff --git a/frontend/src/components/visual-editor/BlockEditFormDialog.tsx b/frontend/src/components/visual-editor/BlockEditFormDialog.tsx index ce3f1013..131d5705 100644 --- a/frontend/src/components/visual-editor/BlockEditFormDialog.tsx +++ b/frontend/src/components/visual-editor/BlockEditFormDialog.tsx @@ -7,17 +7,14 @@ */ import { GenericFormDialog } from "@/app-components/dialogs"; -import { IBlock } from "@/types/block.types"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; import { BlockEditForm } from "./BlockEditForm"; -export const BlockEditFormDialog = < - T extends IBlock | undefined = IBlock | undefined, ->( - props: ComponentFormDialogProps, +export const BlockEditFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + > = ({ - data, + data: { defaultValues: props }, Wrapper = Fragment, WrapperProps, ...rest }) => { const [selectedCategoryId, setSelectedCategoryId] = useState( - data?.category || "", + props?.category || "", ); const handleMove = () => { if (selectedCategoryId) { - data?.onMove(data.ids, selectedCategoryId); + props?.onMove(props.ids, selectedCategoryId); rest.onSuccess?.(); } }; @@ -43,7 +43,7 @@ export const BlockMoveForm: FC> = ({ {...WrapperProps} confirmButtonProps={{ ...WrapperProps?.confirmButtonProps, - disabled: selectedCategoryId === data?.category, + disabled: selectedCategoryId === props?.category, }} > @@ -53,7 +53,7 @@ export const BlockMoveForm: FC> = ({ fullWidth displayEmpty > - {data?.categories.map((category) => ( + {props?.categories.map((category) => ( {category.label} diff --git a/frontend/src/components/visual-editor/BlockMoveFormDialog.tsx b/frontend/src/components/visual-editor/BlockMoveFormDialog.tsx index 48c33986..a8ca8ceb 100644 --- a/frontend/src/components/visual-editor/BlockMoveFormDialog.tsx +++ b/frontend/src/components/visual-editor/BlockMoveFormDialog.tsx @@ -11,17 +11,14 @@ import { MoveUp } from "@mui/icons-material"; import { GenericFormDialog } from "@/app-components/dialogs"; import { ComponentFormDialogProps } from "@/types/common/dialogs.types"; -import { BlockMoveForm, BlockMoveFormData } from "./BlockMoveForm"; +import { BlockMoveForm } from "./BlockMoveForm"; -export const BlockMoveFormDialog = < - T extends BlockMoveFormData = BlockMoveFormData, ->( - props: ComponentFormDialogProps, +export const BlockMoveFormDialog = ( + props: ComponentFormDialogProps, ) => ( - + }} {...props} /> diff --git a/frontend/src/components/visual-editor/v2/Diagrams.tsx b/frontend/src/components/visual-editor/v2/Diagrams.tsx index e0588e49..92b78c4b 100644 --- a/frontend/src/components/visual-editor/v2/Diagrams.tsx +++ b/frontend/src/components/visual-editor/v2/Diagrams.tsx @@ -494,10 +494,14 @@ const Diagrams = () => { const openEditDialog = (selectedBlockId: string) => { const block = getBlockFromCache(selectedBlockId); - dialogs.open(BlockEditFormDialog, block, { - maxWidth: "md", - isSingleton: true, - }); + dialogs.open( + BlockEditFormDialog, + { defaultValues: block }, + { + maxWidth: "md", + isSingleton: true, + }, + ); }; const handleMoveButton = () => { const ids = getSelectedIds(); @@ -505,10 +509,12 @@ const Diagrams = () => { if (ids.length) { dialogs.open(BlockMoveFormDialog, { - ids: blockIds, - onMove, - category: selectedCategoryId, - categories, + defaultValues: { + ids: blockIds, + onMove, + category: selectedCategoryId, + categories, + }, }); } }; diff --git a/frontend/src/types/common/dialogs.types.ts b/frontend/src/types/common/dialogs.types.ts index ca7a1075..3e8f71fc 100644 --- a/frontend/src/types/common/dialogs.types.ts +++ b/frontend/src/types/common/dialogs.types.ts @@ -166,13 +166,22 @@ export interface FormButtonsProps { confirmButtonProps?: ButtonProps; } -export type ComponentFormProps = FormButtonsProps & { - data: T | null; +export type TPayload = { + presetValues?: P; + defaultValues?: D | null; +}; + +export type ComponentFormProps = FormButtonsProps & { + data: TPayload; onError?: () => void; onSuccess?: () => void; Wrapper?: React.FC; WrapperProps?: Partial & Partial; }; -export type ComponentFormDialogProps = FormButtonsProps & - DialogProps; +export type ExtractFormProps unknown> = + Parameters[0]["data"]; + +export type ComponentFormDialogProps< + T extends (arg: { data: any }) => unknown, +> = FormButtonsProps & DialogProps | null, boolean>;