Implement Projects view - navigation bar (tabs) [SCI-2729]

app/assets/javascripts/projects/index.js

@@ -7,9 +7,10 @@
 // - refresh project users tab after manage user modal is closed
 // - refactor view handling using library, ex. backbone.js
 
-//= require comments
+/* global Comments CounterBadge animateSpinner */
-(function () {
 
+//= require comments
+(function() {
   var newProjectModal = null;
   var newProjectModalForm = null;
   var newProjectModalBody = null;
@@ -25,19 +26,235 @@
   var projectActionsModalBody = null;
   var projectActionsModalFooter = null;
 
+  var projectsViewMode = 'cards';
+  var projectsViewFilter = $('.projects-view-filter.active').data('filter');
+
+  function initProjectsViewFilter() {
+    $('.projects-view-filter').click(function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      $('.projects-view-filter').removeClass('active');
+      $(this).addClass('active');
+      if ($(this).data('filter') === projectsViewFilter) {
+        return;
+      }
+      projectsViewFilter = $(this).data('filter');
+    });
+  }
+
+  function initProjectsViewModeSwitch() {
+    $('input[name=projects-view-mode-selector]').on('change', function() {
+      if ($(this).val() === projectsViewMode) {
+        return;
+      }
+      projectsViewMode = $(this).val();
+    });
+  }
+
   /**
-   * Stupid Bootstrap btn-group bug hotfix
+   * Initialize the JS for new project modal to work.
-   * @param btnGroup - The button group element.
    */
-  function activateBtnGroup(btnGroup) {
+  function initNewProjectModal() {
-    var btns = btnGroup.find(".btn");
+    newProjectModal.on('hidden.bs.modal', function() {
-    btns.find("input[type='radio']")
+      var teamSelect = newProjectModalForm.find('select#project_team_id');
-    .removeAttr("checked")
+      var teamHidden = newProjectModalForm.find('input#project_visibility_hidden');
-    .prop("checked", false);
+      var teamVisible = newProjectModalForm.find('input#project_visibility_visible');
-    btns.filter(".active")
+      // When closing the new project modal, clear its input vals
-    .find("input[type='radio']")
+      // and potential errors
-    .attr("checked", "checked")
+      newProjectModalForm.clearFormErrors();
-    .prop("checked", true);
+
+      // Clear input fields
+      newProjectModalForm.clearFormFields();
+      teamSelect.val(0);
+      teamSelect.selectpicker('refresh');
+
+      teamHidden.prop('checked', true);
+      teamHidden.attr('checked', 'checked');
+      teamHidden.parent().addClass('active');
+      teamVisible.prop('checked', false);
+      teamVisible.parent().removeClass('active');
+    }).on('show.bs.modal', function() {
+      var teamSelect = newProjectModalForm.find('select#project_team_id');
+      teamSelect.selectpicker('refresh');
+    });
+
+    newProjectModalForm
+      .on('ajax:beforeSend', function() {
+        animateSpinner(newProjectModalBody);
+      })
+      .on('ajax:success', function(data, status) {
+        // Redirect to response page
+        $(location).attr('href', status.url);
+      })
+      .on('ajax:error', function(jqxhr, status) {
+        $(this).renderFormErrors('project', status.responseJSON);
+      })
+      .on('ajax:complete', function() {
+        animateSpinner(newProjectModalBody, false);
+      });
+
+    newProjectBtn.click(function() {
+      // Show the modal
+      newProjectModal.modal('show');
+      return false;
+    });
+  }
+
+  /**
+   * Initialize the JS for edit project modal to work.
+   */
+  function initEditProjectModal() {
+    // Edit button click handler
+    editProjectBtn.click(function() {
+      // Submit the modal body's form
+      editProjectModalBody.find('form').submit();
+    });
+
+    // On hide modal handler
+    editProjectModal.on('hidden.bs.modal', function() {
+      editProjectModalBody.html('');
+    });
+
+    $(".panel-project a[data-action='edit']")
+      .on('ajax:success', function(ev, data) {
+        // Update modal title
+        editProjectModalTitle.html(data.title);
+
+        // Set modal body
+        editProjectModalBody.html(data.html);
+
+        // Add modal body's submit handler
+        editProjectModal.find('form')
+          .on('ajax:beforeSend', function() {
+            animateSpinner(this);
+          })
+          .on('ajax:success', function(ev2, data2) {
+            // Project saved, replace changed project's title
+            var responseHtml = $(data2.html);
+            var id = responseHtml.attr('data-id');
+            var newTitle = responseHtml.find('.panel-title');
+            var existingTitle = $(".panel-project[data-id='" + id + "'] .panel-title");
+
+            existingTitle.after(newTitle);
+            existingTitle.remove();
+
+            // Hide modal
+            editProjectModal.modal('hide');
+          })
+          .on('ajax:error', function(ev2, data2) {
+            $(this).renderFormErrors('project', data2.responseJSON);
+          })
+          .on('ajax:complete', function() {
+            animateSpinner(this, false);
+          });
+
+        // Show the modal
+        editProjectModal.modal('show');
+      })
+      .on('ajax:error', function() {
+        // TODO
+      });
+  }
+
+  function initManageUsersModal() {
+    // Reload users tab HTML element when modal is closed
+    projectActionsModal.on('hide.bs.modal', function() {
+      var projectEl = $('#' + $(this).attr('data-project-id'));
+
+      // Load HTML to refresh users list
+      $.ajax({
+        url: projectEl.attr('data-project-users-tab-url'),
+        type: 'GET',
+        dataType: 'json',
+        success: function(data) {
+          projectEl.find('#users-' + projectEl.attr('id')).html(data.html);
+          CounterBadge.updateCounterBadge(
+            data.counter, data.project_id, 'users'
+          );
+          initUsersEditLink(projectEl);
+        },
+        error: function() {
+          // TODO
+        }
+      });
+    });
+
+    // Remove modal content when modal window is closed.
+    projectActionsModal.on('hidden.bs.modal', function() {
+      projectActionsModalHeader.html('');
+      projectActionsModalBody.html('');
+      projectActionsModalFooter.html('');
+    });
+  }
+
+  // Initialize users editing modal remote loading.
+  function initUsersEditLink($el) {
+    $el.find('.manage-users-link')
+      .on('ajax:before', function() {
+        var projectId = $(this).closest('.panel-default').attr('id');
+        projectActionsModal.attr('data-project-id', projectId);
+        projectActionsModal.modal('show');
+      })
+      .on('ajax:success', function(e, data) {
+        $('#manage-users-modal-project').text(data.project.name);
+        initUsersModalBody(data);
+      });
+  }
+
+  // Initialize reloading manage user modal content after posting new
+  // user.
+
+  function initAddUserForm() {
+    projectActionsModalBody.find('.add-user-form')
+      .on('ajax:success', function(e, data) {
+        var errorBlock;
+        initUsersModalBody(data);
+        if (data.status === 'error') {
+          $(this).addClass('has-error');
+          errorBlock = $(this).find('span.help-block');
+          if (errorBlock.length && errorBlock.length > 0) {
+            errorBlock.html(data.error);
+          } else {
+            $(this).append("<span class='help-block col-xs-8'>" + data.error + '</span>');
+          }
+        }
+      });
+  }
+
+  // Initialize remove user from project links.
+  function initRemoveUserLinks() {
+    projectActionsModalBody.find('.remove-user-link')
+      .on('ajax:success', function(e, data) {
+        initUsersModalBody(data);
+      });
+  }
+
+  //
+  function initUserRoleForms() {
+    projectActionsModalBody.find('.update-user-form select')
+      .on('change', function() {
+        $(this).parents('form').submit();
+      });
+
+    projectActionsModalBody.find('.update-user-form')
+      .on('ajax:success', function(e, data) {
+        initUsersModalBody(data);
+      })
+      .on('ajax:error', function() {
+        // TODO
+      });
+  }
+
+  // Initialize ajax listeners and elements style on modal body. This
+  // function must be called when modal body is changed.
+  function initUsersModalBody(data) {
+    projectActionsModalHeader.html(data.html_header);
+    projectActionsModalBody.html(data.html_body);
+    projectActionsModalFooter.html(data.html_footer);
+    projectActionsModalBody.find('.selectpicker').selectpicker();
+    initAddUserForm();
+    initRemoveUserLinks();
+    initUserRoleForms();
   }
 
   /**
@@ -59,6 +276,8 @@
     projectActionsModalBody = projectActionsModal.find('.modal-body');
     projectActionsModalFooter = projectActionsModal.find('.modal-footer');
 
+    initProjectsViewFilter();
+    initProjectsViewModeSwitch();
     initNewProjectModal();
     initEditProjectModal();
     initManageUsersModal();
@@ -69,8 +288,7 @@
     // initialize project tab remote loading
     $('.panel-project .active').removeClass('active');
     $('.panel-project .panel-footer [role=tab]')
-
+      .on('ajax:before', function() {
-      .on('ajax:before', function(e) {
         var $this = $(this);
         var parentNode = $this.parents('li');
         var targetId = $this.attr('aria-controls');
@@ -81,9 +299,9 @@
           $('#' + targetId).removeClass('active');
           return false;
         }
+        return true;
       })
-
+      .on('ajax:success', function(e, data) {
-      .on('ajax:success', function(e, data, status, xhr) {
         var $this = $(this);
         var targetId = $this.attr('aria-controls');
         var target = $('#' + targetId);
@@ -101,242 +319,10 @@
 
         Comments.scrollBottom(parentNode);
       })
-
       .on('ajax:error', function() {
         // TODO
       });
   }
 
-  /**
-   * Initialize the JS for new project modal to work.
-   */
-  function initNewProjectModal() {
-    newProjectModalForm.submit(function() {
-      // Stupid Bootstrap btn-group bug hotfix
-      activateBtnGroup(
-        newProjectModal
-        .find("form .btn-group[data-toggle='buttons']")
-      );
-    });
-    newProjectModal.on("hidden.bs.modal", function () {
-      // When closing the new project modal, clear its input vals
-      // and potential errors
-      newProjectModalForm.clearFormErrors();
-
-      // Clear input fields
-      newProjectModalForm.clearFormFields();
-      var teamSelect = newProjectModalForm.find('select#project_team_id');
-      teamSelect.val(0);
-      teamSelect.selectpicker('refresh');
-
-      var teamHidden = newProjectModalForm.find('input#project_visibility_hidden');
-      var teamVisible = newProjectModalForm.find('input#project_visibility_visible');
-      teamHidden.prop("checked", true);
-      teamHidden.attr("checked", "checked");
-      teamHidden.parent().addClass("active");
-      teamVisible.prop("checked", false);
-      teamVisible.parent().removeClass("active");
-    })
-    .on("show.bs.modal", function() {
-      var teamSelect = newProjectModalForm.find('select#project_team_id');
-      teamSelect.selectpicker('refresh');
-    });
-
-    newProjectModalForm
-    .on("ajax:beforeSend", function(){
-      animateSpinner(newProjectModalBody);
-    })
-    .on("ajax:success", function(data, status, jqxhr) {
-      // Redirect to response page
-      $(location).attr("href", status.url);
-    })
-    .on("ajax:error", function(jqxhr, status, error) {
-      $(this).renderFormErrors("project", status.responseJSON);
-    })
-    .on("ajax:complete", function(){
-      animateSpinner(newProjectModalBody, false);
-    });
-
-    newProjectBtn.click(function(e) {
-      // Show the modal
-      newProjectModal.modal("show");
-      return false;
-    });
-  }
-
-  /**
-   * Initialize the JS for edit project modal to work.
-   */
-  function initEditProjectModal() {
-    // Edit button click handler
-    editProjectBtn.click(function() {
-      // Stupid Bootstrap btn-group bug hotfix
-      activateBtnGroup(
-        editProjectModalBody
-        .find("form .btn-group[data-toggle='buttons']")
-      );
-
-      // Submit the modal body's form
-      editProjectModalBody.find("form").submit();
-    });
-
-    // On hide modal handler
-    editProjectModal.on("hidden.bs.modal", function() {
-      editProjectModalBody.html("");
-    });
-
-    $(".panel-project a[data-action='edit']")
-    .on("ajax:success", function(ev, data, status) {
-      // Update modal title
-      editProjectModalTitle.html(data.title);
-
-      // Set modal body
-      editProjectModalBody.html(data.html);
-
-      // Add modal body's submit handler
-      editProjectModal.find("form")
-      .on("ajax:beforeSend", function(){
-        animateSpinner(this);
-      })
-      .on("ajax:success", function(ev2, data2, status2) {
-        // Project saved, replace changed project's title
-        var responseHtml = $(data2.html);
-        var id = responseHtml.attr("data-id");
-        var newTitle = responseHtml.find(".panel-title");
-        var existingTitle =
-          $(".panel-project[data-id='" + id + "'] .panel-title");
-
-        existingTitle.after(newTitle);
-        existingTitle.remove();
-
-        // Hide modal
-        editProjectModal.modal("hide");
-      })
-      .on("ajax:error", function(ev2, data2, status2) {
-        $(this).renderFormErrors("project", data2.responseJSON);
-      })
-      .on("ajax:complete", function(){
-        animateSpinner(this, false);
-      });
-
-      // Show the modal
-      editProjectModal.modal("show");
-    })
-    .on("ajax:error", function(ev, data, status) {
-      // TODO
-    });
-  }
-
-  function initManageUsersModal() {
-    // Reload users tab HTML element when modal is closed
-    projectActionsModal.on("hide.bs.modal", function () {
-      var projectEl = $("#" + $(this).attr("data-project-id"));
-
-      // Load HTML to refresh users list
-      $.ajax({
-        url: projectEl.attr("data-project-users-tab-url"),
-        type: "GET",
-        dataType: "json",
-        success: function (data) {
-          projectEl.find("#users-" + projectEl.attr("id")).html(data.html);
-          CounterBadge.updateCounterBadge(data.counter,
-                                          data.project_id,
-                                          'users');
-          initUsersEditLink(projectEl);
-        },
-        error: function (data) {
-          // TODO
-        }
-      });
-    });
-
-    // Remove modal content when modal window is closed.
-    projectActionsModal.on("hidden.bs.modal", function () {
-      projectActionsModalHeader.html("");
-      projectActionsModalBody.html("");
-      projectActionsModalFooter.html("");
-    });
-  }
-
-  // Initialize users editing modal remote loading.
-  function initUsersEditLink($el) {
-
-     $el.find(".manage-users-link")
-
-       .on("ajax:before", function () {
-        var projectId = $(this).closest(".panel-default").attr("id");
-          projectActionsModal.attr("data-project-id", projectId);
-          projectActionsModal.modal('show');
-       })
-
-       .on("ajax:success", function (e, data) {
-         $("#manage-users-modal-project").text(data.project.name);
-         initUsersModalBody(data);
-       });
-  }
-
-  // Initialize reloading manage user modal content after posting new
-  // user.
-
-  function initAddUserForm() {
-
-    projectActionsModalBody.find(".add-user-form")
-
-      .on("ajax:success", function (e, data) {
-        initUsersModalBody(data);
-        if (data.status === 'error') {
-          $(this).addClass("has-error");
-          var errorBlock = $(this).find("span.help-block");
-          if (errorBlock .length && errorBlock.length > 0) {
-            errorBlock.html(data.error);
-          } else {
-            $(this).append("<span class='help-block col-xs-8'>" + data.error + "</span>");
-          }
-        }
-      });
-  }
-
-  // Initialize remove user from project links.
-  function initRemoveUserLinks() {
-
-    projectActionsModalBody.find(".remove-user-link")
-
-      .on("ajax:success", function (e, data) {
-        initUsersModalBody(data);
-      });
-  }
-
-  //
-  function initUserRoleForms() {
-
-    projectActionsModalBody.find(".update-user-form select")
-
-      .on("change", function () {
-        $(this).parents("form").submit();
-      });
-
-    projectActionsModalBody.find(".update-user-form")
-
-      .on("ajax:success", function (e, data) {
-        initUsersModalBody(data);
-      })
-
-      .on("ajax:error", function (e, xhr, status, error) {
-        // TODO
-      });
-  }
-
-  // Initialize ajax listeners and elements style on modal body. This
-  // function must be called when modal body is changed.
-  function initUsersModalBody(data) {
-    projectActionsModalHeader.html(data.html_header);
-    projectActionsModalBody.html(data.html_body);
-    projectActionsModalFooter.html(data.html_footer);
-    projectActionsModalBody.find(".selectpicker").selectpicker();
-    initAddUserForm();
-    initRemoveUserLinks();
-    initUserRoleForms();
-  }
-
   init();
 }());

app/assets/stylesheets/projects.scss

@@ -15,6 +15,22 @@ $color-module-hover: $brand-primary;
   }
 }
 
