Added delete backup file to the WebUI

frontend/pages/backup.vue

@@ -41,10 +41,15 @@
       <div class="card">
         <header class="card-header">
           <p class="card-header-title is-text-overflow pr-1">
-            <NuxtLink @click="downloadFile(item)" v-text="item.filename"/>
+            <span class="icon"><i class="fas fa-download" :class="{'fa-spin':item?.isDownloading}"></i>&nbsp;</span>
+            <span>
+              <NuxtLink @click="downloadFile(item)" v-text="item.filename"/>
+            </span>
           </p>
           <span class="card-header-icon">
-            <span class="icon"><i class="fas fa-download" :class="{'fa-spin':item?.isDownloading}"></i></span>
+            <NuxtLink @click="deleteFile(item)" class="has-text-danger" v-tooltip="'Delete this backup file.'">
+              <span class="icon"><i class="fas fa-trash"></i></span>
+            </NuxtLink>
           </span>
         </header>
         <div class="card-footer-item">
@@ -98,7 +103,7 @@ import request from '~/utils/request.js'
 import moment from 'moment'
 import {humanFileSize, makeConsoleCommand, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
 import Message from '~/components/Message.vue'
-import {useStorage} from "@vueuse/core";
+import {useStorage} from '@vueuse/core'
 
 useHead({title: 'Backups'})
 const items = ref([])
@@ -170,6 +175,34 @@ const queueTask = async () => {
   }
 }
 
+const deleteFile = async (item) => {
+  if (!confirm(`Delete backup file '${item.filename}'?`)) {
+    return
+  }
+
+  try {
+    const response = await request(`/system/backup/${item.filename}`, {method: 'DELETE'})
+
+    if (200 === response.status) {
+      notification('success', 'Success', `Backup file '${item.filename}' has been deleted.`)
+      items.value = items.value.filter(i => i.filename !== item.filename)
+      return
+    }
+
+    let json
+
+    try {
+      json = await response.json()
+    } catch (e) {
+      json = {error: {code: response.status, message: response.statusText}}
+    }
+
+    notification('error', 'Error', `API error. ${json.error.code}: ${json.error.message}`)
+  } catch (e) {
+    notification('error', 'Error', `Request error. ${e.message}`)
+  }
+}
+
 const isQueued = async () => {
   const response = await request('/tasks/backup')
   const json = await response.json()

frontend/pages/tasks.vue

@@ -195,6 +195,11 @@ const queueTask = async task => {
     if (response.ok) {
       notification('success', 'Success', `Task '${task.name}' has been ${is_queued ? 'removed from the queue' : 'queued'}.`)
       task.queued = !is_queued
+      if (task.queued) {
+        queued.value.push(task.name)
+      } else {
+        queued.value = queued.value.filter(t => t !== task.name)
+      }
     }
   } catch (e) {
     notification('error', 'Error', `Request error. ${e.message}`)

src/API/System/Backup.php

@@ -30,7 +30,7 @@ final class Backup
 
             $builder = [
                 'filename' => basename($file),
-                'type' => $isAuto ? 'Automatic' : 'Manual',
+                'type' => $isAuto ? 'automatic' : 'manual',
                 'size' => filesize($file),
                 'created_at' => filectime($file),
                 'modified_at' => filemtime($file),