Merge pull request #3502 from marshmalien/feat-toolbar-sort-instance-modal-list

Feat toolbar sort instance modal list

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]
This commit is contained in:
softwarefactory-project-zuul[bot] 2019-03-26 18:57:24 +00:00 committed by GitHub
commit 1b0f5b05ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 95 additions and 28 deletions

View File

@ -18,7 +18,6 @@ function atRowItem () {
statusTip: '@',
statusClick: '&?',
labelValue: '@',
labelLink: '@',
labelState: '@',
value: '@',
valueLink: '@',

View File

@ -32,9 +32,6 @@
<div class="at-RowItem-tag at-RowItem-tag--secondary" ng-if="secondaryTag">
{{ secondaryTag }}
</div>
<div class="at-RowItem-label" ng-if="labelValue && labelLink">
<a ng-href="{{ labelLink }}">{{ labelValue }}</a>
</div>
<div class="at-RowItem-label" ng-if="labelValue && !labelLink && !labelState">
{{ labelValue }}
</div>

View File

@ -2,6 +2,7 @@ function InstanceModalController ($scope, $state, Dataset, models, strings, Proc
const { instanceGroup } = models;
const vm = this || {};
let relatedInstanceIds = [];
let paginateQuerySet = {};
function setRelatedInstances () {
vm.relatedInstances = instanceGroup.get('related.instances.results');
@ -21,11 +22,9 @@ function InstanceModalController ($scope, $state, Dataset, models, strings, Proc
vm.instanceGroupId = instanceGroup.get('id');
vm.instanceGroupName = instanceGroup.get('name');
vm.querySet = $state.params.instance_search;
vm.list = {
name: 'instances',
iterator: 'instance',
iterator: 'add_instance',
basePath: `/api/v2/instances/`
};
@ -33,14 +32,51 @@ function InstanceModalController ($scope, $state, Dataset, models, strings, Proc
vm.instance_dataset = Dataset.data;
setRelatedInstances();
$scope.$watch('vm.instances', function() {
angular.forEach(vm.instances, function(instance) {
instance.isSelected = _.filter(vm.selectedRows, { 'id': instance.id }).length > 0;
});
});
}
const toolbarSortDefault = {
label: `${strings.get('sort.NAME_ASCENDING')}`,
value: 'hostname'
};
vm.toolbarSortValue = toolbarSortDefault;
vm.toolbarSortOptions = [
toolbarSortDefault,
{
label: `${strings.get('sort.NAME_DESCENDING')}`,
value: '-hostname'
}
];
const removeStateParamsListener = $scope.$watchCollection('$state.params', () => {
setToolbarSort();
});
function setToolbarSort () {
const orderByValue = _.get($state.params, 'add_instance_search.order_by');
const sortValue = _.find(vm.toolbarSortOptions, (option) => option.value === orderByValue);
if (sortValue) {
vm.toolbarSortValue = sortValue;
} else {
vm.toolbarSortValue = toolbarSortDefault;
}
}
vm.onToolbarSort = (sort) => {
vm.toolbarSortValue = sort;
const queryParams = Object.assign(
{},
$state.params.add_instance_search,
paginateQuerySet,
{ order_by: sort.value }
);
$state.go('.', {
add_instance_search: queryParams
}, { notify: false, location: 'replace' });
};
vm.submit = () => {
Wait('start');
const selectedRowIds = vm.selectedRows.map(instance => instance.id);
@ -97,8 +133,22 @@ function InstanceModalController ($scope, $state, Dataset, models, strings, Proc
row.isSelected = true;
vm.selectedRows.push(row);
}
};
const removeUpdateDatasetListener = $scope.$on('updateDataset', (e, dataset, queryset) => {
vm.instances = dataset.results;
vm.instance_dataset = dataset;
paginateQuerySet = queryset;
angular.forEach(vm.instances, function(instance) {
instance.isSelected = _.filter(vm.selectedRows, { 'id': instance.id }).length > 0;
});
});
$scope.$on('$destroy', function() {
removeUpdateDatasetListener();
removeStateParamsListener();
});
}
InstanceModalController.$inject = [

View File

@ -18,16 +18,21 @@
class="at-List-search"
django-model="instances"
base-path="{{vm.list.basePath}}"
iterator="instance"
iterator="add_instance"
list="vm.list"
collection="vm.instances"
dataset="vm.instance_dataset"
search-tags="vm.searchTags"
default-params="vm.querySet"
query-set="vm.querySet"
search-bar-full-width="true">
</smart-search>
</div>
<at-list-toolbar
ng-if="vm.instances.length > 0"
sort-only="true"
sort-value="vm.toolbarSortValue"
sort-options="vm.toolbarSortOptions"
on-sort="vm.onToolbarSort">
</at-list-toolbar>
<at-list results='vm.instances'>
<at-row ng-repeat="instance in vm.instances"
ng-class="{'at-Row--active': (instance.id === vm.activeId)}">
@ -51,9 +56,8 @@
<paginate
collection="vm.instances"
dataset="vm.instance_dataset"
iterator="instance"
base-path="{{vm.list.basePath}}"
query-set="vm.querySet">
iterator="add_instance"
base-path="{{vm.list.basePath}}">
</paginate>
<div class="at-ActionGroup">
<div class="pull-right">

View File

@ -1,4 +1,4 @@
function InstancesController ($scope, $state, $http, models, strings, Dataset, ProcessErrors) {
function InstancesController ($scope, $state, $http, $transitions, models, strings, Dataset, ProcessErrors) {
const { instanceGroup } = models;
const vm = this || {};
let paginateQuerySet = {};
@ -21,6 +21,7 @@ function InstancesController ($scope, $state, $http, models, strings, Dataset, P
value: 'hostname'
};
vm.toolbarSortValue = toolbarSortDefault;
vm.toolbarSortOptions = [
toolbarSortDefault,
{
@ -29,9 +30,7 @@ function InstancesController ($scope, $state, $http, models, strings, Dataset, P
}
];
vm.toolbarSortValue = toolbarSortDefault;
$scope.$watchCollection('$state.params', () => {
const removeStateParamsListener = $scope.$watchCollection('$state.params', () => {
setToolbarSort();
});
@ -124,17 +123,32 @@ function InstancesController ($scope, $state, $http, models, strings, Dataset, P
return id === selected;
};
$scope.$on('updateDataset', (e, dataset, queryset) => {
const removeUpdateDatasetListener = $scope.$on('updateDataset', (e, dataset, queryset) => {
vm.instances = dataset.results;
vm.instance_dataset = dataset;
paginateQuerySet = queryset;
});
const removeStateChangeListener = $transitions.onSuccess({}, function(trans) {
if (trans.to().name === 'instanceGroups.instances.modal.add') {
removeUpdateDatasetListener();
removeStateChangeListener();
removeStateParamsListener();
}
});
$scope.$on('$destroy', function() {
removeUpdateDatasetListener();
removeStateChangeListener();
removeStateParamsListener();
});
}
InstancesController.$inject = [
'$scope',
'$state',
'$http',
'$transitions',
'resolvedModels',
'InstanceGroupsStrings',
'Dataset',

View File

@ -51,7 +51,7 @@
<div class="at-Row--inline">
<at-row-item
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INSTANCES') }}"
label-link="/#/instance_groups/{{ instance_group.id }}/instances"
label-state="instanceGroups.instances({instance_group_id: {{ instance_group.id }}})"
value="{{ instance_group.instances }}"
inline="true"
badge="true">

View File

@ -183,6 +183,7 @@ function InstanceGroupsRun ($stateExtender, strings) {
$stateExtender.addState({
name: 'instanceGroups.instances',
url: '/:instance_group_id/instances',
searchPrefix: 'instance',
ncyBreadcrumb: {
parent: 'instanceGroups.edit',
label: strings.get('state.INSTANCES_BREADCRUMB_LABEL')
@ -230,11 +231,13 @@ function InstanceGroupsRun ($stateExtender, strings) {
$stateExtender.addState({
name: 'instanceGroups.instances.modal.add',
url: '/add',
ncyBreadcrumb: {
skip: true,
},
searchPrefix: 'add_instance',
params: {
instance_search: {
add_instance_search: {
value: {
page_size: '10',
order_by: 'hostname'
@ -254,7 +257,7 @@ function InstanceGroupsRun ($stateExtender, strings) {
Dataset: ['GetBasePath', 'QuerySet', '$stateParams',
function(GetBasePath, qs, $stateParams) {
let path = `${GetBasePath('instances')}`;
return qs.search(path, $stateParams[`instance_search`]);
return qs.search(path, $stateParams[`add_instance_search`]);
}
]
}