mirror of
https://github.com/ansible/awx.git
synced 2024-10-31 23:51:09 +03:00
Merge pull request #3367 from marshmalien/feat-toolbar-sort-jobs-list
Add toolbar sort to Jobs lists Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]
This commit is contained in:
commit
7b570b59c6
@ -4,6 +4,13 @@ function JobsStrings (BaseString) {
|
||||
const { t } = this;
|
||||
const ns = this.jobs;
|
||||
|
||||
ns.sort = {
|
||||
NAME_ASCENDING: t.s('Name (Ascending)'),
|
||||
NAME_DESCENDING: t.s('Name (Descending)'),
|
||||
START_TIME: t.s('Start Time'),
|
||||
FINISH_TIME: t.s('Finish Time')
|
||||
};
|
||||
|
||||
ns.list = {
|
||||
PANEL_TITLE: t.s('JOBS'),
|
||||
ROW_ITEM_LABEL_STARTED: t.s('Started'),
|
||||
|
@ -28,6 +28,7 @@ function ListJobsController (
|
||||
// smart-search
|
||||
const name = 'jobs';
|
||||
const iterator = 'job';
|
||||
let paginateQuerySet = {};
|
||||
|
||||
let launchModalOpen = false;
|
||||
let refreshAfterLaunchClose = false;
|
||||
@ -40,6 +41,63 @@ function ListJobsController (
|
||||
vm.job_dataset = Dataset.data;
|
||||
vm.jobs = Dataset.data.results;
|
||||
|
||||
$scope.$watch('$state.params', () => {
|
||||
setToolbarSort();
|
||||
}, true);
|
||||
|
||||
const toolbarSortDefault = {
|
||||
label: `${strings.get('sort.FINISH_TIME')}`,
|
||||
value: '-finished'
|
||||
};
|
||||
|
||||
function setToolbarSort () {
|
||||
const orderByValue = _.get($state.params, 'job_search.order_by');
|
||||
const sortValue = _.find(vm.toolbarSortOptions, (option) => option.value === orderByValue);
|
||||
if (sortValue) {
|
||||
vm.toolbarSortValue = sortValue;
|
||||
} else {
|
||||
vm.toolbarSortValue = toolbarSortDefault;
|
||||
}
|
||||
}
|
||||
|
||||
vm.toolbarSortOptions = [
|
||||
{ label: `${strings.get('sort.NAME_ASCENDING')}`, value: 'name' },
|
||||
{ label: `${strings.get('sort.NAME_DESCENDING')}`, value: '-name' },
|
||||
{ label: `${strings.get('sort.START_TIME')}`, value: 'finished' },
|
||||
toolbarSortDefault
|
||||
];
|
||||
|
||||
vm.toolbarSortValue = toolbarSortDefault;
|
||||
|
||||
// Temporary hack to retrieve $scope.querySet from the paginate directive.
|
||||
// Remove this event listener once the page and page_size params
|
||||
// are represented in the url.
|
||||
$scope.$on('updateDataset', (event, dataset, queryset) => {
|
||||
paginateQuerySet = queryset;
|
||||
});
|
||||
|
||||
vm.onToolbarSort = (sort) => {
|
||||
vm.toolbarSortValue = sort;
|
||||
|
||||
const queryParams = Object.assign(
|
||||
{},
|
||||
$state.params.job_search,
|
||||
paginateQuerySet,
|
||||
{ order_by: sort.value }
|
||||
);
|
||||
|
||||
// Update URL with params
|
||||
$state.go('.', {
|
||||
job_search: queryParams
|
||||
}, { notify: false, location: 'replace' });
|
||||
|
||||
qs.search(SearchBasePath, queryParams)
|
||||
.then(({ data }) => {
|
||||
vm.jobs = data.results;
|
||||
vm.job_dataset = data;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.$watch('vm.job_dataset.count', () => {
|
||||
$scope.$emit('updateCount', vm.job_dataset.count, 'jobs');
|
||||
});
|
||||
|
@ -14,10 +14,13 @@
|
||||
</div>
|
||||
<at-list-toolbar
|
||||
ng-if="vm.jobs.length > 0"
|
||||
sort-only="false"
|
||||
on-collapse="vm.onCollapse"
|
||||
on-expand="vm.onExpand"
|
||||
is-collapsed="vm.isCollapsed">
|
||||
on-collapse="vm.onCollapse"
|
||||
is-collapsed="vm.isCollapsed"
|
||||
sort-only="false"
|
||||
sort-value="vm.toolbarSortValue"
|
||||
sort-options="vm.toolbarSortOptions"
|
||||
on-sort="vm.onToolbarSort">
|
||||
</at-list-toolbar>
|
||||
<at-list results="vm.jobs" empty-list-reason="{{ vm.emptyListReason }}">
|
||||
<!-- TODO: implement resources are missing red indicator as present in mockup -->
|
||||
|
@ -13,6 +13,7 @@ function projectsListController (
|
||||
) {
|
||||
const vm = this || {};
|
||||
const [ProjectModel] = resolvedModels;
|
||||
let paginateQuerySet = {};
|
||||
$scope.canAdd = ProjectModel.options('actions.POST');
|
||||
|
||||
vm.strings = strings;
|
||||
@ -75,14 +76,28 @@ function projectsListController (
|
||||
|
||||
vm.toolbarSortValue = toolbarSortDefault;
|
||||
|
||||
// Temporary hack to retrieve $scope.querySet from the paginate directive.
|
||||
// Remove this event listener once the page and page_size params
|
||||
// are represented in the url.
|
||||
$scope.$on('updateDataset', (event, dataset, queryset) => {
|
||||
paginateQuerySet = queryset;
|
||||
});
|
||||
|
||||
vm.onToolbarSort = (sort) => {
|
||||
vm.toolbarSortValue = sort;
|
||||
|
||||
const queryParams = Object.assign(
|
||||
{},
|
||||
$state.params.project_search,
|
||||
paginateQuerySet,
|
||||
{ order_by: sort.value }
|
||||
);
|
||||
|
||||
// Update URL with params
|
||||
$state.go('.', {
|
||||
project_search: queryParams
|
||||
}, { notify: false, location: 'replace' });
|
||||
|
||||
qs.search(GetBasePath(vm.list.basePath), queryParams)
|
||||
.then(({ data }) => {
|
||||
vm.dataset = data;
|
||||
|
@ -200,7 +200,6 @@
|
||||
|
||||
&-main {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
padding-bottom: @at-space-4x;
|
||||
|
@ -71,25 +71,12 @@
|
||||
.at-List-toolbar-item {
|
||||
padding: 2px 10px;
|
||||
border-left: 1px solid @at-color-list-border;
|
||||
border-right: 1px solid @at-color-list-border;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: @at-gray-f2;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid @at-color-list-border;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: @at-blue;
|
||||
color: @at-white;
|
||||
@ -98,12 +85,6 @@
|
||||
|
||||
.at-List-toolbarDropdown {
|
||||
border-top-right-radius: @at-border-radius;
|
||||
padding: 2px 10px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: @at-gray-f2;
|
||||
}
|
||||
|
||||
&-toggle {
|
||||
background: none;
|
||||
|
@ -1,7 +1,7 @@
|
||||
<div class="at-List-toolbar--attached">
|
||||
<div ng-class="isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onCollapse()">{{ vm.strings.get('toolbar.COMPACT') }}</div>
|
||||
<div ng-class="!isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onExpand()">{{ vm.strings.get('toolbar.EXPANDED') }}</div>
|
||||
<div ng-if="sortOptions" class="at-List-toolbarDropdown dropdown">
|
||||
<div ng-if="sortOptions" class="at-List-toolbar-item at-List-toolbarDropdown dropdown">
|
||||
<button
|
||||
class="at-List-toolbarDropdown-toggle dropdown-toggle"
|
||||
data-display="static"
|
||||
|
@ -55,7 +55,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
|
||||
}
|
||||
$scope.dataset = res.data;
|
||||
$scope.collection = res.data.results;
|
||||
$scope.$emit('updateDataset', res.data);
|
||||
$scope.$emit('updateDataset', res.data, queryset);
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -8,7 +8,7 @@ export default ['templateUrl',
|
||||
dataset: '=',
|
||||
iterator: '@',
|
||||
basePath: '@',
|
||||
querySet: '=',
|
||||
querySet: '=?',
|
||||
maxVisiblePages: '@',
|
||||
hideViewPerPage: '='
|
||||
},
|
||||
|
@ -46,7 +46,7 @@ function SmartSearchController (
|
||||
qs.search(path, queryset).then((res) => {
|
||||
$scope.dataset = res.data;
|
||||
$scope.collection = res.data.results;
|
||||
$scope.$emit('updateDataset', res.data);
|
||||
$scope.$emit('updateDataset', res.data, queryset);
|
||||
});
|
||||
|
||||
$scope.searchTerm = null;
|
||||
@ -77,7 +77,7 @@ function SmartSearchController (
|
||||
}
|
||||
$scope.dataset = res.data;
|
||||
$scope.collection = res.data.results;
|
||||
$scope.$emit('updateDataset', res.data);
|
||||
$scope.$emit('updateDataset', res.data, queryset);
|
||||
});
|
||||
|
||||
$scope.searchTerm = null;
|
||||
@ -164,7 +164,6 @@ function SmartSearchController (
|
||||
$scope.searchPlaceholder = i18n._('Search');
|
||||
}
|
||||
});
|
||||
|
||||
listenForTransitionSuccess();
|
||||
});
|
||||
|
||||
@ -205,7 +204,7 @@ function SmartSearchController (
|
||||
}
|
||||
$scope.dataset = data;
|
||||
$scope.collection = data.results;
|
||||
$scope.$emit('updateDataset', data);
|
||||
$scope.$emit('updateDataset', data, queryset);
|
||||
})
|
||||
.catch(() => revertSearch(unmodifiedQueryset));
|
||||
|
||||
@ -241,7 +240,7 @@ function SmartSearchController (
|
||||
}
|
||||
$scope.dataset = data;
|
||||
$scope.collection = data.results;
|
||||
$scope.$emit('updateDataset', data);
|
||||
$scope.$emit('updateDataset', data, queryset);
|
||||
});
|
||||
|
||||
generateSearchTags();
|
||||
@ -271,7 +270,7 @@ function SmartSearchController (
|
||||
}
|
||||
$scope.dataset = data;
|
||||
$scope.collection = data.results;
|
||||
$scope.$emit('updateDataset', data);
|
||||
$scope.$emit('updateDataset', data, queryset);
|
||||
});
|
||||
|
||||
$scope.searchTags = qs.stripDefaultParams(queryset, defaults);
|
||||
|
Loading…
Reference in New Issue
Block a user