IO-1612 Add employee vacation tracking.

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({
-  loading,
-  employees,
-  selectedEmployee,
-  setSelectedEmployee,
-  handleDelete,
-}) {
+import { useHistory, useLocation } from "react-router-dom";
+
+export default function ShopEmployeesListComponent({ loading, employees }) {
   const { t } = useTranslation();
+  const history = useHistory();
+  const search = queryString.parse(useLocation().search);
 
   const handleOnRowClick = (record) => {
     if (record) {
-      setSelectedEmployee(record);
-    } else setSelectedEmployee({});
+      search.employeeId = record.id;
+      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 {