refactor: use AppDialog in UpdatingDialog

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

src/components/common/AddInstanceDialog.vue

@@ -6,7 +6,6 @@
     :valid.sync="valid"
     :title="$t('app.general.title.add_printer')"
     :help-tooltip="$t('app.endpoint.tooltip.endpoint_examples')"
-    persistent
     @save="addInstance"
   >
     <v-card-text>

src/components/common/UpdatingDialog.vue

@@ -1,88 +1,73 @@
 <template>
-  <v-dialog
-    :value="showDialog"
+  <app-dialog
+    v-model="open"
+    :title="updating ? $t('app.version.status.updating') : $t('app.version.status.finished')"
+    :loading="updating"
+    :close-button-disabled="updating"
     max-width="650"
     persistent
   >
-    <v-card :loading="(updating) ? 'primary' : false">
-      <v-card-title>
-        <span class="headline">{{ title }}</span>
-      </v-card-title>
-      <v-card-text>
-        <console
-          :items="responses"
-          key-field="id"
-          :height="250"
-          readonly
-        />
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer />
-        <slot name="actions">
-          <app-btn
-            color="primary"
-            text
-            :disabled="updating"
-            @click="close"
-          >
-            {{ buttonTitle }}
-          </app-btn>
-        </slot>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+    <v-card-text>
+      <console
+        :items="responses"
+        :fullscreen="isMobileViewport"
+        :height="250"
+        readonly
+      />
+    </v-card-text>
+
+    <template #actions>
+      <v-spacer />
+
+      <app-btn
+        color="primary"
+        text
+        :disabled="updating"
+        @click="open = false"
+      >
+        {{ updating ? $t('app.version.status.updating') : $t('app.version.btn.finish') }}
+      </app-btn>
+    </template>
+  </app-dialog>
 </template>
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import Console from '@/components/widgets/console/Console.vue'
+import BrowserMixin from '@/mixins/browser'
 
 @Component({
   components: {
     Console
   }
 })
-export default class UpdatingDialog extends Mixins(StateMixin) {
+export default class UpdatingDialog extends Mixins(StateMixin, BrowserMixin) {
   invokedDialog = false
-  get showDialog () {
-    if (
-      this.invokedDialog === true ||
-      this.$store.state.version.busy
-    ) {
+
+  get open (): boolean {
+    if (this.invokedDialog || this.updating) {
       this.invokedDialog = true
+
       return true
     }
-    return false
-  }
 
-  get updating () {
-    return this.$store.state.version.busy
+    return false
   }
 
-  get title () {
-    if (this.updating) {
-      return this.$t('app.version.status.updating')
-    } else {
-      return this.$t('app.version.status.finished')
+  set open (value: boolean) {
+    if (!value) {
+      this.invokedDialog = false
+      this.$store.commit('version/setClearUpdateResponse')
     }
   }
 
-  get buttonTitle () {
-    if (this.updating) {
-      return this.$t('app.version.status.updating')
-    } else {
-      return this.$t('app.version.btn.finish')
-    }
+  get updating () {
+    return this.$store.state.version.busy
   }
 
   get responses () {
     return this.$store.getters['version/getResponses']
   }
-
-  close () {
-    this.invokedDialog = false
-    this.$store.commit('version/setClearUpdateResponse')
-  }
 }
 </script>

src/components/ui/AppDialog.vue

@@ -13,6 +13,7 @@
       @submit.prevent="handleSave"
     >
       <v-card
+        :loading="loading"
         :class="{
           'collapsable-card': titleShadow
         }"
@@ -58,6 +59,7 @@
                 text
                 x-small
                 class="ml-1"
+                :disabled="closeButtonDisabled"
                 @click="open = false"
               >
                 <v-icon>
@@ -134,6 +136,9 @@ export default class AppDialog extends Mixins(BrowserMixin) {
   @Prop({ type: String })
   readonly subTitle?: string
 
+  @Prop({ type: Boolean })
+  readonly closeButtonDisabled?: boolean
+
   @Prop({ type: String })
   readonly cancelButtonText?: string
 
@@ -155,6 +160,9 @@ export default class AppDialog extends Mixins(BrowserMixin) {
   @Prop({ type: Boolean })
   readonly noActions?: boolean
 
+  @Prop({ type: [Boolean, String] })
+  readonly loading?: boolean | string
+
   @Prop({ type: Boolean })
   readonly titleShadow?: boolean
 

src/components/widgets/console/Console.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="console"
-  >
+  <div class="console">
     <console-command
       v-if="!readonly && flipLayout"
       v-model="currentCommand"
@@ -22,7 +20,7 @@
         :class="{
           'console-scroller-fullscreen': fullscreen
         }"
-        :key-field="keyField"
+        key-field="id"
         :buffer="600"
         @resize="scrollToLatest()"
       >
@@ -36,7 +34,7 @@
             :data-index="index"
           >
             <console-item
-              :key="item[keyField]"
+              :key="item.id"
               :value="item"
               class="console-item"
               @click="handleEntryClick"
@@ -63,6 +61,7 @@ import ConsoleItem from './ConsoleItem.vue'
 import { SocketActions } from '@/api/socketActions'
 import type { DinamicScroller } from 'vue-virtual-scroller'
 import type { ConsoleEntry } from '@/store/console/types'
+import type { UpdateResponse } from '@/store/version/types'
 
 @Component({
   components: {
@@ -71,11 +70,8 @@ import type { ConsoleEntry } from '@/store/console/types'
   }
 })
 export default class Console extends Mixins(StateMixin) {
-  @Prop({ type: Array<ConsoleEntry>, default: () => [] })
-  readonly items!: ConsoleEntry[]
-
-  @Prop({ type: String, default: 'id' })
-  readonly keyField!: string
+  @Prop({ type: [Array<ConsoleEntry>, Array<UpdateResponse>], default: () => [] })
+  readonly items!: ConsoleEntry[] | UpdateResponse[]
 
   @Prop({ type: Boolean })
   readonly fullscreen?: boolean