From 1678db78365a8442fa23654315e7f9d79053c240 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Wed, 19 Mar 2025 16:49:42 +0100
Subject: [PATCH 1/4] feat: centralize api error handling

---
 .../object-captions/object-captions.vue          |  4 ++--
 .../components/relation-view/relation-view.vue   | 10 +++-------
 resources/js/app/helpers/view.js                 | 16 ++++++++++++++++
 resources/js/app/pages/admin/appearance.vue      |  4 ++--
 resources/js/app/pages/modules/view.vue          | 15 ++++++++-------
 5 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/resources/js/app/components/object-captions/object-captions.vue b/resources/js/app/components/object-captions/object-captions.vue
index 681bc3c3b..c388d170d 100644
--- a/resources/js/app/components/object-captions/object-captions.vue
+++ b/resources/js/app/components/object-captions/object-captions.vue
@@ -603,13 +603,13 @@ export default {
                 const response = await fetch(`${BEDITA.base}/api/${this.objectType}/${this.objectId}`, options);
                 const responseJson = await response.json();
                 if (responseJson.error) {
-                    BEDITA.error(responseJson.error);
+                    this.$helpers.handleApiError(responseJson);
                 } else {
                     const captions = responseJson.data.attributes.captions || [];
                     this.reset(captions);
                 }
             } catch (error) {
-                BEDITA.error(error);
+                this.$helpers.handleApiError(error);
             } finally {
                 this.loading = false;
             }
diff --git a/resources/js/app/components/relation-view/relation-view.vue b/resources/js/app/components/relation-view/relation-view.vue
index 0d9f30055..84cd86c40 100644
--- a/resources/js/app/components/relation-view/relation-view.vue
+++ b/resources/js/app/components/relation-view/relation-view.vue
@@ -719,7 +719,7 @@ export default {
                         body: JSON.stringify({ data: toRemove }),
                     });
                     if (response?.error) {
-                        BEDITA.error(response.error?.title || response?.error);
+                        this.$helpers.handleApiError(response);
                     } else {
                         this.removedRelated = [];
                         this.prepareRelationsToRemove(this.removedRelated);
@@ -740,7 +740,7 @@ export default {
                     });
                     const json = await response.json();
                     if (json?.error) {
-                        BEDITA.error(json.error?.title);
+                        this.$helpers.handleApiError(json);
                     } else {
                         this.addedRelations = [];
                         this.modifiedRelations = [];
@@ -749,11 +749,7 @@ export default {
                 }
                 await this.reloadObjects();
             } catch (error) {
-                if (typeof error === 'string') {
-                    BEDITA.error(error);
-                } else {
-                    BEDITA.error(error?.title);
-                }
+                this.$helpers.handleApiError(error);
             } finally {
                 this.savingRelated = false;
             }
diff --git a/resources/js/app/helpers/view.js b/resources/js/app/helpers/view.js
index 5258806e6..b0d08c6a5 100644
--- a/resources/js/app/helpers/view.js
+++ b/resources/js/app/helpers/view.js
@@ -336,6 +336,22 @@ export default {
 
                 return d ?  new Date(d).toLocaleDateString(locale) + ' ' + new Date(d).toLocaleTimeString(locale) : '';
             },
+
+            handleApiError(response) {
+                if (typeof response === 'string') {
+                    BEDITA.error(response);
+
+                    return;
+                }
+                if (response?.error && typeof response.error === 'string') {
+                    BEDITA.error(response.error);
+
+                    return;
+                }
+                const message = response?.error?.title || 'An error occurred';
+                const detail = response?.error?.detail || false;
+                BEDITA.error(message, document.body, detail);
+            },
         }
     }
 };
