From ee9fc998ddb8ccd3673cde8cb1d1ff78a4da27cb Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Tue, 22 Oct 2024 01:56:42 +0330
Subject: [PATCH] change icon field and handle change value field type number

---
 app/component/EditField.js                    |  6 ++--
 app/component/TimePickerField.js              |  4 +--
 app/component/element/AutoCompleteSelect.js   |  2 +-
 app/globals.css                               | 13 ++++----
 components/icons/ClockField.js                | 30 +++++++++++++++++++
 components/panel/addDoctor/index.js           |  2 +-
 .../listMenu/workingDays/modal/Form.js        | 16 ++++++----
 7 files changed, 55 insertions(+), 18 deletions(-)
 create mode 100644 components/icons/ClockField.js

diff --git a/app/component/EditField.js b/app/component/EditField.js
index fd88766..466a1ac 100644
--- a/app/component/EditField.js
+++ b/app/component/EditField.js
@@ -19,12 +19,12 @@ function EditField({
     <div className="relative w-full">
       <TextField
         {...props}
-        value={data?.value}
         rows={multiline}
+        value={data?.value}
         multiline={multiline}
-        disabled={noDisable ? false : !data?.isEdit}
-        placeholder={placeholder || ""}
         type={type || "text"}
+        placeholder={placeholder || ""}
+        disabled={noDisable ? false : !data?.isEdit}
         className={`!w-full res-field-account dark:!bg-transparent ${
           isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
         }`}
diff --git a/app/component/TimePickerField.js b/app/component/TimePickerField.js
index 52afb01..57f874c 100644
--- a/app/component/TimePickerField.js
+++ b/app/component/TimePickerField.js
@@ -2,7 +2,7 @@ import { useRef, useState } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
 import { handleTwoLength } from "@/helper";
-import ClockP from "@/components/icons/ClockP";
+import ClockField from "@/components/icons/ClockField";
 
 function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
   const input = useRef();
@@ -93,7 +93,7 @@ function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
         className="absolute left-[12px] top-1/2 -translate-y-1/2 cursor-pointer"
         onClick={openTimePicker}
       >
-        <ClockP />
+        <ClockField />
       </div>
     </div>
   );
diff --git a/app/component/element/AutoCompleteSelect.js b/app/component/element/AutoCompleteSelect.js
index e2733ed..7e11397 100644
--- a/app/component/element/AutoCompleteSelect.js
+++ b/app/component/element/AutoCompleteSelect.js
@@ -7,7 +7,7 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
     <Autocomplete
       disablePortal
       options={list}
-      className="!w-full !rounded-lg"
+      className="!w-full !rounded-lg auto-complete-selector"
       onChange={(event) => {
         updateData && updateData(event.target.innerText, "value", name);
       }}
diff --git a/app/globals.css b/app/globals.css
index 07d6edf..4f319eb 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -151,12 +151,13 @@ html {
   font-family: kalame;
 }
 
-/* .bg-banner-home,
-.bg-banner-register {
-    background-size: cover !important;
-    background-repeat: no-repeat !important;
-    background-position: center !important;
-} */
+.auto-complete-selector .MuiInputBase-root svg path {
+  stroke: #525252 !important;
+}
+
+.dark .auto-complete-selector .MuiInputBase-root svg path {
+  stroke: #a1a1a1 !important;
+}
 
 .bg-border-t-gradient-sign {
   background: linear-gradient(90deg, #e5e5e5 0%, #bababa 48.5%, #e5e5e5 100%);
diff --git a/components/icons/ClockField.js b/components/icons/ClockField.js
new file mode 100644
index 0000000..bb9edae
--- /dev/null
+++ b/components/icons/ClockField.js
@@ -0,0 +1,30 @@
+function ClockField() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        d="M18.3337 10.0003C18.3337 14.6003 14.6003 18.3337 10.0003 18.3337C5.40033 18.3337 1.66699 14.6003 1.66699 10.0003C1.66699 5.40033 5.40033 1.66699 10.0003 1.66699C14.6003 1.66699 18.3337 5.40033 18.3337 10.0003Z"
+        stroke="#525252"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="dark:!fill-[#222433] dark:!stroke-[#A1A1A1]"
+      />
+      <path
+        d="M13.0914 12.6505L10.5081 11.1088C10.0581 10.8421 9.69141 10.2005 9.69141 9.67546V6.25879"
+        stroke="#525252"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="dark:!fill-[#222433] dark:!stroke-[#A1A1A1]"
+      />
+    </svg>
+  );
+}
+
+export default ClockField;
diff --git a/components/panel/addDoctor/index.js b/components/panel/addDoctor/index.js
index 2780201..2b87ed9 100644
--- a/components/panel/addDoctor/index.js
+++ b/components/panel/addDoctor/index.js
@@ -9,7 +9,7 @@ import GeneralInformation from "./listMenu/generalInformation";
 import Step from "./Step";
 
 function AddDoctorPage() {
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState(2);
   const [data, setData] = useState({
     general: {
       name: { value: "", placeholder: "احسان احمدی", isEdit: true },
diff --git a/components/panel/addDoctor/listMenu/workingDays/modal/Form.js b/components/panel/addDoctor/listMenu/workingDays/modal/Form.js
index cf650d6..96bb16c 100644
--- a/components/panel/addDoctor/listMenu/workingDays/modal/Form.js
+++ b/components/panel/addDoctor/listMenu/workingDays/modal/Form.js
@@ -6,6 +6,11 @@ import { turnTime, workplace } from "./listSelector";
 import EditField from "@/app/component/EditField";
 import { useState } from "react";
 
+const validate_number_turns = {
+  min: 1,
+  max: 10,
+};
+
 function Form({
   handleClose,
   isVacation,
@@ -25,7 +30,11 @@ function Form({
 
   const updateNum = (value, type, name) => {
     const prevData = data;
-    data[parent][dataChange.idx][name].value = +value;
+    const parseValue = +value;
+    const { min, max } = validate_number_turns;
+    const validateValue =
+      parseValue > max ? max : parseValue < min ? min : value;
+    data[parent][dataChange.idx][name].value = validateValue;
     setUpdate(!update);
     setData(prevData);
   };
@@ -44,10 +53,7 @@ function Form({
             placeholder="انتخاب کنید..."
             name="number_turns"
             props={{
-              inputProps: {
-                min: 1,
-                max: 10,
-              },
+              inputProps: validate_number_turns,
             }}
           />
         </ContentText>