From 0c842e0e1568e3f0ac3762cc97d36aaf14af4da4 Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Tue, 2 Apr 2024 17:20:00 -0400 Subject: [PATCH] - Progress Commit Signed-off-by: Dave Richer --- .../task-upsert-modal.component.jsx | 1 - .../task-upsert-modal.container.jsx | 21 ++++++++++++++-- client/src/graphql/tasks.queries.js | 8 ++++++ .../src/pages/tasks/allTasksPageContainer.jsx | 25 ++++++++++++++++++- .../src/pages/tasks/myTasksPageContainer.jsx | 2 +- 5 files changed, 52 insertions(+), 5 deletions(-) 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 a52c2a11d..04f3dbafc 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 @@ -32,7 +32,6 @@ export function TaskUpsertModalComponent({ selectedJobDetails, loading, error, - data }) { const {t} = useTranslation(); 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 7bee7f1bc..7b798628f 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 @@ -4,7 +4,11 @@ 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 { + MUTATION_INSERT_NEW_TASK, + MUTATION_UPDATE_TASK, + QUERY_GET_TASK_BY_ID +} from "../../graphql/tasks.queries"; import {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"; @@ -31,7 +35,7 @@ export function TaskUpsertModalContainer({ const [insertTask] = useMutation(MUTATION_INSERT_NEW_TASK); const [updateTask] = useMutation(MUTATION_UPDATE_TASK); const {open, context, actions} = taskUpsert; - const {jobid, existingTask, joblineid, billid, partsorderid} = context; + const {jobid, joblineid, billid, partsorderid, taskId, existingTask} = context; const {refetch} = actions; const [form] = Form.useForm(); const [selectedJobId, setSelectedJobId] = useState(null); @@ -47,6 +51,19 @@ export function TaskUpsertModalContainer({ skip: !jobIdState, }); + const {loading: taskLoading, error: taskError, data: taskData} = useQuery(QUERY_GET_TASK_BY_ID, { + variables: {id: taskId}, + skip: !taskId, + }); + + // This takes care of the ability to deep link a task from the URL (Fills in form fields) + useEffect(() => { + if (!taskLoading && !taskError && taskData && taskData?.tasks_by_pk) { + form.setFieldsValue(taskData.tasks_by_pk); + setSelectedJobId(taskData.tasks_by_pk.jobid); + } + }, [taskLoading, taskError, taskData]); + /** * 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 */ diff --git a/client/src/graphql/tasks.queries.js b/client/src/graphql/tasks.queries.js index 3e702b55d..02b0c1c8d 100644 --- a/client/src/graphql/tasks.queries.js +++ b/client/src/graphql/tasks.queries.js @@ -64,6 +64,14 @@ const PARTIAL_TASK_FIELDS = gql` } `; +export const QUERY_GET_TASK_BY_ID = gql` + ${PARTIAL_TASK_FIELDS} + query QUERY_GET_TASK_BY_ID($id: uuid!) { + tasks_by_pk(id: $id) { + ...TaskFields + } + }`; + export const QUERY_ALL_TASKS_PAGINATED = gql` ${PARTIAL_TASK_FIELDS} query QUERY_ALL_TASKS_PAGINATED( diff --git a/client/src/pages/tasks/allTasksPageContainer.jsx b/client/src/pages/tasks/allTasksPageContainer.jsx index b9baf7964..7c11b2dfb 100644 --- a/client/src/pages/tasks/allTasksPageContainer.jsx +++ b/client/src/pages/tasks/allTasksPageContainer.jsx @@ -8,6 +8,7 @@ import {setBreadcrumbs, setSelectedHeader} from "../../redux/application/applica import InstanceRenderManager from "../../utils/instanceRenderMgr.js"; import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors.js"; import TaskPageTypes from "./taskPageTypes.jsx"; +import {setModalContext} from "../../redux/modals/modals.actions.js"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, @@ -17,9 +18,16 @@ const mapStateToProps = createStructuredSelector({ const mapDispatchToProps = (dispatch) => ({ setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)), setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), + setTaskUpsertContext: (context) => dispatch(setModalContext({context, modal: 'taskUpsert'})), }); -export function MyTasksPageContainer({bodyshop, currentUser, setBreadcrumbs, setSelectedHeader, query}) { +export function MyTasksPageContainer({ + bodyshop, + currentUser, + setBreadcrumbs, + setSelectedHeader, + setTaskUpsertContext + }) { const {t} = useTranslation(); useEffect(() => { document.title = t("titles.all_tasks", { @@ -37,6 +45,21 @@ export function MyTasksPageContainer({bodyshop, currentUser, setBreadcrumbs, se },]); }, [t, setBreadcrumbs, setSelectedHeader]); + // This takes care of the ability to deep link a task from the URL (Dispatches the modal) + useEffect(() => { + // Check for a query string in the URL + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + const taskId = urlParams.get('taskid'); + if (taskId) { + setTaskUpsertContext({ + context: { + taskId, + }, + }); + } + }, [setTaskUpsertContext]); + return ( ); diff --git a/client/src/pages/tasks/myTasksPageContainer.jsx b/client/src/pages/tasks/myTasksPageContainer.jsx index 42974f72c..77b7f3151 100644 --- a/client/src/pages/tasks/myTasksPageContainer.jsx +++ b/client/src/pages/tasks/myTasksPageContainer.jsx @@ -19,7 +19,7 @@ const mapDispatchToProps = (dispatch) => ({ setSelectedHeader: (key) => dispatch(setSelectedHeader(key)), }); -export function MyTasksPageContainer({bodyshop, currentUser, setBreadcrumbs, setSelectedHeader, query}) { +export function MyTasksPageContainer({bodyshop, currentUser, setBreadcrumbs, setSelectedHeader}) { const {t} = useTranslation(); useEffect(() => { document.title = t("titles.my_tasks", {