feat: add lookup by asset ID (#208)

* add asset id redirecting

* dev env changes

* suggested changes from PR

* remove unnecessary proxy from nuxt config

* fix formatting

* change directory reference

* fix API key storage

* use /a/{id} as redirect

* run generators

* remove dependabot

Co-authored-by: Bradley Nelson <bradley@nel.family>
Co-authored-by: Bradley Nelson <BCNelson@users.noreply.github.com>

frontend/lib/api/classes/assets.ts

@@ -0,0 +1,11 @@
+import { BaseAPI, route } from "../base";
+import { ItemSummary } from "../types/data-contracts";
+import { PaginationResult } from "../types/non-generated";
+
+export class AssetsApi extends BaseAPI {
+  async get(id: string, page = 1, pageSize = 50) {
+    return await this.http.get<PaginationResult<ItemSummary>>({
+      url: route(`/asset/${id}`, { page, pageSize }),
+    });
+  }
+}

frontend/lib/api/user.ts

@@ -6,6 +6,7 @@ import { GroupApi } from "./classes/group";
 import { UserApi } from "./classes/users";
 import { ActionsAPI } from "./classes/actions";
 import { StatsAPI } from "./classes/stats";
+import { AssetsApi } from "./classes/assets";
 import { Requests } from "~~/lib/requests";
 
 export class UserClient extends BaseAPI {
@@ -16,17 +17,19 @@ export class UserClient extends BaseAPI {
   user: UserApi;
   actions: ActionsAPI;
   stats: StatsAPI;
+  assets: AssetsApi;
 
   constructor(requests: Requests, attachmentToken: string) {
     super(requests, attachmentToken);
 
     this.locations = new LocationsApi(requests);
     this.labels = new LabelsApi(requests);
-    this.items = new ItemsApi(requests);
+    this.items = new ItemsApi(requests, attachmentToken);
     this.group = new GroupApi(requests);
     this.user = new UserApi(requests);
     this.actions = new ActionsAPI(requests);
     this.stats = new StatsAPI(requests);
+    this.assets = new AssetsApi(requests);
 
     Object.freeze(this);
   }

frontend/pages/a/[id].vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+  definePageMeta({
+    middleware: ["auth"],
+  });
+
+  const route = useRoute();
+  const assetId = computed<string>(() => route.params.id as string);
+  await navigateTo("/assets/" + assetId.value, { replace: true, redirectCode: 301 });
+</script>

frontend/pages/assets/[id].vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  definePageMeta({
+    middleware: ["auth"],
+  });
+
+  const route = useRoute();
+  const api = useUserApi();
+  const toast = useNotifier();
+
+  const assetId = computed<string>(() => route.params.id as string);
+
+  const { pending, data: items } = useLazyAsyncData(`asset/${assetId.value}`, async () => {
+    const { data, error } = await api.assets.get(assetId.value);
+    if (error) {
+      toast.error("Failed to load asset");
+      navigateTo("/home");
+      return;
+    }
+    switch (data.total) {
+      case 0:
+        toast.error("Asset not found");
+        navigateTo("/home");
+        break;
+      case 1:
+        navigateTo(`/item/${data.items[0].id}`, { replace: true, redirectCode: 302 });
+        break;
+      default:
+        return data.items;
+    }
+  });
+</script>
+
+<template>
+  <BaseContainer>
+    <section v-if="!pending">
+      <BaseSectionHeader class="mb-5"> This Asset Id is associated with multiple items</BaseSectionHeader>
+      <div class="grid gap-2 grid-cols-1 sm:grid-cols-2">
+        <ItemCard v-for="item in items" :key="item.id" :item="item" />
+      </div>
+    </section>
+  </BaseContainer>
+</template>