Add:Delete library items from file system #1439

client/components/app/Appbar.vue

@@ -287,27 +287,38 @@ export default {
         })
     },
     batchDeleteClick() {
-      const audiobookText = this.numMediaItemsSelected > 1 ? `these ${this.numMediaItemsSelected} items` : 'this item'
+      const payload = {
-      const confirmMsg = `Are you sure you want to remove ${audiobookText}?\n\n*Does not delete your files, only removes the items from Audiobookshelf`
+        message: `This will delete ${this.numMediaItemsSelected} library items from the database and your file system. Are you sure?`,
-      if (confirm(confirmMsg)) {
+        checkboxLabel: 'Delete from file system. Uncheck to only remove from database.',
+        yesButtonText: this.$strings.ButtonDelete,
+        yesButtonColor: 'error',
+        checkboxDefaultValue: true,
+        callback: (confirmed, hardDelete) => {
+          if (confirmed) {
             this.$store.commit('setProcessingBatch', true)
+
             this.$axios
-          .$post(`/api/items/batch/delete`, {
+              .$post(`/api/items/batch/delete?hard=${hardDelete ? 1 : 0}`, {
                 libraryItemIds: this.selectedMediaItems.map((i) => i.id)
               })
               .then(() => {
-            this.$toast.success('Batch delete success!')
+                this.$toast.success('Batch delete success')
-            this.$store.commit('setProcessingBatch', false)
                 this.$store.commit('globals/resetSelectedMediaItems', [])
                 this.$eventBus.$emit('bookshelf_clear_selection')
               })
               .catch((error) => {
+                console.error('Batch delete failed', error)
                 this.$toast.error('Batch delete failed')
-            console.error('Failed to batch delete', error)
+              })
+              .finally(() => {
                 this.$store.commit('setProcessingBatch', false)
               })
           }
         },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
     batchEditClick() {
       this.$router.push('/batch')
     },

client/components/cards/LazyBookCard.vue

@@ -526,6 +526,14 @@ export default {
           }
         }
       }
+
+      if (this.userCanDelete) {
+        items.push({
+          func: 'deleteLibraryItem',
+          text: this.$strings.ButtonDelete
+        })
+      }
+
       return items
     },
     _socket() {
@@ -777,6 +785,35 @@ export default {
       this.store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode: this.recentEpisode }])
       this.store.commit('globals/setShowPlaylistsModal', true)
     },
