From 6ff2d64996b9873c844d0a9fb4c754ad5b7555f3 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Fri, 10 Feb 2023 19:38:50 -0900
Subject: [PATCH] feat: init tools page (#271)

---
 frontend/components/App/ImportDialog.vue |  11 ++-
 frontend/components/DetailAction.vue     |  17 ++++
 frontend/layouts/default.vue             |  16 +--
 frontend/lib/api/types/data-contracts.ts |  64 ++++++------
 frontend/pages/profile.vue               |  95 +++---------------
 frontend/pages/tools.vue                 | 118 +++++++++++++++++++++++
 scripts/process-types/main.go            |   2 +-
 7 files changed, 194 insertions(+), 129 deletions(-)
 create mode 100644 frontend/components/DetailAction.vue
 create mode 100644 frontend/pages/tools.vue

diff --git a/frontend/components/App/ImportDialog.vue b/frontend/components/App/ImportDialog.vue
index fec49f2..4d225a2 100644
--- a/frontend/components/App/ImportDialog.vue
+++ b/frontend/components/App/ImportDialog.vue
@@ -53,11 +53,16 @@
   );
 
   function setFile(e: Event) {
-    importCsv.value = e.target.files[0];
+    const result = e.target as HTMLInputElement;
+    if (!result.files || result.files.length === 0) {
+      return;
+    }
+
+    importCsv.value = result.files[0];
   }
 
   function uploadCsv() {
-    importRef.value.click();
+    importRef.value?.click();
   }
 
   const eventBus = useEventBus();
@@ -86,5 +91,7 @@
     }
 
     eventBus.emit(EventTypes.InvalidStores);
+
+    toast.success("Import successful!");
   }
 </script>
diff --git a/frontend/components/DetailAction.vue b/frontend/components/DetailAction.vue
new file mode 100644
index 0000000..4512344
--- /dev/null
+++ b/frontend/components/DetailAction.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-10 py-6">
+    <div class="col-span-3">
+      <h4 class="mb-1 text-lg font-semibold">
+        <slot name="title"></slot>
+      </h4>
+      <p class="text-sm">
+        <slot></slot>
+      </p>
+    </div>
+    <BaseButton class="btn-primary mt-auto" @click="$emit('action')">
+      <slot name="button">
+        <slot name="title"></slot>
+      </slot>
+    </BaseButton>
+  </div>
+</template>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 6a17bf2..11da8b0 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -6,7 +6,6 @@
     up the tree
    -->
     <ModalConfirm />
-    <AppImportDialog v-model="modals.import" />
     <ItemCreateModal v-model="modals.item" />
     <LabelCreateModal v-model="modals.label" />
     <LocationCreateModal v-model="modals.location" />
@@ -78,10 +77,6 @@
                     <Icon :name="n.icon" class="h-6 w-6 mr-4" />
                     {{ n.name }}
                   </NuxtLink>
-                  <button v-else class="rounded-btn" @click="n.action">
-                    <Icon :name="n.icon" class="h-6 w-6 mr-4" />
-                    {{ n.name }}
-                  </button>
                 </li>
               </ul>
             </div>
@@ -172,12 +167,11 @@
       to: "/locations",
     },
     {
-      icon: "mdi-database",
-      id: 2,
-      name: "Import",
-      action: () => {
-        modals.import = true;
-      },
+      icon: "mdi-cog",
+      id: 6,
+      active: computed(() => route.path === "/tools"),
+      name: "Tools",
+      to: "/tools",
     },
   ];
 
