feat: Replace vue-datepicker-next from codebase

2026-02-19 20:27:43 +05:30
parent 2f21009609
commit 68771ce928
30 changed files with 718 additions and 246 deletions
@@ -1,77 +1,52 @@
-<script>
-import DatePicker from 'vue-datepicker-next';
-import NextButton from 'dashboard/components-next/button/Button.vue';
+<script setup>
+import { ref } from 'vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import DatePicker from 'dashboard/components-next/DatePicker/DatePicker.vue';

-export default {
-  components: {
-    DatePicker,
-    NextButton,
-  },
-  emits: ['close', 'chooseTime'],
+const emit = defineEmits(['chooseTime']);

-  data() {
-    return {
-      snoozeTime: null,
-      lang: {
-        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-        yearFormat: 'YYYY',
-        monthFormat: 'MMMM',
-      },
-    };
-  },
+const dialogRef = ref(null);
+const datePickerRef = ref(null);
+const today = new Date();

-  methods: {
-    onClose() {
-      this.$emit('close');
-    },
-    chooseTime() {
-      this.$emit('chooseTime', this.snoozeTime);
-    },
-    disabledDate(date) {
-      // Disable all the previous dates
-      const yesterday = new Date();
-      yesterday.setDate(yesterday.getDate() - 1);
-      return date < yesterday;
-    },
-    disabledTime(date) {
-      // Allow only time after 1 hour
-      const now = new Date();
-      now.setHours(now.getHours() + 1);
-      return date < now;
-    },
-  },
+const onApply = dateTime => {
+  dialogRef.value?.close();
+  emit('chooseTime', dateTime);
 };
+
+const onClear = () => {
+  dialogRef.value?.close();
+};
+
+const onDialogClose = () => {
+  datePickerRef.value?.resetState();
+};
+
+const open = () => {
+  dialogRef.value?.open();
+};
+
+const close = () => {
+  dialogRef.value?.close();
+};
+
+defineExpose({ open, close });
 </script>

 <template>
-  <div class="flex flex-col">
-    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
-    <form
-      class="modal-content w-full pt-2 px-5 pb-6"
-      @submit.prevent="chooseTime"
-    >
-      <DatePicker
-        v-model:value="snoozeTime"
-        type="datetime"
-        inline
-        input-class="mx-input "
-        :lang="lang"
-        :disabled-date="disabledDate"
-        :disabled-time="disabledTime"
-      />
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <NextButton
-          faded
-          slate
-          type="reset"
-          :label="$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL')"
-          @click.prevent="onClose"
-        />
-        <NextButton
-          type="submit"
-          :label="$t('CONVERSATION.CUSTOM_SNOOZE.APPLY')"
-        />
-      </div>
-    </form>
-  </div>
+  <Dialog
+    ref="dialogRef"
+    :title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')"
+    :show-confirm-button="false"
+    :show-cancel-button="false"
+    width="2xl"
+    @close="onDialogClose"
+  >
+    <DatePicker
+      ref="datePickerRef"
+      :min-date="today"
+      @apply="onApply"
+      @clear="onClear"
+    />
+  </Dialog>
 </template>