Add archived mode for Projects

[SCI-5266]

app/assets/javascripts/projects/index.js

@@ -32,8 +32,6 @@
   var exportProjectsBtn = null;
   var exportProjectsSubmit = null;
 
-  var projectsViewMode = 'cards';
-  var projectsViewFilter = $('.projects-view-filter.active').data('filter');
   var projectsViewSearch;
   var projectsChanged = false;
   var projectsViewSort = $('#sortMenuDropdown a.disabled').data('sort');
@@ -545,7 +543,7 @@
       type: 'GET',
       dataType: 'json',
       data: {
-        filter: projectsViewFilter,
+        filter: $('.projects-index').data('mode'),
         sort: projectsViewSort,
         search: projectsViewSearch
       },
@@ -563,28 +561,32 @@
     });
   }
 
-  function initProjectsViewFilter() {
-    $('.projects-view-filter').click(function(event) {
-      event.preventDefault();
-      event.stopPropagation();
-      if ($(this).data('filter') === projectsViewFilter) {
-        return;
-      }
-      $('.projects-view-filter').removeClass('active');
-      $(this).addClass('active');
-      selectedProjects = [];
-      projectsViewFilter = $(this).data('filter');
-      loadCardsView();
-    });
-  }
-
   function initProjectsViewModeSwitch() {
-    $('input[type=radio][name=projects-view-mode-selector]').change(function() {
+    let projectsPageSelector = '.projects-index ';
-      if (this.value === 'cards') {
+
+    // list/cards switch
+    $(projectsPageSelector + '.projects-view-mode').click(function() {
+      let $btn = $(this);
+      $('.projects-view-mode').removeClass('active');
+      if ($btn.hasClass('view-switch-cards')) {
         $('#cards-wrapper').removeClass('list');
-      } else if (this.value === 'list') {
+      } else if ($btn.hasClass('view-switch-list')) {
         $('#cards-wrapper').addClass('list');
       }
+      $btn.addClass('active');
+    });
+
+    // active/archived switch
+    $(projectsPageSelector + '.archive-switch').click(function() {
+      let $btn = $(this);
+      let mode = $btn.data('mode');
+      let $projectsPageSelector = $(projectsPageSelector);
+      if (mode === 'active') {
+        $projectsPageSelector.removeClass('archived').addClass('active').data('mode', 'active');
+      } else {
+        $projectsPageSelector.removeClass('active').addClass('archived').data('mode', 'archived');
+      }
+      loadCardsView();
     });
   }
 
@@ -604,11 +606,13 @@
   }
 
   function initProjectsFilter() {
-    let $projectsFilter = $('#projectsToolbar .projects-filters');
+    let $projectsFilter = $('.projects-index .projects-filters');
     let $membersFilter = $('.members-filter', $projectsFilter);
     let $foldersCB = $('#folder_search', $projectsFilter);
-    let $createdOnFilter = $('#calendarStartDate', $projectsFilter);
+    let $createdOnStartFilter = $('#createdOnStartDate', $projectsFilter);
-    let $dueFilter = $('#calendarDueDate', $projectsFilter);
+    let $createdOnEndFilter = $('#createdOnEndDate', $projectsFilter);
+    let $archivedOnStartFilter = $('#archivedOnStartDate', $projectsFilter);
+    let $archivedOnEndFilter = $('#archivedOnEndDate', $projectsFilter);
     let $textFilter = $('#textSearchFilterInput', $projectsFilter);
 
     dropdownSelector.init($membersFilter, {
@@ -682,7 +686,8 @@
       }
 
       $('.projects-filters').dropdown('toggle');
-      refreshCurrentView();
+
+      loadCardsView();
     });
 
     // Clear filters
@@ -691,8 +696,10 @@
       e.preventDefault();
 
       dropdownSelector.clearData($membersFilter);
-      if ($createdOnFilter.data('DateTimePicker')) $createdOnFilter.data('DateTimePicker').clear();
+      if ($createdOnStartFilter.data('DateTimePicker')) $createdOnStartFilter.data('DateTimePicker').clear();
-      if ($dueFilter.data('DateTimePicker')) $dueFilter.data('DateTimePicker').clear();
+      if ($createdOnEndFilter.data('DateTimePicker')) $createdOnEndFilter.data('DateTimePicker').clear();
+      if ($archivedOnStartFilter.data('DateTimePicker')) $archivedOnStartFilter.data('DateTimePicker').clear();
+      if ($archivedOnEndFilter.data('DateTimePicker')) $archivedOnEndFilter.data('DateTimePicker').clear();
       $foldersCB.prop('checked', false);
       $textFilter.val('');
     });
