Refactor vuex advanced search

src/components/search/AdvancedSearch.vue

@@ -24,13 +24,30 @@
     </p>
     <div class="panel-block">
       <div class="search-block">
-        <b-input class="search-projects" :value="searchString" @input="debounceSearchString" :placeholder="$t('search-placeholder')" type="search" icon="search" />
+        <b-input
+          class="search-projects"
+          v-model="searchString"
+          :placeholder="$t('search-placeholder')"
+          type="search"
+          icon="search"
+        />
+        <button class="button" @click="toggleFilterDisplay()">
+          <span class="icon">
+            <i class="fas fa-filter"></i>
+          </span>
+          <span>
+            {{filtersOpened ? $t('button-hide-filters') : $t('button-show-filters')}}
+          </span>
+          <span v-if="nbActiveFilters" class="nb-active-filters">
+            {{nbActiveFilters}}
+          </span>
+        </button>
       </div>
 
-      <b-collapse open>
+      <b-collapse :open="filtersOpened">
         <div class="filters">
           <div class="columns">
-            <div class="column filter">
+            <div class="column filter is-one-third">
               <div class="filter-label">
                 {{$t('tags')}}
               </div>
@@ -39,22 +56,16 @@
                   label="name" track-by="id" :multiple="true" :allPlaceholder="$t('all')" />
               </div>
             </div>
-            <div class="column filter">
-            </div>
-            <div class="column filter">
-            </div>
           </div>
         </div>
       </b-collapse>
-
-
     </div>
     <p class="panel-tabs">
       <a :class="{'is-active': activeTab === 'projects'}" @click="activeTab = 'projects'">
-        {{$t('projects')}} ({{this.projects.totalNbItems}})
+        {{$t('projects')}} ({{this.nbProjects}})
       </a>
       <a :class="{'is-active': activeTab === 'images'}" @click="activeTab = 'images'">
-        {{$t('images')}} ({{this.images.totalNbItems}})
+        {{$t('images')}} ({{this.nbImages}})
       </a>
     </p>
     <div class="panel-block">
@@ -66,14 +77,15 @@
       >
         <cytomine-table
           :collection="projectCollection"
+          :is-empty="nbEmptyFilters > 0"
           class="table-projects"
           :currentPage.sync="currentPage"
           :perPage.sync="perPage"
           :openedDetailed.sync="openedDetails"
           :sort.sync="sortField"
           :order.sync="sortOrder"
-          :data.sync="projects"
           :revision="revision"
+          @setCollectionSize="nbProjects = $event"
         >
           <template #default="{row: project}">
             <b-table-column field="currentUserRole" label="" centered width="1" sortable>
@@ -83,7 +95,7 @@
               />
             </b-table-column>
 
-            <b-table-column :label="$t('id')" width="20" :visible="currentUser.isDeveloper">
+            <b-table-column :label="$t('id')" width="20" :visible="currentUser.isDeveloper" field="id" sortable>
               {{project.id}}
             </b-table-column>
 
@@ -161,25 +173,26 @@
       >
         <cytomine-table
           :collection="imageCollection"
+          :is-empty="nbEmptyFilters > 0"
           :currentPage.sync="currentPage"
           :perPage.sync="perPage"
           :openedDetailed.sync="openedDetails"
           :sort.sync="sortField"
           :order.sync="sortOrder"
-          :data.sync="images"
           :revision="revision"
+          @setCollectionSize="nbImages = $event"
         >
           <template #default="{row: image}">
-            <b-table-column :label="$t('id')" width="20" :visible="currentUser.isDeveloper">
-              {{image.id}}
-            </b-table-column>
-
             <b-table-column :label="$t('overview')" width="100">
               <router-link :to="`/project/${image.project}/image/${image.id}`">
                 <img :src="image.thumb" class="image-overview">
               </router-link>
             </b-table-column>
 
