Update selectionModeSelections data object to be reactive

kommunarr · Sep 26, 2023 · d8bffc6 · d8bffc6
1 parent b0d40b7
commit d8bffc6
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 18 deletions.
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -285,6 +285,10 @@ export default defineComponent({
       return this.$store.getters.getSelectAllInSelectionModeTriggered
     },
 
+    getUnselectAllInSelectionModeTriggered: function () {
+      return this.$store.getters.getUnselectAllInSelectionModeTriggered
+    },
+
     videoDropdownOptionArguments: function () {
       const count = 1
       const videoComponents = [this]
@@ -316,6 +320,9 @@ export default defineComponent({
       if (this.selectionModeSelectionId === 0) {
         this.addToOrRemoveFromSelectionModeSelections()
       }
+    },
+    getUnselectAllInSelectionModeTriggered() {
+      this.selectionModeSelectionId = 0
     }
   },
   created: function () {

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
@@ -104,9 +104,13 @@ export default defineComponent({
       return this.$store.getters.getSelectionModeSelections
     },
 
+    selectionModeSelectionValues: function() {
+      return Object.values(this.selectionModeSelections.selections)
+    },
+
     videoDropdownOptionArguments: function() {
-      const count = this.selectionModeSelections.count
-      const videoComponents = Object.values(this.selectionModeSelections.selections)
+      const videoComponents = this.selectionModeSelectionValues
+      const count = videoComponents.length
       const videosWithChannelIdsCount = videoComponents.filter((videoComponent) => videoComponent.channelId !== null).length
 
       const watchedVideosCount = videoComponents.filter((videoComponent) => videoComponent.watched).length

diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
@@ -65,7 +65,7 @@
       <ft-icon-button
         v-if="isSelectionModeEnabled"
         class="navIcon selectionModeOptionsButton"
-        :class="{ navIconDisabled: selectionModeSelections.count === 0 }"
+        :class="{ navIconDisabled: selectionModeSelectionValues.length === 0 }"
         :icon="['fas', 'ellipsis-v']"
         :title="$t('More Options')"
         theme="base-nav-icon"

diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
@@ -1,7 +1,7 @@
 import fs from 'fs/promises'
 import path from 'path'
 import i18n from '../../i18n/index'
-import { set as vueSet } from 'vue'
+import { set as vueSet, del as vueDel } from 'vue'
 
 import { IpcChannels } from '../../../constants'
 import { pathExists } from '../../helpers/filesystem'
@@ -46,9 +46,10 @@ const state = {
   externalPlayerCmdArguments: {},
   isSelectionModeEnabled: false,
   selectAllVideosInSelectionModeKey: 0,
+  unselectAllVideosInSelectionModeKey: 0,
   // Vuex doesn't support Maps, so we have to use an object here instead
   // TODO: switch to a Map during the Pinia migration
-  selectionModeSelections: { count: 0, selections: {} },
+  selectionModeSelections: { index: 0, selections: {} },
 }
 
 const getters = {
@@ -128,6 +129,10 @@ const getters = {
     return state.selectAllVideosInSelectionModeKey
   },
 
+  getUnselectAllInSelectionModeTriggered () {
+    return state.unselectAllVideosInSelectionModeKey
+  },
+
   getIsIndexSelectedInSelectionMode: (state) => (index) => {
     return Object.hasOwn(state.selectionModeSelections.selections, index)
   },
@@ -508,7 +513,7 @@ const actions = {
   },
 
   clearSelectionModeSelections ({ commit }) {
-    commit('setSelectionModeSelections', { count: 0, selections: {} })
+    commit('setSelectionModeSelections', { index: 0, selections: {} })
   },
 
   addToSelectionModeSelections ({ commit }, selection) {
@@ -790,25 +795,18 @@ const mutations = {
   },
 
   setSelectionModeSelections (state, selectionModeSelections) {
-    Object.values(state.selectionModeSelections.selections).forEach((videoComponent) => {
-      videoComponent.selectionModeSelectionId = 0
-    })
-
-    // clears up rare cases of Vue not removing selection styling
-    document.querySelectorAll('.selectedInSelectionMode')?.forEach((match) =>
-      match.classList.remove('selectedInSelectionMode'))
-
     state.selectionModeSelections = selectionModeSelections
+    state.unselectAllVideosInSelectionModeKey++
   },
 
   addToSelectionModeSelections (state, { selection, callback }) {
-    state.selectionModeSelections.selections[++state.selectionModeSelections.count] = selection
-    callback(state.selectionModeSelections.count)
+    vueSet(state.selectionModeSelections.selections,
+      ++state.selectionModeSelections.index, selection)
+    callback(state.selectionModeSelections.index)
   },
 
   removeFromSelectionModeSelections (state, { selectionIndex }) {
-    delete state.selectionModeSelections.selections[selectionIndex]
-    state.selectionModeSelections.count--
+    vueDel(state.selectionModeSelections.selections, selectionIndex)
   },
 }