From 72d222b0034887b297583eabac206f97ee05f5aa Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 4 May 2023 10:41:46 +0200 Subject: [PATCH 1/8] Working sync calls --- .../apiService/resources/synchronization.ts | 27 +++++++++---------- .../syncForm/CreateSyncFormTemplate.tsx | 20 ++++++++++---- .../syncForm/EditSyncFormTemplate.tsx | 2 +- 3 files changed, 29 insertions(+), 20 deletions(-) diff --git a/pwa/src/apiService/resources/synchronization.ts b/pwa/src/apiService/resources/synchronization.ts index 6a7ee0d9..e56f6f36 100644 --- a/pwa/src/apiService/resources/synchronization.ts +++ b/pwa/src/apiService/resources/synchronization.ts @@ -36,29 +36,28 @@ export default class Synchroniation { }): Promise => { const { payload, sourceId, objectId, syncId } = variables; - const params = { - action: payload.action && payload.action.value, - endpoint: payload.endpoint, - externalId: payload.externalId, - sourceId: sourceId, - }; - const _payload = { ...payload, + entity: payload.entity && `/admin/entities/${payload.entity}`, + // object: objectId, action: payload.action && `/admin/actions/${payload.action.value}`, - sourceId: payload.source.value, + gateway: payload.source && `/admin/gateways/${payload.source.value}`, }; + delete _payload.source; + if (syncId) { - const { data } = await Send(this._instance, "PUT", `/admin/synchronizations/${syncId}`, _payload); + const { data } = await Send(this._instance, "PUT", `/admin/synchronizations/${syncId}`, _payload, { + loading: "Updating synchronization...", + success: "Synchronization successfully updated.", + }); return data; } - const { data } = await Send( - this._instance, - "POST", - `/admin/object_entities/${objectId}/sync/${sourceId}${paramsToQueryParams(params, true)}`, - ); + const { data } = await Send(this._instance, "POST", "/admin/synchronizations", _payload, { + loading: "Creating synchronization...", + success: "Synchronization successfully created.", + }); return data; }; } diff --git a/pwa/src/templates/templateParts/syncForm/CreateSyncFormTemplate.tsx b/pwa/src/templates/templateParts/syncForm/CreateSyncFormTemplate.tsx index 667b158d..80069fad 100644 --- a/pwa/src/templates/templateParts/syncForm/CreateSyncFormTemplate.tsx +++ b/pwa/src/templates/templateParts/syncForm/CreateSyncFormTemplate.tsx @@ -13,6 +13,7 @@ import Skeleton from "react-loading-skeleton"; import { useAction } from "../../../hooks/action"; import { useSync } from "../../../hooks/synchronization"; import { Button } from "../../../components/button/Button"; +import { useObject } from "../../../hooks/object"; interface CreateSyncFormTemplateProps { objectId: string; @@ -24,6 +25,9 @@ export const CreateSyncFormTemplate: React.FC = ({ const [formError, setFormError] = React.useState(""); const queryClient = useQueryClient(); + const _useObject = useObject(); + const getObject = _useObject.getOne(objectId); + const _useSync = useSync(queryClient); const syncObject = _useSync.createOrEdit(objectId); @@ -47,10 +51,10 @@ export const CreateSyncFormTemplate: React.FC = ({ const onSubmit = (data: any): void => { const payload = { ...data, + entity: getObject.data._self.schema.id, }; - const sourceId = data.source.value; - syncObject.mutate({ payload, objectId, sourceId }); + syncObject.mutate({ payload, objectId }); }; return ( @@ -60,7 +64,13 @@ export const CreateSyncFormTemplate: React.FC = ({ {t("Create Synchronization")}
-
{formError && } @@ -100,11 +110,11 @@ export const CreateSyncFormTemplate: React.FC = ({ {t("ExternalId")} - {errors["externalId"] && } + {errors["sourceId"] && } diff --git a/pwa/src/templates/templateParts/syncForm/EditSyncFormTemplate.tsx b/pwa/src/templates/templateParts/syncForm/EditSyncFormTemplate.tsx index 4fa60a1e..b614b9c9 100644 --- a/pwa/src/templates/templateParts/syncForm/EditSyncFormTemplate.tsx +++ b/pwa/src/templates/templateParts/syncForm/EditSyncFormTemplate.tsx @@ -89,7 +89,7 @@ export const EditSyncFormTemplate: React.FC = ({ obje
- {`Edit ${sync?.name}`} + {`Edit ${sync?.id}`}
-
- {formError && } -
-
- - - {t("Select a source")} - - {getSources.isLoading && } - {getSources.isSuccess && ( - ({ label: source.name, value: source.id }))} - name="source" - validation={{ required: true }} - {...{ register, errors, control }} - /> - )} - - - - - {t("Select a Action")} - - {getActions.isLoading && } - {getActions.isSuccess && syncActions && ( - ({ label: action.name, value: action.id }))} - name="action" - {...{ register, errors, control }} - /> - )} - - - - - {t("ExternalId")} - - {errors["sourceId"] && } - - - - - {t("Endpoint")} - - {errors["endpoint"] && } - - -
-
- -
- ); -}; diff --git a/pwa/src/templates/templateParts/syncForm/CreateSyncTemplate.tsx b/pwa/src/templates/templateParts/syncForm/CreateSyncTemplate.tsx new file mode 100644 index 00000000..116eb306 --- /dev/null +++ b/pwa/src/templates/templateParts/syncForm/CreateSyncTemplate.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import * as styles from "./SyncFormTemplate.module.css"; + +import { useTranslation } from "react-i18next"; +import { SyncFormTemplate, formId } from "./SyncFormTemplate"; +import { useIsLoadingContext } from "../../../context/isLoading"; +import { FormHeaderTemplate } from "../formHeader/FormHeaderTemplate"; + +interface CreateSyncTemplateProps { + objectId: string; +} + +export const CreateSyncTemplate: React.FC = ({ objectId }) => { + const { t } = useTranslation(); + const { isLoading } = useIsLoadingContext(); + + return ( +
+ + + +
+ ); +}; diff --git a/pwa/src/templates/templateParts/syncForm/EditSyncFormTemplate.tsx b/pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx similarity index 50% rename from pwa/src/templates/templateParts/syncForm/EditSyncFormTemplate.tsx rename to pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx index b614b9c9..634df4bb 100644 --- a/pwa/src/templates/templateParts/syncForm/EditSyncFormTemplate.tsx +++ b/pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx @@ -1,168 +1,194 @@ -import * as React from "react"; -import * as styles from "./SyncFormTemplate.module.css"; -import { useForm } from "react-hook-form"; -import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/form-field"; -import { Heading1 } from "@gemeente-denhaag/components-react"; -import { useTranslation } from "react-i18next"; -import { InputText, SelectSingle } from "@conduction/components"; -import { faSave } from "@fortawesome/free-solid-svg-icons"; -import { useQueryClient } from "react-query"; -import { ErrorMessage } from "../../../components/errorMessage/ErrorMessage"; -import { useSource } from "../../../hooks/source"; -import { useAction } from "../../../hooks/action"; -import Skeleton from "react-loading-skeleton"; -import { useSync } from "../../../hooks/synchronization"; -import { Button } from "../../../components/button/Button"; - -interface EditSyncFormTemplateProps { - objectId: string; - syncId: string; - sync: any; -} - -export const EditSyncFormTemplate: React.FC = ({ objectId, syncId, sync }) => { - const { t } = useTranslation(); - const [loading, setLoading] = React.useState(false); - - const queryClient = useQueryClient(); - - const _useSource = useSource(queryClient); - const getSources = _useSource.getAll(); - const _useAction = useAction(queryClient); - const getActions = _useAction.getAll(); - - const _useSync = useSync(queryClient); - const syncObject = _useSync.createOrEdit(objectId, syncId); - - const getSource = _useSource.getOne(sync?.gateway?.id); - const getAction = _useAction.getOne(sync?.action?.id); - - const syncActions = - getActions && - getActions.data?.filter((action) => action.class === "App\\ActionHandler\\SynchronizationItemHandler"); - - const { - register, - handleSubmit, - watch, - setValue, - control, - formState: { errors }, - } = useForm(); - - const onSubmit = (data: any): void => { - const payload = { - ...data, - }; - - const sourceId = data.source.value; - - syncObject.mutate({ objectId, sourceId, payload, syncId }); - }; - - const handleSetFormValues = (sync: any): void => { - const basicFields: string[] = ["endpoint"]; - basicFields.forEach((field) => setValue(field, sync[field])); - setValue("externalId", sync.sourceId); - }; - - const handleSetSelectActionFormValues = (): void => { - getAction && setValue("action", { label: getAction.data?.name, value: getAction.data?.id }); - }; - const handleSetSelectSourceFormValues = (): void => { - getSource.isSuccess && setValue("source", { label: getSource.data.name, value: getSource.data.id }); - }; - - React.useEffect(() => { - handleSetFormValues(sync); - }, [sync]); - - React.useEffect(() => { - handleSetSelectActionFormValues(); - }, [getAction.isSuccess]); - - React.useEffect(() => { - handleSetSelectSourceFormValues(); - }, [getSource.isSuccess]); - - return ( -
-
-
- {`Edit ${sync?.id}`} - -
-
-
-
-
- - - {t("Select a source")} - - {(getSources.isLoading || getSource.isLoading || getSource.isIdle) && } - {getSources.isSuccess && getSource.isSuccess && ( - ({ label: source.name, value: source.id }))} - name="source" - validation={{ required: true }} - {...{ register, errors, control }} - /> - )} - - - - - {t("Select a Action")} - {sync?.action && ( - <> - {getAction.isLoading && } - {getActions.isSuccess && syncActions && getAction.isSuccess && ( - ({ label: action.name, value: action.id }))} - name="action" - {...{ register, errors, control }} - /> - )} - - )} - {!sync?.action && ( - <> - {(getActions.isLoading || !sync) && } - {getActions.isSuccess && syncActions && ( - ({ label: action.name, value: action.id }))} - name="action" - {...{ register, errors, control }} - /> - )} - - )} - - - - - {t("ExternalId")} - - {errors["externalId"] && } - - - - - {t("Endpoint")} - - {errors["endpoint"] && } - - -
-
-
-
- ); -}; +import * as React from "react"; +import * as styles from "./SyncFormTemplate.module.css"; +import { useForm } from "react-hook-form"; +import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/form-field"; +import { useTranslation } from "react-i18next"; +import { InputText, SelectSingle } from "@conduction/components"; +import { useQueryClient } from "react-query"; +import { ErrorMessage } from "../../../components/errorMessage/ErrorMessage"; +import { useSource } from "../../../hooks/source"; +import { useAction } from "../../../hooks/action"; +import Skeleton from "react-loading-skeleton"; +import { useSync } from "../../../hooks/synchronization"; +import { useObject } from "../../../hooks/object"; + +interface SyncFormTemplateProps { + objectId: string; + synchronization?: any; +} + +export const formId: string = "synchronization-form"; + +export const SyncFormTemplate: React.FC = ({ objectId, synchronization }) => { + const { t } = useTranslation(); + const [loading, setLoading] = React.useState(false); + + const queryClient = useQueryClient(); + const _useObject = useObject(); + const getObject = _useObject.getOne(objectId); + + const _useSource = useSource(queryClient); + const getSource = _useSource.getOne(synchronization?.gateway?.id); + const getSources = _useSource.getAll(); + + const _useAction = useAction(queryClient); + const getAction = _useAction.getOne(synchronization?.action?.id); + const getActions = _useAction.getAll(); + + const _useSync = useSync(queryClient); + const syncObject = _useSync.createOrEdit(objectId, synchronization?.id); + + const syncActions = + getActions && + getActions.data?.filter((action) => action.class === "App\\ActionHandler\\SynchronizationItemHandler"); + + const syncId = synchronization?.id ?? null; + + const { + register, + handleSubmit, + setValue, + control, + formState: { errors }, + } = useForm(); + + const onSubmit = (data: any): void => { + const payload = { + ...data, + entity: getObject.data._self.schema.id, + }; + + syncObject.mutate({ payload, objectId, syncId }); + }; + + const handleSetFormValues = (sync: any): void => { + const basicFields: string[] = ["endpoint", "sourceId"]; + basicFields.forEach((field) => setValue(field, sync[field])); + }; + + const handleSetSelectActionFormValues = (): void => { + setValue("action", { label: getAction.data?.name, value: getAction.data?.id }); + }; + const handleSetSelectSourceFormValues = (): void => { + setValue("source", { label: getSource.data.name, value: getSource.data.id }); + }; + + React.useEffect(() => { + synchronization && handleSetFormValues(synchronization); + getAction.isSuccess && handleSetSelectActionFormValues(); + getSource.isSuccess && handleSetSelectSourceFormValues(); + }, [synchronization]); + + React.useEffect(() => { + getActions.isSuccess && getAction.isSuccess && handleSetSelectActionFormValues(); + }, [getAction.isSuccess, getActions.isSuccess]); + + React.useEffect(() => { + getSources.isSuccess && getSource.isSuccess && handleSetSelectSourceFormValues(); + }, [getSource.isSuccess]); + + return ( +
+
+
+
+ + + {t("Select a Source")} + + {synchronization && ( + <> + {(getSources.isLoading || getSource.isLoading) && } + + {getSources.isSuccess && getSource.isSuccess && ( + ({ label: source.name, value: source.id }))} + name="source" + validation={{ required: true }} + {...{ register, errors, control }} + /> + )} + + )} + + {!synchronization && ( + <> + {getSources.isLoading && } + + {getSources.isSuccess && ( + ({ label: source.name, value: source.id }))} + name="source" + validation={{ required: true }} + {...{ register, errors, control }} + /> + )} + + )} + + + + + {t("Select a Action")} + + {synchronization && ( + <> + {(getActions.isLoading || getAction.isLoading) && } + + {getActions.isSuccess && getAction.isSuccess && syncActions && ( + ({ label: action.name, value: action.id }))} + name="action" + {...{ register, errors, control }} + /> + )} + + )} + + {!synchronization && ( + <> + {getActions.isLoading && } + + {getActions.isSuccess && syncActions && ( + ({ label: action.name, value: action.id }))} + name="action" + {...{ register, errors, control }} + /> + )} + + )} + + + + + + {t("ExternalId")} + + {errors["sourceId"] && } + + + + + + {t("Endpoint")} + + {errors["endpoint"] && } + + +
+
+
+
+ ); +}; From 0fb93bba96ee314664971c0f3178e287d8e0054f Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 4 May 2023 14:42:22 +0200 Subject: [PATCH 4/8] added loading state --- pwa/src/context/isLoading.ts | 1 + .../syncDetailTemplate/SyncDetailTemplate.tsx | 10 ++++++++-- .../templateParts/syncForm/CreateSyncTemplate.tsx | 2 +- .../templateParts/syncForm/SyncFormTemplate.tsx | 15 ++++++++++++--- 4 files changed, 22 insertions(+), 6 deletions(-) diff --git a/pwa/src/context/isLoading.ts b/pwa/src/context/isLoading.ts index eab46044..9c59dded 100644 --- a/pwa/src/context/isLoading.ts +++ b/pwa/src/context/isLoading.ts @@ -15,6 +15,7 @@ export interface IIsLoadingContext { organizationForm?: boolean; mappingForm?: boolean; loginForm?: boolean; + syncForm?: boolean; } export const defaultIsLoadingContext: IIsLoadingContext = {}; diff --git a/pwa/src/templates/syncDetailTemplate/SyncDetailTemplate.tsx b/pwa/src/templates/syncDetailTemplate/SyncDetailTemplate.tsx index 219d09d2..fa2e45d5 100644 --- a/pwa/src/templates/syncDetailTemplate/SyncDetailTemplate.tsx +++ b/pwa/src/templates/syncDetailTemplate/SyncDetailTemplate.tsx @@ -11,6 +11,7 @@ import { navigate } from "gatsby"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FormHeaderTemplate } from "../templateParts/formHeader/FormHeaderTemplate"; +import { useIsLoadingContext } from "../../context/isLoading"; interface SyncDetailTemplateProps { syncId: string; @@ -19,11 +20,16 @@ interface SyncDetailTemplateProps { export const SyncDetailTemplate: React.FC = ({ syncId, objectId }) => { const { t } = useTranslation(); + const { setIsLoading, isLoading } = useIsLoadingContext(); const queryClient = useQueryClient(); const _useSync = useSync(queryClient); const getSynchronization = _useSync.getOne(syncId); - const deleteSync = _useSync.remove(); + const deleteSync = _useSync.remove(objectId); + + React.useEffect(() => { + setIsLoading({ syncForm: deleteSync.isLoading }); + }, [deleteSync.isLoading]); return ( @@ -38,7 +44,7 @@ export const SyncDetailTemplate: React.FC = ({ syncId, <> deleteSync.mutateAsync({ id: syncId })} showTitleTooltip diff --git a/pwa/src/templates/templateParts/syncForm/CreateSyncTemplate.tsx b/pwa/src/templates/templateParts/syncForm/CreateSyncTemplate.tsx index 116eb306..cafc6cbe 100644 --- a/pwa/src/templates/templateParts/syncForm/CreateSyncTemplate.tsx +++ b/pwa/src/templates/templateParts/syncForm/CreateSyncTemplate.tsx @@ -16,7 +16,7 @@ export const CreateSyncTemplate: React.FC = ({ objectId return (
- +
diff --git a/pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx b/pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx index 634df4bb..1fa6066d 100644 --- a/pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx +++ b/pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx @@ -11,6 +11,7 @@ import { useAction } from "../../../hooks/action"; import Skeleton from "react-loading-skeleton"; import { useSync } from "../../../hooks/synchronization"; import { useObject } from "../../../hooks/object"; +import { useIsLoadingContext } from "../../../context/isLoading"; interface SyncFormTemplateProps { objectId: string; @@ -21,7 +22,7 @@ export const formId: string = "synchronization-form"; export const SyncFormTemplate: React.FC = ({ objectId, synchronization }) => { const { t } = useTranslation(); - const [loading, setLoading] = React.useState(false); + const { setIsLoading, isLoading } = useIsLoadingContext(); const queryClient = useQueryClient(); const _useObject = useObject(); @@ -87,6 +88,10 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy getSources.isSuccess && getSource.isSuccess && handleSetSelectSourceFormValues(); }, [getSource.isSuccess]); + React.useEffect(() => { + setIsLoading({ syncForm: syncObject.isLoading }); + }, [syncObject.isLoading]); + return (
@@ -104,6 +109,7 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy ({ label: source.name, value: source.id }))} name="source" + disabled={isLoading.syncForm} validation={{ required: true }} {...{ register, errors, control }} /> @@ -119,6 +125,7 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy ({ label: source.name, value: source.id }))} name="source" + disabled={isLoading.syncForm} validation={{ required: true }} {...{ register, errors, control }} /> @@ -139,6 +146,7 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy ({ label: action.name, value: action.id }))} name="action" + disabled={isLoading.syncForm} {...{ register, errors, control }} /> )} @@ -153,6 +161,7 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy ({ label: action.name, value: action.id }))} name="action" + disabled={isLoading.syncForm} {...{ register, errors, control }} /> )} @@ -168,7 +177,7 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy {...{ register, errors }} name="sourceId" validation={{ maxLength: 225 }} - disabled={loading} + disabled={isLoading.syncForm} /> {errors["sourceId"] && } @@ -181,7 +190,7 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy {...{ register, errors }} name="endpoint" validation={{ required: true, maxLength: 225 }} - disabled={loading} + disabled={isLoading.syncForm} /> {errors["endpoint"] && } From 95ccc0dc73010377a80bb07214f36f9cac446594 Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 4 May 2023 14:45:31 +0200 Subject: [PATCH 5/8] fixed delete navigation --- pwa/src/hooks/synchronization.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pwa/src/hooks/synchronization.ts b/pwa/src/hooks/synchronization.ts index cda63cec..206a09df 100644 --- a/pwa/src/hooks/synchronization.ts +++ b/pwa/src/hooks/synchronization.ts @@ -28,12 +28,13 @@ export const useSync = (queryClient: QueryClient) => { enabled: !!syncId && !isDeleted(syncId), }); - const remove = () => + const remove = (objectId?: string) => useMutation(API.Synchroniation.delete, { onMutate: ({ id }) => addDeletedItem(id), onSuccess: async (_, variables) => { deleteItem(queryClient, "object", variables.id); queryClient.invalidateQueries(["synchronizations"]); + objectId && navigate(`/objects/${objectId}`); }, onError: (error, { id }) => { removeDeletedItem(id); From f151ec172daec9f13fd58920dde1e7751c53c4e4 Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 4 May 2023 14:46:31 +0200 Subject: [PATCH 6/8] Added objectId --- pwa/src/apiService/resources/synchronization.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pwa/src/apiService/resources/synchronization.ts b/pwa/src/apiService/resources/synchronization.ts index 8dbfdd46..649d78f3 100644 --- a/pwa/src/apiService/resources/synchronization.ts +++ b/pwa/src/apiService/resources/synchronization.ts @@ -34,7 +34,7 @@ export default class Synchroniation { const _payload = { ...payload, entity: payload.entity && `/admin/entities/${payload.entity}`, - // object: objectId, + object: objectId, action: payload.action && `/admin/actions/${payload.action.value}`, gateway: payload.source && `/admin/gateways/${payload.source.value}`, }; From a62b83cf3d83727687b54d9b0d92ce706448dfb2 Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 5 May 2023 13:09:29 +0200 Subject: [PATCH 7/8] cleanup --- pwa/src/apiService/resources/synchronization.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pwa/src/apiService/resources/synchronization.ts b/pwa/src/apiService/resources/synchronization.ts index 0af956e2..a89bfcbb 100644 --- a/pwa/src/apiService/resources/synchronization.ts +++ b/pwa/src/apiService/resources/synchronization.ts @@ -44,14 +44,14 @@ export default class Synchroniation { delete _payload.source; if (syncId) { - const { data } = await Send(this._instance, "PUT", `/admin/synchronizations/${syncId}`, _payload, { + const { data } = await this._send(this._instance, "PUT", `/admin/synchronizations/${syncId}`, _payload, { loading: "Updating synchronization...", success: "Synchronization successfully updated.", }); return data; } - const { data } = await Send(this._instance, "POST", "/admin/synchronizations", _payload, { + const { data } = await this._send(this._instance, "POST", "/admin/synchronizations", _payload, { loading: "Creating synchronization...", success: "Synchronization successfully created.", }); From b1fa8d51aaba64fe8784e44a097b16c8baba0998 Mon Sep 17 00:00:00 2001 From: Remko Date: Thu, 8 Jun 2023 14:07:48 +0200 Subject: [PATCH 8/8] Merged dev --- .../syncForm/SyncFormTemplate.tsx | 186 +----------------- 1 file changed, 5 insertions(+), 181 deletions(-) diff --git a/pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx b/pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx index 186f0ecc..d892a70c 100644 --- a/pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx +++ b/pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx @@ -1,4 +1,3 @@ -<<<<<<< HEAD:pwa/src/templates/templateParts/syncForm/SyncFormTemplate.tsx import * as React from "react"; import * as styles from "./SyncFormTemplate.module.css"; import { useForm } from "react-hook-form"; @@ -6,13 +5,13 @@ import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/for import { useTranslation } from "react-i18next"; import { InputText, SelectSingle } from "@conduction/components"; import { useQueryClient } from "react-query"; -import { ErrorMessage } from "../../../components/errorMessage/ErrorMessage"; import { useSource } from "../../../hooks/source"; import { useAction } from "../../../hooks/action"; import Skeleton from "react-loading-skeleton"; import { useSync } from "../../../hooks/synchronization"; import { useObject } from "../../../hooks/object"; import { useIsLoadingContext } from "../../../context/isLoading"; +import { enrichValidation } from "../../../services/enrichReactHookFormValidation"; interface SyncFormTemplateProps { objectId: string; @@ -111,7 +110,7 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy options={getSources.data.map((source: any) => ({ label: source.name, value: source.id }))} name="source" disabled={isLoading.syncForm} - validation={{ required: true }} + validation={enrichValidation({ required: true })} {...{ register, errors, control }} /> )} @@ -127,7 +126,7 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy options={getSources.data.map((source: any) => ({ label: source.name, value: source.id }))} name="source" disabled={isLoading.syncForm} - validation={{ required: true }} + validation={enrichValidation({ required: true })} {...{ register, errors, control }} /> )} @@ -177,10 +176,9 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy - {errors["sourceId"] && } @@ -190,10 +188,9 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy - {errors["endpoint"] && }
@@ -202,176 +199,3 @@ export const SyncFormTemplate: React.FC = ({ objectId, sy ); }; -======= -import * as React from "react"; -import * as styles from "./SyncFormTemplate.module.css"; -import { useForm } from "react-hook-form"; -import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/form-field"; -import { Heading1 } from "@gemeente-denhaag/components-react"; -import { useTranslation } from "react-i18next"; -import { InputText, SelectSingle } from "@conduction/components"; -import { faSave } from "@fortawesome/free-solid-svg-icons"; -import { useQueryClient } from "react-query"; -import { useSource } from "../../../hooks/source"; -import { useAction } from "../../../hooks/action"; -import Skeleton from "react-loading-skeleton"; -import { useSync } from "../../../hooks/synchronization"; -import { Button } from "../../../components/button/Button"; -import { enrichValidation } from "../../../services/enrichReactHookFormValidation"; - -interface EditSyncFormTemplateProps { - objectId: string; - syncId: string; - sync: any; -} - -export const EditSyncFormTemplate: React.FC = ({ objectId, syncId, sync }) => { - const { t } = useTranslation(); - const [loading, setLoading] = React.useState(false); - - const queryClient = useQueryClient(); - - const _useSource = useSource(queryClient); - const getSources = _useSource.getAll(); - const _useAction = useAction(queryClient); - const getActions = _useAction.getAll(); - - const _useSync = useSync(queryClient); - const syncObject = _useSync.createOrEdit(objectId, syncId); - - const getSource = _useSource.getOne(sync?.gateway?.id); - const getAction = _useAction.getOne(sync?.action?.id); - - const syncActions = - getActions && - getActions.data?.filter((action) => action.class === "App\\ActionHandler\\SynchronizationItemHandler"); - - const { - register, - handleSubmit, - watch, - setValue, - control, - formState: { errors }, - } = useForm(); - - const onSubmit = (data: any): void => { - const payload = { - ...data, - }; - - const sourceId = data.source.value; - - syncObject.mutate({ objectId, sourceId, payload, syncId }); - }; - - const handleSetFormValues = (sync: any): void => { - const basicFields: string[] = ["endpoint"]; - basicFields.forEach((field) => setValue(field, sync[field])); - setValue("externalId", sync.sourceId); - }; - - const handleSetSelectActionFormValues = (): void => { - getAction && setValue("action", { label: getAction.data?.name, value: getAction.data?.id }); - }; - const handleSetSelectSourceFormValues = (): void => { - getSource.isSuccess && setValue("source", { label: getSource.data.name, value: getSource.data.id }); - }; - - React.useEffect(() => { - handleSetFormValues(sync); - }, [sync]); - - React.useEffect(() => { - handleSetSelectActionFormValues(); - }, [getAction.isSuccess]); - - React.useEffect(() => { - handleSetSelectSourceFormValues(); - }, [getSource.isSuccess]); - - return ( -
- -
- {`Edit ${sync?.name}`} - -
-
-
-
-
- - - {t("Select a source")} - - {(getSources.isLoading || getSource.isLoading || getSource.isIdle) && } - {getSources.isSuccess && getSource.isSuccess && ( - ({ label: source.name, value: source.id }))} - name="source" - validation={enrichValidation({ required: true })} - {...{ register, errors, control }} - /> - )} - - - - - {t("Select a Action")} - {sync?.action && ( - <> - {getAction.isLoading && } - {getActions.isSuccess && syncActions && getAction.isSuccess && ( - ({ label: action.name, value: action.id }))} - name="action" - {...{ register, errors, control }} - /> - )} - - )} - {!sync?.action && ( - <> - {(getActions.isLoading || !sync) && } - {getActions.isSuccess && syncActions && ( - ({ label: action.name, value: action.id }))} - name="action" - {...{ register, errors, control }} - /> - )} - - )} - - - - - {t("ExternalId")} - - - - - - {t("Endpoint")} - - - -
-
- -
- ); -}; ->>>>>>> development:pwa/src/templates/templateParts/syncForm/EditSyncFormTemplate.tsx