Adjust modal for api error

resources/js/app/components/dialog/dialog.vue

@@ -47,7 +47,7 @@
                     </i>
                 </header>
                 <div
-                    class="message mt-1 has-text-size-base"
+                    class="message mt-1"
                     v-html="message"
                     v-if="message"
                 />

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;
             }

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;
             }

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;
             }

resources/js/app/components/relation-view/relation-view.vue

@@ -723,7 +723,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);
@@ -744,7 +744,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 = [];
@@ -753,11 +753,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;
             }

resources/js/app/components/relation-view/relations-add.js

@@ -332,7 +332,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);
                 }
 

resources/js/app/helpers/view.js

@@ -378,6 +378,25 @@ export default {
 
                 return response;
             },
+
+            handleApiError(response) {
+                let message = '';
+                let detail = false;
+                if (typeof response === 'string') {
+                    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;
+                }
+                BEDITA.error(message, document.body, detail);
+            },
         }
     }
 };

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 = '';

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,21 @@ export default {
                     details = details + '\n' + e.details;
                 }
             }
-            const message = t`OOOPS! Something went wrong` + '. ' + this.errors[0].message;
+            const title = t`OOOPS! Something went wrong` + '. ' + this.errors[0].message;
+            let params = {
+                error: {
+                    title,
+                }
+            };
             if (this.userRoles.includes('admin')) {
-                BEDITA.error(message, document.body, details);
-            } else {
-                BEDITA.error(message);
+                params = {
+                    error: {
+                        title,
+                        details
+                    }
+                }
             }
+            this.$helpers.handleApiError(params);
             this.errors = [];
         },