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

Begin job details cards.

Browse Source
This commit is contained in:
Patrick Fic
2020-01-07 16:44:14 -08:00
parent e65273f2b6
commit 16eceb192f
9 changed files with 108 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/current-user-dropdown/current-user-dropdown.component.jsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import { Link } from "react-router-dom";
import { Dropdown, Menu, Icon, Avatar, Typography, Row, Col } from "antd";
import { Dropdown, Menu, Icon, Avatar, Row, Col } from "antd";
import { useTranslation } from "react-i18next";
import i18next from "i18next";
import { useQuery } from "@apollo/react-hooks";
@@ -22,25 +22,24 @@ export default function CurrentUserDropdown() {
}
};
const menu = (
<Menu mode="vertical" onClick={handleMenuClick}>
<Menu mode='vertical' onClick={handleMenuClick}>
<Menu.Item>
<Link to="/manage/profile"> {t("menus.currentuser.profile")}</Link>
<Link to='/manage/profile'> {t("menus.currentuser.profile")}</Link>
</Menu.Item>
<Menu.SubMenu
title={
<span>
<Icon type="global" />
<Icon type='global' />
<span>{t("menus.currentuser.languageselector")}</span>
</span>
}
>
<Menu.Item actiontype="lang-select" key="en_us">
}>
<Menu.Item actiontype='lang-select' key='en_us'>
{t("general.languages.english")}
</Menu.Item>
<Menu.Item actiontype="lang-select" key="fr">
<Menu.Item actiontype='lang-select' key='fr'>
{t("general.languages.french")}
</Menu.Item>
<Menu.Item actiontype="lang-select" key="es">
<Menu.Item actiontype='lang-select' key='es'>
{t("general.languages.spanish")}
</Menu.Item>
</Menu.SubMenu>
@@ -56,10 +55,10 @@ export default function CurrentUserDropdown() {
<Dropdown overlay={menu}>
<Row>
<Col span={8}>
<Avatar size="large" alt="Avatar" src={UserImage} />
<Avatar size='large' alt='Avatar' src={UserImage} />
</Col>
<Col span={16}>
<Link to="/manage/profile">
<Link to='/manage/profile'>
{currentUser?.displayName ?? t("general.labels.unknown")}
</Link>
</Col>

16
client/src/components/job-detail-cards/job-detail-cards.component.jsx Normal file
View File

@@ -0,0 +1,16 @@
import React from "react";
import JobDetailCardsCustomerContainer from "./job-detail-cards.customer.container";
import { useTranslation } from "react-i18next";
export default function JobDetailCards({ selectedJob }) {
const { t } = useTranslation();
if (!selectedJob) {
return <div>{t("jobs.errors.nojobselected")}</div>;
}
return (
<div>
<JobDetailCardsCustomerContainer selectedJob={selectedJob} />
</div>
);
}

8
client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx Normal file
View File

@@ -0,0 +1,8 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Card } from "antd";
export default function JobDetailCardsCustomerComponent({ loading, data }) {
const { t } = useTranslation();
return <Card loading={loading}>Card has loaded.</Card>;
}