diff --git a/resources/js/app/pages/admin/appearance.vue b/resources/js/app/pages/admin/appearance.vue
index da08b57d3..580ad5453 100644
--- a/resources/js/app/pages/admin/appearance.vue
+++ b/resources/js/app/pages/admin/appearance.vue
@@ -88,10 +88,10 @@ export default {
                 const response = await fetch(`${BEDITA.base}/admin/appearance/save`, options);
                 const responseJson = await response.json();
                 if (responseJson.error) {
-                    BEDITA.error(responseJson.error);
+                    this.$helpers.handleApiError(responseJson);
                 }
             } catch (error) {
-                BEDITA.error(error);
+                this.$helpers.handleApiError(error);
             } finally {
                 this.loading = false;
                 this.loadingKey = '';
diff --git a/resources/js/app/pages/modules/view.vue b/resources/js/app/pages/modules/view.vue
index a76daee3b..172d0a8b8 100644
--- a/resources/js/app/pages/modules/view.vue
+++ b/resources/js/app/pages/modules/view.vue
@@ -105,7 +105,7 @@ export default {
                 }
                 if (json?.error) {
                     await this.showFlashMessages();
-                    BEDITA.error(json.error);
+                    this.$helpers.handleApiError(json);
                     throw new Error(json.error);
                 }
 
@@ -210,12 +210,13 @@ export default {
                     details = details + '\n' + e.details;
                 }
             }
-            const message = t`OOOPS! Something went wrong` + '. ' + this.errors[0].message;
-            if (this.userRoles.includes('admin')) {
-                BEDITA.error(message, document.body, details);
-            } else {
-                BEDITA.error(message);
-            }
+            const title = t`OOOPS! Something went wrong` + '. ' + this.errors[0].message;
+            this.$helpers.handleApiError({
+                error: {
+                    title,
+                    details
+                }
+            });
             this.errors = [];
         },
 

From e1278ca170e58a9476f192a843295c75b1dceede Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Thu, 20 Mar 2025 08:53:42 +0100
Subject: [PATCH 2/4] fix: processErrors

---
 resources/js/app/pages/modules/view.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/resources/js/app/pages/modules/view.vue b/resources/js/app/pages/modules/view.vue
index 172d0a8b8..72dfdb3ef 100644
--- a/resources/js/app/pages/modules/view.vue
+++ b/resources/js/app/pages/modules/view.vue
@@ -211,12 +211,20 @@ export default {
                 }
             }
             const title = t`OOOPS! Something went wrong` + '. ' + this.errors[0].message;
-            this.$helpers.handleApiError({
+            let params = {
                 error: {
                     title,
-                    details
                 }
-            });
+            };
+            if (this.userRoles.includes('admin')) {
+                params = {
+                    error: {
+                        title,
+                        details
+                    }
+                }
+            }
+            this.$helpers.handleApiError(params);
             this.errors = [];
         },
 

From a7c7dd024120159934e90f55e27f50b7881a9bc5 Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Tue, 25 Mar 2025 12:23:53 +0100
Subject: [PATCH 3/4] refactor: js to vue

---
 .../dialog/{dialog.js => dialog.vue}          | 124 +++++++++++++-----
 1 file changed, 93 insertions(+), 31 deletions(-)
 rename resources/js/app/components/dialog/{dialog.js => dialog.vue} (62%)

