lots of stuff

frontend/components/Base/ActionsDivider.vue

@@ -12,7 +12,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts" setup>
-  defineEmits(['edit', 'delete']);
-</script>

frontend/components/Base/Button.vue

@@ -1,10 +1,30 @@
 <template>
-  <button
-    :disabled="disabled || loading"
+  <NuxtLink
+    v-if="to"
+    :to="to"
+    v-bind="attributes"
     class="btn"
     ref="submitBtn"
     :class="{
       loading: loading,
+      'btn-sm': size === 'sm',
+      'btn-lg': size === 'lg',
+    }"
+  >
+    <label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
+      <slot name="icon" />
+    </label>
+    <slot />
+  </NuxtLink>
+  <button
+    v-else
+    v-bind="attributes"
+    class="btn"
+    ref="submitBtn"
+    :class="{
+      loading: loading,
+      'btn-sm': size === 'sm',
+      'btn-lg': size === 'lg',
     }"
   >
     <label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
@@ -15,7 +35,9 @@
 </template>
 
 <script setup lang="ts">
-  defineProps({
+  type Sizes = 'sm' | 'md' | 'lg';
+
+  const props = defineProps({
     loading: {
       type: Boolean,
       default: false,
@@ -24,6 +46,32 @@
       type: Boolean,
       default: false,
     },
+    size: {
+      type: String as () => Sizes,
+      default: 'md',
+    },
+    to: {
+      type: String as () => string | null,
+      default: null,
+    },
+  });
+
+  const attributes = computed(() => {
+    if (props.to) {
+      return {
+        href: props.to,
+      };
+    }
+    return {
+      disabled: props.disabled || props.loading,
+    };
+  });
+
+  const is = computed(() => {
+    if (props.to) {
+      return 'a';
+    }
+    return 'button';
   });
 
   const submitBtn = ref(null);

frontend/components/Base/Details.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-hidden card  bg-base-100 shadow-xl sm:rounded-lg">
+  <div class="overflow-hidden card bg-base-100 shadow-xl sm:rounded-lg">
     <div class="px-4 py-5 sm:px-6">
       <h3 class="text-lg font-medium leading-6">
         <slot name="title"></slot>
@@ -15,7 +15,9 @@
             {{ dKey }}
           </dt>
           <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-            {{ dValue }}
+            <slot :name="dKey" v-bind="{ key: dKey, value: dValue }">
+              {{ dValue }}
+            </slot>
           </dd>
         </div>
       </dl>
@@ -28,7 +30,7 @@
 
   defineProps({
     details: {
-      type: Object as () => Record<string, StringLike>,
+      type: Object as () => Record<string, StringLike | any>,
       required: true,
     },
   });

frontend/components/Item/Card.vue

@@ -8,7 +8,7 @@
         <Icon name="mdi-package-variant" />
         {{ item.name }}
       </h2>
-      <p>{{ item.description }}</p>
+      <p>{{ description }}</p>
       <div class="flex gap-2 flex-wrap justify-end">
         <LabelChip v-for="label in item.labels" :label="label" class="badge-primary group-hover:badge-secondary" />
       </div>
@@ -19,12 +19,13 @@
 <script setup lang="ts">
   import { Item } from '~~/lib/api/classes/items';
 
-  defineProps({
+  const props = defineProps({
     item: {
       type: Object as () => Item,
       required: true,
     },
   });
+  const description = computed(() => {
+    return truncate(props.item.description, 80);
+  });
 </script>
-
-<style scoped></style>

frontend/components/Location/Card.vue

@@ -4,14 +4,20 @@
     :to="`/location/${location.id}`"
     class="card bg-primary text-primary-content transition duration-300"
   >
-    <div class="card-body p-4">
+    <div
+      class="card-body"
+      :class="{
+        'p-4': !dense,
+        'py-2 px-3': dense,
+      }"
+    >
       <h2 class="flex items-center gap-2">
         <label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''">
           <Icon name="heroicons-arrow-right" class="swap-on" />
           <Icon name="heroicons-map-pin" class="swap-off" />
         </label>
         {{ location.name }}
-        <span class="badge badge-secondary badge-lg ml-auto text-secondary-content">
+        <span v-if="location.itemCount" class="badge badge-secondary badge-lg ml-auto text-secondary-content">
           {{ location.itemCount }}</span
         >
       </h2>
@@ -27,6 +33,10 @@
       type: Object as () => Location,
       required: true,
     },
+    dense: {
+      type: Boolean,
+      default: false,
+    },
   });
 
   const card = ref(null);