+/* Secondary navigation */
+
+.navbar-nav {
+
+  .btn-group .btn-toggle:not(.active) {
+    background-color: $color-white;
+    border-color: $color-silver;
+    color: $color-emperor;
+  }
+
+  .projects-view-mode-switch {
+    margin: 10px;
+  }
+
+}
+
 /* Canvas index page */
 
 #canvas-container:not(.canvas-container-edit-mode) {

app/views/projects/index.html.erb

@@ -85,7 +85,7 @@
 
             <% if @teams.exists? && can_create_projects?(current_team) %>
             <!-- new project button -->
-              <a class="btn btn-primary pull-right" id="new-project-btn">
+              <a class="btn btn-primary" id="new-project-btn">
                 <span class="fas fa-plus" aria-hidden="true"></span>
                 <span class="hidden-xs"><%=t "projects.index.new" %></span>
               </a>

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

@@ -1,16 +1,21 @@
-<div class="row">
+<div class="tab-content">
-<% projects.each_with_index  do |project, i| %>
+  <div class="tab-pane active" id="projects-cards-view">
-  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+    <div class="row">
-  <%= render partial: "projects/index/project", locals: {project: project} %>
+    <% projects.each_with_index  do |project, i| %>
+      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+      <%= render partial: "projects/index/project", locals: {project: project} %>
+      </div>
+      <% if (i+1) % 4 == 0 %>
+      <div class="clearfix visible-lg-block"></div>
+      <% end %>
+      <% if (i+1) % 3 == 0 %>
+      <div class="clearfix visible-md-block"></div>
+      <% end %>
+      <% if (i+1) % 2 == 0 %>
+      <div class="clearfix visible-sm-block"></div>
+      <% end %>
+    <% end %>
+    </div>
   </div>
