extract QR code

frontend/components/global/PageQRCode.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="dropdown dropdown-left">
+    <slot>
+      <label tabindex="0" class="btn btn-circle btn-sm">
+        <Icon name="mdi-qrcode" />
+      </label>
+    </slot>
+    <div tabindex="0" class="card compact dropdown-content shadow-lg bg-base-100 rounded-box w-64">
+      <div class="card-body">
+        <h2 class="text-center">Page URL</h2>
+        <img :src="getQRCodeUrl()" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const api = useUserApi();
+
+  function getQRCodeUrl(): string {
+    const currentURL = window.location.href;
+
+    return `/api/v1/qrcode?data=${encodeURIComponent(currentURL)}&access_token=${api.items.attachmentToken}`;
+  }
+</script>
+
+<style lang="scss" scoped></style>

frontend/lib/api/types/data-contracts.ts

@@ -96,7 +96,7 @@ export interface ItemOut {
   /** @example "0" */
   purchasePrice: string;
   /** Purchase */
-  purchaseTime: Date;
+  purchaseTime: string;
   quantity: number;
   serialNumber: string;
   soldNotes: string;
@@ -148,7 +148,7 @@ export interface ItemUpdate {
   /** @example "0" */
   purchasePrice: string;
   /** Purchase */
-  purchaseTime: Date;
+  purchaseTime: string;
   quantity: number;
   /** Identifications */
   serialNumber: string;
@@ -228,7 +228,7 @@ export interface LocationUpdate {
 export interface MaintenanceEntry {
   /** @example "0" */
   cost: string;
-  date: Date;
+  date: string;
   description: string;
   id: string;
   name: string;
@@ -237,7 +237,7 @@ export interface MaintenanceEntry {
 export interface MaintenanceEntryCreate {
   /** @example "0" */
   cost: string;
-  date: Date;
+  date: string;
   description: string;
   name: string;
 }
@@ -245,7 +245,7 @@ export interface MaintenanceEntryCreate {
 export interface MaintenanceEntryUpdate {
   /** @example "0" */
   cost: string;
-  date: Date;
+  date: string;
   description: string;
   name: string;
 }
@@ -257,7 +257,7 @@ export interface MaintenanceLog {
   itemId: string;
 }
 
-export interface PaginationResultRepoItemSummary {
+export interface PaginationResultItemSummary {
   items: ItemSummary[];
   page: number;
   pageSize: number;
@@ -294,7 +294,7 @@ export interface ValueOverTime {
 }
 
 export interface ValueOverTimeEntry {
-  date: Date;
+  date: string;
   name: string;
   value: number;
 }
@@ -347,13 +347,13 @@ export interface EnsureAssetIDResult {
 }
 
 export interface GroupInvitation {
-  expiresAt: Date;
+  expiresAt: string;
   token: string;
   uses: number;
 }
 
 export interface GroupInvitationCreate {
-  expiresAt: Date;
+  expiresAt: string;
   uses: number;
 }
 
@@ -363,6 +363,6 @@ export interface ItemAttachmentToken {
 
 export interface TokenResponse {
   attachmentToken: string;
-  expiresAt: Date;
+  expiresAt: string;
   token: string;
 }

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

@@ -335,12 +335,6 @@
     closeDialog();
   });
 
-  function getQRCodeUrl(): string {
-    const currentURL = window.location.href;
-
-    return `/api/v1/qrcode?data=${encodeURIComponent(currentURL)}&access_token=${api.items.attachmentToken}`;
-  }
-
   const currentPath = computed(() => {
     return route.path;
   });
@@ -438,21 +432,9 @@
                 <input v-model="preferences.showEmpty" type="checkbox" class="toggle toggle-primary" />
                 <span class="label-text ml-4"> Show Empty </span>
               </label>
-              <div class="flex flex-wrap justify-end gap-2 ml-auto">
-                <div class="dropdown dropdown-left">
-                  <label tabindex="0" class="btn btn-circle btn-sm">
-                    <Icon name="mdi-qrcode" />
-                  </label>
-                  <div tabindex="0" class="card compact dropdown-content shadow-lg bg-base-100 rounded-box w-64">
-                    <div class="card-body">
-                      <img :src="getQRCodeUrl()" />
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <PageQRCode />
             </div>
           </template>
-
           <DetailsSection :details="itemDetails" />
         </BaseCard>
 

frontend/pages/label/[id].vue

@@ -149,6 +149,7 @@
             <Icon class="mr-1" name="mdi-delete" />
             Delete
           </BaseButton>
+          <PageQRCode />
         </div>
       </template>
 

frontend/pages/location/[id].vue

@@ -172,6 +172,7 @@
               <Icon class="mr-1" name="mdi-delete" />
               Delete
             </BaseButton>
+            <PageQRCode />
           </div>
         </template>