+            <b-table-column :label="$t('id')" width="20" :visible="currentUser.isDeveloper" sortable field="id">
+              {{image.id}}
+            </b-table-column>
+
             <b-table-column
               :field="image.projectBlind ? 'blindedName' : 'instanceFilename'"
               :label="$t('name')"
@@ -192,7 +205,7 @@
             </b-table-column>
 
             <b-table-column
-              :field="'projectName'"
+              field="projectId"
               :label="$t('project')"
               width="200"
             >
@@ -244,23 +257,19 @@
           </template>
         </cytomine-table>
       </div>
-
-
     </div>
   </div>
 </div>
 </template>
 
 <script>
-import _ from 'lodash';
-import {get} from '@/utils/store-helpers';
+import {get, sync, syncMultiselectFilter} from '@/utils/store-helpers';
 import ImageName from '@/components/image/ImageName';
 import CytomineTable from '@/components/utils/CytomineTable';
 import ProjectDetails from '@/components/project/ProjectDetails';
 import ImageDetails from '@/components/image/ImageDetails';
 import CytomineMultiselect from '@/components/form/CytomineMultiselect';
 import {ImageInstanceCollection, ProjectCollection, TagCollection} from 'cytomine-client';
-import {getWildcardRegexp} from '@/utils/string-utils';
 import IconProjectMemberRole from '@/components/icons/IconProjectMemberRole';
 
 export default {
@@ -278,38 +287,45 @@ export default {
       loading: true,
       error: false,
 
-      searchString: '',
-      projects:[],
-      images: [],
-      activeTab: 'projects',
-      perPage: 10,
+      nbProjects: 0,
+      nbImages: 0,
 
-      selectedTags: [],
       availableTags:[],
-
-      currentPage: 1,
-      sortField: 'created',
-      sortOrder: 'desc',
-      openedDetails: [],
       revision: 0,
 
       excludedProperties: [
         'name',
         'imagesPreview',
         'lastActivity',
       ],
-
-
     };
   },
   methods: {
-    debounceSearchString: _.debounce(async function(value) {
-      this.searchString = value;
-    }, 500)
+    toggleFilterDisplay() {
+      this.filtersOpened = !this.filtersOpened;
+    }
   },
   computed: {
     currentUser: get('currentUser/user'),
 
+    activeTab: sync('advancedSearch/activeTab'),
+    currentPage: sync('advancedSearch/currentPage'),
+    perPage: sync('advancedSearch/perPage'),
+    sortField: sync('advancedSearch/sortField'),
+    sortOrder: sync('advancedSearch/sortOrder'),
+    openedDetails: sync('advancedSearch/openedDetails'),
+
+    filtersOpened: sync('advancedSearch/filtersOpened'),
+    searchString: sync('advancedSearch/searchString', {debounce: 500}),
+    selectedTags: syncMultiselectFilter('advancedSearch', 'selectedTags', 'availableTags'),
+
+    nbActiveFilters() {
+      return this.$store.getters['advancedSearch/nbActiveFilters'];
+    },
+    nbEmptyFilters() {
+      return this.$store.getters['advancedSearch/nbEmptyFilters'];
+    },
+
     pathSearchString() {
       return this.$route.params.searchString;
     },
@@ -319,12 +335,6 @@ export default {
     querySearchTags() {
       return this.$route.query.tags;
     },
-    regexp() {
-      return getWildcardRegexp(this.searchString);
-    },
-    lowCaseSearchString() {
-      return this.searchString.toLowerCase();
-    },
     projectCollection() {
       let collection = new ProjectCollection({
         withMembersCount: true,
@@ -362,9 +372,6 @@ export default {
       }
       return collection;
     },
-
-
-
   },
   watch: {
     pathSearchString(val) {
@@ -388,7 +395,7 @@ export default {
     },
   },
   async created() {
-    this.searchString = this.pathSearchString || this.querySearchString || '';
+    this.searchString = this.pathSearchString || this.querySearchString || this.searchString || '';
     try {
       this.availableTags = [{id: 'null', name: this.$t('no-tag')}, ...(await TagCollection.fetchAll()).array];
     }
@@ -427,4 +434,9 @@ export default {
   margin-bottom: 0.4em;
 }
 
+.image-overview {
+  max-height: 4rem;
+  max-width: 10rem;
+}
+
 </style>

src/components/utils/CytomineTable.vue

@@ -141,6 +141,9 @@ export default {
     internalPerPage(perPage) {
       this.$emit('update:perPage', perPage);
     },
+    total(total) {
+      this.$emit('setCollectionSize', total);
+    },
     revision() {
       this.fetchPage();
     },
@@ -177,7 +180,6 @@ export default {
         });
 
         this.$emit('update:checkedRows', this.internalCheckedRows);
-        this.$emit('update:data', data);
       }
       catch(error) {
         if(this.internalCurrentPage > 1) { // error may be due to the page number (not enough elements) => retry on first page

src/store/modules/advanced-search.js

@@ -0,0 +1,95 @@
+/*
+* Copyright (c) 2009-2022. Authors: see NOTICE file.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+function getDefaultState() {
+  return {
+    searchString: '',
+
+    filtersOpened: false,
+    filters: {
+      selectedTags: null,
+    },
+
+    activeTab: 'projects',
+    currentPage: 1,
+    perPage: 10,
+    sortField: 'name',
+    sortOrder: 'asc',
+    openedDetails: []
+  };
+}
+
+export default {
+  namespaced: true,
+
+  state: getDefaultState(),
+
+  mutations: {
+    resetState(state) {
+      Object.assign(state, getDefaultState());
+    },
+
+    setSearchString(state, searchString) {
+      state.searchString = searchString;
+    },
+
+    setFiltersOpened(state, value) {
+      state.filtersOpened = value;
+    },
+
+    setFilter(state, {filterName, propValue}) {
+      state.filters[filterName] = propValue;
+    },
+
+    setCurrentPage(state, page) {
+      state.currentPage = page;
+    },
+
+    setPerPage(state, perPage) {
+      state.perPage = perPage;
+    },
+
+    setSortField(state, field) {
+      state.sortField = field;
+    },
+
+    setSortOrder(state, order) {
+      state.sortOrder = order;
+    },
+
+    setOpenedDetails(state, value) {
+      state.openedDetails = value;
+    },
+
+    setActiveTab(state, tab) {
+      state.activeTab = tab;
+      let defaultState = getDefaultState();
+      state.sortField = defaultState.sortField;
+      state.sortOrder = defaultState.sortOrder;
+      state.currentPage = defaultState.currentPage;
+    }
+  },
+
+  getters: {
+    nbActiveFilters: state => {
+      return Object.values(state.filters).filter(val => val).length; // count the number of not null values
+    },
+
+    nbEmptyFilters: state => {
+      return Object.values(state.filters).filter(val => val && val.length === 0).length;
+    }
+  }
+};

src/store/store.js

@@ -22,6 +22,7 @@ import currentProject from './modules/current-project.js';
 import ontologies from './modules/ontologies.js';
 import listProjects from './modules/list-projects.js';
 import listSoftware from './modules/list-software.js';
+import advancedSearch from './modules/advanced-search.js';
 
 Vue.use(Vuex);
 let store = new Vuex.Store({
@@ -32,6 +33,7 @@ let store = new Vuex.Store({
       commit('ontologies/resetState');
       commit('listProjects/resetState');
       commit('listSoftware/resetState');
+      commit('advancedSearch/resetState');
       for(let key in state.projects) {
         this.unregisterModule(['projects', key]);
       }
@@ -43,6 +45,7 @@ let store = new Vuex.Store({
     ontologies,
     listProjects,
     listSoftware,
+    advancedSearch,
     projects: {
       namespaced: true
     }