ayanova/src/components/error-control.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-col cols="12" mt-1 mb-2>
+    <v-alert
+      ref="errorbox"
+      :data-cy="!!$ay.dev ? 'errorbox' : false"
+      v-show="errorBoxMessage"
+      color="error"
+      icon="fa-exclamation-circle "
+      transition="scale-transition"
+      class="multi-line"
+      outlined
+      >{{ errorBoxMessage }}</v-alert
+    >
+  </v-col>
+</template>
+<script>
+export default {
+  data: () => ({}),
+  props: {
+    errorBoxMessage: String
+  }
+};
+</script>

ayanova/src/main.js

@@ -41,6 +41,7 @@ import pickList from "./components/pick-list.vue";
 import customFieldsControl from "./components/custom-fields-control.vue";
 import currencyControl from "./components/currency-control.vue";
 import decimalControl from "./components/decimal-control.vue";
+import errorControl from "./components/error-control.vue";
 import errorhandler from "./api/errorhandler";
 
 /////////////////////////////////////////////////////////////////
@@ -168,6 +169,7 @@ Vue.component("gz-pick-list", pickList);
 Vue.component("gz-custom-fields", customFieldsControl);
 Vue.component("gz-currency", currencyControl);
 Vue.component("gz-decimal", decimalControl);
+Vue.component("gz-error", errorControl);
 
 //3rd party components
 Vue.use(VueCurrencyInput);

ayanova/src/views/widget.vue

@@ -4,7 +4,7 @@
       <v-col>
         <v-form ref="form">
           <v-row>
-            <v-col cols="12" mt-1 mb-2>
+            <!-- <v-col cols="12" mt-1 mb-2>
               <v-alert
                 ref="errorbox"
                 :data-cy="!!$ay.dev ? 'errorbox' : false"
@@ -16,7 +16,8 @@
                 outlined
                 >{{ formState.errorBoxMessage }}</v-alert
               >
-            </v-col>
+            </v-col> -->
+            <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
                 v-model="obj.name"