Resolve "Add number of filters and sorts in the view header"

.gitignore

@@ -91,3 +91,9 @@ __pycache__
 *.egg-info
 
 docker-compose.override.yml
+
+# python virtual envs
+venv/
+
+# intellij config files
+*.iml

changelog.md

@@ -5,6 +5,7 @@
 * Prevent websocket reconnect loop when the authentication fails.
 * Prevent websocket reconnect when the connection closes without error.
 * Added gunicorn worker test to the CI pipeline.
+* Show the number of filters and sorts active in the header of a grid view.
 
 ## Released (2021-03-01)
 

web-frontend/modules/database/components/view/ViewFilter.vue

@@ -9,7 +9,7 @@
       @click="$refs.context.toggle($refs.contextLink, 'bottom', 'left', 4)"
     >
       <i class="header__filter-icon fas fa-filter"></i>
-      Filter
+      {{ filterTitle }}
     </a>
     <ViewFilterContext
       ref="context"
@@ -41,6 +41,18 @@ export default {
       required: true,
     },
   },
+  computed: {
+    filterTitle() {
+      const numberOfFilters = this.view.filters.length
+      if (numberOfFilters === 0) {
+        return 'Filter'
+      } else if (numberOfFilters === 1) {
+        return `${numberOfFilters} Filter`
+      } else {
+        return `${numberOfFilters} Filters`
+      }
+    },
+  },
   beforeMount() {
     this.$bus.$on('view-filter-created', this.filterCreated)
   },

web-frontend/modules/database/components/view/ViewSort.vue

@@ -9,7 +9,7 @@
       @click="$refs.context.toggle($refs.contextLink, 'bottom', 'left', 4)"
     >
       <i class="header__filter-icon fas fa-sort"></i>
-      Sort
+      {{ sortTitle }}
     </a>
     <ViewSortContext
       ref="context"
@@ -41,5 +41,17 @@ export default {
       required: true,
     },
   },
+  computed: {
+    sortTitle() {
+      const numberOfSortings = this.view.sortings.length
+      if (numberOfSortings === 0) {
+        return 'Sort'
+      } else if (numberOfSortings === 1) {
+        return `${numberOfSortings} Sort`
+      } else {
+        return `${numberOfSortings} Sorts`
+      }
+    },
+  },
 }
 </script>

web-frontend/modules/database/components/view/grid/GridViewHide.vue

@@ -9,13 +9,7 @@
       @click="$refs.context.toggle($refs.contextLink, 'bottom', 'left', 4)"
     >
       <i class="header__filter-icon fas fa-eye-slash"></i>
-      <span v-if="hiddenFields.length === 1"
-        >{{ hiddenFields.length }} hidden field</span
-      >
-      <span v-else-if="hiddenFields.length > 1"
-        >{{ hiddenFields.length }} hidden fields</span
-      >
-      <span v-else>Hide fields</span>
+      {{ hiddenFieldsTitle }}
     </a>
     <GridViewHideContext
       ref="context"
@@ -52,6 +46,16 @@ export default {
         return !exists || (exists && this.fieldOptions[field.id].hidden)
       })
     },
+    hiddenFieldsTitle() {
+      const numberOfHiddenFields = this.hiddenFields.length
+      if (numberOfHiddenFields === 0) {
+        return 'Hide Fields'
+      } else if (numberOfHiddenFields === 1) {
+        return `${numberOfHiddenFields} hidden field`
+      } else {
+        return `${numberOfHiddenFields} hidden fields`
+      }
+    },
     ...mapGetters({
       fieldOptions: 'view/grid/getAllFieldOptions',
     }),