update cuz presentation

pages/clients.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
 /* global $fetch */
-import { useFetch, createError } from "nuxt/app";
-import { ref, Ref } from "vue";
+import { useFetch, createError, navigateTo, NuxtError, useRoute } from "nuxt/app";
+import { ref, Ref, reactive } from "vue";
+import { VBtn } from "vuetify/components";
 import { definePageMeta } from "~/.nuxt/imports";
+
 import { client as clientType } from "~/utils/types/database";
 import pagedTable from "~/components/pagedTable.vue";
+import Alerts, { AlertData } from "~/components/alerts.vue";
+import { fieldDefinition } from "~/components/entryEditor.vue";
 
 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 ?? "");
@@ -16,8 +23,11 @@ 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 rowClicked(client: string, edit = false) {
+  await navigateTo({
+    path: `/client/${client}`,
+    query: { edit: edit ? 1 : undefined },
+  });
 }
 
 async function rowDelete(client: string) {
@@ -28,7 +38,7 @@ async function rowDelete(client: string) {
     clients.value = clients.value.filter(e => e.id !== client);
     count.value.count--;
   } catch (e) {
-    // FIXME: show the error
+    alerts.value.push({ text: (e as NuxtError).message, type: "error" });
     console.log(e);
   }
 }
@@ -37,28 +47,98 @@ 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,
-    },
-  }));
+  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] === "" ? null : formData.value[i];
+}
+
+async function handleSubmit() {
+  submitting.value = true;
+  normalizeForm();
+  try {
+    const result = await $fetch(
+      "/api/clients/", {
+        method: "POST",
+        body: formData.value,
+      },
+    );
+  } catch (e) {
+    console.error(e);
+    submitting.value = false;
+    return;
+  }
+  submitting.value = false;
+  createMode.value = false;
+}
 </script>
 
 <template>
-  <VOverlay
-    model-value
-    origin="top center"
-    :scrim="false"
-    height="fit-content"
-    persistent
-    no-click-animation
+  <Alerts :alerts="alerts" />
+  <VDialog
+    v-model="createMode"
+    :persistent="submitting"
+    :activator="formButton as unknown as (Element | null) ?? undefined"
+    width="auto"
   >
-    <VAlert class="alert">
-      owowowowowowowowo
-    </VAlert>
-  </VOverlay>
+    <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']" />
@@ -66,6 +146,11 @@ async function loadBefore() {
       <div class="text-h4">
         There are {{ count?.count }} clients in the database.
       </div>
+      <VBtn
+        ref="formButton"
+      >
+        Create
+      </VBtn>
     </VCol>
   </VRow>
   <VRow>