Merge pull request #369 from ConductionNL/feature/organization-reference

feature/organization-reference
ConductionNL · Apr 18, 2024 · 254991a · 254991a
2 parents 1f34118 + 7be7ed2
commit 254991a
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 4 deletions.
diff --git a/pwa/src/apiService/resources/organization.ts b/pwa/src/apiService/resources/organization.ts
@@ -28,6 +28,16 @@ export default class Organization {
     return data;
   };
 
+  public delete = async (variables: { id: string }): Promise<any> => {
+    const { id } = variables;
+
+    const { data } = await this._send(this._instance, "DELETE", `/admin/organizations/${id}`, undefined, {
+      loading: "Removing organization...",
+      success: "Organization successfully removed.",
+    });
+    return data;
+  };
+
   public createOrUpdate = async (variables: { payload: any; id?: string }): Promise<any> => {
     const { payload, id } = variables;
 

diff --git a/pwa/src/hooks/organization.ts b/pwa/src/hooks/organization.ts
@@ -2,11 +2,13 @@ import * as React from "react";
 import { QueryClient, useMutation, useQuery } from "react-query";
 import APIService from "../apiService/apiService";
 import APIContext from "../apiService/apiContext";
-import { addItem, updateItem } from "../services/mutateQueries";
+import { addItem, deleteItem, updateItem } from "../services/mutateQueries";
 import { navigate } from "gatsby";
+import { useDeletedItemsContext } from "../context/deletedItems";
 
 export const useOrganization = (queryClient: QueryClient) => {
   const API: APIService | null = React.useContext(APIContext);
+  const { isDeleted, addDeletedItem, removeDeletedItem } = useDeletedItemsContext();
 
   const getAll = () =>
     useQuery<any[], Error>("organizations", API.Organization.getAll, {
@@ -29,7 +31,20 @@ export const useOrganization = (queryClient: QueryClient) => {
       onError: (error) => {
         console.warn(error.message);
       },
-      enabled: !!organizationId,
+      enabled: !!organizationId && !isDeleted(organizationId),
+    });
+
+  const remove = () =>
+    useMutation<any, Error, any>(API.Organization.delete, {
+      onMutate: ({ id }) => addDeletedItem(id),
+      onSuccess: async (_, variables) => {
+        deleteItem(queryClient, "organizations", variables.id);
+        navigate("/settings/organizations");
+      },
+      onError: (error, { id }) => {
+        removeDeletedItem(id);
+        console.warn(error.message);
+      },
     });
 
   const createOrEdit = (organizationId?: string) =>
@@ -50,5 +65,5 @@ export const useOrganization = (queryClient: QueryClient) => {
       },
     });
 
-  return { getAll, getAllSelectOptions, getOne, createOrEdit };
+  return { getAll, getAllSelectOptions, getOne, createOrEdit, remove };
 };
diff --git a/pwa/src/templates/templateParts/organizationsForm/EditOrganizationTemplate.tsx b/pwa/src/templates/templateParts/organizationsForm/EditOrganizationTemplate.tsx
@@ -35,6 +35,7 @@ export const EditOrganizationTemplate: React.FC<CreateOrganizationTemplateProps>
   const queryClient = useQueryClient();
   const _useOrganizations = useOrganization(queryClient);
   const getOrganization = _useOrganizations.getOne(organizationId);
+  const deleteOrganization = _useOrganizations.remove();
 
   const getLogs = useLog(queryClient).getAllFromChannel("organization", organizationId, currentLogsPage);
 
@@ -54,6 +55,12 @@ export const EditOrganizationTemplate: React.FC<CreateOrganizationTemplateProps>
     );
   };
 
+  const handleDeleteOrganization = () => {
+    const confirmDeletion = confirm("Are you sure you want to delete this organization?");
+
+    confirmDeletion && deleteOrganization.mutate({ id: organizationId });
+  };
+
   return (
     <Container layoutClassName={styles.container}>
       {getOrganization.isSuccess && (
@@ -63,6 +70,8 @@ export const EditOrganizationTemplate: React.FC<CreateOrganizationTemplateProps>
             {...{ formId }}
             disabled={isLoading.organizationForm}
             handleToggleDashboard={{ handleToggle: toggleFromDashboard, isActive: !!dashboardCard }}
+            handleDelete={handleDeleteOrganization}
+
           />
 
           <OrganizationForm organization={getOrganization.data} />

diff --git a/pwa/src/templates/templateParts/organizationsForm/OrganizationForm.tsx b/pwa/src/templates/templateParts/organizationsForm/OrganizationForm.tsx
@@ -31,7 +31,7 @@ export const OrganizationForm: React.FC<OrganizationFormProps> = ({ organization
   } = useForm();
 
   const handleSetFormValues = (organization: any): void => {
-    const basicFields: string[] = ["name", "description"];
+    const basicFields: string[] = ["name", "description", "reference"];
     basicFields.forEach((field) => setValue(field, organization[field]));
   };
 
@@ -66,6 +66,21 @@ export const OrganizationForm: React.FC<OrganizationFormProps> = ({ organization
             </FormFieldInput>
           </FormField>
 
+          <FormField>
+            <FormFieldInput>
+              <FormFieldLabel>{t("Reference")}</FormFieldLabel>
+              <InputText
+                {...{ register, errors }}
+                name="reference"
+                validation={enrichValidation({ required: true })}
+                disabled={isLoading.organizationForm}
+                ariaLabel={t("Enter reference")}
+              />
+            </FormFieldInput>
+          </FormField>
+        </div>
+
+        <div>
           <FormField>
             <FormFieldInput>
               <FormFieldLabel>{t("Description")}</FormFieldLabel>