feat: add searchable fields to notification rules

gapitio · Apr 18, 2024 · 0cbf334 · 0cbf334
1 parent 8c3d005
commit 0cbf334
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/src/components/NotificationRuleList.vue b/src/components/NotificationRuleList.vue
@@ -499,11 +499,13 @@
         </v-btn-toggle>
         <v-spacer />
         <v-text-field
-          v-model="search"
+          v-model="query"
           append-icon="search"
-          :label="$t('Search')"
+          clearable
           single-line
           hide-details
+          :label="$t('Search')"
+          @change="setSearch"
         />
       </v-card-title>
 
@@ -834,6 +836,16 @@ export default {
           )
         })
     },
+    query: {
+      get() {
+        return this.$store.state.notificationRules.query
+          ? this.$store.state.notificationRules.query.q
+          : null
+      },
+      set(value) {
+        // FIXME: offer query suggestions to user here, in future
+      }
+    },
     pagination: {
       get() {
         return this.$store.getters['notificationRules/pagination']
@@ -941,6 +953,10 @@ export default {
     this.editedItem = Object.assign({}, this.defaultItem)
   },
   methods: {
+    setSearch(query) {
+      this.$store.dispatch('notificationRules/updateQuery', {q: query})
+      this.refresh_all()
+    },
     getNotificationRules() {
       this.$store.dispatch('notificationRules/getNotificationRules')
     },
@@ -1029,6 +1045,12 @@ export default {
       ])
       this.close_active()
     },
+    refresh_all() {
+      this.$store.dispatch('set', ['refresh', true])
+      setTimeout(() => {
+        this.$store.dispatch('set', ['refresh', false])
+      }, 300)
+    },
     save() {
       let sTimeStr = null
       let eTimeStr = null

diff --git a/src/store/modules/notificationRule.store.ts b/src/store/modules/notificationRule.store.ts
@@ -7,6 +7,8 @@ const state = {
 
   notification_rules: [],
 
+  query: {},
+
   pagination: {
     page: 1,
     rowsPerPage: 15,
@@ -20,6 +22,9 @@ const mutations = {
   SET_LOADING(state) {
     state.isLoading = true
   },
+  SET_SEARCH_QUERY(state, query): any {
+    state.query = query
+  },
   SET_NOTIFICATION_RULE(state, [notificationRules, total, pageSize]) {
     state.isLoading = false
     state.notification_rules = notificationRules
@@ -37,7 +42,6 @@ const mutations = {
 const actions = {
   getNotificationRules({commit, state}) {
     commit('SET_LOADING')
-
     let params = new URLSearchParams(state.query)
 
     // add server-side paging
@@ -70,7 +74,10 @@ const actions = {
   },
   setPagination({commit}, pagination) {
     commit('SET_PAGINATION', pagination)
-  }
+  },
+  updateQuery({commit}, query) {
+    commit('SET_SEARCH_QUERY', query)
+  },
 }
 
 const getters = {