mirror of
https://github.com/ansible/awx.git
synced 2026-03-13 23:17:32 -02:30
Merge pull request #1004 from kensible/952-lookup-modal-styling
Lookup modal styling to match given design
This commit is contained in:
kensible
@@ -697,11 +697,23 @@ legend {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.pagination > li > a {
|
||||
.pagination>li>a,
|
||||
.pagination>li>span {
|
||||
border: 1px solid @grey-border;
|
||||
padding: 3px 6px;
|
||||
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 {
|
||||
.pagination {
|
||||
margin-top: 15px;
|
||||
|
||||
@@ -14,12 +14,13 @@ table.ui-datepicker-calendar {
|
||||
}
|
||||
|
||||
/* Modal dialog */
|
||||
|
||||
.ui-dialog-title {
|
||||
font-size: 22px;
|
||||
color: @blue-link;
|
||||
font-size: 15px;
|
||||
color: @default-interface-txt;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
font-family: 'Open Sans', helvetica;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.ui-dialog {
|
||||
.close {
|
||||
@@ -33,12 +34,14 @@ table.ui-datepicker-calendar {
|
||||
.ui-widget-header {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid #A9A9A9;
|
||||
height: 55px;
|
||||
}
|
||||
.ui-dialog-titlebar {
|
||||
padding-bottom: 0;
|
||||
padding-top: 12px;
|
||||
|
||||
button.close i {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.ui-dialog-titlebar .ui-state-default {
|
||||
background-image: none;
|
||||
@@ -58,9 +61,58 @@ table.ui-datepicker-calendar {
|
||||
background-position: -80px -224px;
|
||||
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 {
|
||||
text-transform: uppercase;
|
||||
|
||||
button.btn.btn-default.ui-state-hover,
|
||||
button.btn.btn-default.ui-state-active,
|
||||
button.btn.btn-default.ui-state-focus {
|
||||
|
||||
@@ -101,6 +101,7 @@ table, tbody {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
/* -- Pagination -- */
|
||||
.List-pagination {
|
||||
margin-top: 20px;
|
||||
font-size: 12px;
|
||||
@@ -244,6 +245,7 @@ table, tbody {
|
||||
padding-left: 15px!important;
|
||||
height: 34px!important;
|
||||
padding-right: 45px!important;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.List-searchInput:placeholder-shown {
|
||||
|
||||
@@ -45,6 +45,7 @@ import adhoc from './adhoc/main';
|
||||
import login from './login/main';
|
||||
import activityStream from './activity-stream/main';
|
||||
import standardOut from './standard-out/main';
|
||||
import lookUpHelper from './lookup/main';
|
||||
import {JobTemplatesList, JobTemplatesAdd, JobTemplatesEdit} from './controllers/JobTemplates';
|
||||
import {LicenseController} from './controllers/License';
|
||||
import {ScheduleEditController} from './controllers/Schedules';
|
||||
|
||||
@@ -22,7 +22,6 @@ import Jobs from "./helpers/Jobs";
|
||||
import License from "./helpers/License";
|
||||
import LoadConfig from "./helpers/LoadConfig";
|
||||
import LogViewer from "./helpers/LogViewer";
|
||||
import Lookup from "./helpers/Lookup";
|
||||
import PaginationHelpers from "./helpers/PaginationHelpers";
|
||||
import Parse from "./helpers/Parse";
|
||||
import ProjectPath from "./helpers/ProjectPath";
|
||||
@@ -60,7 +59,6 @@ export
|
||||
License,
|
||||
LoadConfig,
|
||||
LogViewer,
|
||||
Lookup,
|
||||
PaginationHelpers,
|
||||
Parse,
|
||||
ProjectPath,
|
||||
|
||||
@@ -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
22
awx/ui/client/src/lookup/lookup.block.less
Normal 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
305
awx/ui/client/src/lookup/lookup.factory.js
Normal 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
12
awx/ui/client/src/lookup/main.js
Normal 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);
|
||||
@@ -32,4 +32,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lookup-modal-dialog" style="display:none"> </div>
|
||||
<div id="LookupModal-dialog" style="display:none"> </div>
|
||||
|
||||
@@ -106,7 +106,7 @@ angular.module('ModalDialog', ['Utilities', 'ParseHelper'])
|
||||
resizable: resizable,
|
||||
create: function () {
|
||||
// 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() {
|
||||
// Make buttons bootstrapy
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
@default-err-hov: #FF1105;
|
||||
@default-succ: #3CB878;
|
||||
@default-succ-hov: #60D66F;
|
||||
@default-succ-disabled: lighten(@default-succ, 30);
|
||||
@default-link: #1678C4;
|
||||
@default-link-hov: #4498DA;
|
||||
@default-button-hov: #F2F2F2;
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
@blue-dark: #2a6496; /* link hover */
|
||||
@grey: #A9A9A9;
|
||||
@grey-txt: #707070;
|
||||
@grey-border: #DDDDDD;
|
||||
@info: #d9edf7; /* alert info background color */
|
||||
@info-border: #bce8f1; /* alert info border color */
|
||||
@info-color: #3a87ad;
|
||||
|
||||
@@ -299,44 +299,47 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
|
||||
list = this.list,
|
||||
base, size, action, fld, cnt, field_action, fAction, itm;
|
||||
|
||||
if(options.title !== false){
|
||||
html += "<div class=\"List-header\">";
|
||||
html += "<div class=\"List-title\">";
|
||||
if (options.mode !== 'lookup') {
|
||||
if(options.title !== false){
|
||||
html += "<div class=\"List-header\">";
|
||||
html += "<div class=\"List-title\">";
|
||||
|
||||
if (list.listTitle) {
|
||||
if (list.listTitle) {
|
||||
|
||||
html += "<div class=\"List-titleText\">" + list.listTitle + "</div>";
|
||||
// We want to show the list title badge by default and only hide it when the list config specifically passes a false flag
|
||||
list.listTitleBadge = (typeof list.listTitleBadge === 'boolean' && list.listTitleBadge == false) ? false : true;
|
||||
if(list.listTitleBadge) {
|
||||
html += "<span class=\"badge List-titleBadge\">{{(" + list.iterator + "_total_rows | number:0)}}</span>";
|
||||
}
|
||||
html += "<div class=\"List-titleText\">" + list.listTitle + "</div>";
|
||||
// We want to show the list title badge by default and only hide it when the list config specifically passes a false flag
|
||||
list.listTitleBadge = (typeof list.listTitleBadge === 'boolean' && list.listTitleBadge == false) ? false : true;
|
||||
if(list.listTitleBadge) {
|
||||
html += "<span class=\"badge List-titleBadge\">{{(" + list.iterator + "_total_rows | number:0)}}</span>";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
if(list.toolbarAuxAction) {
|
||||
html += "<div class=\"List-auxAction\">";
|
||||
html += list.toolbarAuxAction;
|
||||
html += "</div>";
|
||||
}
|
||||
html += "<div class=\"List-actions\">";
|
||||
html += "<div class=\"list-actions\" ng-include=\"'" +
|
||||
templateUrl('shared/list-generator/list-actions') +
|
||||
"'\">\n";
|
||||
|
||||
for (action in list.actions) {
|
||||
list.actions[action] = _.defaults(list.actions[action], { dataPlacement: "top" });
|
||||
}
|
||||
|
||||
html += "</div>\n";
|
||||
html += "</div>";
|
||||
html += "</div>";
|
||||
}
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
if(list.toolbarAuxAction) {
|
||||
html += "<div class=\"List-auxAction\">";
|
||||
html += list.toolbarAuxAction;
|
||||
html += "</div>";
|
||||
}
|
||||
html += "<div class=\"List-actions\">";
|
||||
html += "<div class=\"list-actions\" ng-include=\"'" +
|
||||
templateUrl('shared/list-generator/list-actions') +
|
||||
"'\">\n";
|
||||
|
||||
for (action in list.actions) {
|
||||
list.actions[action] = _.defaults(list.actions[action], { dataPlacement: "top" });
|
||||
}
|
||||
|
||||
html += "</div>\n";
|
||||
html += "</div>";
|
||||
html += "</div>";
|
||||
}
|
||||
|
||||
if (options.mode === 'edit' && list.editInstructions) {
|
||||
html += "<div class=\"alert alert-info alert-block\">\n";
|
||||
html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">×</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 += "</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 += (list.emptyListText) ? list.emptyListText : "PLEASE ADD ITEMS TO THIS LIST";
|
||||
html += "</div>";
|
||||
|
||||
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
|
||||
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>';
|
||||
}
|
||||
|
||||
// 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;
|
||||
base = (list.base) ? list.base : list.name;
|
||||
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
|
||||
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\" " +
|
||||
@@ -543,6 +559,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
|
||||
}
|
||||
innerTable += "</td>\n";
|
||||
}
|
||||
|
||||
innerTable += "</tr>\n";
|
||||
|
||||
// Message for loading
|
||||
@@ -611,7 +628,9 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
|
||||
if (list.multiSelect) {
|
||||
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) {
|
||||
if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&
|
||||
!(options.mode === 'lookup' && list.fields[fld].excludeModal === true)) {
|
||||
@@ -643,9 +662,10 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
|
||||
html += "</th>\n";
|
||||
}
|
||||
}
|
||||
if (options.mode === 'select' || options.mode === 'lookup') {
|
||||
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) {
|
||||
if (options.mode === 'select') {
|
||||
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) {
|
||||
html += "<th class=\"List-tableHeader actions-column";
|
||||
html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : "";
|
||||
html += "\">";
|
||||
|
||||
Reference in New Issue
Block a user