IT4Change/ohmyform
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix css bug for dropdown field in admin view

Browse Source
This commit is contained in:
David Baldwynn 2017-11-02 09:18:41 -07:00
parent 692e4e43f5
commit b2f2599fa5
11 changed files with 75 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/tests/libs/send-email-notifications.test.js
View File

@ -10,9 +10,9 @@ var emailNotifications = require('../../libs/send-email-notifications'),
* Globals
*/
var validFormFields = [
{fieldType:'textfield', title:'First Name', fieldValue: 'John Smith', deletePreserved: false, _id:'56340745f59a6fc9e22028e9'},
{fieldType:'link', title:'Your Website', fieldValue: 'https://johnsmith.me', deletePreserved: false, _id:'5c9e22028e907634f45f59a6'},
{fieldType:'number', title:'Your Age', fieldValue: 45, deletePreserved: false, _id:'56e90745f5934fc9e22028a6'}
{fieldType:'textfield', title:'First Name', fieldValue: 'John Smith', deletePreserved: false, globalId:'56340745f59a6fc9e22028e9'},
{fieldType:'link', title:'Your Website', fieldValue: 'https://johnsmith.me', deletePreserved: false, globalId:'5c9e22028e907634f45f59a6'},
{fieldType:'number', title:'Your Age', fieldValue: 45, deletePreserved: false, globalId:'56e90745f5934fc9e22028a6'}
];
var validFieldDict = {

5
app/views/form.server.view.pug
View File

@ -78,13 +78,14 @@ html(lang='en', xmlns='http://www.w3.org/1999/xhtml')
//Socket.io Client Dependency
script(src='/static/lib/socket.io-client/dist/socket.io.min.js')
script(src='/static/lib/jquery-ui/jquery-ui.js', type='text/javascript')
script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa', crossorigin='anonymous')
//Minified Bower Dependencies
script(src='/static/dist/vendor.min.js')
script(src='/static/lib/angular-ui-date/src/date.js', type='text/javascript')
script(src='/static/lib/jquery-ui/jquery-ui.js', type='text/javascript')
script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa', crossorigin='anonymous')
//Application JavaScript Files
each jsFile in formJSFiles
script(type='text/javascript', src=jsFile)

2
app/views/index.server.view.pug
View File

@ -3,7 +3,7 @@ extends layout.server.view.pug
block content
section.content(ui-view='', ng-cloak='')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css')
link(rel='stylesheet', href='/static/lib/jquery-ui/themes/flick/jquery-ui.min.css')
script(src='/static/lib/jquery/jquery.min.js')

1
app/views/layout.server.view.pug
View File

@ -40,7 +40,6 @@ html(lang='en', xmlns='http://www.w3.org/1999/xhtml')
link(rel='stylesheet', href=bowerCssFile)
link(rel='stylesheet', href='/static/lib/angular-input-stars/angular-input-stars.css')
link(rel='stylesheet', href='/static/lib/jquery-ui/themes/flick/jquery-ui.css')
link(rel='stylesheet', href='/static/modules/core/css/github-fork-ribbon.css')
// end Bower CSS dependencies
//Application CSS Files

6
bower.json
View File

@ -43,7 +43,8 @@
"angular-strap": "^2.3.12",
"textAngular": "^1.5.16",
"angular-ui-select": "^0.19.8",
"angular-bootstrap-switch": "^0.5.2"
"angular-bootstrap-switch": "^0.5.2",
"jquery": "^3.2.1"
},
"resolutions": {
"angular-bootstrap": "^0.14.0",
@ -53,7 +54,8 @@
"angular-ui-sortable": "^0.17.1",
"angular-ui-date": "~0.0.11",
"angular-input-stars-directive": "master",
"angular-ui-select": "^0.19.8"
"angular-ui-select": "^0.19.8",
"jquery": "^3.2.1"
},
"overrides": {
"BOWER-PACKAGE": {

2
public/dist/form_populate_template_cache.js vendored
View File

@ -12,7 +12,7 @@ angular.module('TellForm-Form.form_templates', []).run(['$templateCache', functi
$templateCache.put("form_modules/forms/base/views/directiveViews/field/date.html",
"<div class=\"field row\" ng-click=\"setActiveField(field._id, index, true)\"><div class=\"col-xs-12 field-title\" ng-style=\"{'color': design.colors.questionColor}\"><h3><small class=field-number>{{index+1}} <i class=\"fa fa-angle-double-right\" aria-hidden=true></i> </small>{{field.title}} <span class=required-error ng-show=\"!field.required && !field.fieldValue\">{{ 'OPTIONAL' | translate }}</span></h3><p class=col-xs-12><small>{{field.description}}</small></p></div><div class=\"col-xs-12 field-input\"><div class=\"control-group input-append\"><input class=focusOn ng-focus=\"setActiveField(field._id, null, false)\" ng-style=\"{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}\" ng-class=\"{ 'no-border': !!field.fieldValue }\" ui-date=dateOptions ng-model=field.fieldValue ng-model-options=\"{ debounce: 250 }\" ng-required=field.required placeholder=MM/DD/YYYY on-tab-key=nextField() on-tab-and-shift-key=prevField() ng-change=nextField()></div></div></div>");
$templateCache.put("form_modules/forms/base/views/directiveViews/field/dropdown.html",
"<div class=\"field row dropdown\" ng-if=\"field.fieldOptions.length > 0\"><div class=\"col-xs-12 field-title\" ng-style=\"{'color': design.colors.questionColor}\"><h3><small class=field-number>{{index+1}} <i class=\"fa fa-angle-double-right\" aria-hidden=true></i> </small>{{field.title}} <span class=required-error ng-show=!field.required>{{ 'OPTIONAL' | translate }}</span></h3><p class=col-xs-12><small>{{field.description}}</small></p></div><div class=\"col-xs-12 field-input\"><ui-select ng-model=field.fieldValue ng-focus=\"setActiveField(field._id, null, false)\" theme=selectize search-enabled=true search-by=option_value set-search-to-answer=true ng-required=field.required on-tab-and-shift-key=prevField() on-tab-key=nextField() ng-change=nextField()><ui-select-match placeholder=\"{{ 'OPTION_PLACEHOLDER' | translate }}\"></ui-select-match><ui-select-choices repeat=\"option in field.fieldOptions | filter: $select.search\" ng-class=\"{'active': option.option_value === field.fieldValue }\"><span ng-bind-html=\"option.option_value | highlight: $select.search\"></span></ui-select-choices></ui-select></div></div><br>");
"<div class=\"field row dropdown\" ng-if=\"field.fieldOptions.length > 0\"><div class=\"col-xs-12 field-title\" ng-style=\"{'color': design.colors.questionColor}\"><h3><small class=field-number>{{index+1}} <i class=\"fa fa-angle-double-right\" aria-hidden=true></i> </small>{{field.title}} <span class=required-error ng-show=!field.required>{{ 'OPTIONAL' | translate }}</span></h3><p class=col-xs-12><small>{{field.description}}</small></p></div><div class=\"col-xs-12 field-input\"><ui-select ng-model=field.fieldValue class=dropdown ng-focus=\"setActiveField(field._id, null, false)\" theme=selectize search-enabled=true ng-required=field.required on-tab-and-shift-key=prevField() on-tab-key=nextField() ng-change=nextField()><ui-select-match placeholder=\"{{ 'OPTION_PLACEHOLDER' | translate }}\"></ui-select-match><ui-select-choices repeat=\"option in field.fieldOptions | filter: $select.search\"><span ng-bind-html=\"option.option_value | highlight: $select.search\"></span></ui-select-choices></ui-select></div></div><br>");
$templateCache.put("form_modules/forms/base/views/directiveViews/field/hidden.html",
"<input type=hidden>");
$templateCache.put("form_modules/forms/base/views/directiveViews/field/legal.html",

5
public/form_modules/forms/base/css/form.css
View File

@ -372,7 +372,6 @@ div.config-form .row.field {
background-color:#efefef;
}
/*Styles for add fields tab*/
.admin-form .add-field {
background-color: #ddd;
@ -389,10 +388,6 @@ div.config-form .row.field {
border-radius: 4px;
}
.admin-form .oscar-field-select {
margin: 10px 0 10px;
}
.view-form-btn.span {
padding-right:0.6em;
}

6
public/form_modules/forms/base/views/directiveViews/field/dropdown.html
View File

@ -15,19 +15,17 @@
</div>
<div class="col-xs-12 field-input">
<ui-select ng-model="field.fieldValue"
class="dropdown"
ng-focus="setActiveField(field._id, null, false)"
theme="selectize"
search-enabled="true"
search-by="option_value"
set-search-to-answer="true"
ng-required="field.required"
on-tab-and-shift-key="prevField()"
on-tab-key="nextField()"
ng-change="nextField()">
<ui-select-match placeholder="{{ 'OPTION_PLACEHOLDER' | translate }}">
</ui-select-match>
<ui-select-choices repeat="option in field.fieldOptions | filter: $select.search"
ng-class="{'active': option.option_value === field.fieldValue }">
<ui-select-choices repeat="option in field.fieldOptions | filter: $select.search">
<span ng-bind-html="option.option_value | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>

2
public/modules/forms/admin/views/adminTabs/configure.html
View File

@ -1,2 +1,4 @@
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css'>
<configure-form-directive myform="myform" user="user">
</configure-form-directive>

4
public/modules/forms/base/css/form.css
View File

@ -224,13 +224,13 @@ form .row.field {
font-size:0.8em;
}
form .row.field.dropdown > .field-input input {
form .dropdown > .field-input input {
min-height: 34px;
border-width: 0 0 2px 0;
border-radius: 5px;
}
form .row.field.dropdown > .field-input input:focus {
form .dropdown > .field-input input:focus {
border: none;
}

102
public/modules/forms/tests/unit/controllers/admin-form.client.controller.test.js
View File

@ -10,7 +10,8 @@
$httpBackend,
$stateParams,
$location,
$state;
$state,
$timeout;
var sampleUser = {
firstName: 'Full',
@ -175,7 +176,7 @@
// The injector ignores leading and trailing underscores here (i.e. _$httpBackend_).
// This allows us to inject a service but then attach it to a variable
// with the same name as the service.
beforeEach(inject(function($controller, $rootScope, _$state_, _$location_, _$stateParams_, _$httpBackend_, CurrentForm, Forms) {
beforeEach(inject(function($controller, $rootScope, _$state_, _$location_, _$stateParams_, _$httpBackend_, CurrentForm, Forms, _$timeout_) {
// Set a new global scope
scope = $rootScope.$new();
@ -187,6 +188,7 @@
$httpBackend = _$httpBackend_;
$location = _$location_;
$state = _$state_;
$timeout = _$timeout_;
$httpBackend.whenGET(/\.html$/).respond('');
$httpBackend.whenGET('/users/me/').respond('');
@ -197,60 +199,70 @@
};
}));
it('AdminFormController should fetch current Form when instantiated', function() {
// Run controller functionality
var controller = createAdminFormController();
it('AdminFormController should fetch current Form when instantiated', inject(function($timeout) {
$timeout(function() {
// Run controller functionality
var controller = createAdminFormController();
// Test scope value
expect(scope.myform).toEqualData(sampleForm);
});
it('$scope.removeCurrentForm() with valid form data should send a DELETE request with the id of form', inject(function($uibModal) {
var controller = createAdminFormController();
//Set $state transition
$state.expectTransitionTo('listForms');
// Set DELETE response
$httpBackend.expect('DELETE', /^(\/forms\/)([0-9a-fA-F]{24})$/).respond(200, sampleForm);
//Run controller functionality
scope.openDeleteModal();
scope.removeCurrentForm();
$httpBackend.flush();
$state.ensureAllTransitionsHappened();
// Test scope value
expect(scope.myform).toEqualData(sampleForm);
});
}));
it('$scope.update() should send a PUT request with the id of form', function() {
var controller = createAdminFormController();
it('$scope.removeCurrentForm() with valid form data should send a DELETE request with the id of form', inject(function($timeout, $uibModal) {
$timeout(function() {
var controller = createAdminFormController();
//Set PUT response
$httpBackend.expect('PUT', /^(\/forms\/)([0-9a-fA-F]{24})$/).respond(200, sampleForm);
//Set $state transition
$state.expectTransitionTo('listForms');
//Run controller functionality
scope.update(false, sampleForm, false, false);
// Set DELETE response
$httpBackend.expect('DELETE', /^(\/forms\/)([0-9a-fA-F]{24})$/).respond(200, sampleForm);
$httpBackend.flush();
});
//Run controller functionality
scope.openDeleteModal();
scope.removeCurrentForm();
it('$scope.openDeleteModal() should open scope.deleteModal', function() {
var controller = createAdminFormController();
$httpBackend.flush();
$state.ensureAllTransitionsHappened();
});
}));
//Run controller functionality
scope.openDeleteModal();
expect(scope.deleteModal.opened).toEqual(true);
});
it('$scope.update() should send a PUT request with the id of form', inject(function($timeout) {
$timeout(function() {
var controller = createAdminFormController();
it('$scope.cancelDeleteModal() should close $scope.deleteModal', inject(function($uibModal) {
var controller = createAdminFormController();
//Set PUT response
$httpBackend.expect('PUT', /^(\/forms\/)([0-9a-fA-F]{24})$/).respond(200, sampleForm);
//Run controller functionality
scope.openDeleteModal();
//Run controller functionality
scope.update(false, sampleForm, false, false);
//Run controller functionality
scope.cancelDeleteModal();
expect( scope.deleteModal.opened ).toEqual(false);
$httpBackend.flush();
});
}));
it('$scope.openDeleteModal() should open scope.deleteModal', inject(function($timeout) {
$timeout(function() {
var controller = createAdminFormController();
//Run controller functionality
scope.openDeleteModal();
expect(scope.deleteModal.opened).toEqual(true);
});
}));
it('$scope.cancelDeleteModal() should close $scope.deleteModal', inject(function($uibModal, $timeout) {
$timeout(function() {
var controller = createAdminFormController();
//Run controller functionality
scope.openDeleteModal();
//Run controller functionality
scope.cancelDeleteModal();
expect( scope.deleteModal.opened ).toEqual(false);
});
}));
});
}());