diff --git a/resources/js/app/components/dialog/dialog.js b/resources/js/app/components/dialog/dialog.vue
similarity index 62%
rename from resources/js/app/components/dialog/dialog.js
rename to resources/js/app/components/dialog/dialog.vue
index b57e446de..1e5adfc21 100644
--- a/resources/js/app/components/dialog/dialog.js
+++ b/resources/js/app/components/dialog/dialog.vue
@@ -1,42 +1,94 @@
-import { t } from 'ttag';
-import Vue from 'vue';
-
-/**
- * Component to display a dialog.
- */
-export const Dialog = Vue.extend({
-    template: `<div class="bedita-dialog" role="dialog">
+<template>
+    <dialog class="bedita-dialog">
         <transition name="fade">
-            <div class="backdrop" @click="hide()" v-if="isOpen"></div>
+            <div
+                class="backdrop"
+                @click="hide()"
+                v-if="isOpen"
+            />
         </transition>
         <transition name="slide">
-            <div class="dialog p-1 has-background-white has-text-black" :class="dialogType" v-if="isOpen">
+            <div
+                class="dialog p-1 has-background-white has-text-black"
+                :class="dialogType"
+                v-if="isOpen"
+            >
                 <header class="is-flex space-between align-center is-expanded">
                     <div class="is-flex align-center">
-                        <span class="is-capitalized mr-05" v-if="headerText"><: t(headerText) :></span>
-                        <app-icon icon="carbon:checkmark" color="green" v-if="dialogType === 'success'"></app-icon>
-                        <app-icon icon="carbon:information" color="blue" v-if="dialogType === 'info'"></app-icon>
-                        <app-icon icon="carbon:warning" color="orange" v-if="dialogType === 'warning'"></app-icon>
-                        <app-icon icon="carbon:misuse" color="red" v-if="dialogType === 'error'"></app-icon>
+                        <span
+                            class="is-capitalized mr-05"
+                            v-if="headerText"
+                        >
+                            {{ t(headerText) }}
+                        </span>
+                        <app-icon
+                            icon="carbon:checkmark"
+                            color="green"
+                            v-if="dialogType === 'success'"
+                        />
+                        <app-icon
+                            icon="carbon:information"
+                            color="blue"
+                            v-if="dialogType === 'info'"
+                        />
+                        <app-icon
+                            icon="carbon:warning"
+                            color="orange"
+                            v-if="dialogType === 'warning'"
+                        />
+                        <app-icon
+                            icon="carbon:misuse"
+                            color="red"
+                            v-if="dialogType === 'error'"
+                        />
                     </div>
                     <i @click="hide()">
-                        <app-icon icon="carbon:close"></app-icon>
+                        <app-icon icon="carbon:close" />
                     </i>
                 </header>
-                <div class="message mt-1 has-text-size-larger" v-if="message"><: message :></div>
-                <details v-if="!!dumpMessage">
-                    <summary><: t('details') :></summary>
-                    <pre class="dump"><: dumpMessage :></pre>
+                <div
+                    class="message mt-1 has-text-size-larger"
+                    v-if="message"
+                >
+                    {{ message }}
+                </div>
+                <details
+                    open
+                    v-if="!!dumpMessage"
+                >
+                    <summary>{{ msgDetails }}</summary>
+                    <pre class="dump">{{ dumpMessage }}</pre>
                 </details>
-                <input class="mt-1" type="text" v-if="dialogType === 'prompt'" v-model.lazy="inputValue" />
-                <div class="mt-1" v-for="uitem in unique">
-                    <label><: uitem.label :></label>
-                    <input type="text" :id="uitem.field" v-model.lazy="uitem.value" />
+                <input
+                    class="mt-1"
+                    type="text"
+                    v-model.lazy="inputValue"
+                    v-if="dialogType === 'prompt'"
+                >
+                <div
+                    class="mt-1"
+                    v-for="uitem in unique"
+                    :key="uitem.field"
+                >
+                    <label>{{ uitem.label }}</label>
+                    <input
+                        :id="uitem.field"
+                        type="text"
+                        v-model.lazy="uitem.value"
+                    >
                 </div>
-                <template v-if="dialogType === 'prompt'" v-show="checks?.length > 0">
-                    <div class="mt-05" v-for="(citem, index) in checks">
-                        <input type="checkbox" :id="checkname(index)" v-model.lazy="citem.value"  />
-                        <label :for="checkname(index)"><: citem.label :></label>
+                <template v-if="dialogType === 'prompt' && checks?.length > 0">
+                    <div
+                        class="mt-05"
+                        v-for="(citem, index) in checks"
+                        :key="citem.label"
+                    >
+                        <input
+                            :id="checkname(index)"
+                            type="checkbox"
+                            v-model.lazy="citem.value"
+                        >
+                        <label :for="checkname(index)">{{ citem.label }}</label>
                     </div>
                 </template>
                 <div class="actions mt-2">
@@ -46,20 +98,26 @@ export const Dialog = Vue.extend({
                         :disabled="loading === true"
                         @click="prepareCallback() && confirmCallback($root, callbackOptions(inputValue, unique))"
                         v-if="confirmMessage">
-                        <: confirmMessage :>
+                        {{ confirmMessage }}
                     </button>
                     <button
                         class="button-secondary cancel"
                         :disabled="loading === true"
                         @click="hide()"
                         v-if="cancelMessage">
-                        <: cancelMessage :>
+                        {{ cancelMessage }}
                     </button>
                 </div>
             </div>
         </transition>
-    </div>`,
+    </dialog>
+</template>
+<script>
+import { t } from 'ttag';
+import Vue from 'vue';
 
+export const Dialog = Vue.extend({
+    name: 'WinDialog',
     data() {
         return {
             destroyOnHide: true,
@@ -75,6 +133,7 @@ export const Dialog = Vue.extend({
             checks: [],
             loading: false,
             unique: [],
+            msgDetails: t`details`,
         };
     },
     methods: {
@@ -191,3 +250,6 @@ export const prompt = (message, defaultValue, confirmCallback, root, options) =>
 
     return dialog;
 };
+
+export default Dialog;
+</script>

From d2f10354fb04acc911340dc7de494171b9fe406a Mon Sep 17 00:00:00 2001
From: dante di domenico <dante@didoda.com>
Date: Fri, 18 Apr 2025 10:04:25 +0200
Subject: [PATCH 4/4] refactor: use handleApiError

---
 .../components/module/module-properties.vue   |  2 +-
 .../js/app/components/module/module-setup.vue |  2 +-
 .../components/relation-view/relations-add.js |  2 +-
 resources/js/app/helpers/view.js              | 23 +++++++++++--------
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/resources/js/app/components/module/module-properties.vue b/resources/js/app/components/module/module-properties.vue
index 418033fd0..4ed4702a2 100644
--- a/resources/js/app/components/module/module-properties.vue
+++ b/resources/js/app/components/module/module-properties.vue
@@ -204,7 +204,7 @@ export default {
                     });
                 }, 2000);
             } catch (e) {
-                BEDITA.error(e);
+                this.$helpers.handleApiError(e);
             } finally {
                 this.loading = false;
             }
diff --git a/resources/js/app/components/module/module-setup.vue b/resources/js/app/components/module/module-setup.vue
index 9501a0404..c94402066 100644
--- a/resources/js/app/components/module/module-setup.vue
+++ b/resources/js/app/components/module/module-setup.vue
@@ -218,7 +218,7 @@ export default {
                     });
                 }, 2000);
             } catch (e) {
-                BEDITA.error(e);
+                this.$helpers.handleApiError(e);
             } finally {
                 this.loading = false;
             }