diff --git a/frontend/lib/api/types/data-contracts.ts b/frontend/lib/api/types/data-contracts.ts
index ff2517a..9ed4a8d 100644
--- a/frontend/lib/api/types/data-contracts.ts
+++ b/frontend/lib/api/types/data-contracts.ts
@@ -17,11 +17,11 @@ export interface DocumentOut {
 }
 
 export interface Group {
-  createdAt: string;
+  createdAt: Date | string;
   currency: string;
   id: string;
   name: string;
-  updatedAt: string;
+  updatedAt: Date | string;
 }
 
 export interface GroupStatistics {
@@ -39,11 +39,11 @@ export interface GroupUpdate {
 }
 
 export interface ItemAttachment {
-  createdAt: string;
+  createdAt: Date | string;
   document: DocumentOut;
   id: string;
   type: string;
-  updatedAt: string;
+  updatedAt: Date | string;
 }
 
 export interface ItemAttachmentUpdate {
@@ -76,7 +76,7 @@ export interface ItemOut {
   assetId: string;
   attachments: ItemAttachment[];
   children: ItemSummary[];
-  createdAt: string;
+  createdAt: Date | string;
   description: string;
   fields: ItemField[];
   id: string;
@@ -96,23 +96,23 @@ export interface ItemOut {
   /** @example "0" */
   purchasePrice: string;
   /** Purchase */
-  purchaseTime: string;
+  purchaseTime: Date | string;
   quantity: number;
   serialNumber: string;
   soldNotes: string;
   /** @example "0" */
   soldPrice: string;
   /** Sold */
-  soldTime: string;
+  soldTime: Date | string;
   soldTo: string;
-  updatedAt: string;
+  updatedAt: Date | string;
   warrantyDetails: string;
-  warrantyExpires: string;
+  warrantyExpires: Date | string;
 }
 
 export interface ItemSummary {
   archived: boolean;
-  createdAt: string;
+  createdAt: Date | string;
   description: string;
   id: string;
   insured: boolean;
@@ -123,7 +123,7 @@ export interface ItemSummary {
   /** @example "0" */
   purchasePrice: string;
   quantity: number;
-  updatedAt: string;
+  updatedAt: Date | string;
 }
 
 export interface ItemUpdate {
@@ -148,7 +148,7 @@ export interface ItemUpdate {
   /** @example "0" */
   purchasePrice: string;
   /** Purchase */
-  purchaseTime: string;
+  purchaseTime: Date | string;
   quantity: number;
   /** Identifications */
   serialNumber: string;
@@ -156,10 +156,10 @@ export interface ItemUpdate {
   /** @example "0" */
   soldPrice: string;
   /** Sold */
-  soldTime: string;
+  soldTime: Date | string;
   soldTo: string;
   warrantyDetails: string;
-  warrantyExpires: string;
+  warrantyExpires: Date | string;
 }
 
 export interface LabelCreate {
@@ -169,20 +169,20 @@ export interface LabelCreate {
 }
 
 export interface LabelOut {
-  createdAt: string;
+  createdAt: Date | string;
   description: string;
   id: string;
   items: ItemSummary[];
   name: string;
-  updatedAt: string;
+  updatedAt: Date | string;
 }
 
 export interface LabelSummary {
-  createdAt: string;
+  createdAt: Date | string;
   description: string;
   id: string;
   name: string;
-  updatedAt: string;
+  updatedAt: Date | string;
 }
 
 export interface LocationCreate {
@@ -193,30 +193,30 @@ export interface LocationCreate {
 
 export interface LocationOut {
   children: LocationSummary[];
-  createdAt: string;
+  createdAt: Date | string;
   description: string;
   id: string;
   items: ItemSummary[];
   name: string;
   parent: LocationSummary;
-  updatedAt: string;
+  updatedAt: Date | string;
 }
 
 export interface LocationOutCount {
-  createdAt: string;
+  createdAt: Date | string;
   description: string;
   id: string;
   itemCount: number;
   name: string;
-  updatedAt: string;
+  updatedAt: Date | string;
 }
 
 export interface LocationSummary {
-  createdAt: string;
+  createdAt: Date | string;
   description: string;
   id: string;
   name: string;
-  updatedAt: string;
+  updatedAt: Date | string;
 }
 
 export interface LocationUpdate {
@@ -229,7 +229,7 @@ export interface LocationUpdate {
 export interface MaintenanceEntry {
   /** @example "0" */
   cost: string;
-  date: Date;
+  date: Date | string;
   description: string;
   id: string;
   name: string;
@@ -238,7 +238,7 @@ export interface MaintenanceEntry {
 export interface MaintenanceEntryCreate {
   /** @example "0" */
   cost: string;
-  date: Date;
+  date: Date | string;
   description: string;
   name: string;
 }
@@ -246,7 +246,7 @@ export interface MaintenanceEntryCreate {
 export interface MaintenanceEntryUpdate {
   /** @example "0" */
   cost: string;
-  date: Date;
+  date: Date | string;
   description: string;
   name: string;
 }
@@ -258,7 +258,7 @@ export interface MaintenanceLog {
   itemId: string;
 }
 
-export interface PaginationResultRepoItemSummary {
+export interface PaginationResultItemSummary {
   items: ItemSummary[];
   page: number;
   pageSize: number;
@@ -302,7 +302,7 @@ export interface ValueOverTime {
 }
 
 export interface ValueOverTimeEntry {
-  date: Date;
+  date: Date | string;
   name: string;
   value: number;
 }
@@ -355,13 +355,13 @@ export interface ChangePassword {
 }
 
 export interface GroupInvitation {
-  expiresAt: string;
+  expiresAt: Date | string;
   token: string;
   uses: number;
 }
 
 export interface GroupInvitationCreate {
-  expiresAt: string;
+  expiresAt: Date | string;
   uses: number;
 }
 
@@ -371,6 +371,6 @@ export interface ItemAttachmentToken {
 
 export interface TokenResponse {
   attachmentToken: string;
-  expiresAt: string;
+  expiresAt: Date | string;
   token: string;
 }
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index a32df9c..230a44f 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -40,15 +40,22 @@
 
   // Sync Initial Currency
   watch(group, () => {
-    if (group.value) {
-      const found = currencies.find(c => c.code === group.value.currency);
-      if (found) {
-        currency.value = found;
-      }
+    if (!group.value) {
+      return;
+    }
+
+    // @ts-expect-error - typescript is stupid, it should know group.value is not null
+    const found = currencies.find(c => c.code === group.value.currency);
+    if (found) {
+      currency.value = found;
     }
   });
 
   async function updateGroup() {
+    if (!group.value) {
+      return;
+    }
+
     const { data, error } = await api.group.update({
       name: group.value.name,
       currency: group.value.currency,
@@ -161,44 +168,6 @@
     passwordChange.current = "";
     passwordChange.loading = false;
   }
-
-  async function ensureAssetIDs() {
-    const { isCanceled } = await confirm.open(
-      "Are you sure you want to ensure all assets have an ID? This will take a while and cannot be undone."
-    );
-
-    if (isCanceled) {
-      return;
-    }
-
-    const result = await api.actions.ensureAssetIDs();
-
-    if (result.error) {
-      notify.error("Failed to ensure asset IDs.");
-      return;
-    }
-
-    notify.success(`${result.data.completed} assets have been updated.`);
-  }
-
-  async function resetItemDateTimes() {
-    const { isCanceled } = await confirm.open(
-      "Are you sure you want to reset all date and time values? This will take a while and cannot be undone."
-    );
-
-    if (isCanceled) {
-      return;
-    }
-
-    const result = await api.actions.resetItemDateTimes();
-
-    if (result.error) {
-      notify.error("Failed to reset date and time values.");
-      return;
-    }
-
-    notify.success(`${result.data.completed} assets have been updated.`);
-  }
 </script>
 
 <template>
@@ -322,46 +291,6 @@
         </div>
       </BaseCard>
 
-      <BaseCard>
-        <template #title>
-          <BaseSectionHeader>
-            <Icon name="mdi-warning" class="mr-2 -mt-1 text-base-600" />
-            <span class="text-base-600"> Actions </span>
-            <template #description>
-              Apply Actions to your inventory in bulk. These are irreversible actions. Be careful.
-            </template>
-          </BaseSectionHeader>
-
-          <div class="py-4 border-t-2 border-gray-300 space-y-8">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
-              <div class="col-span-3">
-                <h4>Manage Asset IDs</h4>
-                <p class="text-sm">
-                  Ensures that all items in your inventory have a valid asset_id field. This is done by finding the
-                  highest current asset_id field in the database and applying the next value to each item that has an
-                  unset asset_id field. This is done in order of the created_at field.
-                </p>
-              </div>
-              <BaseButton class="btn-primary mt-auto" @click="ensureAssetIDs"> Ensure Asset IDs </BaseButton>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
-              <div class="col-span-3">
-                <h4>Zero Item Date Times</h4>
-                <p class="text-sm">
-                  Resets the time value for all date time fields in your inventory to the beginning of the date. This is
-                  to fix a bug that was introduced early on in the development of the site that caused the time value to
-                  be stored with the time which caused issues with date fields displaying accurate values.
-                  <a class="link" href="https://github.com/hay-kot/homebox/issues/236" target="_blank">
-                    See Github Issue #236 for more details
-                  </a>
-                </p>
-              </div>
-              <BaseButton class="btn-primary mt-auto" @click="resetItemDateTimes"> Zero Item Date Times </BaseButton>
-            </div>
-          </div>
-        </template>
-      </BaseCard>
-
       <BaseCard>
         <template #title>
           <BaseSectionHeader>
diff --git a/frontend/pages/tools.vue b/frontend/pages/tools.vue
new file mode 100644
index 0000000..6825dcf
--- /dev/null
+++ b/frontend/pages/tools.vue
@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <AppImportDialog v-model="modals.import" />
+    <BaseContainer class="flex flex-col gap-4 mb-6">
+      <BaseCard>
+        <template #title>
+          <BaseSectionHeader>
+            <Icon name="mdi-database" class="mr-2 -mt-1" />
+            <span> Import / Export </span>
+            <template #description>
+              Import and export your inventory to and from a CSV file. This is useful for migrating your inventory to a
+              new instance of Homebox.
+            </template>
+          </BaseSectionHeader>
+          <div class="border-t border-gray-300 divide-gray-300 divide-y">
+            <DetailAction @click="modals.import = true">
+              <template #title>Import Inventory</template>
+              Imports the standard CSV format for Homebox. This will <b>not</b> overwrite any existing items in your
+              inventory. It will only add new items.
+            </DetailAction>
+            <!-- <DetailAction>
+              <template #title>Export Inventory</template>
+              Exports the standard CSV format for Homebox. This will export all items in your inventory.
+            </DetailAction> -->
+          </div>
+        </template>
+      </BaseCard>
+      <BaseCard>
+        <template #title>
+          <BaseSectionHeader>
+            <Icon name="mdi-warning" class="mr-2 -mt-1" />
+            <span> Inventory Actions </span>
+            <template #description>
+              Apply Actions to your inventory in bulk. These are irreversible actions. <b>Be careful</b>
+            </template>
+          </BaseSectionHeader>
+          <div class="border-t border-gray-300 divide-gray-300 divide-y">
+            <DetailAction @action="ensureAssetIDs">
+              <template #title>Ensure Asset IDs</template>
+              Ensures that all items in your inventory have a valid asset_id field. This is done by finding the highest
+              current asset_id field in the database and applying the next value to each item that has an unset asset_id
+              field. This is done in order of the created_at field.
+            </DetailAction>
+            <DetailAction @click="resetItemDateTimes">
+              <template #title> Zero Item Date Times</template>
+              Resets the time value for all date time fields in your inventory to the beginning of the date. This is to
+              fix a bug that was introduced early on in the development of the site that caused the time value to be
+              stored with the time which caused issues with date fields displaying accurate values.
+              <a class="link" href="https://github.com/hay-kot/homebox/issues/236" target="_blank">
+                See Github Issue #236 for more details
+              </a>
+            </DetailAction>
+          </div>
+        </template>
+      </BaseCard>
+    </BaseContainer>
+  </div>
+</template>
+
+<script setup lang="ts">
+  definePageMeta({
+    middleware: ["auth"],
+  });
+  useHead({
+    title: "Homebox | Profile",
+  });
+
+  const modals = ref({
+    item: false,
+    location: false,
+    label: false,
+    import: false,
+  });
+
+  const api = useUserApi();
+  const confirm = useConfirm();
+  const notify = useNotifier();
+
+  async function ensureAssetIDs() {
+    const { isCanceled } = await confirm.open(
+      "Are you sure you want to ensure all assets have an ID? This can take a while and cannot be undone."
+    );
+
+    if (isCanceled) {
+      return;
+    }
+
+    const result = await api.actions.ensureAssetIDs();
+
+    if (result.error) {
+      notify.error("Failed to ensure asset IDs.");
+      return;
+    }
+
+    notify.success(`${result.data.completed} assets have been updated.`);
+  }
+
+  async function resetItemDateTimes() {
+    const { isCanceled } = await confirm.open(
+      "Are you sure you want to reset all date and time values? This can take a while and cannot be undone."
+    );
+
+    if (isCanceled) {
+      return;
+    }
+
+    const result = await api.actions.resetItemDateTimes();
+
+    if (result.error) {
+      notify.error("Failed to reset date and time values.");
+      return;
+    }
+
+    notify.success(`${result.data.completed} assets have been updated.`);
+  }
+</script>
+
+<style scoped></style>
diff --git a/scripts/process-types/main.go b/scripts/process-types/main.go
index 06e3ec7..cb9f684 100644
--- a/scripts/process-types/main.go
+++ b/scripts/process-types/main.go
@@ -9,7 +9,7 @@ import (
 func dateTypes(names []string) map[*regexp.Regexp]string {
 	result := make(map[*regexp.Regexp]string)
 	for _, name := range names {
-		result[regexp.MustCompile(fmt.Sprintf(`%s: string`, name))] = fmt.Sprintf(`%s: Date`, name)
+		result[regexp.MustCompile(fmt.Sprintf(`%s: string`, name))] = fmt.Sprintf(`%s: Date | string`, name)
 	}
 	return result
 }