106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
|
<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>
|