Added status filter to all jobs list IO-581

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -3,13 +3,25 @@ import { Button, Input, Table } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { Link, useHistory, useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
+import _ from "lodash";
 
-export default function JobsList({ refetch, loading, jobs, total }) {
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
   const search = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder } = search;
   const history = useHistory();
@@ -36,9 +48,9 @@ export default function JobsList({ refetch, loading, jobs, total }) {
       dataIndex: "owner",
       key: "owner",
       ellipsis: true,
-      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+      // sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       width: "25%",
-      sortOrder: sortcolumn === "owner" && sortorder,
+      // sortOrder: sortcolumn === "owner" && sortorder,
       render: (text, record) => {
         return record.owner ? (
           <Link to={"/manage/owners/" + record.owner.id}>
@@ -79,6 +91,10 @@ export default function JobsList({ refetch, loading, jobs, total }) {
       render: (text, record) => {
         return record.status || t("general.labels.na");
       },
+      filters: bodyshop.md_ro_statuses.statuses.map((s) => {
+        return { text: s, value: [s] };
+      }),
+      onFilter: (value, record) => value.includes(record.status),
     },
 
     {
@@ -162,9 +178,15 @@ export default function JobsList({ refetch, loading, jobs, total }) {
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
+    console.log("filters :>> ", filters);
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
+    if (filters.status) {
+      search.statusFilters = JSON.stringify(_.flattenDeep(filters.status));
+    } else {
+      delete search.statusFilters;
+    }
     history.push({ search: queryString.stringify(search) });
   };
 
@@ -206,3 +228,4 @@ export default function JobsList({ refetch, loading, jobs, total }) {
     </div>
   );
 }
+export default connect(mapStateToProps, mapDispatchToProps)(JobsList);

client/src/graphql/jobs.queries.js

@@ -1126,18 +1126,20 @@ export const QUERY_JOBS_IN_PRODUCTION = gql`
   }
 `;
 
-export const QUERY_ALL_JOBS_PAGINATED = gql`
+export const QUERY_ALL_JOBS_PAGINATED_STATUS_FILTERED = gql`
-  query QUERY_ALL_JOBS_PAGINATED(
+  query QUERY_ALL_JOBS_PAGINATED_STATUS_FILTERED(
     $search: String
     $offset: Int
     $limit: Int
     $order: [jobs_order_by!]
+    $statusList: [String!]
   ) {
     search_jobs(
       args: { search: $search }
       offset: $offset
       limit: $limit
       order_by: $order
+      where: { status: { _in: $statusList } }
     ) {
       ownr_fn
       ownr_ln
@@ -1154,7 +1156,6 @@ export const QUERY_ALL_JOBS_PAGINATED = gql`
       actual_completion
       actual_delivery
       actual_in
-
       id
       ins_co_nm
       ins_ct_fn
@@ -1178,7 +1179,10 @@ export const QUERY_ALL_JOBS_PAGINATED = gql`
       ded_amt
       vehicleid
     }
-    search_jobs_aggregate(args: { search: $search }) {
+    search_jobs_aggregate(
+      args: { search: $search }
+      where: { status: { _in: $statusList } }
+    ) {
       aggregate {
         count(distinct: true)
       }

client/src/pages/jobs-all/jobs-all.container.jsx

@@ -7,12 +7,12 @@ import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import JobsListPaginated from "../../components/jobs-list-paginated/jobs-list-paginated.component";
-import { QUERY_ALL_JOBS_PAGINATED } from "../../graphql/jobs.queries";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import { QUERY_ALL_JOBS_PAGINATED_STATUS_FILTERED } from "../../graphql/jobs.queries";
 import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
-import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   //bodyshop: selectBodyshop,
@@ -25,24 +25,28 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function AllJobs({ setBreadcrumbs, setSelectedHeader }) {
   const searchParams = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder, search } = searchParams;
+  const { page, sortcolumn, sortorder, search, statusFilters } = searchParams;
 
-  const { loading, error, data, refetch } = useQuery(QUERY_ALL_JOBS_PAGINATED, {
+  const { loading, error, data, refetch } = useQuery(
-    variables: {
+    QUERY_ALL_JOBS_PAGINATED_STATUS_FILTERED,
-      search: search || "",
+    {
-      offset: page ? (page - 1) * 25 : 0,
+      variables: {
-      limit: 25,
+        search: search || "",
-      order: sortcolumn && [
+        offset: page ? (page - 1) * 25 : 0,
-        {
+        limit: 25,
-          [sortcolumn || "created_at"]: sortorder
+        ...(statusFilters ? { statusList: JSON.parse(statusFilters) } : {}),
-            ? sortorder === "descend"
+        order: sortcolumn && [
-              ? "desc"
+          {
-              : "asc"
+            [sortcolumn || "created_at"]: sortorder
-            : "desc",
+              ? sortorder === "descend"
-        },
+                ? "desc"
-      ],
+                : "asc"
-    },
+              : "desc",
-  });
+          },
+        ],
+      },
+    }
+  );
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -56,15 +60,13 @@ export function AllJobs({ setBreadcrumbs, setSelectedHeader }) {
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
     <RbacWrapper action="jobs:list-all">
-      <div>
+      <JobsListPaginated
-        <JobsListPaginated
+        refetch={refetch}
-          refetch={refetch}
+        loading={loading}
-          loading={loading}
+        searchParams={searchParams}
-          searchParams={searchParams}
+        total={data ? data.search_jobs_aggregate.aggregate.count : 0}
-          total={data ? data.search_jobs_aggregate.aggregate.count : 0}
+        jobs={data ? data.search_jobs : []}
-          jobs={data ? data.search_jobs : []}
+      />
-        />
-      </div>
     </RbacWrapper>
   );
 }