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

Minor fixes: Job detail card schedule, job list search, job list sorting.

Browse Source
This commit is contained in:
Patrick Fic
2020-02-19 16:35:21 -08:00
parent 2efbd48275
commit b0a810bf17
8 changed files with 161 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
_business_logic/NewShopSetup.md
View File

@@ -4,6 +4,7 @@
..\*Include the statuses file in the format of:
```json
{
"statuses": [
"Open",
"Scheduled",
@@ -21,14 +22,29 @@
"Invoiced",
"Exported"
],
"default_imported": "Open",
"default_scheduled": "Scheduled",
"open_statuses": [
"Open",
"Scheduled",
"Arrived",
"Repair Plan",
"Parts",
"Body",
"Prep",
"Paint",
"Reassembly",
"Sublet",
"Detail",
"Completed"
],
"default_arrived": "Arrived",
"default_exported": "Exported",
"default_imported": "Open",
"default_invoiced": "Invoiced",
"default_completed": "Completed",
"default_delivered": "Delivered",
"default_invoiced": "Invoiced",
"default_exported": "Exported"
"default_scheduled": "Scheduled"
}
```
--\* Set the region for the shop.

52
client/src/components/job-detail-cards/job-detail-cards.component.jsx
View File

@@ -17,6 +17,7 @@ import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
import "./job-detail-cards.styles.scss";
import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
import ScheduleJobModalContainer from "../schedule-job-modal/schedule-job-modal.container";
export default function JobDetailCards({ selectedJob }) {
const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
@@ -25,29 +26,35 @@ export default function JobDetailCards({ selectedJob }) {
skip: !selectedJob
});
const [noteModalVisible, setNoteModalVisible] = useState(false);
const scheduleModalState = useState(false);
const { t } = useTranslation();
if (!selectedJob) {
return <div>{t("jobs.errors.nojobselected")}</div>;
}
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
if (error) return <AlertComponent message={error.message} type='error' />;
return (
<div className="job-cards-container">
<div className='job-cards-container'>
<NoteUpsertModal
jobId={data.jobs_by_pk.id}
visible={noteModalVisible}
changeVisibility={setNoteModalVisible}
refetch={refetch}
/>
<ScheduleJobModalContainer
scheduleModalState={scheduleModalState}
jobId={data.jobs_by_pk.id}
refetch={refetch}
/>
<PageHeader
ghost={false}
onBack={() => window.history.back()}
tags={
<span key="job-status">
<span key='job-status'>
{data.jobs_by_pk.status ? (
<Tag color="blue">{data.jobs_by_pk.status}</Tag>
<Tag color='blue'>{data.jobs_by_pk.status}</Tag>
) : null}
</span>
}
@@ -65,35 +72,40 @@ export default function JobDetailCards({ selectedJob }) {
)
}
extra={[
<Button
key='schedule'
//TODO Enabled logic based on status.
onClick={() => {
scheduleModalState[1](true);
}}>
{t("jobs.actions.schedule")}
</Button>,
<Link
key="documents"
to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}
>
key='documents'
to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}>
<Button>
<Icon type="file-image" />
<Icon type='file-image' />
{t("jobs.actions.addDocuments")}
</Button>
</Link>,
<Button key="printing">
<Icon type="printer" />
<Button key='printing'>
<Icon type='printer' />
{t("jobs.actions.printCenter")}
</Button>,
<Button
key="notes"
actiontype="addNote"
key='notes'
actiontype='addNote'
onClick={() => {
setNoteModalVisible(!noteModalVisible);
}}
>
<Icon type="edit" />
}}>
<Icon type='edit' />
{t("jobs.actions.addNote")}
</Button>,
<Button key="postinvoices">
<Icon type="shopping-cart" />
<Button key='postinvoices'>
<Icon type='shopping-cart' />
{t("jobs.actions.postInvoices")}
</Button>
]}
>
]}>
{
// loading ? (
// <LoadingSkeleton />
@@ -114,7 +126,7 @@ export default function JobDetailCards({ selectedJob }) {
// )
}
<section className="job-cards">
<section className='job-cards'>
<JobDetailCardsCustomerComponent
loading={loading}
data={data ? data.jobs_by_pk : null}

5
client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx
View File

@@ -14,7 +14,10 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
extraLink={data && data.owner ? `/manage/owners/${data.owner.id}` : null}>
{data ? (
<span>
<div>{`${data.ownr_fn || ""} ${data.ownr_ln || ""}`}</div>
<div>
<Link to={`/manage/owners/${data.owner.id}`}>{`${data.ownr_fn ||
""} ${data.ownr_ln || ""}`}</Link>
</div>
<div>
{t("jobs.fields.phoneshort")}:
<PhoneFormatter>{`${data.ownr_ph1 ||

28
client/src/components/jobs-find-modal/jobs-find-modal.container.jsx
View File

@@ -2,12 +2,22 @@ import { Modal } from "antd";
import React from "react";
import { useQuery } from "react-apollo";
import { useTranslation } from "react-i18next";
import { QUERY_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import JobsFindModalComponent from "./jobs-find-modal.component";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
export default function JobsFindModalContainer({
export default connect(
mapStateToProps,
null
)(function JobsFindModalContainer({
bodyshop,
loading,
error,
selectedJob,
@@ -17,8 +27,11 @@ export default function JobsFindModalContainer({
}) {
const { t } = useTranslation();
const jobsList = useQuery(QUERY_ALL_OPEN_JOBS, {
fetchPolicy: "network-only"
const jobsList = useQuery(QUERY_ALL_ACTIVE_JOBS, {
fetchPolicy: "network-only",
variables: {
statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"]
}
});
return (
@@ -26,10 +39,9 @@ export default function JobsFindModalContainer({
title={t("jobs.labels.existing_jobs")}
width={"80%"}
okButtonProps={{ disabled: selectedJob ? false : true }}
{...modalProps}
>
{...modalProps}>
{loading ? <LoadingSpinner /> : null}
{error ? <AlertComponent message={error.message} type="error" /> : null}
{error ? <AlertComponent message={error.message} type='error' /> : null}
{true ? (
<JobsFindModalComponent
selectedJob={selectedJob}
@@ -43,4 +55,4 @@ export default function JobsFindModalContainer({
) : null}
</Modal>
);
}
});

36
client/src/components/jobs-list/jobs-list.component.jsx
View File

@@ -1,4 +1,4 @@
import { Input, Table, Icon } from "antd";
import { Input, Table, Icon, Button } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
@@ -8,6 +8,8 @@ import { withRouter } from "react-router-dom";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
export default withRouter(function JobsList({
searchTextState,
refetch,
loading,
jobs,
selectedJob,
@@ -21,6 +23,7 @@ export default withRouter(function JobsList({
const { t } = useTranslation();
const setSearchText = searchTextState[1];
const columns = [
{
title: t("jobs.fields.ro_number"),
@@ -29,7 +32,11 @@ export default withRouter(function JobsList({
width: "8%",
// onFilter: (value, record) => record.ro_number.includes(value),
// filteredValue: state.filteredInfo.text || null,
sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
sorter: (a, b) =>
alphaSort(
a.ro_number ? a.ro_number : "EST-" + a.est_number,
b.ro_number ? b.ro_number : "EST-" + b.est_number
),
sortOrder:
state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
@@ -73,7 +80,7 @@ export default withRouter(function JobsList({
<PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
<Icon
style={{ margin: 4 }}
type="message"
type='message'
onClick={() => {
alert("SMSing will happen here.");
}}
@@ -205,19 +212,24 @@ export default withRouter(function JobsList({
loading={loading}
title={() => {
return (
<Input.Search
placeholder="Search..."
onSearch={value => {
console.log(value);
}}
enterButton
/>
<div style={{ display: "flex" }}>
<Button onClick={() => refetch()}>
<Icon type='sync' />
</Button>
<Input.Search
placeholder='Search...'
onChange={e => {
setSearchText(e.target.value);
}}
enterButton
/>
</div>
);
}}
size="small"
size='small'
pagination={{ position: "top" }}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
rowKey='id'
dataSource={jobs}
rowSelection={{ selectedRowKeys: [selectedJob] }}
onChange={handleTableChange}

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

@@ -1,8 +1,8 @@
import { gql } from "apollo-boost";
export const QUERY_ALL_OPEN_JOBS = gql`
query QUERY_ALL_OPEN_JOBS {
jobs {
export const QUERY_ALL_ACTIVE_JOBS = gql`
query QUERY_ALL_ACTIVE_JOBS($statuses: [String!]!) {
jobs(where: { status: { _in: $statuses } }) {
ownr_fn
ownr_ln
ownr_ph1

65
client/src/pages/jobs/jobs.page.jsx
View File

@@ -4,12 +4,25 @@ import { useTranslation } from "react-i18next";
import AlertComponent from "../../components/alert/alert.component";
import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
import JobsList from "../../components/jobs-list/jobs-list.component";
import { QUERY_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
//TODO Implement pagination for this.
export default function JobsPage({ match, location }) {
const { loading, error, data } = useQuery(QUERY_ALL_OPEN_JOBS, {
fetchPolicy: "network-only"
import { selectBodyshop } from "../../redux/user/user.selectors";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
export default connect(
mapStateToProps,
null
)(function JobsPage({ match, location, bodyshop }) {
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
fetchPolicy: "network-only",
variables: {
statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"]
}
});
const { t } = useTranslation();
@@ -19,17 +32,53 @@ export default function JobsPage({ match, location }) {
const { hash } = location;
const [selectedJob, setSelectedJob] = useState(hash ? hash.substr(1) : null);
const searchTextState = useState("");
const searchText = searchTextState[0];
if (error) return <AlertComponent message={error.message} type='error' />;
//TODO Implement pagination for this.
if (error) return <AlertComponent message={error.message} type="error" />;
console.log(typeof searchText);
return (
<div>
<JobsList
searchTextState={searchTextState}
refetch={refetch}
loading={loading}
selectedJob={selectedJob}
setSelectedJob={setSelectedJob}
jobs={data ? data.jobs : null}
jobs={
data
? searchTextState[0] === ""
? data.jobs
: data.jobs.filter(
j =>
(j.ro_number || "")
.toString()
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.ownr_fn || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.ownr_ln || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.clm_no || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.vehicle.plate_no || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.vehicle.v_model_desc || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(j.vehicle.v_make_desc || "")
.toLowerCase()
.includes(searchText.toLowerCase())
)
: null
}
/>
<JobDetailCards selectedJob={selectedJob} />
</div>
);
}
});

1
client/src/utils/sorters.js
View File

@@ -4,6 +4,7 @@ export function alphaSort(a, b) {
A = a ? a.toLowerCase() : "";
B = b ? b.toLowerCase() : "";
console.log("Objects", A, B, A < B, A > B);
if (A < B)
//sort string ascending