cleanup

frontend/components/Chart/Line.vue

@@ -1,14 +1,8 @@
 <template>
-  <LineChart
+  <div ref="el" class="min-h-full flex flex-col">
-    :chart-options="chartOptions"
+    {{ styles }}
-    :chart-data="chartData"
+    <LineChart :chart-options="options" :chart-data="chartData" :styles="styles" />
-    :chart-id="chartId"
+  </div>
-    :dataset-id-key="datasetIdKey"
-    :css-classes="cssClasses"
-    :styles="styles"
-    :width="width"
-    :height="height"
-  />
 </template>
 
 <script lang="ts">
@@ -41,24 +35,10 @@
         type: String,
         default: "label",
       },
-      width: {
-        type: Number,
-        default: 400,
-      },
-      height: {
-        type: Number,
-        default: 400,
-      },
       cssClasses: {
         default: "",
         type: String,
       },
-      styles: {
-        type: Object,
-        default: () => {
-          return {};
-        },
-      },
       chartData: {
         type: Object as () => TChartData<"line", number[], unknown>,
         default: () => {
@@ -69,10 +49,46 @@
         },
       },
     },
+    setup() {
+      const el = ref<HTMLElement | null>(null);
+
+      const calcHeight = ref(0);
+      const calcWidth = ref(0);
+
+      function resize() {
+        console.log("resize", el.value?.offsetHeight, el.value?.offsetWidth);
+        calcHeight.value = el.value?.offsetHeight || 0;
+        calcWidth.value = el.value?.offsetWidth || 0;
+      }
+
+      onMounted(() => {
+        resize();
+        window.addEventListener("resize", resize);
+      });
+
+      onUnmounted(() => {
+        window.removeEventListener("resize", resize);
+      });
+
+      const styles = computed(() => {
+        return {
+          height: `${calcHeight.value}px`,
+          width: `${calcWidth.value}px`,
+          position: "relative",
+        };
+      });
+
+      return {
+        el,
+        parentHeight: calcHeight,
+        styles,
+      };
+    },
     data() {
       return {
-        chartOptions: {
+        options: {
           responsive: true,
+          maintainAspectRatio: false,
           scales: {
             x: {
               display: false,
@@ -94,3 +110,5 @@
     },
   });
 </script>
+
+<style></style>

frontend/composables/use-css-var.ts

@@ -119,8 +119,6 @@ export function useCssVar(name: string, options?: VarOptions) {
           val += `, ${options.transparency}`;
         }
 
-        console.log(`hsla(${val})`);
-
         return `hsla(${val})`;
       });
     }

frontend/layouts/default.vue

@@ -12,70 +12,75 @@
     <LocationCreateModal v-model="modals.location" />
     <AppToast />
     <div class="drawer drawer-mobile">
-      <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
+      <input id="my-drawer-2" v-model="drawerToggle" type="checkbox" class="drawer-toggle" />
       <div class="drawer-content justify-center bg-base-300">
         <AppHeaderDecor class="-mt-10" />
         <slot></slot>
 
         <!-- Button -->
-        <label for="my-drawer-2" class="btn btn-primary drawer-button lg:hidden">Open drawer</label>
+        <label for="my-drawer-2" class="btn btn-primary drawer-button lg:hidden fixed bottom-2 right-2">
+          <Icon name="mdi-menu" class="h-6 w-6" />
+        </label>
       </div>
 
       <!-- Sidebar -->
-      <div class="drawer-side overflow-visible shadow-lg w-60 flex flex-col justify-center bg-base-200 py-10">
+      <div class="drawer-side shadow-lg">
         <label for="my-drawer-2" class="drawer-overlay"></label>
-        <!-- Top Section -->
-        <div class="space-y-8">
-          <div class="flex flex-col items-center gap-4">
-            <p>Kotelman House</p>
-            <NuxtLink class="avatar placeholder" to="/home">
-              <div class="bg-base-100 text-neutral-content rounded-full w-36">
-                <span class="text-6xl text-base-content">HK</span>
-              </div>
-            </NuxtLink>
-          </div>
-          <div class="flex flex-col">
-            <div class="mx-auto w-40 mb-6">
-              <div class="dropdown overflow visible w-40">
-                <label tabindex="0" class="btn btn-primary btn-block text-lg text-no-transform">
-                  <span>
-                    <Icon name="mdi-plus" class="mr-1 -ml-1" />
-                  </span>
-                  Create
-                </label>
-                <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
-                  <li v-for="btn in dropdown" :key="btn.name">
-                    <button @click="btn.action">
-                      {{ btn.name }}
-                    </button>
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <ul class="flex flex-col mx-auto gap-2 w-40 menu">
-              <li v-for="n in nav" :key="n.id" class="text-xl">
-                <NuxtLink
-                  v-if="n.to"
-                  class="rounded-btn"
-                  :to="n.to"
-                  :class="{
-                    'bg-secondary text-secondary-content': n.active?.value,
-                  }"
-                >
-                  <Icon :name="n.icon" class="h-6 w-6 mr-4" />
-                  {{ n.name }}
-                </NuxtLink>
-                <button v-else class="rounded-btn" @click="n.action">
-                  <Icon :name="n.icon" class="h-6 w-6 mr-4" />
-                  {{ n.name }}
-                </button>
-              </li>
-            </ul>
-          </div>
-        </div>
 
