introduce basic table/card view elements

frontend/components/Item/View/Selectable.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+  import { ViewType } from "~~/composables/use-preferences";
+  import { ItemSummary } from "~~/lib/api/types/data-contracts";
+
+  type Props = {
+    view?: ViewType;
+    items: ItemSummary[];
+  };
+
+  const preferences = useViewPreferences();
+
+  const props = defineProps<Props>();
+  const viewSet = computed(() => {
+    return !!props.view;
+  });
+
+  const itemView = computed(() => {
+    return props.view ?? preferences.value.itemDisplayView;
+  });
+
+  function setViewPreference(view: ViewType) {
+    console.log("setViewPreference", view);
+    preferences.value.itemDisplayView = view;
+  }
+</script>
+
+<template>
+  <section>
+    <BaseSectionHeader class="mb-5 flex justify-between items-center">
+      Items
+
+      <template #description>
+        <div v-if="!viewSet" class="dropdown dropdown-hover dropdown-left">
+          <label tabindex="0" class="btn btn-ghost m-1">
+            <Icon name="mdi-dots-vertical" class="h-7 w-7" />
+          </label>
+          <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-32">
+            <li>
+              <button @click="setViewPreference('card')">
+                <Icon name="mdi-card-text-outline" class="h-5 w-5" />
+                Card
+              </button>
+            </li>
+            <li>
+              <button @click="setViewPreference('table')">
+                <Icon name="mdi-table" class="h-5 w-5" />
+                Table
+              </button>
+            </li>
+          </ul>
+        </div>
+      </template>
+    </BaseSectionHeader>
+
+    <template v-if="itemView === 'table'">
+      <ItemViewTable :items="items" />
+    </template>
+    <template v-else>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+        <ItemCard v-for="item in items" :key="item.id" :item="item" />
+      </div>
+    </template>
+  </section>
+</template>
+
+<style scoped></style>

frontend/components/Item/View/Table.types.ts

@@ -0,0 +1,10 @@
+import { ItemSummary } from "~~/lib/api/types/data-contracts";
+
+export type TableHeader = {
+  text: string;
+  value: keyof ItemSummary;
+  sortable?: boolean;
+  align?: "left" | "center" | "right";
+};
+
+export type TableData = Record<string, any>;

frontend/components/Item/View/Table.vue

@@ -0,0 +1,141 @@
+<template>
+  <BaseCard>
+    <table class="table w-full">
+      <thead>
+        <tr class="bg-primary">
+          <th
+            v-for="h in headers"
+            :key="h.value"
+            class="text-no-transform text-sm bg-neutral text-neutral-content"
+            :class="{
+              'text-center': h.align === 'center',
+              'text-right': h.align === 'right',
+              'text-left': h.align === 'left',
+            }"
+          >
+            <template v-if="typeof h === 'string'">{{ h }}</template>
+            <template v-else>{{ h.text }}</template>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(d, i) in data" :key="i" class="hover cursor-pointer" @click="navigateTo(`/item/${d.id}`)">
+          <td
+            v-for="h in headers"
+            :key="`${h.value}-${i}`"
+            class="bg-base-100"
+            :class="{
+              'text-center': h.align === 'center',
+              'text-right': h.align === 'right',
+              'text-left': h.align === 'left',
+            }"
+          >
+            <template v-if="cell(h) === 'cell-name'">
+              <NuxtLink class="hover" :to="`/item/${d.id}`">
+                {{ d.name }}
+              </NuxtLink>
+            </template>
+            <template v-else-if="cell(h) === 'cell-purchasePrice'">
+              <Currency :amount="d.purchasePrice" />
+            </template>
+            <template v-else-if="cell(h) === 'cell-insured'">
+              <Icon v-if="d.insured" name="mdi-check" class="text-green-500 h-5 w-5" />
+              <Icon v-else name="mdi-close" class="text-red-500 h-5 w-5" />
+            </template>
+            <slot v-else :name="cell(h)" v-bind="{ item: d }">
+              {{ extractValue(d, h.value) }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="border-t p-3 justify-end flex">
+      <div class="btn-group">
+        <button :disabled="!hasPrev" class="btn btn-sm" @click="prev()">«</button>
+        <button class="btn btn-sm">Page {{ pagination.page }}</button>
+        <button :disabled="!hasNext" class="btn btn-sm" @click="next()">»</button>
+      </div>
+    </div>
+  </BaseCard>
+</template>
+
+<script setup lang="ts">
+  import { TableData, TableHeader } from "./Table.types";
+  import { ItemSummary } from "~~/lib/api/types/data-contracts";
+
+  type Props = {
+    items: ItemSummary[];
+  };
+  const props = defineProps<Props>();
+
+  const sortByProperty = ref<keyof ItemSummary>("name");
+
+  const headers = computed<TableHeader[]>(() => {
+    return [
+      { text: "Name", value: "name" },
+      { text: "Quantity", value: "quantity", align: "center" },
+      { text: "Insured", value: "insured", align: "center" },
+      { text: "Price", value: "purchasePrice" },
+    ] as TableHeader[];
+  });
+
+  const pagination = reactive({
+    sortBy: sortByProperty.value,
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+  });
+
+  const next = () => pagination.page++;
+  const hasNext = computed<boolean>(() => {
+    return pagination.page * pagination.rowsPerPage < props.items.length;
+  });
+
+  const prev = () => pagination.page--;
+  const hasPrev = computed<boolean>(() => {
+    return pagination.page > 1;
+  });
+
+  const data = computed<TableData[]>(() => {
+    // sort by property
+    let data = [...props.items].sort((a, b) => {
+      const aLower = a[sortByProperty.value]?.toLowerCase();
+      const bLower = b[sortByProperty.value]?.toLowerCase();
+
+      if (aLower < bLower) {
+        return -1;
+      }
+      if (aLower > bLower) {
+        return 1;
+      }
+      return 0;
+    });
+
+    // sort descending
+    if (pagination.descending) {
+      data.reverse();
+    }
+
+    // paginate
+    const start = (pagination.page - 1) * pagination.rowsPerPage;
+    const end = start + pagination.rowsPerPage;
+    data = data.slice(start, end);
+    return data;
+  });
+
+  function extractValue(data: TableData, value: string) {
+    const parts = value.split(".");
+    let current = data;
+    for (const part of parts) {
+      current = current[part];
+    }
+    return current;
+  }
+
+  function cell(h: TableHeader) {
+    return `cell-${h.value.replace(".", "_")}`;
+  }
+</script>
+
+<style scoped></style>