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

All CC screen improvements + date type changes. BOD-235 BOD-233

Browse Source
This commit is contained in:
Patrick Fic
2020-07-28 17:19:54 -07:00
parent 698833edd9
commit b51f5b0db2
21 changed files with 479 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx
View File

@@ -1,8 +1,8 @@
import { Slider } from "antd";
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, forwardRef } from "react";
import { useTranslation } from "react-i18next";
const CourtesyCarFuelComponent = ({ value = 100, onChange }) => {
const CourtesyCarFuelComponent = ({ value = 100, onChange }, ref) => {
const [option, setOption] = useState(value);
const { t } = useTranslation();
@@ -15,9 +15,9 @@ const CourtesyCarFuelComponent = ({ value = 100, onChange }) => {
const marks = {
0: {
style: {
color: "#f50"
color: "#f50",
},
label: t("courtesycars.labels.fuel.empty")
label: t("courtesycars.labels.fuel.empty"),
},
13: t("courtesycars.labels.fuel.18"),
25: t("courtesycars.labels.fuel.14"),
@@ -28,14 +28,15 @@ const CourtesyCarFuelComponent = ({ value = 100, onChange }) => {
88: t("courtesycars.labels.fuel.78"),
100: {
style: {
color: "#008000"
color: "#008000",
},
label: <strong>{t("courtesycars.labels.fuel.full")}</strong>
}
label: <strong>{t("courtesycars.labels.fuel.full")}</strong>,
},
};
return (
<Slider
ref={ref}
marks={marks}
defaultValue={value}
onChange={setOption}
@@ -43,4 +44,4 @@ const CourtesyCarFuelComponent = ({ value = 100, onChange }) => {
/>
);
};
export default CourtesyCarFuelComponent;
export default forwardRef(CourtesyCarFuelComponent);

15
client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx
View File

@@ -1,12 +1,12 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, forwardRef } from "react";
import { Select } from "antd";
import { useTranslation } from "react-i18next";
const { Option } = Select;
const CourtesyCarStatusComponent = ({
value = "courtesycars.status.in",
onChange
}) => {
const CourtesyCarStatusComponent = (
{ value = "courtesycars.status.in", onChange },
ref
) => {
const [option, setOption] = useState(value);
const { t } = useTranslation();
@@ -18,9 +18,10 @@ const CourtesyCarStatusComponent = ({
return (
<Select
ref={ref}
value={option}
style={{
width: 100
width: 100,
}}
onChange={setOption}
>
@@ -36,4 +37,4 @@ const CourtesyCarStatusComponent = ({
</Select>
);
};
export default CourtesyCarStatusComponent;
export default forwardRef(CourtesyCarStatusComponent);

55
client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
View File

@@ -9,7 +9,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
sortedInfo: {},
filteredInfo: { text: "" },
});
const [searchText, setSearchText] = useState("");
const { t } = useTranslation();
const columns = [
@@ -36,6 +36,17 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
dataIndex: "status",
key: "status",
sorter: (a, b) => alphaSort(a.status, b.status),
filters: [
{
text: t("courtesycars.status.in"),
value: "courtesycars.status.in",
},
{
text: t("courtesycars.status.out"),
value: "courtesycars.status.out",
},
],
onFilter: (value, record) => value.includes(record.status),
sortOrder:
state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
render: (text, record) => t(record.status),
@@ -64,17 +75,45 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
sortOrder:
state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
},
{
title: t("courtesycars.fields.outwith"),
dataIndex: "outwith",
key: "outwith",
// sorter: (a, b) => alphaSort(a.model, b.model),
sortOrder:
state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
render: (text, record) => (
<div>
{record.cccontracts.length === 1
? record.cccontracts[0].job.ro_number
: null}
</div>
),
},
];
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
const tableData = searchText
? courtesycars.filter(
(c) =>
(c.fleetnumber || "")
.toLowerCase()
.includes(searchText.toLowerCase()) ||
(c.vin || "").toLowerCase().includes(searchText.toLowerCase()) ||
(c.year || "").toLowerCase().includes(searchText.toLowerCase()) ||
(c.make || "").toLowerCase().includes(searchText.toLowerCase()) ||
(c.model || "").toLowerCase().includes(searchText.toLowerCase()) ||
(t(c.status) || "").toLowerCase().includes(searchText.toLowerCase())
)
: courtesycars;
return (
<Table
loading={loading}
title={() => (
<div className='imex-table-header'>
<div className="imex-table-header">
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
@@ -82,21 +121,21 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
<Button>{t("courtesycars.actions.new")}</Button>
</Link>
<Input.Search
className='imex-table-header__search'
className="imex-table-header__search"
placeholder={t("general.labels.search")}
onChange={(e) => {
//setSearchText(e.target.value);
setSearchText(e.target.value);
}}
//value={searchText}
value={searchText}
enterButton
/>
</div>
)}
size='small'
size="small"
pagination={{ position: "top" }}
columns={columns.map((item) => ({ ...item }))}
rowKey='id'
dataSource={courtesycars}
rowKey="id"
dataSource={tableData}
onChange={handleTableChange}
/>
);