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-20 22:19:52 -04:00
parent f31ae9ac6d
commit ab2323e5c1
11 changed files with 454 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
client/src/components/header/header.component.jsx
View File

@@ -17,6 +17,7 @@ import Icon, {
LineChartOutlined,
PaperClipOutlined,
PhoneOutlined,
PlusCircleOutlined,
QuestionCircleFilled,
ScheduleOutlined,
SettingOutlined,
@@ -25,11 +26,11 @@ import Icon, {
UnorderedListOutlined,
UserOutlined,
} from '@ant-design/icons';
import { useSplitTreatments } from '@splitsoftware/splitio-react';
import { Layout, Menu, Switch, Tooltip } from 'antd';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { BsKanban } from 'react-icons/bs';
import {useSplitTreatments} from '@splitsoftware/splitio-react';
import {Layout, Menu, Switch, Tooltip} from 'antd';
import React, {useEffect, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {BsKanban} from 'react-icons/bs';
import {
FaCalendarAlt,
FaCarCrash,
@@ -37,23 +38,23 @@ import {
FaFileInvoiceDollar,
FaTasks
} from 'react-icons/fa';
import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from 'react-icons/gi';
import { IoBusinessOutline } from 'react-icons/io5';
import { RiSurveyLine } from 'react-icons/ri';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { createStructuredSelector } from 'reselect';
import {GiPayMoney, GiPlayerTime, GiSettingsKnobs} from 'react-icons/gi';
import {IoBusinessOutline} from 'react-icons/io5';
import {RiSurveyLine} from 'react-icons/ri';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {createStructuredSelector} from 'reselect';
import {
selectRecentItems,
selectSelectedHeader,
} from '../../redux/application/application.selectors';
import { setModalContext } from '../../redux/modals/modals.actions';
import { signOutStart } from '../../redux/user/user.actions';
import { selectBodyshop, selectCurrentUser } from '../../redux/user/user.selectors';
import { FiLogOut } from 'react-icons/fi';
import { checkBeta, handleBeta, setBeta } from '../../utils/betaHandler';
import {setModalContext} from '../../redux/modals/modals.actions';
import {signOutStart} from '../../redux/user/user.actions';
import {selectBodyshop, selectCurrentUser} from '../../redux/user/user.selectors';
import {FiLogOut} from 'react-icons/fi';
import {checkBeta, handleBeta, setBeta} from '../../utils/betaHandler';
import InstanceRenderManager from '../../utils/instanceRenderMgr';
import { HasFeatureAccess } from '../feature-wrapper/feature-wrapper.component';
import {HasFeatureAccess} from '../feature-wrapper/feature-wrapper.component';
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
@@ -73,6 +74,10 @@ const mapDispatchToProps = (dispatch) => ({
signOutStart: () => dispatch(signOutStart()),
setCardPaymentContext: (context) =>
dispatch(setModalContext({ context: context, modal: 'cardPayment' })),
setTaskUpsertContext: (context) => dispatch(setModalContext({
context: context,
modal: 'taskUpsert'
})),
});
function Header({
@@ -87,6 +92,7 @@ function Header({
setReportCenterContext,
recentItems,
setCardPaymentContext,
setTaskUpsertContext,
}) {
const {
treatments: { ImEXPay, DmsAp, Simple_Inventory },
@@ -470,7 +476,25 @@ function Header({
key: 'tasks',
id: 'tasks',
icon: <FaTasks />,
label: <Link to="/manage/tasks">{t('menus.header.tasks')}</Link>,
label: t('menus.header.tasks'),
children: [
{
key: 'createTask',
icon: <PlusCircleOutlined/>,
label: t('menus.header.create_task'),
onClick: () => {
setTaskUpsertContext({
actions: {},
context: {},
});
},
},
{
key: 'mytasks',
icon: <FaTasks/>,
label: <Link to="/manage/tasks">{t('menus.header.tasks')}</Link>,
}
]
},
{
key: 'shopsubmenu',

92
client/src/components/task-list/task-list.component.jsx
View File

@@ -2,58 +2,91 @@ import {Button, Card, Space, Switch, Table} from "antd";
import queryString from "query-string";
import React, {useCallback, useState} from "react";
import {useTranslation} from "react-i18next";
import {useLocation, useNavigate} from "react-router-dom";
import {Link, useLocation, useNavigate} from "react-router-dom";
import {pageLimit} from "../../utils/config";
import dayjs from "../../utils/day";
import {
CheckCircleFilled,
CheckCircleOutlined,
DeleteFilled,
DeleteOutlined, ExclamationCircleFilled,
DeleteOutlined,
EditFilled,
ExclamationCircleFilled,
PlusCircleFilled,
SyncOutlined
} from "@ant-design/icons";
import {DateFormatter} from "../../utils/DateFormatter.jsx";
import {connect} from 'react-redux';
import {setModalContext} from '../../redux/modals/modals.actions';
/**
* Task List Component
* @param dueDate
* @returns {Element}
* @constructor
*/
const DueDateRecord = ({dueDate}) => {
if (dueDate) {
const dueDateFormatted = dayjs(dueDate).format("YYYY-MM-DD");
const relativeDueDate = dayjs(dueDate).fromNow();
const today = dayjs().format("YYYY-MM-DD");
if (dueDateFormatted < today) {
return <div title={relativeDueDate} style={{color: 'red'}}>{dueDateFormatted}</div>;
const dueDateDayjs = dayjs(dueDate);
const relativeDueDate = dueDateDayjs.fromNow();
const today = dayjs();
if (dueDateDayjs.isAfter(today)) {
return <div title={relativeDueDate} style={{color: 'red'}}>
<DateFormatter>{dueDate}</DateFormatter></div>;
} else {
return <div title={relativeDueDate}>{dueDateFormatted}</div>;
return <div title={relativeDueDate}><DateFormatter>{dueDate}</DateFormatter></div>;
}
} else {
return <div>N/A</div>;
}
}
/**
* Priority Label Component
* @param priority
* @returns {Element}
* @constructor
*/
const PriorityLabel = ({priority}) => {
switch(priority) {
case 1:
return <div>
<ExclamationCircleFilled style={{color: 'red'}} /> High
High <ExclamationCircleFilled style={{marginLeft: '5px', color: 'red'}}/>
</div>;
case 2:
return <div>
<ExclamationCircleFilled style={{ color: 'yellow' }} /> Medium
Medium <ExclamationCircleFilled style={{marginLeft: '5px', color: 'yellow'}}/>
</div>;
case 3:
return <div>
<ExclamationCircleFilled style={{ color: 'green' }} /> Low
Low <ExclamationCircleFilled style={{marginLeft: '5px', color: 'green'}}/>
</div>;
default:
return <div>
<ExclamationCircleFilled style={{ color: 'black' }} /> None
None <ExclamationCircleFilled style={{marginLeft: '5px', color: 'black'}}/>
</div>;
}
}
export default function TaskListComponent({
const mapDispatchToProps = (dispatch) => ({
// Existing dispatch props...
setTaskUpsertContext: (context) => dispatch(setModalContext({context, modal: 'taskUpsert'})),
});
const mapStateToProps = (state) => ({
// Existing state props...
});
export default connect(mapStateToProps, mapDispatchToProps)(TaskListComponent);
function TaskListComponent({
loading,
tasks,
total,
refetch,
toggleCompletedStatus,
setTaskUpsertContext,
}) {
const {t} = useTranslation();
@@ -71,6 +104,17 @@ export default function TaskListComponent({
const history = useNavigate();
const columns = [
{
title: t("tasks.fields.job.ro_number"),
dataIndex: ["job", "ro_number"],
key: "job.ro_number",
width: '5%',
render: (text, record) => (
<Link to={`/manage/jobs/${record.job.id}`}>
{record.job.ro_number}
</Link>
),
},
{
title: t("tasks.fields.title"),
dataIndex: "title",
@@ -110,6 +154,16 @@ export default function TaskListComponent({
width: '5%',
render: (text, record) => (
<Space direction='horizontal'>
<Button title={t('tasks.actions.edit')} onClick={() => {
setTaskUpsertContext({
actions: {},
context: {
existingTask: record,
},
});
}}>
<EditFilled/>
</Button>
<Button title={t('tasks.actions.toggle_completed')}
onClick={() => toggleCompletedStatus(record.id, record.completed)}>
{record.completed ? <CheckCircleOutlined/> :
@@ -129,7 +183,12 @@ export default function TaskListComponent({
filteredInfo: {text: ""},
});
// Columns definition remains the same
const handleCreateTask = () => {
setTaskUpsertContext({
actions: {},
context: {},
});
};
const handleTableChange = (pagination, filters, sorter) => {
setState({...state, filteredInfo: filters, sortedInfo: sorter});
@@ -169,6 +228,9 @@ export default function TaskListComponent({
checked={deleted === "true"}
onChange={(value) => handleSwitchChange('deleted', value)}
/>
<Button title={t('tasks.titles.create')} onClick={handleCreateTask}>
<PlusCircleFilled/>{t('tasks.buttons.create')}
</Button>
<Button title={t('tasks.titles.refresh')}
onClick={() => refetch()}>
<SyncOutlined/>
@@ -179,7 +241,7 @@ export default function TaskListComponent({
return (
<Card
title={t("menus.header.tasks")}
title={t("menus.header.my_tasks")}
extra={tasksExtra()}
>
<Table

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

@@ -7,7 +7,7 @@ import {
} from "../../graphql/tasks.queries.js";
import {pageLimit} from "../../utils/config.js";
import AlertComponent from "../alert/alert.component.jsx";
import React from "react";
import React, {useEffect} from "react";
import TaskListComponent from "./task-list.component.jsx";
export default function TaskListContainer({bodyshop, currentUser}) {
@@ -37,9 +37,36 @@ export default function TaskListContainer({bodyshop, currentUser}) {
},
}
);
/**
* Refetch tasks when a task is updated
*/
useEffect(() => {
const handleTaskUpdated = () => {
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]);
/**
* Toggle task completed mutation
*/
const [toggleTaskCompleted] = useMutation(MUTATION_TOGGLE_TASK_COMPLETED);
/**
* Toggle task completed status
* @param id
* @param currentStatus
* @returns {Promise<void>}
*/
const toggleCompletedStatus = async (id, currentStatus) => {
const completed_at = !currentStatus ? new Date().toISOString() : null;
await toggleTaskCompleted({
@@ -49,11 +76,21 @@ export default function TaskListContainer({bodyshop, currentUser}) {
completed_at: completed_at
}
});
refetch();
};
refetch().catch((e) => {
console.error(`Something went wrong fetching tasks: ${e.message || ''}`);
}); };
/**
* Toggle task deleted mutation
*/
const [toggleTaskDeleted] = useMutation(MUTATION_TOGGLE_TASK_DELETED);
/**
* Toggle task deleted status
* @param id
* @param currentStatus
* @returns {Promise<void>}
*/
const toggleDeletedStatus = async (id, currentStatus) => {
const deleted_at = !currentStatus ? new Date().toISOString() : null;
await toggleTaskDeleted({
@@ -63,7 +100,9 @@ export default function TaskListContainer({bodyshop, currentUser}) {
deleted_at: deleted_at
}
});
refetch();
refetch().catch((e) => {
console.error(`Something went wrong fetching tasks: ${e.message || ''}`);
});
};
if (error) return <AlertComponent message={error.message} type="error"/>;

107
client/src/components/task-upsert-modal/task-upsert-modal.component.jsx Normal file
View File

@@ -0,0 +1,107 @@
import {Col, Form, Input, Row, Select, Switch} from "antd";
import React 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";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({});
export default connect(
mapStateToProps,
mapDispatchToProps
)(TaskUpsertModalComponent);
export function TaskUpsertModalComponent({form, bodyshop}) {
const {t} = useTranslation();
return (
<>
<Row gutter={[16, 16]}>
<Col span={8}>
<Form.Item
label={t("tasks.fields.completed")}
name="completed"
valuePropName="checked"
>
<Switch/>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label={t("tasks.fields.assigned_to")}
name="assigned_to"
>
<Select placeholder={t("tasks.labels.selectemployee")}>
{bodyshop.employees.map((employee) => (
<Select.Option key={employee.id} value={employee.user_email}>
{employee.first_name} {employee.last_name}
</Select.Option>
))}
</Select>
</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"
>
<FormDatePicker/>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label={t("tasks.fields.remind_at")}
name="remind_at"
>
<FormDatePicker/>
</Form.Item>
</Col>
</Row>
</>
);
}

105
client/src/components/task-upsert-modal/task-upsert-modal.container.jsx Normal file
View File

@@ -0,0 +1,105 @@
import {useMutation} from "@apollo/client";
import {Form, Modal, notification} from "antd";
import React, {useEffect} from "react";
import {useTranslation} from "react-i18next";
import {connect} from "react-redux";
import {createStructuredSelector} from "reselect";
import {INSERT_NEW_TASK, UPDATE_TASK} from "../../graphql/tasks.queries";
import {toggleModalVisible} from "../../redux/modals/modals.actions";
import {selectTaskUpsert} from "../../redux/modals/modals.selectors";
import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors";
import TaskUpsertModalComponent from "./task-upsert-modal.component";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
bodyshop: selectBodyshop,
taskUpsert: selectTaskUpsert,
});
const mapDispatchToProps = (dispatch) => ({
toggleModalVisible: () => dispatch(toggleModalVisible("taskUpsert")),
});
export function TaskUpsertModalContainer({
bodyshop,
currentUser,
taskUpsert,
toggleModalVisible,
}) {
const {t} = useTranslation();
const [insertTask] = useMutation(INSERT_NEW_TASK);
const [updateTask] = useMutation(UPDATE_TASK);
const {open, context, actions} = taskUpsert;
const {jobId, existingTask} = context;
const {refetch} = actions;
const [form] = Form.useForm();
useEffect(() => {
if (existingTask && open) {
form.setFieldsValue(existingTask);
} else if (!existingTask && open) {
form.resetFields();
}
}, [existingTask, form, open]);
const handleFinish = async (formValues) => {
const {...values} = formValues;
if (existingTask) {
updateTask({
variables: {
taskId: existingTask.id,
task: values,
},
}).then((r) => {
window.dispatchEvent(new CustomEvent('taskUpdated'));
notification["success"]({
message: t("tasks.successes.updated"),
});
});
if (refetch) refetch();
toggleModalVisible();
} else {
await insertTask({
variables: {
taskInput: [
{...values, jobid: jobId, created_by: currentUser.email, bodyshopid: bodyshop.id},
],
},
});
if (refetch) refetch();
form.resetFields();
toggleModalVisible();
window.dispatchEvent(new CustomEvent('taskUpdated'));
notification["success"]({
message: t("tasks.successes.create"),
});
}
};
return (
<Modal
title={existingTask ? t("tasks.actions.edit") : t("tasks.actions.new")}
open={open}
okText={t("general.actions.save")}
onOk={() => {
form.submit();
}}
onCancel={() => {
toggleModalVisible();
}}
destroyOnClose
>
<Form form={form} onFinish={handleFinish} layout="vertical">
<TaskUpsertModalComponent form={form}/>
</Form>
</Modal>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(TaskUpsertModalContainer);

19
client/src/graphql/bodyshop.queries.js
View File

@@ -160,25 +160,6 @@ export const QUERY_BODYSHOP = gql`
external_id
flat_rate
}
tasks {
id
created_at
updated_at
title
description
deleted
deleted_at
due_date
created_by
assigned_to
completed
completed_at
remind_at
priority
jobid
joblineid
partsorderid
}
}
}
`;

70
client/src/graphql/tasks.queries.js
View File

@@ -81,10 +81,10 @@ export const QUERY_MY_TASKS_PAGINATED = gql`
completed_at
remind_at
priority
jobid
joblineid
partsorderid
billid
job {
ro_number
id
}
bodyshopid
}
tasks_aggregate(
@@ -129,3 +129,65 @@ export const MUTATION_TOGGLE_TASK_DELETED = gql`
}
}
`;
/**
* Insert new task mutation
* @type {DocumentNode}
*/
export const INSERT_NEW_TASK = gql`
mutation INSERT_NEW_TASK($taskInput: [tasks_insert_input!]!) {
insert_tasks(objects: $taskInput) {
returning {
id
created_at
updated_at
title
description
deleted
deleted_at
due_date
created_by
assigned_to
completed
completed_at
remind_at
priority
jobid
joblineid
partsorderid
billid
}
}
}
`;
/**
* Update task mutation
* @type {DocumentNode}
*/
export const UPDATE_TASK = gql`
mutation UPDATE_TASK($taskId: uuid!, $task: tasks_set_input!) {
update_tasks(where: { id: { _eq: $taskId } }, _set: $task) {
returning {
id
created_at
updated_at
title
description
deleted
deleted_at
due_date
created_by
assigned_to
completed
completed_at
remind_at
priority
jobid
joblineid
partsorderid
billid
}
}
}
`

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

@@ -35,7 +35,11 @@ import "./manage.page.styles.scss";
const JobsPage = lazy(() => import("../jobs/jobs.page"));
const CardPaymentModalContainer = lazy(() =>
import("../../components/card-payment-modal/card-payment-modal.container.")
import("../../components/card-payment-modal/card-payment-modal.container..jsx")
);
const TaskUpsertModalContainer = lazy(() =>
import("../../components/task-upsert-modal/task-upsert-modal.container.jsx")
);
const JobsDetailPage = lazy(() =>
@@ -229,7 +233,7 @@ export function Manage({conflict, bodyshop,enableJoyRide,joyRideSteps,setJoyRide
<PaymentModalContainer/>
<CardPaymentModalContainer/>
<TaskUpsertModalContainer/>
<BreadCrumbs/>
<BillEnterModalContainer/>
<JobCostingModal/>

1
client/src/redux/modals/modals.reducer.js
View File

@@ -13,6 +13,7 @@ const INITIAL_STATE = {
billEnter: {...baseModal},
courtesyCarReturn: {...baseModal},
noteUpsert: {...baseModal},
taskUpsert: {...baseModal},
schedule: {...baseModal},
partsOrder: {...baseModal},
timeTicket: {...baseModal},

5
client/src/redux/modals/modals.selectors.js
View File

@@ -22,6 +22,11 @@ export const selectNoteUpsert = createSelector(
(modals) => modals.noteUpsert
);
export const selectTaskUpsert = createSelector(
[selectModals],
(modals) => modals.taskUpsert
);
export const selectSchedule = createSelector(
[selectModals],
(modals) => modals.schedule

2
client/src/redux/modals/modals.types.js
View File

@@ -1,5 +1,5 @@
const ModalActionTypes = {
TOGGLE_MODAL_VISIBLE: "TOGGLE_MODAL_VISIBLE",
SET_MODAL_CONTEXT: "SET_MODAL_CONTEXT"
SET_MODAL_CONTEXT: "SET_MODAL_CONTEXT",
};
export default ModalActionTypes;