refs #2258 Divide filter form from edit

src/config/locales/en/translation.json

@@ -117,26 +117,26 @@
     },
     "filters": {
       "title": "Filters",
+      "form": {
+        "phrase": "Keyword or phrase",
+        "expire": "Expire after",
+        "context": "Filter contexts",
+        "irreversible": "Drop instead of hide",
+        "whole_word": "Whole word",
+        "submit": "Update",
+        "cancel": "Cancel"
+      },
+      "expires": {
+        "never": "Never",
+        "30_minutes": "30 minutes",
+        "1_hour": "1 hour",
+        "6_hours": "6 hours",
+        "12_hours": "12 hours",
+        "1_day": "1 day",
+        "1_week": "1 week"
+      },
       "edit": {
-        "title": "Edit",
-        "form": {
-          "phrase": "Keyword or phrase",
-          "expire": "Expire after",
-          "context": "Filter contexts",
-          "irreversible": "Drop instead of hide",
-          "whole_word": "Whole word",
-          "submit": "Update",
-          "cancel": "Cancel"
-        },
-        "expires": {
-          "never": "Never",
-          "30_minutes": "30 minutes",
-          "1_hour": "1 hour",
-          "6_hours": "6 hours",
-          "12_hours": "12 hours",
-          "1_day": "1 day",
-          "1_week": "1 week"
-        }
+        "title": "Edit"
       },
       "delete": {
         "title": "Delete",

src/renderer/components/Settings/Filters/Edit.vue

@@ -1,152 +1,28 @@
 <template>
   <div id="edit_filter">
     <h2>{{ $t('settings.filters.edit.title') }}</h2>
-    <el-form ref="form" class="section" label-width="200px" label-position="right" size="medium">
-      <el-form-item :label="$t('settings.filters.edit.form.phrase')">
-        <el-input v-model="filterPhrase"></el-input>
-      </el-form-item>
-      <el-form-item :label="$t('settings.filters.edit.form.expire')">
-        <el-select v-model="filterExpire" value-key="value">
-          <el-option v-for="exp in expires" :key="exp.value" :label="exp.label" :value="exp"> </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="$t('settings.filters.edit.form.context')">
-        <template>
-          <el-checkbox-group v-model="filterContexts">
-            <el-checkbox label="home"></el-checkbox>
-            <el-checkbox label="notifications"></el-checkbox>
-            <el-checkbox label="public"></el-checkbox>
-            <el-checkbox label="thread"></el-checkbox>
-            <el-checkbox label="account"></el-checkbox>
-          </el-checkbox-group>
-        </template>
-      </el-form-item>
-      <el-form-item>
-        <el-checkbox v-model="filterIrreversible">{{ $t('settings.filters.edit.form.irreversible') }}</el-checkbox>
-      </el-form-item>
-      <el-form-item>
-        <el-checkbox v-model="filterWholeWord">{{ $t('settings.filters.edit.form.whole_word') }}</el-checkbox>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit" v-loading="loading">{{ $t('settings.filters.edit.form.submit') }}</el-button>
-        <el-button @click="cancel">{{ $t('settings.filters.edit.form.cancel') }}</el-button>
-      </el-form-item>
-    </el-form>
+    <FilterForm v-model="filter" @cancel="cancel" @onSubmit="onSubmit" :loading="loading"> </FilterForm>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import FilterForm from './form'
 
 export default {
   name: 'EditFilter',
   props: ['filter_id'],
-  data() {
-    return {
-      expires: [
-        {
-          label: this.$t('settings.filters.edit.expires.never'),
-          value: null
-        },
-        {
-          label: this.$t('settings.filters.edit.expires.30_minutes'),
-          value: 60 * 30
-        },
-        {
-          label: this.$t('settings.filters.edit.expires.1_hour'),
-          value: 3600
-        },
-        {
-          label: this.$t('settings.filters.edit.expires.6_hours'),
-          value: 3600 * 6
-        },
-        {
-          label: this.$t('settings.filters.edit.expires.12_hours'),
-          value: 3600 * 12
-        },
-        {
-          label: this.$t('settings.filters.edit.expires.1_day'),
-          value: 3600 * 24
-        },
-        {
-          label: this.$t('settings.filters.edit.expires.1_week'),
-          value: 3600 * 24 * 7
-        }
-      ]
-    }
-  },
+  components: { FilterForm },
   computed: {
     ...mapState('Settings/Filters/Edit', {
       loading: state => state.loading
     }),
-    filterPhrase: {
+    filter: {
       get() {
-        if (this.$store.state.Settings.Filters.Edit.filter !== null) {
-          return this.$store.state.Settings.Filters.Edit.filter.phrase
-        } else {
-          return ''
-        }
+        return this.$store.state.Settings.Filters.Edit.filter
       },
       set(value) {
-        this.$store.dispatch('Settings/Filters/Edit/editFilter', {
-          phrase: value
-        })
-      }
-    },
-    filterExpire: {
-      get() {
-        if (this.$store.state.Settings.Filters.Edit.filter !== null) {
-          return this.$store.state.Settings.Filters.Edit.filter.expires_at
-        } else {
-          return null
-        }
-      },
-      set(value) {
-        this.$store.dispatch('Settings/Filters/Edit/editFilter', {
-          expires_at: value
-        })
-      }
-    },
-    filterContexts: {
-      get() {
-        if (this.$store.state.Settings.Filters.Edit.filter !== null) {
-          return this.$store.state.Settings.Filters.Edit.filter.context
-        } else {
-          return []
-        }
-      },
-      set(value) {
-        this.$store.dispatch('Settings/Filters/Edit/editFilter', {
-          context: value
-        })
-      }
-    },
-    filterIrreversible: {
-      get() {
-        if (this.$store.state.Settings.Filters.Edit.filter !== null) {
-          return this.$store.state.Settings.Filters.Edit.filter.irreversible
-        } else {
-          return false
-        }
-      },
-      set(value) {
-        this.$store.dispatch('Settings/Filters/Edit/editFilter', {
-          irreversible: value
-        })
-      }
-    },
-    filterWholeWord: {
-      get() {
-        if (this.$store.state.Settings.Filters.Edit.filter !== null) {
-          return this.$store.state.Settings.Filters.Edit.filter.whole_word
-        } else {
-          return false
-        }
-      },
-      set(value) {
-        this.$store.dispatch('Settings/Filters/Edit/editFilter', {
-          whole_word: value
-        })
+        this.$store.dispatch('Settings/Filters/Edit/editFilter', value)
       }
     }
   },

src/renderer/components/Settings/Filters/form.vue

@@ -0,0 +1,152 @@
+<template>
+  <el-form ref="form" class="section" label-width="200px" label-position="right" size="medium">
+    <el-form-item :label="$t('settings.filters.form.phrase')">
+      <el-input v-model="filterPhrase"></el-input>
+    </el-form-item>
+    <el-form-item :label="$t('settings.filters.form.expire')">
+      <el-select v-model="filterExpire" value-key="value">
+        <el-option v-for="exp in expires" :key="exp.value" :label="exp.label" :value="exp"> </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item :label="$t('settings.filters.form.context')">
+      <template>
+        <el-checkbox-group v-model="filterContext">
+          <el-checkbox label="home"></el-checkbox>
+          <el-checkbox label="notifications"></el-checkbox>
+          <el-checkbox label="public"></el-checkbox>
+          <el-checkbox label="thread"></el-checkbox>
+          <el-checkbox label="account"></el-checkbox>
+        </el-checkbox-group>
+      </template>
+    </el-form-item>
+    <el-form-item>
+      <el-checkbox v-model="filterIrreversible">{{ $t('settings.filters.form.irreversible') }}</el-checkbox>
+    </el-form-item>
+    <el-form-item>
+      <el-checkbox v-model="filterWholeWord">{{ $t('settings.filters.form.whole_word') }}</el-checkbox>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit" v-loading="loading">{{ $t('settings.filters.form.submit') }}</el-button>
+      <el-button @click="cancel">{{ $t('settings.filters.form.cancel') }}</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'FilterForm',
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      expires: [
+        {
+          label: this.$t('settings.filters.expires.never'),
+          value: null
+        },
+        {
+          label: this.$t('settings.filters.expires.30_minutes'),
+          value: 60 * 30
+        },
+        {
+          label: this.$t('settings.filters.expires.1_hour'),
+          value: 3600
+        },
+        {
+          label: this.$t('settings.filters.expires.6_hours'),
+          value: 3600 * 6
+        },
+        {
+          label: this.$t('settings.filters.expires.12_hours'),
+          value: 3600 * 12
+        },
+        {
+          label: this.$t('settings.filters.expires.1_day'),
+          value: 3600 * 24
+        },
+        {
+          label: this.$t('settings.filters.expires.1_week'),
+          value: 3600 * 24 * 7
+        }
+      ]
+    }
+  },
+  computed: {
+    filter: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    },
+    filterPhrase: {
+      get() {
+        return this.filter.phrase
+      },
+      set(value) {
+        this.filter = Object.assign({}, this.filter, {
+          phrase: value
+        })
+      }
+    },
+    filterExpire: {
+      get() {
+        return this.filter.expires_at
+      },
+      set(value) {
+        this.filter = Object.assign({}, this.filter, {
+          expires_at: value
+        })
+      }
+    },
+    filterContext: {
+      get() {
+        return this.filter.context
+      },
+      set(value) {
+        this.filter = Object.assign({}, this.filter, {
+          context: value
+        })
+      }
+    },
+    filterIrreversible: {
+      get() {
+        return this.filter.irreversible
+      },
+      set(value) {
+        this.filter = Object.assign({}, this.filter, {
+          irreversible: value
+        })
+      }
+    },
+    filterWholeWord: {
+      get() {
+        return this.filter.whole_word
+      },
+      set(value) {
+        this.filter = Object.assign({}, this.filter, {
+          whole_word: value
+        })
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.$emit('cancel')
+    },
+    onSubmit() {
+      this.$emit('onSubmit')
+    }
+  }
+}
+</script>
+
+<style lang="scss"></style>

src/renderer/store/Settings/Filters/Edit.ts

@@ -3,12 +3,19 @@ import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'
 
 export type EditFiltersState = {
-  filter: Entity.Filter | null
+  filter: Entity.Filter
   loading: boolean
 }
 
 const state = (): EditFiltersState => ({
-  filter: null,
+  filter: {
+    id: '',
+    phrase: '',
+    expires_at: null,
+    context: [],
+    irreversible: false,
+    whole_word: true
+  } as Entity.Filter,
   loading: false
 })