Migrate FormError.vue to composable api #248

knutschsoft · Dec 28, 2024 · bf60b0c · bf60b0c
1 parent 1c9c6b8
commit bf60b0c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 39 deletions.
diff --git a/web/assets/js/components/Clients/ClientCreate.vue b/web/assets/js/components/Clients/ClientCreate.vue
@@ -1,8 +1,8 @@
 <template>
     <client-form
+        v-if="initialClient"
         submit-button-text="Neuen Klienten erstellen"
-        :initial-client="{}"
-        ref="clientForm"
+        :initial-client="initialClient"
         @submit="handleSubmit"
     />
 </template>
@@ -19,22 +19,23 @@ export default defineComponent({
         ClientForm,
     },
     setup() {
-        const clientForm = ref<InstanceType<typeof ClientForm> | null>(null);
         const alertStore = useAlertStore();
         const clientStore = useClientStore();
+        const initialClient = ref<Client>({});
 
         const handleSubmit = async (payload: ClientCreateRequest) => {
             const client = await clientStore.createClient(payload);
             if (client) {
                 alertStore.success(`Der Klient "${client.name}" wurde erfolgreich erstellt.`);
-                clientForm.value?.resetForm();
+                initialClient.value = {name: 'narf'};
+                initialClient.value.name = null;
             } else {
                 alertStore.error('Klient erstellen fehlgeschlagen', 'Upps! :-(');
             }
         };
 
         return {
-            clientForm,
+            initialClient,
             handleSubmit,
         };
     },

diff --git a/web/assets/js/components/Clients/ClientForm.vue b/web/assets/js/components/Clients/ClientForm.vue
@@ -76,11 +76,6 @@ 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/Clients/ClientList.vue b/web/assets/js/components/Clients/ClientList.vue
@@ -1,6 +1,5 @@
 <template>
     <div>
-        {{ itemsPerPage }}
         <v-data-table
             :items-per-page="itemsPerPage"
             :headers="headers"

diff --git a/web/assets/js/components/Common/FormError.vue b/web/assets/js/components/Common/FormError.vue
@@ -22,51 +22,48 @@
     </v-alert>
 </template>
 
-<script>
-'use strict';
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
 
-export default {
+export default defineComponent({
     name: 'FormError',
     props: {
         error: {
+            type: [Object, Boolean] as () => any | boolean,
             required: true,
         },
     },
-    components: {
-    },
-    data: function () {
-        return {
-        };
-    },
-    computed: {
-        hasError() {
-            return !!this.error;
-        },
-        validationErrors() {
-            const errors = {};
-            if (!this.hasError) {
+    setup(props) {
+        const hasError = computed(() => !!props.error);
+
+        const validationErrors = computed(() => {
+            const errors: Record<string, string> = {};
+            if (!hasError.value) {
                 return errors;
             }
-            const error = this.error;
-            if (error && error.data && error.data.violations) {
-                error.data.violations.forEach((violation) => {
-                    const key = violation.propertyPath ? violation.propertyPath : 'global';
+            const error = props.error;
+
+            if (error?.data?.violations) {
+                error.data.violations.forEach((violation: { propertyPath?: string; message: string }) => {
+                    const key = violation.propertyPath || 'global';
                     errors[key] = violation.message;
                 });
                 return errors;
             }
-            if (error && error.data && error.data["hydra:description"]) {
-                errors.global = error.data["hydra:description"];
+
+            if (error?.data?.['hydra:description']) {
+                errors.global = error.data['hydra:description'];
             }
 
             return errors;
-        },
-    },
-    async created() {
-    },
-    methods: {
+        });
+
+        return {
+            hasError,
+            validationErrors,
+        };
     },
-};
+});
 </script>
 
 <style scoped lang="scss">