Merge pull request #49 from manuelsanchezweb/style/categorySelectIcon

Add icons for time_start and time_end
manuelsanchezweb · Jun 4, 2024 · d824f54 · d824f54
2 parents 133a137 + 64021a7
commit d824f54
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 29 deletions.
diff --git a/src/components/appointment-modal/add-appointment-modal.tsx b/src/components/appointment-modal/add-appointment-modal.tsx
@@ -126,13 +126,19 @@ export const AddAppointmentModal = component$(
               >
                 Starts at
               </label>
-              <input
-                value={'8:00'}
-                name="time_start"
-                id="time_start"
-                type="text"
-                class={`"w-full border border-grayBrandMedium rounded-md px-4 py-2 ${areInputsDisabled.value ? 'opacity-85 cursor-not-allowed text-grayBrand' : ''} `}
-              />
+              <div class="relative">
+                <input
+                  value={'8:00'}
+                  name="time_start"
+                  id="time_start"
+                  type="text"
+                  class={`w-full border border-grayBrandMedium rounded-md px-4 py-2 ${areInputsDisabled.value ? 'opacity-85 pointer-events-none text-grayBrand' : ''} `}
+                />
+                <IconManager
+                  icon="time-start"
+                  classCustom={`absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 text-primary pointer-events-none ${areInputsDisabled.value ? 'opacity-85 pointer-events-none !text-grayBrand' : ''} `}
+                />
+              </div>
             </div>
             <div class="flex flex-col gap-2 mt-2 md:mt-8 flex-1">
               <label
@@ -141,13 +147,19 @@ export const AddAppointmentModal = component$(
               >
                 Ends at
               </label>
-              <input
-                value={'9:00'}
-                name="time_end"
-                id="time_end"
-                type="text"
-                class={`"w-full border border-grayBrandMedium rounded-md px-4 py-2 ${areInputsDisabled.value ? 'opacity-85 cursor-not-allowed text-grayBrand' : ''} `}
-              />
+              <div class="relative">
+                <input
+                  value={'9:00'}
+                  name="time_end"
+                  id="time_end"
+                  type="text"
+                  class={`w-full border border-grayBrandMedium rounded-md px-4 py-2 ${areInputsDisabled.value ? 'opacity-85 pointer-events-none text-grayBrand' : ''} `}
+                />
+                <IconManager
+                  icon="time-end"
+                  classCustom={`absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 text-primary pointer-events-none ${areInputsDisabled.value ? 'opacity-85 pointer-events-none !text-grayBrand' : ''} `}
+                />
+              </div>
             </div>
           </div>
 

diff --git a/src/components/appointment-modal/edit-appointment-modal.tsx b/src/components/appointment-modal/edit-appointment-modal.tsx
@@ -119,13 +119,19 @@ export const EditAppointmentModal = component$(
               >
                 Starts at
               </label>
-              <input
-                value={editModalData.time_start}
-                name="time_start"
-                id="time_start"
-                type="text"
-                class={`"w-full border border-grayBrandMedium rounded-md px-4 py-2 ${areInputsDisabled.value ? 'opacity-85 cursor-not-allowed text-grayBrand' : ''} `}
-              />
+              <div class="relative">
+                <input
+                  value={editModalData.time_start}
+                  name="time_start"
+                  id="time_start"
+                  type="text"
+                  class={`w-full border border-grayBrandMedium rounded-md px-4 py-2 ${areInputsDisabled.value ? 'opacity-85 pointer-events-none text-grayBrand' : ''} `}
+                />
+                <IconManager
+                  icon="time-start"
+                  classCustom={`absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 text-primary pointer-events-none ${areInputsDisabled.value ? 'opacity-85 pointer-events-none !text-grayBrand' : ''} `}
+                />
+              </div>
             </div>
             <div class="flex flex-col gap-2 mt-2 md:mt-8 flex-1">
               <label
@@ -134,13 +140,19 @@ export const EditAppointmentModal = component$(
               >
                 Ends at
               </label>
-              <input
-                value={editModalData.time_end}
-                name="time_end"
-                id="time_end"
-                type="text"
-                class={`"w-full border border-grayBrandMedium rounded-md px-4 py-2 ${areInputsDisabled.value ? 'opacity-85 cursor-not-allowed text-grayBrand' : ''} `}
-              />
+              <div class="relative">
+                <input
+                  value={editModalData.time_end}
+                  name="time_end"
+                  id="time_end"
+                  type="text"
+                  class={`w-full border border-grayBrandMedium rounded-md px-4 py-2 ${areInputsDisabled.value ? 'opacity-85 pointer-events-none text-grayBrand' : ''} `}
+                />
+                <IconManager
+                  icon="time-end"
+                  classCustom={`absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 text-primary pointer-events-none ${areInputsDisabled.value ? 'opacity-85 pointer-events-none !text-grayBrand' : ''} `}
+                />
+              </div>
             </div>
           </div>
 

diff --git a/src/config/index.ts b/src/config/index.ts
@@ -1,5 +1,5 @@
 export const IS_LOADING_FROM_BEGINNING = false
-export const IS_ADD_APPOINTMENT_MODAL_OPENED = false
+export const IS_ADD_APPOINTMENT_MODAL_OPENED = true
 export const IS_EDIT_APPOINTMENT_MODAL_OPENED = false
 
 /**

diff --git a/src/icons/icon-manager.tsx b/src/icons/icon-manager.tsx
@@ -11,6 +11,8 @@ import {
   IconList,
   IconListFill,
   IconRemove,
+  IconTimeEnd,
+  IconTimeStart,
   IconUser,
 } from './icons'
 
@@ -29,6 +31,8 @@ type IconType =
   | 'history'
   | 'history-fill'
   | 'dropdown'
+  | 'time-start'
+  | 'time-end'
 
 interface IconManagerProps {
   icon?: IconType
@@ -62,6 +66,10 @@ export const IconManager = component$<IconManagerProps>(
         return <IconHistoryFill classCustom={classCustom} />
       case 'dropdown':
         return <IconChevronDown classCustom={classCustom} />
+      case 'time-start':
+        return <IconTimeStart classCustom={classCustom} />
+      case 'time-end':
+        return <IconTimeEnd classCustom={classCustom} />
       default:
         return <IconAdd classCustom={classCustom} />
     }

diff --git a/src/icons/icons.tsx b/src/icons/icons.tsx
@@ -456,6 +456,7 @@ export const IconChevronDown = component$(
     )
   }
 )
+
 export const IconRemove = component$(
   ({ classCustom }: { classCustom?: string }) => {
     return (
@@ -508,3 +509,57 @@ export const IconRemove = component$(
     )
   }
 )
+
+export const IconTimeStart = component$(
+  ({ classCustom }: { classCustom?: string }) => {
+    return (
+      <svg
+        class={classCustom}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" />
+        <path d="M18 14v4h4" />
+        <path d="M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
+        <path d="M15 3v4" />
+        <path d="M7 3v4" />
+        <path d="M3 11h16" />
+      </svg>
+    )
+  }
+)
+
+export const IconTimeEnd = component$(
+  ({ classCustom }: { classCustom?: string }) => {
+    return (
+      <svg
+        class={classCustom}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M10.5 21h-4.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v3" />
+        <path d="M16 3v4" />
+        <path d="M8 3v4" />
+        <path d="M4 11h10" />
+        <path d="M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
+        <path d="M18 16.5v1.5l.5 .5" />
+      </svg>
+    )
+  }
+)