Automatically jumps to the next photo when deleting while previewing.

frontend/src/components/files/Preview.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapMutations, mapState } from 'vuex'
 import url from '@/utils/url'
 import { baseURL, resizePreview } from '@/utils/constants'
 import { files as api } from '@/api'
@@ -143,8 +143,16 @@ export default {
     this.$store.commit('setPreviewMode', false)
   },
   methods: {
+    ...mapMutations([
+      'setPostDeletionLink',
+      'setCurrentListingIndex',
+      'setDeletionOccurred'
+    ]),
     back () {
       this.$store.commit('setPreviewMode', false)
+      this.setPostDeletionLink(null)
+      this.setCurrentListingIndex(-1)
+      this.setDeletionOccurred(false)
       let uri = url.removeLastDir(this.$route.path) + '/'
       this.$router.push({ path: uri })
     },
@@ -188,11 +196,20 @@ export default {
       this.previousLink = ''
       this.nextLink = ''
 
+      // Before continuing, splice out the prior current index if a deletion
+      // occurred.
+      if (this.$store.state.deletionOccurred) {
+        this.listing.splice(this.$store.state.currentListingIndex, 1)
+        this.setDeletionOccurred(false)
+      }
+
       for (let i = 0; i < this.listing.length; i++) {
         if (this.listing[i].name !== this.name) {
           continue
         }
 
+        this.setCurrentListingIndex(i)
+
         for (let j = i - 1; j >= 0; j--) {
           if (mediaTypes.includes(this.listing[j].type)) {
             this.previousLink = this.listing[j].url
@@ -200,9 +217,12 @@ export default {
           }
         }
 
+        this.setPostDeletionLink(null)
+
         for (let j = i + 1; j < this.listing.length; j++) {
           if (mediaTypes.includes(this.listing[j].type)) {
             this.nextLink = this.listing[j].url
+            this.setPostDeletionLink(this.nextLink)
             break
           }
         }

frontend/src/components/prompts/Delete.vue

@@ -30,7 +30,11 @@ export default {
     ...mapState(['req', 'selected'])
   },
   methods: {
-    ...mapMutations(['closeHovers']),
+    ...mapMutations([
+      'closeHovers',
+      'setPostDeletionLink',
+      'setDeletionOccurred'
+    ]),
     submit: async function () {
       this.closeHovers()
       buttons.loading('delete')
@@ -39,7 +43,18 @@ export default {
         if (!this.isListing) {
           await api.remove(this.$route.path)
           buttons.success('delete')
-          this.$router.push({ path: url.removeLastDir(this.$route.path) + '/' })
+          let path = url.removeLastDir(this.$route.path) + '/'
+
+          // Indicate a deletion occurred to ensure the current index gets
+          // spliced out in Preview.vue.
+          this.setDeletionOccurred(true)
+
+          // Jump to the next listing item, if there is one.
+          if (this.$store.state.postDeletionLink != null) {
+            path = this.$store.state.postDeletionLink;
+          }
+
+          this.$router.push({ path: path })
           return
         }
 

frontend/src/store/index.js

@@ -24,7 +24,10 @@ const state = {
   showShell: false,
   showMessage: null,
   showConfirm: null,
-  previewMode: false
+  previewMode: false,
+  postDeletionLink: null,
+  currentListingIndex: -1,
+  deletionOccurred: false
 }
 
 export default new Vuex.Store({

frontend/src/store/mutations.js

@@ -86,6 +86,15 @@ const mutations = {
   },
   setPreviewMode(state, value) {
     state.previewMode = value
+  },
+  setPostDeletionLink: (state, value) => {
+    state.postDeletionLink = value
+  },
+  setCurrentListingIndex: (state, value) => {
+    state.currentListingIndex = value
+  },
+  setDeletionOccurred: (state, value) => {
+    state.deletionOccurred = value
   }
 }