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

Refactor jobs detail page to use container. Refresh detail cards on note add.

Browse Source
This commit is contained in:
Patrick Fic
2020-01-21 10:52:40 -08:00
parent 19c9d05dae
commit 26745f2e62
16 changed files with 220 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
bodyshop_translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project be_version="2.6.1" version="1.2">
<babeledit_project version="1.2" be_version="2.6.1">
<!--
BabelEdit project file
@@ -1087,6 +1087,111 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>documents</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>lines</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>notes</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>parts</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>rates</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>vehicle_info</name>
<definition_loaded>false</definition_loaded>

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

@@ -1,4 +1,5 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useQuery } from "@apollo/react-hooks";
import AlertComponent from "../alert/alert.component";
@@ -15,50 +16,61 @@ import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import "./job-detail-cards.styles.scss";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import NoteAddModal from "../note-add-modal/note-add-modal.component";
export default function JobDetailCards({ selectedJob }) {
const { loading, error, data } = useQuery(QUERY_JOB_CARD_DETAILS, {
const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
fetchPolicy: "network-only",
variables: { id: selectedJob },
skip: !selectedJob
});
const [noteModalVisible, setNoteModalVisible] = 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' />;
return (
<div className='job-cards-container'>
<NoteAddModal
jobId={data?.jobs_by_pk.id}
jobId={data.jobs_by_pk.id}
visible={noteModalVisible}
changeVisibility={setNoteModalVisible}
refetch={refetch}
/>
<PageHeader
ghost={false}
onBack={() => window.history.back()}
tags={<Tag color='blue'>{data?.jobs_by_pk.job_status?.name}</Tag>}
tags={
<span key='job-status'>
{data.jobs_by_pk.job_status ? (
<Tag color='blue'>{data.jobs_by_pk.job_status.name}</Tag>
) : null}
</span>
}
title={
loading
? t("general.labels.loading")
: data?.jobs_by_pk.ro_number
? `${t("jobs.fields.ro_number")} ${data?.jobs_by_pk.ro_number}`
: `${t("jobs.fields.est_number")} ${data?.jobs_by_pk.est_number}`
: data.jobs_by_pk.ro_number
? `${t("jobs.fields.ro_number")} ${data.jobs_by_pk.ro_number}`
: `${t("jobs.fields.est_number")} ${data.jobs_by_pk.est_number}`
}
extra={[
<Button key='documents'>
<Icon type='file-image' />
{t("jobs.actions.addDocuments")}
</Button>,
<Link
key='documents'
to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}>
<Button>
<Icon type='file-image' />
{t("jobs.actions.addDocuments")}
</Button>
</Link>,
<Button key='printing'>
<Icon type='printer' />
{t("jobs.actions.printCenter")}

5
client/src/components/job-detail-cards/job-detail-cards.styles.scss
View File

@@ -1,8 +1,3 @@
.job-cards-container {
height: 45vh;
overflow-y: auto;
}
.job-cards {
display: flex;
flex-wrap: wrap;

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

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import PhoneFormatter from "../../utils/PhoneFormatter";
import { alphaSort } from "../../utils/sorters";
import "./jobs-list.styles.scss";
export default function JobsList({
loading,
@@ -190,7 +189,7 @@ export default function JobsList({
};
return (
<div className='jobs-list'>
<div>
<Table
loading={loading}
title={() => {

4
client/src/components/jobs-list/jobs-list.styles.scss
View File

@@ -1,4 +0,0 @@
.jobs-list{
text-align: center;
height: 40vh;
}

10
client/src/components/note-add-modal/note-add-modal.component.jsx
View File

@@ -4,7 +4,12 @@ import { useTranslation } from "react-i18next";
import { useMutation } from "react-apollo";
import { INSERT_NEW_NOTE } from "../../graphql/notes.queries";
export default function NoteAddModal({ jobId, visible, changeVisibility }) {
export default function NoteAddModal({
jobId,
visible,
changeVisibility,
refetch
}) {
const [newNote, setnewNote] = useState({
private: false,
critical: false,
@@ -32,7 +37,8 @@ export default function NoteAddModal({ jobId, visible, changeVisibility }) {
text: ""
});
});
console.log('refetch', refetch)
refetch();
changeVisibility(!visible);
}}
onCancel={() => {

12
client/src/graphql/apollo-error-handling.js
View File

@@ -39,14 +39,14 @@ const errorLink = onError(
}
}));
// const subscriber = {
// next: observer.next.bind(observer),
// error: observer.error.bind(observer),
// complete: observer.complete.bind(observer)
// };
const subscriber = {
next: observer.next.bind(observer),
error: observer.error.bind(observer),
complete: observer.complete.bind(observer)
};
console.log("About to resend the request.");
// Retry last failed request
forward(operation); //.subscribe(subscriber);
forward(operation).subscribe(subscriber);
})
.catch(error => {
// No refresh or client token available, we force user to login

2
client/src/graphql/notes.queries.js
View File

@@ -1,7 +1,7 @@
import { gql } from "apollo-boost";
export const INSERT_NEW_NOTE = gql`
mutation INSERT_NEW_JOB($noteInput: [notes_insert_input!]!) {
mutation INSERT_NEW_NOTE($noteInput: [notes_insert_input!]!) {
insert_notes(objects: $noteInput) {
returning {
id

1
client/src/index.css
View File

@@ -1,5 +1,6 @@
body {
margin: 0;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;

31
client/src/pages/jobs-detail/jobs-detail.page.container.jsx Normal file
View File

@@ -0,0 +1,31 @@
import { useQuery } from "@apollo/react-hooks";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import AlertComponent from "../../components/alert/alert.component";
import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import JobsDetailPage from "./jobs-detail.page";
function JobsDetailPageContainer({ match, location }) {
const { jobId } = match.params;
const { hash } = location;
const { t } = useTranslation();
const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
variables: { id: jobId },
fetchPolicy: "network-only"
});
useEffect(() => {
document.title = loading
? "..."
: t("titles.jobsdetail", {
ro_number: data.jobs_by_pk.ro_number
});
}, [loading, data, t]);
if (loading) return <SpinComponent />;
if (error) return <AlertComponent message={error.message} type='error' />;
return <JobsDetailPage hash={hash} data={data} jobId={jobId} match={match} />;
}
export default JobsDetailPageContainer;

50
client/src/pages/jobs-detail/jobs-detail.page.jsx
View File

@@ -1,34 +1,14 @@
import React, { useEffect } from "react";
import { useQuery } from "@apollo/react-hooks";
import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../../components/alert/alert.component";
import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import { Tabs, Icon, Row } from "antd";
import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
import { Icon, Row, Tabs } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
import { FaRegStickyNote } from "react-icons/fa";
function JobsDetailPage({ match, location }) {
const { jobId } = match.params;
const { hash } = location;
function JobsDetailPage({ jobId, hash, data, match }) {
const { t } = useTranslation();
const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
variables: { id: jobId },
fetchPolicy: "network-only"
});
useEffect(() => {
document.title = loading
? "..."
: t("titles.jobsdetail", {
ro_number: data.jobs_by_pk.ro_number
});
}, [loading, data, t]);
//const [selectedTab, setSelectedTab] = useState(hash ? hash : "#lines");
if (loading) return <SpinComponent />;
if (error) return <AlertComponent message={error.message} type='error' />;
return (
<div>
<Row>
@@ -40,7 +20,7 @@ function JobsDetailPage({ match, location }) {
tab={
<span>
<Icon type='bars' />
Lines
{t("jobs.labels.lines")}
</span>
}
key='#lines'>
@@ -50,7 +30,7 @@ function JobsDetailPage({ match, location }) {
tab={
<span>
<Icon type='dollar' />
Rates
{t("jobs.labels.rates")}
</span>
}
key='#rates'>
@@ -60,7 +40,7 @@ function JobsDetailPage({ match, location }) {
tab={
<span>
<Icon type='tool1' />
Parts
{t("jobs.labels.parts")}
</span>
}
key='#parts'>
@@ -70,12 +50,22 @@ function JobsDetailPage({ match, location }) {
tab={
<span>
<Icon type='file-image' />
Documents
{t("jobs.labels.documents")}
</span>
}
key='#documents'>
<JobsDocumentsContainer jobId={jobId} />
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
<Icon component={FaRegStickyNote} />
{t("jobs.labels.notes")}
</span>
}
key='#notes'>
lol notes here
</Tabs.TabPane>
</Tabs>
</Row>
</div>

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

@@ -8,14 +8,18 @@ import HeaderContainer from "../../components/header/header.container";
import FooterComponent from "../../components/footer/footer.component";
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
import './manage.page.styles.scss'
const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
const JobsPage = lazy(() => import("../jobs/jobs.page"));
const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page"));
const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page.container"));
const ProfilePage = lazy(() => import("../profile/profile.container.page"));
const JobsDocumentsPage = lazy(() =>
import("../../components/jobs-documents/jobs-documents.container")
);
const { Header, Content, Footer } = Layout;
//This page will handle all routing for the entire application.
export default function Manage({ match }) {
@@ -31,7 +35,7 @@ export default function Manage({ match }) {
<HeaderContainer />
</Header>
<Content>
<Content className="content-container">
<ErrorBoundary>
<Suspense
fallback={<div>TODO: Suspended Loading in Manage Page...</div>}>

1
client/src/pages/manage/manage.page.styles.scss Normal file
View File

@@ -0,0 +1 @@
.content-container { overflow-y : scroll; }

5
client/src/translations/en_us/common.json
View File

@@ -72,6 +72,11 @@
"vehicle": "Vehicle"
},
"convert": "Convert",
"documents": "Documents",
"lines": "Estimate Lines",
"notes": "Notes",
"parts": "Parts",
"rates": "Rates",
"vehicle_info": "Vehicle"
},
"successes": {

5
client/src/translations/es/common.json
View File

@@ -72,6 +72,11 @@
"vehicle": "Vehículo"
},
"convert": "Convertir",
"documents": "documentos",
"lines": "Líneas estimadas",
"notes": "Notas",
"parts": "Partes",
"rates": "Tarifas",
"vehicle_info": "Vehículo"
},
"successes": {

5
client/src/translations/fr/common.json
View File

@@ -72,6 +72,11 @@
"vehicle": "Véhicule"
},
"convert": "Convertir",
"documents": "Les documents",
"lines": "Estimer les lignes",
"notes": "Remarques",
"parts": "les pièces",
"rates": "Les taux",
"vehicle_info": "Véhicule"
},
"successes": {