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>
This commit is contained in:
Malek Karray
Adam Coldrick
parent
d77e153a95
commit
66d40b79fa
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -40,3 +40,7 @@
|
||||
cursor:pointer;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
#query .dropdown-menu > li{
|
||||
padding-left:1rem;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user