Initial commit

pages/client/[id].vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useRoute, useFetch, createError } from "nuxt/app";
+import { Ref } from "vue";
+
+import PagedList from "~/components/pagedList.vue";
+import { client as clientType } from "~/utils/types/database";
+
+const route = useRoute();
+const id = route.params.id;
+
+const clientRequest = await useFetch(`/api/clients/${id}`);
+if (clientRequest.error.value) throw createError(clientRequest.error.value?.data ?? "");
+const client = clientRequest.data as Ref<clientType>;
+console.log(client);
+
+</script>
+
+<template>
+  <VRow>
+    <VCol cols="12">
+      <div
+        class="text-h4"
+        :class="client.name === null ? ['font-italic'] : []"
+      >
+        {{ client.name ?? "[none]" }}
+      </div>
+    </VCol>
+  </VRow>
+  <VRow>
+    <VCol md="4" cols="12">
+      <VCard>
+        <VList>
+          <VListItem
+            v-if="client.address"
+            prepend-icon="mdi-map-marker"
+          >
+            <VListItemTitle class="text-wrap">
+              {{ client.address }}
+            </VListItemTitle>
+          </VListItem>
+          <VListItem
+            v-if="client.email"
+            prepend-icon="mdi-email"
+          >
+            <VListItemTitle class="text-wrap">
+              {{ client.email }}
+            </VListItemTitle>
+          </VListItem>
+          <VListItem
+            v-if="client.phone"
+            prepend-icon="mdi-phone"
+          >
+            <VListItemTitle class="text-wrap">
+              {{ client.phone }}
+            </VListItemTitle>
+          </VListItem>
+        </VList>
+      </VCard>
+    </VCol>
+    <VCol cols="12" md="8">
+      <PagedList
+        :records="[{a: 'owo'}, {a: 'uwu'}, {a: 'qwq'}]"
+        record-key="a"
+      >
+        <template #text="i">
+          {{ i }}
+        </template>
+        <template #title="i">
+          {{ i }}
+        </template>
+      </PagedList>
+    </VCol>
+  </VRow>
+</template>