From 896f0ce1e30e525b0e282ec26fcfd7037c22a582 Mon Sep 17 00:00:00 2001 From: Martin Artnik Date: Fri, 27 Aug 2021 16:02:11 +0200 Subject: [PATCH] Implemented applying BMT filters [SCI-5980] --- .../repositories/repository_datatable.js | 4 ++ .../stylesheets/repository/bmt_filters.scss | 44 ++++++++++++++-- .../bio_eddie_assets_controller.rb | 2 + app/controllers/bmt_filters_controller.rb | 5 +- app/javascript/packs/vue/bmt_filter.js | 25 +++++++++- app/javascript/vue/bmt_filter/container.vue | 50 +++++++++++++------ .../bmt_filter/filters/fullSequenceFilter.vue | 2 +- .../vue/bmt_filter/saved_filter.vue | 8 +-- app/services/repository_datatable_service.rb | 2 + .../repositories/_toolbar_buttons.html.erb | 13 ++++- config/routes.rb | 3 +- .../20210825112050_create_bmt_filters.rb | 2 +- db/structure.sql | 2 +- 13 files changed, 133 insertions(+), 29 deletions(-) diff --git a/app/assets/javascripts/repositories/repository_datatable.js b/app/assets/javascripts/repositories/repository_datatable.js index 74c68cf21..e8840ebff 100644 --- a/app/assets/javascripts/repositories/repository_datatable.js +++ b/app/assets/javascripts/repositories/repository_datatable.js @@ -407,6 +407,10 @@ var RepositoryDatatable = (function(global) { url: $(TABLE_ID).data('source'), data: function(d) { d.archived = $('.repository-show').hasClass('archived'); + + if ($('[data-external-ids]').length) { + d.external_ids = $('[data-external-ids]').attr('data-external-ids').split(','); + } }, global: false, type: 'POST' diff --git a/app/assets/stylesheets/repository/bmt_filters.scss b/app/assets/stylesheets/repository/bmt_filters.scss index 3f50c589e..09b667f66 100644 --- a/app/assets/stylesheets/repository/bmt_filters.scss +++ b/app/assets/stylesheets/repository/bmt_filters.scss @@ -1,3 +1,19 @@ +.bmt-filters-button.active-filters { + position: relative; + + &::after { + background: $brand-accent; + border-radius: 50%; + content: ""; + display: block; + height: 8px; + position: absolute; + right: .3em; + top: .3em; + width: 8px; + } +} + #bmtFilterContainer { min-width: 422px; z-index: 100; @@ -63,15 +79,37 @@ align-items: center; border-top: $border-tertiary; display: flex; + padding: 0 1em; .add-filter { margin-right: auto; } } - .savedFilterContainer { - .saved-filter-element { - display: flex; + .saved-filters-container { + .title { + cursor: pointer; } } + + .saved-filters-list { + padding: 0 1em; + } + + .saved-filters-element { + align-items: center; + cursor: pointer; + display: flex; + justify-content: space-between; + min-width: 200px; + + i { + color: $color-silver-chalice; + } + + } + + .saved-filters-element:hover i { + color: $color-black; + } } diff --git a/app/controllers/bio_eddie_assets_controller.rb b/app/controllers/bio_eddie_assets_controller.rb index 951274861..1e2c9b1ed 100644 --- a/app/controllers/bio_eddie_assets_controller.rb +++ b/app/controllers/bio_eddie_assets_controller.rb @@ -66,8 +66,10 @@ class BioEddieAssetsController < ApplicationController api_request['x-api-key'] = ENV['BIOMOLECULE_TOOLKIT_API_KEY'] if ENV['BIOMOLECULE_TOOLKIT_API_KEY'] api_request['Content-Type'] = 'application/json' request_body = request.body.read + api_request.body = request_body if request_body.present? api_response = http.request(api_request) + render body: api_response.body, content_type: api_response.content_type, status: api_response.code end end diff --git a/app/controllers/bmt_filters_controller.rb b/app/controllers/bmt_filters_controller.rb index 34f08c73b..4d5ff0710 100644 --- a/app/controllers/bmt_filters_controller.rb +++ b/app/controllers/bmt_filters_controller.rb @@ -8,7 +8,10 @@ class BmtFiltersController < ApplicationController end def create - filter = BmtFilter.new(filters_params) + filter = BmtFilter.new( + name: filters_params[:name], + filters: JSON.parse(filters_params[:filters]) + ) filter.created_by = current_user if filter.save render json: filter, serializer: BmtFilterSerializer diff --git a/app/javascript/packs/vue/bmt_filter.js b/app/javascript/packs/vue/bmt_filter.js index bbed0eeed..d4c4bb784 100644 --- a/app/javascript/packs/vue/bmt_filter.js +++ b/app/javascript/packs/vue/bmt_filter.js @@ -10,10 +10,14 @@ window.initBMTFilter = () => { el: '#bmtFilterContainer', data: () => { return { + bmtApiBaseUrl: $($('#bmtFilterContainer')).data('bmt-api-base-url'), savedFilters: [], filters: [] }; }, + created() { + this.dataTableElement = $($('#bmtFilterContainer').data('datatable-id')); + }, components: { 'filter-container': FilterContainer }, @@ -23,22 +27,39 @@ window.initBMTFilter = () => { }, getFilters() { return this.filters; + }, + updateExternalIds(ids) { + this.dataTableElement.attr('data-external-ids', ids.join(',')); + this.closeFilters(); + this.reloadDataTable(); + }, + clearFilters() { + this.dataTableElement.removeAttr('data-external-ids'); + this.reloadDataTable(); + }, + closeFilters() { + $(this.$el).closest('.dropdown').removeClass('open'); + }, + reloadDataTable() { + this.dataTableElement.DataTable().ajax.reload(); } } }); + + // prevent closing of dropdown $('#bmtFilterContainer').on('click', (e) => e.stopPropagation()); $("#saveBmtFilterForm" ) .off() .on('ajax:before', function() { - $('#bmt_filter_filters').val(JSON.stringify(bmtFilterContainer.getFilters())); + $('#bmt_filter_filters').val(JSON.stringify(bmtFilterContainer.getFilters())); }) .on('ajax:success', function(e, result) { bmtFilterContainer.savedFilters.push(result.data); $('#modalSaveBmtFilter').modal('hide'); }); - $.get($('#bmtFilterContainer').data('url-saved-filters'), function(result) { + $.get($('#bmtFilterContainer').data('saved-filters-url'), function(result) { bmtFilterContainer.savedFilters = result.data; }) }; diff --git a/app/javascript/vue/bmt_filter/container.vue b/app/javascript/vue/bmt_filter/container.vue index aaf85e334..8be533463 100644 --- a/app/javascript/vue/bmt_filter/container.vue +++ b/app/javascript/vue/bmt_filter/container.vue @@ -1,21 +1,22 @@