Commit 5d032df1 authored by Hellmich, Christoph's avatar Hellmich, Christoph
Browse files

FEATURE-simple-conditional complete

parents 4dda963f 5c57fe2e
......@@ -110,7 +110,7 @@ public class ElementResource {
}
/**
* GET /steps/wizard:id -> get the steps from wizard with the "id".
* GET /step-elements/step:id -> get the elements from step with the "id".
*/
@RequestMapping(value = "/step-elements/{id}",
method = RequestMethod.GET,
......@@ -122,6 +122,24 @@ public class ElementResource {
return new ResponseEntity<>(elements, HttpStatus.OK);
}
/**
* GET /steps-elements/step:ids -> get the elements from steps with the "id".
*/
@RequestMapping(value = "/steps-elements",
method = RequestMethod.POST,
produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public ResponseEntity<List<Element>> getElementsFromSteps(@RequestBody List<Long> ids) {
log.debug("REST request to get Elements from Step : {}", ids);
List<Element> elements = new ArrayList<>();
for(Long id : ids) {
elements.addAll(elementRepository.findByStepIdOrderByFormRowAsc(id));
}
return new ResponseEntity<>(elements, HttpStatus.OK);
}
/**
* DELETE /elements/:id -> delete the "id" element.
*/
......
......@@ -3,6 +3,12 @@ $icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/"
@import "components-font-awesome/scss/font-awesome.scss";
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower
// main
.panel-body img {
border: 3px solid black;
}
// /main
// angular-ui-tree
.wizardCommands {
margin: 8px 0px 24px 0px;
......@@ -112,6 +118,10 @@ $icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/"
margin-bottom: 0;
}
.conditional {
margin-bottom: 0;
padding-top: 7px;
}
// /angular-form-gen
body {
......
......@@ -147,6 +147,7 @@
<script src="scripts/app/wizardEditor/wizardEditor-wizard-delete-dialog.controller.js"></script>
<script src="scripts/components/wizardEditor/customElement/customElement.controller.js"></script>
<script src="scripts/components/wizardEditor/nextStep/nextStep.controller.js"></script>
<script src="scripts/components/wizardEditor/simpleConditional/simpleConditional-directive.js"></script>
<script src="scripts/components/wizardEditor/templateImporter/templateImporter.controller.js"></script>
<script src="scripts/components/wizardEditor/form.service.js"></script>
<script src="scripts/components/wizardEditor/tree.service.js"></script>
......
<div ng-cloak>
<div ng-cloak="">
<div class="row">
<div class="col-md-12">
<div ng-switch="isAuthenticated()">
......@@ -20,10 +20,11 @@
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!-- <div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<div class="panel-heading" role="tab" id="headingXXX">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#changelogXXXX" aria-expanded="false" aria-controls="changelogXXXX">
Collapsible Group Item #3
Neuerungen
<small>19.07.2016</small>
</a>
</h4>
</div>
......@@ -34,6 +35,23 @@
</div>
</div> -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#changelog0809" aria-expanded="false" aria-controls="changelog0809">
Neues Element
<small>09.08.2016</small>
</a>
</h4>
</div>
<div id="changelog0809" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>Simple Condition</h4>
<img src="assets/images/userinterface/simpleCondition.gif" alt="simple condition" />
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
......@@ -46,11 +64,11 @@
<div id="changelog0719" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<h4>Wizard erstellen</h4>
<img src="assets/images/userinterface/createWizard.gif" style="border: 3px solid black"/>
<img src="assets/images/userinterface/createWizard.gif" alt="create wizard" />
<h4>Schritt hinzufügen</h4>
<img src="assets/images/userinterface/addStep.gif" style="border: 3px solid black"/>
<img src="assets/images/userinterface/addStep.gif" alt="add step" />
<h4>Formularelemente hinzufügen</h4>
<img src="assets/images/userinterface/editorUse.gif" style="border: 3px solid black"/>
<img src="assets/images/userinterface/editorUse.gif" alt="editor use" />
</div>
</div>
</div>
......
......@@ -23,6 +23,15 @@ angular.module('ddaApp')
'displayName': 'Checkbox List'
}
},
{
'fieldName': 'simpleConditional',
'category': 'Wizard',
'fieldOptions': {
'displayName': 'Conditional',
'hidden': false,
'nolabel': false
}
},
// {
// 'fieldName': 'nextStep',
// 'category': 'Development',
......
......@@ -29,6 +29,15 @@ angular.module('ddaApp')
return data;
}
},
'elementsFromSteps': {
method: 'POST',
url:'api/steps-elements/',
isArray: true,
transformResponse: function (data) {
data = angular.fromJson(data);
return data;
}
},
'update': { method:'PUT' }
});
});
'use strict';
angular.module('ddaApp').directive('ddaSimpleConditional', function(Wizard, Step, $state) {
function addWatcher(scope) {
scope.$watch('field.element', function(newElement, oldElement) {
if (newElement !== oldElement) {
scope.embeddedForm.schema.fields = [];
scope.embeddedForm.data = {};
}
if (newElement) {
scope.embeddedForm.schema.fields = [newElement];
}
});
scope.$watch('embeddedForm.data', function(newFormData, oldFormData) {
if (scope.field.element && newFormData[scope.field.element.name]) {
scope.field.value = newFormData[scope.field.element.name];
} else {
scope.field.value = null;
}
}, true);
}
function loadEntities(scope) {
Wizard.steps({
id: $state.params.id
}, function(steps) {
var selectedStep = steps.find(function(step) {
return step.id === Number($state.params.stepId);
});
scope.steps = steps.filter(function(step) {
return (step.id !== selectedStep.id) && (step.treeRow > selectedStep.treeRow);
});
var stepIds = steps.filter(function(step) {
return step.treeRow <= selectedStep.treeRow;
}).map(function(step) {
return step.id;
});
Step.elementsFromSteps(stepIds, function(elements) {
scope.elements = elements.filter(function(element) {
return element.type !== 'simpleConditional' || element.step.id !== Number($state.params.stepId);
});
});
});
}
function link(scope, element, attr) {
scope.steps = [];
scope.elements = [];
scope.embeddedForm = {
'schema': {},
'data': {}
};
if (scope.field.element) {
scope.embeddedForm.schema.fields = [scope.field.element];
scope.embeddedForm.data[scope.field.element.name] = scope.field.value;
}
loadEntities(scope);
addWatcher(scope);
}
var directive = {
link: link
};
return directive;
});
<div>
<div fg-tabs-pane="Properties">
<div fg-property-field-common="{ fieldname: true }"></div>
<div dda-simple-conditional="">
<div fg-property-field="fieldElement" fg-property-field-label="If Element">
<select class="form-control" name="fieldElement" ng-model="field.element" ng-options="element as element.name group by element.step.name for element in elements track by element.id">
<option value=""></option>
</select>
</div>
<div fg-property-field="fieldValue" fg-property-field-label="Has value">
<div fg-form="" name="fieldValue" ng-model="field.value" fg-form-data="embeddedForm.data" fg-schema="embeddedForm.schema"></div>
</div>
<div fg-property-field="fieldNextStep" fg-property-field-label="Then go to">
<select class="form-control" name="fieldNextStep" ng-model="field.nextStep" ng-options="step as step.name for step in steps track by step.id"></select>
</div>
<div fg-property-field="fieldHidden" fg-property-field-label="">
<div class="checkbox">
<label title="Set the initial value of this field.">
<input type="checkbox" name="fieldHidden" ng-model="field.hidden" ng-change="field.nolabel=field.hidden" />
Hide element in form preview
</label>
</div>
</div>
</div>
</div>
</div>
<div id="{{ field.$_id }}" class="conditional" ng-class="{ 'hidden': field.schema.hidden }">
<span ng-show="field.schema.element.name">If
<ins>{{ field.schema.element.name }}</ins>
has value
<span ng-show="!field.schema.value">&lt;?&gt;</span>
<ins>{{ field.schema.value }}</ins>
</span>
<span ng-show="field.schema.nextStep.name">go to
<ins>{{ field.schema.nextStep.name }}</ins>
</span>
<!-- <span ng-show="!field.schema.hidden">|
<i class="fa fa-eye"></i>
</span> -->
</div>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment