IO-1612 Add employee vacation tracking.

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

@@ -1,20 +1,41 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { Button, Card, Form, Input, InputNumber, Select, Switch } from "antd";
+import { useApolloClient, useMutation, useQuery } from "@apollo/client";
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  InputNumber,
+  notification,
+  Select,
+  Switch,
+  Table,
+} from "antd";
+import { useForm } from "antd/es/form/Form";
 import moment from "moment";
+import querystring from "query-string";
 import React, { useEffect } from "react";
-import { useApolloClient } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
   CHECK_EMPLOYEE_NUMBER,
+  DELETE_VACATION,
+  INSERT_EMPLOYEES,
+  QUERY_EMPLOYEE_BY_ID,
   QUERY_USERS_BY_EMAIL,
+  UPDATE_EMPLOYEE,
 } from "../../graphql/employees.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import CiecaSelect from "../../utils/Ciecaselect";
+import { DateFormatter } from "../../utils/DateFormatter";
+import AlertComponent from "../alert/alert.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import CiecaSelect from "../../utils/Ciecaselect";
+import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -23,20 +44,129 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function ShopEmployeesFormComponent({
-  bodyshop,
-  form,
-  selectedEmployee,
-  handleFinish,
-}) {
+export function ShopEmployeesFormComponent({ bodyshop }) {
   const { t } = useTranslation();
+  const [form] = useForm();
+  const history = useHistory();
+  const search = querystring.parse(useLocation().search);
+  const [deleteVacation] = useMutation(DELETE_VACATION);
+  const { error, data } = useQuery(QUERY_EMPLOYEE_BY_ID, {
+    variables: { id: search.employeeId },
+    skip: !search.employeeId || search.employeeId === "new",
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
 
   const client = useApolloClient();
   useEffect(() => {
-    if (selectedEmployee) form.resetFields();
-  }, [selectedEmployee, form]);
+    if (data && data.employees_by_pk) form.setFieldsValue(data.employees_by_pk);
+    else {
+      form.resetFields();
+    }
+  }, [form, data, search.employeeId]);
 
-  if (!selectedEmployee) return null;
+  const [updateEmployee] = useMutation(UPDATE_EMPLOYEE);
+  const [insertEmployees] = useMutation(INSERT_EMPLOYEES);
+
+  const handleFinish = (values) => {
+    if (search.employeeId && search.employeeId !== "new") {
+      //Update a record.
+      logImEXEvent("shop_employee_update");
+
+      updateEmployee({
+        variables: {
+          id: search.employeeId,
+          employee: {
+            ...values,
+            user_email: values.user_email === "" ? null : values.user_email,
+          },
+        },
+      })
+        .then((r) => {
+          notification["success"]({
+            message: t("employees.successes.save"),
+          });
+        })
+        .catch((error) => {
+          notification["error"]({
+            message: t("employees.errors.save", {
+              message: JSON.stringify(error),
+            }),
+          });
+        });
+    } else {
+      //New record, insert it.
+      logImEXEvent("shop_employee_insert");
+
+      insertEmployees({
+        variables: { employees: [{ ...values, shopid: bodyshop.id }] },
+        refetchQueries: ["QUERY_EMPLOYEES"],
+      }).then((r) => {
+        search.employeeId = r.data.insert_employees.returning[0].id;
+        history.push({ search: querystring.stringify(search) });
+        notification["success"]({
+          message: t("employees.successes.save"),
+        });
+      });
+    }
+  };
+
+  if (!search.employeeId) return null;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  const columns = [
+    {
+      title: t("employees.fields.vacation.start"),
+      dataIndex: "start",
+      key: "start",
+      render: (text, record) => <DateFormatter>{text}</DateFormatter>,
+    },
+    {
+      title: t("employees.fields.vacation.end"),
+      dataIndex: "end",
+      key: "end",
+      render: (text, record) => <DateFormatter>{text}</DateFormatter>,
+    },
+    {
+      title: t("employees.fields.vacation.length"),
+      dataIndex: "length",
+      key: "length",
+      render: (text, record) =>
+        moment(record.end).diff(moment(record.start), "days", true).toFixed(1),
+    },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => (
+        <Button
+          onClick={async () => {
+            await deleteVacation({
+              variables: { id: record.id },
+              update(cache) {
+                cache.modify({
+                  id: cache.identify({
+                    id: data.employees_by_pk.id,
+                    __typename: "employees",
+                  }),
+
+                  fields: {
+                    employee_vacations(ex, { readField }) {
+                      return ex.filter(
+                        (vacaref) => record.id !== readField("id", vacaref)
+                      );
+                    },
+                  },
+                });
+              },
+            });
+          }}
+        >
+          <DeleteFilled />
+        </Button>
+      ),
+    },
+  ];
 
   return (
     <Card
@@ -51,15 +181,6 @@ export function ShopEmployeesFormComponent({
         autoComplete={"off"}
         layout="vertical"
         form={form}
-        initialValues={{
-          ...selectedEmployee,
-          hire_date: selectedEmployee.hire_date
-            ? moment(selectedEmployee.hire_date)
-            : null,
-          termination_date: selectedEmployee.termination_date
-            ? moment(selectedEmployee.termination_date)
-            : null,
-        }}
       >
         <LayoutFormRow>
           <Form.Item
@@ -288,6 +409,15 @@ export function ShopEmployeesFormComponent({
           }}
         </Form.List>
       </Form>
+
+      <Table
+        title={() => (
+          <ShopEmployeeAddVacation employee={data && data.employees_by_pk} />
+        )}
+        columns={columns}
+        rowKey={"id"}
+        dataSource={data ? data.employees_by_pk.employee_vacations : []}
+      />
     </Card>
   );
 }