refactor: refactor item page UI (#235)

* fix generated types * fix tailwind auto-complete * force lowercase buttons * add title and change style for items page * add copy button support for item details * empty state for log * fix duplicate padding * add option for create without closing the current dialog. * hide purchase price is not set * invert toggle for edit mode * update styles on item cards * add edit support for maintenance logs
2023-01-21 21:15:23 -09:00 · 2023-01-21 21:15:23 -09:00 · 91d0c588d9
commit 91d0c588d9
parent c19fe94c08
13 changed files with 197 additions and 68 deletions
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@ -55,6 +55,7 @@
      item.value?.attachments.reduce((acc, cur) => {
        if (cur.type === "photo") {
          acc.push({
+            // @ts-expect-error - it's impossible for this to be null at this point
            src: api.authURL(`/items/${item.value.id}/attachments/${cur.id}`),
          });
        }
@ -99,6 +100,10 @@
  });

  const assetID = computed<Details>(() => {
+    if (!item.value) {
+      return [];
+    }
+
    if (item.value?.assetId === "000-000") {
      return [];
    }
@ -112,6 +117,10 @@
  });

  const itemDetails = computed<Details>(() => {
+    if (!item.value) {
+      return [];
+    }
+
    return [
      {
        name: "Description",
@ -125,14 +134,17 @@
      {
        name: "Serial Number",
        text: item.value?.serialNumber,
+        copyable: true,
      },
      {
        name: "Model Number",
        text: item.value?.modelNumber,
+        copyable: true,
      },
      {
        name: "Manufacturer",
        text: item.value?.manufacturer,
+        copyable: true,
      },
      {
        name: "Insured",
@ -362,6 +374,7 @@

 <template>
  <BaseContainer v-if="item" class="pb-8">
+    <Title>{{ item.name }}</Title>
    <dialog ref="refDialog" class="z-[999] fixed bg-transparent">
      <div ref="refDialogBody" class="relative">
        <div class="absolute right-0 -mt-3 -mr-3 sm:-mt-4 sm:-mr-4 space-x-1">
@ -383,6 +396,7 @@
        <span class="text-base-content">
          {{ item ? item.name : "" }}
        </span>
+
        <div v-if="item.parent" class="text-sm breadcrumbs pb-0">
          <ul class="text-base-content/70">
            <li>
@ -392,6 +406,9 @@
          </ul>
        </div>
        <template #description>
+          <p class="text-lg">
+            {{ item ? item.description : "" }}
+          </p>
          <div class="flex flex-wrap gap-2 mt-3">
            <NuxtLink ref="badge" class="badge p-3" :to="`/location/${item.location.id}`">
              <Icon name="heroicons-map-pin" class="mr-2 swap-on"></Icon>
@ -403,14 +420,14 @@
          </div>
        </template>
      </BaseSectionHeader>
-      <div class="flex flex-wrap items-center justify-between mb-6">
-        <div class="tabs">
+      <div class="flex flex-wrap items-center justify-between mb-6 mt-3">
+        <div class="btn-group">
          <NuxtLink
            v-for="t in tabs"
            :key="t.id"
            :to="t.to"
-            class="tab tab-bordered lg:tab-lg"
-            :class="`${t.to === currentPath ? 'tab-active' : ''}`"
+            class="btn btn-sm"
+            :class="`${t.to === currentPath ? 'btn-active' : ''}`"
          >
            {{ t.name }}
          </NuxtLink>
@ -503,7 +520,7 @@
      </div>
    </section>

-    <section v-if="!hasNested" class="my-6 px-3">
+    <section v-if="!hasNested" class="my-6">
      <BaseSectionHeader v-if="item && item.children && item.children.length > 0"> Child Items </BaseSectionHeader>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <ItemCard v-for="child in item.children" :key="child.id" :item="child" />
--- a/frontend/pages/item/[id]/index/edit.vue
+++ b/frontend/pages/item/[id]/index/edit.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ItemAttachment, ItemField, ItemUpdate } from "~~/lib/api/types/data-contracts";
+  import { ItemAttachment, ItemField, ItemOut, ItemUpdate } from "~~/lib/api/types/data-contracts";
  import { AttachmentTypes } from "~~/lib/api/types/non-generated";
  import { useLabelStore } from "~~/stores/labels";
  import { useLocationStore } from "~~/stores/locations";
@ -71,7 +71,7 @@
  type FormField = {
    type: "text" | "textarea" | "select" | "date" | "label" | "location" | "number" | "checkbox";
    label: string;
-    ref: string;
+    ref: keyof ItemOut;
  };

  const mainFields: FormField[] = [
@ -342,10 +342,10 @@
            <span class="text-base-content"> Edit </span>
            <template #after>
              <div class="modal-action mt-3">
-                <div class="mr-auto tooltip" data-tip="Hide the cruft! ">
+                <div class="mr-auto tooltip" data-tip="Show Advanced Options">
                  <label class="label cursor-pointer mr-auto">
-                    <input v-model="preferences.editorSimpleView" type="checkbox" class="toggle toggle-primary" />
-                    <span class="label-text ml-4"> Simple View </span>
+                    <input v-model="preferences.editorAdvancedView" type="checkbox" class="toggle toggle-primary" />
+                    <span class="label-text ml-4"> Advanced </span>
                  </label>
                </div>
                <BaseButton size="sm" @click="saveItem">
@ -368,7 +368,7 @@
            <FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" />

            <Autocomplete
-              v-if="!preferences.editorSimpleView"
+              v-if="preferences.editorAdvancedView"
              v-model="parent"
              v-model:search="query"
              :items="results"
@ -438,7 +438,7 @@
        </BaseCard>

        <div
-          v-if="!preferences.editorSimpleView"
+          v-if="preferences.editorAdvancedView"
          ref="attDropZone"
          class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg"
        >
@ -494,7 +494,7 @@
          </div>
        </div>

-        <div v-if="!preferences.editorSimpleView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
+        <div v-if="preferences.editorAdvancedView" class="overflow-visible 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">Purchase Details</h3>
          </div>
@ -536,7 +536,7 @@
          </div>
        </div>

-        <div v-if="!preferences.editorSimpleView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
+        <div v-if="preferences.editorAdvancedView" class="overflow-visible 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">Warranty Details</h3>
          </div>
@ -578,7 +578,7 @@
          </div>
        </div>

-        <div v-if="!preferences.editorSimpleView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
+        <div v-if="preferences.editorAdvancedView" class="overflow-visible 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">Sold Details</h3>
          </div>
--- a/frontend/pages/item/[id]/index/log.vue
+++ b/frontend/pages/item/[id]/index/log.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
  import DatePicker from "~~/components/Form/DatePicker.vue";
  import { StatsFormat } from "~~/components/global/StatCard/types";
-  import { ItemOut } from "~~/lib/api/types/data-contracts";
+  import { ItemOut, MaintenanceEntry } from "~~/lib/api/types/data-contracts";

  const props = defineProps<{
    item: ItemOut;
@ -45,6 +45,7 @@
  });

  const entry = reactive({
+    id: null as string | null,
    modal: false,
    name: "",
    date: new Date(),
@ -56,7 +57,21 @@
    entry.modal = true;
  }

+  function resetEntry() {
+    entry.id = null;
+    entry.name = "";
+    entry.date = new Date();
+    entry.description = "";
+    entry.cost = "";
+  }
+
  async function createEntry() {
+    if (entry.id) {
+      editEntry();
+      resetEntry();
+      return;
+    }
+
    const { error } = await api.items.maintenance.create(props.item.id, {
      name: entry.name,
      date: entry.date,
@ -72,6 +87,7 @@
    entry.modal = false;

    refreshLog();
+    resetEntry();
  }

  const confirm = useConfirm();
@ -90,6 +106,39 @@
    }
    refreshLog();
  }
+
+  function openEditDialog(e: MaintenanceEntry) {
+    entry.modal = true;
+    entry.id = e.id;
+    entry.name = e.name;
+    entry.date = new Date(e.date);
+    entry.description = e.description;
+    entry.cost = e.cost;
+
+    console.log(e);
+  }
+
+  async function editEntry() {
+    if (!entry.id) {
+      return;
+    }
+
+    const { error } = await api.items.maintenance.update(props.item.id, entry.id, {
+      name: entry.name,
+      date: entry.date,
+      description: entry.description,
+      cost: entry.cost,
+    });
+
+    if (error) {
+      toast.error("Failed to update entry");
+      return;
+    }
+
+    entry.modal = false;
+
+    refreshLog();
+  }
 </script>

 <template>
@ -102,11 +151,11 @@
        <FormTextArea v-model="entry.description" label="Notes" />
        <FormTextField v-model="entry.cost" autofocus label="Cost" />
        <div class="py-2 flex justify-end">
-          <BaseButton type="submit" class="ml-2">
+          <BaseButton type="submit" class="ml-2 mt-2">
            <template #icon>
              <Icon name="mdi-post" />
            </template>
-            Create
+            {{ entry.id ? "Update" : "Create" }}
          </BaseButton>
        </div>
      </form>
@ -154,7 +203,13 @@
          <div class="p-6">
            <Markdown :source="e.description" />
          </div>
-          <div class="flex justify-end p-4">
+          <div class="flex justify-end p-4 gap-1">
+            <BaseButton size="sm" @click="openEditDialog(e)">
+              <template #icon>
+                <Icon name="mdi-edit" />
+              </template>
+              Edit
+            </BaseButton>
            <BaseButton size="sm" @click="deleteEntry(e.id)">
              <template #icon>
                <Icon name="mdi-delete" />
@ -163,6 +218,16 @@
            </BaseButton>
          </div>
        </BaseCard>
+        <div class="hidden first:block">
+          <button
+            type="button"
+            class="relative block w-full rounded-lg border-2 border-dashed border-base-content p-12 text-center"
+            @click="newEntry()"
+          >
+            <Icon name="mdi-wrench-clock" class="h-16 w-16"></Icon>
+            <span class="mt-2 block text-sm font-medium text-gray-900"> Create Your First Entry </span>
+          </button>
+        </div>
      </div>
    </section>
  </div>
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@ -221,11 +221,11 @@
            <BaseButton size="sm" @click="generateToken"> Generate Invite Link </BaseButton>
          </div>
          <div v-if="token" class="pt-4 flex items-center pl-1">
-            <CopyText class="mr-2 btn-primary" :text="tokenUrl" />
+            <CopyText class="mr-2 btn-primary btn btn-outline btn-square btn-sm" :text="tokenUrl" />
            {{ tokenUrl }}
          </div>
          <div v-if="token" class="pt-4 flex items-center pl-1">
-            <CopyText class="mr-2 btn-primary" :text="token" />
+            <CopyText class="mr-2 btn-primary btn btn-outline btn-square btn-sm" :text="token" />
            {{ token }}
          </div>
        </div>