- Simplified solution in previous commit

- Additional regression testing fixes

Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-04-11 23:47:02 -04:00
parent f5a914c318
commit 465b9e7177
5 changed files with 458 additions and 470 deletions

View File

@@ -4,7 +4,7 @@ import { useMutation, useQuery } from "@apollo/client";
import { MUTATION_TOGGLE_TASK_COMPLETED, MUTATION_TOGGLE_TASK_DELETED } from "../../graphql/tasks.queries.js";
import { pageLimit } from "../../utils/config.js";
import AlertComponent from "../alert/alert.component.jsx";
import React, { useContext, useEffect } from "react";
import React from "react";
import TaskListComponent from "./task-list.component.jsx";
import { notification } from "antd";
import { useTranslation } from "react-i18next";
@@ -14,7 +14,6 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
import { createStructuredSelector } from "reselect";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
import dayjs from "../../utils/day";
import { SharedModalContext } from "../../providers/shared-modal.provider.jsx";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -41,7 +40,6 @@ export function TaskListContainer({
const searchParams = queryString.parse(useLocation().search);
const { page, sortcolumn, sortorder, deleted, completed, mine } = searchParams;
const dispatch = useDispatch();
const { updateTaskQuery } = useContext(SharedModalContext); // Use the context
const { loading, error, data, refetch } = useQuery(query[Object.keys(query)[0]], {
fetchPolicy: "network-only",
@@ -166,11 +164,6 @@ export function TaskListContainer({
}
};
// Update the Last Task Paginated Query
useEffect(() => {
updateTaskQuery(Object.keys(query)[0]);
}, [query]);
if (error) return <AlertComponent message={error.message} type="error" />;
return (

View File

@@ -1,6 +1,6 @@
import { useMutation, useQuery } from "@apollo/client";
import { Form, Modal, notification } from "antd";
import React, { useContext, useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -15,7 +15,7 @@ import { useLocation, useNavigate } from "react-router-dom";
import { insertAuditTrail } from "../../redux/application/application.actions.js";
import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
import { isEqual } from "lodash";
import { SharedModalContext } from "../../providers/shared-modal.provider.jsx";
import refetchRouteMappings from "./task-upsert-modal.route.mappings.js";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
@@ -46,7 +46,6 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
variables: { id: jobIdState },
skip: !jobIdState
});
const { taskQuery } = useContext(SharedModalContext);
const {
loading: taskLoading,
@@ -108,25 +107,32 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
};
/**
* Task Query Refetch function to determine if we need to refetch the task query
* @returns {boolean}
* Handle refetch queries
* @param taskObject
*/
const taskQueryRefetch = () =>
(!jobid || !joblineid || !billid || !partsorderid || !taskId) &&
taskQuery &&
location.pathname.includes("/manage/tasks");
const handleRefetchQueries = (taskObject) => {
if (query && Object.keys(query).length) {
taskObject.refetchQueries.push(Object.keys(query)[0]);
} else {
refetchRouteMappings.forEach((mapping) => {
if (location.pathname.includes(mapping.route)) {
taskObject.refetchQueries.push(mapping.query);
}
});
}
};
/**
* Handle existing task
* @param id
* @param jobId
* @param values
* @returns {Promise<void>}
*/
const handleExistingTask = async (values) => {
const isAssignedToDirty = values.assigned_to !== existingTask.assigned_to;
const handleExistingTask = async (id, jobId, values) => {
const taskObject = {
variables: {
taskId: existingTask.id,
taskId: id,
task: replaceUndefinedWithNull(values)
},
refetchQueries: []
@@ -136,16 +142,11 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
taskObject.refetchQueries.push({
query: GET_JOB_BY_PK,
variables: {
id: existingTask.jobid
id: jobId
}
});
// We have a relationship query, so we need to refetch the query
if (query && Object.keys(query).length) {
taskObject.refetchQueries.push(Object.keys(query)[0]);
} else if (taskQueryRefetch()) {
taskObject.refetchQueries.push(taskQuery);
}
handleRefetchQueries(taskObject);
const taskData = await updateTask(taskObject);
@@ -196,7 +197,7 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
* @returns {Promise<void>}
*/
const handleNewTask = async (values) => {
const newTaskObject = {
const taskObject = {
variables: {
taskInput: [
{
@@ -210,7 +211,7 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
};
// We need to make sure this is updated everywhere
newTaskObject.refetchQueries.push({
taskObject.refetchQueries.push({
query: GET_JOB_BY_PK,
variables: {
id: values.jobid
@@ -218,15 +219,10 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
});
// We have a relationship query, so we need to refetch the query
if (query && Object.keys(query).length) {
newTaskObject.refetchQueries.push(Object.keys(query)[0]);
} else if (taskQueryRefetch()) {
newTaskObject.refetchQueries.push(taskQuery);
}
handleRefetchQueries(taskObject);
const newTaskData = await insertTask({ ...newTaskObject });
const newTaskData = await insertTask(taskObject);
const newTask = newTaskData?.data?.insert_tasks?.returning[0];
const newTaskID = newTask?.id;
if (!newTaskData.errors) {
insertAuditTrail({
@@ -274,15 +270,16 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
* @returns {Promise<[{jobid, bodyshopid, created_by},...*]>}
*/
const handleFinish = async (formValues) => {
if (existingTask) {
if (existingTask || taskData?.tasks_by_pk) {
const taskSource = existingTask || taskData?.tasks_by_pk;
const dirtyValues = Object.keys(formValues).reduce((acc, key) => {
if (!isEqual(formValues[key], existingTask[key])) {
if (!isEqual(formValues[key], taskSource[key])) {
acc[key] = formValues[key];
}
return acc;
}, {});
try {
await handleExistingTask(dirtyValues);
await handleExistingTask(taskSource.id, taskSource.jobid, dirtyValues);
} catch (e) {
notification["error"]({
message: t("tasks.failures.updated")

View File

@@ -0,0 +1,15 @@
import {
QUERY_ALL_TASKS_PAGINATED,
QUERY_JOB_TASKS_PAGINATED,
QUERY_MY_TASKS_PAGINATED
} from "../../graphql/tasks.queries.js";
const getQueryName = (query) => Object.keys(query)[0];
const refetchRouteMappings = [
{query: getQueryName({QUERY_MY_TASKS_PAGINATED}), route: "/manage/tasks/mytasks"},
{query: getQueryName({QUERY_ALL_TASKS_PAGINATED}), route: "/manage/tasks/alltasks"},
{query: getQueryName({QUERY_JOB_TASKS_PAGINATED}), route: "/manage/jobs"}
];
export default refetchRouteMappings;

View File

@@ -27,7 +27,6 @@ import { setJoyRideFinished } from "../../redux/application/application.actions.
import { selectEnableJoyRide, selectJoyRideSteps } from "../../redux/application/application.selectors.js";
import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
import "./manage.page.styles.scss";
import { SharedModalProvider } from "../../providers/shared-modal.provider.jsx";
const JobsPage = lazy(() => import("../jobs/jobs.page"));
@@ -152,425 +151,423 @@ export function Manage({ conflict, bodyshop, enableJoyRide, joyRideSteps, setJoy
/>
}
>
<SharedModalProvider>
<PaymentModalContainer />
<CardPaymentModalContainer />
<TaskUpsertModalContainer />
<BreadCrumbs />
<BillEnterModalContainer />
<JobCostingModal />
<ReportCenterModal />
<EmailOverlayContainer />
<TimeTicketModalContainer />
<TimeTicketModalTask />
<PrintCenterModalContainer />
<Routes>
<Route path="/_test" element={<TestComponent />} />
<Route path="/" element={<ManageRootPage />} />
<Route
path="/jobs"
element={
<Suspense fallback={<Spin />}>
<JobsPage />
</Suspense>
}
/>
<Route
path="/jobs/:jobId/intake"
element={
<Suspense fallback={<Spin />}>
<JobIntake />
</Suspense>
}
/>
<Route
path="/jobs/:jobId/deliver"
element={
<Suspense fallback={<Spin />}>
<JobDeliver />
</Suspense>
}
/>
<Route
path="/jobs/:jobId/checklist"
element={
<Suspense fallback={<Spin />}>
<JobChecklistView />
</Suspense>
}
/>
<Route
path="/jobs/:jobId/close"
element={
<Suspense fallback={<Spin />}>
<JobsClose />
</Suspense>
}
/>
<Route
path="/jobs/:jobId/admin"
element={
<Suspense fallback={<Spin />}>
<JobsAdmin />
</Suspense>
}
/>
<Route
path="/jobs/all"
element={
<Suspense fallback={<Spin />}>
<AllJobs />
</Suspense>
}
/>
<Route
path="/jobs/ready"
element={
<Suspense fallback={<Spin />}>
<ReadyJobs />
</Suspense>
}
/>
<Route
path="/jobs/new"
element={
<Suspense fallback={<Spin />}>
<JobsCreateContainerPage />
</Suspense>
}
/>
<Route
path="/jobs/:jobId"
element={
<Suspense fallback={<Spin />}>
<JobsDetailPage />
</Suspense>
}
/>
<Route
path="/temporarydocs/"
element={
<Suspense fallback={<Spin />}>
<TempDocs />
</Suspense>
}
/>
<Route
path="/tasks/mytasks"
element={
<Suspense fallback={<Spin />}>
<MyTasksPage />
</Suspense>
}
/>
<Route
path="/tasks/alltasks"
element={
<Suspense fallback={<Spin />}>
<AllTasksPage />
</Suspense>
}
/>
<Route
path="/inventory/"
element={
<Suspense fallback={<Spin />}>
<InventoryListPage />
</Suspense>
}
/>
<Route
path="/courtesycars/"
element={
<Suspense fallback={<Spin />}>
<CourtesyCarsPage />
</Suspense>
}
/>
<Route
path="/courtesycars/new"
element={
<Suspense fallback={<Spin />}>
<CourtesyCarCreateContainer />
</Suspense>
}
/>
<Route
path="/courtesycars/contracts"
element={
<Suspense fallback={<Spin />}>
<ContractsList />
</Suspense>
}
/>
<Route
path="/courtesycars/contracts/new"
element={
<Suspense fallback={<Spin />}>
<ContractCreatePage />
</Suspense>
}
/>
<Route
path="/courtesycars/contracts/:contractId"
element={
<Suspense fallback={<Spin />}>
<ContractDetailPage />
</Suspense>
}
/>
<Route
path="/courtesycars/:ccId"
element={
<Suspense fallback={<Spin />}>
<CourtesyCarDetailContainer />
</Suspense>
}
/>
<Route
path="/profile"
element={
<Suspense fallback={<Spin />}>
<ProfilePage />
</Suspense>
}
/>
<Route
path="/vehicles"
element={
<Suspense fallback={<Spin />}>
<VehiclesContainer />
</Suspense>
}
/>
<Route
path="/production/list"
element={
<Suspense fallback={<Spin />}>
<ProductionListPage />
</Suspense>
}
/>
<Route
path="/production/board"
element={
<Suspense fallback={<Spin />}>
<ProductionBoardPage />
</Suspense>
}
/>
<Route
path="/vehicles/:vehId"
element={
<Suspense fallback={<Spin />}>
<VehiclesDetailContainer />
</Suspense>
}
/>
<Route
path="/bills"
element={
<Suspense fallback={<Spin />}>
<BillsListPage />
</Suspense>
}
/>
<Route
path="/owners"
element={
<Suspense fallback={<Spin />}>
<OwnersContainer />
</Suspense>
}
/>
<Route
path="/owners/:ownerId"
element={
<Suspense fallback={<Spin />}>
<OwnersDetailContainer />
</Suspense>
}
/>
<Route
path="/schedule"
element={
<Suspense fallback={<Spin />}>
<ScheduleContainer />
</Suspense>
}
/>
<Route
path="/available"
element={
<Suspense fallback={<Spin />}>
<JobsAvailablePage />
</Suspense>
}
/>
<Route
path="/shop"
element={
<Suspense fallback={<Spin />}>
<ShopPage />
</Suspense>
}
/>
{
// <Route
// path='/shop/templates'
// element={<ShopTemplates />}
// />
<PaymentModalContainer />
<CardPaymentModalContainer />
<TaskUpsertModalContainer />
<BreadCrumbs />
<BillEnterModalContainer />
<JobCostingModal />
<ReportCenterModal />
<EmailOverlayContainer />
<TimeTicketModalContainer />
<TimeTicketModalTask />
<PrintCenterModalContainer />
<Routes>
<Route path="/_test" element={<TestComponent />} />
<Route path="/" element={<ManageRootPage />} />
<Route
path="/jobs"
element={
<Suspense fallback={<Spin />}>
<JobsPage />
</Suspense>
}
<Route
path="/shop/vendors"
element={
<Suspense fallback={<Spin />}>
<ShopVendorPageContainer />
</Suspense>
}
/>
<Route
path="/shop/csi"
element={
<Suspense fallback={<Spin />}>
<ShopCsiPageContainer />
</Suspense>
}
/>
/>
<Route
path="/jobs/:jobId/intake"
element={
<Suspense fallback={<Spin />}>
<JobIntake />
</Suspense>
}
/>
<Route
path="/jobs/:jobId/deliver"
element={
<Suspense fallback={<Spin />}>
<JobDeliver />
</Suspense>
}
/>
<Route
path="/jobs/:jobId/checklist"
element={
<Suspense fallback={<Spin />}>
<JobChecklistView />
</Suspense>
}
/>
<Route
path="/jobs/:jobId/close"
element={
<Suspense fallback={<Spin />}>
<JobsClose />
</Suspense>
}
/>
<Route
path="/jobs/:jobId/admin"
element={
<Suspense fallback={<Spin />}>
<JobsAdmin />
</Suspense>
}
/>
<Route
path="/jobs/all"
element={
<Suspense fallback={<Spin />}>
<AllJobs />
</Suspense>
}
/>
<Route
path="/jobs/ready"
element={
<Suspense fallback={<Spin />}>
<ReadyJobs />
</Suspense>
}
/>
<Route
path="/jobs/new"
element={
<Suspense fallback={<Spin />}>
<JobsCreateContainerPage />
</Suspense>
}
/>
<Route
path="/jobs/:jobId"
element={
<Suspense fallback={<Spin />}>
<JobsDetailPage />
</Suspense>
}
/>
<Route
path="/temporarydocs/"
element={
<Suspense fallback={<Spin />}>
<TempDocs />
</Suspense>
}
/>
<Route
path="/tasks/mytasks"
element={
<Suspense fallback={<Spin />}>
<MyTasksPage />
</Suspense>
}
/>
<Route
path="/tasks/alltasks"
element={
<Suspense fallback={<Spin />}>
<AllTasksPage />
</Suspense>
}
/>
<Route
path="/inventory/"
element={
<Suspense fallback={<Spin />}>
<InventoryListPage />
</Suspense>
}
/>
<Route
path="/courtesycars/"
element={
<Suspense fallback={<Spin />}>
<CourtesyCarsPage />
</Suspense>
}
/>
<Route
path="/courtesycars/new"
element={
<Suspense fallback={<Spin />}>
<CourtesyCarCreateContainer />
</Suspense>
}
/>
<Route
path="/courtesycars/contracts"
element={
<Suspense fallback={<Spin />}>
<ContractsList />
</Suspense>
}
/>
<Route
path="/courtesycars/contracts/new"
element={
<Suspense fallback={<Spin />}>
<ContractCreatePage />
</Suspense>
}
/>
<Route
path="/courtesycars/contracts/:contractId"
element={
<Suspense fallback={<Spin />}>
<ContractDetailPage />
</Suspense>
}
/>
<Route
path="/courtesycars/:ccId"
element={
<Suspense fallback={<Spin />}>
<CourtesyCarDetailContainer />
</Suspense>
}
/>
<Route
path="/profile"
element={
<Suspense fallback={<Spin />}>
<ProfilePage />
</Suspense>
}
/>
<Route
path="/vehicles"
element={
<Suspense fallback={<Spin />}>
<VehiclesContainer />
</Suspense>
}
/>
<Route
path="/production/list"
element={
<Suspense fallback={<Spin />}>
<ProductionListPage />
</Suspense>
}
/>
<Route
path="/production/board"
element={
<Suspense fallback={<Spin />}>
<ProductionBoardPage />
</Suspense>
}
/>
<Route
path="/vehicles/:vehId"
element={
<Suspense fallback={<Spin />}>
<VehiclesDetailContainer />
</Suspense>
}
/>
<Route
path="/bills"
element={
<Suspense fallback={<Spin />}>
<BillsListPage />
</Suspense>
}
/>
<Route
path="/owners"
element={
<Suspense fallback={<Spin />}>
<OwnersContainer />
</Suspense>
}
/>
<Route
path="/owners/:ownerId"
element={
<Suspense fallback={<Spin />}>
<OwnersDetailContainer />
</Suspense>
}
/>
<Route
path="/schedule"
element={
<Suspense fallback={<Spin />}>
<ScheduleContainer />
</Suspense>
}
/>
<Route
path="/available"
element={
<Suspense fallback={<Spin />}>
<JobsAvailablePage />
</Suspense>
}
/>
<Route
path="/shop"
element={
<Suspense fallback={<Spin />}>
<ShopPage />
</Suspense>
}
/>
{
// <Route
// path='/shop/templates'
// element={<ShopTemplates />}
// />
}
<Route
path="/shop/vendors"
element={
<Suspense fallback={<Spin />}>
<ShopVendorPageContainer />
</Suspense>
}
/>
<Route
path="/shop/csi"
element={
<Suspense fallback={<Spin />}>
<ShopCsiPageContainer />
</Suspense>
}
/>
<Route
path="/accounting/qbo"
element={
<Suspense fallback={<Spin />}>
<AccountingQboCallback />
</Suspense>
}
/>
<Route
path="/accounting/qbo"
element={
<Suspense fallback={<Spin />}>
<AccountingQboCallback />
</Suspense>
}
/>
<Route
path="/accounting/receivables"
element={
<Suspense fallback={<Spin />}>
<AccountingReceivables />
</Suspense>
}
/>
<Route
path="/accounting/payables"
element={
<Suspense fallback={<Spin />}>
<AccountingPayables />
</Suspense>
}
/>
<Route
path="/accounting/payments"
element={
<Suspense fallback={<Spin />}>
<AccountingPayments />
</Suspense>
}
/>
<Route
path="/accounting/exportlogs"
element={
<Suspense fallback={<Spin />}>
<ExportLogs />
</Suspense>
}
/>
<Route
path="/ttapprovals"
element={
<Suspense fallback={<Spin />}>
<TtApprovals />
</Suspense>
}
/>
<Route
path="/partsqueue"
element={
<Suspense fallback={<Spin />}>
<PartsQueue />
</Suspense>
}
/>
<Route
path="/phonebook"
element={
<Suspense fallback={<Spin />}>
<Phonebook />
</Suspense>
}
/>
<Route
path="/accounting/receivables"
element={
<Suspense fallback={<Spin />}>
<AccountingReceivables />
</Suspense>
}
/>
<Route
path="/accounting/payables"
element={
<Suspense fallback={<Spin />}>
<AccountingPayables />
</Suspense>
}
/>
<Route
path="/accounting/payments"
element={
<Suspense fallback={<Spin />}>
<AccountingPayments />
</Suspense>
}
/>
<Route
path="/accounting/exportlogs"
element={
<Suspense fallback={<Spin />}>
<ExportLogs />
</Suspense>
}
/>
<Route
path="/ttapprovals"
element={
<Suspense fallback={<Spin />}>
<TtApprovals />
</Suspense>
}
/>
<Route
path="/partsqueue"
element={
<Suspense fallback={<Spin />}>
<PartsQueue />
</Suspense>
}
/>
<Route
path="/phonebook"
element={
<Suspense fallback={<Spin />}>
<Phonebook />
</Suspense>
}
/>
<Route
path="/payments"
element={
<Suspense fallback={<Spin />}>
<PaymentsAll />
</Suspense>
}
/>
<Route
path="/shiftclock"
element={
<Suspense fallback={<Spin />}>
<ShiftClock />
</Suspense>
}
/>
<Route
path="/scoreboard"
element={
<Suspense fallback={<Spin />}>
<Scoreboard />
</Suspense>
}
/>
<Route
path="/timetickets"
element={
<Suspense fallback={<Spin />}>
<TimeTicketsAll />
</Suspense>
}
/>
<Route
path="/help"
element={
<Suspense fallback={<Spin />}>
<Help />
</Suspense>
}
/>
<Route path="/emailtest" element={<EmailTest />} />
<Route
path="/dashboard"
element={
<Suspense fallback={<Spin />}>
<Dashboard />
</Suspense>
}
/>
<Route
path="/dms"
element={
<Suspense fallback={<Spin />}>
<Dms />
</Suspense>
}
/>
<Route
path="/dmsap"
element={
<Suspense fallback={<Spin />}>
<DmsPayables />
</Suspense>
}
/>
</Routes>
</SharedModalProvider>
<Route
path="/payments"
element={
<Suspense fallback={<Spin />}>
<PaymentsAll />
</Suspense>
}
/>
<Route
path="/shiftclock"
element={
<Suspense fallback={<Spin />}>
<ShiftClock />
</Suspense>
}
/>
<Route
path="/scoreboard"
element={
<Suspense fallback={<Spin />}>
<Scoreboard />
</Suspense>
}
/>
<Route
path="/timetickets"
element={
<Suspense fallback={<Spin />}>
<TimeTicketsAll />
</Suspense>
}
/>
<Route
path="/help"
element={
<Suspense fallback={<Spin />}>
<Help />
</Suspense>
}
/>
<Route path="/emailtest" element={<EmailTest />} />
<Route
path="/dashboard"
element={
<Suspense fallback={<Spin />}>
<Dashboard />
</Suspense>
}
/>
<Route
path="/dms"
element={
<Suspense fallback={<Spin />}>
<Dms />
</Suspense>
}
/>
<Route
path="/dmsap"
element={
<Suspense fallback={<Spin />}>
<DmsPayables />
</Suspense>
}
/>
</Routes>
</Suspense>
);

View File

@@ -1,14 +0,0 @@
import React from "react";
// Create a context
export const SharedModalContext = React.createContext({});
export const SharedModalProvider = ({ children }) => {
const [taskQuery, setTaskQuery] = React.useState([]);
const updateTaskQuery = (query) => {
setTaskQuery(query);
};
return <SharedModalContext.Provider value={{ taskQuery, updateTaskQuery }}>{children}</SharedModalContext.Provider>;
};