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

- Progress commit

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-03-26 19:59:30 -04:00
parent 3bf1ec25c1
commit 595159f24d
4 changed files with 218 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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]);
/**

143
client/src/components/task-upsert-modal/task-upsert-modal.component.jsx
View File

@@ -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 <LoadingSkeleton active/>;
return (
<>
<Row gutter={[16, 16]}>
<Col span={8}>
<Col span={18}>
<Form.Item
label={t("tasks.fields.title")}
name="title"
rules={[
{
required: true,
},
]}
>
<Input placeholder={t("tasks.labels.titleplaceholder")}/>
</Form.Item>
</Col>
<Col span={4}>
<Form.Item
label={t("tasks.fields.priority")}
name="priority"
initialValue={1}
>
<Select
options={[
{value: 3, label: t("tasks.fields.priority.low")},
{value: 2, label: t("tasks.fields.priority.medium")},
{value: 1, label: t("tasks.fields.priority.high")},
]}
/>
</Form.Item>
</Col>
<Col span={2}>
<Form.Item
label={t("tasks.fields.completed")}
name="completed"
@@ -32,6 +76,8 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
<Switch/>
</Form.Item>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={8}>
<Form.Item
label={t("tasks.fields.assigned_to")}
@@ -47,45 +93,6 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label={t("tasks.fields.priority")}
name="priority"
initialValue={1}
>
<Select
options={[
{value: 3, label: t("tasks.fields.priority.low")},
{value: 2, label: t("tasks.fields.priority.medium")},
{value: 1, label: t("tasks.fields.priority.high")},
]}
/>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label={t("tasks.fields.title")}
name="title"
rules={[
{
required: true,
},
]}
>
<Input placeholder={t("tasks.labels.titleplaceholder")}/>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label={t("tasks.fields.description")}
name="description"
>
<Input.TextArea
rows={4}
placeholder={t("tasks.labels.descriptionplaceholder")}
/>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label={t("tasks.fields.due_date")}
name="due_date"
@@ -93,7 +100,7 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
<FormDatePicker/>
</Form.Item>
</Col>
<Col span={24}>
<Col span={8}>
<Form.Item
label={t("tasks.fields.remind_at")}
name="remind_at"
@@ -101,13 +108,55 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
<FormDatePicker/>
</Form.Item>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={24}>
<Form.Item
label={t("tasks.fields.description")}
name="description"
>
<Input.TextArea
rows={8}
placeholder={t("tasks.labels.descriptionplaceholder")}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={24}>
<Form.Item
name="jobid"
label="Job ID"
rules={[
{
required: true,
message: 'Please select a Job ID',
},
]}
>
<Select placeholder="Select a Job ID" defaultValue={selectedJobId} onSelect={setSelectedJobId}>
{data.jobs.map((job) => (
<Select.Option key={job.id} value={job.id}>
{job.ro_number}
</Select.Option>
))}
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={8}>
<Form.Item
label={t("tasks.fields.joblineid")}
name="joblineid"
>
<Select placeholder={t("tasks.labels.joblineidplaceholder")}>
{/* Add your options here */}
<Select placeholder={t("tasks.labels.joblineidplaceholder")} disabled={!selectedJobDetails}>
{selectedJobDetails?.joblines?.map((jobline) => (
<Select.Option key={jobline.id} value={jobline.id}>
{jobline.line_desc}
</Select.Option>
))}
</Select>
</Form.Item>
</Col>
@@ -116,7 +165,7 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
label={t("tasks.fields.partsorderid")}
name="partsorderid"
>
<Select placeholder={t("tasks.labels.partsorderidplaceholder")}>
<Select placeholder={t("tasks.labels.partsorderidplaceholder")} disabled={!selectedJobDetails}>
{/* Add your options here */}
</Select>
</Form.Item>
@@ -126,7 +175,7 @@ export function TaskUpsertModalComponent({form, bodyshop}) {
label={t("tasks.fields.billid")}
name="billid"
>
<Select placeholder={t("tasks.labels.billidplaceholder")}>
<Select placeholder={t("tasks.labels.billidplaceholder")} disabled={!selectedJobDetails}>
{/* Add your options here */}
</Select>
</Form.Item>

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

@@ -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
>
<Form form={form} onFinish={handleFinish} layout="vertical">
<TaskUpsertModalComponent form={form}/>
<TaskUpsertModalComponent form={form} loading={loading} error={error} data={data}
selectedJobId={setSelectedJobId}
setSelectedJobId={setSelectedJobId}
selectedJobDetails={selectedJobDetails}/>
</Form>
</Modal>
);

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

@@ -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) {