admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Fix an issue with not having an upper context to store intermediate values. Thus allowing me to fix the top level 'Add Task'

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-04-11 21:01:38 -04:00
parent 4d1480bb61
commit d7f946ec2a
5 changed files with 448 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

8
client/src/components/task-upsert-modal/task-upsert-modal.container.jsx
View File

@@ -1,6 +1,6 @@
import { useMutation, useQuery } from "@apollo/client"; import { useMutation, useQuery } from "@apollo/client";
import { Form, Modal, notification } from "antd"; import { Form, Modal, notification } from "antd";
import React, { useEffect, useState } from "react"; import React, { useContext, useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
@@ -17,6 +17,7 @@ import dayjs from "../../utils/day";
import { insertAuditTrail } from "../../redux/application/application.actions.js"; import { insertAuditTrail } from "../../redux/application/application.actions.js";
import AuditTrailMapping from "../../utils/AuditTrailMappings.js"; import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
import { isEqual } from "lodash"; import { isEqual } from "lodash";
import { SharedModalContext } from "../../providers/shared-modal.provider.jsx";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser, currentUser: selectCurrentUser,
@@ -46,6 +47,7 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
variables: { id: jobIdState }, variables: { id: jobIdState },
skip: !jobIdState skip: !jobIdState
}); });
const { taskQuery } = useContext(SharedModalContext);
const { const {
loading: taskLoading, loading: taskLoading,
@@ -133,6 +135,8 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
// We have a relationship query, so we need to refetch the query // We have a relationship query, so we need to refetch the query
if (query && Object.keys(query).length) { if (query && Object.keys(query).length) {
taskObject.refetchQueries.push(Object.keys(query)[0]); taskObject.refetchQueries.push(Object.keys(query)[0]);
} else if (taskQuery) {
taskObject.refetchQueries.push(taskQuery);
} }
const taskData = await updateTask(taskObject); const taskData = await updateTask(taskObject);
@@ -203,6 +207,8 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
// We have a relationship query, so we need to refetch the query // We have a relationship query, so we need to refetch the query
if (query && Object.keys(query).length) { if (query && Object.keys(query).length) {
newTaskObject.refetchQueries.push(Object.keys(query)[0]); newTaskObject.refetchQueries.push(Object.keys(query)[0]);
} else if (taskQuery) {
newTaskObject.refetchQueries.push(taskQuery);
} }
const newTaskData = await insertTask(newTaskObject); const newTaskData = await insertTask(newTaskObject);

2
client/src/graphql/jobs.queries.js
View File

@@ -2087,7 +2087,7 @@ export const DELETE_JOB = gql`
`; `;
export const QUERY_GET_TASKS_JOB_DETAILS_BY_ID = gql` export const QUERY_GET_TASKS_JOB_DETAILS_BY_ID = gql`
query GetTasksJobDetailsById($id: uuid!) { query QUERY_GET_TASKS_JOB_DETAILS_BY_ID($id: uuid!) {
jobs_by_pk(id: $id) { jobs_by_pk(id: $id) {
id id
joblines { joblines {

832
client/src/pages/manage/manage.page.component.jsx
View File

@@ -27,6 +27,7 @@ import { setJoyRideFinished } from "../../redux/application/application.actions.
import { selectEnableJoyRide, selectJoyRideSteps } from "../../redux/application/application.selectors.js"; import { selectEnableJoyRide, selectJoyRideSteps } from "../../redux/application/application.selectors.js";
import InstanceRenderManager from "../../utils/instanceRenderMgr.js"; import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
import "./manage.page.styles.scss"; import "./manage.page.styles.scss";
import { SharedModalProvider } from "../../providers/shared-modal.provider.jsx";
const JobsPage = lazy(() => import("../jobs/jobs.page")); const JobsPage = lazy(() => import("../jobs/jobs.page"));
@@ -151,424 +152,425 @@ export function Manage({ conflict, bodyshop, enableJoyRide, joyRideSteps, setJoy
/> />
} }
> >
<PaymentModalContainer /> <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 />}
// />
}
<Route
path="/shop/vendors"
element={
<Suspense fallback={<Spin />}>
<ShopVendorPageContainer />
</Suspense>
}
/>
<Route
path="/shop/csi"
element={
<Suspense fallback={<Spin />}>
<ShopCsiPageContainer />
</Suspense>
}
/>
<CardPaymentModalContainer /> <Route
<TaskUpsertModalContainer /> path="/accounting/qbo"
<BreadCrumbs /> element={
<BillEnterModalContainer /> <Suspense fallback={<Spin />}>
<JobCostingModal /> <AccountingQboCallback />
<ReportCenterModal /> </Suspense>
<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 />}
// />
}
<Route
path="/shop/vendors"
element={
<Suspense fallback={<Spin />}>
<ShopVendorPageContainer />
</Suspense>
}
/>
<Route
path="/shop/csi"
element={
<Suspense fallback={<Spin />}>
<ShopCsiPageContainer />
</Suspense>
}
/>
<Route <Route
path="/accounting/qbo" path="/accounting/receivables"
element={ element={
<Suspense fallback={<Spin />}> <Suspense fallback={<Spin />}>
<AccountingQboCallback /> <AccountingReceivables />
</Suspense> </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 <Route
path="/accounting/receivables" path="/payments"
element={ element={
<Suspense fallback={<Spin />}> <Suspense fallback={<Spin />}>
<AccountingReceivables /> <PaymentsAll />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path="/accounting/payables" path="/shiftclock"
element={ element={
<Suspense fallback={<Spin />}> <Suspense fallback={<Spin />}>
<AccountingPayables /> <ShiftClock />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path="/accounting/payments" path="/scoreboard"
element={ element={
<Suspense fallback={<Spin />}> <Suspense fallback={<Spin />}>
<AccountingPayments /> <Scoreboard />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path="/accounting/exportlogs" path="/timetickets"
element={ element={
<Suspense fallback={<Spin />}> <Suspense fallback={<Spin />}>
<ExportLogs /> <TimeTicketsAll />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path="/ttapprovals" path="/help"
element={ element={
<Suspense fallback={<Spin />}> <Suspense fallback={<Spin />}>
<TtApprovals /> <Help />
</Suspense> </Suspense>
} }
/> />
<Route <Route path="/emailtest" element={<EmailTest />} />
path="/partsqueue" <Route
element={ path="/dashboard"
<Suspense fallback={<Spin />}> element={
<PartsQueue /> <Suspense fallback={<Spin />}>
</Suspense> <Dashboard />
} </Suspense>
/> }
<Route />
path="/phonebook" <Route
element={ path="/dms"
<Suspense fallback={<Spin />}> element={
<Phonebook /> <Suspense fallback={<Spin />}>
</Suspense> <Dms />
} </Suspense>
/> }
/>
<Route <Route
path="/payments" path="/dmsap"
element={ element={
<Suspense fallback={<Spin />}> <Suspense fallback={<Spin />}>
<PaymentsAll /> <DmsPayables />
</Suspense> </Suspense>
} }
/> />
<Route </Routes>
path="/shiftclock" </SharedModalProvider>
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> </Suspense>
); );

14
client/src/providers/shared-modal.provider.jsx Normal file
View File

@@ -0,0 +1,14 @@
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>;
};