From 3a3623be36f474a7da57b2a924711044596bb84e Mon Sep 17 00:00:00 2001
From: netervati <netervati@gmail.com>
Date: Mon, 17 Jun 2024 16:13:22 +0800
Subject: [PATCH 1/4] Add v-calendar and date-fns

---
 package-lock.json | 146 ++++++++++++++++++++++++++++++++++++++++++++--
 package.json      |   4 +-
 2 files changed, 144 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3fda310..a656640 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,9 @@
         "@types/node": "^18.11.18",
         "@vueuse/core": "^10.2.0",
         "@vueuse/nuxt": "^10.2.0",
-        "supabase": "^1.38.2"
+        "date-fns": "^2.30.0",
+        "supabase": "^1.38.2",
+        "v-calendar": "^3.1.2"
       },
       "devDependencies": {
         "@faker-js/faker": "^8.0.0",
@@ -579,6 +581,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
+      "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/standalone": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.22.5.tgz",
@@ -1576,6 +1589,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-alias": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.0.0.tgz",
@@ -1930,8 +1953,7 @@
     "node_modules/@types/lodash": {
       "version": "4.14.195",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
-      "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==",
-      "dev": true
+      "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg=="
     },
     "node_modules/@types/mdast": {
       "version": "3.0.11",
@@ -1971,6 +1993,11 @@
       "integrity": "sha512-qwfpsHmFuhAS/dVd4uBIraMxRd56vwBUYQGZ6GpXnFuM2XMRFJbIyruFKKlW2daQliuYZwe0qfn/UjFCDKic5g==",
       "dev": true
     },
+    "node_modules/@types/resize-observer-browser": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz",
+      "integrity": "sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ=="
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -4138,6 +4165,29 @@
         "node": ">= 12"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
+      "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
+      "peerDependencies": {
+        "date-fns": "2.x"
+      }
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -10567,6 +10617,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/regexp-tree": {
       "version": "0.1.27",
       "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.27.tgz",
@@ -12515,6 +12570,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/v-calendar": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.1.2.tgz",
+      "integrity": "sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==",
+      "dependencies": {
+        "@types/lodash": "^4.14.165",
+        "@types/resize-observer-browser": "^0.1.7",
+        "date-fns": "^2.16.1",
+        "date-fns-tz": "^2.0.0",
+        "lodash": "^4.17.20",
+        "vue-screen-utils": "^1.0.0-beta.13"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -12904,6 +12976,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-screen-utils": {
+      "version": "1.0.0-beta.13",
+      "resolved": "https://registry.npmjs.org/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz",
+      "integrity": "sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
@@ -13662,6 +13742,14 @@
         "@babel/plugin-syntax-typescript": "^7.22.5"
       }
     },
+    "@babel/runtime": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
+      "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
+      "requires": {
+        "regenerator-runtime": "^0.14.0"
+      }
+    },
     "@babel/standalone": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.22.5.tgz",
@@ -14319,6 +14407,12 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true
+    },
     "@rollup/plugin-alias": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.0.0.tgz",
@@ -14571,8 +14665,7 @@
     "@types/lodash": {
       "version": "4.14.195",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
-      "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==",
-      "dev": true
+      "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg=="
     },
     "@types/mdast": {
       "version": "3.0.11",
@@ -14612,6 +14705,11 @@
       "integrity": "sha512-qwfpsHmFuhAS/dVd4uBIraMxRd56vwBUYQGZ6GpXnFuM2XMRFJbIyruFKKlW2daQliuYZwe0qfn/UjFCDKic5g==",
       "dev": true
     },
+    "@types/resize-observer-browser": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz",
+      "integrity": "sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ=="
+    },
     "@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -16170,6 +16268,20 @@
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
       "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="
     },
+    "date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "requires": {
+        "@babel/runtime": "^7.21.0"
+      }
+    },
+    "date-fns-tz": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
+      "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
+      "requires": {}
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -20628,6 +20740,11 @@
         "redis-errors": "^1.0.0"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "regexp-tree": {
       "version": "0.1.27",
       "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.27.tgz",
@@ -22062,6 +22179,19 @@
         }
       }
     },
