mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 07:26:15 +08:00
Add save bmt filters front end [SCI-5962] (#3505)
This commit is contained in:
parent
d4ef2b1bd4
commit
90d4a5f7d1
|
@ -68,4 +68,10 @@
|
|||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.savedFilterContainer {
|
||||
.saved-filter-element {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,12 +6,31 @@ Vue.use(TurbolinksAdapter);
|
|||
Vue.prototype.i18n = window.I18n;
|
||||
|
||||
window.initBMTFilter = () => {
|
||||
const app = new Vue({
|
||||
const bmtFilterContainer = new Vue({
|
||||
el: '#bmtFilterContainer',
|
||||
data: () => {
|
||||
return {
|
||||
saved_filters: []
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'filter-container': FilterContainer
|
||||
}
|
||||
});
|
||||
|
||||
$('#bmtFilterContainer').on('click', (e) => e.stopPropagation());
|
||||
|
||||
$( "#saveBmtFilterForm" ).off().submit(function(e) {
|
||||
let filterName = $(this).find('input#filter_name').val();
|
||||
bmtFilterContainer.saved_filters.push({
|
||||
id: bmtFilterContainer.saved_filters.length,
|
||||
filter_name: filterName,
|
||||
filters: []
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
$('.repository-show').on('click', '.open-save-bmt-modal', () => {
|
||||
$('#modalSaveBmtFilter').modal('show')
|
||||
})
|
||||
|
||||
|
|
|
@ -1,8 +1,19 @@
|
|||
<template>
|
||||
<div class="filter-container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<div class="dropdown savedFilterContainer">
|
||||
<div class="title" @click="openSavedFilters()">
|
||||
{{ i18n.t('repositories.show.bmt_search.title') }}
|
||||
<i class="fas fa-caret-down"></i>
|
||||
</div>
|
||||
<div class="dropdown-menu saved-filters-container">
|
||||
<SavedFilterElement
|
||||
v-for="(saved_filter, index) in saved_filters"
|
||||
:key="saved_filter.id"
|
||||
:saved_filter.sync="saved_filters[index]"
|
||||
@saved_filter:delete="saved_filters.splice(index, 1)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-light" @click="clearAllFilters">
|
||||
<i class="fas fa-times-circle"></i>
|
||||
|
@ -35,6 +46,7 @@
|
|||
|
||||
<script>
|
||||
import FilterElement from 'vue/bmt_filter/filter.vue'
|
||||
import SavedFilterElement from 'vue/bmt_filter/saved_filter.vue'
|
||||
|
||||
export default {
|
||||
name: 'FilterContainer',
|
||||
|
@ -44,14 +56,20 @@
|
|||
}
|
||||
},
|
||||
props: {
|
||||
container: Object
|
||||
container: Object,
|
||||
saved_filters: Array
|
||||
},
|
||||
components: { FilterElement },
|
||||
components: { FilterElement, SavedFilterElement },
|
||||
computed: {
|
||||
searchJSON() {
|
||||
return this.filters.map((f) => f.data);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filters() {
|
||||
$('.open-save-bmt-modal').toggleClass('hidden', !this.filters.length)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addFilter() {
|
||||
let id;
|
||||
|
@ -68,6 +86,9 @@
|
|||
clearAllFilters() {
|
||||
this.filters = [];
|
||||
},
|
||||
openSavedFilters() {
|
||||
$('.savedFilterContainer').toggleClass('open')
|
||||
},
|
||||
loadFilters(filters) {
|
||||
this.clearAllFilters();
|
||||
filters.forEach((filter, index) => {
|
||||
|
|
18
app/javascript/vue/bmt_filter/saved_filter.vue
Normal file
18
app/javascript/vue/bmt_filter/saved_filter.vue
Normal file
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div class="saved-filter-element">
|
||||
{{ saved_filter.filter_name }}
|
||||
<button class="btn btn-light icon-btn" @click="$emit('saved_filter:delete')">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SavedFilterElement',
|
||||
props: {
|
||||
saved_filter: Object
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
25
app/views/repositories/_save_bmt_filter_modal.html.erb
Normal file
25
app/views/repositories/_save_bmt_filter_modal.html.erb
Normal file
|
@ -0,0 +1,25 @@
|
|||
<div class="modal fade" id="modalSaveBmtFilter" tabindex="-1" role="dialog" aria-labelledby="modal-import-records-label">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">
|
||||
<%= t('repositories.show.bmt_search.save_filters') %>
|
||||
</h4>
|
||||
</div>
|
||||
<%= form_with url: '', method: :post, :html => { :id => "saveBmtFilterForm" } do |f| %>
|
||||
<div class="modal-body">
|
||||
<div class="sci-input-container">
|
||||
<%= f.label :filter_name %>
|
||||
<%= f.text_field :filter_name, class: "sci-input-field" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><%= t('general.cancel')%></button>
|
||||
<%= f.submit t('general.save'), class: "btn btn-success" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -87,15 +87,23 @@
|
|||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="bmtFiltersDropdown"
|
||||
class="btn btn-light icon-btn"
|
||||
class="btn btn-secondary"
|
||||
type="button"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="fas fa-microscope"></span>
|
||||
<%= t('repositories.show.bmt_search.bmt_filter') %>
|
||||
</button>
|
||||
<div class="dropdown-menu bmt-filters-container" id="bmtFilterContainer">
|
||||
<filter-container></filter-container>
|
||||
<filter-container :saved_filters="saved_filters"></filter-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn btn-light open-save-bmt-modal hidden"
|
||||
type="button"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="fas fa-save"></span>
|
||||
<%= t('repositories.show.bmt_search.save_filters') %>
|
||||
</button>
|
||||
|
|
|
@ -170,6 +170,7 @@
|
|||
locals: { repository: @repository } %>
|
||||
|
||||
<%= render partial: 'repository_columns/manage_column_modal', locals: { my_module_page: false } %>
|
||||
<%= render partial: 'save_bmt_filter_modal' %>
|
||||
|
||||
<%= javascript_pack_tag 'vue/bmt_filter' %>
|
||||
<%= javascript_include_tag 'repositories/edit' %>
|
||||
|
|
|
@ -1366,6 +1366,8 @@ en:
|
|||
no_archived_items_matched: "No archived items matched your search request"
|
||||
|
||||
bmt_search:
|
||||
bmt_filter: "Biomolecule filter"
|
||||
save_filters: "Save filters"
|
||||
title: "Filters"
|
||||
clear_all: "Clear all"
|
||||
add_filter: "Add filter"
|
||||
|
|
Loading…
Reference in a new issue