Merge pull request #2987 from urbanrotnik/ur-sci-5208

Projects cards and list view with filters  [SCI-5208]

app/assets/javascripts/projects/index.js

@@ -522,7 +522,7 @@
       success: function(data) {
         $('#breadcrumbs-wrapper').html(data.breadcrumbs_html);
         viewContainer.data('projects-cards-url', data.projects_cards_url);
-        viewContainer.find('.card').remove();
+        viewContainer.find('.card, .projects-group').remove();
         viewContainer.append(data.cards_html);
         init();
       },
@@ -548,20 +548,13 @@
   }
 
   function initProjectsViewModeSwitch() {
-    $('input[name=projects-view-mode-selector]').off()
-      .on('change', function() {
-        if ($(this).val() === projectsViewMode) {
-          return;
-        }
-        projectsViewMode = $(this).val();
-        if (projectsChanged) {
-          refreshCurrentView();
-        }
-        projectsChanged = false;
-      })
-      .on('click', function() {
-        $(this).next().click();
-      });
+    $('input[type=radio][name=projects-view-mode-selector]').change(function() {
+      if (this.value === 'cards') {
+        $('#cards-wrapper').removeClass('list');
+      } else if (this.value === 'list') {
+        $('#cards-wrapper').addClass('list');
+      }
+    });
   }
 
   function initSorting() {
@@ -667,8 +660,8 @@
       e.preventDefault();
 
       dropdownSelector.clearData($membersFilter);
-      $createdOnFilter.data('DateTimePicker').clear();
-      $dueFilter.data('DateTimePicker').clear();
+      if ($createdOnFilter.data('DateTimePicker')) $createdOnFilter.data('DateTimePicker').clear();
+      if ($dueFilter.data('DateTimePicker')) $dueFilter.data('DateTimePicker').clear();
       $foldersCB.prop('checked', false);
       $textFilter.val('');
     });
@@ -683,14 +676,6 @@
     });
   }
 
-  $('.projects-view-mode-switch a').off().on('shown.bs.tab', function(event) {
-    if ($(event.target).data('mode') === 'table') {
-      $('#cards-wrapper').addClass('list');
-    } else {
-      $('#cards-wrapper').removeClass('list');
-    }
-  });
-
   initProjectsViewFilter();
   initProjectsViewModeSwitch();
   initSorting();

app/assets/stylesheets/projects.scss

@@ -667,7 +667,7 @@ li.module-hover {
   .cards-wrapper {
     align-items: center;
     display: grid;
-    grid-auto-rows: 11em;
+    grid-auto-rows: 2em;
     grid-column-gap: 1em;
     grid-row-gap: 1em;
     grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
@@ -677,6 +677,11 @@ li.module-hover {
       display: none;
     }
 
+    .projects-group {
+      grid-column: 1/-1;
+      margin: 0;
+    }
+
     .card {
       background-color: $color-white;
       color: $color-volcano;
@@ -686,6 +691,7 @@ li.module-hover {
       padding: .5em 1em;
       position: relative;
       width: 100%;
+      grid-row: span 4;
 
       .checkbox-cell {
         align-items: center;
@@ -803,6 +809,23 @@ li.module-hover {
       grid-template-columns: max-content 1fr 1fr 1fr 1fr max-content;
       margin: 40px 0 0 6px;
 
+
+      .projects-group {
+        display: contents;
+
+        .projects-breadcrumbs {
+          grid-column: inherit;
+        }
+
+        &::after {
+          background: $color-concrete;
+          content: "";
+          display: inline-block;
+          grid-column: inherit;
+          height: 1px;
+        }
+      }
+
       .card {
         display: contents;
 
@@ -892,12 +915,17 @@ li.module-hover {
       .table-header {
         display: contents;
 
+        &::after {
+          content: "";
+          grid-column: 1/-1;
+        }
+
         .table-header-cell {
           align-items: center;
           border: 1px solid $color-white;
           display: flex;
           height: 3em;
-          margin: 0 0 2.5em -.5em;
+          margin-left: -.5em;
           padding: 0 .5em;
           width: calc(100% + 1em);
 

app/views/projects/index/_breadcrumbs.html.erb

@@ -1,10 +1,11 @@
+<% target_folder ||= @current_folder %>
 <div class="projects-breadcrumbs">
   <%= link_to(t('projects.index.breadcrumbs_root'),
               projects_path,
               class: 'project-folder-link',
               data: { projects_cards_url: cards_projects_url }) %>
   <span>/</span>
-  <% @current_folder.parent_folders.each do |project_folder| %>
+  <% target_folder&.parent_folders&.each do |project_folder| %>
     <%= link_to(project_folder.name,
                 project_folder_path(project_folder),
                 class: 'project-folder-link',

app/views/projects/index/_team_projects_grouped_by_folder.html.erb

@@ -1,7 +1,7 @@
 <% projects_by_folder.each do |folder, projects| %>
-  <% if folder.present? %>
-    <h3><%= folder.name %></h3>
-  <% end %>
+  <div class="projects-group">
+    <%= render partial: 'projects/index/breadcrumbs', locals: { target_folder: folder } %>
+  </div>
   <% projects.each do |project| %>
     <% cache [current_user, project] do %>
       <%= render partial: 'projects/index/project_card', locals: { project: project } %>

app/views/shared/_secondary_navigation.html.erb

@@ -46,7 +46,7 @@
                   <div class="projects-view-mode-switch sci-toggles-group" data-toggle="buttons">
                     <input type="radio" name="projects-view-mode-selector" value="cards" class="sci-toggle-item" checked>
                     <a href="#projects-cards-view" data-toggle="tab" data-mode="cards" class="sci-toggle-item-label"><i class="fas fa-th-large"></i></a>
-                    <input type="radio" name="projects-view-mode-selector" class="sci-toggle-item">
+                    <input type="radio" name="projects-view-mode-selector" value="list" class="sci-toggle-item">
                     <a class="sci-toggle-item-label" href="#projects-table-view" data-toggle="tab" data-mode="table"><i class="fas fa-th-list"></i></a>
                   </div>
                 </li>