From 595159f24dd0b710ec59b04b955e4fb1e7c1e3c5 Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Tue, 26 Mar 2024 19:59:30 -0400 Subject: [PATCH] - Progress commit Signed-off-by: Dave Richer --- .../task-list/task-list.container.jsx | 8 - .../task-upsert-modal.component.jsx | 143 ++++++++++++------ .../task-upsert-modal.container.jsx | 97 ++++++++++-- client/src/graphql/jobs.queries.js | 38 +++++ 4 files changed, 218 insertions(+), 68 deletions(-) diff --git a/client/src/components/task-list/task-list.container.jsx b/client/src/components/task-list/task-list.container.jsx index bd5095fdc..3efab337b 100644 --- a/client/src/components/task-list/task-list.container.jsx +++ b/client/src/components/task-list/task-list.container.jsx @@ -46,14 +46,6 @@ export default function TaskListContainer({bodyshop, currentUser}) { refetch().catch((e) => { console.error(`Something went wrong fetching tasks: ${e.message || ''}`); }); }; - - window.addEventListener('taskUpdated', handleTaskUpdated); - window.addEventListener('taskCreated', handleTaskUpdated); - - return () => { - window.removeEventListener('taskUpdated', handleTaskUpdated); - window.removeEventListener('taskCreated', handleTaskUpdated); - }; }, [refetch]); /** diff --git a/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx b/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx index 44262b68d..05ac709f7 100644 --- a/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx +++ b/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx @@ -1,10 +1,12 @@ import {Col, Form, Input, Row, Select, Switch} from "antd"; -import React from "react"; +import React, {useCallback} from "react"; import {useTranslation} from "react-i18next"; import {FormDatePicker} from "../form-date-picker/form-date-picker.component.jsx"; import {createStructuredSelector} from "reselect"; import {selectBodyshop} from "../../redux/user/user.selectors.js"; + import {connect} from "react-redux"; +import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, @@ -18,12 +20,54 @@ export default connect( )(TaskUpsertModalComponent); -export function TaskUpsertModalComponent({form, bodyshop}) { +export function TaskUpsertModalComponent({ + form, + bodyshop, + selectedJobId, + setSelectedJobId, + selectedJobDetails, + loading, + error, + data + }) { const {t} = useTranslation(); + + console.dir(data) + + if (loading || error) return ; + return ( <> - + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - + {selectedJobDetails?.joblines?.map((jobline) => ( + + {jobline.line_desc} + + ))} @@ -116,7 +165,7 @@ export function TaskUpsertModalComponent({form, bodyshop}) { label={t("tasks.fields.partsorderid")} name="partsorderid" > - {/* Add your options here */} @@ -126,7 +175,7 @@ export function TaskUpsertModalComponent({form, bodyshop}) { label={t("tasks.fields.billid")} name="billid" > - {/* Add your options here */} diff --git a/client/src/components/task-upsert-modal/task-upsert-modal.container.jsx b/client/src/components/task-upsert-modal/task-upsert-modal.container.jsx index d091b595c..7a5e0ddf6 100644 --- a/client/src/components/task-upsert-modal/task-upsert-modal.container.jsx +++ b/client/src/components/task-upsert-modal/task-upsert-modal.container.jsx @@ -1,10 +1,14 @@ -import {useMutation} from "@apollo/client"; +import {useMutation, useQuery} from "@apollo/client"; import {Form, Modal, notification} from "antd"; -import React, {useEffect} from "react"; +import React, {useEffect, useState} from "react"; import {useTranslation} from "react-i18next"; import {connect} from "react-redux"; import {createStructuredSelector} from "reselect"; import {MUTATION_INSERT_NEW_TASK, MUTATION_UPDATE_TASK} from "../../graphql/tasks.queries"; +import { + QUERY_GET_TASKS_JOB_DETAILS, + QUERY_GET_TASKS_JOB_DETAILS_BY_ID +} from "../../graphql/jobs.queries.js"; import {toggleModalVisible} from "../../redux/modals/modals.actions"; import {selectTaskUpsert} from "../../redux/modals/modals.selectors"; import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors"; @@ -33,7 +37,33 @@ export function TaskUpsertModalContainer({ const {jobId, existingTask} = context; const {refetch} = actions; const [form] = Form.useForm(); + const [selectedJobId, setSelectedJobId] = useState(null); + const [selectedJobDetails, setSelectedJobDetails] = useState(null); + const [jobIdState, setJobIdState] = useState(null); + + const { + loading: jobDetailsLoading, + error: jobDetailsError, + data: jobDetailsData + } = useQuery(QUERY_GET_TASKS_JOB_DETAILS_BY_ID, { + variables: {id: jobIdState}, + skip: !jobIdState, // Skip the query if jobIdState is null + }); + const {loading, error, data} = useQuery(QUERY_GET_TASKS_JOB_DETAILS); + + /** + * Set the selected job id when the modal is opened and jobId is passed as a prop or when an existing task is passed as a prop + */ + useEffect(() => { + if (jobId || existingTask?.id) { + setSelectedJobId(jobId || existingTask.jobid); + } + }, [jobId, existingTask]); + + /** + * Set the form values when the modal is opened and an existing task is passed as a prop + */ useEffect(() => { if (existingTask && open) { form.setFieldsValue(existingTask); @@ -42,37 +72,72 @@ export function TaskUpsertModalContainer({ } }, [existingTask, form, open]); + /** + * Reset the form values when the selected job id changes + */ + useEffect(() => { + form.setFieldsValue({ + joblineid: undefined, + billid: undefined, + partsorderid: undefined, + }); + }, [selectedJobId, form]); + + /** + * Set the job id state when the selected job id changes + */ + useEffect(() => { + if (selectedJobId) { + // Update the state variable instead of calling useQuery + setJobIdState(selectedJobId); + } + }, [selectedJobId]); + + /** + * Set the selected job details when the job details query is successful + */ + useEffect(() => { + if (!jobDetailsLoading && !jobDetailsError && jobDetailsData) { + setSelectedJobDetails(jobDetailsData.jobs_by_pk); + } + }, [jobDetailsLoading, jobDetailsError, jobDetailsData]); + + /** + * Handle the form submit + * @param formValues + * @returns {Promise<[{jobid, bodyshopid, created_by},...*]>} + */ const handleFinish = async (formValues) => { const {...values} = formValues; if (existingTask) { - updateTask({ + await updateTask({ variables: { taskId: existingTask.id, task: values, + jobid: selectedJobId, }, - }).then((r) => { - notification["success"]({ - message: t("tasks.successes.updated"), - }); }); - if (refetch) refetch(); + + notification["success"]({ + message: t("tasks.successes.updated"), + }); + if (refetch) await refetch(); toggleModalVisible(); } else { await insertTask({ variables: { taskInput: [ - {...values, jobid: jobId, created_by: currentUser.email, bodyshopid: bodyshop.id}, + {...values, jobid: selectedJobId, created_by: currentUser.email, bodyshopid: bodyshop.id}, ], }, update(cache) { cache.modify({ - fields: { tasks(existingTasks) { return [{ ...values, - jobid: jobId, + jobid: selectedJobId, created_by: currentUser.email, bodyshopid: bodyshop.id }, ...existingTasks] @@ -82,7 +147,7 @@ export function TaskUpsertModalContainer({ }, }); - if (refetch) refetch(); + if (refetch) await refetch(); form.resetFields(); toggleModalVisible(); notification["success"]({ @@ -96,16 +161,22 @@ export function TaskUpsertModalContainer({ title={existingTask ? t("tasks.actions.edit") : t("tasks.actions.new")} open={open} okText={t("general.actions.save")} + width="50%" onOk={() => { form.submit(); }} onCancel={() => { toggleModalVisible(); }} + destroyOnClose >
- + + ); diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js index 174f6ad04..a2a2e43eb 100644 --- a/client/src/graphql/jobs.queries.js +++ b/client/src/graphql/jobs.queries.js @@ -2130,6 +2130,44 @@ export const DELETE_JOB = gql` } `; +export const QUERY_GET_TASKS_JOB_DETAILS_BY_ID = gql` + query GetTasksJobDetailsById($id: uuid!) { + jobs_by_pk(id: $id) { + id + joblines { + id + line_desc + } + bills { + id + vendor { + name + } + invoice_number + } + parts_orders { + id + vendor { + name + } + order_number + } + } + } +`; + +export const QUERY_GET_TASKS_JOB_DETAILS = gql` + query GetTasksJobDetails { + jobs { + id + ro_number + ownr_fn + ownr_ln + ownr_co_nm + } + } +`; + export const GET_JOB_FOR_CC_CONTRACT = gql` query GET_JOB_FOR_CC_CONTRACT($id: uuid!) { jobs_by_pk(id: $id) {