+    "v-calendar": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.1.2.tgz",
+      "integrity": "sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==",
+      "requires": {
+        "@types/lodash": "^4.14.165",
+        "@types/resize-observer-browser": "^0.1.7",
+        "date-fns": "^2.16.1",
+        "date-fns-tz": "^2.0.0",
+        "lodash": "^4.17.20",
+        "vue-screen-utils": "^1.0.0-beta.13"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -22296,6 +22426,12 @@
         "@vue/devtools-api": "^6.5.0"
       }
     },
+    "vue-screen-utils": {
+      "version": "1.0.0-beta.13",
+      "resolved": "https://registry.npmjs.org/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz",
+      "integrity": "sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==",
+      "requires": {}
+    },
     "vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
diff --git a/package.json b/package.json
index e965685..9946d3e 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,9 @@
     "@types/node": "^18.11.18",
     "@vueuse/core": "^10.2.0",
     "@vueuse/nuxt": "^10.2.0",
-    "supabase": "^1.38.2"
+    "date-fns": "^2.30.0",
+    "supabase": "^1.38.2",
+    "v-calendar": "^3.1.2"
   },
   "overrides": {
     "vue": "latest"

From a8bc9832b767c81e35b57d66a5e64e8736cce0be Mon Sep 17 00:00:00 2001
From: netervati <netervati@gmail.com>
Date: Mon, 17 Jun 2024 16:14:00 +0800
Subject: [PATCH 2/4] Create calendar picker component

---
 components/calendarPicker.vue | 52 +++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 components/calendarPicker.vue

diff --git a/components/calendarPicker.vue b/components/calendarPicker.vue
new file mode 100644
index 0000000..da4a2f7
--- /dev/null
+++ b/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>

From 014f001d1460636110d0d032b7767a479007ebfe Mon Sep 17 00:00:00 2001
From: netervati <netervati@gmail.com>
Date: Mon, 17 Jun 2024 16:14:36 +0800
Subject: [PATCH 3/4] Support timestamp

---
 components/modal/createModelData.vue         | 16 +++++++++++++--
 components/model/table.vue                   | 21 +++++++++++++++++---
 components/table/Loader.vue                  |  6 +++---
 server/routes/models/[id]/model-data.post.ts |  4 ++++
 server/utils/generateModelData.ts            |  9 +++++++++
 5 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/components/modal/createModelData.vue b/components/modal/createModelData.vue
index 93f601e..b82f7f9 100644
--- a/components/modal/createModelData.vue
+++ b/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">
diff --git a/components/model/table.vue b/components/model/table.vue
index 9329a61..23fc837 100644
--- a/components/model/table.vue
+++ b/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>
diff --git a/components/table/Loader.vue b/components/table/Loader.vue
index 5514ab3..3e8227f 100644
--- a/components/table/Loader.vue
+++ b/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>
diff --git a/server/routes/models/[id]/model-data.post.ts b/server/routes/models/[id]/model-data.post.ts
index a21af60..773d33f 100644
--- a/server/routes/models/[id]/model-data.post.ts
+++ b/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;
 };
 
diff --git a/server/utils/generateModelData.ts b/server/utils/generateModelData.ts
index cb893e2..3b78752 100644
--- a/server/utils/generateModelData.ts
+++ b/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
+      })
   }
 }
 

From 63100835ab473176c67b44fd1b2567d2e2ccf02b Mon Sep 17 00:00:00 2001
From: netervati <netervati@gmail.com>
Date: Mon, 17 Jun 2024 16:16:17 +0800
Subject: [PATCH 4/4] Fix lint

---
 server/utils/generateModelData.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/utils/generateModelData.ts b/server/utils/generateModelData.ts
index 3b78752..5e44648 100644
--- a/server/utils/generateModelData.ts
+++ b/server/utils/generateModelData.ts
@@ -101,8 +101,8 @@ function setValue(schema: FakeSchema) {
     case 'timestamp':
       return faker.date.between({
         from: schema.range.start,
-        to: schema.range.end
-      })
+        to: schema.range.end,
+      });
   }
 }