globalised ErrorBanner and DebugPanel

src/components/DebugPanel.vue

@@ -0,0 +1,25 @@
+<template>
+    <v-row>
+        <v-col cols=12>
+            <v-expansion-panels v-model="debugPanel">
+                <v-expansion-panel title="Debug Info">
+                    <v-expansion-panel-text>
+                        {{ data }}
+                    </v-expansion-panel-text>
+                </v-expansion-panel>
+            </v-expansion-panels>
+        </v-col>
+    </v-row>
+</template>
+<script>
+export default {
+    props: {
+        data: {}
+    },
+    data(){
+        return {
+            debugPanel: false
+        }
+    }
+}
+</script>

src/main.js

@@ -10,6 +10,8 @@ import './assets/css/app.scss'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import axios from 'axios'
 import VueVirtualScroller from 'vue-virtual-scroller'
+import DebugPanel from '@/components/DebugPanel.vue'
+import ErrorBanner from '@/components/ErrorBanner.vue'
 
 axios.defaults.headers.common['X-Authentication'] = `Bearer ${localStorage.getItem('access_token')}`;
 
@@ -19,6 +21,8 @@ const app = createApp(App).use(router)
     .use(vuetify)
     .use(print)
     .use(VueVirtualScroller)
+    .use(DebugPanel)
+    .use(ErrorBanner)
     .component('DatePicker', Datepicker)
 
 var url = window.location.protocol + "//" + window.location.host + "/api/v1"

src/views/complaints/ComplaintEdit.vue

@@ -27,19 +27,9 @@
                         </v-textarea>
                     </v-col>
                 </v-row>
-                <v-row>
-                    <v-col cols=12>
-                        <v-expansion-panels v-model="debugPanel">
-                            <v-expansion-panel title="Debug Info">
-                                <v-expansion-panel-text>
-                                    {{ complaint }}
-                                </v-expansion-panel-text>
-                            </v-expansion-panel>
-                        </v-expansion-panels>
-                    </v-col>
-                </v-row>
             </v-container>
         </v-card-text>
+        <DebugPanel :data="complaint"></DebugPanel>
         <ErrorBanner :errors="errors" />
         <v-card-actions>
             <v-btn v-if="!complaint.isNew" color="red-darken-1"
@@ -65,7 +55,6 @@
 </template>
 <script>
 import axios from 'axios'
-import ErrorBanner from '@/components/ErrorBanner.vue'
 import methods from '@/CommonMethods.vue'
 import DatePicker from '@vuepic/vue-datepicker'
 import Complaint from '@/types/ComplaintType.vue'
@@ -76,7 +65,6 @@ export default {
         setcomplaint: new Complaint()
     },
     components: {
-        ErrorBanner,
         CustomerSearch,
         DriverSearch,
         DatePicker

src/views/contracts/ContractEdit.vue

@@ -65,6 +65,7 @@
                 </v-row>
             </v-container>
         </v-card-text>
+        <DebugPanel :data="contract"></DebugPanel>
         <ErrorBanner :errors="errors" />
         <v-card-actions>
             <v-btn v-if="!contract.isNew" color="red-darken-1"

src/views/medfeeds/MedFeedsEdit.vue

@@ -51,6 +51,7 @@
                 </v-row>
             </v-container>
         </v-card-text>
+        <DebugPanel :data="mf"></DebugPanel>
         <ErrorBanner :errors="errors" />
         <v-card-actions>
             <v-btn v-if="!mf.isNew" color="red-darken-1"