Added group verify to the reporting page RPS-74

src/components/molecules/group-verify-switch/group-verify-switch.component.jsx

@@ -0,0 +1,50 @@
+import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
+import { message, Switch } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_JOB } from "../../../graphql/jobs.queries";
+import { toggleGroupVerified } from "../../../redux/reporting/reporting.actions";
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleGroupVerified: (jobId) => dispatch(toggleGroupVerified(jobId)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(GroupVerifySwitch);
+
+export function GroupVerifySwitch({
+  job,
+  loading,
+  loadingCallback,
+  toggleGroupVerified,
+}) {
+  const [updateJob] = useMutation(UPDATE_JOB);
+
+  const handleVerifyGroup = async (val) => {
+    if (loadingCallback) loadingCallback(true);
+    const result = await updateJob({
+      variables: { jobId: job.id, job: { group_verified: val } },
+    });
+
+    if (!result.errors) {
+      message.success("Vehicle group updated.");
+      toggleGroupVerified(job.id);
+    } else {
+      message.error("Error updating job.");
+    }
+    if (loadingCallback) loadingCallback(false);
+  };
+
+  return (
+    <Switch
+      checkedChildren={<CheckOutlined />}
+      unCheckedChildren={<CloseOutlined />}
+      disabled={loading}
+      checked={job.group_verified}
+      onChange={handleVerifyGroup}
+    />
+  );
+}

src/components/molecules/job-group/job-group.molecule.jsx

@@ -1,18 +1,13 @@
-import {
-  AlertFilled,
-  DownOutlined,
-  LoadingOutlined,
-  CloseOutlined,
-  CheckOutlined,
-} from "@ant-design/icons";
+import { AlertFilled, DownOutlined, LoadingOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Dropdown, Menu, message, Space, Switch } from "antd";
+import { Dropdown, Menu, message, Space } from "antd";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB } from "../../../graphql/jobs.queries";
 import ipcTypes from "../../../ipc.types";
 import { selectBodyshop } from "../../../redux/user/user.selectors";
+import GroupVerifySwitch from "../group-verify-switch/group-verify-switch.component";
 import JobsGroupModalMolecule from "../jobs-group-modal/jobs-group-modal.molecule";
 const { ipcRenderer } = window;
 
@@ -49,20 +44,6 @@ export function JobGroupMolecule({ bodyshop, jobId, group, job }) {
     setLoading(false);
   };
 
-  const handleVerifyGroup = async (val) => {
-    setLoading(true);
-    const result = await updateJob({
-      variables: { jobId: jobId, job: { group_verified: val } },
-    });
-
-    if (!result.errors) {
-      message.success("Vehicle group updated.");
-    } else {
-      message.error("Error updating job.");
-    }
-    setLoading(false);
-  };
-
   const menu = (
     <Menu onClick={handleMenuClick}>
       {bodyshop.groups.map((g, idx) => (
@@ -87,12 +68,10 @@ export function JobGroupMolecule({ bodyshop, jobId, group, job }) {
       )}
       {group && (
         <div style={{ marginLeft: ".2rem" }}>
-          <Switch
-            checkedChildren={<CheckOutlined />}
-            unCheckedChildren={<CloseOutlined />}
-            disabled={loading}
-            defaultChecked={job.group_verified}
-            onChange={handleVerifyGroup}
+          <GroupVerifySwitch
+            job={job}
+            loading={loading}
+            loadingCallback={setLoading}
           />
         </div>
       )}

src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx

@@ -13,6 +13,7 @@ import {
 } from "../../../redux/reporting/reporting.selectors";
 import { alphaSort } from "../../../util/sorters";
 import VehicleGroupAlertAtom from "../../atoms/vehicle-group-alert/vehicle-group-alert.atom";
+import GroupVerifySwitch from "../group-verify-switch/group-verify-switch.component";
 
 const { ipcRenderer } = window;
 
@@ -99,9 +100,7 @@ export function ReportingJobsListMolecule({
       dataIndex: "group_verified",
       key: "group_verified",
       sorter: (a, b) => a.group_verified - b.group_verified,
-      render: (text, record) => (
-        <Checkbox disabled={true} checked={record.group_verified} />
-      ),
+      render: (text, record) => <GroupVerifySwitch job={record} />,
     },
     {
       title: "$ (Act./Target)",

src/components/pages/reporting/reporting.page.jsx

@@ -20,7 +20,6 @@ const mapStateToProps = createStructuredSelector({
   error: selectReportingError,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
   setSelectedJobId: (id) => dispatch(setSelectedJobId(id)),
 });
 

src/redux/reporting/reporting.actions.js

@@ -22,3 +22,7 @@ export const setReportingError = (data) => ({
   type: ReportingActionTypes.SET_REPORTING_ERROR,
   payload: data,
 });
+export const toggleGroupVerified = (jobId) => ({
+  type: ReportingActionTypes.TOGGLE_GROUP_VERIFIED,
+  payload: jobId,
+});

src/redux/reporting/reporting.reducer.js

@@ -28,6 +28,17 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
       return { ...state, data: action.payload };
     case ReportingActionTypes.SET_SCORE_CARD:
       return { ...state, loading: false, scoreCard: action.payload };
+    case ReportingActionTypes.TOGGLE_GROUP_VERIFIED:
+      return {
+        ...state,
+        data: state.data.map((d) => {
+          if (d.id === action.payload) {
+            return { ...d, group_verified: !d.group_verified };
+          } else {
+            return d;
+          }
+        }),
+      };
     default:
       return state;
   }

src/redux/reporting/reporting.types.js

@@ -4,5 +4,6 @@ const ReportingActionTypes = {
   SET_REPORTING_DATA: "SET_REPORTING_DATA",
   SET_SCORE_CARD: "SET_SCORE_CARD",
   SET_REPORTING_ERROR: "SET_REPORTING_ERROR",
+  TOGGLE_GROUP_VERIFIED: "TOGGLE_GROUP_VERIFIED",
 };
 export default ReportingActionTypes;