External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-23 08:37:48 -02:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1004 from kensible/952-lookup-modal-styling

Browse Source 
Lookup modal styling to match given design
This commit is contained in:
kensible
2016-02-25 12:17:51 -05:00
parent 2c6cf4c2fe f8fe6d9ae4
commit 4f5d7d0015
14 changed files with 472 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
awx/ui/client/legacy-styles/ansible-ui.less
View File

@@ -697,11 +697,23 @@ legend {
margin-bottom: 7px; margin-bottom: 7px;
} }
.pagination > li > a { .pagination>li>a,
.pagination>li>span {
border: 1px solid @grey-border;
padding: 3px 6px; padding: 3px 6px;
font-size: 10px; font-size: 10px;
} }
.pagination li {
a#next-page {
border-radius: 0 4px 4px 0;
}
a#previous-page {
border-radius: 4px 0 0 4px;
}
}
.modal-body { .modal-body {
.pagination { .pagination {
margin-top: 15px; margin-top: 15px;

62
awx/ui/client/legacy-styles/jquery-ui-overrides.less
View File

@@ -14,12 +14,13 @@ table.ui-datepicker-calendar {
} }
/* Modal dialog */ /* Modal dialog */
.ui-dialog-title { .ui-dialog-title {
font-size: 22px; font-size: 15px;
color: @blue-link; color: @default-interface-txt;
font-weight: bold; font-weight: bold;
line-height: normal; line-height: normal;
font-family: 'Open Sans', helvetica;
text-transform: uppercase;
} }
.ui-dialog { .ui-dialog {
.close { .close {
@@ -33,12 +34,14 @@ table.ui-datepicker-calendar {
.ui-widget-header { .ui-widget-header {
border-radius: 0; border-radius: 0;
border: none; border: none;
border-bottom: 1px solid #A9A9A9;
height: 55px;
} }
.ui-dialog-titlebar { .ui-dialog-titlebar {
padding-bottom: 0; padding-bottom: 0;
padding-top: 12px; padding-top: 12px;
button.close i {
font-size: 24px;
}
} }
.ui-dialog-titlebar .ui-state-default { .ui-dialog-titlebar .ui-state-default {
background-image: none; background-image: none;
@@ -58,9 +61,58 @@ table.ui-datepicker-calendar {
background-position: -80px -224px; background-position: -80px -224px;
color: @black; color: @black;
} }
button.btn.btn-primary,
button.btn.btn-default {
padding: 5px 15px;
font-size: 12px;
line-height: 1.5;
transition: background-color 0.2s;
font-size: 12px;
}
button.btn.btn-primary {
text-transform: uppercase;
background-color: @default-succ;
border-color: @default-succ;
&:hover {
background-color: @default-succ-hov;
border-color: @default-succ-hov;
}
&:disabled {
background-color: @default-succ-disabled;
border-color: @default-succ-disabled;
}
&:first-of-type {
margin-right: 24px;
}
}
button.btn.btn-default {
text-transform: uppercase;
border-color: @default-border;
color: @default-interface-txt;
}
.ui-dialog-buttonpane.ui-widget-content {
border: none;
margin: 0;
padding-top: 0;
padding-right: 8px;
}
.input-group-btn.dropdown, .List-pagination, .List-tableHeader {
font-family: 'Open Sans', sans-serif;
}
} }
.ui-dialog-buttonset { .ui-dialog-buttonset {
text-transform: uppercase;
button.btn.btn-default.ui-state-hover, button.btn.btn-default.ui-state-hover,
button.btn.btn-default.ui-state-active, button.btn.btn-default.ui-state-active,
button.btn.btn-default.ui-state-focus { button.btn.btn-default.ui-state-focus {

2
awx/ui/client/legacy-styles/lists.less
View File

@@ -101,6 +101,7 @@ table, tbody {
margin-left: 15px; margin-left: 15px;
} }
/* -- Pagination -- */
.List-pagination { .List-pagination {
margin-top: 20px; margin-top: 20px;
font-size: 12px; font-size: 12px;
@@ -244,6 +245,7 @@ table, tbody {
padding-left: 15px!important; padding-left: 15px!important;
height: 34px!important; height: 34px!important;
padding-right: 45px!important; padding-right: 45px!important;
font-family: 'Open Sans', sans-serif;
} }
.List-searchInput:placeholder-shown { .List-searchInput:placeholder-shown {

1
awx/ui/client/src/app.js
View File

@@ -45,6 +45,7 @@ import adhoc from './adhoc/main';
import login from './login/main'; import login from './login/main';
import activityStream from './activity-stream/main'; import activityStream from './activity-stream/main';
import standardOut from './standard-out/main'; import standardOut from './standard-out/main';
import lookUpHelper from './lookup/main';
import {JobTemplatesList, JobTemplatesAdd, JobTemplatesEdit} from './controllers/JobTemplates'; import {JobTemplatesList, JobTemplatesAdd, JobTemplatesEdit} from './controllers/JobTemplates';
import {LicenseController} from './controllers/License'; import {LicenseController} from './controllers/License';
import {ScheduleEditController} from './controllers/Schedules'; import {ScheduleEditController} from './controllers/Schedules';

2
awx/ui/client/src/helpers.js
View File

@@ -22,7 +22,6 @@ import Jobs from "./helpers/Jobs";
import License from "./helpers/License"; import License from "./helpers/License";
import LoadConfig from "./helpers/LoadConfig"; import LoadConfig from "./helpers/LoadConfig";
import LogViewer from "./helpers/LogViewer"; import LogViewer from "./helpers/LogViewer";
import Lookup from "./helpers/Lookup";
import PaginationHelpers from "./helpers/PaginationHelpers"; import PaginationHelpers from "./helpers/PaginationHelpers";
import Parse from "./helpers/Parse"; import Parse from "./helpers/Parse";
import ProjectPath from "./helpers/ProjectPath"; import ProjectPath from "./helpers/ProjectPath";
@@ -60,7 +59,6 @@ export
License, License,
LoadConfig, LoadConfig,
LogViewer, LogViewer,
Lookup,
PaginationHelpers, PaginationHelpers,
Parse, Parse,
ProjectPath, ProjectPath,

307
awx/ui/client/src/helpers/Lookup.js
View File

@@ -1,307 +0,0 @@
/*************************************************
* Copyright (c) 2015 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
/**
* @ngdoc function
* @name helpers.function:Lookup
* @description
* LookUpInit( {
* scope: <caller's scope>,
* form: <form object>,
* current_item: <id of item to select on open>,
* list: <list object>,
* field: <name of the form field with which the lookup is associated>,
* hdr: <optional. modal dialog header>
* postAction: optional function to run after selection made,
* callback: optional label to $emit() on parent scope
* input_type: optional string that specifies whether lookup should have checkboxes or radio buttons. defaults to 'checkbox' --- added by JT 8/21/14
* })
*/
import listGenerator from '../shared/list-generator/main';
export default
angular.module('LookUpHelper', ['RestServices', 'Utilities', 'SearchHelper', 'PaginationHelpers', listGenerator.name, 'ApiLoader', 'ModalDialog'])
.factory('LookUpInit', ['Alert', 'Rest', 'ProcessErrors', 'generateList', 'SearchInit', 'PaginateInit', 'GetBasePath', 'FormatDate', 'Empty', 'CreateDialog',
function (Alert, Rest, ProcessErrors, GenerateList, SearchInit, PaginateInit, GetBasePath, FormatDate, Empty, CreateDialog) {
return function (params) {
var parent_scope = params.scope,
form = params.form,
list = params.list,
field = params.field,
instructions = params.instructions,
postAction = params.postAction,
callback = params.callback,
autopopulateLookup,
input_type = (params.input_type) ? params.input_type: "checkbox",
defaultUrl, name, watchUrl;
if (params.autopopulateLookup !== undefined) {
autopopulateLookup = params.autopopulateLookup;
} else {
autopopulateLookup = true;
}
if (params.url) {
// pass in a url value to override the default
defaultUrl = params.url;
} else {
defaultUrl = (list.name === 'inventories') ? GetBasePath('inventory') : GetBasePath(list.name);
}
if ($('#htmlTemplate #lookup-modal-dialog').length > 0) {
$('#htmlTemplate #lookup-modal-dialog').empty();
}
else {
$('#htmlTemplate').append("<div id=\"lookup-modal-dialog\"></div>");
}
name = list.iterator.charAt(0).toUpperCase() + list.iterator.substring(1);
watchUrl = (/\/$/.test(defaultUrl)) ? defaultUrl + '?' : defaultUrl + '&';
watchUrl += form.fields[field].sourceField + '__' + 'iexact=:value';
$('input[name="' + form.fields[field].sourceModel + '_' + form.fields[field].sourceField + '"]').attr('data-url', watchUrl);
$('input[name="' + form.fields[field].sourceModel + '_' + form.fields[field].sourceField + '"]').attr('data-source', field);
var sourceModel = form.fields[field].sourceModel,
sourceField = form.fields[field].sourceField;
// this logic makes sure that the form is being added, and that the lookup to be autopopulated is required
// we also look to see if the lookupinit autopopulateLookup parameter passed in by the controller is false
function fieldIsAutopopulatable() {
if (autopopulateLookup === false) {
return false;
} if (parent_scope.mode === "add") {
if (parent_scope[sourceModel + "_field"].awRequiredWhen &&
parent_scope[sourceModel + "_field"].awRequiredWhen.variable &&
parent_scope[parent_scope[sourceModel + "_field"].awRequiredWhen.variable]) {
return true;
} else if (parent_scope[sourceModel + "_field"].addRequired === true) {
return true;
} else {
return false;
}
} else {
return false;
}
}
if (fieldIsAutopopulatable()) {
// Auto populate the field if there is only one result
Rest.setUrl(defaultUrl);
Rest.get()
.success(function (data) {
if (data.count === 1) {
parent_scope[field] = data.results[0].id;
if (parent_scope[form.name + '_form'] && form.fields[field] && sourceModel) {
parent_scope[sourceModel + '_' + sourceField] =
data.results[0][sourceField];
if (parent_scope[form.name + '_form'][sourceModel + '_' + sourceField]) {
parent_scope[form.name + '_form'][sourceModel + '_' + sourceField]
.$setValidity('awlookup', true);
}
}
if (parent_scope[form.name + '_form']) {
parent_scope[form.name + '_form'].$setDirty();
}
}
})
.error(function (data, status) {
ProcessErrors(parent_scope, data, status, form, { hdr: 'Error!',
msg: 'Failed to launch adhoc command. POST returned status: ' +
status });
});
}
parent_scope['lookUp' + name] = function () {
var master = {},
scope = parent_scope.$new(),
name, hdr, buttons;
// Generating the search list potentially kills the values held in scope for the field.
// We'll keep a copy in master{} that we can revert back to on cancel;
master[field] = scope[field];
master[form.fields[field].sourceModel + '_' + form.fields[field].sourceField] =
scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField];
GenerateList.inject(list, {
mode: 'lookup',
id: 'lookup-modal-dialog',
scope: scope,
instructions: instructions,
input_type: input_type
});
name = list.iterator.charAt(0).toUpperCase() + list.iterator.substring(1);
hdr = (params.hdr) ? params.hdr : 'Select ' + name;
// Show pop-up
buttons = [{
label: "Cancel",
icon: "fa-times",
"class": "btn btn-default",
"id": "lookup-cancel-button",
onClick: function() {
$('#lookup-modal-dialog').dialog('close');
}
},{
label: "Select",
onClick: function() {
scope.selectAction();
},
icon: "fa-check",
"class": "btn btn-primary",
"id": "lookup-save-button"
}];
if (scope.removeModalReady) {
scope.removeModalReady();
}
scope.removeModalReady = scope.$on('ModalReady', function() {
$('#lookup-save-button').attr('disabled','disabled');
$('#lookup-modal-dialog').dialog('open');
});
CreateDialog({
scope: scope,
buttons: buttons,
width: 600,
height: (instructions) ? 625 : 500,
minWidth: 500,
title: hdr,
id: 'lookup-modal-dialog',
onClose: function() {
setTimeout( function() {
scope.$apply( function() {
if (Empty(scope[field])) {
scope[field] = master[field];
scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField] =
master[form.fields[field].sourceModel + '_' + form.fields[field].sourceField];
}
});
}, 300);
},
callback: 'ModalReady'
});
SearchInit({
scope: scope,
set: list.name,
list: list,
url: defaultUrl
});
PaginateInit({
scope: scope,
list: list,
url: defaultUrl,
mode: 'lookup'
});
if (scope.lookupPostRefreshRemove) {
scope.lookupPostRefreshRemove();
}
scope.lookupPostRefreshRemove = scope.$on('PostRefresh', function () {
var fld, i;
for (fld in list.fields) {
if (list.fields[fld].type && list.fields[fld].type === 'date') {
//convert dates to our standard format
for (i = 0; i < scope[list.name].length; i++) {
scope[list.name][i][fld] = FormatDate(new Date(scope[list.name][i][fld]));
}
}
}
// List generator creates the list, resetting it and losing the previously selected value.
// If the selected value is in the current set, find it and mark selected.
if (!Empty(parent_scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField])) {
scope[list.name].forEach(function(elem) {
if (elem[form.fields[field].sourceField] ===
parent_scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField]) {
scope[field] = elem.id;
}
});
}
if (!Empty(scope[field])) {
scope['toggle_' + list.iterator](scope[field]);
}
});
scope.search(list.iterator);
scope.selectAction = function () {
var i, found = false;
for (i = 0; i < scope[list.name].length; i++) {
if (scope[list.name][i].checked === '1' || scope[list.name][i].checked===1 || scope[list.name][i].checked === true) {
found = true;
parent_scope[field] = scope[list.name][i].id;
if (parent_scope[form.name + '_form'] && form.fields[field] && form.fields[field].sourceModel) {
parent_scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField] =
scope[list.name][i][form.fields[field].sourceField];
if (parent_scope[form.name + '_form'][form.fields[field].sourceModel + '_' + form.fields[field].sourceField]) {
parent_scope[form.name + '_form'][form.fields[field].sourceModel + '_' + form.fields[field].sourceField]
.$setValidity('awlookup', true);
}
}
if (parent_scope[form.name + '_form']) {
parent_scope[form.name + '_form'].$setDirty();
}
}
}
if (found) {
// Selection made
$('#lookup-modal-dialog').dialog('close');
if (postAction) {
postAction();
}
if (callback) {
parent_scope.$emit(callback);
}
}
};
scope['toggle_' + list.iterator] = function (id) {
var count = 0;
scope[list.name].forEach( function(row, i) {
if (row.id === id) {
if (row.checked) {
scope[list.name][i].success_class = 'success';
}
else {
row.checked = true;
scope[list.name][i].success_class = '';
}
} else {
scope[list.name][i].checked = 0;
scope[list.name][i].success_class = '';
}
});
// Check if any rows are checked
scope[list.name].forEach(function(row) {
if (row.checked) {
count++;
}
});
if (count === 0) {
$('#lookup-save-button').attr('disabled','disabled');
}
else {
$('#lookup-save-button').removeAttr('disabled');
}
};
};
};
}]);

22
awx/ui/client/src/lookup/lookup.block.less Normal file
View File

@@ -0,0 +1,22 @@
@import "../shared/branding/colors.default.less";
#LookupModal-dialog {
.List-searchWidget {
width: 66.6666%
}
.List-tableHeaderRow {
.List-tableHeader:first-of-type {
width: 3%;
}
}
.List-tableHeader,
.List-tableHeader:last-of-type {
text-align:left;
}
.List-tableCell {
color: @default-interface-txt;
}
}

305
awx/ui/client/src/lookup/lookup.factory.js Normal file
View File

@@ -0,0 +1,305 @@
/*************************************************
* Copyright (c) 2016 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
/**
* @ngdoc function
* @name helpers.function:Lookup
* @description
* LookUpInit( {
* scope: <caller's scope>,
* form: <form object>,
* current_item: <id of item to select on open>,
* list: <list object>,
* field: <name of the form field with which the lookup is associated>,
* hdr: <optional. modal dialog header>
* postAction: optional function to run after selection made,
* callback: optional label to $emit() on parent scope
* input_type: optional string that specifies whether lookup should have checkboxes or radio buttons. defaults to 'checkbox' --- added by JT 8/21/14
* })
*/
export default ['Rest', 'ProcessErrors', 'generateList',
'SearchInit', 'PaginateInit', 'GetBasePath', 'FormatDate',
'Empty', 'CreateDialog',
function(Rest, ProcessErrors, GenerateList,
SearchInit, PaginateInit, GetBasePath, FormatDate,
Empty, CreateDialog) {
return function(params) {
var parent_scope = params.scope,
form = params.form,
list = params.list,
field = params.field,
instructions = params.instructions,
postAction = params.postAction,
callback = params.callback,
autopopulateLookup,
input_type = (params.input_type) ? params.input_type : "checkbox",
defaultUrl, name, watchUrl;
if (params.autopopulateLookup !== undefined) {
autopopulateLookup = params.autopopulateLookup;
} else {
autopopulateLookup = true;
}
if (params.url) {
// pass in a url value to override the default
defaultUrl = params.url;
} else {
defaultUrl = (list.name === 'inventories') ? GetBasePath('inventory') : GetBasePath(list.name);
}
if ($('#htmlTemplate #LookupModal-dialog').length > 0) {
$('#htmlTemplate #LookupModal-dialog').empty();
} else {
$('#htmlTemplate').append("<div id=\"LookupModal-dialog\"></div>");
}
name = list.iterator.charAt(0).toUpperCase() + list.iterator.substring(1);
watchUrl = (/\/$/.test(defaultUrl)) ? defaultUrl + '?' : defaultUrl + '&';
watchUrl += form.fields[field].sourceField + '__' + 'iexact=:value';
$('input[name="' + form.fields[field].sourceModel + '_' + form.fields[field].sourceField + '"]').attr('data-url', watchUrl);
$('input[name="' + form.fields[field].sourceModel + '_' + form.fields[field].sourceField + '"]').attr('data-source', field);
var sourceModel = form.fields[field].sourceModel,
sourceField = form.fields[field].sourceField;
// this logic makes sure that the form is being added, and that the lookup to be autopopulated is required
// we also look to see if the lookupinit autopopulateLookup parameter passed in by the controller is false
function fieldIsAutopopulatable() {
if (autopopulateLookup === false) {
return false;
}
if (parent_scope.mode === "add") {
if (parent_scope[sourceModel + "_field"].awRequiredWhen &&
parent_scope[sourceModel + "_field"].awRequiredWhen.variable &&
parent_scope[parent_scope[sourceModel + "_field"].awRequiredWhen.variable]) {
return true;
} else if (parent_scope[sourceModel + "_field"].addRequired === true) {
return true;
} else {
return false;
}
} else {
return false;
}
}
if (fieldIsAutopopulatable()) {
// Auto populate the field if there is only one result
Rest.setUrl(defaultUrl);
Rest.get()
.success(function(data) {
if (data.count === 1) {
parent_scope[field] = data.results[0].id;
if (parent_scope[form.name + '_form'] && form.fields[field] && sourceModel) {
parent_scope[sourceModel + '_' + sourceField] =
data.results[0][sourceField];
if (parent_scope[form.name + '_form'][sourceModel + '_' + sourceField]) {
parent_scope[form.name + '_form'][sourceModel + '_' + sourceField]
.$setValidity('awlookup', true);
}
}
if (parent_scope[form.name + '_form']) {
parent_scope[form.name + '_form'].$setDirty();
}
}
})
.error(function(data, status) {
ProcessErrors(parent_scope, data, status, form, {
hdr: 'Error!',
msg: 'Failed to launch adhoc command. POST returned status: ' +
status
});
});
}
parent_scope['lookUp' + name] = function() {
var master = {},
scope = parent_scope.$new(),
name, hdr, buttons;
// Generating the search list potentially kills the values held in scope for the field.
// We'll keep a copy in master{} that we can revert back to on cancel;
master[field] = scope[field];
master[form.fields[field].sourceModel + '_' + form.fields[field].sourceField] =
scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField];
GenerateList.inject(list, {
mode: 'lookup',
id: 'LookupModal-dialog',
scope: scope,
instructions: instructions,
input_type: input_type
});
name = list.iterator.charAt(0).toUpperCase() + list.iterator.substring(1);
hdr = (params.hdr) ? params.hdr : 'Select ' + name;
// Show pop-up
buttons = [{
label: "Save",
onClick: function() {
scope.selectAction();
},
//icon: "fa-check",
"class": "btn btn-primary",
"id": "lookup-save-button"
}, {
label: "Cancel",
"class": "btn btn-default",
"id": "lookup-cancel-button",
onClick: function() {
$('#LookupModal-dialog').dialog('close');
}
}];
if (scope.removeModalReady) {
scope.removeModalReady();
}
scope.removeModalReady = scope.$on('ModalReady', function() {
$('#lookup-save-button').attr('disabled', 'disabled');
$('#LookupModal-dialog').dialog('open');
});
CreateDialog({
scope: scope,
buttons: buttons,
width: 600,
height: (instructions) ? 625 : 450,
minWidth: 500,
title: hdr,
id: 'LookupModal-dialog',
onClose: function() {
setTimeout(function() {
scope.$apply(function() {
if (Empty(scope[field])) {
scope[field] = master[field];
scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField] =
master[form.fields[field].sourceModel + '_' + form.fields[field].sourceField];
}
});
}, 300);
},
callback: 'ModalReady'
});
SearchInit({
scope: scope,
set: list.name,
list: list,
url: defaultUrl
});
PaginateInit({
scope: scope,
list: list,
url: defaultUrl,
mode: 'lookup'
});
if (scope.lookupPostRefreshRemove) {
scope.lookupPostRefreshRemove();
}
scope.lookupPostRefreshRemove = scope.$on('PostRefresh', function() {
var fld, i;
for (fld in list.fields) {
if (list.fields[fld].type && list.fields[fld].type === 'date') {
//convert dates to our standard format
for (i = 0; i < scope[list.name].length; i++) {
scope[list.name][i][fld] = FormatDate(new Date(scope[list.name][i][fld]));
}
}
}
// List generator creates the list, resetting it and losing the previously selected value.
// If the selected value is in the current set, find it and mark selected.
if (!Empty(parent_scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField])) {
scope[list.name].forEach(function(elem) {
if (elem[form.fields[field].sourceField] ===
parent_scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField]) {
scope[field] = elem.id;
}
});
}
if (!Empty(scope[field])) {
scope['toggle_' + list.iterator](scope[field]);
}
});
scope.search(list.iterator);
scope.selectAction = function() {
var i, found = false;
for (i = 0; i < scope[list.name].length; i++) {
if (scope[list.name][i].checked === '1' || scope[list.name][i].checked === 1 || scope[list.name][i].checked === true) {
found = true;
parent_scope[field] = scope[list.name][i].id;
if (parent_scope[form.name + '_form'] && form.fields[field] && form.fields[field].sourceModel) {
parent_scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField] =
scope[list.name][i][form.fields[field].sourceField];
if (parent_scope[form.name + '_form'][form.fields[field].sourceModel + '_' + form.fields[field].sourceField]) {
parent_scope[form.name + '_form'][form.fields[field].sourceModel + '_' + form.fields[field].sourceField]
.$setValidity('awlookup', true);
}
}
if (parent_scope[form.name + '_form']) {
parent_scope[form.name + '_form'].$setDirty();
}
}
}
if (found) {
// Selection made
$('#LookupModal-dialog').dialog('close');
if (postAction) {
postAction();
}
if (callback) {
parent_scope.$emit(callback);
}
}
};
scope['toggle_' + list.iterator] = function(id) {
var count = 0;
scope[list.name].forEach(function(row, i) {
if (row.id === id) {
if (row.checked) {
scope[list.name][i].success_class = 'success';
} else {
row.checked = true;
scope[list.name][i].success_class = '';
}
} else {
scope[list.name][i].checked = 0;
scope[list.name][i].success_class = '';
}
});
// Check if any rows are checked
scope[list.name].forEach(function(row) {
if (row.checked) {
count++;
}
});
if (count === 0) {
$('#lookup-save-button').attr('disabled', 'disabled');
} else {
$('#lookup-save-button').removeAttr('disabled');
}
};
};
};
}
];

12
awx/ui/client/src/lookup/main.js Normal file
View File

@@ -0,0 +1,12 @@
/*************************************************
* Copyright (c) 2016 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
import LookUpInit from './lookup.factory';
import listGenerator from '../shared/list-generator/main';
export default
angular.module('LookUpHelper', ['RestServices', 'Utilities', 'SearchHelper',
'PaginationHelpers', listGenerator.name, 'ApiLoader', 'ModalDialog'])
.factory('LookUpInit', LookUpInit);

2
awx/ui/client/src/partials/portal.html
View File

@@ -32,4 +32,4 @@
</div> </div>
</div> </div>
</div> </div>
<div id="lookup-modal-dialog" style="display:none"> </div> <div id="LookupModal-dialog" style="display:none"> </div>

2
awx/ui/client/src/shared/Modal.js
View File

@@ -106,7 +106,7 @@ angular.module('ModalDialog', ['Utilities', 'ParseHelper'])
resizable: resizable, resizable: resizable,
create: function () { create: function () {
// Fix the close button // Fix the close button
$('.ui-dialog[aria-describedby="' + id + '"]').find('.ui-dialog-titlebar button').empty().attr({'class': 'close'}).text('x'); $('.ui-dialog[aria-describedby="' + id + '"]').find('.ui-dialog-titlebar button').empty().attr({'class': 'close'}).html('<i class="fa fa-times-circle"></i>');
setTimeout(function() { setTimeout(function() {
// Make buttons bootstrapy // Make buttons bootstrapy

1
awx/ui/client/src/shared/branding/colors.default.less
View File

@@ -12,6 +12,7 @@
@default-err-hov: #FF1105; @default-err-hov: #FF1105;
@default-succ: #3CB878; @default-succ: #3CB878;
@default-succ-hov: #60D66F; @default-succ-hov: #60D66F;
@default-succ-disabled: lighten(@default-succ, 30);
@default-link: #1678C4; @default-link: #1678C4;
@default-link-hov: #4498DA; @default-link-hov: #4498DA;
@default-button-hov: #F2F2F2; @default-button-hov: #F2F2F2;

1
awx/ui/client/src/shared/branding/colors.less
View File

@@ -5,6 +5,7 @@
@blue-dark: #2a6496; /* link hover */ @blue-dark: #2a6496; /* link hover */
@grey: #A9A9A9; @grey: #A9A9A9;
@grey-txt: #707070; @grey-txt: #707070;
@grey-border: #DDDDDD;
@info: #d9edf7; /* alert info background color */ @info: #d9edf7; /* alert info background color */
@info-border: #bce8f1; /* alert info border color */ @info-border: #bce8f1; /* alert info border color */
@info-color: #3a87ad; @info-color: #3a87ad;

32
awx/ui/client/src/shared/list-generator/list-generator.factory.js
View File

@@ -299,6 +299,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
list = this.list, list = this.list,
base, size, action, fld, cnt, field_action, fAction, itm; base, size, action, fld, cnt, field_action, fAction, itm;
if (options.mode !== 'lookup') {
if(options.title !== false){ if(options.title !== false){
html += "<div class=\"List-header\">"; html += "<div class=\"List-header\">";
html += "<div class=\"List-title\">"; html += "<div class=\"List-title\">";
@@ -333,10 +334,12 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
html += "</div>"; html += "</div>";
html += "</div>"; html += "</div>";
} }
}
if (options.mode === 'edit' && list.editInstructions) { if (options.mode === 'edit' && list.editInstructions) {
html += "<div class=\"alert alert-info alert-block\">\n"; html += "<div class=\"alert alert-info alert-block\">\n";
html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n"; html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\"><i class=\"fa fa-times-circle\"></i></button>\n";
html += "<strong>Hint: </strong>" + list.editInstructions + "\n"; html += "<strong>Hint: </strong>" + list.editInstructions + "\n";
html += "</div>\n"; html += "</div>\n";
} }
@@ -356,7 +359,6 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
html += "<div class=\"List-noItems\" ng-show=\"" + list.iterator + "Loading == false && " + list.iterator + "_active_search == false && " + list.iterator + "_total_rows < 1\">"; html += "<div class=\"List-noItems\" ng-show=\"" + list.iterator + "Loading == false && " + list.iterator + "_active_search == false && " + list.iterator + "_total_rows < 1\">";
html += (list.emptyListText) ? list.emptyListText : "PLEASE ADD ITEMS TO THIS LIST"; html += (list.emptyListText) ? list.emptyListText : "PLEASE ADD ITEMS TO THIS LIST";
html += "</div>"; html += "</div>";
if (options.showSearch=== undefined || options.showSearch === true) { if (options.showSearch=== undefined || options.showSearch === true) {
// Only show the search bar if we are loading results or if we have at least 1 base result // Only show the search bar if we are loading results or if we have at least 1 base result
html += "<div class=\"row List-searchRow\" ng-show=\"" + list.iterator + "Loading == true || " + list.iterator + "_active_search == true || (" + list.iterator + "Loading == false && " + list.iterator + "_active_search == false && " + list.iterator + "_total_rows > 0)\">\n"; html += "<div class=\"row List-searchRow\" ng-show=\"" + list.iterator + "Loading == true || " + list.iterator + "_active_search == true || (" + list.iterator + "Loading == false && " + list.iterator + "_active_search == false && " + list.iterator + "_total_rows > 0)\">\n";
@@ -459,6 +461,20 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
innerTable += '<td class="col-xs-1 select-column List-tableCell"><select-list-item item=\"' + list.iterator + '\"></select-list-item></td>'; innerTable += '<td class="col-xs-1 select-column List-tableCell"><select-list-item item=\"' + list.iterator + '\"></select-list-item></td>';
} }
// Change layout if a lookup list, place radio buttons before labels
if (options.mode === 'lookup') {
if(options.input_type==="radio"){ //added by JT so that lookup forms can be either radio inputs or check box inputs
innerTable += "<td class=\"List-tableCell\"><input type=\"radio\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" +
list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-value=\"1\" " +
"ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>";
}
else { // its assumed that options.input_type = checkbox
innerTable += "<td class=\"List-tableCell\"><input type=\"checkbox\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" +
list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-true-value=\"1\" " +
"ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>";
}
}
cnt = 2; cnt = 2;
base = (list.base) ? list.base : list.name; base = (list.base) ? list.base : list.name;
base = base.replace(/^\//, ''); base = base.replace(/^\//, '');
@@ -475,7 +491,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
} }
} }
if (options.mode === 'select' || options.mode === 'lookup') { if (options.mode === 'select') {
if(options.input_type==="radio"){ //added by JT so that lookup forms can be either radio inputs or check box inputs if(options.input_type==="radio"){ //added by JT so that lookup forms can be either radio inputs or check box inputs
innerTable += "<td class=\"List-tableCell\"><input type=\"radio\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" + innerTable += "<td class=\"List-tableCell\"><input type=\"radio\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" +
list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-value=\"1\" " + list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-value=\"1\" " +
@@ -543,6 +559,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
} }
innerTable += "</td>\n"; innerTable += "</td>\n";
} }
innerTable += "</tr>\n"; innerTable += "</tr>\n";
// Message for loading // Message for loading
@@ -611,7 +628,9 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
if (list.multiSelect) { if (list.multiSelect) {
html += buildSelectAll().prop('outerHTML'); html += buildSelectAll().prop('outerHTML');
} }
else if (options.mode === 'lookup') {
html += "<th class=\"List-tableHeader col-lg-1 col-md-1 col-sm-2 col-xs-2\"></th>";
}
for (fld in list.fields) { for (fld in list.fields) {
if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) && if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&
!(options.mode === 'lookup' && list.fields[fld].excludeModal === true)) { !(options.mode === 'lookup' && list.fields[fld].excludeModal === true)) {
@@ -643,9 +662,10 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
html += "</th>\n"; html += "</th>\n";
} }
} }
if (options.mode === 'select' || options.mode === 'lookup') { if (options.mode === 'select') {
html += "<th class=\"List-tableHeader col-lg-1 col-md-1 col-sm-2 col-xs-2\">Select</th>"; html += "<th class=\"List-tableHeader col-lg-1 col-md-1 col-sm-2 col-xs-2\">Select</th>";
} else if (options.mode === 'edit' && list.fieldActions) { }
else if (options.mode === 'edit' && list.fieldActions) {
html += "<th class=\"List-tableHeader actions-column"; html += "<th class=\"List-tableHeader actions-column";
html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : ""; html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : "";
html += "\">"; html += "\">";