IO-2608 Filter and Sort columns in Employee table

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) => {

client/src/graphql/employees.queries.js

@@ -3,11 +3,12 @@ import { gql } from "@apollo/client";
 export const QUERY_EMPLOYEES = gql`
   query QUERY_EMPLOYEES {
     employees(order_by: { employee_number: asc }) {
-      last_name
-      id
+      active
+      employee_number
       first_name
       flat_rate
-      employee_number
+      id
+      last_name
     }
   }
 `;

client/src/translations/en_us/common.json

@@ -1001,10 +1001,13 @@
 			},
 			"labels": {
 				"actions": "Actions",
+				"active": "Active",
 				"endmustbeafterstart": "End date must be after start date.",
 				"flat_rate": "Flat Rate",
+				"inactive": "Inactive",
 				"name": "Name",
 				"rate_type": "Rate Type",
+				"status": "Status",
 				"straight_time": "Straight Time"
 			},
 			"successes": {

client/src/translations/es/common.json

@@ -1001,10 +1001,13 @@
 			},
 			"labels": {
 				"actions": "",
+				"active": "",
 				"endmustbeafterstart": "",
 				"flat_rate": "",
+				"inactive": "",
 				"name": "",
 				"rate_type": "",
+				"status": "",
 				"straight_time": ""
 			},
 			"successes": {

client/src/translations/fr/common.json

@@ -1001,10 +1001,13 @@
 			},
 			"labels": {
 				"actions": "",
+				"active": "",
 				"endmustbeafterstart": "",
 				"flat_rate": "",
+				"inactive": "",
 				"name": "",
 				"rate_type": "",
+				"status": "",
 				"straight_time": ""
 			},
 			"successes": {