Add save bmt filters front end [SCI-5962] (#3505)

app/assets/stylesheets/repository/bmt_filters.scss

@@ -68,4 +68,10 @@
       margin-right: auto;
     }
   }
+
+  .savedFilterContainer {
+    .saved-filter-element {
+      display: flex;
+    }
+  }
 }

app/javascript/packs/vue/bmt_filter.js

@@ -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')
+})
+

app/javascript/vue/bmt_filter/container.vue

@@ -1,8 +1,19 @@
 <template>
   <div class="filter-container">
     <div class="header">
-      <div class="title">
-        {{ i18n.t('repositories.show.bmt_search.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) => {

app/javascript/vue/bmt_filter/saved_filter.vue

@@ -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>

app/views/repositories/_save_bmt_filter_modal.html.erb

@@ -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">&times;</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>

app/views/repositories/_toolbar_buttons.html.erb

@@ -86,16 +86,24 @@
     <% end %>
   </div>
   <div class="dropdown">
-    <button id="bmtFiltersDropdown"
-            class="btn btn-light icon-btn"
-            type="button"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-    >
-    <span class="fas fa-microscope"></span>
-  </button>
-  <div class="dropdown-menu bmt-filters-container" id="bmtFilterContainer">
-    <filter-container></filter-container>
+      <button id="bmtFiltersDropdown"
+              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 :saved_filters="saved_filters"></filter-container>
+    </div>
   </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>

app/views/repositories/show.html.erb

@@ -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' %>

config/locales/en.yml

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