IO-3624 Finalize admin config UX and validation polish

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -3,9 +3,8 @@ import { useApolloClient, useMutation, useQuery } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Card, Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
 import ResponsiveTable from "../responsive-table/responsive-table.component";
-import { useForm } from "antd/es/form/Form";
 import queryString from "query-string";
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -26,8 +25,10 @@ import { DateFormatter } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
 import AlertComponent from "../alert/alert.component";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import FormsFieldChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
+import InlineValidatedFormRow from "../layout-form-row/inline-validated-form-row.component.jsx";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import {
   INLINE_TITLE_GROUP_STYLE,
@@ -49,9 +50,10 @@ const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function ShopEmployeesFormComponent({ bodyshop }) {
+export function ShopEmployeesFormComponent({ bodyshop, form, onDirtyChange, isDirty }) {
   const { t } = useTranslation();
-  const [form] = useForm();
+  const [internalIsDirty, setInternalIsDirty] = useState(false);
+  const resolvedIsDirty = typeof isDirty === "boolean" ? isDirty : internalIsDirty;
   const employeeNumber = Form.useWatch("employee_number", form);
   const firstName = Form.useWatch("first_name", form);
   const lastName = Form.useWatch("last_name", form);
@@ -66,17 +68,19 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
   const history = useNavigate();
   const search = queryString.parse(useLocation().search);
   const [deleteVacation] = useMutation(DELETE_VACATION);
-  const { error, data } = useQuery(QUERY_EMPLOYEE_BY_ID, {
+  const { error, data, refetch } = useQuery(QUERY_EMPLOYEE_BY_ID, {
     variables: { id: search.employeeId },
     skip: !search.employeeId || search.employeeId === "new",
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
   const notification = useNotification();
+  const isNewEmployee = search.employeeId === "new";
+  const currentEmployeeData = data?.employees_by_pk?.id === search.employeeId ? data.employees_by_pk : null;
   const employeeTitleName = [firstName, lastName].filter(Boolean).join(" ").trim();
   const employeeCardTitle =
     [employeeNumber, employeeTitleName].filter(Boolean).join(" - ") ||
-    (search.employeeId === "new" ? t("employees.actions.new") : t("bodyshop.labels.employees"));
+    (isNewEmployee ? t("employees.actions.new") : t("bodyshop.labels.employees"));
 
   const {
     treatments: { Enhanced_Payroll }
@@ -86,13 +90,49 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
     splitKey: bodyshop.imexshopid
   });
 
+  const updateDirtyState = useCallback(
+    (nextDirtyState) => {
+      if (typeof isDirty !== "boolean") {
+        setInternalIsDirty(nextDirtyState);
+      }
+
+      onDirtyChange?.(nextDirtyState);
+    },
+    [isDirty, onDirtyChange]
+  );
+
   const client = useApolloClient();
-  useEffect(() => {
-    if (data && data.employees_by_pk) form.setFieldsValue(data.employees_by_pk);
-    else {
-      form.resetFields();
+  const clearEmployeeFormMeta = useCallback(() => {
+    const fieldMeta = form.getFieldsError().map(({ name }) => ({
+      name,
+      touched: false,
+      validating: false,
+      errors: [],
+      warnings: []
+    }));
+
+    if (fieldMeta.length > 0) {
+      form.setFields(fieldMeta);
     }
-  }, [form, data, search.employeeId]);
+
+    updateDirtyState(false);
+  }, [form, updateDirtyState]);
+
+  const resetEmployeeFormToCurrentData = useCallback(() => {
+    form.resetFields();
+
+    if (currentEmployeeData) {
+      form.setFieldsValue(currentEmployeeData);
+    }
+
+    window.requestAnimationFrame(() => {
+      clearEmployeeFormMeta();
+    });
+  }, [clearEmployeeFormMeta, currentEmployeeData, form]);
+
+  useEffect(() => {
+    resetEmployeeFormToCurrentData();
+  }, [resetEmployeeFormToCurrentData, search.employeeId]);
 
   const [updateEmployee] = useMutation(UPDATE_EMPLOYEE);
   const [insertEmployees] = useMutation(INSERT_EMPLOYEES);
@@ -112,6 +152,8 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
         }
       })
         .then(() => {
+          updateDirtyState(false);
+          void refetch();
           notification.success({
             title: t("employees.successes.save")
           });
@@ -131,6 +173,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
         variables: { employees: [{ ...values, shopid: bodyshop.id }] },
         refetchQueries: ["QUERY_EMPLOYEES"]
       }).then((r) => {
+        updateDirtyState(false);
         search.employeeId = r.data.insert_employees.returning[0].id;
         history({ search: queryString.stringify(search) });
         notification.success({
@@ -199,12 +242,21 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
     <Card
       title={employeeCardTitle}
       extra={
-        <Button type="primary" onClick={() => form.submit()} style={{ minWidth: 170 }}>
+        <Button type="primary" onClick={() => form.submit()} disabled={!resolvedIsDirty} style={{ minWidth: 170 }}>
           {t("employees.actions.save_employee")}
         </Button>
       }
     >
-      <Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
+      <Form
+        onFinish={handleFinish}
+        autoComplete={"off"}
+        layout="vertical"
+        form={form}
+        onValuesChange={() => {
+          updateDirtyState(form.isFieldsTouched());
+        }}
+      >
+        <FormsFieldChanged form={form} onReset={resetEmployeeFormToCurrentData} onDirtyChange={updateDirtyState} />
         <LayoutFormRow
           title={
             <div
@@ -423,8 +475,10 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                   ) : (
                     fields.map((field, index) => {
                       return (
-                        <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
-                          <LayoutFormRow
+                        <Form.Item noStyle key={field.key}>
+                          <InlineValidatedFormRow
+                            form={form}
+                            errorNames={[["rates", field.name, "cost_center"]]}
                             noDivider
                             title={
                               <div style={INLINE_TITLE_ROW_STYLE}>
@@ -495,7 +549,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                             >
                               <InputNumber min={0} precision={2} style={{ width: "100%" }} />
                             </Form.Item>
-                          </LayoutFormRow>
+                          </InlineValidatedFormRow>
                         </Form.Item>
                       );
                     })