diff --git a/src/app/(private)/emergency-evacuation-applications/[id]/page.tsx b/src/app/(private)/emergency-evacuation-applications/[id]/page.tsx index 716c30ec..c6adddf5 100644 --- a/src/app/(private)/emergency-evacuation-applications/[id]/page.tsx +++ b/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(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 ( diff --git a/src/app/(private)/users/[id]/page.tsx b/src/app/(private)/users/[id]/page.tsx index 2db511a6..3a136b6e 100644 --- a/src/app/(private)/users/[id]/page.tsx +++ b/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([]) @@ -68,8 +69,58 @@ const Page = ({ const [error, setError] = useState(null) const [isUserEditable, setIsUserEditable] = useState(false) const [minRoleError, setMinRoleError] = useState(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) {