@feedmepos/mf-order-setting 0.0.53 → 0.0.56-dev.1

package/src/views/order-settings/reservation/CustomTimePicker.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  minTime?: string // Optional minimum time (HH:MM format)
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const isOpen = ref(false)
+const inputRef = ref<any>(null)
+const dropdownRef = ref<HTMLDivElement | null>(null)
+
+// Generate time options in 30-minute intervals
+const timeOptions = computed(() => {
+  const options: string[] = []
+  for (let hour = 0; hour < 24; hour++) {
+    for (let minute = 0; minute < 60; minute += 30) {
+      const timeString = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`
+      options.push(timeString)
+    }
+  }
+
+  options.push('23:59')
+
+  // Filter out times earlier than minTime if provided
+  if (props.minTime) {
+    return options.filter((time) => isTimeGreaterOrEqual(time, props.minTime!))
+  }
+
+  return options
+})
+
+// Helper function to compare times in HH:MM format
+function isTimeGreaterOrEqual(time1: string, time2: string): boolean {
+  const [hours1, minutes1] = time1.split(':').map(Number)
+  const [hours2, minutes2] = time2.split(':').map(Number)
+
+  const totalMinutes1 = hours1 * 60 + minutes1
+  const totalMinutes2 = hours2 * 60 + minutes2
+
+  return totalMinutes1 >= totalMinutes2
+}
+
+const displayValue = computed({
+  get: () => props.modelValue || '',
+  set: (value: string) => {
+    emit('update:modelValue', value)
+  }
+})
+
+function selectTime(time: string) {
+  displayValue.value = time
+  isOpen.value = false
+}
+
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as Node
+  const wrapperElement = inputRef.value?.$el || inputRef.value
+
+  if (
+    dropdownRef.value &&
+    wrapperElement &&
+    !dropdownRef.value.contains(target) &&
+    !wrapperElement.contains(target)
+  ) {
+    isOpen.value = false
+  }
+}
+
+function handleFocus() {
+  isOpen.value = true
+}
+
+function toggleDropdown(event?: Event) {
+  event?.stopPropagation()
+  // Close all other open dropdowns by dispatching a global event
+  if (!isOpen.value) {
+    window.dispatchEvent(new CustomEvent('closeTimePickers'))
+  }
+  isOpen.value = !isOpen.value
+
+  // Scroll to selected time when opening
+  if (isOpen.value) {
+    nextTick(() => {
+      scrollToSelectedTime()
+    })
+  }
+}
+
+function scrollToSelectedTime() {
+  const scrollContainer = dropdownRef.value?.querySelector('.overflow-y-auto')
+  if (!scrollContainer) return
+
+  const selectedElement = scrollContainer.querySelector('[data-selected="true"]')
+  if (selectedElement) {
+    selectedElement.scrollIntoView({ block: 'center' })
+  }
+}
+
+function handleInputValue(value: string) {
+  let formattedValue = value.replace(/[^\d:]/g, '')
+
+  // Auto-format as user types
+  if (formattedValue.length === 2 && !formattedValue.includes(':')) {
+    formattedValue = formattedValue + ':'
+  }
+
+  // Limit to HH:MM format
+  if (formattedValue.length > 5) {
+    formattedValue = formattedValue.slice(0, 5)
+  }
+
+  displayValue.value = formattedValue
+}
+
+function handleCloseTimePickers() {
+  isOpen.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  window.addEventListener('closeTimePickers', handleCloseTimePickers)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('closeTimePickers', handleCloseTimePickers)
+})
+</script>
+
+<template>
+  <div class="relative w-full">
+    <div @click="toggleDropdown" class="cursor-pointer relative">
+      <FmTextField
+        ref="inputRef"
+        :model-value="displayValue"
+        @update:model-value="handleInputValue"
+        @focus="handleFocus"
+        placeholder="HH:MM"
+        class="time-picker-field"
+        :class="{
+          focused: isOpen
+        }"
+        maxlength="5"
+      >
+      </FmTextField>
+      <FmIcon
+        class="absolute right-1 transition-all duration-200"
+        name="chevron_right"
+        :class="{ 'rotate-[-90deg] top-[4px]': isOpen, 'rotate-[90deg] top-[5px]': !isOpen }"
+      />
+    </div>
+
+    <div
+      v-if="isOpen"
+      ref="dropdownRef"
+      class="absolute z-50 w-full mt-2 bg-white border border-gray-200 rounded-md shadow-lg max-h-[240px] overflow-hidden"
+    >
+      <div class="max-h-[240px] overflow-y-auto scrollbar-thin">
+        <div
+          v-for="time in timeOptions"
+          :key="time"
+          @click.stop="selectTime(time)"
+          :data-selected="time === displayValue"
+          class="px-3 py-2 text-sm cursor-pointer transition-colors hover:bg-gray-50"
+          :class="{
+            'bg-orange-50 text-orange-600 font-medium': time === displayValue
+          }"
+        >
+          {{ time }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Custom scrollbar for dropdown - target the scrollable container */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 3px;
+  margin: 4px 0;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+/* Override FmTextField styling for orange theme */
+.time-picker-field :deep(.fm-text-field-input) {
+  width: 140px !important;
+  border-width: 2px;
+  border-radius: 0.75rem;
+  padding: 12px 16px;
+  font-size: 1.125rem;
+  transition: all 0.2s;
+}
+
+.time-picker-field :deep(.fm-text-field-input):not(:focus):not(:focus-within) {
+  border-color: rgb(209 213 219);
+  /* gray-300 */
+  background-color: white;
+}
+
+.time-picker-field :deep(.fm-text-field-input):not(:focus):not(:focus-within):hover {
+  border-color: rgb(156 163 175);
+  /* gray-400 */
+}
+
+.time-picker-field.focused :deep(.fm-text-field-input),
+.time-picker-field :deep(.fm-text-field-input):focus,
+.time-picker-field :deep(.fm-text-field-input):focus-within {
+  border-color: rgb(249 115 22) !important;
+  /* orange-500 */
+  background-color: rgb(255 247 237) !important;
+  /* orange-50 */
+}
+</style>