diff --git a/resources/js/app/components/relation-view/relations-add.js b/resources/js/app/components/relation-view/relations-add.js
index 42b349ed6..d96c6665e 100644
--- a/resources/js/app/components/relation-view/relations-add.js
+++ b/resources/js/app/components/relation-view/relations-add.js
@@ -330,7 +330,7 @@ export default {
             try {
                 const response = await fetch(postUrl, options);
                 const responseJson = await response.json();
-                if (responseJson.error) {
+                if (responseJson?.error) {
                     throw new Error(responseJson.error);
                 }
 
diff --git a/resources/js/app/helpers/view.js b/resources/js/app/helpers/view.js
index b454b423c..b0d978ad4 100644
--- a/resources/js/app/helpers/view.js
+++ b/resources/js/app/helpers/view.js
@@ -380,18 +380,21 @@ export default {
             },
 
             handleApiError(response) {
+                let message = '';
+                let detail = false;
                 if (typeof response === 'string') {
-                    BEDITA.error(response);
-
-                    return;
-                }
-                if (response?.error && typeof response.error === 'string') {
-                    BEDITA.error(response.error);
-
-                    return;
+                    message = response;
+                } else if (response?.error && typeof response.error === 'string') {
+                    message = response.error;
+                } else if (response?.message && typeof response.message === 'string') {
+                    message = response.message;
+                } else {
+                    if (response?.error?.status) {
+                        message += `[${response.error.status}] `;
+                    }
+                    message += response?.error?.title || t`An error occurred`;
+                    detail = response?.error?.detail || false;
                 }
-                const message = response?.error?.title || 'An error occurred';
-                const detail = response?.error?.detail || false;
                 BEDITA.error(message, document.body, detail);
             },
         }