+    deleteLibraryItem() {
+      const payload = {
+        message: 'This will delete the library item from the database and your file system. Are you sure?',
+        checkboxLabel: 'Delete from file system. Uncheck to only remove from database.',
+        yesButtonText: this.$strings.ButtonDelete,
+        yesButtonColor: 'error',
+        checkboxDefaultValue: true,
+        callback: (confirmed, hardDelete) => {
+          if (confirmed) {
+            this.processing = true
+            const axios = this.$axios || this.$nuxt.$axios
+            axios
+              .$delete(`/api/items/${this.libraryItemId}?hard=${hardDelete ? 1 : 0}`)
+              .then(() => {
+                this.$toast.success('Item deleted')
+              })
+              .catch((error) => {
+                console.error('Failed to delete item', error)
+                this.$toast.error('Failed to delete item')
+              })
+              .finally(() => {
+                this.processing = false
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.store.commit('globals/setConfirmPrompt', payload)
+    },
     createMoreMenu() {
       if (!this.$refs.moreIcon) return
 

client/components/modals/item/tabs/Details.vue

@@ -7,11 +7,6 @@
 
     <div class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg" :class="isScrollable ? 'box-shadow-md-up' : 'border-t border-white border-opacity-5'">
       <div class="flex items-center px-4">
-        <ui-btn v-if="userCanDelete" color="error" type="button" class="h-8 hidden md:block" :padding-x="3" small @click.stop.prevent="removeItem">{{ $strings.ButtonRemove }}</ui-btn>
-        <ui-icon-btn bg-color="error" icon="delete" class="md:hidden" :size="7" icon-font-size="1rem" @click.stop.prevent="removeItem" />
-
-        <div class="flex-grow" />
-
         <ui-tooltip :disabled="!!quickMatching" :text="$getString('MessageQuickMatchDescription', [libraryProvider])" direction="bottom" class="mr-2 md:mr-4">
           <ui-btn v-if="userIsAdminOrUp" :loading="quickMatching" color="bg" type="button" class="h-full" small @click.stop.prevent="quickMatch">{{ $strings.ButtonQuickMatch }}</ui-btn>
         </ui-tooltip>
@@ -20,6 +15,8 @@
           <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
         </ui-tooltip>
 
+        <div class="flex-grow" />
+
         <!-- desktop -->
         <ui-btn @click="save" class="mx-2 hidden md:block">{{ $strings.ButtonSave }}</ui-btn>
         <ui-btn @click="saveAndClose" class="mx-2 hidden md:block">{{ $strings.ButtonSaveAndClose }}</ui-btn>
@@ -77,9 +74,6 @@ export default {
     mediaMetadata() {
       return this.media.metadata || {}
     },
-    userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
-    },
     libraryId() {
       return this.libraryItem ? this.libraryItem.libraryId : null
     },
@@ -184,23 +178,6 @@ export default {
       }
       return false
     },
-    removeItem() {
-      if (confirm(`Are you sure you want to remove this item?\n\n*Does not delete your files, only removes the item from audiobookshelf`)) {
-        this.isProcessing = true
-        this.$axios
-          .$delete(`/api/items/${this.libraryItemId}`)
-          .then(() => {
-            console.log('Item removed')
-            this.$toast.success('Item Removed')
-            this.$emit('close')
-            this.isProcessing = false
-          })
-          .catch((error) => {
-            console.error('Remove item failed', error)
-            this.isProcessing = false
-          })
-      }
-    },
     checkIsScrollable() {
       this.$nextTick(() => {
         var formWrapper = document.getElementById('formWrapper')

client/components/prompt/Confirm.vue

@@ -3,11 +3,14 @@
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
     <div ref="content" class="relative text-white" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickedOutside">
       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
-        <p class="text-lg mb-8 mt-2 px-1" v-html="message" />
+        <p class="text-lg mb-6 mt-2 px-1" v-html="message" />
+
+        <ui-checkbox v-if="checkboxLabel" v-model="checkboxValue" checkbox-bg="bg" :label="checkboxLabel" label-class="pl-2 text-base" class="mb-6 px-1" />
+
         <div class="flex px-1 items-center">
           <ui-btn v-if="isYesNo" color="primary" @click="nevermind">{{ $strings.ButtonCancel }}</ui-btn>
           <div class="flex-grow" />
-          <ui-btn v-if="isYesNo" color="success" @click="confirm">{{ $strings.ButtonYes }}</ui-btn>
+          <ui-btn v-if="isYesNo" :color="yesButtonColor" @click="confirm">{{ yesButtonText }}</ui-btn>
           <ui-btn v-else color="primary" @click="confirm">{{ $strings.ButtonOk }}</ui-btn>
         </div>
       </div>
@@ -21,7 +24,8 @@ export default {
   data() {
     return {
       el: null,
-      content: null
+      content: null,
+      checkboxValue: false
     }
   },
   watch: {
@@ -57,6 +61,18 @@ export default {
     persistent() {
       return !!this.confirmPromptOptions.persistent
     },
+    checkboxLabel() {
+      return this.confirmPromptOptions.checkboxLabel
+    },
+    yesButtonText() {
+      return this.confirmPromptOptions.yesButtonText || this.$strings.ButtonYes
+    },
+    yesButtonColor() {
+      return this.confirmPromptOptions.yesButtonColor || 'success'
+    },
+    checkboxDefaultValue() {
+      return !!this.confirmPromptOptions.checkboxDefaultValue
+    },
     isYesNo() {
       return this.type === 'yesNo'
     },
@@ -84,10 +100,11 @@ export default {
       this.show = false
     },
     confirm() {
-      if (this.callback) this.callback(true)
+      if (this.callback) this.callback(true, this.checkboxValue)
       this.show = false
     },
     setShow() {
+      this.checkboxValue = this.checkboxDefaultValue
       this.$eventBus.$emit('showing-prompt', true)
       document.body.appendChild(this.el)
       setTimeout(() => {

client/pages/item/_id/index.vue

@@ -562,12 +562,12 @@ export default {
         })
       }
 
-      // if (this.userCanDelete) {
+      if (this.userCanDelete) {
-      //   items.push({
+        items.push({
-      //     text: this.$strings.ButtonDelete,
+          text: this.$strings.ButtonDelete,
-      //     action: 'delete'
+          action: 'delete'
-      //   })
+        })
-      // }
+      }
 
       return items
     }
@@ -818,14 +818,18 @@ export default {
     },
     deleteLibraryItem() {
       const payload = {
-        message: 'This will delete the library item files from your file system. Are you sure?',
+        message: 'This will delete the library item from the database and your file system. Are you sure?',
-        callback: (confirmed) => {
+        checkboxLabel: 'Delete from file system. Uncheck to only remove from database.',
+        yesButtonText: this.$strings.ButtonDelete,
+        yesButtonColor: 'error',
+        checkboxDefaultValue: true,
+        callback: (confirmed, hardDelete) => {
           if (confirmed) {
             this.$axios
-              .$delete(`/api/items/${this.libraryItemId}?hard=1`)
+              .$delete(`/api/items/${this.libraryItemId}?hard=${hardDelete ? 1 : 0}`)
               .then(() => {
                 this.$toast.success('Item deleted')
-                this.$router.replace(`/library/${this.libraryId}/bookshelf`)
+                this.$router.replace(`/library/${this.libraryId}`)
               })
               .catch((error) => {
                 console.error('Failed to delete item', error)

server/controllers/LibraryItemController.js

@@ -66,7 +66,15 @@ class LibraryItemController {
   }
 
   async delete(req, res) {
+    const hardDelete = req.query.hard == 1 // Delete from file system
+    const libraryItemPath = req.libraryItem.path
     await this.handleDeleteLibraryItem(req.libraryItem)
+    if (hardDelete) {
+      Logger.info(`[LibraryItemController] Deleting library item from file system at "${libraryItemPath}"`)
+      await fs.remove(libraryItemPath).catch((error) => {
+        Logger.error(`[LibraryItemController] Failed to delete library item from file system at "${libraryItemPath}"`, error)
+      })
+    }
     res.sendStatus(200)
   }
 
@@ -292,19 +300,27 @@ class LibraryItemController {
       Logger.warn(`[LibraryItemController] User attempted to delete without permission`, req.user)
       return res.sendStatus(403)
     }
+    const hardDelete = req.query.hard == 1 // Delete files from filesystem
 
-    var { libraryItemIds } = req.body
+    const { libraryItemIds } = req.body
     if (!libraryItemIds || !libraryItemIds.length) {
       return res.sendStatus(500)
     }
 
-    var itemsToDelete = this.db.libraryItems.filter(li => libraryItemIds.includes(li.id))
+    const itemsToDelete = this.db.libraryItems.filter(li => libraryItemIds.includes(li.id))
     if (!itemsToDelete.length) {
       return res.sendStatus(404)
     }
     for (let i = 0; i < itemsToDelete.length; i++) {
+      const libraryItemPath = itemsToDelete[i].path
       Logger.info(`[LibraryItemController] Deleting Library Item "${itemsToDelete[i].media.metadata.title}"`)
       await this.handleDeleteLibraryItem(itemsToDelete[i])
+      if (hardDelete) {
+        Logger.info(`[LibraryItemController] Deleting library item from file system at "${libraryItemPath}"`)
+        await fs.remove(libraryItemPath).catch((error) => {
+          Logger.error(`[LibraryItemController] Failed to delete library item from file system at "${libraryItemPath}"`, error)
+        })
+      }
     }
     res.sendStatus(200)
   }
@@ -489,7 +505,9 @@ class LibraryItemController {
       return res.sendStatus(404)
     }
 
-    await fs.remove(libraryFile.metadata.path)
+    await fs.remove(libraryFile.metadata.path).catch((error) => {
+      Logger.error(`[LibraryItemController] Failed to delete library file at "${libraryFile.metadata.path}"`, error)
+    })
     req.libraryItem.removeLibraryFile(req.params.ino)
 
     if (req.libraryItem.media.removeFileWithInode(req.params.ino)) {