Support date picker for timestamp

components/calendarPicker.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+  import { CalendarDaysIcon } from '@heroicons/vue/24/solid';
+  import { format } from 'date-fns';
+  import { DatePicker as VCalendarDatePicker } from 'v-calendar';
+  import 'v-calendar/dist/style.css';
+
+  const emit = defineEmits<{
+    (e: 'change', value: string): void;
+  }>();
+
+  const props =  defineProps<{
+    disabled: boolean;
+    name: string;
+    value?: string;
+  }>();
+
+  const { value } = useField(() => props.name);
+
+  const curDate = new Date();
+
+  const range = ref({
+    start: curDate,
+    end: curDate,
+  });
+
+  watch(range, (updated) => {
+    value.value = updated;
+  });
+
+  onMounted(() => {
+    value.value = range.value;
+  });
+
+  watchEffect(() => {
+    if (props.value) {
+      value.value = props.value;
+    }
+  });
+</script>
+
+<template>
+  <div tabindex="0" class="collapse bg-base-200">
+    <input type="checkbox" /> 
+    <div class="flex collapse-title gap-4 text-sm font-medium">
+      <CalendarDaysIcon class="w-4 h-4" />
+      {{ format(range.start, 'MMMM d, yyy') }} - {{ format(range.end, 'MMMM d, yyy') }}
+    </div>
+    <div class="collapse-content"> 
+      <VCalendarDatePicker v-model.range="range" />
+    </div>
+  </div>
+</template>

components/modal/createModelData.vue

@@ -22,6 +22,7 @@
     max: undefined,
     min: undefined,
     name: sch.name,
+    range: undefined,
     type: sch.type,
     option: '',
     immutable: sch.name === 'id'
@@ -47,7 +48,7 @@
     // float: 'Float',
     number: 'Number',
     string: 'String',
-    // timestamp: 'Timestamp',
+    timestamp: 'Timestamp',
     uuid: 'UUID'
   };
 
@@ -103,7 +104,7 @@
           />
         </section>
       </div>
-      <div class="flex gap-x-2" v-for="(sch, idx) in fields" :key="idx">
+      <div class="grid grid-cols-4 gap-x-2" v-for="(sch, idx) in fields" :key="idx">
         <section class="form-control mt-2">
           <FormInput
             :disabled="true"
@@ -158,6 +159,17 @@
           />
         </section>
         <!-- ================== -->
+        <!-- ======== TIMESTAMP -->
+        <!-- ================== -->
+        <section
+          v-show="sch.value.type === 'timestamp'"
+          class="form-control mt-2 col-span-2"
+        >
+          <CalendarPicker
+            :disabled="isDisabled"
+            :name="`schema[${idx}].range`"
+          />
+        </section>
       </div>
       <section class="mt-10">
         <Button :disabled="isDisabled" size="sm" @click="handleClose">

components/model/table.vue

@@ -3,9 +3,15 @@
   import useModelData from '~~/stores/useModelData';
   import ModalCreateModelData from '~~/components/modal/createModelData.vue';
   import ModalConfirm from '~~/components/modal/confirm.vue';
+  import format from 'date-fns/format';
+
+  type Schema = {
+    name: string;
+    type: string;
+  }
 
   defineProps<{
-    schema: { name: string; type: string }[];
+    schema: Schema[];
   }>();
 
   const modelData = useModelData();
@@ -25,6 +31,15 @@
       select.clear();
     },
   });
+
+  const render = (model: { schema: any }, schema: Schema) => {
+    if (schema.type === 'timestamp') {
+      const parsedDate = Date.parse(model.schema[schema.name]);
+      return format(parsedDate, 'MMMM d, yyy');
+    }
+
+    return model.schema[schema.name];
+  };
 </script>
 
 <template>
@@ -72,7 +87,7 @@
           </tr>
         </thead>
         <tbody>
-          <TableLoader v-if="modelData.isLoading" :colspan="4" />
+          <TableLoader v-if="modelData.isLoading" :colspan="schema.length + 2" />
           <tr v-for="md in modelData.list" v-else :key="md.id">
             <td colspan="2">
               <input
@@ -86,7 +101,7 @@
               v-for="sch in schema"
               class="font-normal normal-case text-base"
             >
-              {{ md.schema[sch.name as any] }}
+              {{ render(md, sch) }}
             </td>
           </tr>
         </tbody>

components/table/Loader.vue

@@ -6,10 +6,10 @@
 
 <template>
   <tr>
-    <td :colspan="colspan">
-      <div class="flex h-full w-full">
+    <td rowspan="4" :colspan="colspan">
+      <figure class="flex mt-32 w-full">
         <LoaderSpinner />
-      </div>
+      </figure>
     </td>
   </tr>
 </template>