Merged in feature/IO-2608-Employee-Filter-and-Sort (pull request #1197)

IO-2608 Filter and Sort columns in Employee table

Approved-by: Dave Richer

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

@@ -1,14 +1,20 @@
 import { Button, Table } from "antd";
 import queryString from "query-string";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
+import { alphaSort } from "../../utils/sorters";
 
 export default function ShopEmployeesListComponent({ loading, employees }) {
   const { t } = useTranslation();
   const history = useHistory();
   const search = queryString.parse(useLocation().search);
 
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+  });
+
   const handleOnRowClick = (record) => {
     if (record) {
       search.employeeId = record.id;
@@ -18,32 +24,82 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
       history.push({ search: queryString.stringify(search) });
     }
   };
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
   const columns = [
     {
       title: t("employees.fields.employee_number"),
       dataIndex: "employee_number",
       key: "employee_number",
+      sorter: (a, b) => alphaSort(a.employee_number, b.employee_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "employee_number" &&
+        state.sortedInfo.order,
     },
     {
-      title: t("employees.fields.first_name"),
-      dataIndex: "first_name",
-      key: "first_name",
+      title: t("employees.labels.name"),
+      dataIndex: "employee_name",
+      key: "employee_name",
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.first_name || ""} ${a.last_name || ""}`.trim(),
+          `${b.first_name || ""} ${b.last_name || ""}`.trim()
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "employee_name" &&
+        state.sortedInfo.order,
+      render: (text, record) =>
+        `${record.first_name || ""} ${record.last_name || ""}`.trim(),
     },
-    {
-      title: t("employees.fields.last_name"),
-      dataIndex: "last_name",
-      key: "last_name",
-    },
-
     {
       title: t("employees.labels.rate_type"),
       dataIndex: "rate_type",
       key: "rate_type",
+      sorter: (a, b) => Number(a.flat_rate) - Number(b.flat_rate),
+      sortOrder:
+        state.sortedInfo.columnKey === "rate_type" && state.sortedInfo.order,
+      filters: [
+        {
+          text: t("employees.labels.flat_rate"),
+          value: true,
+        },
+        {
+          text: t("employees.labels.straight_time"),
+          value: false,
+        },
+      ],
+      onFilter: (value, record) => value === record.flate_rate,
       render: (text, record) =>
         record.flat_rate
           ? t("employees.labels.flat_rate")
           : t("employees.labels.straight_time"),
     },
+    {
+      title: t("employees.labels.status"),
+      dataIndex: "active",
+      key: "active",
+      sorter: (a, b) => Number(a.active) - Number(b.active),
+      sortOrder:
+        state.sortedInfo.columnKey === "active" && state.sortedInfo.order,
+      filters: [
+        {
+          text: t("employees.labels.active"),
+          value: true,
+        },
+        {
+          text: t("employees.labels.inactive"),
+          value: false,
+        },
+      ],
+      onFilter: (value, record) => value === record.active,
+      render: (text, record) =>
+        record.active
+          ? t("employees.labels.active")
+          : t("employees.labels.inactive"),
+    },
   ];
   return (
     <div>
@@ -74,6 +130,7 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
           type: "radio",
           selectedRowKeys: [search.employeeId],
         }}
+        onChange={handleTableChange}
         onRow={(record, rowIndex) => {
           return {
             onClick: (event) => {