refs #2258 Display filters in settings

src/config/locales/en/translation.json

@@ -114,6 +114,9 @@
         "local": "Local Timeline",
         "public": "Public Timeline"
       }
+    },
+    "filters": {
+      "title": "Filters"
     }
   },
   "preferences": {

src/renderer/components/Settings.vue

@@ -28,6 +28,10 @@
             <icon name="align-left" class="icon" scale="1.3"></icon>
             <span>{{ $t('settings.timeline.title') }}</span>
           </el-menu-item>
+          <el-menu-item :index="`/${id()}/settings/filters`">
+            <icon name="filter" class="icon" scale="1.3"></icon>
+            <span>{{ $t('settings.filters.title') }}</span>
+          </el-menu-item>
         </el-menu>
       </el-aside>
       <el-main>

src/renderer/components/Settings/Filters.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="filters">
+    <h2>{{ $t('settings.filters.title') }}</h2>
+    <template>
+      <el-table
+        :data="filters"
+        tooltip-effect="dark"
+        empty-text="No filters"
+        style="width: 100%"
+        v-loading="filtersLoading"
+        :element-loading-background="backgroundColor"
+      >
+        <el-table-column prop="phrase" label="Keyword" width="180"> </el-table-column>
+        <el-table-column label="Context">
+          <template slot-scope="scope">
+            <span>{{ filters[scope.$index].context.join(',') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="expires_at" label="Expires" width="180"> </el-table-column>
+      </el-table>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Filters',
+  computed: {
+    ...mapState('Settings/Filters', {
+      filters: state => state.filters,
+      filtersLoading: state => state.filtersLoading
+    }),
+    ...mapState({
+      backgroundColor: state => state.App.theme.background_color
+    })
+  },
+  async created() {
+    await this.$store.dispatch('Settings/Filters/fetchFilters')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#filters {
+  .el-table /deep/ {
+    tr,
+    th,
+    td,
+    .el-table__empty-block {
+      background-color: var(--theme-background-color);
+      color: var(--theme-primary-color);
+      border-bottom: 1px solid var(--theme-border-color);
+    }
+  }
+
+  .el-table::before {
+    background-color: var(--theme-border-color);
+  }
+}
+</style>

src/renderer/router/index.ts

@@ -14,6 +14,7 @@ import GlobalHeader from '@/components/GlobalHeader.vue'
 import Settings from '@/components/Settings.vue'
 import SettingsGeneral from '@/components/Settings/General.vue'
 import SettingsTimeline from '@/components/Settings/Timeline.vue'
+import SettingsFilters from '@/components/Settings/Filters.vue'
 import TimelineSpace from '@/components/TimelineSpace.vue'
 import TimelineSpaceContentsHome from '@/components/TimelineSpace/Contents/Home.vue'
 import TimelineSpaceContentsNotifications from '@/components/TimelineSpace/Contents/Notifications.vue'
@@ -100,6 +101,10 @@ const router = new Router({
             {
               path: 'timeline',
               component: SettingsTimeline
+            },
+            {
+              path: 'filters',
+              component: SettingsFilters
             }
           ]
         },

src/renderer/store/Settings.ts

@@ -1,5 +1,6 @@
 import General, { GeneralState } from './Settings/General'
 import Timeline, { TimelineState } from './Settings/Timeline'
+import Filters, { FiltersState } from './Settings/Filters'
 import { Module, MutationTree } from 'vuex'
 import { RootState } from '@/store'
 
@@ -24,6 +25,7 @@ const mutations: MutationTree<SettingsState> = {
 type SettingsModule = {
   General: GeneralState
   Timeline: TimelineState
+  Filter: FiltersState
 }
 
 export type SettingsModuleState = SettingsModule & SettingsState
@@ -32,7 +34,8 @@ const Settings: Module<SettingsState, RootState> = {
   namespaced: true,
   modules: {
     General,
-    Timeline
+    Timeline,
+    Filters
   },
   state: state,
   mutations: mutations

src/renderer/store/Settings/Filters.ts

@@ -0,0 +1,54 @@
+import { Module, MutationTree, ActionTree } from 'vuex'
+import generator, { Entity } from 'megalodon'
+import { RootState } from '@/store'
+
+export type FiltersState = {
+  filters: Array<Entity.Filter>
+  filtersLoading: boolean
+}
+
+const state = (): FiltersState => ({
+  filters: [],
+  filtersLoading: false
+})
+
+export const MUTATION_TYPES = {
+  UPDATE_FILTERS: 'updateFilters',
+  CHANGE_LOADING: 'changeLoading'
+}
+
+export const mutations: MutationTree<FiltersState> = {
+  [MUTATION_TYPES.UPDATE_FILTERS]: (state, filters: Array<Entity.Filter>) => {
+    state.filters = filters
+  },
+  [MUTATION_TYPES.CHANGE_LOADING]: (state, loading: boolean) => {
+    state.filtersLoading = loading
+  }
+}
+export const actions: ActionTree<FiltersState, RootState> = {
+  fetchFilters: async ({ commit, rootState }): Promise<Array<Entity.Filter>> => {
+    const client = generator(
+      rootState.TimelineSpace.sns,
+      rootState.TimelineSpace.account.baseURL,
+      rootState.TimelineSpace.account.accessToken,
+      rootState.App.userAgent
+    )
+    try {
+      commit(MUTATION_TYPES.CHANGE_LOADING, true)
+      const res = await client.getFilters()
+      commit(MUTATION_TYPES.UPDATE_FILTERS, res.data)
+      return res.data
+    } finally {
+      commit(MUTATION_TYPES.CHANGE_LOADING, false)
+    }
+  }
+}
+
+const Filters: Module<FiltersState, RootState> = {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions
+}
+
+export default Filters