Add BMT filters interactions [SCI-5955] (#3478)

* Add BMT filters interactions [SCI-5955]

* Small fixes [SCI-5955]

app/assets/javascripts/application.js.erb

@@ -283,3 +283,5 @@ $(window).scroll(function() {
     scroll_function();
   })
 })
+
+window.I18n = I18n

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);
+
       }
     });
 

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;

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;
+    }
+  }
+}

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();
+  });
+};

app/javascript/vue/bmt_filter/container.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="filter-container">
+    <div class="header">
+      <div class="title">
+        {{ i18n.t('repositories.show.bmt_search.title') }}
+      </div>
+      <button class="btn btn-light" @click="clearAllFilters">
+        <i class="fas fa-times-circle"></i>
+        {{ i18n.t('repositories.show.bmt_search.clear_all') }}
+      </button>
+    </div>
+    <div class="filters-list">
+      <FilterElement v-for="(filter, index) in filters" :key="filter.id" :filter.sync="filters[index]" @delete:filter="filters.splice(index, 1)"></FilterElement>
+    </div>
+    <div class="footer">
+      <button class="btn btn-light add-filter" @click="addFilter">
+        <i class="fas fa-plus"></i>
+        {{ i18n.t('repositories.show.bmt_search.add_filter') }}
+      </button>
+      <button class="btn btn-primary">
+        {{ i18n.t('repositories.show.bmt_search.apply') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+ <script>
+  import FilterElement from 'vue/bmt_filter/filter.vue'
+
+  export default {
+    name: 'FilterContainer',
+    data() {
+      return {
+        filters: [],
+        i18n: I18n
+      }
+    },
+    props: {
+      container: Object
+    },
+    components: { FilterElement },
+    methods: {
+      addFilter: function() {
+        var id;
+
+        if (this.filters.length > 0) {
+          id = this.filters[this.filters.length - 1].id + 1
+        } else {
+          id = 1
+        };
+
+        this.filters.push({
+          id: id
+        });
+      },
+      clearAllFilters: function() {
+        this.filters = []
+      }
+    }
+  }
+ </script>

app/javascript/vue/bmt_filter/filter.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="filter-element">
+    <div class="filter-action">
+      Filter {{ filter.id }}
+    </div>
+    <div class="filter-remove">
+      <button class="btn btn-light icon-btn" @click="$emit('delete:filter')">
+        <i class="fas fa-times-circle"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      filter: Object
+    }
+  }
+</script>

app/views/repositories/_toolbar_buttons.html.erb

@@ -94,6 +94,8 @@
     >
     <span class="fas fa-microscope"></span>
   </button>
-  <div class="dropdown-menu bmt-filters-container">
+  <div class="dropdown-menu bmt-filters-container" id="bmtFilterContainer">
+    <filter-container></filter-container>
   </div>
 </div>
+

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' %>
 
+
+
 <script type="text/javascript" charset="utf-8">
   var formatJS = "<%= datetime_picker_format_date_only %>"
 </script>

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"

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",