feat(webui): cancel all tasks from Server Settings

closes #658

komga-webui/src/components/Toaster.vue

@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import {BOOK_IMPORTED, ERROR} from '@/types/events'
+import {BOOK_IMPORTED, ERROR, ErrorEvent, NOTIFICATION, NotificationEvent} from '@/types/events'
 import {convertErrorCodes} from '@/functions/error-codes'
 import {BookImportSseDto} from '@/types/komga-sse'
 
@@ -59,10 +59,12 @@ export default Vue.extend({
   created() {
     this.$eventHub.$on(BOOK_IMPORTED, this.onBookImported)
     this.$eventHub.$on(ERROR, this.onError)
+    this.$eventHub.$on(NOTIFICATION, this.onNotification)
   },
   beforeDestroy() {
     this.$eventHub.$off(BOOK_IMPORTED, this.onBookImported)
     this.$eventHub.$off(ERROR, this.onError)
+    this.$eventHub.$off(NOTIFICATION, this.onNotification)
   },
   watch: {
     'snackbar.show'(val) {
@@ -100,6 +102,11 @@ export default Vue.extend({
         color: 'error',
       })
     },
+    onNotification(event: NotificationEvent) {
+      this.queue.push({
+        text: event.message,
+      })
+    },
     async onBookImported(event: BookImportSseDto) {
       if (event.success && event.bookId) {
         const book = await this.$komgaBooks.getBook(event.bookId)

komga-webui/src/locales/en.json

@@ -107,8 +107,8 @@
       "background_color": "Background color",
       "background_colors": {
         "black": "Black",
-        "white": "White",
-        "gray": "Gray"
+        "gray": "Gray",
+        "white": "White"
       },
       "display": "Display",
       "general": "General",
@@ -175,7 +175,6 @@
     "title": "{name} collection"
   },
   "common": {
-    "library": "Library",
     "all_libraries": "All Libraries",
     "books": "Books",
     "books_n": "No book | 1 book | {count} books",
@@ -193,6 +192,7 @@
     "go_to_library": "Go to library",
     "go_to_readlist": "Go to read list",
     "go_to_series": "Go to series",
+    "library": "Library",
     "locale_name": "English",
     "locale_rtl": "false",
     "lock_all": "Lock all",
@@ -632,9 +632,11 @@
   },
   "server": {
     "server_management": {
-      "button_scan_libraries": "Scan all libraries",
+      "button_cancel_all_tasks": "Cancel all tasks",
       "button_empty_trash": "Empty trash for all libraries",
+      "button_scan_libraries": "Scan all libraries",
       "button_shutdown": "Shut down",
+      "notification_tasks_cancelled": "No tasks to cancel | One task cancelled | {count} tasks cancelled",
       "section_title": "Server Management"
     },
     "tab_title": "Server"

komga-webui/src/main.ts

@@ -18,6 +18,7 @@ import komgaSeries from './plugins/komga-series.plugin'
 import komgaUsers from './plugins/komga-users.plugin'
 import komgaTransientBooks from './plugins/komga-transientbooks.plugin'
 import komgaSse from './plugins/komga-sse.plugin'
+import komgaTasks from './plugins/komga-tasks.plugin'
 import vuetify from './plugins/vuetify'
 import './public-path'
 import router from './router'
@@ -43,6 +44,7 @@ Vue.use(komgaUsers, {store: store, http: Vue.prototype.$http})
 Vue.use(komgaLibraries, {store: store, http: Vue.prototype.$http})
 Vue.use(komgaSse, {eventHub: Vue.prototype.$eventHub, store: store})
 Vue.use(actuator, {http: Vue.prototype.$http})
+Vue.use(komgaTasks, {http: Vue.prototype.$http})
 
 
 Vue.config.productionTip = false

komga-webui/src/plugins/komga-tasks.plugin.ts

@@ -0,0 +1,17 @@
+import {AxiosInstance} from 'axios'
+import _Vue from 'vue'
+import KomgaTasksService from '@/services/komga-tasks.service'
+
+export default {
+  install(
+    Vue: typeof _Vue,
+    {http}: { http: AxiosInstance }) {
+    Vue.prototype.$komgaTasks = new KomgaTasksService(http)
+  },
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $komgaTasks: KomgaTasksService;
+  }
+}

komga-webui/src/services/komga-tasks.service.ts

@@ -0,0 +1,23 @@
+import {AxiosInstance} from 'axios'
+
+const API_TASKS = '/api/v1/tasks'
+
+export default class KomgaTasksService {
+  private http: AxiosInstance
+
+  constructor(http: AxiosInstance) {
+    this.http = http
+  }
+
+  async deleteAllTasks(): Promise<number> {
+    try {
+      return (await this.http.delete(API_TASKS)).data
+    } catch (e) {
+      let msg = 'An error occurred while trying to delete all tasks'
+      if (e.response.data.message) {
+        msg += `: ${e.response.data.message}`
+      }
+      throw new Error(msg)
+    }
+  }
+}

komga-webui/src/types/events.ts

@@ -28,7 +28,12 @@ export const THUMBNAILBOOK_ADDED = 'thumbnailbook-added'
 export const THUMBNAILSERIES_ADDED = 'thumbnailseries-added'
 
 export const ERROR = 'error'
+export const NOTIFICATION = 'notification'
 
-export interface ErrorEvent{
+export interface ErrorEvent {
+  message: string,
+}
+
+export interface NotificationEvent {
   message: string,
 }

komga-webui/src/views/SettingsServer.vue

@@ -4,15 +4,19 @@
       <v-col><span class="text-h5">{{ $t('server.server_management.section_title') }}</span></v-col>
     </v-row>
     <v-row>
-      <v-col>
-        <v-btn @click="scanAllLibraries"
-               :class="$vuetify.rtl ? 'ml-4' : 'mr-4'"
-        >{{ $t('server.server_management.button_scan_libraries') }}
-        </v-btn>
-        <v-btn @click="confirmEmptyTrash = true"
-               :class="$vuetify.rtl ? 'ml-4' : 'mr-4'"
-        >{{ $t('server.server_management.button_empty_trash') }}
+      <v-col cols="auto">
+        <v-btn @click="scanAllLibraries">{{ $t('server.server_management.button_scan_libraries') }}</v-btn>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn @click="confirmEmptyTrash = true">{{ $t('server.server_management.button_empty_trash') }}</v-btn>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn @click="cancelAllTasks"
+               color="warning"
+        >{{ $t('server.server_management.button_cancel_all_tasks') }}
         </v-btn>
+      </v-col>
+      <v-col cols="auto">
         <v-btn @click="modalStopServer = true"
                color="error"
         >{{ $t('server.server_management.button_shutdown') }}
@@ -43,7 +47,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
-import {ERROR} from '@/types/events'
+import {ERROR, ErrorEvent, NOTIFICATION, NotificationEvent} from '@/types/events'
 import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
@@ -69,6 +73,12 @@ export default Vue.extend({
         this.$komgaLibraries.scanLibrary(library)
       })
     },
+    async cancelAllTasks() {
+      const count = await this.$komgaTasks.deleteAllTasks()
+      this.$eventHub.$emit(NOTIFICATION, {
+        message: this.$tc('server.server_management.notification_tasks_cancelled', count),
+      } as NotificationEvent)
+    },
     async stopServer() {
       try {
         await this.$actuator.shutdown()