Commit 6ef284de authored by Gerrit Hübbers's avatar Gerrit Hübbers 🃏
Browse files

Merge branch 'master' of git.gesis.org:dda/dda-wizard

parents cfffa7ac 7d6c4ddc
{
"attr-lowercase": true,
"attr-value-double-quotes": true,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"attr-no-duplication": true,
"title-require": true,
"tagname-lowercase": true,
"attr-value-not-empty": true,
"alt-require": true,
"style-disabled": true,
"inline-style-disabled": true,
"space-tab-mixed-disabled": "space",
"attr-unsafe-chars": true,
"id-class-ad-disabled": true,
"inline-script-disabled": true,
"head-script-disabled": true,
"csslint": {
"display-property-grouping": true,
"known-properties": true
}
}
......@@ -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;
......@@ -23,23 +29,33 @@ $icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/"
.angular-ui-tree-handle {
background-color: #ffffff;
border: 1px solid #dae2ea;
padding: 10px;
border-radius: 4px;
font-weight: 400;
padding: 6px 12px 6px 12px;
margin-right: 10px;
border: 1px solid #dae2ea;
margin: 4px 0px;
}
.angular-ui-tree-handle:hover {
background: #F5F5F5;
.tree-node:hover {
// background: #F5F5F5;
border-color: #dce2e8;
}
.angular-ui-tree-handle > span > .pull-right {
visibility: hidden;
opacity: 0.0;
.wizardEditorNewStep {
margin: 10px 0px 0px 0px;
}
.angular-ui-tree-handle:hover > span > .pull-right {
visibility: visible;
opacity: 1.0;
transition: all 0.5s ease-in 0.3s;
.tree-node .treeItemCommands {
position: absolute;
top: 7px;
right: 12px;
// visibility: hidden;
// opacity: 0.0;
}
// .tree-node:hover .treeItemCommands {
// visibility: visible;
// opacity: 1.0;
// transition: all 0.5s ease-in 0.3s;
// }
.tree-node .treeItemCommands a + a {
margin-right: 8px;
}
.angular-ui-tree-placeholder {
border-radius: 4px;
......@@ -112,6 +128,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 {
......
......@@ -145,10 +145,9 @@
<script src="scripts/app/wizardEditor/wizardEditor-step-delete-dialog.controller.js"></script>
<script src="scripts/app/wizardEditor/wizardEditor-wizard-dialog.controller.js"></script>
<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/element.config.js"></script>
<script src="scripts/components/wizardEditor/tree.service.js"></script>
<script src="scripts/components/auth/services/sessions.service.js"></script>
<script src="scripts/components/auth/provider/auth.session.service.js"></script>
......
<div ng-cloak>
<div ng-cloak="">
<div class="row">
<div class="col-md-12">
<div ng-switch="isAuthenticated()">
......@@ -18,12 +18,14 @@
<button ng-click="addTestData()" type="button" class="btn btn-warning btn-lg"><i class="fa fa-refresh fa-lg"></i> Add Example Data</button>
</p>
<h3>Neuerungen</h3>
<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
datum
<small>beschreibung</small>
</a>
</h4>
</div>
......@@ -34,23 +36,40 @@
</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">
09.08.2016
<small>Neues Element hinzugefügt</small>
</a>
</h4>
</div>
<div id="changelog0809" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>Simple Conditional</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">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#changelog0719" aria-expanded="false" aria-controls="changelog0719">
Neuerungen
<small>19.07.2016</small>
19.07.2016
<small>Wizard-Editor erstellt</small>
</a>
</h4>
</div>
<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>
......
'use strict';
angular.module('ddaApp')
.controller('WizardEditorStepDeleteController', function($scope, $uibModalInstance, entity, Step, tree) {
.controller('WizardEditorStepDeleteController', function($scope, $uibModalInstance, entity, Step, treeService) {
$scope.step = entity;
$scope.clear = function() {
$uibModalInstance.dismiss('cancel');
};
$scope.confirmDelete = function(id) {
console.log(tree);
tree.removeStep(id).then(function() {
treeService.removeStep(id).then(function() {
$uibModalInstance.close(true);
});
};
......
'use strict';
angular.module('ddaApp')
.constant('customElements', [
{
'fieldName': 'customElement', // = Ordnername in components/wizardEditor/
'category': '- Development -',
'fieldOptions': {
'displayName': 'Custom Element'
}
},
{
'fieldName': 'checkbox',
'category': '- Development -',
'fieldOptions': {
'displayName': 'Checkbox'
}
},
{
'fieldName': 'checkboxlist',
'category': '- Development -',
'fieldOptions': {
'displayName': 'Checkbox List'
}
},
// {
// 'fieldName': 'nextStep',
// 'category': 'Development',
// 'fieldOptions': {
// 'displayName': 'Next Step',
// 'hidden': true
// }
// },
// {
// 'fieldName': 'templateImporter',
// 'category': 'Development',
// 'fieldOptions': {
// 'displayName': 'Template Importer'
// }
// }
])
.constant('validationMessages', {
// 'date' : 'Invalid date',
// 'dateMin' : 'Date value too low',
// 'dateMax' : 'Date value too high',
// 'max' : 'The value {{ field.schema && ("should be less than " + field.schema.validation.max) || field.state.$viewValue + " is too high" }}'
})
.constant('validationPattern', {
// 'Integer': '/^-{0,1}\\d+$/'
})
.config(function(fgConfigProvider, FgField, customElements, validationMessages, validationPattern) {
for (var i = 0; i < customElements.length; i++) {
var element = customElements[i];
var fieldTemplate = new FgField(element.fieldName, element.fieldOptions);
var templateUrl = 'scripts/components/wizardEditor/' + element.fieldName + '/' + element.fieldName + '-template.ng.html';
var propertiesUrl = 'scripts/components/wizardEditor/' + element.fieldName + '/' + element.fieldName + '-properties.ng.html';
fgConfigProvider.fields.add(fieldTemplate, element.category, templateUrl, propertiesUrl);
}
fgConfigProvider.validation.message(validationMessages);
fgConfigProvider.validation.pattern(validationPattern);
})
.controller('WizardEditorController', function($scope, $state, entity, Wizard, tree, form) {
.controller('WizardEditorController', function($scope, $state, entity, Wizard, Step, Element, treeService) {
var deletedFields = [];
$scope.formDirty = false; // TODO: use $dirty, or something else
......@@ -82,7 +21,7 @@ angular.module('ddaApp')
$scope.treeOptions = {
beforeDrop: function(e) {
return tree.updateStepPosition(e.source.nodeScope.$modelValue,
return treeService.updateStepPosition(e.source.nodeScope.$modelValue,
e.dest.nodesScope.node ? e.dest.nodesScope.node : undefined,
e.dest.index);
}
......@@ -130,8 +69,13 @@ angular.module('ddaApp')
var changingFormWatcher = watchFormChanging();
changingFormWatcher(true);
var onSaveError = function(result) {
console.log('onSaveError');
console.log(result);
};
function loadFields(step) {
if(!step) {
if (!step) {
$scope.selectedStep = null;
$scope.myForm = {
schema: {
......@@ -140,9 +84,9 @@ angular.module('ddaApp')
};
return;
}
form.getElements(step.id).then(function(elements) {
console.log(elements);
Step.elements({
'id': step.id
}, function(elements) {
$scope.myForm.schema.fields = elements;
$scope.selectedStep = step;
deletingFieldWatcher(false);
......@@ -160,33 +104,33 @@ angular.module('ddaApp')
i;
for (i = 0; i < deletedFields.length; i++) {
form.removeElement(deletedFields[i].id);
Element.delete({
'id': deletedFields[i].id
});
}
var counter = 0;
function count() {
counter++;
if(counter === fields.length) {
if (counter === fields.length) {
loadFields($scope.selectedStep);
console.log('loadFields');
}
}
for (i = 0; i < fields.length; i++) {
var element = fields[i];
element.step = {
'id': $scope.selectedStep.id
'id': $scope.selectedStep.id
};
element.formRow = i;
console.log(element);
if(!element.id) {
form.addElement(element).then(count);
if (!element.id) {
Element.save(element, count, onSaveError); // TODO: onSaveError
} else {
form.updateElement(element).then(count);
Element.update(element, count, onSaveError); // TODO: onSaveError
}
}
};
$scope.cancelForm = function() {
......@@ -200,7 +144,7 @@ angular.module('ddaApp')
$scope.addSubStep = function(scope) {
var parent = scope.$modelValue;
tree.addSubStep(scope.$modelValue).then(function(step) {
treeService.addSubStep(scope.$modelValue).then(function(step) {
step.nodes = [];
parent.nodes.push(step);
});
......@@ -211,12 +155,12 @@ angular.module('ddaApp')
$scope.wizards = result;
});
if($state.params.id) {
if ($state.params.id) {
Wizard.steps({
id: $state.params.id
}, function(steps) {
$scope.tree = tree.buildAngularUiTree(steps);
loadFields(tree.getStep($state.params.stepId));
$scope.tree = treeService.buildAngularUiTree(steps);
loadFields(treeService.getStep($state.params.stepId));
$scope.isLoading = false;
});
}
......
<div ng-cloak>
<div ng-cloa="">
<div class="row">
<div class="col-md-12">
<h2>Wizard Editor</h2>
<jh-alert-error></jh-alert-error>
</div>
</div>
......@@ -52,37 +51,36 @@
<!-- tree -->
<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle class="tree-node tree-node-content" ng-class="{ active: node.id === selectedStep.id }">
<a class="btn btn-default btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)">
<div ui-tree-handle="" class="tree-node tree-node-content" ng-class="{ active: node.id === selectedStep.id }">
<a class="btn btn-default btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag="" ng-click="toggle(this)">
<span class="fa" ng-class="{ 'fa-chevron-right': collapsed, 'fa-chevron-down': !collapsed }"></span>
</a>
<a class="stepName" data-nodrag ui-sref="wizardEditor.selectStep({stepId:node.id})" ng-click="selectStep(this)">{{node.name}}</a>
<span style="position: absolute;top:10px;right:10px;">
<a class="pull-right btn btn-danger btn-xs" data-nodrag ui-sref="wizardEditor.deleteStep({stepId:node.id})">
<a class="stepName" data-nodrag="" ui-sref="wizardEditor.selectStep({stepId:node.id})" ng-click="selectStep(this)">{{node.name}}</a>
<span class="treeItemCommands" ng-if="node.id === selectedStep.id">
<a class="pull-right btn btn-danger btn-xs" data-nodrag="" ui-sref="wizardEditor.deleteStep({stepId:node.id})">
<span class="fa fa-trash"></span>
</a>
<a class="pull-right btn btn-default btn-xs" data-nodrag ui-sref="wizardEditor.editStep({stepId:node.id})" style="margin-right: 8px;">
<a class="pull-right btn btn-default btn-xs" data-nodrag="" ui-sref="wizardEditor.editStep({stepId:node.id})">
<span class="fa fa-wrench"></span>
</a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="addSubStep(this)" style="margin-right: 8px;">
<a class="pull-right btn btn-primary btn-xs" data-nodrag="" ng-click="addSubStep(this)">
<span class="glyphicon glyphicon-plus"></span>
</a>
</span>
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'"></li>
<li ng-repeat="node in node.nodes" ui-tree-node="" ng-include="'nodes_renderer.html'"></li>
</ol>
</script>
<div class="row">
<div class="col-md-12" ng-switch="tree.length !== 0" ng-if="selectedWizard.id">
<div ng-switch-when="false" style="margin: 10px 0px;">
<div class="wizardEditorNewStep" ng-switch-when="false">
<button type="button" class="btn btn-default btn-block" ui-sref="wizardEditor.newStep" ng-hide="isLoading">Add Step</button>
</div>
<div ui-tree="treeOptions" id="tree-root" ng-switch-when="true">
<ol ui-tree-nodes ng-model="tree">
<li ng-repeat="node in tree" ui-tree-node ng-include="'nodes_renderer.html'"></li>
<!-- <li ng-if="node.treeIndent == 1" ng-repeat="node in tree track by $index" ui-tree-node ng-include="'nodes_renderer.html'"></li> -->
<ol ui-tree-nodes="" ng-model="tree">
<li ng-repeat="node in tree" ui-tree-node="" ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
</div>
......@@ -91,40 +89,28 @@
</div>
<div class="col-md-9">
<!-- test tree -->
<!-- <div class="row">
<div class="info">
{{info}}
</div>
<pre class="code">{{ tree | json }}</pre>
</div> -->
<!-- /test tree -->
<div fg-tabs class="needs-some-more-space" ng-class="{'form-disable' : !selectedStep.name}">
<div fg-tabs="" class="needs-some-more-space" ng-class="{'form-disable' : !selectedStep.name}">
<div class="form-overlay" ng-if="!selectedStep.name"></div>
<div fg-tabs-pane="Schema Editor">
<form class="form-horizontal" name="meinFormular">
<div fg-edit fg-schema="myForm.schema"></div>
<div fg-edit="" fg-schema="myForm.schema"></div>
</form>
</div>
<div fg-tabs-pane="Form Preview">
<form novalidate class="form-horizontal">
<form novalidate="" class="form-horizontal">
<fieldset>
<legend>
<div class="row">
<div class="col-sm-offset-3 col-sm-3">{{ selectedStep.name }}</div>
</div>
</legend>
<div fg-form fg-schema="myForm.schema"></div>
<div fg-form="" fg-schema="myForm.schema"></div>
</fieldset>
</form>
</div>
<!-- <div fg-tabs-pane="Form Schema">
<div jsonify="myForm"></div>
</div> -->
<div class="form-footer">
<button type="button" class="btn btn-default" ng-click="cancelForm()" ng-disabled="!formDirty">
<span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span>Cancel</span>
......
......@@ -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' }
});
});
......@@ -7,5 +7,4 @@
ng-model="form.data[field.schema.name]">
<span ng-if="field.schema.nolabel">{{ field.schema.displayName }}</span>
</label>
<div jsonify="form.data[field.schema.name] === 'true'"></div>
</div>
<!-- <div fg-tabs-pane="Properties">
<div fg-property-field-common="{ displayname: true, tooltip: true }"></div>
<div fg-property-field-value>
<input date-range-picker fg-update-pattern
options="{ 'singleDatePicker': true }"
type="text"
class="form-control"
name="fieldValue"
ng-model="field.value"/>
</div>
</div>
<div fg-tabs-pane="Validation">
<div fg-property-field-validation="{ required: true }"></div>
</div> -->
<div fg-tabs-pane="Properties">
<div fg-property-field-common="{ displayname: true, tooltip: true }"></div>
<div fg-property-field-value>
</div>
</div>
<div fg-tabs-pane="Validation">
<div fg-property-field-validation="{ required: true }"></div>
</div>
<!-- <input date-range-picker fg-field-input fg-update-pattern class="date-picker"
options="{ 'singleDatePicker': true }"
type="text"
ng-model="form.data[field.schema.name]"
id="{{ field.$_id }}"
tabindex="{{ tabIndex }}"
ng-required="field.schema.validation.required"/> -->
<div ng-controller="customElementController">
<button type="button" class="btn btn-default" ng-click="load()" tabindex="{{ tabIndex }}" ng-required="field.schema.validation.required">Test</button>
<div class="list-group" ng-show="steps.length > 0">
<button ng-repeat="step in steps" type="button" class="list-group-item">{{ step.name }}</button>
</div>
</div>
'use strict';
angular.module('ddaApp').controller('customElementController', function($scope, $state, Step, form, fgConfig, FgField) {
$scope.steps = [];
$scope.load = function() {