15
client/src/components/job-detail-cards/job-detail-cards.customer.container.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from "react";
import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
import { useQuery } from "@apollo/react-hooks";
import AlertComponent from "../alert/alert.component";
import { QUERY_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
export default function JobDetailCardsCustomerContainer({ selectedJob }) {
const { loading, error, data } = useQuery(QUERY_JOBS_IN_PRODUCTION, {
fetchPolicy: "network-only"
});
if (error) return <AlertComponent message={error.message} type='error' />;
return <JobDetailCardsCustomerComponent loading={loading} data={data} />;
}

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

@@ -4,37 +4,43 @@ import { Table, Icon, Input, Dropdown, Menu } from "antd";
import { alphaSort } from "../../utils/sorters";
import { useTranslation } from "react-i18next";
export default function JobsPage({ loading, jobs }) {
export default function JobsPage({
loading,
jobs,
selectedJob,
setSelectedJob
}) {
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: { text: "" }
});
const { t } = useTranslation();
const actionMenu = (
<Menu>
<Menu.Item key="images">
<Icon type="file-image" />
<Menu.Item key='images'>
<Icon type='file-image' />
{t("jobs.actions.viewJobImages")}
</Menu.Item>
<Menu.Item key="printing">
<Icon type="printer" />
<Menu.Item key='printing'>
<Icon type='printer' />
{t("jobs.actions.printCenter")}
</Menu.Item>
<Menu.Item key="notes">
<Icon type="edit" />
<Menu.Item key='notes'>
<Icon type='edit' />
{t("jobs.actions.notes")}
</Menu.Item>
<Menu.Item key="postinvoices">
<Icon type="shopping-cart" />
<Menu.Item key='postinvoices'>
<Icon type='shopping-cart' />
{t("jobs.actions.postInvoices")}
</Menu.Item>
<Menu.Item key="receiveparts">
<Icon type="inbox" />
<Menu.Item key='receiveparts'>
<Icon type='inbox' />
{t("jobs.actions.receiveParts")}
</Menu.Item>
<Menu.Item key="partstatus">
<Icon type="tool" />
<Menu.Item key='partstatus'>
<Icon type='tool' />
{t("jobs.actions.partStatus")}
</Menu.Item>
</Menu>
@@ -108,7 +114,7 @@ export default function JobsPage({ loading, jobs }) {
key: "action",
render: (text, record) => (
<Dropdown overlay={actionMenu} trigger={["click"]}>
<Icon type="ellipsis" />
<Icon type='ellipsis' />
</Dropdown>
)
}
@@ -123,16 +129,37 @@ export default function JobsPage({ loading, jobs }) {
setState({ ...state, filterinfo: { text: [value] } });
};
const handleOnRowClick = record => {
if (record) {
if (record.id) {
setSelectedJob(record.id);
return;
}
}
setSelectedJob(null);
};
return (
<div>
<Input name="searchCriteria" onChange={handleChange} />
<Input name='searchCriteria' onChange={handleChange} />
<Table
loading={loading}
pagination={{ position: "bottom" }}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
rowKey='id'
dataSource={jobs}
onChange={handleTableChange}
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
};
}}
/>
</div>
);

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

@@ -60,7 +60,6 @@ export const QUERY_JOBS_IN_PRODUCTION = gql`
updated_at
est_number
ro_number
status
scheduled_completion
scheduled_delivery
vehicle {

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

@@ -1,11 +1,13 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { useSubscription } from "@apollo/react-hooks";
import AlertComponent from "../../components/alert/alert.component";
import { Col } from "antd";
import { SUBSCRIPTION_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
import { useTranslation } from "react-i18next";
import JobsList from "../../components/jobs-list/jobs-list.component";
import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
//TODO: Implement pagination for this.
export default function JobsPage() {
const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
fetchPolicy: "network-only"
@@ -16,11 +18,19 @@ export default function JobsPage() {
document.title = t("titles.jobs");
}, [t]);
if (error) return <AlertComponent message={error.message} />;
const [selectedJob, setSelectedJob] = useState(null);
if (error) return <AlertComponent message={error.message} />;
console.log(selectedJob);
return (
<Col span={22} offset={1}>
<JobsList loading={loading} jobs={data ? data.jobs : null} />
<JobsList
loading={loading}
selectedJob={selectedJob}
setSelectedJob={setSelectedJob}
jobs={data ? data.jobs : null}
/>
<JobDetailCards selectedJob={selectedJob} />
</Col>
);
}

2
client/src/pages/profile/profile.page.jsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Layout, Menu, Icon } from "antd";
import { Layout } from "antd";
import ProfileSideBar from "../../components/profile-sidebar/profile-sidebar.component";
import ProfileContent from "../../components/profile-content/profile-content.component";

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

@@ -57,7 +57,8 @@
"noaccess": "This job does not exist or you do not have access to it.",
"validationtitle": "Validation Error",
"validation": "Please ensure all fields are entered correctly.",
"saving": "Error encountered while saving record."
"saving": "Error encountered while saving record.",
"nojobselected": "No job is selected."
},
"actions": {
"viewJobImages": "View Job Images",
@@ -69,7 +70,5 @@
"card": {}
}
}
}
}