@@ -707,7 +714,6 @@
     });
   }
 
-  initProjectsViewFilter();
   initProjectsViewModeSwitch();
   initSorting();
   loadCardsView();

app/assets/stylesheets/projects.scss

@@ -661,7 +661,166 @@ li.module-hover {
 
 
 // New projects page
-.projects-container {
+
+.projects-index {
+  &.active {
+    [data-view-mode="archived"] {
+      display: none !important;
+    }
+  }
+
+  &.archived {
+    [data-view-mode="active"] {
+      display: none !important;
+    }
+  }
+
+  .projects-view-mode {
+    &.active::after {
+      @include font-awesome;
+      content: "\f00c";
+      position: absolute;
+      right: 1em;
+    }
+  }
+
+  .header-actions {
+    align-items: center;
+    display: flex;
+    margin-left: auto;
+  }
+
+  .filter-container {
+    .projects-filters {
+      padding: 0;
+      width: 230px;
+
+      .header {
+        align-items: center;
+        border-bottom: $border-default;
+        display: flex;
+        height: 2.75em;
+        margin-bottom: 1em;
+        padding: 0  .3em 0 1em;
+
+        .title {
+          @include font-h2;
+          flex-grow: 1;
+          user-select: none;
+
+        }
+      }
+
+      .select-block {
+        display: inline-block;
+        padding: 0 1em 1em;
+        position: relative;
+        width: 100%;
+
+        label {
+          @include font-small;
+          font-weight: bold;
+          margin-bottom: .3em;
+          user-select: none;
+        }
+
+        &.folders {
+          align-items: center;
+          display: flex;
+
+          .folder-search-label {
+            margin: 0 .3em;
+          }
+        }
+      }
+
+      .recent-searches {
+        label {
+          @include font-small;
+          font-weight: bold;
+          margin-bottom: .3em;
+          padding: 0 1.5em;
+          user-select: none;
+        }
+      }
+
+      .footer {
+        align-items: center;
+        border-top: $border-default;
+        display: flex;
+        height: 4.25em;
+        justify-content: center;
+        padding: 0 1em;
+        position: relative;
+        width: 100%;
+      }
+    }
+
+    &.filters-applied::after {
+      background: $brand-danger;
+      border: 1px solid $color-white;
+      border-radius: 50%;
+      content: "";
+      height: .5em;
+      left: 1.5em;
+      position: absolute;
+      top: .5em;
+      width: .5em;
+    }
+
+    .connect-line {
+      background: $input-border;
+      height: 10px;
+      margin: 5px auto;
+      width: 2px;
+    }
+
+    .datetime-picker-container {
+      .calendar-input {
+        padding-right: 40px;
+      }
+    }
+
+    @media (min-width: 768px) {
+
+      .projects-filters {
+        width: 460px;
+      }
+
+      .footer {
+        .btn:last-child {
+          margin-left: auto;
+        }
+      }
+
+      .datetime-picker-container {
+        display: inline-block;
+      }
+
+      .connect-line {
+        display: inline-block;
+        margin: 0 12px;
+        position: relative;
+        top: 2px;
+        transform: rotate(90deg);
+      }
+
+      .created-on-label {
+        display: block;
+      }
+    }
+
+    .users-dropdown-list {
+      .item-avatar {
+        border-radius: 50%;
+        height: 20px;
+        margin: 0 .5em 0 0;
+        width: 20px;
+      }
+    }
+  }
+
+  .projects-container {
     margin: 35px 20px;
 
     .cards-wrapper {
@@ -687,11 +846,11 @@ li.module-hover {
         color: $color-volcano;
         display: flex;
         flex-wrap: wrap;
+        grid-row: span 4;
         height: 100%;
         padding: .5em 1em;
         position: relative;
         width: 100%;
-      grid-row: span 4;
 
         .checkbox-cell {
           align-items: center;
@@ -973,136 +1132,5 @@ li.module-hover {
         }
       }
     }
-}
-
-.projects-toolbar {
-  .filter-container {
-    .projects-filters {
-      padding: 0;
-      width: 230px;
-
-      .header {
-        align-items: center;
-        border-bottom: $border-default;
-        display: flex;
-        height: 2.75em;
-        margin-bottom: 1em;
-        padding: 0  .3em 0 1em;
-
-        .title {
-          @include font-h2;
-          flex-grow: 1;
-          user-select: none;
-
-        }
-      }
-
-      .select-block {
-        display: inline-block;
-        padding: 0 1em 1em;
-        position: relative;
-        width: 100%;
-
-        label {
-          @include font-small;
-          font-weight: bold;
-          margin-bottom: .3em;
-          user-select: none;
-        }
-
-        &.folders {
-          align-items: center;
-          display: flex;
-
-          .folder-search-label {
-            margin: 0 .3em;
-          }
-        }
-      }
-
-      .recent-searches {
-        label {
-          @include font-small;
-          font-weight: bold;
-          margin-bottom: .3em;
-          padding: 0 1.5em;
-          user-select: none;
-        }
-      }
-
-      .footer {
-        align-items: center;
-        border-top: $border-default;
-        display: flex;
-        height: 4.25em;
-        justify-content: center;
-        padding: 0 1em;
-        position: relative;
-        width: 100%;
-      }
-    }
-
-    &.filters-applied::after {
-      background: $brand-danger;
-      border: 1px solid $color-white;
-      border-radius: 50%;
-      content: "";
-      height: .5em;
-      left: 1.5em;
-      position: absolute;
-      top: .5em;
-      width: .5em;
-    }
-
-    .connect-line {
-      background: $input-border;
-      height: 10px;
-      margin: 5px auto;
-      width: 2px;
-    }
-
-    .datetime-picker-container {
-      .calendar-input {
-        padding-right: 40px;
-      }
-    }
-
-    @media (min-width: 768px) {
-
-      .projects-filters {
-        width: 460px;
-      }
-
-      .footer {
-        .btn:last-child {
-          margin-left: auto;
-        }
-      }
-
-      .datetime-picker-container {
-        display: inline-block;
-      }
-
-      .connect-line {
-        display: inline-block;
-        margin: 0 12px;
-        position: relative;
-        top: 2px;
-        transform: rotate(90deg);
-      }
-
-      .created-on-label {
-        display: block;
-      }
-    }
-
-    .users-dropdown-list {
-      .item-avatar {
-        border-radius: 50%;
-        height: 20px;
-        margin: 0 .5em 0 0;
-        width: 20px;
-      }
-    }
   }
 }

app/views/projects/index.html.erb

@@ -1,15 +1,20 @@
 <% provide(:head_title, t("projects.index.head_title")) %>
 <% provide(:sidebar_title, t("projects.index.navigation_title")) %>
 <% provide(:sidebar_url, sidebar_team_path(current_team, project_folder_id: @current_folder&.id)) %>
+<% provide(:container_class, 'no-second-nav-container') %>
+<% mode = params[:archived] ? :archived : :active %>
+
+<%= content_for :sidebar do %>
+  <%= render partial: 'shared/sidebar/projects', locals: { team: current_team } if current_team %>
+<% end %>
+
+<% content_for :breadcrumbs do %>
+  <%= render partial: 'projects/index/breadcrumbs' if @current_folder %>
+<% end %>
+
+<div class="content-pane flexible <%= mode %> projects-index" data-mode="<%= mode %>">
+  <%= render partial: 'projects/index/header' %>
 
-<% if current_team %>
-  <%= content_for :sidebar do %>
-    <%= render partial: 'shared/sidebar/projects', locals: { team: current_team } %>
-  <% end %>
-  <% content_for :breadcrumbs do %>
-    <%= render partial: "projects/index/breadcrumbs" if @current_folder %>
-  <% end %>
-  <%= render partial: "shared/secondary_navigation" %>
   <span style="display: none;" data-hook="projects-index-html"></span>
 
   <%= render partial: 'projects/index/modals/new_project' %>
@@ -35,6 +40,6 @@
       </div>
     </div>
   </div>
-<% end %>
+</div>
 
 <%= javascript_include_tag "projects/index" %>

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

@@ -0,0 +1,164 @@
+<div class="content-header">
+  <h1 data-view-mode="active"><%= t('projects.index.head_title') %></h1>
+  <h1 data-view-mode="archived"><i class="fas fa-archive"></i>&nbsp;<%= t('projects.index.head_title') %></h1>
+
+  <div class="header-actions">
+    <div>
+      <div class="filter-container dropdown project-filters-dropdown">
+        <div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></div>
+        <div class="dropdown-menu dropdown-menu-right projects-filters" role="menu" data-team-id="<%= current_team.id %>">
+          <div class="header">
+            <div class="title"><%= t("projects.index.filters_modal.title") %></div>
+            <div class="btn btn-light clear-button">
+              <i class="fas fa-times-circle"></i><%= t("projects.index.filters_modal.clear_btn") %></div>
+          </div>
+
+          <div class="select-block dropdown-selector-container">
+            <label><%= t('projects.index.filters_modal.text.label') %></label>
+            <div class="input-field dropdown">
+              <input id="textSearchFilterInput"
+                     class="dropdown-toggle search-field"
+                     type="text"
+                     name="search"
+                     autocomplete=åoffå"
+                     data-toggle="dropdown"
+                     data-placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>">
+            </div>
+            <div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput2">
+              <label><%= t("projects.index.filters_modal.recent_searches_label") %></label>
+            </div>
+          </div>
+
+          <div class="select-block">
+            <div class="created-on-label">
+              <label><%= t("projects.index.filters_modal.created_on.label") %></label>
+            </div>
+            <div class="datetime-picker-container" id="from-date">
+              <span class="fas fa-calendar-alt"></span>
+              <input id="createdOnStartDate"
+                     type="datetime"
+                     data-toggle='date-time-picker'
+                     class="form-control calendar-input"
+                     readonly
+                     placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
+                     data-date-format="<%= datetime_picker_format_full %>"
+                     data-date-locale="<%= I18n.locale %>"
+                     data-date-use-current="false"
+                     value=""/>
+            </div>
+
+            <div class="connect-line"></div>
+
+            <div class="datetime-picker-container" id="to-date">
+              <span class="fas fa-calendar-alt"></span>
+              <input id="createdOnEndDate"
+                     type="datetime"
+                     data-toggle='date-time-picker'
+                     class="form-control calendar-input"
+                     readonly
+                     placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
+                     data-date-format="<%= datetime_picker_format_full %>"
+                     data-date-locale="<%= I18n.locale %>"
+                     data-date-use-current="false"
+                     data-date-orientation="left"
+                     value=""/>
+            </div>
+          </div>
+
+          <div class="select-block">
+            <label><%= t("projects.index.filters_modal.members.label") %></label>
+            <select class="members-filter"
+                    data-ajax-url="<%= users_filter_projects_path %>"
+                    data-placeholder="<%= t('projects.index.filters_modal.members.placeholder') %>">
+            </select>
+          </div>
+
+          <div class="select-block" data-view-mode="archived">
+            <div class="created-on-label">
+              <label><%= t("projects.index.filters_modal.archived_on.label") %></label>
+            </div>
+            <div class="datetime-picker-container" id="from-date">
+              <span class="fas fa-calendar-alt"></span>
+              <input id="archivedOnStartDate"
+                     type="datetime"
+                     data-toggle='date-time-picker'
+                     class="form-control calendar-input"
+                     readonly
+                     placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
+                     data-date-format="<%= datetime_picker_format_full %>"
+                     data-date-locale="<%= I18n.locale %>"
+                     data-date-use-current="false"
+                     value=""/>
+            </div>
+
+            <div class="connect-line"></div>
+
+            <div class="datetime-picker-container" id="to-date">
+              <span class="fas fa-calendar-alt"></span>
+              <input id="archivedOnEndDate"
+                     type="datetime"
+                     data-toggle='date-time-picker'
+                     class="form-control calendar-input"
+                     readonly
+                     placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
+                     data-date-format="<%= datetime_picker_format_full %>"
+                     data-date-locale="<%= I18n.locale %>"
+                     data-date-use-current="false"
+                     data-date-orientation="left"
+                     value=""/>
+            </div>
+          </div>
+
+          <div class="select-block folders">
+          <span class="sci-checkbox-container">
+            <%= check_box_tag :folder_search, 'accepted', false, {class: "sci-checkbox"} %>
+            <span class="sci-checkbox-label"></span>
+          </span>
+            <span class="folder-search-label"><%= t("projects.index.filters_modal.folders.label") %></span>
+            <i class="fas fa-info-circle" title="<%= t("projects.index.filters_modal.folders.tooltip") %>"></i>
+          </div>
+
+          <div class="footer">
+            <div id="applyProjectFiltersButton" class="btn btn-primary"><%= t("projects.index.filters_modal.show_btn.one") %></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="dropdown">
+        <button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+          <span><%= t("general.sort.#{@current_sort}_html") %></span>
+          <span class="caret"></span>
+        </button>
+        <ul id="sortMenuDropdown" class="dropdown-menu" aria-labelledby="sortMenu">
+          <% %w(new old atoz ztoa archived_first archived_last).each do |sort| %>
+            <li <%= %w(archived_first archived_last).include?(sort) ? 'data-view-mode=archived' : '' %>>
+              <% if @current_sort != sort %>
+                <a href="#" data-sort="<%= sort %>"><%= t("projects.index.sort.#{sort}") %></a>
+              <% else %>
+                <a class="disabled" href="#" data-sort="<%= sort %>"><%= t("projects.index.sort.#{sort}") %></a>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+    <%= render layout: "shared/view_switch", locals: { disabled: false } do %>
+      <li class="view-switch-cards projects-view-mode active">
+        <i class="fas fa-th-large button-icon"></i> <%= "Cards" %>
+      </li>
+
+      <li class="view-switch-list projects-view-mode ">
+        <i class="fas fa-list button-icon"></i> <%= "Table" %>
+      </li>
+
+      <li class="view-switch-active archive-switch" data-view-mode="archived" data-mode="active">
+        <i class="fas fa-rocket button-icon"></i> <%= "Go to Active projects" %>
+      </li>
+
+      <li class="view-switch-archived archive-switch" data-view-mode="active" data-mode="archived">
+        <i class="fas fa-archive button-icon"></i> <%= "Go to Archived projects" %>
+      </li>
+    <% end %>
+  </div>
+</div>

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

@@ -7,7 +7,7 @@
       <div class="new-project-actions pull-left">
         <!-- new project button -->
         <% if current_team && can_create_projects?(current_team) %>
-          <a href="#" class="btn btn-primary new-project-btn">
+          <a href="#" class="btn btn-primary new-project-btn" data-view-mode="active">
             <span class="fas fa-plus" aria-hidden="true"></span>
             <span class="hidden-xs"><%= t('projects.index.new') %></span>
           </a>
@@ -24,15 +24,15 @@
       </div>
 
       <div class="project-actions pull-left">
-        <a href="#" class="btn btn-secondary edit-project-btn single-project-action hidden">
+        <a href="#" class="btn btn-secondary edit-project-btn single-project-action hidden" data-view-mode="active">
           <span class="fas fa-folder" aria-hidden="true"></span>
           <span class="hidden-xs"><%= t('projects.index.edit_button') %></span>
         </a>
-        <a href="#" class="btn btn-secondary move-projects-btn multiple-projects-action hidden">
+        <a href="#" class="btn btn-secondary move-projects-btn multiple-projects-action hidden" >
           <span class="fas fa-arrow-right" aria-hidden="true"></span>
           <span class="hidden-xs"><%= t('projects.index.move_button') %></span>
         </a>
-        <a href="#" class="btn btn-secondary archive-projects-btn multiple-projects-action project-only-action hidden">
+        <a href="#" class="btn btn-secondary archive-projects-btn multiple-projects-action project-only-action hidden" data-view-mode="active">
           <span class="fas fa-archive" aria-hidden="true"></span>
           <span class="hidden-xs"><%= t('projects.index.archive_button') %></span>
         </a>
@@ -43,112 +43,6 @@
           <span class="hidden-xs-custom"><%= t('projects.export_projects.export_button') %></span>
         </a>
       </div>
-
-      <div class="pull-right">
-        <!-- project filter -->
-        <div class="filter-container dropdown project-filters-dropdown">
-          <div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></div>
-          <div class="dropdown-menu dropdown-menu-right projects-filters" role="menu" data-team-id="<%= current_team.id %>">
-            <div class="header">
-              <div class="title"><%= t("projects.index.filters_modal.title") %></div>
-              <div class="btn btn-light clear-button">
-                <i class="fas fa-times-circle"></i><%= t("projects.index.filters_modal.clear_btn") %></div>
-            </div>
-
-            <div class="select-block dropdown-selector-container">
-              <label><%= t('projects.index.filters_modal.text.label') %></label>
-              <div class="input-field dropdown">
-                <input id="textSearchFilterInput"
-                       class="dropdown-toggle search-field"
-                       type="text"
-                       name="search"
-                       autocomplete="off"
-                       data-toggle="dropdown"
-                       data-placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>">
-              </div>
-              <div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput2">
-                <label><%= t("projects.index.filters_modal.recent_searches_label") %></label>
-              </div>
-            </div>
-
-            <div class="select-block">
-              <div class="created-on-label">
-                <label><%= t("projects.index.filters_modal.created_on.label") %></label>
-              </div>
-              <div class="datetime-picker-container" id="from-date">
-                <span class="fas fa-calendar-alt"></span>
-                <input id="calendarStartDate"
-                       type="datetime"
-                       data-toggle='date-time-picker'
-                       class="form-control calendar-input"
-                       readonly
-                       placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
-                       data-date-format="<%= datetime_picker_format_full %>"
-                       data-date-locale="<%= I18n.locale %>"
-                       data-date-use-current="false"
-                       value=""/>
-              </div>
-
-              <div class="connect-line"></div>
-
-              <div class="datetime-picker-container" id="to-date">
-                <span class="fas fa-calendar-alt"></span>
-                <input id="calendarDueDate"
-                       type="datetime"
-                       data-toggle='date-time-picker'
-                       class="form-control calendar-input"
-                       readonly
-                       placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
-                       data-date-format="<%= datetime_picker_format_full %>"
-                       data-date-locale="<%= I18n.locale %>"
-                       data-date-use-current="false"
-                       data-date-orientation="left"
-                       value=""/>
-              </div>
-            </div>
-
-            <div class="select-block">
-              <label><%= t("projects.index.filters_modal.members.label") %></label>
-              <select class="members-filter"
-                      data-ajax-url="<%= users_filter_projects_path %>"
-                      data-placeholder="<%= t('projects.index.filters_modal.members.placeholder') %>">
-              </select>
-            </div>
-
-            <div class="select-block folders">
-            <span class="sci-checkbox-container">
-              <%= check_box_tag :folder_search, 'accepted', false, {class: "sci-checkbox"} %>
-              <span class="sci-checkbox-label"></span>
-            </span>
-              <span class="folder-search-label"><%= t("projects.index.filters_modal.folders.label") %></span>
-              <i class="fas fa-info-circle" title="<%= t("projects.index.filters_modal.folders.tooltip") %>"></i>
-            </div>
-
-            <div class="footer">
-              <div id="applyProjectFiltersButton" class="btn btn-primary"><%= t("projects.index.filters_modal.show_btn.one") %></div>
-            </div>
-          </div>
-        </div>
-
-        <!-- project sort -->
-        <div class="dropdown">
-          <button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-            <span><%= t("general.sort.#{@current_sort}_html") %></span>
-            <span class="caret"></span>
-          </button>
-          <ul id="sortMenuDropdown" class="dropdown-menu" aria-labelledby="sortMenu">
-          <% ["new", "old", "atoz", "ztoa"].each do |sort| %>
-            <li>
-              <% if @current_sort != sort %>
-                <a href="#" data-sort="<%= sort %>"><%= t("general.sort.#{sort}_html") %></a>
-              <% else %>
-                <a class="disabled" href="#" data-sort="<%= sort %>"><%= t("general.sort.#{sort}_html") %></a>
-              <% end %>
-            </li>
-          <% end %>
-          </ul>
-        </div>
-      </div>
     </div>
   </form>
 </div>

config/locales/en.yml

@@ -385,6 +385,10 @@ en:
           label: "Created on"
           from_placeholder: "From"
           to_placeholder: "To"
+        archived_on:
+          label: "Archived on"
+          from_placeholder: "From"
+          to_placeholder: "To"
         members:
           label: "Members"
           placeholder: "Select members of a project"
@@ -397,6 +401,13 @@ en:
          none: "No results"
          one: "Show result"
         clear_btn: "Clear"
+      sort:
+        new: "Started last"
+        old: "Started first"
+        atoz: "Name A - Z"
+        ztoa: "Name Z - A"
+        archived_first: "Archived first"
+        archived_last: "Archived last"
 
     export_projects:
       export_button: "Export"