Initial commit

pages/clients.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+/* global $fetch */
+import { useFetch, createError } from "nuxt/app";
+import { ref, Ref } from "vue";
+import { definePageMeta } from "~/.nuxt/imports";
+import { client as clientType } from "~/utils/types/database";
+import pagedTable from "~/components/pagedTable.vue";
+
+definePageMeta({ middleware: ["auth"] });
+
+const clientsRequest = await useFetch("/api/clients");
+if (clientsRequest.error.value) throw createError(clientsRequest.error.value?.data ?? "");
+const clients = clientsRequest.data as Ref<NonNullable<typeof clientsRequest.data.value>>;
+
+const countRequest = await useFetch("/api/clients/count");
+if (countRequest.error.value) throw createError(countRequest.error.value?.data ?? "");
+const count = countRequest.data as Ref<NonNullable<typeof countRequest.data.value>>;
+
+function rowClicked(client: string, edit = false) {
+  console.log(client);
+}
+
+async function rowDelete(client: string) {
+  try {
+    await $fetch<clientType>(`/api/clients/${client}`, {
+      method: "DELETE",
+    });
+    clients.value = clients.value.filter(e => e.id !== client);
+    count.value.count--;
+  } catch (e) {
+    // FIXME: show the error
+    console.log(e);
+  }
+}
+
+const loadingMore = ref<boolean>(false);
+async function loadBefore() {
+  loadingMore.value = true;
+
+  clients.value.push(...await $fetch("/api/clients", {
+    query: {
+      before: clients.value[clients.value.length - 1].id,
+    },
+  }));
+  loadingMore.value = false;
+}
+</script>
+
+<template>
+  <VOverlay
+    model-value
+    origin="top center"
+    :scrim="false"
+    height="fit-content"
+    persistent
+    no-click-animation
+  >
+    <VAlert class="alert">
+      owowowowowowowowo
+    </VAlert>
+  </VOverlay>
+  <VRow>
+    <VCol>
+      <VBreadcrumbs :items="['Clients']" />
+      <VSpacer />
+      <div class="text-h4">
+        There are {{ count?.count }} clients in the database.
+      </div>
+    </VCol>
+  </VRow>
+  <VRow>
+    <VCol cols="12">
+      <VCard>
+        <VTable>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Address</th>
+              <th />
+            </tr>
+          </thead>
+          <pagedTable
+            buttons
+            :records="clients"
+            :fields="['name', 'address']"
+            record-key="id"
+            @click="(id) => rowClicked(id, false)"
+            @click:edit="(id) => rowClicked(id, true)"
+            @click:delete="(id) => rowDelete(id)"
+          />
+        </VTable>
+      </VCard>
+      <VCol>
+        <VBtn
+          v-if="clients.length < count.count"
+          color="primary"
+          :loading="loadingMore"
+          @click="loadBefore"
+        >
+          Load more
+        </VBtn>
+      </VCol>
+    </VCol>
+  </VRow>
+</template>