WorkshopTasker/pages/clients.vue

<script setup lang="ts">
/* global $fetch */
import { type NuxtError } from "nuxt/app";
import { ref, type Ref, reactive } from "vue";
import { VBtn } from "vuetify/components";

import pagedTable from "~/components/pagedTable.vue";
import Alerts, { type AlertData } from "~/components/alerts.vue";
import { type fieldDefinition } from "~/components/entryEditor.vue";

import { useFetch, createError, navigateTo, useRoute, definePageMeta } from "#imports";

definePageMeta({ middleware: ["auth"] });
const route = useRoute();

const alerts = ref<Array<AlertData>>([]);

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>>;

async function rowClicked(client: string, edit = false) {
  await navigateTo({
    path: `/client/${client}`,
    query: { edit: edit ? 1 : undefined },
  });
}

async function rowDelete(client: string) {
  try {
    await $fetch(`/api/clients/${client}` as "api/clients/:id", {
      method: "DELETE",
    });
    clients.value = clients.value.filter(e => e.id !== client);
    count.value.count--;
  } catch (e) {
    alerts.value.push({ text: (e as NuxtError).message, type: "error" });
    console.log(e);
  }
}

const loadingMore = ref<boolean>(false);
async function loadBefore() {
  loadingMore.value = true;

  try {
    clients.value.push(...await $fetch("/api/clients", {
      query: {
        before: clients.value[clients.value.length - 1].id,
      },
    }));
  } catch (e) {
    alerts.value.push({ text: (e as NuxtError).message });
    console.error(e);
  }
  loadingMore.value = false;
}

const createMode = ref<boolean>(route.query?.create === "1");

function editorFields(): Array<fieldDefinition> {
  return [
    { key: "name", type: "text", label: "Name" },
    { key: "address", type: "text", label: "Address" },
    { key: "phone", type: "text", label: "Phone" },
    { key: "email", type: "text", label: "E-mail" },
  ];
}

const submitting = ref<boolean>(false);

// const updateForm = ref<VForm | null>(null);
const formButton = ref<VBtn | null>(null);
const formData = ref<any>({
  name: null,
  address: null,
  phone: null,
  email: null,
});

function normalizeForm() {
  for (const i in formData.value)
    formData.value[i] = formData.value[i] === "" || formData.value[i] === undefined ? null : formData.value[i];
}

async function handleSubmit() {
  submitting.value = true;
  normalizeForm();
  try {
    const result = await $fetch(
      "/api/clients/", {
        method: "POST",
        body: formData.value,
      },
    );
    clients.value.unshift(result);
  } catch (e) {
    console.error(e);
    submitting.value = false;
    return;
  }
  submitting.value = false;
  createMode.value = false;
}
</script>

<template>
  <Alerts :alerts="alerts" />
  <VDialog
    v-model="createMode"
    :persistent="submitting"
    :activator="formButton as unknown as (Element | null) ?? undefined"
    width="auto"
  >
    <VCard width="400px" :loading="submitting">
      <VCardTitle>
        Create client
      </VCardTitle>
      <VForm
        ref="updateForm"
        :disabled="submitting"
        class="px-4"
      >
        <EntryEditor
          :fields="editorFields()"
          @update-sub-model-value="(k, v) => { formData[k] = v; }"
        />
      </VForm>
      <VCardActions>
        <VBtn
          color="primary"
          @click="handleSubmit"
        >
          Submit
        </VBtn>
      </VCardActions>
    </VCard>
  </VDialog>
  <VRow>
    <VCol>
      <VBreadcrumbs :items="['Clients']" />
      <VSpacer />
      <div class="text-h4">
        There are {{ count?.count }} clients in the database.
      </div>
      <VBtn
        ref="formButton"
      >
        Create
      </VBtn>
    </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>