mirror of
https://github.com/ansible/awx.git
synced 2026-01-18 21:21:21 -03:30
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:
commit
1b0f5b05ad
@ -18,7 +18,6 @@ function atRowItem () {
|
||||
statusTip: '@',
|
||||
statusClick: '&?',
|
||||
labelValue: '@',
|
||||
labelLink: '@',
|
||||
labelState: '@',
|
||||
value: '@',
|
||||
valueLink: '@',
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 = [
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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`]);
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user