feat(webui): confirmation dialog for library analysis and refresh

komga-webui/src/components/dialogs/ConfirmationDialog.vue

@@ -0,0 +1,83 @@
+<template>
+  <v-dialog v-model="modal"
+            max-width="450"
+  >
+    <v-card>
+      <v-card-title>{{ title }}</v-card-title>
+
+      <v-card-text>
+        <v-container fluid>
+          <v-row>
+            <v-col>{{ body }}</v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer/>
+        <v-btn text @click="dialogCancel">{{ buttonCancel || $t('common.cancel') }}</v-btn>
+        <v-btn :color="buttonConfirmColor"
+               @click="dialogConfirm"
+        >{{ buttonConfirm }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'ConfirmationDialog',
+  data: () => {
+    return {
+      modal: false,
+    }
+  },
+  props: {
+    value: Boolean,
+    title: {
+      type: String,
+      required: true,
+    },
+    body: {
+      type: String,
+      required: true,
+    },
+    buttonCancel: {
+      type: String,
+      required: false,
+    },
+    buttonConfirm: {
+      type: String,
+      required: true,
+    },
+    buttonConfirmColor: {
+      type: String,
+      default: 'primary',
+    },
+  },
+  watch: {
+    value(val) {
+      this.modal = val
+    },
+    modal(val) {
+      !val && this.dialogCancel()
+    },
+  },
+  methods: {
+    dialogCancel() {
+      this.$emit('input', false)
+    },
+    dialogConfirm() {
+      this.$emit('confirm')
+      this.$emit('input', false)
+    },
+  },
+})
+</script>
+
+<style scoped>
+
+</style>

komga-webui/src/components/menus/LibraryActionsMenu.vue

@@ -10,10 +10,10 @@
         <v-list-item @click="scan">
           <v-list-item-title>{{ $t('menu.scan_library_files') }}</v-list-item-title>
         </v-list-item>
-        <v-list-item @click="analyze">
+        <v-list-item @click="confirmAnalyzeModal = true">
           <v-list-item-title>{{ $t('menu.analyze') }}</v-list-item-title>
         </v-list-item>
-        <v-list-item @click="refreshMetadata">
+        <v-list-item @click="confirmRefreshMetadataModal = true">
           <v-list-item-title>{{ $t('menu.refresh_metadata') }}</v-list-item-title>
         </v-list-item>
         <v-list-item @click="edit">
@@ -25,38 +25,62 @@
         </v-list-item>
       </v-list>
     </v-menu>
+
+    <confirmation-dialog
+      v-model="confirmAnalyzeModal"
+      title="Analyze library"
+      body="Analyzes all the media files in the library. The analysis captures information about the media. Depending on your library size, this may take a long time."
+      button-confirm="Analyze"
+      @confirm="analyze"
+    />
+
+    <confirmation-dialog
+      v-model="confirmRefreshMetadataModal"
+      title="Refresh metadata for library"
+      body="Refreshes metadata for all the media files in the library. Depending on your library size, this may take a long time."
+      button-confirm="Refresh"
+      @confirm="refreshMetadata"
+    />
   </div>
 </template>
 <script lang="ts">
 import Vue from 'vue'
+import ConfirmationDialog from "@/components/dialogs/ConfirmationDialog.vue";
 
 export default Vue.extend({
   name: 'LibraryActionsMenu',
+  components: {ConfirmationDialog},
   props: {
     library: {
       type: Object as () => LibraryDto,
       required: true,
     },
   },
+  data: () => {
+    return {
+      confirmAnalyzeModal: false,
+      confirmRefreshMetadataModal: false,
+    }
+  },
   computed: {
-    isAdmin (): boolean {
+    isAdmin(): boolean {
       return this.$store.getters.meAdmin
     },
   },
   methods: {
-    scan () {
+    scan() {
       this.$komgaLibraries.scanLibrary(this.library)
     },
-    analyze () {
+    analyze() {
       this.$komgaLibraries.analyzeLibrary(this.library)
     },
-    refreshMetadata () {
+    refreshMetadata() {
       this.$komgaLibraries.refreshMetadata(this.library)
     },
-    edit () {
+    edit() {
       this.$store.dispatch('dialogEditLibrary', this.library)
     },
-    promptDeleteLibrary () {
+    promptDeleteLibrary() {
       this.$store.dispatch('dialogDeleteLibrary', this.library)
     },
   },