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

@@ -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;
                 }
 

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">
+<td ng-repeat="criteria in chosenCriteria">
-    <span time-moment eventdate="story.created_at" short-date="true">
+    <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>

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">
+                    <th ng-repeat="column in chosenCriteria">
-                        <a href="" ng-click="toggleFilter('created_at')">
+                        <a href="" ng-click="toggleFilter(column)">
-                            Created
+                            {{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">

src/theme/base/_stories.scss

@@ -39,4 +39,8 @@
 .label .fa-times:hover{
     cursor:pointer;
     opacity:1;
+}
+
+#query .dropdown-menu > li{
+    padding-left:1rem;
 }