From 4972a7ea176c42837b043daa2f44e98ff0dafba3 Mon Sep 17 00:00:00 2001
From: chief <1092786+chief8192@users.noreply.github.com>
Date: Sun, 8 Nov 2020 16:00:09 -0500
Subject: [PATCH] Automatically jumps to the next photo when deleting while
 previewing.

---
 frontend/src/components/files/Preview.vue  | 22 +++++++++++++++++++++-
 frontend/src/components/prompts/Delete.vue | 19 +++++++++++++++++--
 frontend/src/store/index.js                |  5 ++++-
 frontend/src/store/mutations.js            |  9 +++++++++
 4 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/files/Preview.vue b/frontend/src/components/files/Preview.vue
index 1a8435b0..8c2bc294 100644
--- a/frontend/src/components/files/Preview.vue
+++ b/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
           }
         }
diff --git a/frontend/src/components/prompts/Delete.vue b/frontend/src/components/prompts/Delete.vue
index 96ec85ad..4ca0f5ab 100644
--- a/frontend/src/components/prompts/Delete.vue
+++ b/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
         }
 
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 40b56df4..5b6a1c77 100644
--- a/frontend/src/store/index.js
+++ b/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({
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
index 46aad6e6..4f1a1b2f 100644
--- a/frontend/src/store/mutations.js
+++ b/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
   }
 }