Skip to content

R
Repair-app
Commit a7286e74 authored by chaiwat's avatar chaiwat
Browse files
Options

Page AddRepair Dashboard

parent 48558b81
Show whitespace changes
Inline Side-by-side
Showing with 1249 additions and 53 deletions
src/Layouts/munuDashboard.jsx → src/Layouts/Menu/menuDashboard.jsx
View file @ a7286e74
......@@ -13,10 +13,11 @@ import {
CommentOutlined,
SettingOutlined,
LogoutOutlined,
DollarOutlined,
} from "@ant-design/icons";
// import services
import { sendLogout } from "../services";
import { sendLogout } from "../../services";
const { Sider } = Layout;
const { SubMenu } = Menu;
......@@ -29,7 +30,7 @@ export default function App() {
};
const handleLogout = () => {
console.log("test Logout");
// console.log("test Logout");
sendLogout();
setTimeout(() => {
window.location.reload(false);
......@@ -38,7 +39,13 @@ export default function App() {
return (
<>
<div style={{ mixHeight: 360, overflowY: "scroll" }}>
<div
style={{
mixHeight: 360,
backgroundColor: "#001529",
overflowY: "scroll",
}}
>
<Sider
theme="dark"
collapsible
......@@ -71,22 +78,6 @@ export default function App() {
</Menu.Item>
</SubMenu>
<SubMenu
key="sub1"
icon={<UnorderedListOutlined />}
title="จัดการงานซ่อม"
>
<Menu.Item key="2" icon={<OrderedListOutlined />}>
<Link to={"/dashboard/all-repair"}>รายการซ่อม</Link>
</Menu.Item>
<Menu.Item key="3" icon={<AppstoreAddOutlined />}>
<Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
</Menu.Item>
<Menu.Item key="4" icon={<ToolOutlined />}>
<Link to={"/dashboard/status"}>สถานะการซ่อม</Link>
</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<TeamOutlined />} title="จัดการลูกค้า">
<Menu.Item key="5" icon={<UserAddOutlined />}>
<Link to={"/dashboard/add-member"}>ลงทะเบียนลูกค้า</Link>
......@@ -99,6 +90,10 @@ export default function App() {
</Menu.Item>
</SubMenu>
<Menu.Item key="10" icon={<DollarOutlined />}>
<Link to={"/dashboard/payment"}>การชำระเงิน</Link>
</Menu.Item>
<Menu.Item key="8" icon={<SettingOutlined />}>
<Link to={"/dashboard/setting"}>ตั้งค่าบัญชี</Link>
</Menu.Item>
......@@ -109,7 +104,7 @@ export default function App() {
<Menu.Item
onClick={handleLogout}
key="10"
key="11"
icon={<LogoutOutlined />}
>
ออกจากระบบ
......
src/Layouts/menulist.jsx → src/Layouts/Menu/menulist.jsx
View file @ a7286e74
......@@ -24,6 +24,13 @@ export default function App() {
return (
<>
<div
style={{
mixHeight: 360,
backgroundColor: "#001529",
overflowY: "scroll",
}}
>
<Sider
theme="dark"
collapsible
......@@ -56,6 +63,7 @@ export default function App() {
</Menu.Item>
</Menu>
</Sider>
</div>
</>
);
}
src/Layouts/VerticalLayout.jsx
View file @ a7286e74
......@@ -4,13 +4,10 @@ import { useHistory } from "react-router-dom";
import { Layout } from "antd";
// import Component
import HeaderTap from "./tabHeader";
import MenuList from "./menulist";
import MenuDashboard from './munuDashboard'
import HeaderTap from "./Header/tabHeader";
import MenuList from "./Menu/menulist";
import MenuDashboard from "./Menu/menuDashboard";
//import
// import Login from "../view/Login";
// import RegistionPage from "../view/Registion";
const { Content, Footer } = Layout;
......@@ -23,16 +20,15 @@ export default function VerticalLayout(props) {
useEffect(() => {
// console.log("local", localStorage.getItem("user"));
setChechLocal(JSON.parse(localStorage.getItem("user")))
setChechLocal(JSON.parse(localStorage.getItem("user")));
}, []);
if (checkLocal === null) {
history.push("/")
}else {
history.push("/dashboard")
history.push("/");
} else {
history.push("/dashboard");
}
// console.log(checkLocal);
return (
......@@ -68,7 +64,6 @@ export default function VerticalLayout(props) {
</Layout>
</Layout>
) : (
<>
<Layout
style={{
minHeight: "93vh",
......@@ -77,8 +72,20 @@ export default function VerticalLayout(props) {
}}
>
<MenuDashboard />
<Layout className="site-layout">
<Content style={{ margin: "1vh 1vh" }}>
<div
className="site-layout-background"
style={{ mixHeight: 360, overflowY: "scroll" }}
>
{children}
</div>
</Content>
<Footer className="footer">
<p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
</Footer>
</Layout>
</Layout>
</>
)}
</>
);
......
src/assets/less/index.less
View file @ a7286e74
......@@ -4,3 +4,4 @@
@import "pages/getstartes.less";
@import "pages/register.less";
@import "pages/reported.less";
@import "pages/dashboard/index.less";
src/assets/less/pages/dashboard/index.less 0 → 100644
View file @ a7286e74
.div-content-repairadd {
border: 1px solid #333;
height: auto;
padding: 0 5% 5% 5%;
margin: 0 5% 5% 5%;
// background-color: #a3b4c8;
}
.main-select-repair {
padding: 10px;
// border: 1px solid #333;
// box-shadow: 1px 3px #001529;
}
.div-content-main {
// border: 1px solid #333;
}
.main-content-repair {
padding: 10px;
// border: 1px solid #333;
height: auto;
// display: flex;
}
.div-select {
border: 1px solid #333;
}
.div-select-flex {
display: flex;
}
.test-box {
border: 1px solid #333;
}
\ No newline at end of file
src/router/Routers.jsx
View file @ a7286e74
import React from "react";
// import React, { useEffect, useState } from "react";
// Router
import { BrowserRouter as AppRouter, Route, Switch } from "react-router-dom";
// import Ecommerce from "../view/Dashboards/ecommerce";
// import HeaderTap from "../Layouts/tabHeader";
// import MenuList from "../Layouts/menulist";
//import
// import Login from "../view/Login";
// import RegistionPage from "../view/Registion";
import {
BrowserRouter as AppRouter,
Route,
Switch,
} from "react-router-dom";
// Routes
import { Routes } from "./routes";
......@@ -16,23 +13,31 @@ import { Routes } from "./routes";
// Layouts
import VerticalLayout from "../Layouts/VerticalLayout";
import FullLayout from "../Layouts/FullLayout";
// import DashboardLayout from "../Layouts/DashboardLayout";
// Components
import ProtectedRoute from "../ProtectdRoute";
// import { Layout } from "antd";
export default function Routers() {
// const history = useHistory();
// const [checkLocal, setChechLocal] = useState(null);
// useEffect(() => {
// console.log("local", localStorage.getItem("user") === null);
// setChechLocal(JSON.parse(localStorage.getItem("user")));
// }, []);
// const { Content, Footer } = Layout;
export default function Routers() {
// Default Layout
const DefaultLayout = null; // FullLayout or VerticalLayout
// All of the available layouts
const Layouts = { VerticalLayout, FullLayout };
// Return Filtered Array of Routes & Paths
// const LayoutsDashboard = { DashboardLayout, FullLayout };
// Return Filtered Array of Routes & Paths for default page
const LayoutRoutesAndPaths = (layout) => {
const LayoutRoutes = [];
const LayoutPaths = [];
......@@ -48,8 +53,27 @@ export default function Routers() {
return { LayoutRoutes, LayoutPaths };
};
// Return Filtered Array of Routes & Paths for dashboard page
// const LayoutRoutesAndPathsDashboard = (layout) => {
// const LayoutRoutes2 = [];
// const LayoutPaths2 = [];
// if (Routes) {
// // Checks if Route layout or Default layout matches current layout
// Routes.filter(
// (route) =>
// (route.layout === layout || DefaultLayout === layout) &&
// (LayoutRoutes2.push(route), LayoutPaths2.push(route.path))
// );
// }
// return { LayoutRoutes2, LayoutPaths2 };
// };
// Return Route to Render
const ResolveRoutes = () => {
return Object.keys(Layouts).map((layout, index) => {
const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout);
const LayoutTag = Layouts[layout];
......@@ -74,9 +98,58 @@ export default function Routers() {
});
};
// Return Route to Render
// const ResolveRoutesDash = () => {
// console.log("local2", checkLocal);
// return Object.keys(LayoutsDashboard).map((layout, index) => {
// const { LayoutRoutes2, LayoutPaths2 } =
// LayoutRoutesAndPathsDashboard(layout);
// const LayoutTag = LayoutsDashboard[layout];
// return (
// <Route path={LayoutPaths2} key={index}>
// <LayoutTag>
// <Switch>
// {LayoutRoutes2.map((route) => {
// return (
// <ProtectedRoute
// key={route.path}
// path={route.path}
// exact
// component={route.component}
// />
// );
// })}
// </Switch>
// </LayoutTag>
// </Route>
// );
// });
// };
// let ContentMain;
// const Resolve = () => {
// // {checkLocal === null ? ResolveRoutes() : ResolveRoutesDash()}
// return (
// <>
// {checkLocal === null ? <ResolveRoutes /> : <ResolveRoutesDash />}
// </>
// )
// }
// if (checkLocal === null) {
// history.push("/");
// } else {
// history.push("/dashboard/add-detail");
// }
return (
<AppRouter>
<Switch>{ResolveRoutes()}</Switch>
<Switch>
{ResolveRoutes()}
</Switch>
</AppRouter>
);
}
src/router/routes/Pages.jsx
View file @ a7286e74
......@@ -54,9 +54,14 @@ const PagesRoutes = [
// pages 404
{
path: '/pages/error-404',
component: lazy(() => import('../../view/Errors/404/index')),
layout: 'FullLayout',
path: '/dashboard',
component: lazy(() => import('../../view/Dashboards/repairDashboard/repairAdd/index')),
layout: 'VerticalLayout',
},
{
path: '/dashboard/add-detail',
component: lazy(() => import('../../view/Dashboards/repairDashboard/repairAdd/index')),
layout: 'VerticalLayout',
},
];
......
src/services/index.js
View file @ a7286e74
......@@ -31,8 +31,8 @@ export const sendLogin = (data) => {
// logout
export const sendLogout = () => {
return localStorage.removeItem("user")
}
return localStorage.removeItem("user");
};
// get list All garage
export const FetchGarageAll = () => {
......@@ -47,3 +47,23 @@ export const FetchGarageAll = () => {
})
);
};
// Fetch Thai Address API
export const FetchThaiAddress = () => {
return axios
.get("https://thaiaddressapi-thaikub.herokuapp.com/v1/thailand/provinces")
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// get Thai Address API
export const FetchMemberTel = () => {
return axios
.get(process.env.REACT_APP_SECRET_API + "/member/all")
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
src/view/Dashboards/repairDashboard/repairAdd/component/agriculture.jsx 0 → 100644
View file @ a7286e74
import React, { useEffect, useState } from "react";
import {
Row,
Col,
Form,
Input,
Button,
Select,
Divider,
DatePicker,
} from "antd";
// import services
import { FetchThaiAddress, FetchMemberTel } from "../../../../../services";
import Brand from "../data/brand.json";
// const { Title, Text } = Typography;
const { Option } = Select;
export default function App(props) {
const { typeSelect, checkLocal } = props;
// UseState
const [province, setProvinec] = useState([]);
const [member, setMember] = useState([]);
useEffect(() => {
const getThaiAddress = async () => {
await FetchThaiAddress().then((response) => {
if (response) {
setProvinec(response.data);
}
});
};
getThaiAddress();
const getMemberTel = async () => {
await FetchMemberTel().then((response) => {
if (response) {
// console.log("Member", response.data);
response.data.forEach((element) => {
setMember((arr) => [...arr, element.member_tel]);
});
}
});
};
getMemberTel();
}, []);
// console.log("Member", member);
const [form] = Form.useForm();
const onFinish = (values) => {
let dd = values.repair_date._d.getDate();
let mm = values.repair_date._d.getMonth() + 1;
let yyyy = values.repair_date._d.getFullYear();
let newDate = `${dd}/${mm}/${yyyy}`;
// dates;
const data = {
garageID: checkLocal.userData.userId,
member_tel: values.member_tel,
device_type: typeSelect,
car_number: values.car_number,
car_province: values.car_province,
brand: values.brand,
model: values.model,
kilo_number: values.kilo_number,
repair_date: newDate,
repair_detail: values.repair_detail,
};
if (member.includes(values.member_tel) === true) {
console.log("datas", data);
} else {
alert(`หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม`)
}
};
return (
<>
<Divider />
<Row>
<Col span={24}>
<div className="div-content-main">
<Form
form={form}
name="register"
onFinish={onFinish}
initialValues={{
residence: ["zhejiang", "hangzhou", "xihu"],
prefix: "86",
}}
scrollToFirstError
>
<div className="main-content-repair">
{/* หมายเลขโทรศัพท์ของลูกค้า */}
<Col
xs={{ span: 20, offset: 2 }}
md={{ span: 16, offset: 4 }}
xl={{ span: 12, offset: 6 }}
>
<Form.Item
name="member_tel"
label="รหัสลูกค้า"
tooltip="หมายเลขโทรศัพท์ของลูกค้าที่สมัครสมาชิกไว้เรียบร้อยแล้ว"
rules={[
{
required: true,
message: "กรุณากรอกรหัสของลูกค้า!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
<Row gutter={[0, 16]}>
{/* หมายเลขทะเบียนรถ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="car_number"
label="ทะเบียนรถ"
tooltip="หมายเลขทะเบียนรถ"
rules={[
{
required: true,
message: "กรุณากรอกหมายเลขทะเบียนรถ!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
{/* จังหวัด */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="car_province"
label="จังหวัด"
tooltip="ทะเบียนจังหวัด"
rules={[
{
required: true,
message: "กรุณาเลือกทะเบียนจังหวัด!",
whitespace: true,
},
]}
>
<Select
allowClear
style={{ width: "100%" }}
placeholder="เลือกจังหวัด"
// onChange={(e) => {
// setTypeSelect(e);
// }}
>
{province.length !== 0 ? (
<>
{province.map((api, index) => (
<Option key={index} value={api.province}>
{api.province}
</Option>
))}
</>
) : null}
</Select>
</Form.Item>
</Col>
{/* ยี่ห้อ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="brand"
label="ยี่ห้อ"
tooltip="ยี่ห้อของรถ"
rules={[
{
required: true,
message: "กรุณาเลือกยี่ห้อของรถ!",
whitespace: true,
},
]}
>
<Select
allowClear
style={{ width: "100%" }}
placeholder="เลือกยี่ห้อ"
>
{Brand.length !== 0 ? (
<>
{Brand.type.car.map((brand, index) => (
<Option key={index} value={brand}>
{brand}
</Option>
))}
</>
) : null}
</Select>
</Form.Item>
</Col>
{/* รุ่น Model */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="model"
label="รุ่น"
tooltip="รุ่นของรถ"
rules={[
{
required: true,
message: "กรุณากรอกรุ่นของรถ!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
{/* รุ่น Kilo Number */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="kilo_number"
label="หมายเลขกิโล"
tooltip="หมายเลขกิโลของรถ ณ วันที่ซ่อม"
rules={[
{
required: true,
message: "กรุณากรอกหมายเลขกิโล!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
{/* วันที่ รับรถ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
label="วันที่รับรถ"
name="repair_date"
tooltip="เลือกวันที่รับรถ"
>
<DatePicker />
</Form.Item>
</Col>
{/* รายละเอียดการซ่อมเบื้องต้น */}
<Col xs={4} md={4} xl={4}></Col>
<Col xs={16} md={16} xl={16}>
<Form.Item
name="repair_detail"
label="รายละเอียดการซ่อมเบื้องต้น"
tooltip="รายละเอียดการซ่อมเบื้องต้น"
>
<Input.TextArea />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
เพิ่มการซ่อม
</Button>
</Form.Item>
</Col>
<Col xs={4} md={4} xl={4}></Col>
</Row>
</div>
</Form>
</div>
</Col>
</Row>
</>
);
}
src/view/Dashboards/repairDashboard/repairAdd/component/car.jsx 0 → 100644
View file @ a7286e74
import React, { useEffect, useState } from "react";
import {
Row,
Col,
Form,
Input,
Button,
Select,
Divider,
DatePicker,
} from "antd";
// import services
import { FetchThaiAddress, FetchMemberTel } from "../../../../../services";
import Brand from "../data/brand.json";
// const { Title, Text } = Typography;
const { Option } = Select;
export default function App(props) {
const { typeSelect, checkLocal } = props;
// UseState
const [province, setProvinec] = useState([]);
const [member, setMember] = useState([]);
useEffect(() => {
const getThaiAddress = async () => {
await FetchThaiAddress().then((response) => {
if (response) {
setProvinec(response.data);
}
});
};
getThaiAddress();
const getMemberTel = async () => {
await FetchMemberTel().then((response) => {
if (response) {
// console.log("Member", response.data);
response.data.forEach((element) => {
setMember((arr) => [...arr, element.member_tel]);
});
}
});
};
getMemberTel();
}, []);
// console.log("Member", member);
const [form] = Form.useForm();
const onFinish = (values) => {
let dd = values.repair_date._d.getDate();
let mm = values.repair_date._d.getMonth() + 1;
let yyyy = values.repair_date._d.getFullYear();
let newDate = `${dd}/${mm}/${yyyy}`;
// dates;
const data = {
garageID: checkLocal.userData.userId,
member_tel: values.member_tel,
device_type: typeSelect,
car_number: values.car_number,
car_province: values.car_province,
brand: values.brand,
model: values.model,
kilo_number: values.kilo_number,
repair_date: newDate,
repair_detail: values.repair_detail,
};
if (member.includes(values.member_tel) === true) {
console.log("datas", data);
} else {
alert(`หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม`)
}
};
return (
<>
<Divider />
<Row>
<Col span={24}>
<div className="div-content-main">
<Form
form={form}
name="register"
onFinish={onFinish}
initialValues={{
residence: ["zhejiang", "hangzhou", "xihu"],
prefix: "86",
}}
scrollToFirstError
>
<div className="main-content-repair">
{/* หมายเลขโทรศัพท์ของลูกค้า */}
<Col
xs={{ span: 20, offset: 2 }}
md={{ span: 16, offset: 4 }}
xl={{ span: 12, offset: 6 }}
>
<Form.Item
name="member_tel"
label="รหัสลูกค้า"
tooltip="หมายเลขโทรศัพท์ของลูกค้าที่สมัครสมาชิกไว้เรียบร้อยแล้ว"
rules={[
{
required: true,
message: "กรุณากรอกรหัสของลูกค้า!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
<Row gutter={[0, 16]}>
{/* หมายเลขทะเบียนรถ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="car_number"
label="ทะเบียนรถ"
tooltip="หมายเลขทะเบียนรถ"
rules={[
{
required: true,
message: "กรุณากรอกหมายเลขทะเบียนรถ!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
{/* จังหวัด */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="car_province"
label="จังหวัด"
tooltip="ทะเบียนจังหวัด"
rules={[
{
required: true,
message: "กรุณาเลือกทะเบียนจังหวัด!",
whitespace: true,
},
]}
>
<Select
allowClear
style={{ width: "100%" }}
placeholder="เลือกจังหวัด"
// onChange={(e) => {
// setTypeSelect(e);
// }}
>
{province.length !== 0 ? (
<>
{province.map((api, index) => (
<Option key={index} value={api.province}>
{api.province}
</Option>
))}
</>
) : null}
</Select>
</Form.Item>
</Col>
{/* ยี่ห้อ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="brand"
label="ยี่ห้อ"
tooltip="ยี่ห้อของรถ"
rules={[
{
required: true,
message: "กรุณาเลือกยี่ห้อของรถ!",
whitespace: true,
},
]}
>
<Select
allowClear
style={{ width: "100%" }}
placeholder="เลือกยี่ห้อ"
>
{Brand.length !== 0 ? (
<>
{Brand.type.car.map((brand, index) => (
<Option key={index} value={brand}>
{brand}
</Option>
))}
</>
) : null}
</Select>
</Form.Item>
</Col>
{/* รุ่น Model */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="model"
label="รุ่น"
tooltip="รุ่นของรถ"
rules={[
{
required: true,
message: "กรุณากรอกรุ่นของรถ!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
{/* รุ่น Kilo Number */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="kilo_number"
label="หมายเลขกิโล"
tooltip="หมายเลขกิโลของรถ ณ วันที่ซ่อม"
rules={[
{
required: true,
message: "กรุณากรอกหมายเลขกิโล!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
{/* วันที่ รับรถ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
label="วันที่รับรถ"
name="repair_date"
tooltip="เลือกวันที่รับรถ"
>
<DatePicker />
</Form.Item>
</Col>
{/* รายละเอียดการซ่อมเบื้องต้น */}
<Col xs={4} md={4} xl={4}></Col>
<Col xs={16} md={16} xl={16}>
<Form.Item
name="repair_detail"
label="รายละเอียดการซ่อมเบื้องต้น"
tooltip="รายละเอียดการซ่อมเบื้องต้น"
>
<Input.TextArea />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
เพิ่มการซ่อม
</Button>
</Form.Item>
</Col>
<Col xs={4} md={4} xl={4}></Col>
</Row>
</div>
</Form>
</div>
</Col>
</Row>
</>
);
}
src/view/Dashboards/repairDashboard/repairAdd/component/motorcycle.jsx 0 → 100644
View file @ a7286e74
import React, { useEffect, useState } from "react";
import {
Row,
Col,
Form,
Input,
Button,
Select,
Divider,
DatePicker,
} from "antd";
// import services
import { FetchThaiAddress, FetchMemberTel } from "../../../../../services";
import Brand from "../data/brand.json";
// const { Title, Text } = Typography;
const { Option } = Select;
export default function App(props) {
const { typeSelect, checkLocal } = props;
// UseState
const [province, setProvinec] = useState([]);
const [member, setMember] = useState([]);
useEffect(() => {
const getThaiAddress = async () => {
await FetchThaiAddress().then((response) => {
if (response) {
setProvinec(response.data);
}
});
};
getThaiAddress();
const getMemberTel = async () => {
await FetchMemberTel().then((response) => {
if (response) {
// console.log("Member", response.data);
response.data.forEach((element) => {
setMember((arr) => [...arr, element.member_tel]);
});
}
});
};
getMemberTel();
}, []);
// console.log("Member", member);
const [form] = Form.useForm();
const onFinish = (values) => {
let dd = values.repair_date._d.getDate();
let mm = values.repair_date._d.getMonth() + 1;
let yyyy = values.repair_date._d.getFullYear();
let newDate = `${dd}/${mm}/${yyyy}`;
// dates;
const data = {
garageID: checkLocal.userData.userId,
member_tel: values.member_tel,
device_type: typeSelect,
car_number: values.car_number,
car_province: values.car_province,
brand: values.brand,
model: values.model,
kilo_number: values.kilo_number,
repair_date: newDate,
repair_detail: values.repair_detail,
};
if (member.includes(values.member_tel) === true) {
console.log("datas", data);
} else {
alert(`หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม`)
}
};
return (
<>
<Divider />
<Row>
<Col span={24}>
<div className="div-content-main">
<Form
form={form}
name="register"
onFinish={onFinish}
initialValues={{
residence: ["zhejiang", "hangzhou", "xihu"],
prefix: "86",
}}
scrollToFirstError
>
<div className="main-content-repair">
{/* หมายเลขโทรศัพท์ของลูกค้า */}
<Col
xs={{ span: 20, offset: 2 }}
md={{ span: 16, offset: 4 }}
xl={{ span: 12, offset: 6 }}
>
<Form.Item
name="member_tel"
label="รหัสลูกค้า"
tooltip="หมายเลขโทรศัพท์ของลูกค้าที่สมัครสมาชิกไว้เรียบร้อยแล้ว"
rules={[
{
required: true,
message: "กรุณากรอกรหัสของลูกค้า!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
<Row gutter={[0, 16]}>
{/* หมายเลขทะเบียนรถ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="car_number"
label="ทะเบียนรถ"
tooltip="หมายเลขทะเบียนรถ"
rules={[
{
required: true,
message: "กรุณากรอกหมายเลขทะเบียนรถ!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
{/* จังหวัด */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="car_province"
label="จังหวัด"
tooltip="ทะเบียนจังหวัด"
rules={[
{
required: true,
message: "กรุณาเลือกทะเบียนจังหวัด!",
whitespace: true,
},
]}
>
<Select
allowClear
style={{ width: "100%" }}
placeholder="เลือกจังหวัด"
// onChange={(e) => {
// setTypeSelect(e);
// }}
>
{province.length !== 0 ? (
<>
{province.map((api, index) => (
<Option key={index} value={api.province}>
{api.province}
</Option>
))}
</>
) : null}
</Select>
</Form.Item>
</Col>
{/* ยี่ห้อ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="brand"
label="ยี่ห้อ"
tooltip="ยี่ห้อของรถ"
rules={[
{
required: true,
message: "กรุณาเลือกยี่ห้อของรถ!",
whitespace: true,
},
]}
>
<Select
allowClear
style={{ width: "100%" }}
placeholder="เลือกยี่ห้อ"
>
{Brand.length !== 0 ? (
<>
{Brand.type.moto.map((brand, index) => (
<Option key={index} value={brand}>
{brand}
</Option>
))}
</>
) : null}
</Select>
</Form.Item>
</Col>
{/* รุ่น Model */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="model"
label="รุ่น"
tooltip="รุ่นของรถ"
rules={[
{
required: true,
message: "กรุณากรอกรุ่นของรถ!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
{/* รุ่น Kilo Number */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
name="kilo_number"
label="หมายเลขกิโล"
tooltip="หมายเลขกิโลของรถ ณ วันที่ซ่อม"
rules={[
{
required: true,
message: "กรุณากรอกหมายเลขกิโล!",
whitespace: true,
},
]}
>
<Input />
</Form.Item>
</Col>
{/* วันที่ รับรถ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
xl={{ span: 7, offset: 1 }}
>
<Form.Item
label="วันที่รับรถ"
name="repair_date"
tooltip="เลือกวันที่รับรถ"
>
<DatePicker />
</Form.Item>
</Col>
{/* รายละเอียดการซ่อมเบื้องต้น */}
<Col xs={4} md={4} xl={4}></Col>
<Col xs={16} md={16} xl={16}>
<Form.Item
name="repair_detail"
label="รายละเอียดการซ่อมเบื้องต้น"
tooltip="รายละเอียดการซ่อมเบื้องต้น"
>
<Input.TextArea />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
เพิ่มการซ่อม
</Button>
</Form.Item>
</Col>
<Col xs={4} md={4} xl={4}></Col>
</Row>
</div>
</Form>
</div>
</Col>
</Row>
</>
);
}
src/view/Dashboards/repairDashboard/repairAdd/data/brand.json 0 → 100644
View file @ a7286e74
{
"type": {
"moto" : [
"Honda ฮอนด้า",
"Yamaha ยามาฮ่า",
"Harley-Davidson",
"Kawasaki",
"Suzuki ซูซูกิ",
"GPX จีพีเอ็กซ์",
"Royal Enfield",
"Vespa",
"Ducati ดูคาติ",
"BMW บีเอ็มดับเบิลยู",
"Ducati ดูคาติ",
"Jeep จี๊ป",
"Benelli",
"MV Agusta"
],
"car" : [
"Honda",
"Isuzu",
"Suzuki",
"Mitsubishi",
"Nissan",
"Toyota",
"Mazda",
"Ford",
"Aston Martin",
"Lamborghini",
"Audi",
"Mercedes-Benz",
"Subaru",
"Volvo",
"BMW",
"Hyundai",
"MG",
"Mini",
"Chevrolet",
"Maserati",
"Thairung"
]
}
}
\ No newline at end of file
src/view/Dashboards/repairDashboard/repairAdd/index.jsx
View file @ a7286e74
import React, { useEffect, useState } from "react";
import { Row, Col, Typography, Select } from "antd";
// import Component
import Car from "./component/car";
import Agriculture from "./component/agriculture";
import Motorcycle from "./component/motorcycle";
const { Title, Text } = Typography;
const { Option } = Select;
export default function App() {
const [typeSelect, setTypeSelect] = useState();
const [checkLocal, setChechLocal] = useState(null);
useEffect(() => {
// console.log("local", localStorage.getItem("user"));
setChechLocal(JSON.parse(localStorage.getItem("user")));
}, []);
let MainContent;
if (typeSelect === "รถยนต์") {
MainContent = <Car typeSelect={typeSelect} checkLocal={checkLocal} />;
} else if (typeSelect === "รถจักรยานยนต์") {
MainContent = (
<Motorcycle typeSelect={typeSelect} checkLocal={checkLocal} />
);
} else if (typeSelect === "อุปกรณ์การเกษตร") {
MainContent = (
<Agriculture typeSelect={typeSelect} checkLocal={checkLocal} />
);
} else {
MainContent = null;
}
return (
<>
<Row>
<Col span={24} className="box-text-title">
<Title level={4}>เพิ่มการซ่อม</Title>
</Col>
<Col span={24}>
<div className="div-content-repairadd">
<Col className="main-select-repair">
<Title level={5}>ประเภทของอุปกรณ์</Title>
<Row>
<Col
xs={{ span: 1, offset: 1 }}
lg={{ span: 4, offset: 2 }}
></Col>
<Col xs={{ span: 19, offset: 1 }} lg={{ span: 8, offset: 2 }}>
<div className="div-select">
<Select
allowClear
style={{ width: "100%" }}
placeholder="กรุณาเลือกประเภท"
onChange={(e) => {
setTypeSelect(e);
}}
>
<Option value="รถยนต์">รถยนต์</Option>
<Option value="รถจักรยานยนต์">รถจักรยานยนต์</Option>
<Option value="อุปกรณ์การเกษตร">อุปกรณ์การเกษตร</Option>
</Select>
</div>
</Col>
<Col
xs={{ span: 1, offset: 1 }}
lg={{ span: 4, offset: 2 }}
></Col>
</Row>
</Col>
<div style={{display: 'flex', marginTop: '10px'}}>
<Title style={{ color: "red" }} level={5}>
หมายเหตุ : &nbsp;
</Title>
<Text>
ในการเพิ่มการซ่อมเเต่ละครั้งลูกค้าจำเป็นต้องสมัครสมาชิกก่อนทุกครั้ง
</Text>
</div>
{MainContent}
</div>
</Col>
</Row>
</>
);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment