From 66d40b79faa4a91381922f41e7fe6c283472a881 Mon Sep 17 00:00:00 2001
From: Malek Karray <malek.karray@windriver.com>
Date: Wed, 3 Apr 2019 16:14:54 -0400
Subject: [PATCH] Allowing the user to choose what Columns are seen

This patch enables the user to choose what columns they can see
in the story menu. By checking or unchecking the item it will add
or remove the chosen column. The user also has the ability click on
a column to sort by that field. As of this patch, the frontend for
the 'Creator' column has been commented out because the backend
supports filtering by creator_id and not the creator's full name.
There has been talk of adding a full_name column to the story object
to support that sorting functionality.

Story: 2005413
Task: 30430

Change-Id: If36033b727786f3bb5bed1404f69530c33bcd7d8
Signed-off-by: Malek Karray <malek.karray@windriver.com>
---
 src/app/search/directive/search_results.js    | 48 +++++++++++++++-
 .../search/template/story_search_item.html    | 21 ++++---
 src/app/stories/template/list.html            | 57 ++++++++++---------
 src/theme/base/_stories.scss                  |  4 ++
 4 files changed, 90 insertions(+), 40 deletions(-)

diff --git a/src/app/search/directive/search_results.js b/src/app/search/directive/search_results.js
index b2df3875..318a467f 100644
--- a/src/app/search/directive/search_results.js
+++ b/src/app/search/directive/search_results.js
@@ -20,7 +20,7 @@
  * @see ProjectListController
  */
 angular.module('sb.search').directive('searchResults',
-    function ($log, $parse, Criteria, $injector, Preference) {
+    function ($log, $parse, Criteria, $injector, Preference, User) {
         'use strict';
 
         return {
@@ -36,6 +36,41 @@ angular.module('sb.search').directive('searchResults',
                     args.searchWithoutCriteria === 'true';
                 var criteria = [];
 
+                //Controls dropdown events
+                $scope.dropdownControl = function(choice){
+                    if (choice === 'open'){
+                        angular.element(document.querySelector('#query'))
+                                .addClass('open');
+                        return;
+                    }
+                    angular.element(document.querySelector('#query'))
+                            .removeClass('open');
+                };
+
+                //Controls which columns are chosen
+                $scope.columnControl = function(filter){
+                    if ($scope.chosenCriteria.includes(filter)){
+                        $scope.chosenCriteria.splice($scope.chosenCriteria
+                                .indexOf(filter), 1);
+                        return;
+                    }
+                    $scope.chosenCriteria.push(filter);
+                };
+
+                //Dropdown Options
+                $scope.queryFilters = {
+                    'created_at': 'Created At',
+                    'updated_at': 'Updated At',
+                    'status': 'Status',
+                    'private': 'Private',
+                    'creator_id': 'Creator'
+
+                };
+
+
+                $scope.chosenCriteria = ['created_at', 'updated_at', 'status'];
+                $scope.timeCriteria = ['created_at', 'updated_at'];
+
                 $scope.isSearching = false;
                 $scope.searchResults = [];
 
@@ -53,6 +88,16 @@ angular.module('sb.search').directive('searchResults',
                  */
                 $scope.sortDirection = 'desc';
 
+                function showFullName(story_object){
+                    var full_name;
+                    story_object.forEach(function(story){
+                        full_name = User.get({'id': story.creator_id});
+                        full_name.$promise.then(function(data){
+                            story.creator_id = data.full_name;
+                        });
+                    });
+                }
+
                 /**
                  * Handle error result.
                  */
@@ -71,6 +116,7 @@ angular.module('sb.search').directive('searchResults',
                     $scope.searchOffset = parseInt(headers('X-Offset')) || 0;
                     $scope.searchLimit = parseInt(headers('X-Limit')) || 0;
                     $scope.searchResults = results;
+                    showFullName($scope.searchResults);
                     $scope.isSearching = false;
                 }
 
diff --git a/src/app/search/template/story_search_item.html b/src/app/search/template/story_search_item.html
index 27a38027..fc1e7ae6 100644
--- a/src/app/search/template/story_search_item.html
+++ b/src/app/search/template/story_search_item.html
@@ -1,9 +1,9 @@
-<td class="col-xs-7" style="word-break: break-word">
+<td  style="word-break: break-word">
     <a href="#!/story/{{story.id}}">
         {{story.id}}: {{story.title | truncate: 97}}
     </a>
     <small ng-show="isLoggedIn">
-        <subscribe
+        <subscribe class="pull-right"
                resource="story"
                resource-id="story.id"
                subscriptions="storySubscriptions">
@@ -22,14 +22,13 @@
         </li>
     </ul>
 </td>
-<td class="col-sm-2 hidden-xs">
-    <span time-moment eventdate="story.created_at" short-date="true">
+<td ng-repeat="criteria in chosenCriteria">
+    <span ng-if="timeCriteria.includes(criteria)" time-moment eventdate="story[criteria]" short-date="true">
+    </span>
+    <span ng-if="!timeCriteria.includes(criteria) && criteria != 'status'">
+        {{story[criteria]}}
+    </span>
+    <span ng-if="criteria == 'status'">
+        <story-status-label story="story"/>
     </span>
 </td>
-<td class="col-sm-2 hidden-xs">
-    <span time-moment eventdate="story.updated_at" short-date="true">
-    </span>
-</td>
-<td class="text-right col-xs-1">
-    <story-status-label story="story"/>
-</td>
diff --git a/src/app/stories/template/list.html b/src/app/stories/template/list.html
index 7d4c2c1c..ec5df3d7 100644
--- a/src/app/stories/template/list.html
+++ b/src/app/stories/template/list.html
@@ -65,6 +65,30 @@
                         on-page-size="updatePageSize(pageSize)"
                         ></result-set-pager>
             </div>
+            <div class="align-bottom">
+              Columns:
+              <span class="form-control-static" id="query">
+                  <button class="btn btn-xs btn-default" ng-click="dropdownControl('open')" dropdown-toggle>
+                      <i class="fas fa-sort-alpha-down"></i>
+                  </button>
+                      <div class = "dropdown-menu dropdown-menu-left" role="menu">
+                          <li ng-repeat="(type, value) in queryFilters">
+                              <input ng-click="columnControl(type)" type="checkbox"
+                                     ng-checked=chosenCriteria.includes(type)
+                                     class="form-check-input"
+                                     id="{{ type }}"/>
+                              <label class="form-check-label" for="{{ type }}">{{ value }}</label>
+                          </li>
+                          <div class="row text-center">
+                              <div class="col-xs-8">
+                                  <button class="btn btn-sm btn-primary" ng-click="dropdownControl('close')">
+                                      Close
+                                  </button>
+                              </div>
+                          </div>
+                      </div>
+              </span>
+            </div>
         </div>
     </div>
 
@@ -92,40 +116,17 @@
                             </i>
                         </a>
                     </th>
-                    <th class="hidden-xs">
-                        <a href="" ng-click="toggleFilter('created_at')">
-                            Created
+                    <th ng-repeat="column in chosenCriteria">
+                        <a href="" ng-click="toggleFilter(column)">
+                            {{queryFilters[column]}}
                             <i class="fa fa-caret-down"
-                               ng-if="sortField == 'created_at' && sortDirection == 'desc'">
+                               ng-if="sortField == column && sortDirection == 'desc'">
                             </i>
                             <i class="fa fa-caret-up"
-                               ng-if="sortField == 'created_at' && sortDirection == 'asc'">
+                               ng-if="sortField == column && sortDirection == 'asc'">
                             </i>
                         </a>
                     </th>
-                    <th class="hidden-xs">
-                        <a href="" ng-click="toggleFilter('updated_at')">
-                            Updated
-                            <i class="fa fa-caret-down"
-                               ng-if="sortField == 'updated_at' && sortDirection == 'desc'">
-                            </i>
-                            <i class="fa fa-caret-up"
-                               ng-if="sortField == 'updated_at' && sortDirection == 'asc'">
-                            </i>
-                        </a>
-                    </th>
-                    <th class="text-right">
-                        <a href="" ng-click="toggleFilter('status')">
-                            Status
-                            <i class="fa fa-caret-down"
-                               ng-if="sortField == 'status' && sortDirection == 'desc'">
-                            </i>
-                            <i class="fa fa-caret-up"
-                               ng-if="sortField == 'status' && sortDirection == 'asc'">
-                            </i>
-                        </a>
-                    </th>
-                    <th></th>
                 </tr>
                 </thead>
                 <tbody ng-if="searchResults.length != 0 && !isSearching">
diff --git a/src/theme/base/_stories.scss b/src/theme/base/_stories.scss
index d784e609..b3506c82 100644
--- a/src/theme/base/_stories.scss
+++ b/src/theme/base/_stories.scss
@@ -39,4 +39,8 @@
 .label .fa-times:hover{
     cursor:pointer;
     opacity:1;
+}
+
+#query .dropdown-menu > li{
+    padding-left:1rem;
 }
\ No newline at end of file