AYS-822 | user update save button disable status

src/app/(private)/emergency-evacuation-applications/[id]/page.tsx

@@ -63,7 +63,8 @@ const Page = ({
     mode: 'onChange',
   })
   const userPermissions = useAppSelector(selectPermissions)
-  const { control, reset, formState, getValues } = form
+  const { control, reset, formState, getValues, watch } = form
+  const watchedValues = watch()
 
   const [
     emergencyEvacuationApplicationDetails,
@@ -78,13 +79,42 @@ const Page = ({
   const [showUpdateConfirmDialog, setShowUpdateConfirmDialog] = useState(false)
   const [pendingSaveValues, setPendingSaveValues] =
     useState<EvacuationApplicationEditableFields | null>(null)
+  const [isFormChanged, setIsFormChanged] = useState(false)
+
+  useEffect(() => {
+    if (!initialApplicationValues) return
+
+    const currentValues = {
+      seatingCount: watchedValues.seatingCount,
+      hasObstaclePersonExist: watchedValues.hasObstaclePersonExist,
+      status: watchedValues.status,
+      notes: watchedValues.notes,
+    }
+
+    const hasChanged = [
+      'seatingCount',
+      'hasObstaclePersonExist',
+      'status',
+      'notes',
+    ].some(
+      (key) =>
+        currentValues[key as keyof EvacuationApplicationEditableFields] !==
+        initialApplicationValues[
+          key as keyof EvacuationApplicationEditableFields
+        ]
+    )
+
+    setIsFormChanged(hasChanged)
+  }, [watchedValues, initialApplicationValues])
 
   const canUpdateApplication =
     emergencyEvacuationApplicationDetails?.status !== 'COMPLETED' &&
     emergencyEvacuationApplicationDetails?.status !== 'CANCELLED'
 
   const isSaveButtonDisabled =
-    Boolean(formState.errors.seatingCount) || Boolean(formState.errors.notes)
+    !isFormChanged ||
+    Boolean(formState.errors.seatingCount) ||
+    Boolean(formState.errors.notes)
 
   useEffect(() => {
     const fetchDetails = (): void => {
@@ -99,6 +129,13 @@ const Page = ({
             detailsWithoutNullHasObstacle
           )
           setInitialApplicationValues(detailsWithoutNullHasObstacle)
+          reset({
+            seatingCount: detailsWithoutNullHasObstacle.seatingCount,
+            hasObstaclePersonExist:
+              detailsWithoutNullHasObstacle.hasObstaclePersonExist,
+            status: detailsWithoutNullHasObstacle.status,
+            notes: detailsWithoutNullHasObstacle.notes,
+          })
         })
         .catch((error) => {
           setError(error.message)
@@ -138,22 +175,6 @@ const Page = ({
       notes: getValues('notes') ?? initialApplicationValues?.notes,
     }
 
-    const editableFields: (keyof EvacuationApplicationEditableFields)[] = [
-      'seatingCount',
-      'hasObstaclePersonExist',
-      'status',
-      'notes',
-    ]
-
-    const isChanged = editableFields.some((key) => {
-      return currentValues[key] !== initialApplicationValues?.[key]
-    })
-
-    if (!isChanged) {
-      showErrorToast(undefined, 'common.error.noChange')
-      return
-    }
-
     setPendingSaveValues(currentValues)
 
     if (

src/app/(private)/users/[id]/page.tsx

@@ -58,7 +58,8 @@ const Page = ({
     mode: 'onChange',
   })
   const userPermissions = useAppSelector(selectPermissions)
-  const { control, reset, formState, getValues } = form
+  const { control, reset, formState, getValues, watch } = form
+  const watchedValues = watch()
 
   const { roles, userRolesIsLoading } = useFetchRoleSummary()
   const [selectedRoles, setSelectedRoles] = useState<string[]>([])
@@ -68,8 +69,58 @@ const Page = ({
   const [error, setError] = useState<string | null>(null)
   const [isUserEditable, setIsUserEditable] = useState<boolean>(false)
   const [minRoleError, setMinRoleError] = useState<string | null>(null)
+  const [isFormChanged, setIsFormChanged] = useState(false)
+
+  useEffect(() => {
+    if (!initialUserValues) return
+
+    const currentValues: UserEditableFields = {
+      firstName: watchedValues.firstName,
+      lastName: watchedValues.lastName,
+      emailAddress: watchedValues.emailAddress,
+      city: watchedValues.city,
+      phoneNumber: {
+        countryCode: watchedValues.phoneNumber?.countryCode ?? '90',
+        lineNumber:
+          watchedValues.phoneNumber?.lineNumber ??
+          initialUserValues.phoneNumber?.lineNumber,
+      },
+      roleIds: selectedRoles,
+    }
+
+    const hasFieldChanged = [
+      'firstName',
+      'lastName',
+      'emailAddress',
+      'city',
+      'phoneNumber',
+    ].some((key) => {
+      if (key === 'phoneNumber') {
+        return (
+          currentValues.phoneNumber.countryCode !==
+            initialUserValues.phoneNumber?.countryCode ||
+          currentValues.phoneNumber.lineNumber !==
+            initialUserValues.phoneNumber?.lineNumber
+        )
+      }
+
+      return (
+        currentValues[key as keyof UserEditableFields] !==
+        initialUserValues[key as keyof User]
+      )
+    })
+
+    const initialRoleIds = initialUserValues.roles?.map((role) => role.id)
+    const currentRoleIds = selectedRoles
+
+    const haveRolesChanged =
+      JSON.stringify(currentRoleIds) !== JSON.stringify(initialRoleIds)
+
+    setIsFormChanged(hasFieldChanged || haveRolesChanged)
+  }, [watchedValues, selectedRoles, initialUserValues])
 
   const isSaveButtonDisabled =
+    !isFormChanged ||
     Boolean(formState.errors.firstName) ||
     Boolean(formState.errors.lastName) ||
     Boolean(formState.errors.emailAddress) ||
@@ -85,6 +136,16 @@ const Page = ({
         setUserDetails(details)
         setInitialUserValues(details)
         setSelectedRoles(details.roles.map((role) => role.id))
+        reset({
+          firstName: details.firstName,
+          lastName: details.lastName,
+          emailAddress: details.emailAddress,
+          city: details.city,
+          phoneNumber: {
+            countryCode: details.phoneNumber?.countryCode ?? '90',
+            lineNumber: details.phoneNumber?.lineNumber ?? '',
+          },
+        })
       })
       .catch((error) => {
         setError(error.message)
@@ -180,43 +241,6 @@ const Page = ({
       roleIds: selectedRoles,
     }
 
-    const editableFields: (keyof UserEditableFields)[] = [
-      'firstName',
-      'lastName',
-      'emailAddress',
-      'city',
-      'phoneNumber',
-      'roleIds',
-    ]
-
-    const isChanged = editableFields.some((key) => {
-      if (key === 'phoneNumber') {
-        return (
-          currentValues.phoneNumber.countryCode !==
-            initialUserValues?.phoneNumber?.countryCode ||
-          currentValues.phoneNumber.lineNumber !==
-            initialUserValues?.phoneNumber?.lineNumber
-        )
-      }
-      if (key === 'roleIds') {
-        const initialRoleIds =
-          initialUserValues?.roles.map((role) => role.id) || []
-
-        return (
-          JSON.stringify(
-            currentValues.roleIds.toSorted((a, b) => a.localeCompare(b))
-          ) !==
-          JSON.stringify(initialRoleIds.toSorted((a, b) => a.localeCompare(b)))
-        )
-      }
-      return currentValues[key] !== initialUserValues?.[key]
-    })
-
-    if (!isChanged) {
-      showErrorToast(undefined, 'common.error.noChange')
-      return
-    }
-
     updateUser(params.id, currentValues)
       .then((response) => {
         if (response.isSuccess) {