#91 initial stubs for adding new field to event

alfio-event · May 5, 2016 · 37bc58c · 37bc58c
1 parent a7e3cc4
commit 37bc58c
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 2 deletions.
diff --git a/src/main/webapp/resources/angular-templates/admin/partials/event/detail.html b/src/main/webapp/resources/angular-templates/admin/partials/event/detail.html
@@ -270,4 +270,9 @@ <h5 class="text-muted">Here are the additional fields defined</h5>
             </div>
         </div>
     </div>
+    <div class="clearfix"></div>
+	<div class="wMarginBottom">
+		<button type="button" class="btn btn-success" data-ng-click="addField(event)"><i class="fa fa-plus"></i> add additional field</button>
+	</div>
+
 </div>
diff --git a/...ain/webapp/resources/angular-templates/admin/partials/event/fragment/add-field-modal.html b/...ain/webapp/resources/angular-templates/admin/partials/event/fragment/add-field-modal.html
@@ -0,0 +1,75 @@
+<div class="modal-header">
+    <h3>Add field</h3>
+</div>
+<div class="modal-body">
+
+<form name="addField" ng-submit="addField(field)">
+
+<div class="row">
+    <div class="col-md-4">
+        <div class="form-group">
+            <label>Field name</label>
+            <input type="input" ng-model="field.name" class="form-control" required>
+        </div>
+        <div class="form-group">
+            <label>Type</label>
+            <select ng-model="field.type" ng-options="option for option in fieldTypes" class="form-control" required></select>
+        </div>
+    </div>
+    <div class="col-md-4" ng-if="field.type != 'country'">
+        <div data-ng-if="field.type === 'select'">
+            <div data-ng-repeat="restrictedValue in field.restrictedValues">
+                <div class="form-group">
+                    <label>Value</label>
+                    <input ng-model="restrictedValue.value" class="form-control" required>
+                </div>
+                <div>
+                    <div ng-repeat="lang in allLanguages" ng-if="isLanguageSelected(lang.value, event.locales)" class="form-group">
+                        <label>Text {{lang.displayLanguage}}</label>
+                        <input ng-model="field.description[lang.locale].restrictedValues[restrictedValue.value]" class="form-control" required>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <button type="button" ng-click="field.restrictedValues.splice(field.restrictedValues.indexOf(restrictedValue), 1)" class="btn btn-default">Remove</button>
+                </div>
+            </div>
+            <div class="form-group">
+                <button type="button" data-ng-click="addRestrictedValue();" class="btn btn-success">Add value</button>
+            </div>
+        </div>
+        <div data-ng-if="field.type == 'input:text' || field.type == 'input:tel' || field.type == 'textarea'">
+            <div class="form-group">
+                <label>Min length</label>
+                <input type="number" ng-model="field.minLength" class="form-control">
+            </div>
+            <div class="form-group">
+                <label>Max length</label>
+                <input type="number" ng-model="field.maxLength" class="form-control">
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div>
+            <div ng-repeat="lang in allLanguages" ng-if="isLanguageSelected(lang.value, event.locales)">
+                <div class="form-group">
+                    <label>Label {{lang.displayLanguage}}</label>
+                    <input ng-model="field.description[lang.locale].label" type="text" placeholder="label" class="form-control" required></div>
+                <div class="form-group">
+                    <label>Placeholder {{lang.displayLanguage}}</label>
+                    <input ng-model="field.description[lang.locale].placeholder" type="text" placeholder="placeholder" class="form-control" required>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal-footer">
+        <div>
+            <button type="submit" class="btn btn-primary" data-ng-disabled="addField.$waiting" data-ng-click="ok(field)">Save</button>
+            <button type="button" class="btn btn-default" data-ng-click="$close(true)">Cancel</button>
+        </div>
+    </div>
+
+</form>
+
+</div>
diff --git a/src/main/webapp/resources/js/admin/ng-app/admin-application.js b/src/main/webapp/resources/js/admin/ng-app/admin-application.js
@@ -8,6 +8,10 @@
         'ON_SITE': 'On site (cash) payment',
         'OFFLINE': 'Offline payment (bank transfer, invoice, etc.)'
     };
+
+    //
+    var FIELD_TYPES = ['input:text', 'input:tel', 'textarea', 'select', 'country'];
+
     var admin = angular.module('adminApplication', ['ui.bootstrap', 'ui.router', 'adminDirectives', 'adminServices', 'utilFilters', 'ngMessages', 'ngFileUpload', 'chart.js', 'nzToggle', 'alfio-plugins', 'alfio-email', 'alfio-util', 'alfio-configuration', 'alfio-users']);
 
     admin.config(function($stateProvider, $urlRouterProvider) {
@@ -272,8 +276,8 @@
 
         //----------
 
-        // TODO, change, HARDCODED
-        $scope.fieldTypes = ['input:text', 'input:tel', 'textarea', 'select', 'country'];
+        // 
+        $scope.fieldTypes = FIELD_TYPES;
 
         $scope.addNewTicketField = function(event) {
             if(!event.ticketFields) {
@@ -802,6 +806,46 @@
         $scope.saveFieldDescription = function(description) {
             EventService.saveFieldDescription($scope.event.shortName, description).then(loadData);
         };
+
+
+        $scope.addField = function(event) {
+        	$modal.open({
+                size:'lg',
+                templateUrl:BASE_STATIC_URL + '/event/fragment/add-field-modal.html',
+                backdrop: 'static',
+                controller: function($scope) {
+                	$scope.event = event;
+                	$scope.field = {};
+                	$scope.fieldTypes = FIELD_TYPES;
+
+                	//
+                	EventService.getSupportedLanguages().success(function(result) {
+                        $scope.allLanguages = result;
+                        $scope.allLanguagesMapping = {};
+                        angular.forEach(result, function(r) {
+                            $scope.allLanguagesMapping[r.value] = r;
+                        });
+                    });
+
+                	//
+
+                	$scope.addRestrictedValue = function() {
+                		var field = $scope.field;
+                        var arr = field.restrictedValues || [];
+                        arr.push({});
+                        field.restrictedValues = arr;
+                    };
+                    $scope.isLanguageSelected = function(lang, selectedLanguages) {
+                        return (selectedLanguages & lang) > 0;
+                    };
+
+                    $scope.addField = function(field) {
+                    	//FIXME;
+                    };
+
+
+                }});
+        };
 
     });