-  <% if (i+1) % 4 == 0 %>
+  <div class="tab-pane" id="projects-table-view">Table view</div>
-  <div class="clearfix visible-lg-block"></div>
-  <% end %>
-  <% if (i+1) % 3 == 0 %>
-  <div class="clearfix visible-md-block"></div>
-  <% end %>
-  <% if (i+1) % 2 == 0 %>
-  <div class="clearfix visible-sm-block"></div>
-  <% end %>
-<% end %>
 </div>

app/views/shared/_secondary_navigation.html.erb

@@ -18,19 +18,38 @@
       <!-- True secondary navigation (buttons on the right side) -->
       <ul class="nav navbar-nav navbar-right" style="vertical-align: bottom">
         <% if all_projects_page? %>
-          <% if can_read_team?(current_team) then %>
+          <% if can_read_team?(current_team) %>
-            <li id="canvas-nav-tab" class="<%= "active" if is_all_projects_index? %>">
+            <li id="projects-active-nav-tab" class="active projects-view-filter"  data-filter="active">
-              <a href="<%= projects_path %>" title="<%=t "nav2.all_projects.index" %>">
+              <a href="#" title="<%=t "nav2.all_projects.index" %>">
-                <span class="hidden-sm hidden-md"><%=t "nav2.all_projects.index" %></span>
+                <span><%=t "nav2.all_projects.index" %></span>
-                <span class="hidden-xs hidden-lg fas fa-folder"></span>
               </a>
             </li>
