Commit 25ddf61a authored by chaiwat's avatar chaiwat

add Table show detail

parent a7286e74
......@@ -15,6 +15,7 @@
"@testing-library/user-event": "^12.1.10",
"antd": "^4.18.2",
"axios": "^0.24.0",
"canvasjs-react-charts": "^1.0.5",
"craco-less": "^2.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
......@@ -8374,6 +8375,11 @@
"integrity": "sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ==",
"license": "CC-BY-4.0"
},
"node_modules/canvasjs-react-charts": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/canvasjs-react-charts/-/canvasjs-react-charts-1.0.5.tgz",
"integrity": "sha512-8P3KnAvCqftmqf4O/xG6PlIDcTr0IvzuE4l6ACXIOROKtFmnmUu/xPEeq+0vI9Xvh7zXjzZvRqw0p1uxXr034g=="
},
"node_modules/capture-exit": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
......@@ -33403,6 +33409,11 @@
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001035.tgz",
"integrity": "sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ=="
},
"canvasjs-react-charts": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/canvasjs-react-charts/-/canvasjs-react-charts-1.0.5.tgz",
"integrity": "sha512-8P3KnAvCqftmqf4O/xG6PlIDcTr0IvzuE4l6ACXIOROKtFmnmUu/xPEeq+0vI9Xvh7zXjzZvRqw0p1uxXr034g=="
},
"capture-exit": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
......@@ -10,6 +10,7 @@
"@testing-library/user-event": "^12.1.10",
"antd": "^4.18.2",
"axios": "^0.24.0",
"canvasjs-react-charts": "^1.0.5",
"craco-less": "^2.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
......
......@@ -8,7 +8,6 @@ import HeaderTap from "./Header/tabHeader";
import MenuList from "./Menu/menulist";
import MenuDashboard from "./Menu/menuDashboard";
const { Content, Footer } = Layout;
export default function VerticalLayout(props) {
......@@ -16,6 +15,7 @@ export default function VerticalLayout(props) {
// let test = "";
const history = useHistory();
const [checkLocal, setChechLocal] = useState(null);
useEffect(() => {
......@@ -26,7 +26,10 @@ export default function VerticalLayout(props) {
if (checkLocal === null) {
history.push("/");
} else {
history.push("/dashboard");
history.push({
pathname: "/dashboard",
state: checkLocal.userData.userId
});
}
// console.log(checkLocal);
......
......@@ -6,8 +6,6 @@
// background-color: #a3b4c8;
}
.main-select-repair {
padding: 10px;
// border: 1px solid #333;
......@@ -33,7 +31,58 @@
display: flex;
}
.test-box {
border: 1px solid #333;
}
.display-flex-main {
display: flex;
justify-content: center;
height: auto;
// border: 1px solid #333;
}
.div-content-chart {
width: 70%;
}
.content-chart {
display: flex;
// border: 1px solid #333;
}
.div-title-detail {
background-color: #001529;
height: auto;
}
.title-show-detail {
padding: 10px;
}
.color-fff {
color: aliceblue;
}
.color-fff-hover {
color: aliceblue;
}
.color-fff-hover:hover {
color: rgb(0, 0, 0);
}
.color-bfbf {
color: #bfbfbf;
}
.div-p-5 {
padding: 5%;
// border: 1px solid #001529;
}
.border {
border: 1px solid #001529;
}
......@@ -5,3 +5,10 @@
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
.bt-them {
background-color: #001529;
color: aliceblue;
}
\ No newline at end of file
......@@ -20,13 +20,6 @@ import FullLayout from "../Layouts/FullLayout";
import ProtectedRoute from "../ProtectdRoute";
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")));
// }, []);
// Default Layout
......@@ -35,7 +28,6 @@ export default function Routers() {
// All of the available layouts
const Layouts = { VerticalLayout, FullLayout };
// const LayoutsDashboard = { DashboardLayout, FullLayout };
// Return Filtered Array of Routes & Paths for default page
const LayoutRoutesAndPaths = (layout) => {
......@@ -53,22 +45,6 @@ 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
......
......@@ -52,17 +52,33 @@ const PagesRoutes = [
layout: "VerticalLayout",
},
// pages 404
// Dashboard
{
path: '/dashboard',
component: lazy(() => import('../../view/Dashboards/repairDashboard/repairAdd/index')),
component: lazy(() => import('../../view/Dashboards/ecommerce/index')),
layout: 'VerticalLayout',
},
// add-detail
{
path: '/dashboard/add-detail',
component: lazy(() => import('../../view/Dashboards/repairDashboard/repairAdd/index')),
layout: 'VerticalLayout',
},
// all-repair
{
path: '/dashboard/all-repair',
component: lazy(() => import('../../view/Dashboards/repairDashboard/repairList/index')),
layout: 'VerticalLayout',
},
// show-repair
{
path: '/dashboard/all-repair/detail',
component: lazy(() => import('../../view/Dashboards/repairDashboard/repairList/ShowDetail')),
layout: 'VerticalLayout',
},
];
export default PagesRoutes;
......@@ -67,3 +67,45 @@ export const FetchMemberTel = () => {
console.log(err);
});
};
// send data to InsertDetails
export const InsertDetails = (data) => {
return axios
.post(process.env.REACT_APP_SECRET_API + "/repairdetail/insert", data)
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// get data FetctDetailByGarage
export const FetctDetailByGarage = (data) => {
// console.log('fetdata', data)
return (
axios
// .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", data)
.get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", {
params: data,
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
})
);
};
// get data FetctDetailByGarageID
export const FetctDetailByGarageID = (data) => {
// console.log('fetdata', data)
return (
axios
// .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", data)
.get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbydetailID", {
params: data,
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
})
);
};
import React, { useState, useEffect } from "react";
import {
// Row,
// Col,
Modal,
Button,
Input,
Divider,
Table,
Typography,
} from "antd";
import { PlusCircleFilled } from "@ant-design/icons";
// import Service
import { FetctDetailByGarageID } from '../../../services'
const { Column, ColumnGroup } = Table;
const { Text } = Typography;
// const data = [
// // {
// // key: "1",
// // name: "ยางใน",
// // age: 32,
// // address: "New York No. 1 Lake Park",
// // tags: ["nice", "developer"],
// // },
// // {
// // key: "2",
// // name: "น้ำมันเครื่อง",
// // age: 42,
// // address: "London No. 1 Lake Park",
// // tags: ["loser"],
// // },
// // {
// // key: "3",
// // name: "test",
// // age: 32,
// // address: "Sidney No. 1 Lake Park",
// // tags: ["cool", "teacher"],
// // },
// ];
export default function SpareAdd(props) {
const detailID = props;
// console.log(detailID);
// Set State
const [visible, setVisible] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [ datas, setDatas ] = useState([])
// const [modalText, setModalText] = useState("Content of the modal");
useEffect(() => {
const getDetailByGarage = async () => {
await FetctDetailByGarageID(detailID).then(async (response) => {
await setDatas(response.data);
// console.log('data', response.data)
});
};
getDetailByGarage();
}, [detailID]);
const showModal = () => {
setVisible(true);
};
const handleOk = () => {
// setModalText("The modal will be closed after two seconds");
setConfirmLoading(true);
setTimeout(() => {
setVisible(false);
setConfirmLoading(false);
}, 2000);
};
const handleCancel = () => {
console.log("Clicked cancel button");
setVisible(false);
};
return (
<>
<Divider />
{/* <div className="div-p-5">
<Row gutter={[0, 32]}>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
test
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
test
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
test
</Col>
</Row>
</div> */}
<div className="div-p-5">
<Button className="bt-them" onClick={showModal}>
<Text className="color-fff-hover">
<PlusCircleFilled /> เพิ่มรายการอะไหล่
</Text>
</Button>
<Table dataSource={datas} scroll={{ x: 400 }} className="border">
<ColumnGroup title="รายละเอียดการซ่อม">
<Column
title="ลำดับ"
dataIndex="key"
key="member_name"
width={"10%"}
/>
<Column
title="รายการอะไหล่"
dataIndex="name"
key="member_tel"
width={"60%"}
/>
<Column
title="จำนวน"
dataIndex="device_type"
key="device_type"
width={"10%"}
/>
<Column
title="ราคาต่อหน่วย"
dataIndex="device_type"
key="device_type"
width={"10%"}
/>
<Column
title="ราคาประเมิน"
dataIndex="device_type"
key="device_type"
width={"10%"}
/>
</ColumnGroup>
</Table>
</div>
<Modal
title="Title"
visible={visible}
onOk={handleOk}
confirmLoading={confirmLoading}
onCancel={handleCancel}
width={1000}
>
<Input />
</Modal>
</>
);
}
import React, { useEffect, useState } from "react";
import { Col, Row, Typography } from "antd";
import { MobileOutlined, DollarOutlined } from "@ant-design/icons";
// import Service
import { FetctDetailByGarageID } from "../../../services";
// import { useLocation } from "react-router-dom";
const { Text, Title } = Typography;
export default function App(props) {
const detailID = props;
//set useState
const [datas, setDatas] = useState([]);
useEffect(() => {
const getDetailByGarage = async () => {
await FetctDetailByGarageID(detailID).then(async (response) => {
await setDatas(response.data[0]);
// console.log('data', response.data[0])
});
};
getDetailByGarage();
}, [detailID]);
console.log(datas);
return (
<>
<div className="div-title-detail">
<Row gutter={[0, 32]} className="title-show-detail">
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ชื่ออุปกรณ์</Text>
<Title level={4} className="color-fff">
{/* <Text className="color-fff">{datas.brand} {datas.model}</Text> */}
{datas.device_type === "รถจักรยานยนต์" ||
datas.device_type === "รถยนต์" ? (
<>
<Text className="color-fff">
{datas.brand} {datas.model}
</Text>
</>
) : (
<>
<Text className="color-fff">{datas.equipment}</Text>
</>
)}
</Title>
<Text className="color-fff">{datas.device_type}</Text>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ทะเบียน / ชนิด</Text>
{/* <Title level={4} className="color-fff">
<Text className="color-fff">{datas.car_number}</Text>
</Title>
<Text className="color-fff">{datas.car_province}</Text> */}
{datas.device_type === "รถจักรยานยนต์" ||
datas.device_type === "รถยนต์" ? (
<>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.car_number}</Text>
</Title>
<Text className="color-fff">{datas.car_province}</Text>
</>
) : (
<>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.equipment}</Text>
</Title>
</>
)}
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ลูกค้า</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">คุณ {datas.member_name}</Text>
</Title>
<Text className="color-fff">
<MobileOutlined />
{datas.member_tel}
</Text>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">วันที่รับซ่อม</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.repair_date}</Text>
</Title>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">สถานะการซ่อม</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.status}</Text>
</Title>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ยอดสุทธิ(บ.)</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.price}</Text>
</Title>
<Text className="color-fff">
<DollarOutlined /> {datas.status_payment}
</Text>
</Col>
</Row>
</div>
</>
);
}
......@@ -6,36 +6,23 @@ import {
Form,
Input,
Button,
Select,
Divider,
DatePicker,
Modal,
} from "antd";
// import services
import { FetchThaiAddress, FetchMemberTel } from "../../../../../services";
import Brand from "../data/brand.json";
import { FetchMemberTel, InsertDetails } from "../../../services";
// 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) {
......@@ -64,19 +51,33 @@ export default function App(props) {
garageID: checkLocal.userData.userId,
member_tel: values.member_tel,
device_type: typeSelect,
car_number: values.car_number,
car_province: values.car_province,
equipment: values.equipment,
brand: values.brand,
model: values.model,
kilo_number: values.kilo_number,
repair_date: newDate,
repair_detail: values.repair_detail,
repair_details: values.repair_details,
car_number: null,
car_province: null,
model: null,
kilo_number: null,
status: "อยู่ระหว่างการซ่อม",
price: 0,
spare_parts_list: null,
status_payment: "ยังไม่ได้ชำระ",
};
// console.log('test data', data)
if (member.includes(values.member_tel) === true) {
console.log("datas", data);
InsertDetails(data).then((response) => {
console.log("response", response);
});
window.location.reload(false)
} else {
alert(`หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม`)
Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
content: `หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม `,
});
}
};
......@@ -120,16 +121,16 @@ export default function App(props) {
</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="หมายเลขทะเบียนรถ"
name="equipment"
label="ประเภทอุปกรณ์"
tooltip="ประเภทของอุปกรณ์ เช่น เครื่องสูบน้ำ หรือเครื่องตัดหญ้า"
rules={[
{
required: true,
......@@ -142,45 +143,6 @@ export default function App(props) {
</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}
......@@ -190,69 +152,11 @@ export default function App(props) {
<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="หมายเลขกิโลของรถ ณ วันที่ซ่อม"
tooltip="ยี่ห้อของอุปกรณ์การเกษตร"
rules={[
{
required: true,
message: "กรุณากรอกหมายเลขกิโล!",
message: "กรุณาระบุยี่ห้อของอุปกรณ์การเกษตร!",
whitespace: true,
},
]}
......@@ -268,9 +172,9 @@ export default function App(props) {
xl={{ span: 7, offset: 1 }}
>
<Form.Item
label="วันที่รับรถ"
label="วันที่รับซ่อม"
name="repair_date"
tooltip="เลือกวันที่รับรถ"
tooltip="เลือกวันที่รับซ่อม"
>
<DatePicker />
</Form.Item>
......@@ -280,14 +184,14 @@ export default function App(props) {
<Col xs={4} md={4} xl={4}></Col>
<Col xs={16} md={16} xl={16}>
<Form.Item
name="repair_detail"
name="repair_details"
label="รายละเอียดการซ่อมเบื้องต้น"
tooltip="รายละเอียดการซ่อมเบื้องต้น"
>
<Input.TextArea />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
<Button className="bt-them" htmlType="submit">
เพิ่มการซ่อม
</Button>
</Form.Item>
......
......@@ -8,13 +8,18 @@ import {
Button,
Select,
Divider,
Modal,
DatePicker,
} from "antd";
// import services
import { FetchThaiAddress, FetchMemberTel } from "../../../../../services";
import {
FetchThaiAddress,
FetchMemberTel,
InsertDetails,
} from "../../../services";
import Brand from "../data/brand.json";
import Brand from "../repairDashboard/repairAdd/data/brand.json";
// const { Title, Text } = Typography;
const { Option } = Select;
......@@ -70,13 +75,25 @@ export default function App(props) {
model: values.model,
kilo_number: values.kilo_number,
repair_date: newDate,
repair_detail: values.repair_detail,
repair_details: values.repair_details,
status: "อยู่ระหว่างการซ่อม",
price: 0,
spare_parts_list: null,
status_payment: "ยังไม่ได้ชำระ",
equipment: null,
};
if (member.includes(values.member_tel) === true) {
console.log("datas", data);
InsertDetails(data).then((response) => {
console.log("response", response);
});
window.location.reload(false)
} else {
alert(`หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม`)
Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
content: `หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม `,
});
}
};
......@@ -280,14 +297,14 @@ export default function App(props) {
<Col xs={4} md={4} xl={4}></Col>
<Col xs={16} md={16} xl={16}>
<Form.Item
name="repair_detail"
name="repair_details"
label="รายละเอียดการซ่อมเบื้องต้น"
tooltip="รายละเอียดการซ่อมเบื้องต้น"
>
<Input.TextArea />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
<Button className="bt-them" htmlType="submit">
เพิ่มการซ่อม
</Button>
</Form.Item>
......
......@@ -9,12 +9,13 @@ import {
Select,
Divider,
DatePicker,
Modal,
} from "antd";
// import services
import { FetchThaiAddress, FetchMemberTel } from "../../../../../services";
import { FetchThaiAddress, FetchMemberTel, InsertDetails } from "../../../services";
import Brand from "../data/brand.json";
import Brand from "../repairDashboard/repairAdd/data/brand.json";
// const { Title, Text } = Typography;
const { Option } = Select;
......@@ -70,13 +71,25 @@ export default function App(props) {
model: values.model,
kilo_number: values.kilo_number,
repair_date: newDate,
repair_detail: values.repair_detail,
repair_details: values.repair_details,
status: "อยู่ระหว่างการซ่อม",
price: 0,
spare_parts_list: null,
status_payment: "ยังไม่ได้ชำระ",
equipment: null,
};
if (member.includes(values.member_tel) === true) {
console.log("datas", data);
InsertDetails(data).then((response) => {
console.log("response", response);
});
window.location.reload(false)
} else {
alert(`หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม`)
Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
content: `หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม `,
});
}
};
......@@ -280,14 +293,14 @@ export default function App(props) {
<Col xs={4} md={4} xl={4}></Col>
<Col xs={16} md={16} xl={16}>
<Form.Item
name="repair_detail"
name="repair_details"
label="รายละเอียดการซ่อมเบื้องต้น"
tooltip="รายละเอียดการซ่อมเบื้องต้น"
>
<Input.TextArea />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
<Button className="bt-them" htmlType="submit">
เพิ่มการซ่อม
</Button>
</Form.Item>
......
import { React } from "react";
import { Layout } from "antd";
import { React, useEffect, useState } from "react";
import HeaderTap from "../../../Layouts/tabHeader";
import MenuList from "../../../Layouts/menulist";
import { Link } from "react-router-dom";
const { Content, Footer } = Layout;
// Import services
import { FetctDetailByGarage } from "../../../services";
// import { useLocation } from "react-router-dom";
import { Row, Col, Divider, Result, Button } from "antd";
//import Widget
import CanvasJSChart from "../../widget/widgetPie";
// import ColumnJSChart from "../../widget/widgetColumn";
// const { Header } = Layout;
export default function Ecommerce() {
// let location = useLocation();
const [datas, setDatas] = useState([]);
// const detailID = location.state
// console.log(detailID)
// console.log("datas", datas);
useEffect(() => {
const getDetailByGarage = async () => {
let local = {
garageID: JSON.parse(localStorage.getItem("user")).userData.userId,
};
// console.log("local", local);
// console.log(local);
await FetctDetailByGarage(local).then(async (response) => {
await setDatas(response.data);
});
};
getDetailByGarage();
}, []);
return (
<>
<HeaderTap className="site-layout-background" style={{ padding: 0 }} />
<Layout style={{ minHeight: "100vh", paddingTop: "2vh" }}>
<MenuList />
<Layout className="site-layout">
<Content style={{ margin: "0 16px" }}>
<div
className="site-layout-background"
style={{ padding: 24, minHeight: 360 }}
>
Bill is a cat.
{datas !== null ? (
<>
<div className="display-flex-main">
<div className="div-content-chart">
<Row className="content-chart">
<Col xs={24} lg={24} className="chart">
<CanvasJSChart />
</Col>
</Row>
</div>
</div>
</Content>
<Footer style={{ textAlign: "center" }}>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
</Layout>
</>
) : (
<>
<div className="display-flex-main">
<div className="div-content-chart">
<Row className="content-chart">
<Col xs={24} lg={24} className="chart">
<Result
title="ร้านของคุณยังไม่มีการซ่อม"
extra={
<Button className="bt-them" key="console">
<Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
</Button>
}
/>
</Col>
</Row>
</div>
</div>
</>
)}
<Divider />
{/* <CanvasJSChart className="chart" data={location.state} /> */}
</>
);
}
......@@ -3,9 +3,9 @@ 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";
import Car from "../../component/car";
import Agriculture from "../../component/agriculture";
import Motorcycle from "../../component/motorcycle";
const { Title, Text } = Typography;
const { Option } = Select;
......
import React from "react";
// import { Modal, Button, Input } from "antd";
// import { MobileOutlined, DollarOutlined } from "@ant-design/icons";
import { useLocation } from "react-router-dom";
// Import Component
import TitleShowDetail from "../../component/TitleShowDetail";
import SpareAdd from "../../component/SpareAdd";
// const { Meta } = Card;
// const { Text, Title } = Typography;
export default function ShowDetail() {
let location = useLocation();
//use State
const detailID = location.state;
// console.log(detailID);
return (
<>
<TitleShowDetail detailID={detailID.detailsID} />
{/* Show Repair id = {detailID.detailsID} */}
<SpareAdd detailID={detailID.detailsID} />
</>
);
}
import React from 'react'
// Import Component
import RepairTables from '../../../widget/RepairTable'
export default function App() {
return (
<>
<RepairTables />
</>
)
}
\ No newline at end of file
......@@ -49,10 +49,7 @@ function App() {
});
};
// const removestr = () => {
// sendLogout();
// window.location.reload(false);
// }
return (
<div className="h-100" ref={myRef}>
......@@ -122,7 +119,7 @@ function App() {
span: 16,
}}
>
<Button type="primary" htmlType="submit">
<Button className="bt-them" htmlType="submit" >
ยืนยัน
</Button>
</Form.Item>
......
import React, { useState } from "react";
import { Row, Col, Typography, Checkbox, Form } from "antd";
import { Row, Col, Typography, Checkbox, Form, Modal, Button } from "antd";
import { useHistory } from "react-router-dom";
......@@ -13,7 +13,11 @@ export default function App() {
const handleSubmit = () => {
if (chechBox === false) {
alert("กรุณาอ่านข้อกำหนดและเงื่อนไขในการให้บริการ!!");
// alert("กรุณาอ่านข้อกำหนดและเงื่อนไขในการให้บริการ!!");
Modal.info({
title: "ข้อกำหนดและเงื่อนไข",
content: `กรุณาอ่านข้อกำหนดและเงื่อนไขในการใช้บริการ`,
});
} else {
history.push("/register/registion");
}
......@@ -82,7 +86,11 @@ export default function App() {
validator: (_, value) =>
value
? Promise.resolve()
: Promise.reject(new Error("กรุณาคลิ๊กที่ช่องว่าง เพื่อยอมรับข้อตกลง")),
: Promise.reject(
new Error(
"กรุณาคลิ๊กที่ช่องว่าง เพื่อยอมรับข้อตกลง"
)
),
},
]}
>
......@@ -97,9 +105,10 @@ export default function App() {
</Form>
</div>
<div className="div-button-submit">
<div className="button-submit" onClick={handleSubmit}>
ถัดไป
</div>
<Button className="bt-them" onClick={handleSubmit}>
ยืนยัน
</Button>
</div>
</div>
</Col>
......
......@@ -492,7 +492,7 @@ export default function RegistrationForm() {
<Form.Item {...tailFormItemLayout}>
<Button
type="primary"
className="bt-them"
htmlType="submit"
style={{ marginTop: "30px" }}
>
......
import React, { useState, useEffect } from "react";
import { Table, Space, Typography } from "antd";
import { Link } from "react-router-dom";
// Import services
import { FetctDetailByGarage } from "../../services";
const { Column, ColumnGroup } = Table;
const { Text } = Typography;
export default function App() {
const [datas, setDatas] = useState([]);
useEffect(() => {
const getDetailByGarage = async () => {
let local = {
garageID: JSON.parse(localStorage.getItem("user")).userData.userId,
};
// console.log("local", local);
// console.log(local);
await FetctDetailByGarage(local).then(async (response) => {
await setDatas(response.data);
});
};
getDetailByGarage();
}, []);
// console.log("datas", datas);
// const clickMore = (key) => {
// console.log("key", key);
// };
return (
<>
<Table dataSource={datas} scroll={{ x: 1000, y: 400 }}>
<ColumnGroup title="ลูกค้า">
<Column
title="ชื่อลูกค้า"
dataIndex="member_name"
key="member_name"
/>
<Column title="รหัสลูกค้า" dataIndex="member_tel" key="member_tel" />
</ColumnGroup>
<ColumnGroup title="รายละเอียด">
<Column
title="ประเภทการซ่อม"
dataIndex="device_type"
key="device_type"
/>
<Column
title="ทะเบียน/ชนิด"
key="detailsID"
render={(text, record) => (
<>
{record.device_type === "รถจักรยานยนต์" ||
record.device_type === "รถยนต์" ? (
<>
<Space size="small">
<Text style={{ fontWeight: "bold" }}>
{record.car_number}
</Text>
</Space>
{<br />}
<Text>{record.car_province}</Text>
</>
) : (
<>
<Text>
{record.equipment}
</Text>
</>
)}
</>
)}
/>
<Column
title="รายละเอียดการซ่อมเบื้องต้น"
dataIndex="repair_details"
key="repair_details"
/>
<Column
title="วันที่รับซ่อม"
dataIndex="repair_date"
key="repair_date"
/>
<Column title="สถานะ" dataIndex="status" key="status" />
<Column
title="เพิ่มเติม"
key="detailsID"
render={(text, record) => (
<Space size="middle">
<Link
to={{
pathname: "/dashboard/all-repair/detail",
state: { detailsID: record.detailsID },
}}
>
<Text style={{ color: "blue" }}>จัดการ</Text>
</Link>
</Space>
)}
/>
</ColumnGroup>
</Table>
</>
);
}
import React, { useEffect, useState } from "react";
import { CanvasJSChart } from "canvasjs-react-charts";
// Import services
import { FetctDetailByGarage } from "../../services";
export default function Ecommerce(props) {
const [datas, setDatas] = useState([]);
useEffect(() => {
const getDetailByGarage = async () => {
let local = {
garageID: JSON.parse(localStorage.getItem("user")).userData.userId,
};
// console.log("local", local);
// console.log(local);
await FetctDetailByGarage(local).then(async (response) => {
await setDatas(response.data);
});
};
getDetailByGarage();
}, []);
// console.log("datas", datas.length);
let carlist = [];
let motolist = [];
let agirculturelist = [];
for (let i = 0; i < datas.length; i++) {
if (datas[i].device_type === "รถยนต์") {
// console.log(datas[i].device_type);
carlist.push(datas[i].device_type);
}
if (datas[i].device_type === "รถจักรยานยนต์") {
motolist.push(datas[i].device_type);
}
if (datas[i].device_type === "อุปกรณ์การเกษตร") {
agirculturelist.push(datas[i].device_type);
}
}
const options = {
animationEnabled: true,
theme: "light1", // "light1", "dark1", "dark2"
title: {
text: "รายการซ่อมทั้งหมด",
},
data: [
{
type: "column",
// indexLabel: "{label}: {y}%",
startAngle: 60,
dataPoints: [
{ y: carlist.length, label: "รถยนต์" },
{ y: motolist.length, label: "รถจักรยานยนต์" },
{ y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
{ y: carlist.length, label: "รถยนต์" },
{ y: motolist.length, label: "รถจักรยานยนต์" },
{ y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
{ y: carlist.length, label: "รถยนต์" },
],
},
],
};
return (
<>
<CanvasJSChart
options={options}
/* onRef={ref => this.chart = ref} */
/>
</>
);
}
import React, { useEffect, useState } from "react";
import {Typography} from 'antd'
import { CanvasJSChart } from "canvasjs-react-charts";
// Import services
import { FetctDetailByGarage } from "../../services";
const { Title } = Typography
export default function Ecommerce(props) {
const [datas, setDatas] = useState([]);
useEffect(() => {
const getDetailByGarage = async () => {
let local = {
garageID: JSON.parse(localStorage.getItem("user")).userData.userId,
};
// console.log("local", local);
// console.log(local);
await FetctDetailByGarage(local).then(async (response) => {
await setDatas(response.data);
});
};
getDetailByGarage();
}, []);
// console.log("datas", datas);
// console.log("datas", datas.length);
let carlist = [];
let motolist = [];
let agirculturelist = [];
let totol = []
if (datas !== null) {
for (let i = 0; i < datas.length; i++) {
if (datas[i].device_type === "รถยนต์") {
// console.log(datas[i].device_type);
carlist.push(datas[i].device_type);
}
if (datas[i].device_type === "รถจักรยานยนต์") {
motolist.push(datas[i].device_type);
}
if (datas[i].device_type === "อุปกรณ์การเกษตร") {
agirculturelist.push(datas[i].device_type);
}
totol.push(datas[i])
}
} else {
// console.log('data is null', datas)
}
// console.log("datas", carlist,motolist, agirculturelist );
const options = {
animationEnabled: true,
theme: "light1", // "light1", "dark1", "dark2"
title: {
text: "รายการซ่อมทั้งหมด",
},
data: [
{
type: "doughnut", //doughnut
startAngle: -90,
// style={{width: '50px'}},
dataPoints: [
{ y: carlist.length, label: "รถยนต์" },
{ y: motolist.length, label: "รถจักรยานยนต์" },
{ y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
],
},
],
};
return (
<div style={{ heigth: "200px" }}>
<CanvasJSChart
options={options}
/* onRef={ref => this.chart = ref} */
/>
<Title level={5}>การซ่อมทั้งหมด {totol.length} รายการ</Title>
</div>
);
}
......@@ -4416,6 +4416,11 @@
"resolved" "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz"
"version" "1.0.30001282"
"canvasjs-react-charts@^1.0.5":
"integrity" "sha512-8P3KnAvCqftmqf4O/xG6PlIDcTr0IvzuE4l6ACXIOROKtFmnmUu/xPEeq+0vI9Xvh7zXjzZvRqw0p1uxXr034g=="
"resolved" "https://registry.npmjs.org/canvasjs-react-charts/-/canvasjs-react-charts-1.0.5.tgz"
"version" "1.0.5"
"capture-exit@^2.0.0":
"integrity" "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g=="
"resolved" "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz"
......
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