-        <!-- Bottom -->
+        <!-- Top Section -->
-        <button class="mt-auto mb-6" @click="logout">Sign Out</button>
+        <div class="w-60 py-5 md:py-10 bg-base-200 flex flex-grow-1 flex-col">
+          <div class="space-y-8">
+            <div class="flex flex-col items-center gap-4">
+              <p>Welcome, {{ username }}</p>
+              <NuxtLink class="avatar placeholder" to="/home">
+                <div class="bg-base-300 text-neutral-content rounded-full w-24 p-4">
+                  <AppLogo />
+                </div>
+              </NuxtLink>
+            </div>
+            <div class="flex flex-col bg-base-200">
+              <div class="mx-auto w-40 mb-6">
+                <div class="dropdown overflow visible w-40">
+                  <label tabindex="0" class="btn btn-primary btn-block text-lg text-no-transform">
+                    <span>
+                      <Icon name="mdi-plus" class="mr-1 -ml-1" />
+                    </span>
+                    Create
+                  </label>
+                  <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
+                    <li v-for="btn in dropdown" :key="btn.name">
+                      <button @click="btn.action">
+                        {{ btn.name }}
+                      </button>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <ul class="flex flex-col mx-auto gap-2 w-40 menu">
+                <li v-for="n in nav" :key="n.id" class="text-xl" @click="unfocus">
+                  <NuxtLink
+                    v-if="n.to"
+                    class="rounded-btn"
+                    :to="n.to"
+                    :class="{
+                      'bg-secondary text-secondary-content': n.active?.value,
+                    }"
+                  >
+                    <Icon :name="n.icon" class="h-6 w-6 mr-4" />
+                    {{ n.name }}
+                  </NuxtLink>
+                  <button v-else class="rounded-btn" @click="n.action">
+                    <Icon :name="n.icon" class="h-6 w-6 mr-4" />
+                    {{ n.name }}
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Bottom -->
+          <button class="mt-auto mx-2 hover:bg-base-300 p-3 rounded-btn" @click="logout">Sign Out</button>
+        </div>
       </div>
     </div>
   </div>
@@ -86,6 +91,8 @@
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
 
+  const username = computed(() => authStore.self?.name || "User");
+
   const modals = reactive({
     item: false,
     location: false,
@@ -116,6 +123,13 @@
 
   const route = useRoute();
 
+  const drawerToggle = ref();
+
+  function unfocus() {
+    // unfocus current element
+    drawerToggle.value = false;
+  }
+
   const nav = [
     {
       icon: "mdi-home",

frontend/pages/home/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
   import { statCardData } from "./statistics";
   import { itemsTable } from "./table";
-  import { inventoryByLocationChart, purchasePriceOverTimeChart } from "./charts";
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
 
@@ -24,58 +23,32 @@
   const itemTable = itemsTable(api);
   const stats = statCardData(api);
 
-  const purchasePriceOverTime = purchasePriceOverTimeChart(api);
+  // const purchasePriceOverTime = purchasePriceOverTimeChart(api);
 
-  const inventoryByLocation = inventoryByLocationChart(api);
+  // const inventoryByLocation = inventoryByLocationChart(api);
 
-  const refDonutEl = ref<HTMLDivElement>();
+  // const refDonutEl = ref<HTMLDivElement>();
 
-  const donutElWidth = computed(() => {
+  // const donutElWidth = computed(() => {
-    return refDonutEl.value?.clientWidth || 0;
+  //   return refDonutEl.value?.clientWidth || 0;
-  });
+  // });
 </script>
 
 <template>
   <div>
-    <!-- <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>
-
-      <form @submit.prevent="submitCsvFile">
-        <div class="flex flex-col gap-2 py-6">
-          <input ref="importRef" type="file" class="hidden" accept=".csv,.tsv" @change="setFile" />
-
-          <BaseButton type="button" @click="uploadCsv">
-            <Icon class="h-5 w-5 mr-2" name="mdi-upload" />
-            Upload
-          </BaseButton>
-          <p class="text-center pt-4 -mb-5">
-            {{ importCsv?.name }}
-          </p>
-        </div>
-
-        <div class="modal-action">
-          <BaseButton type="submit" :disabled="!importCsv"> Submit </BaseButton>
-        </div>
-      </form>
-    </BaseModal> -->
-
     <BaseContainer class="flex flex-col gap-12 pb-16">
-      <section v-if="breakpoints.lg" class="grid grid-cols-6 gap-6">
+      <!-- <section class="grid grid-cols-6 gap-6">
         <article class="col-span-4">
           <Subtitle> Inventory Value Over Time </Subtitle>
           <BaseCard>
-            <div class="p-6 pt-0">
+            <div class="p-10 h-[300px]">
               <ClientOnly>
-                <ChartLine chart-id="asd" :height="140" :chart-data="purchasePriceOverTime" />
+                <ChartLine :chart-data="purchasePriceOverTime" />
               </ClientOnly>
             </div>
           </BaseCard>
         </article>
-        <article class="col-span-2 max-h-[100px]">
+        <article class="col-span-2">
           <Subtitle>
             Inventory By
             <span class="btn-group">
@@ -83,7 +56,7 @@
               <button class="btn btn-xs text-no-transform">Labels</button>
             </span>
           </Subtitle>
-          <BaseCard>
+          <BaseCard class="h-[300px]">
             <div ref="refDonutEl" class="grid place-content-center h-full">
               <ClientOnly>
                 <ChartDonut
@@ -96,7 +69,7 @@
             </div>
           </BaseCard>
         </article>
-      </section>
+      </section> -->
 
       <section>
         <Subtitle> Quick Statistics </Subtitle>

frontend/pages/profile.vue

@@ -22,8 +22,6 @@
     if (group.value) {
       group.value.currency = currency.value.code;
     }
-
-    console.log(group.value);
   });
 
   const currencyExample = computed(() => {