From 958ee92db747738136d8c8600bc174bb24d35610 Mon Sep 17 00:00:00 2001 From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com> Date: Wed, 18 Aug 2021 13:43:26 +0200 Subject: [PATCH] Add BMT filters interactions [SCI-5955] (#3478) * Add BMT filters interactions [SCI-5955] * Small fixes [SCI-5955] --- app/assets/javascripts/application.js.erb | 2 + .../repositories/repository_datatable.js | 5 +- app/assets/stylesheets/repositories.scss | 3 +- .../stylesheets/repository/bmt_filters.scss | 37 +++++++++++ app/javascript/packs/vue/bmt_filter.js | 20 ++++++ app/javascript/vue/bmt_filter/container.vue | 61 +++++++++++++++++++ app/javascript/vue/bmt_filter/filter.vue | 20 ++++++ .../repositories/_toolbar_buttons.html.erb | 4 +- app/views/repositories/show.html.erb | 3 + config/locales/en.yml | 5 ++ package.json | 4 +- 11 files changed, 158 insertions(+), 6 deletions(-) create mode 100644 app/assets/stylesheets/repository/bmt_filters.scss create mode 100644 app/javascript/packs/vue/bmt_filter.js create mode 100644 app/javascript/vue/bmt_filter/container.vue create mode 100644 app/javascript/vue/bmt_filter/filter.vue diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb index 3daeec359..b2f1ff666 100644 --- a/app/assets/javascripts/application.js.erb +++ b/app/assets/javascripts/application.js.erb @@ -283,3 +283,5 @@ $(window).scroll(function() { scroll_function(); }) }) + +window.I18n = I18n diff --git a/app/assets/javascripts/repositories/repository_datatable.js b/app/assets/javascripts/repositories/repository_datatable.js index 7ff8bb36a..74c68cf21 100644 --- a/app/assets/javascripts/repositories/repository_datatable.js +++ b/app/assets/javascripts/repositories/repository_datatable.js @@ -1,7 +1,7 @@ /* globals I18n _ SmartAnnotation FilePreviewModal animateSpinner DataTableHelpers HelperModule RepositoryDatatableRowEditor prepareRepositoryHeaderForExport - initAssignedTasksDropdown + initAssignedTasksDropdown initBMTFilter */ //= require jquery-ui/widgets/sortable @@ -268,6 +268,7 @@ var RepositoryDatatable = (function(global) { $.getJSON($(TABLE_ID).data('toolbar-url'), (data) => { $('#toolbarButtonsDatatable').remove(); $(data.html).appendTo('div.toolbar'); + initBMTFilter(); }); TABLE.ajax.reload(null, false); @@ -551,6 +552,7 @@ var RepositoryDatatable = (function(global) { // Append buttons to inner toolbar in the table $.getJSON($(TABLE_ID).data('toolbar-url'), (data) => { $(data.html).appendTo('div.toolbar'); + initBMTFilter(); }); $('div.toolbar-filter-buttons').prependTo('div.filter-container'); @@ -577,6 +579,7 @@ var RepositoryDatatable = (function(global) { }); initAssignedTasksDropdown(TABLE_ID); + } }); diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index 3e3af7fc9..3535b8cd9 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -153,13 +153,12 @@ flex-wrap: nowrap; height: 6em; left: var(--repository-sidebar-margin); - overflow: hidden; padding: 1em 2em 0; position: fixed; top: calc(4em + var(--navbar-height)); transition: .4s $timing-function-sharp; width: calc(100% - var(--repository-sidebar-margin)); - z-index: 90; + z-index: 100; .filter-container { flex-shrink: 0; diff --git a/app/assets/stylesheets/repository/bmt_filters.scss b/app/assets/stylesheets/repository/bmt_filters.scss new file mode 100644 index 000000000..eb17a0ceb --- /dev/null +++ b/app/assets/stylesheets/repository/bmt_filters.scss @@ -0,0 +1,37 @@ +#bmtFilterContainer { + min-width: 300px; + z-index: 100; + + .header { + align-items: center; + border-bottom: $border-tertiary; + display: flex; + padding: .5em 1em; + + .title { + @include font-h2; + margin-right: auto; + } + } + + .filter-element { + align-items: center; + display: flex; + } + + .filters-list { + border-top: $border-tertiary; + padding: .5em 1em; + } + + .footer { + align-items: center; + border-top: $border-tertiary; + display: flex; + padding: .5em 1em; + + .add-filter { + margin-right: auto; + } + } +} diff --git a/app/javascript/packs/vue/bmt_filter.js b/app/javascript/packs/vue/bmt_filter.js new file mode 100644 index 000000000..a1938e366 --- /dev/null +++ b/app/javascript/packs/vue/bmt_filter.js @@ -0,0 +1,20 @@ +import TurbolinksAdapter from 'vue-turbolinks'; +import Vue from 'vue/dist/vue.esm'; +import FilterContainer from '../../vue/bmt_filter/container.vue'; + +Vue.use(TurbolinksAdapter); + + +window.initBMTFilter = () => { + const app = new Vue({ + el: '#bmtFilterContainer', + components: { + 'filter-container': FilterContainer + } + }); + + $('#bmtFilterContainer').on('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + }); +}; diff --git a/app/javascript/vue/bmt_filter/container.vue b/app/javascript/vue/bmt_filter/container.vue new file mode 100644 index 000000000..9793d94b3 --- /dev/null +++ b/app/javascript/vue/bmt_filter/container.vue @@ -0,0 +1,61 @@ + + + diff --git a/app/javascript/vue/bmt_filter/filter.vue b/app/javascript/vue/bmt_filter/filter.vue new file mode 100644 index 000000000..7c882edb3 --- /dev/null +++ b/app/javascript/vue/bmt_filter/filter.vue @@ -0,0 +1,20 @@ + + + diff --git a/app/views/repositories/_toolbar_buttons.html.erb b/app/views/repositories/_toolbar_buttons.html.erb index 7f2f12b00..b6f9c8e49 100644 --- a/app/views/repositories/_toolbar_buttons.html.erb +++ b/app/views/repositories/_toolbar_buttons.html.erb @@ -94,6 +94,8 @@ > -
+
+ diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb index 6505ebbe8..61a2d6046 100644 --- a/app/views/repositories/show.html.erb +++ b/app/views/repositories/show.html.erb @@ -171,6 +171,7 @@ <%= render partial: 'repository_columns/manage_column_modal', locals: { my_module_page: false } %> +<%= javascript_pack_tag 'vue/bmt_filter' %> <%= javascript_include_tag 'repositories/edit' %> <%= javascript_include_tag 'repositories/repository_datatable' %> <%= javascript_include_tag "repositories/show" %> @@ -179,6 +180,8 @@ <%= javascript_pack_tag 'pdfjs/pdf_js' %> <%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %> + + diff --git a/config/locales/en.yml b/config/locales/en.yml index ddceb65ff..1a015c643 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1364,6 +1364,11 @@ en: no_archived_items: "No archived items here" no_archived_items_matched: "No archived items matched your search request" + bmt_search: + title: "Filters" + clear_all: "Clear all" + add_filter: "Add filter" + apply: "Apply" table: id: 'ID' assigned: "Assigned" diff --git a/package.json b/package.json index e7106f331..0736d6f1b 100644 --- a/package.json +++ b/package.json @@ -83,8 +83,8 @@ "postcss-smart-import": "^0.7.6", "precss": "^2.0.0", "prop-types": "^15.7.2", - "rails-erb-loader": "^5.4.2", "react": "^16.8.6", + "rails-erb-loader": "^5.4.2", "react-bootstrap": "^0.31.5", "react-bootstrap-table": "^4.3.1", "react-bootstrap-timezone-picker": "^1.0.12", @@ -113,10 +113,10 @@ "tui-image-editor": "git://github.com/biosistemika/tui.image-editor", "twemoji": "^12.1.4", "typeface-lato": "^0.0.75", + "vue": "^2.6.11", "vue-loader": "^15.9.1", "vue-template-compiler": "^2.6.12", "vue-turbolinks": "^2.2.1", - "vue": "^2.6.11", "webpack": "^4.35.2", "webpack-cli": "^3.3.5", "webpack-manifest-plugin": "^1.3.2",