Client: Date time zones now handled correctly

Donkie · May 18, 2023 · 646ade1 · 646ade1
1 parent 60ea450
commit 646ade1
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 10 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="favicon.svg" />
+    <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#DC7734" />
     <meta name="description" content="Spoolman UI" />

diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
@@ -9,6 +9,10 @@ import {
 } from "@refinedev/antd";
 import { Table, Space } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
 
 export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   const { tableProps } = useTable({
@@ -90,7 +94,11 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex={["registered"]}
           title="Registered"
           render={(value) => (
-            <DateField value={value} format="YYYY-MM-DD HH:mm:ss" />
+            <DateField
+              value={dayjs.utc(value).local()}
+              title={dayjs.utc(value).local().format()}
+              format="YYYY-MM-DD HH:mm:ss"
+            />
           )}
         />
         <Table.Column dataIndex={["comment"]} title="Comment" />

diff --git a/client/src/pages/filaments/show.tsx b/client/src/pages/filaments/show.tsx
@@ -3,6 +3,10 @@ import { IResourceComponentsProps, useShow } from "@refinedev/core";
 import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
 import { Typography } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
 
 const { Title } = Typography;
 
@@ -17,7 +21,11 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
       <Title level={5}>Id</Title>
       <NumberField value={record?.id ?? ""} />
       <Title level={5}>Registered</Title>
-      <DateField value={record?.registered} format="YYYY-MM-DD HH:mm:ss" />
+      <DateField
+        value={dayjs.utc(record?.registered).local()}
+        title={dayjs.utc(record?.registered).local().format()}
+        format="YYYY-MM-DD HH:mm:ss"
+      />
       <Title level={5}>Name</Title>
       <TextField value={record?.name} />
       <Title level={5}>Vendor</Title>

diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
@@ -10,6 +10,10 @@ import {
 } from "@refinedev/antd";
 import { Table, Space } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
 
 export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   const { tableProps } = useTable({
@@ -68,14 +72,22 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex={["first_used"]}
           title="First Used"
           render={(value) => (
-            <DateField value={value} format="YYYY-MM-DD HH:mm:ss" />
+            <DateField
+              value={dayjs.utc(value).local()}
+              title={dayjs.utc(value).local().format()}
+              format="YYYY-MM-DD HH:mm:ss"
+            />
           )}
         />
         <Table.Column
           dataIndex={["last_used"]}
           title="Last Used"
           render={(value) => (
-            <DateField value={value} format="YYYY-MM-DD HH:mm:ss" />
+            <DateField
+              value={dayjs.utc(value).local()}
+              title={dayjs.utc(value).local().format()}
+              format="YYYY-MM-DD HH:mm:ss"
+            />
           )}
         />
         <Table.Column dataIndex={["comment"]} title="Comment" />

diff --git a/client/src/pages/spools/show.tsx b/client/src/pages/spools/show.tsx
@@ -3,6 +3,10 @@ import { IResourceComponentsProps, useShow } from "@refinedev/core";
 import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
 import { Typography } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
 
 const { Title } = Typography;
 
@@ -17,11 +21,23 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
       <Title level={5}>Id</Title>
       <NumberField value={record?.id ?? ""} />
       <Title level={5}>Registered</Title>
-      <DateField value={record?.registered} format="YYYY-MM-DD HH:mm:ss" />
+      <DateField
+        value={dayjs.utc(record?.registered).local()}
+        title={dayjs.utc(record?.registered).local().format()}
+        format="YYYY-MM-DD HH:mm:ss"
+      />
       <Title level={5}>First Used</Title>
-      <DateField value={record?.first_used} format="YYYY-MM-DD HH:mm:ss" />
+      <DateField
+        value={dayjs.utc(record?.first_used).local()}
+        title={dayjs.utc(record?.first_used).local().format()}
+        format="YYYY-MM-DD HH:mm:ss"
+      />
       <Title level={5}>Last Used</Title>
-      <DateField value={record?.last_used} format="YYYY-MM-DD HH:mm:ss" />
+      <DateField
+        value={dayjs.utc(record?.last_used).local()}
+        title={dayjs.utc(record?.last_used).local().format()}
+        format="YYYY-MM-DD HH:mm:ss"
+      />
       <Title level={5}>Filament</Title>
       {/* {filamentIsLoading ? (
                 <>Loading...</>

diff --git a/client/src/pages/vendors/list.tsx b/client/src/pages/vendors/list.tsx
@@ -8,6 +8,10 @@ import {
   DateField,
 } from "@refinedev/antd";
 import { Table, Space } from "antd";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
 
 export const VendorList: React.FC<IResourceComponentsProps> = () => {
   const { tableProps } = useTable({
@@ -23,7 +27,11 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
           dataIndex={["registered"]}
           title="Registered"
           render={(value) => (
-            <DateField value={value} format="YYYY-MM-DD HH:mm:ss" />
+            <DateField
+              value={dayjs.utc(value).local()}
+              title={dayjs.utc(value).local().format()}
+              format="YYYY-MM-DD HH:mm:ss"
+            />
           )}
         />
         <Table.Column dataIndex={["comment"]} title="Comment" />

diff --git a/client/src/pages/vendors/show.tsx b/client/src/pages/vendors/show.tsx
@@ -2,6 +2,10 @@ import React from "react";
 import { IResourceComponentsProps, useShow } from "@refinedev/core";
 import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
 import { Typography } from "antd";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
 
 const { Title } = Typography;
 
@@ -16,7 +20,11 @@ export const VendorShow: React.FC<IResourceComponentsProps> = () => {
       <Title level={5}>Id</Title>
       <NumberField value={record?.id ?? ""} />
       <Title level={5}>Registered</Title>
-      <DateField value={record?.registered} format="YYYY-MM-DD HH:mm:ss" />
+      <DateField
+        value={dayjs.utc(record?.registered).local()}
+        title={dayjs.utc(record?.registered).local().format()}
+        format="YYYY-MM-DD HH:mm:ss"
+      />
       <Title level={5}>Name</Title>
       <TextField value={record?.name} />
       <Title level={5}>Comment</Title>