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 BabelEdit project file
@@ -1087,6 +1087,111 @@
</translation> </translation>
</translations> </translations>
</concept_node> </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> <concept_node>
<name>vehicle_info</name> <name>vehicle_info</name>
<definition_loaded>false</definition_loaded> <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 React, { useState } from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useQuery } from "@apollo/react-hooks"; import { useQuery } from "@apollo/react-hooks";
import AlertComponent from "../alert/alert.component"; 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 JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component"; import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component"; import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import "./job-detail-cards.styles.scss"; import "./job-detail-cards.styles.scss";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component"; import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import NoteAddModal from "../note-add-modal/note-add-modal.component"; import NoteAddModal from "../note-add-modal/note-add-modal.component";
export default function JobDetailCards({ selectedJob }) { 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", fetchPolicy: "network-only",
variables: { id: selectedJob }, variables: { id: selectedJob },
skip: !selectedJob skip: !selectedJob
}); });
const [noteModalVisible, setNoteModalVisible] = useState(false); const [noteModalVisible, setNoteModalVisible] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
if (!selectedJob) { if (!selectedJob) {
return <div>{t("jobs.errors.nojobselected")}</div>; 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 ( return (
<div className='job-cards-container'> <div className='job-cards-container'>
<NoteAddModal <NoteAddModal
jobId={data?.jobs_by_pk.id} jobId={data.jobs_by_pk.id}
visible={noteModalVisible} visible={noteModalVisible}
changeVisibility={setNoteModalVisible} changeVisibility={setNoteModalVisible}
refetch={refetch}
/> />
<PageHeader <PageHeader
ghost={false} ghost={false}
onBack={() => window.history.back()} 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={ title={
loading loading
? t("general.labels.loading") ? t("general.labels.loading")
: data?.jobs_by_pk.ro_number : data.jobs_by_pk.ro_number
? `${t("jobs.fields.ro_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}` : `${t("jobs.fields.est_number")} ${data.jobs_by_pk.est_number}`
} }
extra={[ extra={[
<Button key='documents'> <Link
<Icon type='file-image' /> key='documents'
{t("jobs.actions.addDocuments")} to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}>
</Button>, <Button>
<Icon type='file-image' />
{t("jobs.actions.addDocuments")}
</Button>
</Link>,
<Button key='printing'> <Button key='printing'>
<Icon type='printer' /> <Icon type='printer' />
{t("jobs.actions.printCenter")} {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 { .job-cards {
display: flex; display: flex;
flex-wrap: wrap; 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 { Link } from "react-router-dom";
import PhoneFormatter from "../../utils/PhoneFormatter"; import PhoneFormatter from "../../utils/PhoneFormatter";
import { alphaSort } from "../../utils/sorters"; import { alphaSort } from "../../utils/sorters";
import "./jobs-list.styles.scss";
export default function JobsList({ export default function JobsList({
loading, loading,
@@ -190,7 +189,7 @@ export default function JobsList({
}; };
return ( return (
<div className='jobs-list'> <div>
<Table <Table
loading={loading} loading={loading}
title={() => { 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 { useMutation } from "react-apollo";
import { INSERT_NEW_NOTE } from "../../graphql/notes.queries"; 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({ const [newNote, setnewNote] = useState({
private: false, private: false,
critical: false, critical: false,
@@ -32,7 +37,8 @@ export default function NoteAddModal({ jobId, visible, changeVisibility }) {
text: "" text: ""
}); });
}); });
console.log('refetch', refetch)
refetch();
changeVisibility(!visible); changeVisibility(!visible);
}} }}
onCancel={() => { onCancel={() => {

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

@@ -39,14 +39,14 @@ const errorLink = onError(
} }
})); }));
// const subscriber = { const subscriber = {
// next: observer.next.bind(observer), next: observer.next.bind(observer),
// error: observer.error.bind(observer), error: observer.error.bind(observer),
// complete: observer.complete.bind(observer) complete: observer.complete.bind(observer)
// }; };
console.log("About to resend the request."); console.log("About to resend the request.");
// Retry last failed request // Retry last failed request
forward(operation); //.subscribe(subscriber); forward(operation).subscribe(subscriber);
}) })
.catch(error => { .catch(error => {
// No refresh or client token available, we force user to login // 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"; import { gql } from "apollo-boost";
export const INSERT_NEW_NOTE = gql` 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) { insert_notes(objects: $noteInput) {
returning { returning {
id id

1
client/src/index.css
View File

@@ -1,5 +1,6 @@
body { body {
margin: 0; margin: 0;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; 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 { Icon, Row, Tabs } from "antd";
import { useQuery } from "@apollo/react-hooks"; import React from "react";
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 { useTranslation } from "react-i18next"; 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 JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
import { FaRegStickyNote } from "react-icons/fa";
function JobsDetailPage({ match, location }) { function JobsDetailPage({ jobId, hash, data, match }) {
const { jobId } = match.params;
const { hash } = location;
const { t } = useTranslation(); 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 ( return (
<div> <div>
<Row> <Row>
@@ -40,7 +20,7 @@ function JobsDetailPage({ match, location }) {
tab={ tab={
<span> <span>
<Icon type='bars' /> <Icon type='bars' />
Lines {t("jobs.labels.lines")}
</span> </span>
} }
key='#lines'> key='#lines'>
@@ -50,7 +30,7 @@ function JobsDetailPage({ match, location }) {
tab={ tab={
<span> <span>
<Icon type='dollar' /> <Icon type='dollar' />
Rates {t("jobs.labels.rates")}
</span> </span>
} }
key='#rates'> key='#rates'>
@@ -60,7 +40,7 @@ function JobsDetailPage({ match, location }) {
tab={ tab={
<span> <span>
<Icon type='tool1' /> <Icon type='tool1' />
Parts {t("jobs.labels.parts")}
</span> </span>
} }
key='#parts'> key='#parts'>
@@ -70,12 +50,22 @@ function JobsDetailPage({ match, location }) {
tab={ tab={
<span> <span>
<Icon type='file-image' /> <Icon type='file-image' />
Documents {t("jobs.labels.documents")}
</span> </span>
} }
key='#documents'> key='#documents'>
<JobsDocumentsContainer jobId={jobId} /> <JobsDocumentsContainer jobId={jobId} />
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
<Icon component={FaRegStickyNote} />
{t("jobs.labels.notes")}
</span>
}
key='#notes'>
lol notes here
</Tabs.TabPane>
</Tabs> </Tabs>
</Row> </Row>
</div> </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 FooterComponent from "../../components/footer/footer.component";
import ErrorBoundary from "../../components/error-boundary/error-boundary.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 WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
const JobsPage = lazy(() => import("../jobs/jobs.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 ProfilePage = lazy(() => import("../profile/profile.container.page"));
const JobsDocumentsPage = lazy(() => const JobsDocumentsPage = lazy(() =>
import("../../components/jobs-documents/jobs-documents.container") import("../../components/jobs-documents/jobs-documents.container")
); );
const { Header, Content, Footer } = Layout; const { Header, Content, Footer } = Layout;
//This page will handle all routing for the entire application. //This page will handle all routing for the entire application.
export default function Manage({ match }) { export default function Manage({ match }) {
@@ -31,7 +35,7 @@ export default function Manage({ match }) {
<HeaderContainer /> <HeaderContainer />
</Header> </Header>
<Content> <Content className="content-container">
<ErrorBoundary> <ErrorBoundary>
<Suspense <Suspense
fallback={<div>TODO: Suspended Loading in Manage Page...</div>}> 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" "vehicle": "Vehicle"
}, },
"convert": "Convert", "convert": "Convert",
"documents": "Documents",
"lines": "Estimate Lines",
"notes": "Notes",
"parts": "Parts",
"rates": "Rates",
"vehicle_info": "Vehicle" "vehicle_info": "Vehicle"
}, },
"successes": { "successes": {

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

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

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

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