Fix dropdown behavior for repository filters [SCI-6491] (#3842)

Co-authored-by: Anton <anton@scinote.net>
This commit is contained in:
aignatov-bio 2022-02-11 11:42:31 +01:00 committed by GitHub
parent 1e0966ac11
commit 24127af83f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 7 deletions

View file

@ -75,7 +75,8 @@ window.initRepositoryFilter = () => {
const repositoryFilterContainer = new Vue({ const repositoryFilterContainer = new Vue({
el: '#filterContainer', el: '#filterContainer',
data: () => ({ data: () => ({
filters: DEFAULT_FILTERS, filters: [],
defaultFilters: DEFAULT_FILTERS,
columns: [], columns: [],
my_modules: [], my_modules: [],
canManageFilters: $('#filterContainer').data('can-manage-filters'), canManageFilters: $('#filterContainer').data('can-manage-filters'),
@ -121,7 +122,6 @@ window.initRepositoryFilter = () => {
$('#modalSaveRepositoryTableFilter').data('repositoryTableFilterId', null); $('#modalSaveRepositoryTableFilter').data('repositoryTableFilterId', null);
$('#saveRepositoryFilters').addClass('hidden'); $('#saveRepositoryFilters').addClass('hidden');
$('#overwriteFilterLink').addClass('hidden'); $('#overwriteFilterLink').addClass('hidden');
this.reloadDataTable();
}, },
reloadDataTable() { reloadDataTable() {
this.dataTableElement.DataTable().ajax.reload(); this.dataTableElement.DataTable().ajax.reload();
@ -150,5 +150,9 @@ window.initRepositoryFilter = () => {
e.stopPropagation(); e.stopPropagation();
}); });
$('#filtersDropdownButton').on('show.bs.dropdown', () => {
$('#filtersColumnsDropdown, #savedFiltersContainer').removeClass('open');
});
window.repositoryFilterObject = repositoryFilterContainer; window.repositoryFilterObject = repositoryFilterContainer;
}; };

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="filters-container"> <div class="filters-container" @click="closeDropdowns">
<div class="header"> <div class="header">
<div id="savedFiltersContainer" class="dropdown saved-filters-container" @click="toggleSavedFilters"> <div id="savedFiltersContainer" class="dropdown saved-filters-container" @click="toggleSavedFilters">
<div class="title" id="savedFilterDropdown"> <div class="title" id="savedFilterDropdown">
@ -65,7 +65,7 @@
export default { export default {
name: 'FilterContainer', name: 'FilterContainer',
props: { props: {
filters: Array, defaultFilters: Array,
my_modules: Array, my_modules: Array,
container: Object, container: Object,
columns: Array, columns: Array,
@ -73,6 +73,11 @@
canManageFilters: Boolean, canManageFilters: Boolean,
filterName: String, default: () => null filterName: String, default: () => null
}, },
data() {
return {
filters: this.defaultFilters
}
},
components: { ColumnElement, FilterElement, SavedFilterElement }, components: { ColumnElement, FilterElement, SavedFilterElement },
methods: { methods: {
addFilter(column) { addFilter(column) {
@ -89,7 +94,16 @@
this.filters = []; this.filters = [];
this.$emit('filters:clear'); this.$emit('filters:clear');
}, },
toggleColumnsFilters() { closeDropdowns() {
this.closeColumnsFilters();
this.closeSavedFilters();
},
closeColumnsFilters() {
$('#filtersColumnsDropdown').removeClass('open');
},
toggleColumnsFilters(e) {
e.stopPropagation();
this.closeSavedFilters();
$('#filtersColumnsDropdown').toggleClass('open'); $('#filtersColumnsDropdown').toggleClass('open');
}, },
loadFilters(filterUrl) { loadFilters(filterUrl) {
@ -125,7 +139,9 @@
$('#savedFiltersContainer').removeClass('open'); $('#savedFiltersContainer').removeClass('open');
return true; return true;
}, },
toggleSavedFilters() { toggleSavedFilters(e) {
e.stopPropagation();
this.closeColumnsFilters();
$('#savedFiltersContainer').toggleClass('open'); $('#savedFiltersContainer').toggleClass('open');
}, },
} }

View file

@ -23,7 +23,7 @@
<filter-container <filter-container
:columns.sync="columns" :columns.sync="columns"
:my_modules.sync="my_modules" :my_modules.sync="my_modules"
:filters.sync="filters" :default-filters="defaultFilters"
:can-manage-filters="canManageFilters" :can-manage-filters="canManageFilters"
:saved-filters.sync="savedFilters" :saved-filters.sync="savedFilters"
:filter-name="filterName" :filter-name="filterName"