Merge "Allowing the user to choose what Columns are seen"

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