feat(added usewatchdropdown logic for category to type logic): added …

…usewatchdropdown

added usewatchdropdown logic for category to type logic

apps/backoffice-v2/src/pages/Entity/components/EditableDetails/EditableDetails.tsx

@@ -19,8 +19,9 @@ import { SelectContent } from '../../../../common/components/atoms/Select/Select
 import { SelectTrigger } from '../../../../common/components/atoms/Select/Select.Trigger';
 import { SelectValue } from '../../../../common/components/atoms/Select/Select.Value';
 import { Select } from '../../../../common/components/atoms/Select/Select';
-import { TDropdownOption } from './types';
+import { useWatchDropdownOptions } from './hooks/useWatchDropdown';
 
+const UPDATEABLE_FIELDS = ['type', 'category'];
 export const EditableDetails: FunctionComponent<IEditableDetails> = ({
   data,
   valueId,
@@ -33,6 +34,12 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
   const { mutate: mutateUpdateWorkflowById } = useUpdateWorkflowByIdMutation({
     workflowId,
   });
+  const useInitiateCategorySetValue = () => {
+    useEffect(() => {
+      const categoryValue = form.getValues('category');
+      form.setValue('category', categoryValue);
+    }, [form, data, setFormData]);
+  };
   const POSITIVE_VALUE_INDICATOR = ['approved'];
   const NEGATIVE_VALUE_INDICATOR = ['revision', 'rejected'];
   const isDecisionPositive = (isDecisionComponent: boolean, value) => {
@@ -64,11 +71,10 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
   const form = useForm({
     defaultValues,
   });
-  const onSubmit: SubmitHandler<Record<PropertyKey, unknown>> = data => {
+  const onSubmit: SubmitHandler<Record<PropertyKey, unknown>> = formData => {
     const context = {
       documents: documents?.map(document => {
         if (document?.id !== valueId) return document;
-        console.log('data', data);
         const properties = Object.keys(document?.propertiesSchema?.properties ?? {}).reduce(
           (acc, curr) => {
             if (!data?.[curr]) return acc;
@@ -81,8 +87,8 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
 
         return {
           ...document,
-          type: data.type,
-          category: data.category,
+          type: formData.type,
+          category: formData.category,
           properties: properties,
         };
       }),
@@ -94,28 +100,9 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
     });
   };
   const isDecisionComponent = title === 'Decision';
-  const watch = form.watch;
-  React.useEffect(() => {
-    watch((value, { name, type }) => {
-      const newData = JSON.parse(JSON.stringify(data));
-      newData
-        .filter(item => !!item.dropdownOptions)
-        .filter(item =>
-          item.dropdownOptions.find(dropdownOption => dropdownOption.dependantOn === name),
-        )
-        .forEach(item => {
-          item.dropdownOptions = item.dropdownOptions.filter(
-            (dropdownOption: TDropdownOption) => dropdownOption.dependantValue === value[name],
-          );
-          item.value = item.dropdownOptions.find(
-            dropDownOption => dropDownOption.value == value,
-          )?.value;
 
-          return (newData[newData.indexOf(item)] = item);
-        });
-      setFormData(newData);
-    });
-  }, [watch]);
+  useWatchDropdownOptions({ form, data, setFormData });
+  useInitiateCategorySetValue();
 
   return (
     <Form {...form}>

apps/backoffice-v2/src/pages/Entity/components/EditableDetails/hooks/useWatchDropdown.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { TDropdownOption } from '../types';
+export const useWatchDropdownOptions = ({ form, data, setFormData }) => {
+  const watch = form.watch;
+
+  useEffect(() => {
+    const subscription = watch((value, { name }) => {
+      if (!['category'].includes(name)) return subscription.unsubscribe();
+      const newData = structuredClone(data);
+
+      newData
+        .filter(item => !!item.dropdownOptions)
+        .filter(item =>
+          item.dropdownOptions.find(dropdownOption => dropdownOption.dependantOn === name),
+        )
+        .forEach(item => {
+          item.dropdownOptions = item.dropdownOptions.filter(
+            (dropdownOption: TDropdownOption) => dropdownOption.dependantValue === value[name],
+          );
+          item.value = item.dropdownOptions.find(
+            dropDownOption => dropDownOption.value == value,
+          )?.value;
+
+          form.setValue(item.title, `${item.value}`);
+          return (newData[newData.indexOf(item)] = item);
+        });
+
+      setFormData(newData);
+    });
+
+    return () => subscription.unsubscribe();
+  }, [watch, data, setFormData]);
+};

apps/backoffice-v2/src/pages/Entity/hooks/useEntity/useEntity.tsx

@@ -16,6 +16,13 @@ import {
   omit,
 } from './utils';
 
+const NONE_EDITABLE_FIELDS = ['category'] as const;
+const composeIsEditable = (isEditable: boolean, title: string) => {
+  if (NONE_EDITABLE_FIELDS.includes(title)) return false;
+
+  return isEditable;
+};
+
 export const useEntity = () => {
   const { entityId } = useParams();
   const { data: entity, isLoading } = useEntityWithWorkflowQuery(entityId);
@@ -129,7 +136,8 @@ export const useEntity = () => {
                             type,
                             format,
                             pattern,
-                            isEditable: caseState.writeEnabled && isEditable,
+                            isEditable:
+                              caseState.writeEnabled && composeIsEditable(isEditable, title),
                             dropdownOptions,
                           };
                         },