WIP history filters

Author: tiltec

src/history/components/HistoryList.vue

@@ -1,43 +1,83 @@
 <template>
-  <QInfiniteScroll
-    ref="infiniteScroll"
-    :disable="!canFetchPast"
-    @load="maybeFetchPast"
-  >
-    <KSpinner v-show="isPending" />
-    <HistoryEntry
-      v-for="entry in history"
-      :key="entry.id"
-      :entry="entry"
-    />
-    <div v-if="empty">
-      <QIcon name="fas fa-bug" />
-      {{ $t('HISTORY.NOTHING_HAPPENEND') }}
+  <div>
+    <div
+      v-if="history.length > 0"
+      class="row no-wrap items-center justify-between bg-white q-px-sm q-py-xs"
+    >
+      <div class="row q-gutter-sm">
+        <QSelect
+          v-model="historyType"
+          :options="historyTypeOptions"
+          emit-value
+          map-options
+          outlined
+          hide-bottom-space
+          dense
+        />
+        <QSelect
+          v-model="userId"
+          :options="usersOptions"
+          emit-value
+          map-options
+          outlined
+          hide-bottom-space
+          dense
+        />
+      </div>
+      <div class="text-caption q-ml-xs">
+        {{ filteredHistory.length }} / {{ history.length }}
+      </div>
     </div>
-    <template v-slot:loading>
-      <KSpinner />
-    </template>
-  </QInfiniteScroll>
+    <QInfiniteScroll
+      ref="infiniteScroll"
+      :disable="!canFetchPast"
+      @load="maybeFetchPast"
+    >
+      <KSpinner v-show="isPending" />
+      <HistoryEntry
+        v-for="entry in filteredHistory"
+        :key="entry.id"
+        :entry="entry"
+      />
+      <div v-if="empty">
+        <QIcon name="fas fa-bug" />
+        {{ $t('HISTORY.NOTHING_HAPPENEND') }}
+      </div>
+      <template v-slot:loading>
+        <KSpinner />
+      </template>
+    </QInfiniteScroll>
+  </div>
 </template>
 
 <script>
 import {
   QIcon,
   QInfiniteScroll,
+  QSelect,
 } from 'quasar'
 import paginationMixin from '@/utils/mixins/paginationMixin'
 import statusMixin from '@/utils/mixins/statusMixin'
+import bindRoute from '@/utils/mixins/bindRoute'
 import HistoryEntry from '@/history/components/HistoryEntry'
 import KSpinner from '@/utils/components/KSpinner'
 
 export default {
   components: {
     QIcon,
     QInfiniteScroll,
+    QSelect,
     HistoryEntry,
     KSpinner,
   },
-  mixins: [statusMixin, paginationMixin],
+  mixins: [
+    statusMixin,
+    paginationMixin,
+    bindRoute({
+      historyType: 'all',
+      userId: 'all',
+    }),
+  ],
   props: {
     history: { required: true, type: Array },
     status: { default: null, type: Object },
@@ -46,9 +86,57 @@ export default {
     empty () {
       return !this.history.length && !this.status.pending && !this.status.hasValidationErrors
     },
+    historyTypeOptions () {
+      return [
+        {
+          label: `all types (${this.history.length})`,
+          value: 'all',
+        },
+        ...(Object.entries(this.history.reduce((acc, cur) => {
+          acc[cur.typus] = 1 + (acc[cur.typus] || 0)
+          return acc
+        }, {})).map(([typus, count]) => ({
+          label: `${this.historyTypeMessage(typus)} (${count})`,
+          value: typus,
+        }))),
+      ]
+    },
+    usersOptions () {
+      return [
+        {
+          label: `all users (${this.history.length})`,
+          value: 'all',
+        },
+        ...(Object.entries(this.history.reduce((acc, cur) => {
+          cur.users.forEach(u => {
+            if (!acc[u.id]) acc[u.id] = { user: u, count: 0 }
+            acc[u.id].count = 1 + acc[u.id].count
+          })
+          return acc
+        }, {})).map(([_, { user, count }]) => ({
+          label: `${user.displayName} (${count})`,
+          value: user.id,
+        }))),
+      ]
+    },
+    filteredHistory () {
+      if (!this.history) return []
+      let filtered = this.history
+      if (this.historyType !== 'all') filtered = filtered.filter(e => this.historyType === e.typus)
+      if (this.userId !== 'all') filtered = filtered.filter(e => e.users.map(u => u.id).includes(parseInt(this.userId)))
+      return filtered
+    },
+  },
+  watch: {
+    '$route.query' (val) {
+      console.log('refetch', this.$route.params, this.$route.query)
+      this.$store.dispatch('history/fetch', { ...this.$route.params, ...this.$route.query })
+    },
+  },
+  methods: {
+    historyTypeMessage (typus) {
+      return this.$t('HISTORY.' + typus.toUpperCase(), { storeName: '...', name: '...', applicantName: '...' })
+    },
   },
 }
 </script>
-
-<style scoped lang="stylus">
-</style>

src/history/datastore/history.js

@@ -54,11 +54,12 @@ export default {
   },
   actions: {
     ...withMeta({
-      async fetch ({ dispatch, commit }, { groupId, placeId, userId }) {
+      async fetch ({ dispatch, commit }, { groupId, placeId, userId, historyType }) {
         const filters = filterTruthy({
           place: placeId,
           group: groupId,
           users: userId,
+          type: historyType,
         })
         const entries = await dispatch('pagination/extractCursor', historyAPI.list(filters))
         commit('update', entries)

src/utils/mixins/bindRoute.js

@@ -7,6 +7,7 @@ export default function bindRoute (params) {
     const def = params[key]
     mixin.computed[key] = {
       get () {
+        if (!this.$route) return def
         if (Object.prototype.hasOwnProperty.call(this.$route.query, key)) {
           return this.$route.query[key]
         }