From 321ec92d9186758519d155e20741b9c80a86b109 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Wed, 17 Feb 2021 17:40:31 -0800 Subject: [PATCH] Added group verify to the reporting page RPS-74 --- .../group-verify-switch.component.jsx | 50 +++++++++++++++++++ .../job-group/job-group.molecule.jsx | 35 +++---------- .../reporting-jobs-list.molecule.jsx | 5 +- .../pages/reporting/reporting.page.jsx | 1 - src/redux/reporting/reporting.actions.js | 4 ++ src/redux/reporting/reporting.reducer.js | 11 ++++ src/redux/reporting/reporting.types.js | 1 + 7 files changed, 75 insertions(+), 32 deletions(-) create mode 100644 src/components/molecules/group-verify-switch/group-verify-switch.component.jsx diff --git a/src/components/molecules/group-verify-switch/group-verify-switch.component.jsx b/src/components/molecules/group-verify-switch/group-verify-switch.component.jsx new file mode 100644 index 0000000..130a251 --- /dev/null +++ b/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 ( + } + unCheckedChildren={} + disabled={loading} + checked={job.group_verified} + onChange={handleVerifyGroup} + /> + ); +} diff --git a/src/components/molecules/job-group/job-group.molecule.jsx b/src/components/molecules/job-group/job-group.molecule.jsx index 56313f0..f8a6862 100644 --- a/src/components/molecules/job-group/job-group.molecule.jsx +++ b/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 = ( {bodyshop.groups.map((g, idx) => ( @@ -87,12 +68,10 @@ export function JobGroupMolecule({ bodyshop, jobId, group, job }) { )} {group && (
- } - unCheckedChildren={} - disabled={loading} - defaultChecked={job.group_verified} - onChange={handleVerifyGroup} +
)} diff --git a/src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx b/src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx index 77c37d4..3ad3e41 100644 --- a/src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx +++ b/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) => ( - - ), + render: (text, record) => , }, { title: "$ (Act./Target)", diff --git a/src/components/pages/reporting/reporting.page.jsx b/src/components/pages/reporting/reporting.page.jsx index 807ec27..5c6aa85 100644 --- a/src/components/pages/reporting/reporting.page.jsx +++ b/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)), }); diff --git a/src/redux/reporting/reporting.actions.js b/src/redux/reporting/reporting.actions.js index a7aa440..e42ab79 100644 --- a/src/redux/reporting/reporting.actions.js +++ b/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, +}); diff --git a/src/redux/reporting/reporting.reducer.js b/src/redux/reporting/reporting.reducer.js index 3d36428..d4d24da 100644 --- a/src/redux/reporting/reporting.reducer.js +++ b/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; } diff --git a/src/redux/reporting/reporting.types.js b/src/redux/reporting/reporting.types.js index 18c0755..f1fe598 100644 --- a/src/redux/reporting/reporting.types.js +++ b/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;