more robust filter editing

src/components/settings_modal/tabs/filtering_tab.js

@@ -1,4 +1,4 @@
-import { throttle } from 'lodash'
+import { throttle, cloneDeep } from 'lodash'
 import { mapState, mapActions } from 'pinia'
 import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import { v4 as uuidv4 } from 'uuid';
@@ -14,12 +14,19 @@ import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 const FilteringTab = {
   data () {
+    console.log(cloneDeep(useServerSideStorageStore().prefsStorage.simple.muteFilters))
     return {
       replyVisibilityOptions: ['all', 'following', 'self'].map(mode => ({
         key: mode,
         value: mode,
         label: this.$t(`settings.reply_visibility_${mode}`)
-      }))
+      })),
+      muteFiltersDraftObject: cloneDeep(useServerSideStorageStore().prefsStorage.simple.muteFilters),
+      muteFiltersDraftDirty: Object.fromEntries(
+        Object.entries(
+          useServerSideStorageStore().prefsStorage.simple.muteFilters
+        ).map(([k]) => [k, false])
+      )
     }
   },
   components: {
@@ -38,12 +45,13 @@ const FilteringTab = {
         muteFilters: store => Object.entries(store.prefsStorage.simple.muteFilters),
         muteFiltersObject: store => store.prefsStorage.simple.muteFilters
       }
-    )
+    ),
+    muteFiltersDraft () {
+      return Object.entries(this.muteFiltersDraftObject)
+    }
   },
   methods: {
-    ...mapActions(useServerSideStorageStore, ['unsetPreference']),
+    ...mapActions(useServerSideStorageStore, ['setPreference', 'unsetPreference', 'pushServerSideStorage']),
-    pushServerSideStorage: throttle(() => useServerSideStorageStore().pushServerSideStorage(), 500),
-    setPreference: throttle(x => useServerSideStorageStore().setPreference(x), 500),
     getDatetimeLocal (timestamp) {
       const date = new Date(timestamp)
       const datetime = [
@@ -84,22 +92,25 @@ const FilteringTab = {
       }
       const newId = uuidv4()
 
+      this.muteFiltersDraftObject[newId] = filter
       this.setPreference({ path: 'simple.muteFilters.' + newId , value: filter })
       this.pushServerSideStorage()
     },
     copyFilter (id) {
-      const filter = { ...this.muteFiltersObject[id] }
+      const filter = { ...this.muteFiltersDraftObject[id] }
       const newId = uuidv4()
 
+      this.muteFiltersDraftObject[newId] = filter
       this.setPreference({ path: 'simple.muteFilters.' + newId , value: filter })
       this.pushServerSideStorage()
     },
     deleteFilter (id) {
+      delete this.muteFiltersDraftObject[id]
       this.unsetPreference({ path: 'simple.muteFilters.' + id , value: null })
       this.pushServerSideStorage()
     },
     updateFilter(id, field, value) {
-      const filter = { ...this.muteFiltersObject[id] }
+      const filter = { ...this.muteFiltersDraftObject[id] }
       if (field === 'expires-never') {
         // filter[field] = value
         if (!value) {
@@ -115,8 +126,15 @@ const FilteringTab = {
       } else {
         filter[field] = value
       }
-      this.setPreference({ path: 'simple.muteFilters.' + id , value: filter })
+      this.muteFiltersDraftObject[id] = filter
+      this.muteFiltersDraftDirty[id] = true
+      console.log(this.muteFiltersDraftDirty)
+    },
+    saveFilter(id) {
+      this.setPreference({ path: 'simple.muteFilters.' + id , value: this.muteFiltersDraftObject[id] })
       this.pushServerSideStorage()
+      this.muteFiltersDraftDirty[id] = false
+      console.log(this.muteFiltersDraftDirty)
     }
   },
   // Updating nested properties

src/components/settings_modal/tabs/filtering_tab.vue

@@ -76,7 +76,7 @@
             <div
               class="mute-filter"
               :style="{ order: filter[1].order }"
-              v-for="filter in muteFilters"
+              v-for="filter in muteFiltersDraft"
               :key="filter[0]"
             >
               <div class="filter-name">
@@ -201,6 +201,16 @@
                 >
                   {{ $t('settings.filter.delete') }}
                 </button>
+                {{ ' ' }}
+                <button
+                  class="save-button button-default"
+                  :class="{ disabled: !muteFiltersDraftDirty[filter[0]] }"
+                  :disabled="!muteFiltersDraftDirty[filter[0]]"
+                  type="button"
+                  @click="saveFilter(filter[0])"
+                >
+                  {{ $t('settings.filter.save') }}
+                </button>
               </div>
             </div>
             <div class="mute-filter">

src/i18n/en.json

@@ -422,6 +422,7 @@
       "expires": "Expires",
       "expired": "Expired",
       "copy": "Copy filter",
+      "save": "Save filter",
       "delete": "Remove filter",
       "new": "Create filter",
       "regexp_error": "Invalid Regular Expression",