From f732a495f936213545f81b4020878ff50d33d5ef Mon Sep 17 00:00:00 2001 From: Ehsan Date: Sun, 15 Sep 2024 19:49:14 +0330 Subject: [PATCH] add component hour field to page add-doctor --- app/component/TimePickerField.js | 51 ++++++++++ components/panel/addDoctor/index.js | 2 +- .../listMenu/workingDays/modal/Form.js | 30 +----- package-lock.json | 97 ++++++++++++++++++- package.json | 2 + 5 files changed, 153 insertions(+), 29 deletions(-) create mode 100644 app/component/TimePickerField.js diff --git a/app/component/TimePickerField.js b/app/component/TimePickerField.js new file mode 100644 index 0000000..511a029 --- /dev/null +++ b/app/component/TimePickerField.js @@ -0,0 +1,51 @@ +import { useState } from "react"; +import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; +import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers" + +function TimePickerField() { + + const [value, setValue] = useState('00:00'); + + return ( +
+ + { + const hours = e.$H; + const minute = e.$m; + const handleTwoLength = value => String(value).length === 1 ? `0${value}` : value + + setValue(`${handleTwoLength(hours)}:${handleTwoLength(minute)}`) + }} + sx={{ + '& .MuiFormLabel-root': { + top: '-4px !important' + }, + '& .MuiInputBase-input': { padding: '12.5px 14px' }, + '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' }, + '& .MuiInputBase-root': { + borderRadius: '8px !important' + }, + '.Mui-focused': { + '& .MuiOutlinedInput-notchedOutline': { + border: '1px solid #5559CE !important', + transition: '0.5s all' + } + }, + '& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after': { + display: 'none !important' + } + }} + /> +

{value}

+ +
+ ) +} + +export default TimePickerField \ No newline at end of file diff --git a/components/panel/addDoctor/index.js b/components/panel/addDoctor/index.js index d83b3c4..8cc057e 100644 --- a/components/panel/addDoctor/index.js +++ b/components/panel/addDoctor/index.js @@ -16,7 +16,7 @@ const listTab = ['اطلاعات عمومی', 'اطلاعات مطب', 'نوبت function AddDoctorPage() { - const [value, setValue] = useState(0); + const [value, setValue] = useState(3); const [open, setOpen] = useState(false); const handleChange = (event, newValue) => setValue(newValue); diff --git a/components/panel/addDoctor/listMenu/workingDays/modal/Form.js b/components/panel/addDoctor/listMenu/workingDays/modal/Form.js index 840302d..fad6020 100644 --- a/components/panel/addDoctor/listMenu/workingDays/modal/Form.js +++ b/components/panel/addDoctor/listMenu/workingDays/modal/Form.js @@ -1,35 +1,15 @@ -import { useState } from "react"; -import ClockP from "@/components/icons/ClockP"; -import FieldIcon from "@/app/component/FieldIcon"; -import ContentText from "@/components/panel/ContentText"; import { Button } from "@mui/material"; +import ContentText from "@/components/panel/ContentText"; +import TimePickerField from "@/app/component/TimePickerField"; function Form({ handleClose }) { - - const [data, setData] = useState({ - start_time: '', - end_time: '' - }); - - const changeData = (value, name) => setData({ ...data, [name]: value }) - return (
- } - name='start_time' - /> + - } - name='end_time' - /> +
-
+ ) } diff --git a/package-lock.json b/package-lock.json index 49f3823..0c50220 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,8 +15,10 @@ "@mui/material": "^5.16.7", "@mui/styled-engine-sc": "^6.0.0-alpha.18", "@mui/x-charts": "^7.16.0", + "@mui/x-date-pickers": "^7.17.0", "aos": "^2.3.4", "date-fns": "^3.6.0", + "dayjs": "^1.11.13", "i": "^0.3.7", "jalaali-react-date-picker": "^1.0.18", "jalali-moment": "^3.3.11", @@ -3753,6 +3755,90 @@ "robust-predicates": "^3.0.2" } }, + "node_modules/@mui/x-date-pickers": { + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.17.0.tgz", + "integrity": "sha512-3mIw1uOZU/yKweZsVAo9QnwVFzLHqXgXG1TbGbDJ4AU6FhN2TCUlR9tzKHSlYdAHZ0bEWDS1/bgeGsQC7skXMA==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/utils": "^5.16.6", + "@mui/x-internals": "7.17.0", + "@types/react-transition-group": "^4.4.11", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.15.14 || ^6.0.0", + "@mui/system": "^5.15.14 || ^6.0.0", + "date-fns": "^2.25.0 || ^3.2.0", + "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0", + "dayjs": "^1.10.7", + "luxon": "^3.0.2", + "moment": "^2.29.4", + "moment-hijri": "^2.1.2", + "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "date-fns": { + "optional": true + }, + "date-fns-jalali": { + "optional": true + }, + "dayjs": { + "optional": true + }, + "luxon": { + "optional": true + }, + "moment": { + "optional": true + }, + "moment-hijri": { + "optional": true + }, + "moment-jalaali": { + "optional": true + } + } + }, + "node_modules/@mui/x-date-pickers/node_modules/@mui/x-internals": { + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.17.0.tgz", + "integrity": "sha512-FLlAGSJl/vsuaA/8hPGazXFppyzIzxApJJDZMoTS0geUmHd0hyooISV2ltllLmrZ/DGtHhI08m8GGnHL6/vVeg==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/utils": "^5.16.6" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, "node_modules/@mui/x-internals": { "version": "7.16.0", "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.16.0.tgz", @@ -4909,9 +4995,9 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.10", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", - "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "version": "4.4.11", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", + "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", "dependencies": { "@types/react": "*" } @@ -7698,6 +7784,11 @@ "url": "https://github.com/sponsors/kossnocorp" } }, + "node_modules/dayjs": { + "version": "1.11.13", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", + "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==" + }, "node_modules/debug": { "version": "4.3.6", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz", diff --git a/package.json b/package.json index 108d657..5c99406 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,10 @@ "@mui/material": "^5.16.7", "@mui/styled-engine-sc": "^6.0.0-alpha.18", "@mui/x-charts": "^7.16.0", + "@mui/x-date-pickers": "^7.17.0", "aos": "^2.3.4", "date-fns": "^3.6.0", + "dayjs": "^1.11.13", "i": "^0.3.7", "jalaali-react-date-picker": "^1.0.18", "jalali-moment": "^3.3.11",