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

Further UI Updates.

Browse Source
This commit is contained in:
Patrick Fic
2021-03-30 17:13:33 -07:00
parent a0654bdb2c
commit a61be6a44f
48 changed files with 755 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.component.jsx
View File

@@ -1,20 +1,56 @@
import { Col, Row, Typography } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { Checkbox, Col, Row } from "antd";
import React, { useContext } from "react";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
import JobsCreateVehicleInfoNewComponent from "./jobs-create-vehicle-info.new.component";
import JobsCreateVehicleInfoSearchComponent from "./jobs-create-vehicle-info.search.component";
import { useTranslation } from "react-i18next";
const colSpan = {
sm: { span: 24 },
lg: { span: 12 },
};
export default function JobsCreateVehicleInfoComponent({ loading, vehicles }) {
const [state, setState] = useContext(JobCreateContext);
const { t } = useTranslation();
return (
<div>
<Typography.Title>{t("jobs.labels.create.vehicleinfo")}</Typography.Title>
<Row gutter={[32, 32]}>
<Row gutter={[16, 16]}>
<Col span={24}>
<Checkbox
defaultChecked={state.vehicle.new}
checked={state.vehicle.new}
onChange={() => {
setState({
...state,
vehicle: {
...state.vehicle,
none: false,
new: !state.vehicle.new,
selectedid: null,
},
});
}}
>
{t("jobs.labels.create.newvehicle")}
</Checkbox>
<Checkbox
defaultChecked={state.vehicle.none}
checked={state.vehicle.none}
onChange={() => {
setState({
...state,
vehicle: {
...state.vehicle,
new: false,
none: !state.vehicle.none,
selectedid: null,
},
});
}}
>
{t("jobs.labels.create.novehicle")}
</Checkbox>
</Col>
<Col {...colSpan}>
<JobsCreateVehicleInfoSearchComponent
loading={loading}

39
client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.new.component.jsx
View File

@@ -1,4 +1,4 @@
import { Checkbox, Form, Input } from "antd";
import { Form, Input } from "antd";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
@@ -6,46 +6,11 @@ import FormDatePicker from "../form-date-picker/form-date-picker.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
export default function JobsCreateVehicleInfoNewComponent() {
const [state, setState] = useContext(JobCreateContext);
const [state] = useContext(JobCreateContext);
const { t } = useTranslation();
return (
<div>
<Checkbox
defaultChecked={state.vehicle.new}
checked={state.vehicle.new}
onChange={() => {
setState({
...state,
vehicle: {
...state.vehicle,
none: false,
new: !state.vehicle.new,
selectedid: null,
},
});
}}
>
{t("jobs.labels.create.newvehicle")}
</Checkbox>
<Checkbox
defaultChecked={state.vehicle.none}
checked={state.vehicle.none}
onChange={() => {
setState({
...state,
vehicle: {
...state.vehicle,
new: false,
none: !state.vehicle.none,
selectedid: null,
},
});
}}
>
{t("jobs.labels.create.novehicle")}
</Checkbox>
<LayoutFormRow header={t("vehicles.forms.detail")} grow>
<Form.Item
label={t("vehicles.fields.v_vin")}

134
client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx
View File

@@ -1,6 +1,6 @@
import React, { useContext, useState } from "react";
import { useTranslation } from "react-i18next";
import { Table, Input } from "antd";
import { Table, Input, Card, Space } from "antd";
import { Link } from "react-router-dom";
import { alphaSort } from "../../utils/sorters";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
@@ -55,73 +55,77 @@ export default function JobsCreateVehicleInfoSearchComponent({
};
return (
<Table
loading={loading}
title={() => {
return (
<div className="imex-table-header">
<Input.Search
className="imex-table-header__search"
placeholder={t("general.labels.search")}
onSearch={(value) => {
setState({
...state,
vehicle: { ...state.vehicle, search: value },
});
}}
enterButton
/>
</div>
);
}}
scroll={{ x: true }}
pagination={{ position: "top" }}
columns={columns}
rowKey="id"
dataSource={vehicles}
onChange={handleTableChange}
rowSelection={{
onSelect: (props) => {
setState({
...state,
vehicle: {
...state.vehicle,
none: false,
new: false,
selectedid: props.id,
vehicleObj: props,
},
});
},
type: "radio",
selectedRowKeys: [state.vehicle.selectedid],
}}
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
if (record) {
if (record.id) {
setState({
...state,
vehicle: {
...state.vehicle,
none: false,
new: false,
selectedid: record.id,
vehicleObj: record,
},
});
return;
}
}
<Card
extra={
<Space wrap>
<Input.Search
placeholder={t("general.labels.search")}
onSearch={(value) => {
setState({
...state,
vehicle: { ...state.vehicle, search: value },
});
}}
enterButton
/>
</Space>
}
>
<Table
loading={loading}
scroll={{ x: true }}
pagination={{ position: "top" }}
columns={columns}
rowKey="id"
dataSource={vehicles}
onChange={handleTableChange}
rowSelection={{
onSelect: (props) => {
setState({
...state,
vehicle: { ...state.vehicle, selectedid: null, vehicleObj: null },
vehicle: {
...state.vehicle,
none: false,
new: false,
selectedid: props.id,
vehicleObj: props,
},
});
},
};
}}
/>
type: "radio",
selectedRowKeys: [state.vehicle.selectedid],
}}
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
if (record) {
if (record.id) {
setState({
...state,
vehicle: {
...state.vehicle,
none: false,
new: false,
selectedid: record.id,
vehicleObj: record,
},
});
return;
}
}
setState({
...state,
vehicle: {
...state.vehicle,
selectedid: null,
vehicleObj: null,
},
});
},
};
}}
/>
</Card>
);
}