From 6c34b8839c86e4b4a40e293f5b0d7c480a5b45a1 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Mon, 29 Mar 2021 17:08:52 -0700 Subject: [PATCH] Further UI Updates --- bodyshop_translations.babel | 105 +++++++ .../accounting-payables-table.component.jsx | 1 - .../accounting-payments-table.component.jsx | 1 - ...accounting-receivables-table.component.jsx | 1 - .../audit-trail-list.component.jsx | 21 +- .../bills-list-table.component.jsx | 226 +++++++------- .../bills-vendors-list.component.jsx | 1 - .../chat-conversation-list.component.jsx | 1 - .../chat-media-selector.component.jsx | 5 +- .../contract-cars/contract-cars.component.jsx | 1 - .../contract-courtesy-car-block.component.jsx | 8 +- .../contract-job-block.component.jsx | 12 +- .../contract-jobs/contract-jobs.component.jsx | 1 - .../contracts-list.component.jsx | 1 - .../courtesy-car-contract-list.component.jsx | 31 +- .../courtesy-car-form.component.jsx | 54 ++-- .../courtesy-cars-list.component.jsx | 31 +- .../csi-response-list-paginated.component.jsx | 1 - .../components/header/header.component.jsx | 9 +- .../job-bills-total.component.jsx | 82 ++--- .../job-costing-parts-table.component.jsx | 1 - .../job-detail-cards.notes.component.jsx | 1 - .../job-detail-lines/job-lines.component.jsx | 19 +- ...b-reconciliation-bills-table.component.jsx | 1 - ...b-reconciliation-parts-table.component.jsx | 1 - .../job-totals.table.labor.component.jsx | 1 - .../jobs-available-scan.component.jsx | 75 +++-- .../jobs-available-table.component.jsx | 102 +++---- .../jobs-available-table.container.jsx | 24 +- ...obs-create-owner-info.search.component.jsx | 1 - ...s-create-vehicle-info.search.component.jsx | 1 - .../jobs-detail-labor.component.jsx | 79 +++-- .../jobs-detail-pli.component.jsx | 50 ++- .../jobs-documents-gallery.component.jsx | 153 +++++----- ...-documents-gallery.selectall.component.jsx | 6 +- .../jobs-find-modal.component.jsx | 1 - .../jobs-list-paginated.component.jsx | 1 - .../jobs-list/jobs-list.component.jsx | 1 - .../jobs-notes/jobs.notes.component.jsx | 36 ++- .../labor-allocations-table.component.jsx | 155 ++++++---- .../owner-detail-form.component.jsx | 17 +- .../owner-detail-form.container.jsx | 34 ++- .../owner-detail-jobs.component.jsx | 81 ++--- .../owner-find-modal.component.jsx | 1 - .../owner-tag-popover.component.jsx | 12 +- .../owners-list/owners-list.component.jsx | 68 ++--- .../parts-order-backorder-eta.component.jsx | 2 +- .../parts-order-list-table.component.jsx | 286 +++++++++--------- .../payment-list-paginated.component.jsx | 1 - .../print-center-item.component.jsx | 2 +- .../print-wrapper/print-wrapper.component.jsx | 2 +- ...production-board-kanban-card.component.jsx | 1 - ...oduction-list-columns.status.component.jsx | 2 +- .../production-list-detail.component.jsx | 2 +- .../production-list-table.component.jsx | 1 - .../production-sublets-manage.component.jsx | 1 - .../profile-shops/profile-shops.component.jsx | 1 - .../scoreboard-jobs-list.component.jsx | 1 - .../shop-employees-list.component.jsx | 1 - .../shop-users/shop-users.component.jsx | 1 - .../tech-job-clocked-in-list.component.jsx | 2 +- .../tech-lookup-jobs-list.component.jsx | 1 - .../time-ticket-list.component.jsx | 90 +++--- .../vehicle-detail-form.component.jsx | 18 +- .../vehicle-detail-form.container.jsx | 40 ++- .../vehicle-detail-jobs.component.jsx | 79 ++--- .../vehicle-tag-popover.component.jsx | 12 +- .../vehicles-list/vehicles-list.component.jsx | 68 ++--- .../vendors-list/vendors-list.component.jsx | 1 - .../src/pages/bills/bills.page.component.jsx | 1 - .../courtesy-car-detail.page.component.jsx | 20 +- .../jobs-available.page.container.jsx | 15 +- .../owners-detail.page.component.jsx | 15 +- .../parts-queue.page.component.jsx | 60 ++-- .../vehicles-detail.page.component.jsx | 12 +- client/src/translations/en_us/common.json | 7 +- client/src/translations/es/common.json | 7 +- client/src/translations/fr/common.json | 7 +- 78 files changed, 1250 insertions(+), 1024 deletions(-) diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index e0338811e..85ad54a24 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -9207,6 +9207,48 @@ + + status + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + usage + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + vehicle false @@ -24132,6 +24174,27 @@ + + relatedjobs + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + updateowner false @@ -29159,6 +29222,27 @@ + + timetickets + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + @@ -31765,6 +31849,27 @@ + + relatedjobs + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + updatevehicle false diff --git a/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx b/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx index a7663466a..c5702efb2 100644 --- a/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx +++ b/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx @@ -168,7 +168,6 @@ export default function AccountingPayablesTableComponent({ loading, bills }) { ); }} dataSource={dataSource} - size="small" pagination={{ position: "top", pageSize: 50 }} columns={columns} rowKey="id" diff --git a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx b/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx index 77b68c145..eb94392cd 100644 --- a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx +++ b/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx @@ -175,7 +175,6 @@ export default function AccountingPayablesTableComponent({ ); }} dataSource={dataSource} - size="small" pagination={{ position: "top", pageSize: 50 }} columns={columns} rowKey="id" diff --git a/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx b/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx index 2b6e440cf..0ae5ccea3 100644 --- a/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx +++ b/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx @@ -189,7 +189,6 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) { ); }} dataSource={dataSource} - size="small" pagination={{ position: "top" }} columns={columns} rowKey="id" diff --git a/client/src/components/audit-trail-list/audit-trail-list.component.jsx b/client/src/components/audit-trail-list/audit-trail-list.component.jsx index c897a18db..c2d5d01c5 100644 --- a/client/src/components/audit-trail-list/audit-trail-list.component.jsx +++ b/client/src/components/audit-trail-list/audit-trail-list.component.jsx @@ -8,7 +8,7 @@ import AuditTrailValuesComponent from "../audit-trail-values/audit-trail-values. export default function AuditTrailListComponent({ loading, data }) { const [state, setState] = useState({ sortedInfo: {}, - filteredInfo: {} + filteredInfo: {}, }); const { t } = useTranslation(); const columns = [ @@ -22,7 +22,7 @@ export default function AuditTrailListComponent({ loading, data }) { ), sorter: (a, b) => a.created - b.created, sortOrder: - state.sortedInfo.columnKey === "created" && state.sortedInfo.order + state.sortedInfo.columnKey === "created" && state.sortedInfo.order, }, { title: t("audit.fields.operation"), @@ -31,7 +31,7 @@ export default function AuditTrailListComponent({ loading, data }) { width: "10%", sorter: (a, b) => alphaSort(a.operation, b.operation), sortOrder: - state.sortedInfo.columnKey === "operation" && state.sortedInfo.order + state.sortedInfo.columnKey === "operation" && state.sortedInfo.order, }, { title: t("audit.fields.values"), @@ -43,7 +43,7 @@ export default function AuditTrailListComponent({ loading, data }) { oldV={record.old_val} newV={record.new_val} /> - ) + ), }, { title: t("audit.fields.useremail"), @@ -52,19 +52,19 @@ export default function AuditTrailListComponent({ loading, data }) { width: "10%", sorter: (a, b) => alphaSort(a.useremail, b.useremail), sortOrder: - state.sortedInfo.columnKey === "useremail" && state.sortedInfo.order - } + state.sortedInfo.columnKey === "useremail" && state.sortedInfo.order, + }, ]; const formItemLayout = { labelCol: { xs: { span: 12 }, - sm: { span: 5 } + sm: { span: 5 }, }, wrapperCol: { xs: { span: 24 }, - sm: { span: 12 } - } + sm: { span: 12 }, + }, }; const handleTableChange = (pagination, filters, sorter) => { setState({ ...state, filteredInfo: filters, sortedInfo: sorter }); @@ -74,9 +74,8 @@ export default function AuditTrailListComponent({ loading, data }) { ({ ...item }))} + columns={columns.map((item) => ({ ...item }))} rowKey="id" dataSource={data} onChange={handleTableChange} diff --git a/client/src/components/bills-list-table/bills-list-table.component.jsx b/client/src/components/bills-list-table/bills-list-table.component.jsx index e6c3064a3..63ddb9a11 100644 --- a/client/src/components/bills-list-table/bills-list-table.component.jsx +++ b/client/src/components/bills-list-table/bills-list-table.component.jsx @@ -1,12 +1,15 @@ -import { SyncOutlined } from "@ant-design/icons"; +import { EyeFilled, SyncOutlined } from "@ant-design/icons"; import { Button, + Card, Checkbox, Descriptions, + Drawer, + Grid, Input, + PageHeader, Space, Table, - Typography, } from "antd"; import queryString from "query-string"; import React, { useState } from "react"; @@ -45,7 +48,21 @@ export function BillsListTableComponent({ }) { const { t } = useTranslation(); const [selectedBillLinesByBill, setSelectedBillLinesByBill] = useState({}); + const selectedBreakpoint = Object.entries(Grid.useBreakpoint()) + .filter((screen) => !!screen[1]) + .slice(-1)[0]; + const bpoints = { + xs: "100%", + sm: "100%", + md: "100%", + lg: "75%", + xl: "75%", + xxl: "65%", + }; + const drawerPercentage = selectedBreakpoint + ? bpoints[selectedBreakpoint[0]] + : "100%"; const [state, setState] = useState({ sortedInfo: {}, }); @@ -54,6 +71,34 @@ export function BillsListTableComponent({ const Templates = TemplateList("bill"); const bills = billsQuery.data ? billsQuery.data.bills : []; const { refetch } = billsQuery; + const recordActions = (record, showView = false) => ( + + {showView && ( + + )} + {record.exported ? ( + + ) : ( + + + + )} + + {record.isinhouse && ( + + )} + + ); const columns = [ { title: t("bills.fields.vendorname"), @@ -116,31 +161,10 @@ export function BillsListTableComponent({ title: t("general.labels.actions"), dataIndex: "actions", key: "actions", - render: (text, record) => ( - - {record.exported ? ( - - ) : ( - - - - )} - - {record.isinhouse && ( - - )} - - ), + render: (text, record) => recordActions(record, true), }, ]; + const selectedBillRecord = bills.find((r) => r.id === selectedBill); const handleTableChange = (pagination, filters, sorter) => { setState({ ...state, filteredInfo: filters, sortedInfo: sorter }); @@ -240,7 +264,6 @@ export function BillsListTableComponent({ ), }, ]; - const handleOnBillrowclick = (selectedRows) => { setSelectedBillLinesByBill({ ...selectedBillLinesByBill, @@ -249,10 +272,14 @@ export function BillsListTableComponent({ }; return ( -
- {`${t("bills.fields.invoice_number")} ${ - record.invoice_number - }`} + <> + {`${record.federal_tax_rate}%` || ""} @@ -301,9 +328,7 @@ export function BillsListTableComponent({ {t("bills.actions.return")}
- + ); }; return ( -
- {t("bills.labels.bills")} + + + {job ? ( + <> + + + + ) : null} + + { + e.preventDefault(); + }} + /> + + } + > + handleOnRowClick(null)} + visible={selectedBill} + //getContainer={false} + style={{ position: "absolute" }} + closable + width={drawerPercentage} + > + {selectedBillRecord && rowExpander(selectedBillRecord)} +
( -
- - {job ? ( -
- - -
- ) : null} - -
- { - e.preventDefault(); - }} - /> -
-
- )} - scroll={{ x: "50%", y: "40rem" }} - expandedRowRender={rowExpander} - pagination={{ position: "top", defaultPageSize: 25 }} + scroll={{ x: true, y: "50rem" }} columns={columns} rowKey="id" dataSource={bills} onChange={handleTableChange} - expandable={{ - expandedRowKeys: [selectedBill], - onExpand: (expanded, record) => { - handleOnRowClick(expanded ? record : null); - }, - }} - rowSelection={{ - onSelect: (record) => { - handleOnRowClick(record); - }, - selectedRowKeys: [selectedBill], - type: "radio", - }} - onRow={(record, rowIndex) => { - return { - onClick: (event) => { - handleOnRowClick(record); - }, // click row - onDoubleClick: (event) => {}, // double click row - onContextMenu: (event) => {}, // right button click row - onMouseEnter: (event) => {}, // mouse enter row - onMouseLeave: (event) => {}, // mouse leave row - }; - }} /> - + ); } export default connect( diff --git a/client/src/components/bills-vendors-list/bills-vendors-list.component.jsx b/client/src/components/bills-vendors-list/bills-vendors-list.component.jsx index 75e795a2b..2b18243c2 100644 --- a/client/src/components/bills-vendors-list/bills-vendors-list.component.jsx +++ b/client/src/components/bills-vendors-list/bills-vendors-list.component.jsx @@ -95,7 +95,6 @@ export default function BillsVendorsList() { ); }} dataSource={dataSource} - size="small" pagination={{ position: "top" }} columns={columns} rowKey="id" diff --git a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx index 024730bf8..3d43a6f78 100644 --- a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx +++ b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx @@ -29,7 +29,6 @@ export function ChatConversationListComponent({
( - s.isSelected).length} - > + s.isSelected).length}> diff --git a/client/src/components/contract-cars/contract-cars.component.jsx b/client/src/components/contract-cars/contract-cars.component.jsx index 64853af8f..5fe87c98d 100644 --- a/client/src/components/contract-cars/contract-cars.component.jsx +++ b/client/src/components/contract-cars/contract-cars.component.jsx @@ -106,7 +106,6 @@ export default function ContractsCarsComponent({ onChange={(e) => setState({ ...state, search: e.target.value })} /> )} - size="small" pagination={{ position: "top" }} columns={columns.map((item) => ({ ...item }))} rowKey="id" diff --git a/client/src/components/contract-courtesy-car-block/contract-courtesy-car-block.component.jsx b/client/src/components/contract-courtesy-car-block/contract-courtesy-car-block.component.jsx index a3738832c..43ae5f8bb 100644 --- a/client/src/components/contract-courtesy-car-block/contract-courtesy-car-block.component.jsx +++ b/client/src/components/contract-courtesy-car-block/contract-courtesy-car-block.component.jsx @@ -7,7 +7,7 @@ export default function ContractCourtesyCarBlock({ courtesyCar }) { return ( - + {(courtesyCar && courtesyCar.fleetnumber) || ""} @@ -15,9 +15,9 @@ export default function ContractCourtesyCarBlock({ courtesyCar }) { {(courtesyCar && courtesyCar.plate) || ""} - {`${(courtesyCar && courtesyCar.year) || ""} ${(courtesyCar && - courtesyCar.make) || - ""} ${(courtesyCar && courtesyCar.model) || ""}`} + {`${(courtesyCar && courtesyCar.year) || ""} ${ + (courtesyCar && courtesyCar.make) || "" + } ${(courtesyCar && courtesyCar.model) || ""}`} diff --git a/client/src/components/contract-job-block/contract-job-block.component.jsx b/client/src/components/contract-job-block/contract-job-block.component.jsx index 075a75779..9878235dc 100644 --- a/client/src/components/contract-job-block/contract-job-block.component.jsx +++ b/client/src/components/contract-job-block/contract-job-block.component.jsx @@ -8,17 +8,19 @@ export default function ContractJobBlock({ job }) { return ( - + {(job && job.ro_number) || ""} - {`${(job && job.v_model_yr) || ""} ${(job && job.v_make_desc) || - ""} ${(job && job.v_model_desc) || ""}`} + {`${(job && job.v_model_yr) || ""} ${ + (job && job.v_make_desc) || "" + } ${(job && job.v_model_desc) || ""}`} - {`${(job && job.ownr_fn) || ""} ${(job && job.ownr_ln) || - ""} ${(job && job.ownr_co_nm) || ""}`} + {`${(job && job.ownr_fn) || ""} ${(job && job.ownr_ln) || ""} ${ + (job && job.ownr_co_nm) || "" + }`} diff --git a/client/src/components/contract-jobs/contract-jobs.component.jsx b/client/src/components/contract-jobs/contract-jobs.component.jsx index 6eba90164..88a7e7fc5 100644 --- a/client/src/components/contract-jobs/contract-jobs.component.jsx +++ b/client/src/components/contract-jobs/contract-jobs.component.jsx @@ -179,7 +179,6 @@ export default function ContractsJobsComponent({ onChange={(e) => setState({ ...state, search: e.target.value })} /> )} - size="small" pagination={{ position: "top", defaultPageSize: 3, diff --git a/client/src/components/contracts-list/contracts-list.component.jsx b/client/src/components/contracts-list/contracts-list.component.jsx index 19b095c5b..2e9bc896b 100644 --- a/client/src/components/contracts-list/contracts-list.component.jsx +++ b/client/src/components/contracts-list/contracts-list.component.jsx @@ -144,7 +144,6 @@ export default function ContractsList({ loading, contracts, refetch, total }) {
)} - size="small" scroll={{ x: "50%", y: "40rem" }} pagination={{ position: "top", diff --git a/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx b/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx index e18829509..705337f21 100644 --- a/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx +++ b/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx @@ -1,4 +1,4 @@ -import { Table } from "antd"; +import { Card, Table } from "antd"; import queryString from "query-string"; import React from "react"; import { useTranslation } from "react-i18next"; @@ -84,19 +84,20 @@ export default function CourtesyCarContractListComponent({ }; return ( -
({ ...item }))} - rowKey="id" - dataSource={contracts} - onChange={handleTableChange} - /> + +
+ ); } diff --git a/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx b/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx index 9028503c8..ed9c073c4 100644 --- a/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx +++ b/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx @@ -1,4 +1,4 @@ -import { Button, Form, Input, InputNumber } from "antd"; +import { Button, Form, Input, InputNumber, PageHeader } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component"; @@ -13,15 +13,21 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) { const { t } = useTranslation(); return (
- + form.submit()} + > + {t("general.actions.save")} + + } + /> + - + - + - - - - + + + + + ( -
+ @@ -137,14 +137,17 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) { value={searchText} enterButton /> -
- )} - size="small" - pagination={{ position: "top" }} - columns={columns.map((item) => ({ ...item }))} - rowKey="id" - dataSource={tableData} - onChange={handleTableChange} - /> + + } + > +
({ ...item }))} + rowKey="id" + dataSource={tableData} + onChange={handleTableChange} + /> + ); } diff --git a/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx b/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx index 46cbf8628..c2a2066ba 100644 --- a/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx +++ b/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx @@ -118,7 +118,6 @@ export default function CsiResponseListPaginated({ ); }} - size="small" pagination={{ position: "top", pageSize: 25, diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx index 6a96c399b..08d71de55 100644 --- a/client/src/components/header/header.component.jsx +++ b/client/src/components/header/header.component.jsx @@ -14,7 +14,7 @@ import Icon, { UnorderedListOutlined, UserOutlined, } from "@ant-design/icons"; -import { Menu } from "antd"; +import { Layout, Menu } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; import { BsKanban } from "react-icons/bs"; @@ -67,10 +67,11 @@ function Header({ const { t } = useTranslation(); return ( -
+ -
+ ); } diff --git a/client/src/components/job-bills-total/job-bills-total.component.jsx b/client/src/components/job-bills-total/job-bills-total.component.jsx index 1407cd37a..af8d68bd1 100644 --- a/client/src/components/job-bills-total/job-bills-total.component.jsx +++ b/client/src/components/job-bills-total/job-bills-total.component.jsx @@ -1,4 +1,4 @@ -import { Statistic } from "antd"; +import { Card, Space, Statistic } from "antd"; import Dinero from "dinero.js"; import React from "react"; import { useTranslation } from "react-i18next"; @@ -56,44 +56,46 @@ export default function JobBillsTotalComponent({ loading, bills, jobTotals }) { const discrepWithCms = discrepWithLbrAdj.subtract(billCms); return ( -
- - - - - - - -
+ + + + + + + + + + + ); } diff --git a/client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx b/client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx index 11bd71dbf..3f7e576ec 100644 --- a/client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx +++ b/client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx @@ -73,7 +73,6 @@ export default function JobCostingPartsTable({ job, data, summaryData }) { return (
{ return (
diff --git a/client/src/components/job-detail-cards/job-detail-cards.notes.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.notes.component.jsx index d48b3e588..39b27c5f6 100644 --- a/client/src/components/job-detail-cards/job-detail-cards.notes.component.jsx +++ b/client/src/components/job-detail-cards/job-detail-cards.notes.component.jsx @@ -26,7 +26,6 @@ export default function JobDetailCardsNotesComponent({ loading, data }) { {data ? ( ( diff --git a/client/src/components/job-detail-lines/job-lines.component.jsx b/client/src/components/job-detail-lines/job-lines.component.jsx index 9baf80363..573addd97 100644 --- a/client/src/components/job-detail-lines/job-lines.component.jsx +++ b/client/src/components/job-detail-lines/job-lines.component.jsx @@ -62,16 +62,6 @@ export function JobLinesComponent({ sortOrder: state.sortedInfo.columnKey === "line_no" && state.sortedInfo.order, }, - { - title: t("joblines.fields.line_ind"), - dataIndex: "line_ind", - key: "line_ind", - fixed: "left", - sorter: (a, b) => alphaSort(a.line_ind, b.line_ind), - sortOrder: - state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order, - responsive: ["md"], - }, { title: t("joblines.fields.line_desc"), dataIndex: "line_desc", @@ -192,6 +182,15 @@ export function JobLinesComponent({ sortOrder: state.sortedInfo.columnKey === "mod_lb_hrs" && state.sortedInfo.order, }, + { + title: t("joblines.fields.line_ind"), + dataIndex: "line_ind", + key: "line_ind", + sorter: (a, b) => alphaSort(a.line_ind, b.line_ind), + sortOrder: + state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order, + responsive: ["md"], + }, { title: t("joblines.fields.notes"), dataIndex: "notes", diff --git a/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx b/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx index 026364c11..48e7008f7 100644 --- a/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx +++ b/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx @@ -88,7 +88,6 @@ export default function JobReconciliationBillsTable({ return (
{ - console.log("sorter :>> ", sorter); setState({ ...state, filteredInfo: filters, sortedInfo: sorter }); }; return ( diff --git a/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx b/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx index 77993beda..d2f41f5a8 100644 --- a/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx +++ b/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx @@ -1,5 +1,5 @@ import { DownloadOutlined, SyncOutlined } from "@ant-design/icons"; -import { Button, Input, notification, Space, Table } from "antd"; +import { Button, Card, Input, notification, Space, Table } from "antd"; import axios from "axios"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; @@ -37,9 +37,11 @@ export function JobsAvailableScan({ partnerVersion, refetch }) { }); if (response.data.success) { //Came through - if(refetch) refetch() + if (refetch) refetch(); } else { - notification["error"]({ message: t("jobs.errors.scanimport", {message: response.data.error}) }); + notification["error"]({ + message: t("jobs.errors.scanimport", { message: response.data.error }), + }); } setLoading(false); }; @@ -120,40 +122,37 @@ export function JobsAvailableScan({ partnerVersion, refetch }) { : []; return ( -
{ - return ( -
- - {t("jobs.labels.diskscan")} - - -
- { - setSearchText(e.currentTarget.value); - }} - /> -
-
- ); - }} - size="small" - pagination={{ position: "top" }} - columns={columns} - rowKey="id" - dataSource={data} - onChange={handleTableChange} - /> + + + + { + setSearchText(e.currentTarget.value); + }} + /> + + } + > +
+ ); } diff --git a/client/src/components/jobs-available-table/jobs-available-table.component.jsx b/client/src/components/jobs-available-table/jobs-available-table.component.jsx index 1673813d5..3946eefde 100644 --- a/client/src/components/jobs-available-table/jobs-available-table.component.jsx +++ b/client/src/components/jobs-available-table/jobs-available-table.component.jsx @@ -5,7 +5,7 @@ import { SyncOutlined, } from "@ant-design/icons"; import { useMutation } from "@apollo/client"; -import { Button, Input, notification, Space, Table } from "antd"; +import { Button, Card, Input, notification, Space, Table } from "antd"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; @@ -176,58 +176,54 @@ export default function JobsAvailableComponent({ : []; return ( -
{ - return ( -
- - {t("jobs.labels.availablejobs")} - + - - -
- { - setSearchText(e.currentTarget.value); - }} - /> -
-
- ); - }} - size="small" - pagination={{ position: "top" }} - columns={columns} - rowKey="id" - dataSource={availableJobs} - onChange={handleTableChange} - /> + }) + .catch((r) => { + notification["error"]({ + message: t("jobs.errors.deleted") + " " + r.message, + }); + }); + }} + > + {t("general.actions.deleteall")} + + + { + setSearchText(e.currentTarget.value); + }} + /> + + } + > +
+ ); } diff --git a/client/src/components/jobs-available-table/jobs-available-table.container.jsx b/client/src/components/jobs-available-table/jobs-available-table.container.jsx index f985741c2..345981c08 100644 --- a/client/src/components/jobs-available-table/jobs-available-table.container.jsx +++ b/client/src/components/jobs-available-table/jobs-available-table.container.jsx @@ -5,7 +5,7 @@ import { useMutation, useQuery, } from "@apollo/client"; -import { notification } from "antd"; +import { Col, notification, Row } from "antd"; import Axios from "axios"; import Dinero from "dinero.js"; import _ from "lodash"; @@ -354,14 +354,20 @@ export function JobsAvailableContainer({ bodyshop, currentUser }) { onCancel={onJobModalCancel} modalSearchState={modalSearchState} /> - - + + + + + + + + ); } diff --git a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx index ef0ee1422..1e290a457 100644 --- a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx +++ b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx @@ -110,7 +110,6 @@ export default function JobsCreateOwnerInfoSearchComponent({ ); }} - size="small" scroll={{ x: true }} pagination={{ position: "top" }} columns={columns} diff --git a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx b/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx index 89f6ff5aa..399f9c211 100644 --- a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx +++ b/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx @@ -74,7 +74,6 @@ export default function JobsCreateVehicleInfoSearchComponent({ ); }} - size="small" scroll={{ x: true }} pagination={{ position: "top" }} columns={columns} diff --git a/client/src/components/jobs-detail-labor/jobs-detail-labor.component.jsx b/client/src/components/jobs-detail-labor/jobs-detail-labor.component.jsx index 98f3078c2..7d80316e6 100644 --- a/client/src/components/jobs-detail-labor/jobs-detail-labor.component.jsx +++ b/client/src/components/jobs-detail-labor/jobs-detail-labor.component.jsx @@ -1,10 +1,9 @@ +import { Col, Row } from "antd"; import React from "react"; -import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import { selectJobReadOnly } from "../../redux/application/application.selectors"; import LaborAllocationsTableComponent from "../labor-allocations-table/labor-allocations-table.component"; -import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component"; import TimeTicketList from "../time-ticket-list/time-ticket-list.component"; const mapStateToProps = createStructuredSelector({ @@ -13,6 +12,41 @@ const mapStateToProps = createStructuredSelector({ export default connect(mapStateToProps, null)(JobsDetailLaborContainer); +const ticketSpan = { + xs: { + span: 24, + }, + sm: { + span: 24, + }, + md: { + span: 24, + }, + lg: { + span: 24, + }, + xl: { + span: 16, + }, +}; +const adjSpan = { + xs: { + span: 24, + }, + sm: { + span: 24, + }, + md: { + span: 24, + }, + lg: { + span: 24, + }, + xl: { + span: 8, + }, +}; + export function JobsDetailLaborContainer({ jobRO, jobId, @@ -23,27 +57,26 @@ export function JobsDetailLaborContainer({ techConsole, adjustments, }) { - const { t } = useTranslation(); return ( -
- {techConsole ? null : ( - - {t("timetickets.actions.enter")} - - )} - - -
+ + + + + + + + ); } diff --git a/client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx b/client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx index a690396b0..955501962 100644 --- a/client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx +++ b/client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx @@ -3,25 +3,8 @@ import React from "react"; import AlertComponent from "../alert/alert.component"; import BillsListTable from "../bills-list-table/bills-list-table.component"; import JobBillsTotal from "../job-bills-total/job-bills-total.component"; -import PartsOrderModal from "../parts-order-modal/parts-order-modal.container"; import PartsOrderListTableComponent from "../parts-order-list-table/parts-order-list-table.component"; -const tableCol = { - xs: { - span: 24, - }, - md: { - span: 20, - }, -}; - -const totalsCol = { - xs: { - span: 24, - }, - md: { - span: 4, - }, -}; +import PartsOrderModal from "../parts-order-modal/parts-order-modal.container"; export default function JobsDetailPliComponent({ job, @@ -35,26 +18,29 @@ export default function JobsDetailPliComponent({ {billsQuery.error ? ( ) : null} - - - - - - + + + + + + + + + ); diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx index b118557f3..80c75af77 100644 --- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx +++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx @@ -1,5 +1,5 @@ import { FileExcelFilled } from "@ant-design/icons"; -import { Card } from "antd"; +import { Card, Col, Row, Space } from "antd"; import React, { useEffect, useState } from "react"; import Gallery from "react-grid-gallery"; import { useTranslation } from "react-i18next"; @@ -104,78 +104,87 @@ function JobsDocumentsComponent({ }, [data, setgalleryImages, t]); return ( -
-
- - - - -
- -
- - { - window.open( - props.target.src, - "_blank", - "toolbar=0,location=0,menubar=0" - ); - }} - onSelectImage={(index, image) => { - setgalleryImages({ - ...galleryImages, - images: galleryImages.images.map((g, idx) => - index === idx ? { ...g, isSelected: !g.isSelected } : g - ), - }); - }} - /> - +
+ +
+ + + + + + + + + + + + - - { - return { - backgroundImage: , - height: "100%", - width: "100%", - }; - }} - onClickThumbnail={(index) => { - window.open( - galleryImages.other[index].src, - "_blank", - "toolbar=0,location=0,menubar=0" - ); - }} - onSelectImage={(index) => { - setgalleryImages({ - ...galleryImages, - other: galleryImages.other.map((g, idx) => - index === idx ? { ...g, isSelected: !g.isSelected } : g - ), - }); - }} - /> - - + + + { + window.open( + props.target.src, + "_blank", + "toolbar=0,location=0,menubar=0" + ); + }} + onSelectImage={(index, image) => { + setgalleryImages({ + ...galleryImages, + images: galleryImages.images.map((g, idx) => + index === idx ? { ...g, isSelected: !g.isSelected } : g + ), + }); + }} + /> + + + + + { + return { + backgroundImage: , + height: "100%", + width: "100%", + }; + }} + onClickThumbnail={(index) => { + window.open( + galleryImages.other[index].src, + "_blank", + "toolbar=0,location=0,menubar=0" + ); + }} + onSelectImage={(index) => { + setgalleryImages({ + ...galleryImages, + other: galleryImages.other.map((g, idx) => + index === idx ? { ...g, isSelected: !g.isSelected } : g + ), + }); + }} + /> + + + ); } diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.selectall.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.selectall.component.jsx index fb6e16ee2..b140e2043 100644 --- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.selectall.component.jsx +++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.selectall.component.jsx @@ -1,4 +1,4 @@ -import { Button } from "antd"; +import { Button, Space } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; @@ -49,7 +49,7 @@ export default function JobsDocumentsGallerySelectAllComponent({ }; return ( - <> + @@ -62,6 +62,6 @@ export default function JobsDocumentsGallerySelectAllComponent({ - + ); } diff --git a/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx b/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx index ce3106117..1c941d253 100644 --- a/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx +++ b/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx @@ -155,7 +155,6 @@ export default function JobsFindModalComponent({ /> )} - size="small" pagination={{ position: "bottom" }} columns={columns.map((item) => ({ ...item }))} rowKey="id" diff --git a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx index 904304563..8f16f1d53 100644 --- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx +++ b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx @@ -194,7 +194,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
+ { + setNoteUpsertContext({ + actions: { refetch: refetch }, + context: { + jobId: jobId, + }, + }); + }} + > + {t("notes.actions.new")} + + } + > - +
- + ); } export default connect(mapStateToProps, mapDispatchToProps)(JobNotesComponent); diff --git a/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx b/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx index a38194761..99e7b6c21 100644 --- a/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx +++ b/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx @@ -1,10 +1,11 @@ import { EditFilled } from "@ant-design/icons"; -import { Typography } from "antd"; +import { Card, Space, Table } from "antd"; import React, { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import { selectBodyshop } from "../../redux/user/user.selectors"; +import { alphaSort } from "../../utils/sorters"; import LaborAllocationsAdjustmentEdit from "../labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component"; import "./labor-allocations-table.styles.scss"; import { CalculateAllocationsTotals } from "./labor-allocations-table.utility"; @@ -22,6 +23,15 @@ export function LaborAllocationsTable({ }) { const { t } = useTranslation(); const [totals, setTotals] = useState([]); + const [state, setState] = useState({ + sortedInfo: { + columnKey: "cost_center", + field: "cost_center", + order: "ascend", + }, + filteredInfo: {}, + }); + useEffect(() => { if (!!joblines && !!timetickets && !!bodyshop); setTotals( @@ -35,65 +45,92 @@ export function LaborAllocationsTable({ if (!jobId) setTotals([]); }, [joblines, timetickets, bodyshop, adjustments, jobId]); + const columns = [ + { + title: t("timetickets.fields.cost_center"), + dataIndex: "cost_center", + key: "cost_center", + defaultSortOrder: "cost_center", + sorter: (a, b) => alphaSort(a.cost_center, b.cost_center), + sortOrder: + state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order, + }, + { + title: t("jobs.labels.hrs_total"), + dataIndex: "total", + key: "total", + sorter: (a, b) => a.total - b.total, + sortOrder: + state.sortedInfo.columnKey === "total" && state.sortedInfo.order, + render: (text, record) => record.total.toFixed(1), + }, + { + title: t("jobs.labels.hrs_claimed"), + dataIndex: "hrs_claimed", + key: "hrs_claimed", + sorter: (a, b) => a.claimed - b.claimed, + sortOrder: + state.sortedInfo.columnKey === "claimed" && state.sortedInfo.order, + render: (text, record) => record.claimed && record.claimed.toFixed(1), + }, + { + title: t("jobs.labels.adjustments"), + dataIndex: "adjustments", + key: "adjustments", + sorter: (a, b) => a.adjustments - b.adjustments, + sortOrder: + state.sortedInfo.columnKey === "adjustments" && state.sortedInfo.order, + render: (text, record) => ( + + {record.adjustments.toFixed(1)} + + + + + ), + }, + { + title: t("jobs.labels.difference"), + dataIndex: "difference", + + key: "difference", + sorter: (a, b) => a.difference - b.difference, + sortOrder: + state.sortedInfo.columnKey === "difference" && state.sortedInfo.order, + render: (text, record) => ( + 0 ? "green" : "red", + }} + > + {record.difference} + + ), + }, + ]; + + const handleTableChange = (pagination, filters, sorter) => { + setState({ ...state, filteredInfo: filters, sortedInfo: sorter }); + }; + + console.log("totals :>> ", totals); return ( -
-
- - {t("jobs.labels.laborallocations")} - -
-
- - - - - - - - - - - {totals.map((t, idx) => ( - - - - - - - - ))} - -
- {t("timetickets.fields.cost_center")} - - {t("jobs.labels.hrs_total")} - - {t("jobs.labels.hrs_claimed")} - - {t("jobs.labels.adjustments")} - - {t("jobs.labels.difference")} -
{t.cost_center}{t.total.toFixed(1)}{t.claimed.toFixed(1)} - {t.adjustments.toFixed(1)} - - - - - 0 ? "green" : "red", - }} - > - {t.difference} - -
- - - + + + ); } export default connect(mapStateToProps, null)(LaborAllocationsTable); diff --git a/client/src/components/owner-detail-form/owner-detail-form.component.jsx b/client/src/components/owner-detail-form/owner-detail-form.component.jsx index 4f03eb8a4..dfee5e070 100644 --- a/client/src/components/owner-detail-form/owner-detail-form.component.jsx +++ b/client/src/components/owner-detail-form/owner-detail-form.component.jsx @@ -1,4 +1,4 @@ -import { Button, Form, Input, Switch } from "antd"; +import { Form, Input, Switch } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component"; @@ -13,20 +13,7 @@ export default function OwnerDetailFormComponent({ form, loading }) { const { getFieldValue } = form; return (
-
- -
- -
-
+ diff --git a/client/src/components/owner-detail-form/owner-detail-form.container.jsx b/client/src/components/owner-detail-form/owner-detail-form.container.jsx index 2d4d54c49..464893ebb 100644 --- a/client/src/components/owner-detail-form/owner-detail-form.container.jsx +++ b/client/src/components/owner-detail-form/owner-detail-form.container.jsx @@ -1,4 +1,4 @@ -import { Form, notification } from "antd"; +import { Button, Form, notification, PageHeader } from "antd"; import React, { useState } from "react"; import { useMutation } from "@apollo/client"; import { useTranslation } from "react-i18next"; @@ -37,15 +37,29 @@ function OwnerDetailFormContainer({ owner, refetch }) { }; return ( -
- - + <> + form.submit()} + > + {t("general.actions.save")} + + } + /> +
+ + + ); } export default OwnerDetailFormContainer; diff --git a/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx b/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx index 73d3ed403..d2703b34b 100644 --- a/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx +++ b/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx @@ -1,4 +1,4 @@ -import { Table } from "antd"; +import { Card, Table } from "antd"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -59,44 +59,47 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) { ]; return ( -
( -
- -
- )} - pagination={{ position: "bottom" }} - columns={columns} - scroll={{ x: true }} - rowKey="id" - dataSource={owner.jobs} - rowSelection={{ - onSelect: (record, selected, selectedRows) => { - setSelectedJobs(selectedRows ? selectedRows.map((i) => i.id) : []); - }, - onSelectAll: (selected, selectedRows, changeRows) => { - setSelectedJobs( - selectedRows - ? selectedRows - .filter((i) => - bodyshop.md_ro_statuses.active_statuses.includes(i.status) - ) - .map((i) => i.id) - : [] - ); - }, - selectedRowKeys: selectedJobs, - getCheckboxProps: (record) => ({ - disabled: bodyshop.md_ro_statuses.active_statuses - ? !bodyshop.md_ro_statuses.active_statuses.includes(record.status) - : true, - }), - }} - /> + + } + > +
{ + setSelectedJobs(selectedRows ? selectedRows.map((i) => i.id) : []); + }, + onSelectAll: (selected, selectedRows, changeRows) => { + setSelectedJobs( + selectedRows + ? selectedRows + .filter((i) => + bodyshop.md_ro_statuses.active_statuses.includes(i.status) + ) + .map((i) => i.id) + : [] + ); + }, + selectedRowKeys: selectedJobs, + getCheckboxProps: (record) => ({ + disabled: bodyshop.md_ro_statuses.active_statuses + ? !bodyshop.md_ro_statuses.active_statuses.includes(record.status) + : true, + }), + }} + /> + ); } + export default connect(mapStateToProps, null)(OwnerDetailJobsComponent); diff --git a/client/src/components/owner-find-modal/owner-find-modal.component.jsx b/client/src/components/owner-find-modal/owner-find-modal.component.jsx index 910493189..31702a7a5 100644 --- a/client/src/components/owner-find-modal/owner-find-modal.component.jsx +++ b/client/src/components/owner-find-modal/owner-find-modal.component.jsx @@ -67,7 +67,6 @@ export default function OwnerFindModalComponent({
t("owners.labels.existing_owners")} - size="small" pagination={{ position: "bottom" }} columns={columns.map((item) => ({ ...item }))} rowKey="id" diff --git a/client/src/components/owner-tag-popover/owner-tag-popover.component.jsx b/client/src/components/owner-tag-popover/owner-tag-popover.component.jsx index 90f2a1be2..ab1f2807c 100644 --- a/client/src/components/owner-tag-popover/owner-tag-popover.component.jsx +++ b/client/src/components/owner-tag-popover/owner-tag-popover.component.jsx @@ -9,11 +9,7 @@ export default function OwnerTagPopoverComponent({ job }) {
- + {`${ job.ownr_fn || "" } ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`} @@ -31,11 +27,7 @@ export default function OwnerTagPopoverComponent({ job }) { - + {`${ job.owner.ownr_fn || "" } ${job.owner.ownr_ln || ""} ${ diff --git a/client/src/components/owners-list/owners-list.component.jsx b/client/src/components/owners-list/owners-list.component.jsx index af2c0fc6d..d72ce148d 100644 --- a/client/src/components/owners-list/owners-list.component.jsx +++ b/client/src/components/owners-list/owners-list.component.jsx @@ -1,5 +1,5 @@ import { SyncOutlined } from "@ant-design/icons"; -import { Button, Input, Table } from "antd"; +import { Button, Card, Input, Space, Table } from "antd"; import queryString from "query-string"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; @@ -74,38 +74,38 @@ export default function OwnersListComponent({ history.push({ search: queryString.stringify(search) }); }; return ( -
{ - return ( -
- - { - search.search = value; - history.push({ search: queryString.stringify(search) }); - }} - enterButton - /> -
- ); - }} - size="small" - pagination={{ - position: "top", - pageSize: 25, - current: parseInt(page || 1), - total: total, - }} - columns={columns} - rowKey="id" - scroll={{ x: true }} - dataSource={owners} - onChange={handleTableChange} - /> + + + { + search.search = value; + history.push({ search: queryString.stringify(search) }); + }} + enterButton + /> + + } + > +
+ ); } diff --git a/client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx b/client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx index 5df9127e9..57df2ef7a 100644 --- a/client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx +++ b/client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx @@ -83,7 +83,7 @@ export function PartsOrderBackorderEta({ {isAlreadyBackordered && ( )} - {loading && } + {loading && } ); } diff --git a/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx b/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx index 1a0e6e194..bf2792c46 100644 --- a/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx +++ b/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx @@ -1,5 +1,15 @@ -import { SyncOutlined } from "@ant-design/icons"; -import { Button, Checkbox, Input, Space, Table, Typography } from "antd"; +import { EyeFilled, SyncOutlined } from "@ant-design/icons"; +import { + Button, + Card, + Checkbox, + Drawer, + Grid, + Input, + PageHeader, + Space, + Table, +} from "antd"; import queryString from "query-string"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; @@ -40,6 +50,21 @@ export function PartsOrderListTableComponent({ handleOnRowClick, setPartsReceiveContext, }) { + const selectedBreakpoint = Object.entries(Grid.useBreakpoint()) + .filter((screen) => !!screen[1]) + .slice(-1)[0]; + + const bpoints = { + xs: "100%", + sm: "100%", + md: "100%", + lg: "75%", + xl: "75%", + xxl: "65%", + }; + const drawerPercentage = selectedBreakpoint + ? bpoints[selectedBreakpoint[0]] + : "100%"; const responsibilityCenters = bodyshop.md_responsibility_centers; const Templates = TemplateList("partsorder"); const { t } = useTranslation(); @@ -51,6 +76,86 @@ export function PartsOrderListTableComponent({ const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : []; const { refetch } = billsQuery; + + const recordActions = (record, showView = false) => ( + + {showView && ( + + )} + + + + + ); + const columns = [ { title: t("vendors.fields.name"), @@ -105,79 +210,7 @@ export function PartsOrderListTableComponent({ title: t("general.labels.actions"), dataIndex: "actions", key: "actions", - render: (text, record) => ( - - - - - - ), + render: (text, record) => recordActions(record, true), }, ]; @@ -280,89 +313,70 @@ export function PartsOrderListTableComponent({ dataIndex: "actions", key: "actions", render: (text, record) => ( -
- -
+ ), }, ]; return ( -
+ <> +
- + ); }; return ( -
- - {t("parts_orders.labels.parts_orders")} - + + + { + e.preventDefault(); + }} + /> + + } + > + handleOnRowClick(null)} + visible={selectedpartsorder} + //getContainer={false} + style={{ position: "absolute" }} + closable + width={drawerPercentage} + > + {selectedPartsOrderRecord && rowExpander(selectedPartsOrderRecord)} +
( -
- - -
- { - e.preventDefault(); - }} - /> -
-
- )} - scroll={{ x: "50%", y: "40rem" }} - expandedRowRender={rowExpander} - pagination={{ position: "top", defaultPageSize: 25 }} + scroll={{ x: true, y: "50rem" }} columns={columns} rowKey="id" dataSource={parts_orders} onChange={handleTableChange} - expandable={{ - expandedRowKeys: [selectedpartsorder], - onExpand: (expanded, record) => { - handleOnRowClick(expanded ? record : null); - }, - }} - rowSelection={{ - onSelect: (record) => { - handleOnRowClick(record); - }, - selectedRowKeys: [selectedpartsorder], - type: "radio", - }} - onRow={(record, rowIndex) => { - return { - onClick: (event) => { - handleOnRowClick(record); - }, // click row - onDoubleClick: (event) => {}, // double click row - onContextMenu: (event) => {}, // right button click row - onMouseEnter: (event) => {}, // mouse enter row - onMouseLeave: (event) => {}, // mouse leave row - }; - }} /> - + ); } export default connect( diff --git a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx index 5fe5ab0d8..965961928 100644 --- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx +++ b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx @@ -178,7 +178,6 @@ export function PaymentsListPaginated({
- {loading && } + {loading && } ); } diff --git a/client/src/components/print-wrapper/print-wrapper.component.jsx b/client/src/components/print-wrapper/print-wrapper.component.jsx index 00b4cf90a..68e808bb7 100644 --- a/client/src/components/print-wrapper/print-wrapper.component.jsx +++ b/client/src/components/print-wrapper/print-wrapper.component.jsx @@ -20,7 +20,7 @@ export default function PrintWrapperComponent({ {children || null} handlePrint("p")} /> handlePrint("e")} /> - {loading && } + {loading && } ); } diff --git a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx index 8ebfe9fad..caf925831 100644 --- a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx +++ b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx @@ -25,7 +25,6 @@ export default function ProductionBoardCard(technician, card) {
{record.status} - {loading && } + {loading && }
); diff --git a/client/src/components/production-list-detail/production-list-detail.component.jsx b/client/src/components/production-list-detail/production-list-detail.component.jsx index af09b46ff..88da2bff1 100644 --- a/client/src/components/production-list-detail/production-list-detail.component.jsx +++ b/client/src/components/production-list-detail/production-list-detail.component.jsx @@ -53,7 +53,7 @@ export default function ProductionListDetail({ jobs }) { {!loading && data && (
- + {theJob.ro_number || ""} diff --git a/client/src/components/production-list-table/production-list-table.component.jsx b/client/src/components/production-list-table/production-list-table.component.jsx index 11d23084b..fdba5d9a9 100644 --- a/client/src/components/production-list-table/production-list-table.component.jsx +++ b/client/src/components/production-list-table/production-list-table.component.jsx @@ -146,7 +146,6 @@ export function ProductionListTable({ handleSelector=".prod-header-dropdown" >
e.stopPropagation()} dataSource={subletJobLines} renderItem={(s) => ( diff --git a/client/src/components/profile-shops/profile-shops.component.jsx b/client/src/components/profile-shops/profile-shops.component.jsx index 7dc4ac91e..edd1f211b 100644 --- a/client/src/components/profile-shops/profile-shops.component.jsx +++ b/client/src/components/profile-shops/profile-shops.component.jsx @@ -48,7 +48,6 @@ export default function ProfileShopsComponent({ )} loading={loading} - size="small" columns={columns.map((item) => ({ ...item }))} rowKey="id" dataSource={data} diff --git a/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx b/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx index a5ef6abe3..82cd14ab3 100644 --- a/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx +++ b/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx @@ -53,7 +53,6 @@ export default function ScoreboardJobsList({ scoreBoardlist }) { const overlay = (
({ ...item }))} rowKey="id" diff --git a/client/src/components/shop-users/shop-users.component.jsx b/client/src/components/shop-users/shop-users.component.jsx index 234a6288c..39595cfdb 100644 --- a/client/src/components/shop-users/shop-users.component.jsx +++ b/client/src/components/shop-users/shop-users.component.jsx @@ -48,7 +48,6 @@ export default function ShopInfoUsersComponent() {
({ ...item }))} rowKey="id" diff --git a/client/src/components/tech-job-clocked-in-list/tech-job-clocked-in-list.component.jsx b/client/src/components/tech-job-clocked-in-list/tech-job-clocked-in-list.component.jsx index e028a29c5..63e82d82d 100644 --- a/client/src/components/tech-job-clocked-in-list/tech-job-clocked-in-list.component.jsx +++ b/client/src/components/tech-job-clocked-in-list/tech-job-clocked-in-list.component.jsx @@ -82,7 +82,7 @@ export function TechClockedInList({ technician }) { {ticket.clockon} - {ticket.cost_center}{" "} + {ticket.cost_center} diff --git a/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx b/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx index 88c22b4d1..b599e707b 100644 --- a/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx +++ b/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx @@ -179,7 +179,6 @@ export function TechLookupJobsList({ bodyshop }) { return (
( -
- {!!techConsole && ( + + {techConsole && ( )} -
+ ), }, ]; @@ -196,37 +197,54 @@ export default function TimeTicketList({ }; return ( -
({ ...item }))} - rowKey="id" - dataSource={timetickets} - onChange={handleTableChange} - summary={() => { - return ( - - - {t("general.labels.totals")} - - - - {totals.productivehrs} - {totals.actualhrs} - - {totals.actualhrs === 0 || !totals.actualhrs - ? "∞" - : `${((totals.productivehrs / totals.actualhrs) * 100).toFixed( - 2 - )}% ${t("timetickets.labels.efficiency")}`} - - - - - - ); - }} - /> + + {t("timetickets.actions.enter")} + + )) + } + > +
{ + return ( + + + {t("general.labels.totals")} + + + + {totals.productivehrs} + {totals.actualhrs} + + {totals.actualhrs === 0 || !totals.actualhrs + ? "∞" + : `${( + (totals.productivehrs / totals.actualhrs) * + 100 + ).toFixed(2)}% ${t("timetickets.labels.efficiency")}`} + + + + + + ); + }} + /> + ); } diff --git a/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx b/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx index e91a3d05f..ff7c644ce 100644 --- a/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx +++ b/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx @@ -1,4 +1,4 @@ -import { Button, Form, Input } from "antd"; +import { Form, Input } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; import FormDatePicker from "../form-date-picker/form-date-picker.component"; @@ -10,20 +10,7 @@ export default function VehicleDetailFormComponent({ form, loading }) { return (
-
- -
- -
-
+ { - //Removed as a part of IO-446. //No values have been captured in this field as of yet. // - - + <> + form.submit()} + > + {t("general.actions.save")} + + } + /> +
+ + + ); } diff --git a/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx b/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx index 9cdbcf86d..5dd9eee35 100644 --- a/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx +++ b/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx @@ -1,4 +1,4 @@ -import { Table } from "antd"; +import { Card, Table } from "antd"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -62,44 +62,45 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) { ]; return ( -
( -
- -
- )} - pagination={{ position: "bottom" }} - columns={columns} - rowKey="id" - scroll={{ x: true }} - dataSource={vehicle.jobs} - rowSelection={{ - onSelect: (record, selected, selectedRows) => { - setSelectedJobs(selectedRows ? selectedRows.map((i) => i.id) : []); - }, - onSelectAll: (selected, selectedRows, changeRows) => { - setSelectedJobs( - selectedRows - ? selectedRows - .filter((i) => - bodyshop.md_ro_statuses.active_statuses.includes(i.status) - ) - .map((i) => i.id) - : [] - ); - }, - selectedRowKeys: selectedJobs, - getCheckboxProps: (record) => ({ - disabled: bodyshop.md_ro_statuses.active_statuses - ? !bodyshop.md_ro_statuses.active_statuses.includes(record.status) - : true, - }), - }} - /> + + } + > +
{ + setSelectedJobs(selectedRows ? selectedRows.map((i) => i.id) : []); + }, + onSelectAll: (selected, selectedRows, changeRows) => { + setSelectedJobs( + selectedRows + ? selectedRows + .filter((i) => + bodyshop.md_ro_statuses.active_statuses.includes(i.status) + ) + .map((i) => i.id) + : [] + ); + }, + selectedRowKeys: selectedJobs, + getCheckboxProps: (record) => ({ + disabled: bodyshop.md_ro_statuses.active_statuses + ? !bodyshop.md_ro_statuses.active_statuses.includes(record.status) + : true, + }), + }} + /> + ); } diff --git a/client/src/components/vehicle-tag-popover/vehicle-tag-popover.component.jsx b/client/src/components/vehicle-tag-popover/vehicle-tag-popover.component.jsx index 0293e0459..5f95a5b05 100644 --- a/client/src/components/vehicle-tag-popover/vehicle-tag-popover.component.jsx +++ b/client/src/components/vehicle-tag-popover/vehicle-tag-popover.component.jsx @@ -11,11 +11,7 @@ export default function VehicleTagPopoverComponent({ job }) {
- + {`${job.v_model_yr || t("general.labels.na")} ${ job.v_color || "" @@ -36,11 +32,7 @@ export default function VehicleTagPopoverComponent({ job }) { - + {`${job.vehicle.v_model_yr || t("general.labels.na")} ${job.vehicle.v_make_desc || t("general.labels.na")} diff --git a/client/src/components/vehicles-list/vehicles-list.component.jsx b/client/src/components/vehicles-list/vehicles-list.component.jsx index 0b4ee3162..9352658ae 100644 --- a/client/src/components/vehicles-list/vehicles-list.component.jsx +++ b/client/src/components/vehicles-list/vehicles-list.component.jsx @@ -1,5 +1,5 @@ import { SyncOutlined } from "@ant-design/icons"; -import { Button, Input, Table } from "antd"; +import { Button, Card, Input, Space, Table } from "antd"; import queryString from "query-string"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; @@ -62,38 +62,38 @@ export default function VehiclesListComponent({ }; return ( -
{ - return ( -
- - { - search.search = value; - history.push({ search: queryString.stringify(search) }); - }} - enterButton - /> -
- ); - }} - size="small" - pagination={{ - position: "top", - pageSize: 25, - current: parseInt(page || 1), - total: total, - }} - columns={columns} - rowKey="id" - scroll={{ x: true }} - dataSource={vehicles} - onChange={handleTableChange} - /> + + + { + search.search = value; + history.push({ search: queryString.stringify(search) }); + }} + enterButton + /> + + } + > +
+ ); } diff --git a/client/src/components/vendors-list/vendors-list.component.jsx b/client/src/components/vendors-list/vendors-list.component.jsx index 7335b60dc..a2082663d 100644 --- a/client/src/components/vendors-list/vendors-list.component.jsx +++ b/client/src/components/vendors-list/vendors-list.component.jsx @@ -99,7 +99,6 @@ export default function VendorsListComponent({ ); }} - size="small" pagination={{ position: "top" }} columns={columns} rowKey="id" diff --git a/client/src/pages/bills/bills.page.component.jsx b/client/src/pages/bills/bills.page.component.jsx index 7ed19fca5..04307aeca 100644 --- a/client/src/pages/bills/bills.page.component.jsx +++ b/client/src/pages/bills/bills.page.component.jsx @@ -206,7 +206,6 @@ export function BillsListPage({ {t("bills.labels.bills")}
(
+ + + + + + + ); } diff --git a/client/src/pages/jobs-available/jobs-available.page.container.jsx b/client/src/pages/jobs-available/jobs-available.page.container.jsx index 1eec71230..f39be53dc 100644 --- a/client/src/pages/jobs-available/jobs-available.page.container.jsx +++ b/client/src/pages/jobs-available/jobs-available.page.container.jsx @@ -1,4 +1,4 @@ -import { Button } from "antd"; +import { Button, PageHeader } from "antd"; import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -7,7 +7,7 @@ import JobsAvailableTableContainer from "../../components/jobs-available-table/j import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; import { setBreadcrumbs, - setSelectedHeader + setSelectedHeader, } from "../../redux/application/application.actions"; const mapDispatchToProps = (dispatch) => ({ @@ -32,9 +32,14 @@ export function JobsAvailablePageContainer({ return (
- - - + + + + } + />
diff --git a/client/src/pages/owners-detail/owners-detail.page.component.jsx b/client/src/pages/owners-detail/owners-detail.page.component.jsx index 89c274134..63d3d09e8 100644 --- a/client/src/pages/owners-detail/owners-detail.page.component.jsx +++ b/client/src/pages/owners-detail/owners-detail.page.component.jsx @@ -1,11 +1,18 @@ +import { Col, Divider, Row } from "antd"; import React from "react"; import OwnerDetailForm from "../../components/owner-detail-form/owner-detail-form.container"; import OwnerDetailJobsComponent from "../../components/owner-detail-jobs/owner-detail-jobs.component"; + export default function OwnersDetailComponent({ owner, refetch }) { return ( -
- - -
+ + + + + + + + + ); } diff --git a/client/src/pages/parts-queue/parts-queue.page.component.jsx b/client/src/pages/parts-queue/parts-queue.page.component.jsx index ba317706d..1c1031eb8 100644 --- a/client/src/pages/parts-queue/parts-queue.page.component.jsx +++ b/client/src/pages/parts-queue/parts-queue.page.component.jsx @@ -1,6 +1,6 @@ import { SyncOutlined } from "@ant-design/icons"; import { useQuery } from "@apollo/client"; -import { Button, Input, Table } from "antd"; +import { Button, Card, Input, Space, Table } from "antd"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -212,35 +212,35 @@ export function PartsQueuePageComponent({ bodyshop }) { ]; return ( -
{ - return ( -
- - { - setSearchText(e.target.value); - }} - value={searchText} - enterButton - /> -
- ); - }} - onChange={handleTableChange} - /> + + + { + setSearchText(e.target.value); + }} + value={searchText} + enterButton + /> + + } + > +
+ ); } diff --git a/client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx b/client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx index 3cc260675..6f8489f62 100644 --- a/client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx +++ b/client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx @@ -1,3 +1,4 @@ +import { Col, Divider, Row } from "antd"; import React from "react"; import VehicleDetailFormContainer from "../../components/vehicle-detail-form/vehicle-detail-form.container"; import VehicleDetailJobsComponent from "../../components/vehicle-detail-jobs/vehicle-detail-jobs.component"; @@ -5,8 +6,15 @@ import VehicleDetailJobsComponent from "../../components/vehicle-detail-jobs/veh export default function VehicleDetailComponent({ vehicle, refetch }) { return (
- - + +
+ + + + + + + ); } diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index a7675e0c5..40d2fa08f 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -582,6 +582,8 @@ }, "outwith": "Out With", "return": "Return Courtesy Car", + "status": "Status", + "usage": "Usage", "vehicle": "Vehicle Description" }, "status": { @@ -1446,6 +1448,7 @@ "existing_owners": "Existing Owners", "fromclaim": "Current Claim", "fromowner": "Historical Owner Record", + "relatedjobs": "Related Jobs", "updateowner": "Update Owner" }, "successes": { @@ -1776,7 +1779,8 @@ "pmshift": "PM Shift", "shift": "Shift", "shiftalreadyclockedon": "Active Shift Time Tickets", - "straight_time": "Straight Time" + "straight_time": "Straight Time", + "timetickets": "Time Tickets" }, "successes": { "clockedin": "Clocked in successfully.", @@ -1924,6 +1928,7 @@ }, "labels": { "fromvehicle": "Historical Vehicle Record", + "relatedjobs": "Related Jobs", "updatevehicle": "Update Vehicle Information" }, "successes": { diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index 979c96b54..784f0e0c9 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -582,6 +582,8 @@ }, "outwith": "", "return": "", + "status": "", + "usage": "", "vehicle": "" }, "status": { @@ -1446,6 +1448,7 @@ "existing_owners": "Propietarios existentes", "fromclaim": "", "fromowner": "", + "relatedjobs": "", "updateowner": "" }, "successes": { @@ -1776,7 +1779,8 @@ "pmshift": "", "shift": "", "shiftalreadyclockedon": "", - "straight_time": "" + "straight_time": "", + "timetickets": "" }, "successes": { "clockedin": "", @@ -1924,6 +1928,7 @@ }, "labels": { "fromvehicle": "", + "relatedjobs": "", "updatevehicle": "" }, "successes": { diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index 7dc306750..9d086f52b 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -582,6 +582,8 @@ }, "outwith": "", "return": "", + "status": "", + "usage": "", "vehicle": "" }, "status": { @@ -1446,6 +1448,7 @@ "existing_owners": "Propriétaires existants", "fromclaim": "", "fromowner": "", + "relatedjobs": "", "updateowner": "" }, "successes": { @@ -1776,7 +1779,8 @@ "pmshift": "", "shift": "", "shiftalreadyclockedon": "", - "straight_time": "" + "straight_time": "", + "timetickets": "" }, "successes": { "clockedin": "", @@ -1924,6 +1928,7 @@ }, "labels": { "fromvehicle": "", + "relatedjobs": "", "updatevehicle": "" }, "successes": {