resolve serveral type errors

frontend/components/Form/Autocomplete.vue

@@ -28,7 +28,7 @@
         <li v-for="(obj, idx) in filtered" :key="idx">
           <div type="button" @click="select(obj)">
             <slot name="display" v-bind="{ item: obj }">
-              {{ usingObjects ? obj[itemText] : obj }}
+              {{ extractor(obj, itemText) }}
             </slot>
           </div>
         </li>
@@ -94,6 +94,14 @@
     }
   );
 
+  function extractor(obj: string | ItemsObject, key: string | number): string {
+    if (typeof obj === "string") {
+      return obj;
+    }
+
+    return obj[key] as string;
+  }
+
   const value = useVModel(props, "modelValue", emit);
 
   const usingObjects = computed(() => {
@@ -135,6 +143,7 @@
         value.value = "";
         return;
       }
+      // @ts-ignore
       value.value = obj;
     } else {
       if (obj === value.value) {
@@ -142,6 +151,7 @@
         return;
       }
 
+      // @ts-ignore
       value.value = obj;
     }
   }

frontend/components/Item/CreateModal.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ItemCreate, LocationOut } from "~~/lib/api/types/data-contracts";
+  import { ItemCreate, LabelOut, LocationOut } from "~~/lib/api/types/data-contracts";
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
 
@@ -82,7 +82,7 @@
     name: "",
     description: "",
     color: "", // Future!
-    labels: [],
+    labels: [] as LabelOut[],
   });
 
   whenever(
@@ -91,7 +91,10 @@
       focused.value = true;
 
       if (locationId.value) {
-        form.location = locations.value.find(l => l.id === locationId.value);
+        const found = locations.value.find(l => l.id === locationId.value);
+        if (found) {
+          form.location = found;
+        }
       }
 
       if (labelId.value) {
@@ -106,7 +109,7 @@
     }
 
     const out: ItemCreate = {
-      parentId: undefined,
+      parentId: null,
       name: form.name,
       description: form.description,
       locationId: form.location.id as string,

frontend/components/global/DropZone.vue

@@ -18,7 +18,7 @@
 
   const emit = defineEmits(["update:modelValue", "drop"]);
 
-  const el = ref<HTMLDivElement>(null);
+  const el = ref<HTMLDivElement>();
   const { isOverDropZone } = useDropZone(el, files => {
     emit("drop", files);
   });

frontend/package.json

@@ -16,6 +16,8 @@
   "devDependencies": {
     "@faker-js/faker": "^7.5.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@types/dompurify": "^2.4.0",
+    "@types/markdown-it": "^12.2.3",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "eslint": "^8.23.0",
@@ -47,7 +49,7 @@
     "pinia": "^2.0.21",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8",
-    "vue": "^3.2.38",
+    "vue": "^3.2.45",
     "vue-chartjs": "^4.1.2",
     "vue-router": "4"
   }

frontend/pages/index.vue

@@ -101,6 +101,7 @@
 
     toast.success("Logged in successfully");
 
+    // @ts-ignore
     authStore.$patch({
       token: data.token,
       expires: data.expiresAt,

frontend/pages/item/[id]/index.vue

@@ -408,7 +408,7 @@
         <template #description>
           <Markdown :source="item.description"> </Markdown>
           <div class="flex flex-wrap gap-2 mt-3">
-            <NuxtLink ref="badge" class="badge p-3" :to="`/location/${item.location.id}`">
+            <NuxtLink v-if="item.location" ref="badge" class="badge p-3" :to="`/location/${item.location.id}`">
               <Icon name="heroicons-map-pin" class="mr-2 swap-on"></Icon>
               {{ item.location.name }}
             </NuxtLink>

frontend/pages/items.vue

@@ -392,7 +392,7 @@
               :items="allFields ?? []"
               @change="fetchValues(f[0])"
             >
-              <option v-for="fv in allFields" :key="fv" :value="fv">{{ fv }}</option>
+              <option v-for="(fv, _, i) in allFields" :key="i" :value="fv">{{ fv }}</option>
             </select>
           </div>
           <div class="form-control w-full max-w-xs">

frontend/pages/label/[id].vue

@@ -28,7 +28,7 @@
       {
         name: "Name",
         text: label.value?.name,
-      },
+      } as AnyDetail,
       {
         name: "Description",
         type: "markdown",
@@ -43,16 +43,16 @@
           name: "Created",
           text: label.value?.createdAt,
           type: "date",
-        },
+        } as AnyDetail,
         {
           name: "Updated",
           text: label.value?.updatedAt,
           type: "date",
-        },
+        } as AnyDetail,
         {
           name: "Database ID",
           text: label.value?.id,
-        },
+        } as AnyDetail,
       ];
     }
 

frontend/pages/tools.vue

@@ -102,8 +102,8 @@
   const confirm = useConfirm();
   const notify = useNotifier();
 
-  async function getBillOfMaterials() {
-    await api.reports.billOfMaterials();
+  function getBillOfMaterials() {
+    api.reports.billOfMaterialsURL();
   }
 
   async function ensureAssetIDs() {