From ee5449b92cfd36732cf86e255f5713ba1467683d Mon Sep 17 00:00:00 2001
From: zumuta <franky.braem@zumuta.be>
Date: Sat, 30 Nov 2024 21:43:17 +0100
Subject: [PATCH] refactor: use DatePicker from PrimeVue

---
 .../{TimePicker.vue => KwaiTimePicker.vue}    | 19 ++++++-------------
 frontend/packages/kwai-ui/src/form/index.ts   |  2 +-
 2 files changed, 7 insertions(+), 14 deletions(-)
 rename frontend/packages/kwai-ui/src/form/{TimePicker.vue => KwaiTimePicker.vue} (61%)

diff --git a/frontend/packages/kwai-ui/src/form/TimePicker.vue b/frontend/packages/kwai-ui/src/form/KwaiTimePicker.vue
similarity index 61%
rename from frontend/packages/kwai-ui/src/form/TimePicker.vue
rename to frontend/packages/kwai-ui/src/form/KwaiTimePicker.vue
index 1936baf7f..e86762953 100644
--- a/frontend/packages/kwai-ui/src/form/TimePicker.vue
+++ b/frontend/packages/kwai-ui/src/form/KwaiTimePicker.vue
@@ -1,24 +1,19 @@
 <script setup lang="ts">
-import { computed, toRef, useSlots } from 'vue';
+import { toRef, useSlots } from 'vue';
 import { useField } from 'vee-validate';
 import RequiredIcon from '../icons/RequiredIcon.vue';
-import VueDatePicker from '@vuepic/vue-datepicker';
-import type { TimeModel } from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css';
+import DatePicker from 'primevue/datepicker';
 
 const props = defineProps<{
   name: string,
   id?: string,
   placeholder?: string
-  format?: string
   required?: boolean
 }>();
 const slots = useSlots();
 
 const nameRef = toRef(props, 'name');
-const { value, errorMessage } = useField<TimeModel>(nameRef);
-
-const format = computed(() => props.format ?? 'HH:mm');
+const { value, errorMessage } = useField<Date>(nameRef);
 </script>
 
 <template>
@@ -34,14 +29,12 @@ const format = computed(() => props.format ?? 'HH:mm');
         class="ml-1 w-2 h-2 -mt-4 fill-black"
       />
     </label>
-    <VueDatePicker
+    <DatePicker
       :id="id ?? name"
       v-model="value"
-      :format="format"
-      time-picker
-      text-input
+      :hour-format="'24'"
+      time-only
       :placeholder="placeholder ?? ''"
-      :class="{ 'mt-1': !!slots.label, 'border-red-600': errorMessage, 'focus:ring-red-600': errorMessage, 'focus:border-red-600': errorMessage }"
     />
     <p
       v-if="!!slots.help"
diff --git a/frontend/packages/kwai-ui/src/form/index.ts b/frontend/packages/kwai-ui/src/form/index.ts
index 6efadc9e9..3d7558e39 100644
--- a/frontend/packages/kwai-ui/src/form/index.ts
+++ b/frontend/packages/kwai-ui/src/form/index.ts
@@ -10,7 +10,7 @@ export { default as InputField } from './InputField.vue';
 export { default as KwaiDateRangePicker } from './KwaiDateRangePicker.vue';
 export { default as KwaiDatePicker } from './KwaiDatePicker.vue';
 export type { TimeModel } from '@vuepic/vue-datepicker';
-export { default as TimePicker } from './TimePicker.vue';
+export { default as KwaiTimePicker } from './KwaiTimePicker.vue';
 export { default as CheckBox } from './CheckBox.vue';
 export { default as KwaiButton } from './KwaiButton.vue';
 export { default as KwaiButtonGroup } from './KwaiButtonGroup.vue';