-            <li id="project-archive-nav-tab" class="<%= "active" if is_all_projects_archive? %>">
+            <li id="projects-archive-nav-tab" class="projects-view-filter"  data-filter="archived">
-              <a href="<%= projects_archive_path %>" title="<%=t "nav2.all_projects.archive" %>">
+              <a href="#" title="<%=t "nav2.all_projects.archive" %>">
-                <span class="hidden-sm hidden-md"><%=t "nav2.all_projects.archive" %></span>
+                <span><%=t "nav2.all_projects.archive" %></span>
-                <span class="hidden-xs hidden-lg fas fa-briefcase"></span>
               </a>
             </li>
+            <li id="projects-all-nav-tab" class="projects-view-filter" data-filter="all">
+              <a href="#" title="<%=t "nav2.all_projects.all" %>">
+                <span><%=t "nav2.all_projects.all" %></span>
+              </a>
+            </li>
+            <li>
+              <ul class="list-unstyled">
+                <li>
+                  <div class="btn-group projects-view-mode-switch" data-toggle="buttons">
+                    <a class="btn btn-toggle active" href="#projects-cards-view" data-toggle="tab">
+                      <input type="radio" name="projects-view-mode-selector" value="cards">
+                      <i class="fas fa-th-large"></i>
+                    </a>
+                    <a class="btn btn-toggle" href="#projects-table-view" data-toggle="tab">
+                      <input type="radio" name="projects-view-mode-selector" value="table">
+                      <i class="fas fa-th-list"></i>
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </li>
           <% end %>
 
         <% elsif project_page? ||

config/locales/en.yml

@@ -125,8 +125,9 @@ en:
 
   nav2:
     all_projects:
-      index: "Projects"
+      index: "Active"
-      archive: "Archived projects"
+      archive: "Archived"
+      all: "All"
     projects:
       show: "Experiments"
       samples: "Samples"