export/import

src/components/settings_modal/tabs/filtering_tab.js

@@ -1,8 +1,15 @@
 import { cloneDeep } from 'lodash'
 import { mapState, mapActions } from 'pinia'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import { v4 as uuidv4 } from 'uuid';
 
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+import { useInterfaceStore } from 'src/stores/interface'
+
+import {
+  newImporter,
+  newExporter
+} from 'src/services/export_import/export_import.js'
+
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import UnitSetting from '../helpers/unit_setting.vue'
@@ -13,9 +20,10 @@ import Select from 'src/components/select/select.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
+const SUPPORTED_TYPES = new Set(['word', 'regexp', 'user', 'user_regexp'])
+
 const FilteringTab = {
   data () {
-    console.log(cloneDeep(useServerSideStorageStore().prefsStorage.simple.muteFilters))
     return {
       replyVisibilityOptions: ['all', 'following', 'self'].map(mode => ({
         key: mode,
@@ -27,7 +35,44 @@ const FilteringTab = {
         Object.entries(
           useServerSideStorageStore().prefsStorage.simple.muteFilters
         ).map(([k]) => [k, false])
-      )
+      ),
+      exportedFilter: null,
+      filterImporter: newImporter({
+        validator (parsed) {
+          if (Array.isArray(parsed)) return false
+          if (!SUPPORTED_TYPES.has(parsed.type)) return false
+          return true
+        },
+        onImport: (data) => {
+          const {
+            enabled = true,
+            expires = null,
+            hide = false,
+            name = '',
+            value = ''
+          } = data
+
+          this.createFilter({
+            enabled,
+            expires,
+            hide,
+            name,
+            value
+          })
+        },
+        onImportFailure (result) {
+          console.error('Failure importing filter:', result)
+          useInterfaceStore()
+            .pushGlobalNotice({
+              messageKey: 'settings.filter.import_failure',
+              level: 'error'
+            })
+        }
+      }),
+      filterExporter: newExporter({
+        filename: 'pleromafe_mute-filter',
+        getExportedObject: () => this.exportedFilter
+      })
     }
   },
   components: {
@@ -83,22 +128,29 @@ const FilteringTab = {
       }
       return valid
     },
-    createFilter () {
-      const filter = {
+    createFilter (filter = {
       type: 'word',
       value: '',
       name: 'New Filter',
       enabled: true,
       expires: null,
       hide: false,
-        order: this.muteFilters.length + 2
-      }
+    }) {
       const newId = uuidv4()
 
+      filter.order = this.muteFilters.length + 2
       this.muteFiltersDraftObject[newId] = filter
       this.setPreference({ path: 'simple.muteFilters.' + newId , value: filter })
       this.pushServerSideStorage()
     },
+    exportFilter(id) {
+      this.exportedFilter = { ...this.muteFiltersDraftObject[id] }
+      delete this.exportedFilter.order
+      this.filterExporter.exportData()
+    },
+    importFilter() {
+      this.filterImporter.importData()
+    },
     copyFilter (id) {
       const filter = { ...this.muteFiltersDraftObject[id] }
       const newId = uuidv4()
@@ -131,14 +183,12 @@ const FilteringTab = {
       }
       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
   watch: {

src/components/settings_modal/tabs/filtering_tab.scss

@@ -62,6 +62,10 @@
     max-width: 100%;
     justify-content: end;
   }
+
+  .total {
+    text-align: center;
+  }
 }
 
 

src/components/settings_modal/tabs/filtering_tab.vue

@@ -72,7 +72,6 @@
       </ul>
       <ul class="setting-list">
         <h2>{{ $t('settings.filter.mute_filter') }}</h2>
-        <li>
         <li>
           <BooleanSetting path="hideFilteredStatuses">
             {{ $t('settings.hide_muted_statuses') }}
@@ -254,21 +253,13 @@
                 </span>
               </div>
             </div>
-              <div class="filter-buttons">
-                <span
+            <div
               v-if="!checkRegexValid(filter[0])"
               class="alert error"
             >
               {{ $t('settings.filter.regexp_error') }}
-                </span>
-                <button
-                  class="copy-button button-default"
-                  type="button"
-                  @click="copyFilter(filter[0])"
-                >
-                  {{ $t('settings.filter.copy') }}
-                </button>
-                {{ ' ' }}
+            </div>
+            <div class="filter-buttons">
               <button
                 class="delete-button button-default -danger"
                 type="button"
@@ -276,7 +267,20 @@
               >
                 {{ $t('settings.filter.delete') }}
               </button>
-                {{ ' ' }}
+              <button
+                class="export-button button-default"
+                type="button"
+                @click="exportFilter(filter[0])"
+              >
+                {{ $t('settings.filter.export') }}
+              </button>
+              <button
+                class="copy-button button-default"
+                type="button"
+                @click="copyFilter(filter[0])"
+              >
+                {{ $t('settings.filter.copy') }}
+              </button>
               <button
                 class="save-button button-default"
                 :class="{ disabled: !muteFiltersDraftDirty[filter[0]] }"
@@ -288,7 +292,10 @@
               </button>
             </div>
           </div>
-            <div class="mute-filter">
+          <div class="mute-filter new-filter">
+            <span class="total">
+              {{ $t('settings.filter.count', { count: muteFiltersDraft.length }) }}
+            </span>
             <button
               class="add-button button-default"
               type="button"
@@ -296,9 +303,15 @@
             >
               {{ $t('settings.filter.new') }}
             </button>
+            <button
+              class="add-button button-default"
+              type="button"
+              @click="importFilter()"
+            >
+              {{ $t('settings.filter.import') }}
+            </button>
           </div>
         </div>
-        </li>
       </ul>
     </div>
   </div>

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -643,7 +643,7 @@ export default {
       parser (string) { return deserialize(string) },
       onImportFailure (result) {
         console.error('Failure importing style:', result)
-        this.$store.useInterfaceStore().pushGlobalNotice({ messageKey: 'settings.invalid_theme_imported', level: 'error' })
+        useInterfaceStore().pushGlobalNotice({ messageKey: 'settings.invalid_theme_imported', level: 'error' })
       },
       onImport
     })

src/i18n/en.json

@@ -432,6 +432,8 @@
       "export": "Export",
       "regexp_error": "Invalid Regular Expression",
       "never_expires": "Never",
+      "count": "{count} filter|{count} filters",
+      "import_failure": "The selected file is not a supported Pleroma filter.",
       "help": {
         "word": "Simple and RegExp filters test against post's content and subject.",
         "user": "User filter matches full user handle (user@domain) in the following: author, reply-to and mentions",