Add error messages

package-lock.json

@@ -10,7 +10,9 @@
             "dependencies": {
                 "@tailwindcss/typography": "^0.5.10",
                 "autoprefixer": "^10.4.17",
-                "vue": "^3.3.11"
+                "prettier": "^3.2.5",
+                "vue": "^3.3.11",
+                "vue3-toastify": "^0.2.1"
             },
             "devDependencies": {
                 "@tailwindcss/container-queries": "^0.1.1",
@@ -1332,6 +1334,20 @@
             "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
             "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
         },
+        "node_modules/prettier": {
+            "version": "3.2.5",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+            "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
         "node_modules/proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -1799,6 +1815,23 @@
                 "vue": "^3.2.0"
             }
         },
+        "node_modules/vue3-toastify": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/vue3-toastify/-/vue3-toastify-0.2.1.tgz",
+            "integrity": "sha512-u4i5LCu1q5qs4L4Kbjb4u8NipCS8ox1fCHQ6XFS62676xnA6Q/AJRpZEkAurTMp723LeH6eQX6k9+24bKf1T4Q==",
+            "engines": {
+                "node": ">=16",
+                "npm": ">=7"
+            },
+            "peerDependencies": {
+                "vue": ">=3.2.0"
+            },
+            "peerDependenciesMeta": {
+                "vue": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -12,7 +12,9 @@
     "dependencies": {
         "@tailwindcss/typography": "^0.5.10",
         "autoprefixer": "^10.4.17",
-        "vue": "^3.3.11"
+        "prettier": "^3.2.5",
+        "vue": "^3.3.11",
+        "vue3-toastify": "^0.2.1"
     },
     "devDependencies": {
         "@tailwindcss/container-queries": "^0.1.1",

src/EventForm.ce.vue

@@ -149,6 +149,9 @@ import FieldCheckbox from './components/fields/Checkbox.vue';
 import FieldRadio from './components/fields/Radio.vue';
 import EditIcon from './components/icons/EditIcon.vue';
 import DeleteIcon from './components/icons/DeleteIcon.vue';
+import useToastify from './composables/useToastify.js';
+
+const {success, errorFromResponse} = useToastify();
 
 const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'addField', 'editField', 'deleteField', 'active']);
 
@@ -192,6 +195,10 @@ const props = defineProps({
         default: () => null,
         reuired: false,
     },
+    formId: {
+        default: () => null,
+        reuired: false,
+    },
 });
 
 const active = ref(0);
@@ -241,7 +248,11 @@ function resolveComponentName(field) {
     }[field.type];
 }
 
-function submit() {
-    console.log(payload.value);
+async function submit() {
+    try {
+        await axios.post('/api/form/' + props.formId + '/register', payload.value);
+    } catch (e) {
+        errorFromResponse(e);
+    }
 }
 </script>

src/composables/useToastify.js

@@ -0,0 +1,36 @@
+import {toast} from 'vue3-toastify';
+import {AxiosError} from 'axios';
+
+export default function () {
+    function success(message) {
+        toast.success(message, {
+            autoClose: 2000,
+            theme: 'colored',
+            containerId: 'adrema-form',
+        });
+    }
+
+    function error(message) {
+        toast.error(message, {
+            autoClose: 2000,
+            theme: 'colored',
+            containerId: 'adrema-form',
+        });
+    }
+
+    function errorFromResponse(e) {
+        if (!e instanceof AxiosError) {
+            throw e;
+        }
+
+        if (!e?.response?.data?.errors) {
+            throw e;
+        }
+
+        for (const field in e.response.data.errors) {
+            error(e.response.data.errors[field].join('FDDDDD'));
+        }
+    }
+
+    return {error, success, errorFromResponse};
+}

src/main.js

@@ -2,6 +2,7 @@ import {defineCustomElement} from 'vue';
 import classes from './style.css?inline';
 import carousel from 'vue3-carousel/dist/carousel.css?inline';
 import carouselStyle from './carousel.css?inline';
+import 'vue3-toastify/dist/index.css';
 import EventIndex from './EventIndex.ce.vue';
 import EventForm from './EventForm.ce.vue';
 import EventDescription from './EventDescription.ce.vue';