IO-1612 Add employee vacation tracking.

bodyshop_translations.babel

@@ -13183,6 +13183,27 @@
                             <folder_node>
                                 <name>actions</name>
                                 <children>
+                                    <concept_node>
+                                        <name>addvacation</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>new</name>
                                         <definition_loaded>false</definition_loaded>
@@ -13571,6 +13592,74 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <folder_node>
+                                        <name>vacation</name>
+                                        <children>
+                                            <concept_node>
+                                                <name>end</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>length</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>start</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                        </children>
+                                    </folder_node>
                                 </children>
                             </folder_node>
                             <folder_node>
@@ -13597,6 +13686,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>endmustbeafterstart</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>flat_rate</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/schedule-calendar/schedule-calendar.container.jsx

@@ -10,6 +10,7 @@ import ScheduleCalendarComponent from "./schedule-calendar.component";
 import { calculateScheduleLoad } from "../../redux/application/application.actions";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import moment from "moment";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
 });
@@ -26,7 +27,12 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
   const { loading, error, data, refetch } = useQuery(
     QUERY_ALL_ACTIVE_APPOINTMENTS,
     {
-      variables: { start: range.start.toDate(), end: range.end.toDate() },
+      variables: {
+        start: range.start.toDate(),
+        end: range.end.toDate(),
+        startd: range.start,
+        endd: range.end,
+      },
       skip: !!!range.start || !!!range.end,
       fetchPolicy: "network-only",
       nextFetchPolicy: "network-only",
@@ -39,15 +45,29 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
-  let normalizedData = data.appointments.map((e) => {
+  let normalizedData = [
-    //Required becuase Hasura returns a string instead of a date object.
+    ...data.appointments.map((e) => {
-    return Object.assign(
+      //Required becuase Hasura returns a string instead of a date object.
-      {},
+      return Object.assign(
-      e,
+        {},
-      { start: new Date(e.start) },
+        e,
-      { end: new Date(e.end) }
+        { start: new Date(e.start) },
-    );
+        { end: new Date(e.end) }
-  });
+      );
+    }),
+    ...data.employee_vacation.map((e) => {
+      //Required becuase Hasura returns a string instead of a date object.
+      return {
+        ...e,
+        title: `${
+          (e.employee.first_name && e.employee.first_name.substr(0, 1)) || ""
+        } ${e.employee.last_name || ""} OUT`,
+        color: "red",
+        start: moment(e.start).startOf("day").toDate(),
+        end: moment(e.end).startOf("day").toDate(),
+      };
+    }),
+  ];
 
   return (
     <ScheduleCalendarComponent

client/src/components/schedule-day-view/schedule-day-view.container.jsx

@@ -11,6 +11,8 @@ export default function ScheduleDayViewContainer({ day }) {
     variables: {
       start: moment(day).startOf("day"),
       end: moment(day).endOf("day"),
+      startd: moment(day).startOf("day").format("YYYY-MM-DD"),
+      endd: moment(day).add(1, "day").format("YYYY-MM-DD"),
     },
     skip: !moment(day).isValid(),
     fetchPolicy: "network-only",
@@ -23,15 +25,29 @@ export default function ScheduleDayViewContainer({ day }) {
   let normalizedData;
 
   if (data) {
-    normalizedData = data.appointments.map((e) => {
+    normalizedData = [
-      //Required becuase Hasura returns a string instead of a date object.
+      ...data.appointments.map((e) => {
-      return Object.assign(
+        //Required becuase Hasura returns a string instead of a date object.
-        {},
+        return Object.assign(
-        e,
+          {},
-        { start: new Date(e.start) },
+          e,
-        { end: new Date(e.end) }
+          { start: new Date(e.start) },
-      );
+          { end: new Date(e.end) }
-    });
+        );
+      }),
+      ...data.employee_vacation.map((e) => {
+        //Required becuase Hasura returns a string instead of a date object.
+        return {
+          ...e,
+          title: `${
+            (e.employee.first_name && e.employee.first_name.substr(0, 1)) || ""
+          } ${e.employee.last_name || ""} OUT`,
+          color: "red",
+          start: moment(e.start).startOf("day").toDate(),
+          end: moment(e.end).startOf("day").toDate(),
+        };
+      }),
+    ];
   }
 
   return (

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -190,7 +190,6 @@ export function ScheduleJobModalComponent({
       <Col span={12}>
         <Form.Item shouldUpdate={(prev, cur) => prev.start !== cur.start}>
           {() => {
-            console.log("render");
             const values = form.getFieldsValue();
             return (
               <div className="schedule-job-modal">

client/src/components/shop-employees/shop-employees-add-vacation.component.jsx

@@ -0,0 +1,124 @@
+import { useMutation } from "@apollo/client";
+import { Button, Card, Form, notification, Popover, Space } from "antd";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { INSERT_VACATION } from "../../graphql/employees.queries";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
+
+export default function ShopEmployeeAddVacation({ employee }) {
+  const { t } = useTranslation();
+  const [insertVacation] = useMutation(INSERT_VACATION);
+
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const [visibility, setVisibility] = useState(false);
+
+  const handleFinish = async (values) => {
+    logImEXEvent("employee_add_vacation");
+
+    setLoading(true);
+    let result;
+
+    result = await insertVacation({
+      variables: { vacation: { ...values, employeeid: employee.id } },
+      update(cache, { data }) {
+        cache.modify({
+          id: cache.identify({ id: employee.id, __typename: "employees" }),
+          fields: {
+            employee_vacations(ex) {
+              return [data.insert_employee_vacation_one, ...ex];
+            },
+          },
+        });
+      },
+    });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("employees.errors.adding", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    } else {
+      notification["success"]({
+        message: t("employees.successes.added"),
+      });
+    }
+    setLoading(false);
+    setVisibility(false);
+  };
+
+  const overlay = (
+    <Card>
+      <Form form={form} layout="vertical" onFinish={handleFinish}>
+        <Form.Item
+          label={t("employees.fields.vacation.start")}
+          name="start"
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <FormDatePicker />
+        </Form.Item>
+        <Form.Item
+          label={t("employees.fields.vacation.end")}
+          name="end"
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+            ({ getFieldValue }) => ({
+              async validator(rule, value) {
+                if (value) {
+                  const { start } = form.getFieldsValue();
+                  if (moment(start).isAfter(moment(value))) {
+                    return Promise.reject(
+                      t("employees.labels.endmustbeafterstart")
+                    );
+                  } else {
+                    return Promise.resolve();
+                  }
+                } else {
+                  return Promise.resolve();
+                }
+              },
+            }),
+          ]}
+        >
+          <FormDatePicker />
+        </Form.Item>
+
+        <Space wrap>
+          <Button type="primary" htmlType="submit">
+            {t("general.actions.save")}
+          </Button>
+          <Button onClick={() => setVisibility(false)}>
+            {t("general.actions.cancel")}
+          </Button>
+        </Space>
+      </Form>
+    </Card>
+  );
+
+  const handleClick = (e) => {
+    setVisibility(true);
+  };
+
+  return (
+    <Popover content={overlay} visible={visibility}>
+      <Button
+        loading={loading}
+        disabled={!employee?.active}
+        onClick={handleClick}
+      >
+        {t("employees.actions.addvacation")}
+      </Button>
+    </Popover>
+  );
+}

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({
+export function ShopEmployeesFormComponent({ bodyshop }) {
-  bodyshop,
-  form,
-  selectedEmployee,
-  handleFinish,
-}) {
   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();
+    if (data && data.employees_by_pk) form.setFieldsValue(data.employees_by_pk);
-  }, [selectedEmployee, form]);
+    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>
   );
 }

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

@@ -1,19 +1,22 @@
 import { Button, Table } from "antd";
+import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
-export default function ShopEmployeesListComponent({
+import { useHistory, useLocation } from "react-router-dom";
-  loading,
+
-  employees,
+export default function ShopEmployeesListComponent({ loading, employees }) {
-  selectedEmployee,
-  setSelectedEmployee,
-  handleDelete,
-}) {
   const { t } = useTranslation();
+  const history = useHistory();
+  const search = queryString.parse(useLocation().search);
 
   const handleOnRowClick = (record) => {
     if (record) {
-      setSelectedEmployee(record);
+      search.employeeId = record.id;
-    } else setSelectedEmployee({});
+      history.push({ search: queryString.stringify(search) });
+    } else {
+      delete search.employeeId;
+      history.push({ search: queryString.stringify(search) });
+    }
   };
   const columns = [
     {
@@ -41,18 +44,6 @@ export default function ShopEmployeesListComponent({
           ? t("employees.labels.flat_rate")
           : t("employees.labels.straight_time"),
     },
-    // {
-    //   title: t("employees.labels.actions"),
-    //   dataIndex: "actions",
-    //   key: "actions",
-    //   render: (text, record) => (
-    //     <div>
-    //       <Button key="delete" onClick={() => handleDelete(record.id)}>
-    //         {t("general.actions.delete")}
-    //       </Button>
-    //     </div>
-    //   )
-    // }
   ];
   return (
     <div>
@@ -62,7 +53,8 @@ export default function ShopEmployeesListComponent({
             <Button
               type="primary"
               onClick={() => {
-                setSelectedEmployee({});
+                search.employeeId = "new";
+                history.push({ search: queryString.stringify(search) });
               }}
             >
               {t("employees.actions.new")}
@@ -76,10 +68,11 @@ export default function ShopEmployeesListComponent({
         dataSource={employees}
         rowSelection={{
           onSelect: (props) => {
-            setSelectedEmployee(props);
+            search.employeeId = props.id;
+            history.push({ search: queryString.stringify(search) });
           },
           type: "radio",
-          selectedRowKeys: [(selectedEmployee && selectedEmployee.id) || null],
+          selectedRowKeys: [search.employeeId],
         }}
         onRow={(record, rowIndex) => {
           return {

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

@@ -1,29 +0,0 @@
-import React from "react";
-import ShopEmployeesFormComponent from "./shop-employees-form.component";
-import ShopEmployeesListComponent from "./shop-employees-list.component";
-export default function ShopEmployeeComponent({
-  form,
-  loading,
-  employees,
-  employeeState,
-  handleFinish,
-  handleDelete
-}) {
-  const [selectedEmployee, setSelectedEmployee] = employeeState;
-  return (
-    <div>
-      <ShopEmployeesListComponent
-        employees={employees}
-        loading={loading}
-        selectedEmployee={selectedEmployee}
-        setSelectedEmployee={setSelectedEmployee}
-        handleDelete={handleDelete}
-      />
-      <ShopEmployeesFormComponent
-        handleFinish={handleFinish}
-        form={form}
-        selectedEmployee={selectedEmployee}
-      />
-    </div>
-  );
-}

client/src/components/shop-employees/shop-employees.container.jsx

@@ -1,120 +1,32 @@
-import { useMutation, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
-import { Form, notification } from "antd";
+import React from "react";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.utils";
+import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
-import {
-  DELETE_EMPLOYEE,
-  INSERT_EMPLOYEES,
-  QUERY_EMPLOYEES,
-  UPDATE_EMPLOYEE,
-} from "../../graphql/employees.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
-import ShopEmployeeComponent from "./shop-employees.component";
+import ShopEmployeesFormComponent from "./shop-employees-form.component";
-
+import ShopEmployeesListComponent from "./shop-employees-list.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
 
 function ShopEmployeesContainer({ bodyshop }) {
-  const [form] = Form.useForm();
+  const { loading, error, data } = useQuery(QUERY_EMPLOYEES, {
-  const { t } = useTranslation();
-  const employeeState = useState(null);
-  const { loading, error, data, refetch } = useQuery(QUERY_EMPLOYEES, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
   });
 
-  const [updateEmployee] = useMutation(UPDATE_EMPLOYEE);
-  const [insertEmployees] = useMutation(INSERT_EMPLOYEES);
-  const [deleteEmployee] = useMutation(DELETE_EMPLOYEE);
-
-  const handleDelete = (id) => {
-    logImEXEvent("shop_employee_delete");
-
-    deleteEmployee({ variables: { id: id } })
-      .then((r) => {
-        notification["success"]({
-          message: t("employees.successes.delete"),
-        });
-
-        employeeState[1](null);
-        refetch().then((r) => form.resetFields());
-      })
-      .catch((error) => {
-        notification["error"]({
-          message: t("employees.errors.delete", {
-            message: JSON.stringify(error),
-          }),
-        });
-      });
-  };
-
-  const handleFinish = (values) => {
-    if (employeeState[0].id) {
-      //Update a record.
-      logImEXEvent("shop_employee_update");
-
-      updateEmployee({
-        variables: {
-          id: employeeState[0].id,
-          employee: {
-            ...values,
-            user_email: values.user_email === "" ? null : values.user_email,
-          },
-        },
-      })
-        .then((r) => {
-          notification["success"]({
-            message: t("employees.successes.save"),
-          });
-
-          employeeState[1](null);
-          refetch().then((r) => form.resetFields());
-        })
-        .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 }] },
-      }).then((r) => {
-        notification["success"]({
-          message: t("employees.successes.save"),
-        });
-        employeeState[1](null);
-        refetch().catch((error) => {
-          notification["error"]({
-            message: t("employees.errors.save", {
-              message: JSON.stringify(error),
-            }),
-          });
-        });
-      });
-    }
-  };
-
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <ShopEmployeeComponent
+    <div>
-      handleFinish={handleFinish}
+      <ShopEmployeesListComponent
-      handleDelete={handleDelete}
+        employees={data ? data.employees : []}
-      form={form}
+        loading={loading}
-      loading={loading}
+      />
-      employeeState={employeeState}
+      <ShopEmployeesFormComponent />
-      employees={data ? data.employees : []}
+    </div>
-    />
   );
 }
 export default connect(mapStateToProps, null)(ShopEmployeesContainer);

client/src/graphql/appointments.queries.js

@@ -4,7 +4,21 @@ export const QUERY_ALL_ACTIVE_APPOINTMENTS = gql`
   query QUERY_ALL_ACTIVE_APPOINTMENTS(
     $start: timestamptz!
     $end: timestamptz!
+    $startd: date!
+    $endd: date!
   ) {
+    employee_vacation(
+      where: { _or: [{ start: { _gte: $startd } }, { end: { _lte: $endd } }] }
+    ) {
+      id
+      start
+      end
+      employee {
+        id
+        last_name
+        first_name
+      }
+    }
     appointments(
       where: {
         canceled: { _eq: false }
@@ -109,7 +123,24 @@ export const INSERT_APPOINTMENT = gql`
 `;
 
 export const QUERY_APPOINTMENT_BY_DATE = gql`
-  query QUERY_APPOINTMENT_BY_DATE($start: timestamptz, $end: timestamptz) {
+  query QUERY_APPOINTMENT_BY_DATE(
+    $start: timestamptz
+    $end: timestamptz
+    $startd: date!
+    $endd: date!
+  ) {
+    employee_vacation(
+      where: { _or: [{ start: { _gte: $startd } }, { end: { _lte: $endd } }] }
+    ) {
+      id
+      start
+      end
+      employee {
+        id
+        last_name
+        first_name
+      }
+    }
     appointments(
       where: { start: { _lte: $end, _gte: $start }, canceled: { _eq: false } }
     ) {

client/src/graphql/employees.queries.js

@@ -3,6 +3,17 @@ import { gql } from "@apollo/client";
 export const QUERY_EMPLOYEES = gql`
   query QUERY_EMPLOYEES {
     employees(order_by: { employee_number: asc }) {
+      last_name
+      id
+      first_name
+      flat_rate
+      employee_number
+    }
+  }
+`;
+export const QUERY_EMPLOYEE_BY_ID = gql`
+  query QUERY_EMPLOYEE_BY_ID($id: uuid!) {
+    employees_by_pk(id: $id) {
       last_name
       id
       first_name
@@ -14,6 +25,11 @@ export const QUERY_EMPLOYEES = gql`
       rates
       pin
       user_email
+      employee_vacations(order_by: { start: desc }) {
+        id
+        start
+        end
+      }
     }
   }
 `;
@@ -55,7 +71,17 @@ export const INSERT_EMPLOYEES = gql`
   mutation INSERT_EMPLOYEES($employees: [employees_insert_input!]!) {
     insert_employees(objects: $employees) {
       returning {
+        last_name
         id
+        first_name
+        employee_number
+        active
+        termination_date
+        hire_date
+        flat_rate
+        rates
+        pin
+        user_email
       }
     }
   }
@@ -98,3 +124,21 @@ export const QUERY_USERS_BY_EMAIL = gql`
     }
   }
 `;
+
+export const INSERT_VACATION = gql`
+  mutation INSERT_VACATION($vacation: employee_vacation_insert_input!) {
+    insert_employee_vacation_one(object: $vacation) {
+      id
+      start
+      end
+    }
+  }
+`;
+
+export const DELETE_VACATION = gql`
+  mutation DELETE_VACATION($id: uuid!) {
+    delete_employee_vacation_by_pk(id: $id) {
+      id
+    }
+  }
+`;

client/src/translations/en_us/common.json

@@ -833,6 +833,7 @@
 		},
 		"employees": {
 			"actions": {
+				"addvacation": "Add Vacation",
 				"new": "New Employee",
 				"newrate": "New Rate"
 			},
@@ -854,10 +855,16 @@
 				"pin": "Tech Console PIN",
 				"rate": "Rate",
 				"termination_date": "Termination Date",
-				"user_email": "User Email"
+				"user_email": "User Email",
+				"vacation": {
+					"end": "Vacation End",
+					"length": "Vacation Length",
+					"start": "Vacation Start"
+				}
 			},
 			"labels": {
 				"actions": "Actions",
+				"endmustbeafterstart": "End date must be after start date.Ï",
 				"flat_rate": "Flat Rate",
 				"name": "Name",
 				"rate_type": "Rate Type",

client/src/translations/es/common.json

@@ -833,6 +833,7 @@
 		},
 		"employees": {
 			"actions": {
+				"addvacation": "",
 				"new": "Nuevo empleado",
 				"newrate": ""
 			},
@@ -854,10 +855,16 @@
 				"pin": "",
 				"rate": "",
 				"termination_date": "Fecha de conclusión",
-				"user_email": ""
+				"user_email": "",
+				"vacation": {
+					"end": "",
+					"length": "",
+					"start": ""
+				}
 			},
 			"labels": {
 				"actions": "",
+				"endmustbeafterstart": "",
 				"flat_rate": "",
 				"name": "",
 				"rate_type": "",

client/src/translations/fr/common.json

@@ -833,6 +833,7 @@
 		},
 		"employees": {
 			"actions": {
+				"addvacation": "",
 				"new": "Nouvel employé",
 				"newrate": ""
 			},
@@ -854,10 +855,16 @@
 				"pin": "",
 				"rate": "",
 				"termination_date": "Date de résiliation",
-				"user_email": ""
+				"user_email": "",
+				"vacation": {
+					"end": "",
+					"length": "",
+					"start": ""
+				}
 			},
 			"labels": {
 				"actions": "",
+				"endmustbeafterstart": "",
 				"flat_rate": "",
 				"name": "",
 				"rate_type": "",

hasura/metadata/tables.yaml

@@ -1773,6 +1773,88 @@
                     _eq: X-Hasura-User-Id
               - active:
                   _eq: true
+- table:
+    schema: public
+    name: employee_vacation
+  object_relationships:
+  - name: employee
+    using:
+      foreign_key_constraint_on: employeeid
+  insert_permissions:
+  - role: user
+    permission:
+      check:
+        employee:
+          bodyshop:
+            associations:
+              _and:
+              - user:
+                  authid:
+                    _eq: X-Hasura-User-Id
+              - active:
+                  _eq: true
+      columns:
+      - id
+      - created_at
+      - updated_at
+      - employeeid
+      - start
+      - end
+      backend_only: false
+  select_permissions:
+  - role: user
+    permission:
+      columns:
+      - end
+      - start
+      - created_at
+      - updated_at
+      - employeeid
+      - id
+      filter:
+        employee:
+          bodyshop:
+            associations:
+              _and:
+              - user:
+                  authid:
+                    _eq: X-Hasura-User-Id
+              - active:
+                  _eq: true
+  update_permissions:
+  - role: user
+    permission:
+      columns:
+      - end
+      - start
+      - created_at
+      - updated_at
+      - employeeid
+      - id
+      filter:
+        employee:
+          bodyshop:
+            associations:
+              _and:
+              - user:
+                  authid:
+                    _eq: X-Hasura-User-Id
+              - active:
+                  _eq: true
+      check: null
+  delete_permissions:
+  - role: user
+    permission:
+      filter:
+        employee:
+          bodyshop:
+            associations:
+              _and:
+              - user:
+                  authid:
+                    _eq: X-Hasura-User-Id
+              - active:
+                  _eq: true
 - table:
     schema: public
     name: employees
@@ -1791,6 +1873,13 @@
         table:
           schema: public
           name: allocations
+  - name: employee_vacations
+    using:
+      foreign_key_constraint_on:
+        column: employeeid
+        table:
+          schema: public
+          name: employee_vacation
   - name: jobsByEmployeeBody
     using:
       foreign_key_constraint_on:

hasura/migrations/1641339745427_create_table_public_employee_vacation/down.sql

@@ -0,0 +1 @@
+DROP TABLE "public"."employee_vacation";

hasura/migrations/1641339745427_create_table_public_employee_vacation/up.sql

@@ -0,0 +1,18 @@
+CREATE TABLE "public"."employee_vacation" ("id" uuid NOT NULL DEFAULT gen_random_uuid(), "created_at" timestamptz NOT NULL DEFAULT now(), "updated_at" timestamptz NOT NULL DEFAULT now(), "employeeid" uuid NOT NULL, "start" date NOT NULL, "end" date NOT NULL, PRIMARY KEY ("id") , FOREIGN KEY ("employeeid") REFERENCES "public"."employees"("id") ON UPDATE cascade ON DELETE cascade);
+CREATE OR REPLACE FUNCTION "public"."set_current_timestamp_updated_at"()
+RETURNS TRIGGER AS $$
+DECLARE
+  _new record;
+BEGIN
+  _new := NEW;
+  _new."updated_at" = NOW();
+  RETURN _new;
+END;
+$$ LANGUAGE plpgsql;
+CREATE TRIGGER "set_public_employee_vacation_updated_at"
+BEFORE UPDATE ON "public"."employee_vacation"
+FOR EACH ROW
+EXECUTE PROCEDURE "public"."set_current_timestamp_updated_at"();
+COMMENT ON TRIGGER "set_public_employee_vacation_updated_at" ON "public"."employee_vacation" 
+IS 'trigger to set value of column "updated_at" to current timestamp on row update';
+CREATE EXTENSION IF NOT EXISTS pgcrypto;