Tweak filter

SpeciesFileGroup · Apr 5, 2020 · 4167283 · 4167283
1 parent 111f5e9
commit 4167283
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 10 deletions.
diff --git a/app/assets/javascripts/views/hub/filterHub.js b/app/assets/javascripts/views/hub/filterHub.js
@@ -90,6 +90,32 @@ FilterHub.prototype.handleEvents = function (that) {
     }
   });
 
+  $('#filter .navigation-controls-type [data-filter-category]').on('click', function () {
+    var elementFilter = $(this).attr('data-filter-category');
+    var activated = $(this).hasClass('activated')
+
+    $('#filter .navigation-controls-type .navigation-item').each(function () {
+      $(this).removeClass('activated');
+    });
+
+    if (!activated) {
+      $(this).addClass('activated')
+    }
+
+    if ($(this).hasClass('activated')) {
+      that.resetTypeFilter();
+    }
+
+    that.resetTypeFilter();
+    if ($(this).hasClass('activated')) {
+      [that.arrayData, that.arrayTasks].forEach(function (element) {
+        element.forEach(function (element) {
+          element.changeFilter("data-category-" + elementFilter);
+        });
+      });
+    }
+  });
+
   $('#filter .switch input').on('click', function (element) {
     that.resetAllStatusCards()
   });
@@ -103,7 +129,7 @@ FilterHub.prototype.resetAllStatusCards = function() {
       that.resetStatusFilter();
       element.refresh();
     });
-  });  
+  });
 }
 
 FilterHub.prototype.resetStatusFilter = function () {
@@ -117,6 +143,16 @@ FilterHub.prototype.resetStatusFilter = function () {
   });
 }
 
+FilterHub.prototype.resetTypeFilter = function () {
+  [this.arrayData, this.arrayTasks].forEach(function (element) {
+    element.forEach(function (element) {
+      element.setFilterStatus("data-category-filters", false);
+      element.setFilterStatus("data-category-browse", false);
+      element.setFilterStatus("data-category-new", false);
+    });
+  });
+}
+
 FilterHub.prototype.changeAllSectionsFilter = function (arrayData) {
   arrayData.forEach(function (element) {
     $("#search-filter").val("");

diff --git a/app/assets/javascripts/views/hub/filter_bar.js.erb b/app/assets/javascripts/views/hub/filter_bar.js.erb
@@ -36,7 +36,9 @@ Object.assign(TW.workbench.hub.filter_hub, {
     }
 
     $('#filter [data-filter-category]').on('click', function () {
-      changeBackgroundColorLink('[data-filter-category="' + $(this).attr("data-filter-category") + '"]');
+      if(!$(this).parent().hasClass('navigation-controls-type')) {
+        changeBackgroundColorLink('[data-filter-category="' + $(this).attr("data-filter-category") + '"]');
+      }
     });
 
     $('#filter .filter-category [data-filter-category]').on('click', function () {

diff --git a/app/assets/stylesheets/helpers/hub/filter.scss b/app/assets/stylesheets/helpers/hub/filter.scss
@@ -29,10 +29,15 @@
       color:gray;
     }
 
-    .navigation-controls {
-      flex-direction: column;
-      justify-content: flex-start ;
-      text-align: left;
+    .navigation-controls-type  {
+      .navigation-item {
+        border: 1px solid #e5e5e5;
+        justify-content: center;
+        border-right: 0px;
+      }
+      .navigation-item:first-child {
+        border-left: 0px;
+      }
     }
 
     .navigation-item {

diff --git a/app/javascript/vue/tasks/sources/new_source/app.vue b/app/javascript/vue/tasks/sources/new_source/app.vue
@@ -16,7 +16,7 @@
         </li>
       </ul>
     </div>
-    <nav-bar> 
+    <nav-bar>
       <div class="flex-separate full_width">
         <div class="middle">
           <span
@@ -87,7 +87,7 @@
         </div>
       </div>
     </nav-bar>
-    <source-type/>
+    <source-type class="margin-medium-bottom"/>
     <recent-component
       v-if="showRecent"
       @close="showRecent = false"/>

diff --git a/app/views/hub/_hub_category_filter.html.erb b/app/views/hub/_hub_category_filter.html.erb
@@ -13,7 +13,12 @@
           <input type="text" placeholder="Filter cards by text description" class="item mousetrap" id="search-filter" autofocus="true">
         </form>
         <span class="content filter-title">CATEGORIES</span>
-        <div class="navigation-controls separate-bottom">
+        <div class="navigation-controls navigation-controls-type separate-bottom">
+          <div data-filter-category="filters" data-favorite="true" class="navigation-item">Filters</div>
+          <div data-filter-category="browse" data-favorite="true" class="navigation-item">Browse</div>
+          <div data-filter-category="new" data-favorite="true" class="navigation-item">New</div>
+        </div>
+        <div class="navigation-controls separate-bottom flex-wrap-row">
           <% UserTasks::CATEGORIES.each do |c| -%>
             <%= content_tag(:div, c.humanize, 'data-filter-category' => c, 'data-favorite' => true, 'class' => 'navigation-item') -%>
           <% end %>

diff --git a/lib/user_tasks.rb b/lib/user_tasks.rb
@@ -13,7 +13,7 @@
 #
 module UserTasks
 
-  CATEGORIES = %w{filters browse new nomenclature source collection_object collecting_event biology matrix dna image}.freeze
+  CATEGORIES = %w{nomenclature source collection_object collecting_event biology matrix dna image}.freeze
 
   # A convenience wrapper for handling user task related metadata.
   class UserTask