From 1c9c6b8a5b2b9753c5e23f3f0af8c79d15f0df27 Mon Sep 17 00:00:00 2001
From: robertfausk <robertfreigang@gmx.de>
Date: Sat, 28 Dec 2024 09:26:27 +0100
Subject: [PATCH] Migrate ClientCreate.vue to composable api #248

---
 .../js/components/Clients/ClientCreate.vue    | 48 +++++++++----------
 .../js/components/Clients/ClientForm.vue      |  5 ++
 web/assets/js/components/Common/FormError.vue |  4 +-
 3 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/web/assets/js/components/Clients/ClientCreate.vue b/web/assets/js/components/Clients/ClientCreate.vue
index 48b0a7e8..ad3c2c04 100755
--- a/web/assets/js/components/Clients/ClientCreate.vue
+++ b/web/assets/js/components/Clients/ClientCreate.vue
@@ -7,42 +7,38 @@
     />
 </template>
 
-<script>
-'use strict';
-
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
 import ClientForm from './ClientForm.vue';
-import { useAlertStore, useClientStore } from '../../stores';
+import {useAlertStore, useClientStore} from '../../stores';
+import {ClientCreateRequest} from "@/js/model";
 
-export default {
+export default defineComponent({
     name: 'ClientCreate',
     components: {
         ClientForm,
     },
-    data: function () {
-        return {
-            alertStore: useAlertStore(),
-            clientStore: useClientStore(),
-        };
-    },
-    computed: {
-        currentUser() {
-            return this.authStore.currentUser;
-        },
-    },
-    async created() {
-    },
-    methods: {
-        async handleSubmit(payload) {
-            const client = await this.clientStore.createClient(payload);
+    setup() {
+        const clientForm = ref<InstanceType<typeof ClientForm> | null>(null);
+        const alertStore = useAlertStore();
+        const clientStore = useClientStore();
+
+        const handleSubmit = async (payload: ClientCreateRequest) => {
+            const client = await clientStore.createClient(payload);
             if (client) {
-                this.alertStore.success(`Der Klient "${client.name}" wurde erfolgreich erstellt.`);
-                this.$refs.clientForm.resetForm();
+                alertStore.success(`Der Klient "${client.name}" wurde erfolgreich erstellt.`);
+                clientForm.value?.resetForm();
             } else {
-                this.alertStore.error(`Klient erstellen fehlgeschlagen`, `Upps! :-(`);
+                alertStore.error('Klient erstellen fehlgeschlagen', 'Upps! :-(');
             }
-        },
+        };
+
+        return {
+            clientForm,
+            handleSubmit,
+        };
     },
-};
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/web/assets/js/components/Clients/ClientForm.vue b/web/assets/js/components/Clients/ClientForm.vue
index ad743ea4..cdaadabb 100755
--- a/web/assets/js/components/Clients/ClientForm.vue
+++ b/web/assets/js/components/Clients/ClientForm.vue
@@ -76,6 +76,11 @@ function handleSubmit() {
     emit('submit', client.value);
 }
 
+function resetForm() {
+    form.value?.reset();
+    setInitialValues();
+}
+
 async function updateRatingFile(file: File | null) {
     client.value.ratingImageFileData = file ? await readFile(file) : null;
     client.value.ratingImageFileName = file ? file.name : null;
diff --git a/web/assets/js/components/Common/FormError.vue b/web/assets/js/components/Common/FormError.vue
index 6c169df9..3a8ae68d 100644
--- a/web/assets/js/components/Common/FormError.vue
+++ b/web/assets/js/components/Common/FormError.vue
@@ -1,8 +1,10 @@
 <template>
     <v-alert
         v-if="hasError"
-        type="danger"
+        type="error"
         class="mt-3 mb-0"
+        prominent
+        dense
     >
         <ul class="mb-0">
             <li