Support timestamp

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>

server/routes/models/[id]/model-data.post.ts

@@ -7,6 +7,10 @@ type FakeSchema = {
   min?: number;
   name: string;
   option: string;
+  range: {
+    start: string;
+    end: string;
+  };
   type: string;
 };
 

server/utils/generateModelData.ts

@@ -79,6 +79,10 @@ type FakeSchema = {
   min?: number;
   name: string;
   option: string;
+  range: {
+    start: string;
+    end: string;
+  };
   type: string;
 };
 
@@ -94,6 +98,11 @@ function setValue(schema: FakeSchema) {
       return uuidv4();
     case 'boolean':
       return faker.datatype.boolean();
+    case 'timestamp':
+      return faker.date.between({
+        from: schema.range.start,
+        to: schema.range.end
+      })
   }
 }