fix datetime display issues (again) (#324)

hay-kot · Feb 28, 2023 · cf53639 · cf53639
1 parent 0255214
commit cf53639
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 14 deletions.
diff --git a/backend/go.sum b/backend/go.sum
@@ -76,13 +76,11 @@ github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27k
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
 github.com/mattn/go-isatty v0.0.17 h1:BTarxUcIeDqL27Mc+vyvdWYSL28zpIhv3RoTdsLMPng=
 github.com/mattn/go-isatty v0.0.17/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-runewidth v0.0.9 h1:Lm995f3rfxdpd6TSmuVCHVb/QhupuXlYr8sCI/QdE+0=
 github.com/mattn/go-sqlite3 v1.14.16 h1:yOQRA0RpS5PFz/oikGwBEqvAWhWg5ufRz4ETLjwpU1Y=
 github.com/mattn/go-sqlite3 v1.14.16/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
 github.com/mitchellh/go-wordwrap v1.0.1 h1:TLuKupo69TCn6TQSyGxwI1EblZZEsQ0vMlAFQflz0v0=
 github.com/mitchellh/go-wordwrap v1.0.1/go.mod h1:R62XHJLzvMFRBbcrT7m7WgmE1eOyTSsCt+hzestvNj0=
 github.com/niemeyer/pretty v0.0.0-20200227124842-a10e7caefd8e/go.mod h1:zD1mROLANZcx1PVRCS0qkT7pwLkGfwJo4zjcN/Tysno=
-github.com/olekukonko/tablewriter v0.0.5 h1:P2Ga83D34wi1o9J6Wh1mRuqd4mF/x/lgBS7N7AbDhec=
 github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
@@ -92,8 +90,6 @@ github.com/rs/xid v1.4.0/go.mod h1:trrq9SKmegXys3aeAKXMUTdJsYXVwGY3RLcfgqegfbg=
 github.com/rs/zerolog v1.29.0 h1:Zes4hju04hjbvkVkOhdl2HpZa+0PmVwigmo8XoORE5w=
 github.com/rs/zerolog v1.29.0/go.mod h1:NILgTygv/Uej1ra5XxGf82ZFSLk58MFGAUS2o6usyD0=
 github.com/sergi/go-diff v1.0.0 h1:Kpca3qRNrduNnOQeazBd0ysaKrUJiIuISHxogkT9RPQ=
-github.com/spf13/cobra v1.6.1 h1:o94oiPyS4KD1mPy2fmcYYHHfCxLqYjJOhGsCHFZtEzA=
-github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=

diff --git a/frontend/components/Form/DatePicker.vue b/frontend/components/Form/DatePicker.vue
@@ -35,18 +35,38 @@
   const selected = computed({
     get() {
       // return modelValue as string as YYYY-MM-DD or null
-      if (validDate(props.modelValue)) {
-        if (typeof props.modelValue === "string") {
-          return props.modelValue;
+
+      // String
+      if (typeof props.modelValue === "string") {
+        // Empty string
+        if (props.modelValue === "") {
+          return null;
+        }
+
+        // Invalid Date string
+        if (props.modelValue === "Invalid Date") {
+          return null;
+        }
+
+        // Valid Date string
+        return props.modelValue;
+      }
+
+      // Date
+      if (props.modelValue instanceof Date) {
+        if (isNaN(props.modelValue.getTime())) {
+          return null;
         }
 
-        return props.modelValue ? props.modelValue.toISOString().split("T")[0] : null;
+        // Valid Date
+        return props.modelValue.toISOString().split("T")[0];
       }
 
       return null;
     },
     set(value: string | null) {
       // emit update:modelValue with a Date object or null
+      console.log("SET", value);
       emit("update:modelValue", value ? new Date(value) : null);
     },
   });

diff --git a/frontend/components/global/DateTime.vue b/frontend/components/global/DateTime.vue
@@ -3,23 +3,25 @@
 </template>
 
 <script setup lang="ts">
-  type DateTimeFormat = "relative" | "long" | "short" | "human";
+  import { DateTimeFormat, DateTimeType } from "~~/composables/use-formatters";
 
   type Props = {
     date?: Date | string;
     format?: DateTimeFormat;
+    datetimeType?: DateTimeType;
   };
 
   const props = withDefaults(defineProps<Props>(), {
     date: undefined,
     format: "relative",
+    datetimeType: "date",
   });
 
   const value = computed(() => {
     if (!props.date || !validDate(props.date)) {
       return "";
     }
 
-    return fmtDate(props.date, props.format);
+    return fmtDate(props.date, props.format, props.datetimeType);
   });
 </script>
diff --git a/frontend/components/global/DetailsSection/DetailsSection.vue b/frontend/components/global/DetailsSection/DetailsSection.vue
@@ -7,7 +7,11 @@
         </dt>
         <dd class="text-sm text-base-content text-start sm:col-span-2">
           <slot :name="detail.slot || detail.name" v-bind="{ detail }">
-            <DateTime v-if="detail.type == 'date'" :date="detail.text" />
+            <DateTime
+              v-if="detail.type == 'date'"
+              :date="detail.text"
+              :datetime-type="detail.date ? 'date' : 'datetime'"
+            />
             <Currency v-else-if="detail.type == 'currency'" :amount="detail.text" />
             <template v-else-if="detail.type === 'link'">
               <div class="tooltip tooltip-primary tooltip-right" :data-tip="detail.href">

diff --git a/frontend/components/global/DetailsSection/types.ts b/frontend/components/global/DetailsSection/types.ts
@@ -8,6 +8,7 @@ type BaseDetail = {
 type DateDetail = BaseDetail & {
   type: "date";
   text: Date | string;
+  date: boolean;
 };
 
 type CurrencyDetail = BaseDetail & {

diff --git a/frontend/composables/use-formatters.ts b/frontend/composables/use-formatters.ts
@@ -21,6 +21,7 @@ export async function useFormatCurrency() {
 }
 
 export type DateTimeFormat = "relative" | "long" | "short" | "human";
+export type DateTimeType = "date" | "time" | "datetime";
 
 function ordinalIndicator(num: number) {
   if (num > 3 && num < 21) return "th";
@@ -36,7 +37,7 @@ function ordinalIndicator(num: number) {
   }
 }
 
-export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): string {
+export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human", fmtType: DateTimeType): string {
   const months = [
     "January",
     "February",
@@ -61,6 +62,11 @@ export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): st
     return "";
   }
 
+  if (fmtType === "date") {
+    // Offset local time
+    dt.setHours(dt.getHours() + dt.getTimezoneOffset() / 60);
+  }
+
   switch (fmt) {
     case "relative":
       return useTimeAgo(dt).value + useDateFormat(dt, " (YYYY-MM-DD)").value;

diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
@@ -246,6 +246,7 @@
         name: "Warranty Expires",
         text: item.value?.warrantyExpires || "",
         type: "date",
+        date: true,
       });
     }
 
@@ -280,6 +281,7 @@
         name: "Purchase Date",
         text: item.value?.purchaseTime || "",
         type: "date",
+        date: true,
       },
     ];
   });
@@ -306,6 +308,7 @@
         name: "Sold At",
         text: item.value?.soldTime || "",
         type: "date",
+        date: true,
       },
     ];
   });

diff --git a/frontend/pages/item/[id]/index/maintenance.vue b/frontend/pages/item/[id]/index/maintenance.vue
@@ -217,11 +217,11 @@
               <div class="flex flex-wrap gap-2">
                 <div v-if="validDate(e.completedDate)" class="badge p-3">
                   <Icon name="mdi-check" class="mr-2" />
-                  <DateTime :date="e.completedDate" format="human" />
+                  <DateTime :date="e.completedDate" format="human" datetime-type="date" />
                 </div>
                 <div v-else-if="validDate(e.scheduledDate)" class="badge p-3">
                   <Icon name="mdi-calendar" class="mr-2" />
-                  <DateTime :date="e.scheduledDate" format="human" />
+                  <DateTime :date="e.scheduledDate" format="human" datetime-type="date" />
                 </div>
                 <div class="tooltip tooltip-primary" data-tip="Cost">
                   <div class="badge badge-primary p-3">