Merge pull request #4889 from sboursen-scinote/sb_SCI-7585

FIX: Clear/Close filter change - Inventory/Items filter [SCI-7585]

app/assets/stylesheets/repository/filters.scss

@@ -69,7 +69,7 @@
         @include font-h2;
       }
 
-      .clear-filters-btn {
+      .close {
         margin-left: auto;
       }
     }
@@ -120,6 +120,10 @@
       padding: 1em;
 
       .apply-button {
+        margin-left: 8px;
+      }
+
+      .clear-filters-btn {
         margin-left: auto;
       }
 
@@ -272,6 +276,13 @@
           margin-left: 0;
           margin-top: .5em;
         }
+
+        .clear-filters-btn {
+          margin-left: 0;
+          margin-top: .5em;
+          padding-left: 38px;
+          padding-right: 38px;
+        }
       }
     }
   }

app/javascript/packs/vue/repository_filter.js

@@ -120,7 +120,12 @@ window.initRepositoryFilter = () => {
         this.reloadDataTable();
       },
       clearFilters() {
-        this.filters = [];
+        this.filters = this.filters
+          .map(filter => {
+            const newFilter = { ...filter };
+            newFilter.data["parameters"] = {};
+            return newFilter;
+          });
         this.filterName = null;
         this.dataTableElement.removeAttr('data-repository-filter-json');
         $('#modalSaveRepositoryTableFilter').data('repositoryTableFilterId', null);
@@ -132,6 +137,9 @@ window.initRepositoryFilter = () => {
       },
       updateCurrentFilterName(name) {
         this.filterName = name;
+      },
+      hideDropdown() {
+        $('#filtersDropdownButton').removeClass('open');
       }
     }
   });

app/javascript/vue/repository_filter/container.vue

@@ -19,21 +19,16 @@
           />
         </div>
       </div>
-      <button class="btn btn-light clear-filters-btn prevent-shrink" @click="clearFilters()">
-        <i class="fas fa-times-circle"></i>
-        {{ i18n.t('repositories.show.filters.clear') }}
+      <button type="button" class="close" @click="$emit('hide-dropdown')" aria-label="<%= t('general.close') %>">
+        <span aria-hidden="true">&times;</span>
       </button>
     </div>
-    <div class="filters-list">
-      <FilterElement
-        v-for="(filter, index) in filters"
-        :key="filter.id"
-        :filter.sync="filters[index]"
-        :my_modules.sync= "my_modules"
-        @filter:update="updateFilter"
-        @filter:delete="filters.splice(index, 1)"
-      />
-    </div>
+    <FiltersList 
+      :filters="filters" 
+      :my_modules="my_modules" 
+      :key="filterListKey ? 1 : 0"
+      @filter:update="updateFilter"
+      @filter:delete="deleteFilter" />
     <div class="footer">
       <div id="filtersColumnsDropdown" class="dropup filters-columns-dropdown" @click="toggleColumnsFilters">
         <button class="btn btn-secondary add-filter prevent-shrink" >
@@ -50,6 +45,9 @@
           />
         </div>
       </div>
+      <button class="btn btn-secondary clear-filters-btn prevent-shrink" @click="clearFilters">
+        {{ i18n.t('repositories.show.filters.clear') }}
+      </button>
       <button @click="$emit('filters:apply')" class="btn btn-primary apply-button prevent-shrink">
         {{ i18n.t('repositories.show.filters.apply') }}
       </button>
@@ -59,7 +57,7 @@
 
  <script>
   import ColumnElement from 'vue/repository_filter/column.vue'
-  import FilterElement from 'vue/repository_filter/filter.vue'
+  import FiltersList from 'vue/repository_filter/filters_list.vue'
   import SavedFilterElement from 'vue/repository_filter/saved_filter.vue'
 
   export default {
@@ -76,10 +74,11 @@
     data() {
       return {
         filters: this.defaultFilters,
-        savedFilterScrollbar: null
+        savedFilterScrollbar: null,
+        filterListKey: true
       }
     },
-    components: { ColumnElement, FilterElement, SavedFilterElement },
+    components: { ColumnElement, FiltersList, SavedFilterElement },
     methods: {
       addFilter(column) {
         const id = this.filters.length ? this.filters[this.filters.length - 1].id + 1 : 1
@@ -92,8 +91,11 @@
         this.$emit("filters:update", this.filters);
       },
       clearFilters() {
-        this.filters = [];
         this.$emit('filters:clear');
+        this.filterListKey = !this.filterListKey;
+      },
+      deleteFilter(index) {
+        this.filters.splice(index, 1);
       },
       closeDropdowns() {
         this.closeColumnsFilters();

app/javascript/vue/repository_filter/filters_list.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="filters-list">
+    <FilterElement
+      v-for="(filter, index) in filters"
+      :key="filter.id"
+      :filter.sync="filters[index]"
+      :my_modules.sync="my_modules"
+      @filter:update="updateFilter"
+      @filter:delete="$emit('filter:delete', index)"
+    />
+  </div>
+</template>
+
+<script>
+  import FilterElement from 'vue/repository_filter/filter.vue'
+
+    export default {
+    name: 'FiltersList',
+    props: {
+      filters: Array,
+      my_modules: Array,
+    },
+    components: {FilterElement},
+    methods: {
+      updateFilter(value) {
+        this.$emit('filter:update', value)
+      }
+    }
+  }
+</script>

app/views/repositories/_repository_filters.html.erb

@@ -33,6 +33,7 @@
           @filters:apply="applyFilters"
           @filters:clear="clearFilters"
           @filters:update="updateFilters"
+          @hide-dropdown="hideDropdown"
         />
       </div>
     </div>