diff --git a/assets/js/Stepper.vue b/assets/js/Stepper.vue index 717ada7..28c2425 100644 --- a/assets/js/Stepper.vue +++ b/assets/js/Stepper.vue @@ -154,6 +154,8 @@ import Heading from './components/Heading.vue'; import VSlider from './components/VSlider.vue'; import axios from 'axios'; import dayjs from 'dayjs'; +import { toast } from 'vue3-toastify'; +import 'vue3-toastify/dist/index.css'; export default { components: { @@ -294,9 +296,23 @@ export default { this.innerStep--; }, async submit() { - await axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', this.value); + try { + await axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', this.value); - this.innerStep++; + this.innerStep++; + } catch (e) { + if (!e.response || !e.response.status) { + throw e; + } + + if (e.response.status === 422) { + Object.keys(e.response.data.errors).forEach((key) => { + e.response.data.errors[key].forEach((error) => { + toast.error(error); + }); + }); + } + } }, }, }; diff --git a/package-lock.json b/package-lock.json index c21293a..a7b102d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "stepper", "version": "1.0.0", "license": "ISC", + "dependencies": { + "vue3-toastify": "^0.2.1" + }, "devDependencies": { "@vueform/slider": "^2.1.10", "axios": "^0.21.4", @@ -644,7 +647,7 @@ "version": "7.23.6", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz", "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==", - "dev": true, + "devOptional": true, "bin": { "parser": "bin/babel-parser.js" }, @@ -2125,7 +2128,7 @@ "version": "1.4.15", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", - "dev": true + "devOptional": true }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.20", @@ -2521,7 +2524,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.11.tgz", "integrity": "sha512-h97/TGWBilnLuRaj58sxNrsUU66fwdRKLOLQ9N/5iNDfp+DZhYH9Obhe0bXxhedl8fjAgpRANpiZfbgWyruQ0w==", - "dev": true, + "devOptional": true, "dependencies": { "@babel/parser": "^7.23.5", "@vue/shared": "3.3.11", @@ -2533,7 +2536,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.11.tgz", "integrity": "sha512-zoAiUIqSKqAJ81WhfPXYmFGwDRuO+loqLxvXmfUdR5fOitPoUiIeFI9cTTyv9MU5O1+ZZglJVTusWzy+wfk5hw==", - "dev": true, + "devOptional": true, "dependencies": { "@vue/compiler-core": "3.3.11", "@vue/shared": "3.3.11" @@ -2543,7 +2546,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.11.tgz", "integrity": "sha512-U4iqPlHO0KQeK1mrsxCN0vZzw43/lL8POxgpzcJweopmqtoYy9nljJzWDIQS3EfjiYhfdtdk9Gtgz7MRXnz3GA==", - "dev": true, + "devOptional": true, "dependencies": { "@babel/parser": "^7.23.5", "@vue/compiler-core": "3.3.11", @@ -2561,7 +2564,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.11.tgz", "integrity": "sha512-Zd66ZwMvndxRTgVPdo+muV4Rv9n9DwQ4SSgWWKWkPFebHQfVYRrVjeygmmDmPewsHyznCNvJ2P2d6iOOhdv8Qg==", - "dev": true, + "devOptional": true, "dependencies": { "@vue/compiler-dom": "3.3.11", "@vue/shared": "3.3.11" @@ -2571,7 +2574,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.11.tgz", "integrity": "sha512-D5tcw091f0nuu+hXq5XANofD0OXnBmaRqMYl5B3fCR+mX+cXJIGNw/VNawBqkjLNWETrFW0i+xH9NvDbTPVh7g==", - "dev": true, + "devOptional": true, "dependencies": { "@vue/shared": "3.3.11" } @@ -2580,7 +2583,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.11.tgz", "integrity": "sha512-fPGjH0wqJo68A0wQ1k158utDq/cRyZNlFoxGwNScE28aUFOKFEnCBsvyD8jHn+0kd0UKVpuGuaZEQ6r9FJRqCg==", - "dev": true, + "devOptional": true, "dependencies": { "@babel/parser": "^7.23.5", "@vue/compiler-core": "3.3.11", @@ -2593,7 +2596,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.11.tgz", "integrity": "sha512-g9ztHGwEbS5RyWaOpXuyIVFTschclnwhqEbdy5AwGhYOgc7m/q3NFwr50MirZwTTzX55JY8pSkeib9BX04NIpw==", - "dev": true, + "devOptional": true, "dependencies": { "@vue/reactivity": "3.3.11", "@vue/shared": "3.3.11" @@ -2603,7 +2606,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.11.tgz", "integrity": "sha512-OlhtV1PVpbgk+I2zl+Y5rQtDNcCDs12rsRg71XwaA2/Rbllw6mBLMi57VOn8G0AjOJ4Mdb4k56V37+g8ukShpQ==", - "dev": true, + "devOptional": true, "dependencies": { "@vue/runtime-core": "3.3.11", "@vue/shared": "3.3.11", @@ -2614,7 +2617,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.11.tgz", "integrity": "sha512-AIWk0VwwxCAm4wqtJyxBylRTXSy1wCLOKbWxHaHiu14wjsNYtiRCSgVuqEPVuDpErOlRdNnuRgipQfXRLjLN5A==", - "dev": true, + "devOptional": true, "dependencies": { "@vue/compiler-ssr": "3.3.11", "@vue/shared": "3.3.11" @@ -2627,7 +2630,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.11.tgz", "integrity": "sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw==", - "dev": true + "devOptional": true }, "node_modules/@vueform/slider": { "version": "2.1.10", @@ -4250,7 +4253,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "devOptional": true }, "node_modules/dayjs": { "version": "1.11.10", @@ -4888,7 +4891,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", - "dev": true + "devOptional": true }, "node_modules/esutils": { "version": "2.0.3", @@ -6595,7 +6598,7 @@ "version": "0.30.5", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", - "dev": true, + "devOptional": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" }, @@ -6886,7 +6889,7 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, + "devOptional": true, "funding": [ { "type": "github", @@ -7406,7 +7409,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true + "devOptional": true }, "node_modules/picomatch": { "version": "2.3.1", @@ -7506,7 +7509,7 @@ "version": "8.4.32", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz", "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==", - "dev": true, + "devOptional": true, "funding": [ { "type": "opencollective", @@ -9102,7 +9105,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, + "devOptional": true, "engines": { "node": ">=0.10.0" } @@ -9939,7 +9942,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.11.tgz", "integrity": "sha512-d4oBctG92CRO1cQfVBZp6WJAs0n8AK4Xf5fNjQCBeKCvMI1efGQ5E3Alt1slFJS9fZuPcFoiAiqFvQlv1X7t/w==", - "dev": true, + "devOptional": true, "dependencies": { "@vue/compiler-dom": "3.3.11", "@vue/compiler-sfc": "3.3.11", @@ -10055,6 +10058,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/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/package.json b/package.json index d30e259..b19f119 100644 --- a/package.json +++ b/package.json @@ -33,5 +33,8 @@ "vue-loader": "^16.8.3", "vue3-carousel": "^0.3.1", "wnumb": "^1.2.0" + }, + "dependencies": { + "vue3-toastify": "^0.2.1" } } diff --git a/src/Stepper.php b/src/Stepper.php index a12bcfd..b2fa2a2 100644 --- a/src/Stepper.php +++ b/src/Stepper.php @@ -72,6 +72,10 @@ class Stepper if ($response->getStatusCode() === 500) { $this->error('Ein Fehler ist aufgetreten.'); } + + if ($response->getStatusCode() === 422) { + wp_send_json(json_decode((string) $response->getBody()), 422); + } } private function error(string $error): void