frontend/composables/use-preferences.ts

@@ -2,6 +2,7 @@ import { Ref } from 'vue';
 
 export type LocationViewPreferences = {
   showDetails: boolean;
+  showEmpty: boolean;
 };
 
 /**
@@ -13,6 +14,7 @@ export function useViewPreferences(): Ref<LocationViewPreferences> {
     'homebox/preferences/location',
     {
       showDetails: true,
+      showEmpty: true,
     },
     { mergeDefaults: true }
   );

frontend/composables/use-strings.ts

@@ -0,0 +1,7 @@
+export function truncate(str: string, length: number) {
+  return str.length > length ? str.substring(0, length) + '...' : str;
+}
+
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

frontend/pages/home.vue

@@ -41,10 +41,57 @@
       value: totalLabels,
     },
   ];
+
+  const importDialog = ref(false);
+  const importCsv = ref(null);
+  const importRef = ref<HTMLInputElement>(null);
+  whenever(
+    () => !importDialog.value,
+    () => {
+      importCsv.value = null;
+    }
+  );
+
+  function setFile(e: Event & { target: HTMLInputElement }) {
+    console.log(e);
+    importCsv.value = e.target.files[0];
+  }
+
+  function openDialog() {
+    importDialog.value = true;
+  }
+
+  function uploadCsv() {
+    importRef.value.click();
+  }
 </script>
 
 <template>
   <BaseContainer class="space-y-16 pb-16">
+    <BaseModal v-model="importDialog">
+      <template #title> Import CSV File </template>
+
+      <p>
+        Import a CSV file containing your items, labels, and locations. See documentation for more information on the
+        required format.
+      </p>
+
+      <div class="flex flex-col gap-2 py-6">
+        <input ref="importRef" type="file" class="hidden" accept=".csv" @change="setFile" />
+        <BaseButton @click="uploadCsv">
+          <Icon class="h-5 w-5 mr-2" name="mdi-upload" />
+          Upload
+        </BaseButton>
+        <p class="text-center py-4">
+          {{ importCsv?.name }}
+        </p>
+      </div>
+
+      <div class="modal-action">
+        <BaseButton :disabled="!importCsv"> Submit </BaseButton>
+      </div>
+    </BaseModal>
+
     <section aria-labelledby="profile-overview-title" class="mt-8">
       <div class="overflow-hidden rounded-lg bg-white shadow">
         <h2 class="sr-only" id="profile-overview-title">Profile Overview</h2>
@@ -86,7 +133,17 @@
     </section>
 
     <section>
-      <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
+      <BaseSectionHeader class="mb-5">
+        Items
+        <template #description>
+          <div class="tooltip" data-tip="Import CSV File">
+            <button @click="openDialog" class="btn btn-primary btn-sm">
+              <Icon name="mdi-database" class="mr-2"></Icon>
+              Import
+            </button>
+          </div>
+        </template>
+      </BaseSectionHeader>
       <div class="grid sm:grid-cols-2 gap-4">
         <ItemCard v-for="item in items" :item="item" />
       </div>

frontend/pages/index.vue

@@ -141,10 +141,10 @@
           <a href="https://twitter.com/haybytes" class="tooltip" data-tip="Follow The Developer" target="_blank">
             <Icon name="mdi-twitter" class="h-8 w-8" />
           </a>
-          <a href="/" class="tooltip" data-tip="Join The Discord">
+          <a href="https://discord.gg/tuncmNrE4z" class="tooltip" data-tip="Join The Discord">
             <Icon name="mdi-discord" class="h-8 w-8" />
           </a>
-          <a href="/" class="tooltip" data-tip="Read The Docs">
+          <a href="https://github.com/hay-kot/homebox" class="tooltip" data-tip="Read The Docs">
             <Icon name="mdi-folder" class="h-8 w-8" />
           </a>
         </div>

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

@@ -0,0 +1,11 @@
+<template>
+  <div>Edit Me</div>
+</template>
+
+<script setup lang="ts">
+  definePageMeta({
+    layout: 'home',
+  });
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,130 @@
+<template>
+  <BaseContainer class="pb-8">
+    <section class="px-3">
+      <BaseSectionHeader v-if="item" dark class="mb-5">
+        <Icon name="mdi-package-variant" class="-mt-1" />
+        {{ item.name }}
+        <template #description>
+          <div class="flex flex-wrap gap-3 mt-3">
+            <LabelChip class="badge-primary" v-for="label in item.labels" :label="label"></LabelChip>
+          </div>
+        </template>
+      </BaseSectionHeader>
+      <div class="flex justify-between items-center">
+        <div class="form-control">
+          <label class="label cursor-pointer">
+            <input type="checkbox" v-model.checked="preferences.showEmpty" class="checkbox" />
+            <span class="label-text ml-4"> Show Empty </span>
+          </label>
+        </div>
+        <BaseButton size="sm" :to="`/item/${itemId}/edit`">
+          <template #icon>
+            <Icon name="mdi-pencil" />
+          </template>
+          Edit
+        </BaseButton>
+      </div>
+      <div class="grid grid-cols-1 gap-3">
+        <BaseDetails :details="itemSummary">
+          <template #title> Item Summary </template>
+          <template #Attachments>
+            <ul role="list" class="divide-y divide-gray-400 rounded-md border border-gray-400">
+              <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
+                <div class="flex w-0 flex-1 items-center">
+                  <Icon name="mdi-paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
+                  <span class="ml-2 w-0 flex-1 truncate">User Guide.pdf</span>
+                </div>
+                <div class="ml-4 flex-shrink-0">
+                  <a href="#" class="font-medium">Download</a>
+                </div>
+              </li>
+              <li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
+                <div class="flex w-0 flex-1 items-center">
+                  <Icon name="mdi-paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
+                  <span class="ml-2 w-0 flex-1 truncate">Purchase Receipts.pdf</span>
+                </div>
+                <div class="ml-4 flex-shrink-0">
+                  <a href="#" class="font-medium">Download</a>
+                </div>
+              </li>
+            </ul>
+          </template>
+        </BaseDetails>
+        <BaseDetails :details="purchaseDetails" v-if="showPurchase">
+          <template #title> Purchase Details </template>
+        </BaseDetails>
+        <BaseDetails :details="soldDetails" v-if="showSold">
+          <template #title> Sold Details </template>
+        </BaseDetails>
+      </div>
+    </section>
+  </BaseContainer>
+</template>
+
+<script setup lang="ts">
+  definePageMeta({
+    layout: 'home',
+  });
+
+  const route = useRoute();
+  const api = useUserApi();
+  const toast = useNotifier();
+
+  const itemId = computed<string>(() => route.params.id as string);
+  const preferences = useViewPreferences();
+
+  const { data: item } = useAsyncData(async () => {
+    const { data, error } = await api.items.get(itemId.value);
+    if (error) {
+      toast.error('Failed to load item');
+      navigateTo('/home');
+      return;
+    }
+    return data;
+  });
+
+  const itemSummary = computed(() => {
+    return {
+      Name: item.value?.name || '',
+      Description: item.value?.description || '',
+      'Serial Number': item.value?.serialNumber || '',
+      'Model Number': item.value?.modelNumber || '',
+      Manufacturer: item.value?.manufacturer || '',
+      Notes: item.value?.notes || '',
+      Attachments: '', // TODO: Attachments
+    };
+  });
+
+  const showPurchase = computed(() => {
+    if (preferences.value.showEmpty) {
+      return true;
+    }
+    return item.value?.purchaseFrom || item.value?.purchasePrice;
+  });
+
+  const purchaseDetails = computed(() => {
+    return {
+      'Purchased From': item.value?.purchaseFrom || '',
+      'Purchased Price': item.value?.purchasePrice || '',
+      'Purchased At': item.value?.purchaseTime || '',
+    };
+  });
+
+  const showSold = computed(() => {
+    if (preferences.value.showEmpty) {
+      return true;
+    }
+
+    return item.value?.soldTo || item.value?.soldPrice;
+  });
+
+  const soldDetails = computed(() => {
+    return {
+      'Sold To': item.value?.soldTo || '',
+      'Sold Price': item.value?.soldPrice || '',
+      'Sold At': item.value?.soldTime || '',
+    };
+  });
+</script>
+
+<style scoped></style>

frontend/pages/label/[id].vue

@@ -126,8 +126,11 @@
       <ActionsDivider @delete="confirmDelete" @edit="openUpdate" />
     </section>
 
-    <!-- <section>
-        <BaseSectionHeader> Items </BaseSectionHeader>
-      </section> -->
+    <section v-if="label">
+      <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
+      <div class="grid gap-2 grid-cols-2">
+        <ItemCard v-for="item in label.items" :item="item" :key="item.id" />
+      </div>
+    </section>
   </BaseContainer>
 </template>

frontend/pages/location/[id].vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-  import { Location } from '~~/lib/api/classes/locations';
   import ActionsDivider from '../../components/Base/ActionsDivider.vue';
 
   definePageMeta({