From 3858fe5c7fc624cc878fbd18d7f85a12274d6ea5 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Sun, 14 Jun 2020 23:23:21 +0000
Subject: [PATCH]

---
 ayanova/src/App.vue                  |  4 +-
 ayanova/src/api/gzdialog.js          |  5 ++-
 ayanova/src/components/gzconfirm.vue | 61 ++++++++++++----------------
 ayanova/src/views/adm-license.vue    |  6 ++-
 4 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/ayanova/src/App.vue b/ayanova/src/App.vue
index d65351a2..678a3045 100644
--- a/ayanova/src/App.vue
+++ b/ayanova/src/App.vue
@@ -197,13 +197,13 @@
         </v-menu>
       </v-toolbar-items>
     </v-app-bar>
-    <v-content>
+    <v-main>
       <v-container fluid>
         <transition name="fade" mode="out-in" @after-leave="afterLeave">
           <router-view class="view" :key="$route.fullPath"></router-view>
         </transition>
       </v-container>
-    </v-content>
+    </v-main>
     <v-footer
       v-if="!isAuthenticated"
       absolute
diff --git a/ayanova/src/api/gzdialog.js b/ayanova/src/api/gzdialog.js
index 17de482d..639a2cff 100644
--- a/ayanova/src/api/gzdialog.js
+++ b/ayanova/src/api/gzdialog.js
@@ -131,11 +131,12 @@ export default {
   /////////////////////////////////////
   // Custom confirmation
   //
-  confirmGeneric(tKey) {
+  confirmGeneric(tKey, ttype = "info") {
     return VM_LOCAL.$root.$gzconfirm({
       message: window.$gz.translation.get(tKey),
       yesButtonText: window.$gz.translation.get("OK"),
-      noButtonText: window.$gz.translation.get("Cancel")
+      noButtonText: window.$gz.translation.get("Cancel"),
+      type: ttype
     });
   }
 
diff --git a/ayanova/src/components/gzconfirm.vue b/ayanova/src/components/gzconfirm.vue
index f944a870..9cd9322f 100644
--- a/ayanova/src/components/gzconfirm.vue
+++ b/ayanova/src/components/gzconfirm.vue
@@ -3,12 +3,25 @@
     <v-dialog
       persistent
       v-model="isVisible"
-      :max-width="options.width"
+      :max-width="maxWidth"
+      :width="width"
       @keydown.esc="cancel"
       :data-cy="!!$ay.dev ? 'gzconfirm' : false"
     >
       <v-card elevation="24">
         <v-card-title class="headline lighten-2" primary-title>
+          <template v-if="options.type == 'success'">
+            <v-icon large color="success">fa-check-circle</v-icon>
+          </template>
+          <template v-if="options.type == 'info'">
+            <v-icon large color="info">fa-info-circle</v-icon>
+          </template>
+          <template v-if="options.type == 'warning'">
+            <v-icon large color="warning">fa-exclamation-circle</v-icon>
+          </template>
+          <template v-if="options.type == 'error'">
+            <v-icon large color="error">fa-exclamation-triangle</v-icon>
+          </template>
           <span v-if="options.title"> {{ options.title }} </span>
         </v-card-title>
 
@@ -16,8 +29,6 @@
           {{ options.message }}
         </v-card-text>
 
-        <!-- <v-divider></v-divider> v-bind:class="options.type" -->
-
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn
@@ -41,36 +52,10 @@
   </div>
 </template>
 <script>
-/**
- * Vuetify Confirm Dialog component
- *
- * Insert component where you want to use it:
- * <confirm ref="confirm"></confirm>
- *
- * Call it:
- * this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' }).then((confirm) => {})
- * Or use await:
- * if (await this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' })) {
- *   // yes
- * }
- * else {
- *   // cancel
- * }
- *
- * Alternatively you can place it in main App component and access it globally via this.$root.$confirm
- * <template>
- *   <v-app>
- *     ...
- *     <confirm ref="confirm"></confirm>
- *   </v-app>
- * </template>
- *
- * mounted() {
- *   this.$root.$confirm = this.$refs.confirm.open
- * }
- */
 export default {
   data: () => ({
+    width: 290,
+    maxWidth: 290,
     isVisible: false,
     resolve: null,
     reject: null,
@@ -79,14 +64,22 @@ export default {
       message: null,
       yesButtonText: null,
       noButtonText: null,
-      type: "warning", //one of success, info, warning, and error, see v-alert docs for more info
-      width: 290,
-      zIndex: 200
+      type: "info" //one of success, info, warning, and error, see v-alert docs for more info
     }
   }),
   methods: {
     open(options) {
       this.options = Object.assign(this.options, options);
+      this.maxWidth = Math.floor(window.innerWidth * 0.9);
+      let calculatedWidth = Math.floor(window.innerWidth * 0.5);
+      if (calculatedWidth < 290) {
+        this.width = 290;
+      } else if (calculatedWidth > 800) {
+        this.width = 800;
+      } else {
+        this.width = calculatedWidth;
+      }
+
       this.isVisible = true;
       return new Promise((resolve, reject) => {
         this.resolve = resolve;
diff --git a/ayanova/src/views/adm-license.vue b/ayanova/src/views/adm-license.vue
index 3640abea..9b35ab6f 100644
--- a/ayanova/src/views/adm-license.vue
+++ b/ayanova/src/views/adm-license.vue
@@ -416,14 +416,16 @@ export default {
       let vm = this;
       try {
         let dialogResult = await window.$gz.dialog.confirmGeneric(
-          "AdminEraseDatabaseWarning"
+          "AdminEraseDatabaseWarning",
+          "warning"
         );
         if (dialogResult == false) {
           return;
         }
 
         dialogResult = await window.$gz.dialog.confirmGeneric(
-          "AdminEraseDatabaseLastWarning"
+          "AdminEraseDatabaseLastWarning",
+          "error"
         );
         if (dialogResult == false) {
           return;