got logic jump to work in new edit modal

This commit is contained in:
David Baldwynn 2017-03-10 10:25:35 -08:00
parent fbc5641388
commit 55b6a37ad6
No known key found for this signature in database
GPG key ID: 15D1C13202224A9B
17 changed files with 913 additions and 98 deletions

View file

@ -43,7 +43,8 @@
"jsep": "^0.3.1",
"ngclipboard": "^1.1.1",
"mobile-detect": "^1.3.3",
"socket.io-client": "^1.7.2"
"socket.io-client": "^1.7.2",
"css-toggle-switch": "^4.0.2"
},
"resolutions": {
"angular-bootstrap": "^0.14.0",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -5,9 +5,6 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
$translateProvider.translations('en', {
//Configure Form Tab View
PDF_GENERATION_EMR: 'PDF Generation/EMR',
SAVE_PDF_SUBMISSIONS: 'Save Submissions as PDFs?',
UPLOAD_YOUR_PDF: 'Upload Your PDF Template',
ADVANCED_SETTINGS: 'Advanced Settings',
FORM_NAME: 'Form Name',
FORM_STATUS: 'Form Status',
@ -23,6 +20,14 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
CREATE_FORM: 'Create form',
CREATED_ON: 'Created on',
//Edit Field Modal
EDIT_FIELD: 'Edit this Field',
SAVE_FIELD: 'Save',
ON: 'ON',
OFF: 'OFF',
REQUIRED_FIELD: 'Required',
LOGIC_JUMP: 'Logic Jump',
//Admin Form View
ARE_YOU_SURE: 'Are you ABSOLUTELY sure?',
READ_WARNING: 'Unexpected bad things will happen if you dont read this!',
@ -39,7 +44,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
PREVIEW: 'Preview',
//Edit Form View
DISABLED: 'Disabled:',
DISABLED: 'Disabled',
YES: 'YES',
NO: 'NO',
ADD_LOGIC_JUMP: 'Add Logic Jump',
@ -56,10 +61,10 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
BUTTON_TEXT: 'Text',
BUTTON_LINK: 'Link',
ADD_BUTTON: 'Add Button',
PREVIEW_FIELD: 'Preview Field',
EDIT_FIELD: 'Edit Field',
QUESTION_TITLE: 'Question Title',
QUESTION_DESCRIPTION: 'Question Description',
PREVIEW_FIELD: 'Preview Question',
EDIT_FIELD: 'Edit Question',
QUESTION_TITLE: 'Title',
QUESTION_DESCRIPTION: 'Description',
OPTIONS: 'Options',
ADD_OPTION: 'Add Option',
NUM_OF_STEPS: 'Number of Steps',

View file

@ -51,7 +51,7 @@ angular.module('forms').controller('AdminFormController', ['$rootScope', '$scope
$scope.setForm = function(form){
$scope.myform = form;
};
$rootScope.resetForm = function(){
$scope.myform = Forms.get({
formId: $stateParams.formId
@ -64,7 +64,7 @@ angular.module('forms').controller('AdminFormController', ['$rootScope', '$scope
$scope.openDeleteModal = function(){
$scope.deleteModal = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
templateUrl: 'formDeleteModal.html',
controller: 'AdminFormController',
resolve: {
myForm: function(){
@ -79,7 +79,6 @@ angular.module('forms').controller('AdminFormController', ['$rootScope', '$scope
});
};
$scope.cancelDeleteModal = function(){
if($scope.deleteModal){
$scope.deleteModal.dismiss('cancel');
@ -109,7 +108,7 @@ angular.module('forms').controller('AdminFormController', ['$rootScope', '$scope
};
// Update existing Form
$scope.update = $rootScope.update = function(updateImmediately, diffChanges, cb){
$scope.update = $rootScope.update = function(updateImmediately, diffChanges, refreshAfterUpdate, cb){
refreshFrame();
var continueUpdate = true;
@ -125,7 +124,8 @@ angular.module('forms').controller('AdminFormController', ['$rootScope', '$scope
$scope.updatePromise = $http.put('/forms/'+$scope.myform._id, { changes: diffChanges })
.then(function(response){
$rootScope.myform = $scope.myform = response.data;
if(refreshAfterUpdate) $rootScope.myform = $scope.myform = response.data;
// console.log(response.data);
}).catch(function(response){
console.log('Error occured during form UPDATE.\n');

View file

@ -0,0 +1,24 @@
/*
** Edit Field Modal
*/
.edit-field-modal-window .modal-dialog {
width: 90%;
}
.edit-field-modal-window .modal-body {
padding: 0;
}
.edit-field-modal-window .edit-field-panel {
background-color: #F1F1F1;
padding: 0 35px 0 35px;
}
.edit-field-modal-window .preview-field-panel {
display: flex;
flex-direction: column;
justify-content: center;
}
.edit-field-modal-window .preview-field {
resize: vertical;
}

View file

@ -1,3 +1,5 @@
.analytics .header-title {
font-size: 1em;
color: #bab8b8;

View file

@ -15,6 +15,14 @@ function removeDateFieldsFunc(o) {
return clone;
}
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
_.mixin({ removeDateFields : removeDateFieldsFunc });
angular.module('forms').directive('autoSaveForm', ['$rootScope', '$timeout', function($rootScope, $timeout) {
@ -51,8 +59,7 @@ angular.module('forms').directive('autoSaveForm', ['$rootScope', '$timeout', fun
};
var debounceSave = function (diffChanges) {
$rootScope[$attrs.autoSaveCallback](true, diffChanges,
$rootScope[$attrs.autoSaveCallback](true, diffChanges, true,
function(err){
if(!err){
$formCtrl.$setPristine();
@ -93,20 +100,20 @@ angular.module('forms').directive('autoSaveForm', ['$rootScope', '$timeout', fun
$rootScope.finishedRender = true;
}
//console.log('Autosaving');
//console.log('\n\n----------');
//console.log('!$dirty: '+ !$formCtrl.$dirty );
console.log('Autosaving');
console.log('\n\n----------');
console.log('$dirty: '+ $formCtrl.$dirty );
// console.log('changedFieldMap: '+changedFieldMap);
//console.log('finishedRender: '+$rootScope.finishedRender);
//console.log('!saveInProgress: '+!$rootScope.saveInProgress);
// console.log('finishedRender: '+$rootScope.finishedRender);
// console.log('!saveInProgress: '+!$rootScope.saveInProgress);
// console.log('newValue: '+newValue);
// console.log('oldValue: '+oldValue);
// console.log(oldValue.form_fields);
// console.log(newValue.form_fields);
//Save form ONLY IF rendering is finished, form_fields have been changed AND currently not save in progress
if( $rootScope.finishedRender && (changedFields || changedStartPage) && !$rootScope.saveInProgress) {
if($rootScope.finishedRender && (changedFields || changedStartPage) && !$rootScope.saveInProgress) {
if(savePromise) {
$timeout.cancel(savePromise);

View file

@ -1,7 +1,7 @@
'use strict';
angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormFields',
function ($rootScope, FormFields) {
angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormFields', '$uibModal',
function ($rootScope, FormFields, $uibModal) {
return {
templateUrl: 'modules/forms/admin/views/directiveViews/form/edit-form.client.view.html',
restrict: 'E',
@ -21,6 +21,39 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
forcePlaceholderSize: true
};
/*
** EditModal Functions
*/
$scope.openEditModal = function(curr_field){
$scope.editFieldModal = $uibModal.open({
animation: true,
templateUrl: 'editFieldModal.html',
windowClass: 'edit-field-modal-window',
controller: function($uibModalInstance, $scope) {
$scope.field = curr_field;
$scope.showLogicJump = false;
$scope.$watch(function(oldValue, newValue){
console.log(newValue);
});
$scope.cancel = function(){
};
}
});
$scope.editFieldModal.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
console.log('Edit Modal dismissed at: ' + new Date());
});
};
$scope.cancelEditModal = function(){
if($scope.editModal){
$scope.editFieldModal.dismiss('cancel');
}
};
/*
** Setup Angular-Input-Star Shape Dropdown
*/
@ -118,7 +151,7 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
shape: 'Heart'
}
}
if($scope.showAddOptions(newField)){
newField.fieldOptions = [];
newField.fieldOptions.push({

View file

@ -5,7 +5,7 @@
<section class="admin-form">
<!-- Modal Delete Dialog Template -->
<script type="text/ng-template" id="myModalContent.html">
<script type="text/ng-template" id="formDeleteModal.html">
<div class="modal-header">
<h2 class="modal-title hidden-md hidden-lg">{{ 'ARE_YOU_SURE' | translate }}</h2>
<h3 class="modal-title hidden-xs hidden-sm">{{ 'ARE_YOU_SURE' | translate }}</h3>

View file

@ -88,7 +88,7 @@
<label style="display: inline-block;">
<input type="radio" data-ng-value="true" ng-model="myform.hideFooter" ng-required="true" />
&nbsp;<span>{{ 'No' | translate }}</span>
&nbsp;<span>{{ 'NO' | translate }}</span>
</label>
</div>
</div>

View file

@ -1,4 +1,240 @@
<form class="row container" name="editForm" auto-save-form auto-save-watch="myform" auto-save-callback="update">
<form class="row container" name="editForm"> <!--auto-save-form auto-save-watch="myform" auto-save-callback="update">-->
<!-- Edit Field Modal Dialog Template -->
<script type="text/ng-template" id="editFieldModal.html" class="edit-field-modal">
<div class="modal-body">
<div class="row">
<div class="edit-field-panel col-md-6 col-xs-12 col-sm-12 container">
<div class="row modal-header">
<h2 class="modal-title hidden-md hidden-lg">{{ 'EDIT_FIELD' | translate }}</h2>
<h3 class="modal-title hidden-xs hidden-sm">{{ 'EDIT_FIELD' | translate }}</h3>
</div>
<div class="row question">
<div class="col-md-12 bold">{{ 'QUESTION_TITLE' | translate }}</div>
<div class="col-md-12">
<input type="text" class="form-control" ng-model="field.title" name="title{{field._id}}" value="{{field.title}}" required></div>
</div>
<div class="row"><br></div>
<div class="row description" ng-hide="showRatingOptions(field)">
<div class="col-md-12 bold">{{ 'QUESTION_DESCRIPTION' | translate }}</div>
<div class="col-md-12">
<textarea type="text" class="form-control" ng-model="field.description" name="description{{field._id}}"value="{{field.description}}"></textarea>
</div>
</div>
<div class="row" ng-show="showAddOptions(field)"><br></div>
<div class="row options" ng-if="showAddOptions(field)">
<div class="col-md-4 col-xs-12">{{ 'OPTIONS' | translate }}</div>
<div class="col-md-8 col-xs-12">
<div ng-repeat="option in field.fieldOptions track by option.option_id" class="row">
<input type="text" name="{{option.option_value}}{{field._id}}" ng-model="option.option_value" class="col-xs-5">
<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteOption($index, option)" class="col-xs-3">
<i class="fa fa-trash-o"></i>
</a>
</div>
<div class="row">
<button class="btn btn-primary btn-small col-md-offset-0 col-md-6 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-6" type="button" ng-click="addOption($index)">
<i class="icon-plus icon-white"></i> {{ 'ADD_OPTION' | translate }}
</button>
</div>
</div>
</div>
<div class="row" ng-show="showRatingOptions(field)"><br></div>
<div class="row" ng-if="showRatingOptions(field)">
<div class="col-md-9 col-sm-9">{{ 'NUM_OF_STEPS' | translate }}</div>
<div class="col-md-3 col-sm-3">
<input style="width:100%" type="number"
min="1" max="10"
ng-model="field.ratingOptions.steps"
name="ratingOptions_steps{{field._id}}"
ng-value="{{field.ratingOptions.steps}}"
required>
</div>
<br>
<div class="col-md-5 col-sm-9">Shape:</div>
<div class="col-md-7 col-sm-3">
<select style="width:100%" ng-model="field.ratingOptions.shape"
value="{{field.ratingOptions.steps}}"
name="ratingOptions_shape{{field._id}}" required>
<option ng-repeat="shapeType in field.ratingOptions.validShapes"
value="{{shapeType}}">
{{select2FA[shapeType]}}
</option>
</select>
</div>
</div>
<div class="row"><br></div>
<div class="row">
<div class="col-md-4 col-xs-12 field-title">{{ 'REQUIRED_FIELD' | translate }}</div>
<div class="col-md-8 col-xs-12 field-input">
<label class="switch-light switch-holo" onclick="">
<input type="checkbox" ng-model="field.required">
<span class="large-3 columns float-left">
<span> {{ 'OFF' | translate }}</span>
<span> {{ 'ON' | translate }}</span>
<a></a>
</span>
</label>
<!--
<label class="btn col-xs-5">
<input type="radio" ng-value="true" ng-model="field.required" name="required{{field._id}}"/>
<span> &nbsp; {{ 'YES' | translate }}</span>
</label>
<label class="btn col-xs-5 col-xs-offset-1">
<input type="radio" ng-value="false" ng-model="field.required" name="required{{field._id}}"/>
<span> &nbsp; {{ 'NO' | translate }}</span>
</label>
-->
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12 field-input">{{ 'DISABLED' | translate }}</div>
<div class="col-md-8 col-xs-12 field-input">
<label class="switch-light switch-holo" ng-click="console.log('clicked switch')">
<input type="checkbox" ng-model="field.disabled">
<span>
<span> {{ 'OFF' | translate }}</span>
<span> {{ 'ON' | translate }}</span>
<a></a>
</span>
</label>
<!--
<label class="btn col-xs-5">
<input type="radio" ng-value="true"
ng-model="field.disabled" name="disabled{{field._id}}"/>
<span> &nbsp; {{ 'YES' | translate }}</span>
</label>
<label class="btn col-xs-5 col-xs-offset-1">
<input type="radio" ng-value="false"
ng-model="field.disabled" name="disabled{{field._id}}"/>
<span> &nbsp; {{ 'NO' | translate }}</span>
</label>
-->
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12 field-input">{{ 'LOGIC_JUMP' | translate }}</div>
<div class="col-md-8 col-xs-12 field-input">
<label class="switch-light switch-holo" onclick="">
<input type="checkbox" ng-model="showLogicJump">
<span>
<span> {{ 'OFF' | translate }}</span>
<span> {{ 'ON' | translate }}</span>
<a></a>
</span>
</label>
</div>
</div>
<div class="row question" ng-if="!!showLogicJump">
<div class="col-md-4 col-sm-12">
<b> If this field </b>
</div>
<div class="col-md-4 col-sm-12">
<select style="width:100%" ng-model="field.logicJump.expressionString"
value="{{field.logicJump.expressionString}}"
name="logicjump_expressionString{{field._id}}">
<option value="field == static">
is equal to
</option>
<option value="field != static">
is not equal to
</option>
<option value="field > static" ng-if-start="field.fieldType === 'number' || field.fieldType === 'rating' || field.fieldType === 'number'">
is greater than
</option>
<option value="field >= static">
is greater or equal than
</option>
<option value="field < static">
is smaller than
</option>
<option value="field <= static" ng-if-end>
is smaller or equal than
</option>
<option value="field contains static" ng-if-start="field.fieldType !== 'number' && field.fieldType !== 'rating' && field.fieldType !== 'number'">
contains
</option>
<option value="field !contains static">
does not contain
</option>
<option value="field ends static">
ends with
</option>
<option value="field !ends static">
does not end with
</option>
<option value="field starts static">
starts with
</option>
<option value="field !starts static" ng-if-end>
does not start with
</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<input type="text" ng-model="field.logicJump.valueB"/>
</div>
<div class="col-md-2">
<b>Jumps to </b>
</div>
<div class="col-md-10">
<select style="width:100%" ng-model="field.logicJump.jumpTo"
value="{{field.logicJump.jumpTo}}"
name="logicjump_jumpTo{{field._id}}">
<option ng-repeat="jump_field in myform.form_fields"
value="{{jump_field._id}}">
{{jump_field.title}}
</option>
</select>
</div>
</div>
<div class="modal-footer row">
<button type="submit" ng-click="update(false, null)" class="btn btn-signup btn-rounded">
{{ 'SAVE_FIELD' | translate }}
</button>
<button ng-click="cancel()" class="btn btn-secondary btn-rounded">
{{ 'CANCEL' | translate }}
</button>
</div>
</div>
<div class="preview-field-panel col-md-6 hidden-sm hidden-xs container">
<field-directive field="field" validate="false" class="preview-field">
</field-directive>
</div>
</div>
</div>
</script>
<!-- Add Fields Element -->
<div class="col-xs-2 col-sm-4 add-field">
@ -27,7 +263,7 @@
<!-- Current Fields Element -->
<div class="col-xs-10 col-sm-8 current-fields container">
<!-- Welcome Screen -->
<!-- Start Page -->
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default startPage">
@ -175,13 +411,12 @@
class="dropzone">
<accordion-group ng-repeat="field in myform.form_fields track by field._id"
is-open="accordion[$index].isOpen"
is-open="false"
on-finish-render="editFormFields"
ng-if="!field.deletePreserved">
ng-if="!field.deletePreserved"
ng-click="openEditModal(field)">
<accordion-heading>
<div class="handle">
<span class="col-xs-1" ng-switch="field.fieldType">
<field-icon-directive type-name="{{field.fieldType}}"></field-icon-directive>
</span>
@ -197,7 +432,8 @@
</span>
</div>
</accordion-heading>
<div class="accordion-edit container">
<!--
<div class="accordion-edit container">
<div class="row hidden-sm hidden-xs">
<div class="col-md-12">
@ -215,7 +451,7 @@
<h4>{{ 'EDIT_FIELD' | translate }}</h4>
<br>
</div>
</div>
</div>
<div class="row question">
<div class="col-md-4 col-sm-12">{{ 'QUESTION_TITLE' | translate }}:</div>
@ -223,7 +459,7 @@
<input type="text" ng-model="field.title" name="title{{field._id}}" value="{{field.title}}" required></div>
</div>
<div class="row"><br></div>
<div class="row"><br></div>
<div class="row description" ng-hide="showRatingOptions(field)">
<div class="col-md-4 col-sm-12">{{ 'QUESTION_DESCRIPTION' | translate }}:</div>
@ -241,7 +477,7 @@
<i class="fa fa-trash-o"></i>
</a>
</div>
<div class="row">
<div class="row">
<button class="btn btn-primary btn-small col-md-offset-0 col-md-6 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-6" type="button" ng-click="addOption($index)">
<i class="icon-plus icon-white"></i> {{ 'ADD_OPTION' | translate }}
</button>
@ -274,7 +510,7 @@
</div>
</div>
<div class="row"><br></div>
<div class="row"><br></div>
<div class="row">
<div class="col-md-4 col-xs-12 field-title">Required:</div>
@ -295,13 +531,13 @@
<div class="col-md-4 col-xs-12 field-input">{{ 'DISABLED' | translate }}</div>
<div class="col-md-8 col-xs-12 field-input">
<label class="btn col-xs-5">
<input type="radio" ng-value="true"
<input type="radio" ng-value="true"
ng-model="field.disabled" name="disabled{{field._id}}"/>
<span> &nbsp; {{ 'YES' | translate }}</span>
</label>
<label class="btn col-xs-5 col-xs-offset-1">
<input type="radio" ng-value="false"
<input type="radio" ng-value="false"
ng-model="field.disabled" name="disabled{{field._id}}"/>
<span> &nbsp; {{ 'NO' | translate }}</span>
</label>
@ -330,7 +566,7 @@
<div class="row question" ng-if="myform.form_fields.length > 1 && myform.form_fields[$index].logicJump.fieldA">
<div class="col-md-4 col-sm-12">
<!-- FIX ME: translate this -->
<b> If this field </b>
</div>
<div class="col-md-4 col-sm-12">
@ -338,53 +574,49 @@
value="{{field.logicJump.expressionString}}"
name="logicjump_expressionString{{field._id}}">
<option value="field == static">
<!-- FIX ME: translate this -->
is equal to
</option>
<option value="field != static">
<!-- FIX ME: translate this -->
is not equal to
</option>
<option value="field > static" ng-if-start="field.fieldType === 'number' || field.fieldType === 'rating' || field.fieldType === 'number'">
<!-- FIX ME: translate this -->
is greater than
</option>
<option value="field >= static">
<!-- FIX ME: translate this -->
is greater or equal than
</option>
<option value="field < static">
<!-- FIX ME: translate this -->
is smaller than
</option>
<option value="field <= static" ng-if-end>
<!-- FIX ME: translate this -->
is smaller or equal than
</option>
<option value="field contains static" ng-if-start="field.fieldType !== 'number' && field.fieldType !== 'rating' && field.fieldType !== 'number'">
<!-- FIX ME: translate this -->
contains
</option>
<option value="field !contains static">
<!-- FIX ME: translate this -->
does not contain
</option>
<option value="field ends static">
<!-- FIX ME: translate this -->
ends with
</option>
<option value="field !ends static">
<!-- FIX ME: translate this -->
does not end with
</option>
<option value="field starts static">
<!-- FIX ME: translate this -->
starts with
</option>
<option value="field !starts static" ng-if-end>
<!-- FIX ME: translate this -->
does not start with
</option>
</select>
@ -393,7 +625,7 @@
<input type="text" ng-model="field.logicJump.valueB"/>
</div>
<div class="col-md-2">
<!-- FIX ME: translate this -->
<b>Jumps to </b>
</div>
<div class="col-md-10">
@ -409,6 +641,7 @@
</div>
</div>
-->
</accordion-group>
<div class="panel panel-default" style="border-style: dashed; border-color: #a9a9a9;">

View file

@ -68,6 +68,7 @@ angular.module('forms').directive('fieldDirective', ['$http', '$compile', '$root
scope.setActiveField = $rootScope.setActiveField;
console.log(scope);
//Set format only if field is a date
if(scope.field.fieldType === 'date'){
scope.dateOptions = {

View file

@ -104,12 +104,12 @@ section.auth {
}
section.auth input.form-control {
min-height: 30px!important;
border: none;
}
input.form-control {
min-height: 30px!important;
height: 100% !important;
height: 30px;
border-radius: 4px;
box-shadow: none;
font-size: 18px;