wip: maintenance log

backend/internal/data/repo/repo_maintenance_entry.go

@@ -91,6 +91,7 @@ func (r *MaintenanceEntryRepository) GetLog(ctx context.Context, itemID uuid.UUI
 
 	entries, err := r.db.MaintenanceEntry.Query().
 		Where(maintenanceentry.ItemID(itemID)).
+		Order(ent.Desc(maintenanceentry.FieldDate)).
 		All(ctx)
 
 	if err != nil {

frontend/components/Base/Button.vue

@@ -9,6 +9,7 @@
       'btn-sm': size === 'sm',
       'btn-lg': size === 'lg',
     }"
+    :style="upper ? '' : 'text-transform: none'"
   >
     <label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
       <slot name="icon" />

frontend/components/Base/Card.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="card bg-base-100 shadow-xl sm:rounded-lg">
-    <div class="px-4 py-5 sm:px-6">
+    <div v-if="$slots.title" class="px-4 py-5 sm:px-6">
       <h3 class="text-lg font-medium leading-6">
         <slot name="title"></slot>
       </h3>

frontend/components/Form/DatePicker.vue

@@ -13,6 +13,7 @@
             <button
               v-if="day.number != ''"
               :key="day.number"
+              type="button"
               class="text-center btn-xs btn btn-outline"
               @click="select($event, day.date)"
             >
@@ -22,11 +23,11 @@
           </template>
         </div>
         <div class="flex justify-between mt-1 items-center">
-          <button class="btn btn-xs" @click="prevMonth">
+          <button type="button" class="btn btn-xs" @click="prevMonth">
             <Icon class="h-5 w-5" name="mdi-arrow-left"></Icon>
           </button>
           <p class="text-center">{{ month }} {{ year }}</p>
-          <button class="btn btn-xs" @click="nextMonth">
+          <button type="button" class="btn btn-xs" @click="nextMonth">
             <Icon class="h-5 w-5" name="mdi-arrow-right"></Icon>
           </button>
         </div>

frontend/components/global/DateTime.vue

@@ -3,11 +3,36 @@
 </template>
 
 <script setup lang="ts">
-  enum DateTimeFormat {
+  type DateTimeFormat = "relative" | "long" | "short" | "human";
-    RELATIVE = "relative",
+
-    LONG = "long",
+  function ordinalIndicator(num: number) {
-    SHORT = "short",
+    if (num > 3 && num < 21) return "th";
+    switch (num % 10) {
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
     }
+  }
+
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
 
   const value = computed(() => {
     if (!props.date) {
@@ -24,12 +49,15 @@
     }
 
     switch (props.format) {
-      case DateTimeFormat.RELATIVE:
+      case "relative":
         return useTimeAgo(dt).value + useDateFormat(dt, " (MM-DD-YYYY)").value;
-      case DateTimeFormat.LONG:
+      case "long":
         return useDateFormat(dt, "MM-DD-YYYY (dddd)").value;
-      case DateTimeFormat.SHORT:
+      case "short":
         return useDateFormat(dt, "MM-DD-YYYY").value;
+      case "human":
+        // January 1st, 2021
+        return `${months[dt.getMonth()]} ${dt.getDate()}${ordinalIndicator(dt.getDate())}, ${dt.getFullYear()}`;
       default:
         return "";
     }

frontend/components/global/Markdown.vue

@@ -3,10 +3,12 @@
   import DOMPurify from "dompurify";
 
   type Props = {
-    source: string;
+    source: string | null | undefined;
   };
 
-  const props = withDefaults(defineProps<Props>(), {});
+  const props = withDefaults(defineProps<Props>(), {
+    source: null,
+  });
 
   const md = new MarkdownIt({
     html: true,
@@ -15,7 +17,7 @@
   });
 
   const raw = computed(() => {
-    const html = md.render(props.source);
+    const html = md.render(props.source || "");
     return DOMPurify.sanitize(html);
   });
 </script>

frontend/nuxt.config.ts

@@ -1,20 +1,16 @@
-import { defineNuxtConfig } from "nuxt";
+import { defineNuxtConfig } from "nuxt/config";
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  target: "static",
   ssr: false,
   modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt", "@vueuse/nuxt"],
-  meta: {
+  nitro: {
-    title: "Homebox",
+    devProxy: {
-    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.svg" }],
+      "/api": {
-  },
+        target: "http://localhost:7745/api",
-  vite: {
+        changeOrigin: true,
-    server: {
+      }
-      proxy: {
-        "/api": "http://localhost:7745",
     },
   },
     plugins: [],
-  },
 });

frontend/package.json

@@ -21,7 +21,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.4.0",
     "isomorphic-fetch": "^3.0.0",
-    "nuxt": "3.0.0-rc.11",
+    "nuxt": "3.0.0",
     "prettier": "^2.7.1",
     "typescript": "^4.8.3",
     "vite-plugin-eslint": "^1.8.1",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@iconify/vue": "^3.2.1",
-    "@nuxtjs/tailwindcss": "^5.3.2",
+    "@nuxtjs/tailwindcss": "^6.1.3",
     "@pinia/nuxt": "^0.4.1",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.5.2",

frontend/pages/home.vue

@@ -46,7 +46,7 @@
   const importDialog = ref(false);
   const importCsv = ref(null);
   const importLoading = ref(false);
-  const importRef = ref<HTMLInputElement>(null);
+  const importRef = ref<HTMLInputElement>();
   whenever(
     () => !importDialog.value,
     () => {
@@ -120,7 +120,7 @@
       <section>
         <BaseCard>
           <template #title> Welcome Back, {{ auth.self ? auth.self.name : "Username" }} </template>
-          <template #subtitle> {{ auth.self.isSuperuser ? "Admin" : "User" }} </template>
+          <!-- <template #subtitle> {{ auth.self.isSuperuser ? "Admin" : "User" }} </template> -->
           <template #title-actions>
             <div class="flex justify-end gap-2">
               <div class="tooltip" data-tip="Import CSV File">

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

@@ -13,6 +13,10 @@
   const itemId = computed<string>(() => route.params.id as string);
   const preferences = useViewPreferences();
 
+  const hasNested = computed<boolean>(() => {
+    return route.fullPath.split("/").at(-1) !== itemId.value;
+  });
+
   const { data: item, refresh } = useAsyncData(itemId.value, async () => {
     const { data, error } = await api.items.get(itemId.value);
     if (error) {
@@ -219,7 +223,7 @@
     } else {
       details.push({
         name: "Warranty Expires",
-        text: item.value?.warrantyExpires,
+        text: item.value?.warrantyExpires || "",
         type: "date",
       });
     }
@@ -253,7 +257,7 @@
       },
       {
         name: "Purchase Date",
-        text: item.value.purchaseTime,
+        text: item.value?.purchaseTime || "",
         type: "date",
       },
     ];
@@ -309,12 +313,12 @@
   });
 
   function openDialog(img: Photo) {
-    refDialog.value.showModal();
+    refDialog.value?.showModal();
     dialoged.src = img.src;
   }
 
   function closeDialog() {
-    refDialog.value.close();
+    refDialog.value?.close();
   }
 
   const refDialogBody = ref<HTMLDivElement>();
@@ -340,10 +344,7 @@
       </div>
     </dialog>
     <section class="px-3">
-      <div class="flex justify-between items-center">
+      <div class="space-y-3">
-        <div class="form-control"></div>
-      </div>
-      <div class="grid grid-cols-1 gap-3">
         <BaseCard>
           <template #title>
             <BaseSectionHeader>
@@ -374,10 +375,16 @@
           </template>
           <template #title-actions>
             <div class="modal-action mt-0">
-              <label class="label cursor-pointer mr-auto">
+              <label v-if="!hasNested" class="label cursor-pointer mr-auto">
                 <input v-model="preferences.showEmpty" type="checkbox" class="toggle toggle-primary" />
                 <span class="label-text ml-4"> Show Empty </span>
               </label>
+              <BaseButton v-else class="mr-auto" size="sm" @click="$router.go(-1)">
+                <template #icon>
+                  <Icon name="mdi-arrow-left" class="h-5 w-5" />
+                </template>
+                Back
+              </BaseButton>
               <BaseButton size="sm" :to="`/item/${itemId}/edit`">
                 <template #icon>
                   <Icon name="mdi-pencil" />
@@ -390,12 +397,20 @@
                 </template>
                 Delete
               </BaseButton>
+              <BaseButton size="sm" :to="`/item/${itemId}/log`">
+                <template #icon>
+                  <Icon name="mdi-post" />
+                </template>
+                Log
+              </BaseButton>
             </div>
           </template>
 
-          <DetailsSection :details="itemDetails" />
+          <DetailsSection v-if="!hasNested" :details="itemDetails" />
         </BaseCard>
 
+        <NuxtPage :item="item" :page-key="itemId" />
+        <div v-if="!hasNested">
           <BaseCard v-if="photos && photos.length > 0">
             <template #title> Photos </template>
             <div
@@ -456,9 +471,10 @@
             <DetailsSection :details="soldDetails" />
           </BaseCard>
         </div>
+      </div>
     </section>
 
-    <section class="my-6 px-3">
+    <section v-if="!hasNested" class="my-6 px-3">
       <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" />

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

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+  import DatePicker from "~~/components/Form/DatePicker.vue";
+  import { ItemOut } from "~~/lib/api/types/data-contracts";
+
+  const props = defineProps<{
+    item: ItemOut;
+  }>();
+
+  const api = useUserApi();
+  const toast = useNotifier();
+
+  const { data: log, refresh: refreshLog } = useAsyncData(async () => {
+    const { data } = await api.items.maintenance.getLog(props.item.id);
+    return data;
+  });
+
+  const stats = computed(() => {
+    if (!log.value) return [];
+
+    return [
+      {
+        id: "total",
+        title: "Total Cost",
+        subtitle: "Sum over all entries",
+        value: fmtCurrency(log.value.costTotal),
+      },
+      {
+        id: "average",
+        title: "Monthly Average",
+        subtitle: "Average over all entries",
+        value: fmtCurrency(log.value.costAverage),
+      },
+    ];
+  });
+
+  const entry = reactive({
+    modal: false,
+    name: "",
+    date: new Date(),
+    description: "",
+    cost: "",
+  });
+
+  function newEntry() {
+    entry.modal = true;
+  }
+
+  async function createEntry() {
+    const { error } = await api.items.maintenance.create(props.item.id, {
+      name: entry.name,
+      date: entry.date,
+      description: entry.description,
+      cost: entry.cost,
+    });
+
+    if (error) {
+      toast.error("Failed to create entry");
+      return;
+    }
+
+    entry.modal = false;
+
+    refreshLog();
+  }
+
+  async function deleteEntry(id: string) {
+    const { error } = await api.items.maintenance.delete(props.item.id, id);
+
+    if (error) {
+      toast.error("Failed to delete entry");
+      return;
+    }
+
+    refreshLog();
+  }
+</script>
+
+<template>
+  <div v-if="log">
+    <BaseModal v-model="entry.modal">
+      <template #title> Create Entry </template>
+      <form @submit.prevent="createEntry">
+        <FormTextField v-model="entry.name" autofocus label="Entry Name" />
+        <DatePicker v-model="entry.date" label="Date" />
+        <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">
+            <template #icon>
+              <Icon name="mdi-post" />
+            </template>
+            Create
+          </BaseButton>
+        </div>
+      </form>
+    </BaseModal>
+
+    <div class="flex">
+      <BaseButton class="ml-auto" size="sm" @click="newEntry()">
+        <template #icon>
+          <Icon name="mdi-post" />
+        </template>
+        Log Maintenance
+      </BaseButton>
+    </div>
+    <section class="page-layout my-6">
+      <div class="main-slot container space-y-6">
+        <BaseCard v-for="e in log.entries" :key="e.id">
+          <BaseSectionHeader class="p-6 border-b border-b-gray-300">
+            <span class="text-base-content">
+              {{ e.name }}
+            </span>
+            <template #description>
+              <div class="flex gap-2">
+                <div class="badge p-3">
+                  <Icon name="mdi-calendar" class="mr-2" />
+                  <DateTime :date="e.date" format="human" />
+                </div>
+                <div class="tooltip tooltip-primary" data-tip="Cost">
+                  <div class="badge badge-primary p-3">
+                    <Currency :amount="e.cost" />
+                  </div>
+                </div>
+              </div>
+            </template>
+          </BaseSectionHeader>
+          <div class="p-6">
+            <Markdown :source="e.description" />
+          </div>
+          <div class="flex justify-end p-4">
+            <BaseButton size="sm" @click="deleteEntry(e.id)">
+              <template #icon>
+                <Icon name="mdi-delete" />
+              </template>
+              Delete
+            </BaseButton>
+          </div>
+        </BaseCard>
+      </div>
+      <div class="side-slot space-y-6">
+        <div v-for="stat in stats" :key="stat.id" class="stats block shadow-xl border-l-primary">
+          <div class="stat">
+            <div class="stat-title">{{ stat.title }}</div>
+            <div class="stat-value text-primary">{{ stat.value }}</div>
+            <div class="stat-desc">{{ stat.subtitle }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+  .page-layout {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto;
+    grid-template-areas: "side main";
+    gap: 1rem;
+  }
+
+  .side-slot {
+    grid-area: side;
+  }
+
+  .main-slot {
+    grid-area: main;
+  }
+
+  .grid {
+    display: grid;
+  }
+</style>