dynamic editor

angular_app/event-edit.html

@@ -73,14 +73,6 @@
                     <input type="text" class="form-control" placeholder="{{'Where' | translate}}" ng-model="event.where">
                 </div>
 
-                <div class="panel panel-info top10">
-                    <div class="panel-heading">
-                        <h1>{{'Registration form' | translate}}</h1>
-                    </div>
-                    <div class="panel-body">
-                        <eda-step-way-easy-form-gen eda-easy-form-generator-model="event.formSchema" eda-save-form-event="saveForm(edaEasyFormGeneratorModel)"></eda-step-way-easy-form-gen>
-                    </div>
-                </div>
 
                 <label></label>
                 <input type="submit" class="outside-screen" />
@@ -93,4 +85,13 @@
             </form>
         </div>
     </div>
+
+    <div class="panel panel-primary top10">
+        <div class="panel-heading">
+            <h1>{{'Registration form' | translate}}</h1>
+        </div>
+        <div class="panel-body">
+            <eda-step-way-easy-form-gen eda-easy-form-generator-model="event.formSchema" eda-save-form-event="saveForm(edaEasyFormGeneratorModel)"></eda-step-way-easy-form-gen>
+        </div>
+    </div>
 </div>

angular_app/js/app.js

@@ -1,6 +1,6 @@
 'use strict';
 /*
-    Copyright 2015 Davide Alberani <da@erlug.linux.it>
+    Copyright 2015-2016 Davide Alberani <da@erlug.linux.it>
                         RaspiBO <info@raspibo.org>
 
     Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,6 +24,7 @@ var eventManApp = angular.module('eventManApp', [
     'pascalprecht.translate',
     'angularFileUpload',
     'angular-websocket',
+    'eda.easyFormViewer',
 	'eda.easyformGen.stepway'
 ]);
 

angular_app/js/controllers.js

@@ -95,18 +95,18 @@ eventManControllers.controller('EventsListCtrl', ['$scope', 'Event', '$modal', '
 );
 
 
-eventManControllers.controller('EventDetailsCtrl', ['$scope', '$state', 'Event', 'EventTicket', 'Person', 'EventUpdates', '$stateParams', 'Setting', '$log', '$translate', '$rootScope', 'easyFormSteWayConfig',
+eventManControllers.controller('EventDetailsCtrl', ['$scope', '$state', 'Event', 'Person', 'EventUpdates', '$stateParams', 'Setting', '$log', '$translate', '$rootScope', 'easyFormSteWayConfig',
-    function ($scope, $state, Event, EventTicket, Person, EventUpdates, $stateParams, Setting, $log, $translate, $rootScope, easyFormSteWayConfig) {
+    function ($scope, $state, Event, Person, EventUpdates, $stateParams, Setting, $log, $translate, $rootScope, easyFormSteWayConfig) {
         $scope.personsOrder = ["name", "surname"];
         $scope.countAttendees = 0;
         $scope.message = {};
         $scope.event = {};
         $scope.event.persons = [];
+        $scope.event.formSchema = {};
         $scope.customFields = Setting.query({setting: 'person_custom_field', in_event_details: true});
 
         $scope.newTicket = $state.is('event.ticket.new');
 
-        $scope.event.formSchema = {};
 
         if ($stateParams.id) {
             $scope.event = Event.get($stateParams, function() {
@@ -371,20 +371,57 @@ eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event',
         $scope.message = {};
         $scope.event = {};
         $scope.ticket = {};
+        $scope.formSchema = {};
+        $scope.formData = {};
+
+        $scope.formFieldsMap = {};
+        $scope.formFieldsMapRev = {};
 
         $scope.newTicket = $state.is('event.ticket.new');
 
         if ($state.params.id) {
-            $scope.event = Event.get({id: $state.params.id}, function() {
+            $scope.event = Event.get({id: $state.params.id}, function(data) {
-            });
+                if (!(data && data.formSchema)) {
+                    return;
                 }
+                $scope.formSchema = data.formSchema.edaFieldsModel;
+                $scope.extractFormFields(data.formSchema.formlyFieldsModel);
 
                 if ($state.params.ticket_id) {
                     EventTicket.get({id: $state.params.id, ticket_id: $state.params.ticket_id}, function(data) {
                         $scope.ticket = data;
+                        angular.forEach(data, function(value, key) {
+                            if (!$scope.formFieldsMapRev[key]) {
+                                return;
+                            }
+                            $scope.formData[$scope.formFieldsMapRev[key]] = value;
+                        });
                     });
                 }
 
+            });
+        }
+
+        $scope.extractFormFields = function(formlyFieldsModel) {
+            if (!formlyFieldsModel) {
+                return;
+            }
+            angular.forEach(formlyFieldsModel, function(row, idx) {
+                if (!row.className == 'row') {
+                    return;
+                }
+                angular.forEach(row.fieldGroup || [], function(item, idx) {
+                    if (!(item.key && item.templateOptions && item.templateOptions.label)) {
+                        return;
+                    }
+                    var value = item.templateOptions.label.toLowerCase();
+
+                    $scope.formFieldsMap[item.key] = value;
+                    $scope.formFieldsMapRev[value] = item.key;
+                });
+            });
+        };
+
         $scope.addTicket = function(person) {
             var personObj = new Person(person);
             personObj.$save(function(p) {
@@ -401,8 +438,23 @@ eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event',
             var data = angular.copy(ticket);
             data.ticket_id = data._id;
             data._id = $state.params.id;
-            EventTicket.update(data, function(t) {
+            EventTicket.update(data, function(t) {});
+        };
+
+        $scope.submitForm = function(dataModelSubmitted) {
+            angular.forEach(dataModelSubmitted, function(value, key) {
+                key = $scope.formFieldsMap[key] || key;
+                $scope.ticket[key] = value;
             });
+            if (!$state.params.ticket_id) {
+                $scope.addTicket($scope.ticket);
+            } else {
+                $scope.updateTicket($scope.ticket);
+            }
+        };
+
+        $scope.cancelForm = function() {
+            $state.go('events');
         };
     }]
 );

angular_app/ticket-edit.html

@@ -15,37 +15,13 @@
                 <div class="panel panel-info table-striped top5">
                     <div class="panel-heading">{{'Register to this event' | translate}}</div>
                     <div class="panel-body">
-                        <form>
+                        <eda-easy-form-viewer
-                            <div class="input-group input-group-sm">
+                            eda-easy-form-viewer-data-model="formData"
-                                <span class="input-group-addon min70-compact">{{'Name' | translate}}</span>
+                            eda-easy-form-viewer-easy-form-generator-fields-model="formSchema"
-                                <input type="text" class="form-control" placeholder="{{'Name' | translate}}" ng-model="ticket.name" ng-required="1">
-                            </div>
-                            <div class="input-group input-group-sm top5">
-                                <span class="input-group-addon min70-compact">{{'Surname' | translate}}</span>
-                                <input type="text" class="form-control" placeholder="{{'Surname' | translate}}" ng-model="ticket.surname">
-                            </div>
-                            <div class="input-group top5">
-                                <span class="input-group-addon min70-compact">{{'Email' | translate}}</span>
-                                <input type="email" name="email" class="form-control" placeholder="{{'name.surname@example.com' | translate}}"  ng-model="ticket.email">
-                            </div>
-                            <div class="input-group top5">
-                                <span class="input-group-addon min70-compact">{{'Company' | translate}}</span>
-                                <input name="company" class="form-control" placeholder="{{'Acme Corporation' | translate}}"  ng-model="ticket.company">
-                            </div>
-                            <div class="input-group top5">
-                                <span class="input-group-addon min70-compact">{{'Job' | translate}}</span>
-                                <input name="job_title" class="form-control" placeholder="{{'Evil Ruler' | translate}}"  ng-model="ticket.job_title">
-                            </div>
 
-                            <button ng-if="!(ticket && ticket._id)" reset-focus ng-disabled="!(ticket.name && ticket.surname)" ng-click="addTicket(ticket)" class="btn btn-success top5">
+                            eda-easy-form-viewer-submit-form-event="submitForm(dataModelSubmitted)"
-                                <span class="fa fa-plus-circle vcenter"></span>
+                            eda-easy-form-viewer-cancel-form-event="cancelForm()">
-                                {{'Add' | translate}}
+                        </eda-easy-form-viewer>
-                            </button>
-                            <button ng-if="ticket._id" reset-focus ng-disabled="!(ticket.name && ticket.surname)" ng-click="updateTicket(ticket)" class="btn btn-success top5">
-                                <span class="fa fa-save vcenter"></span>
-                                {{'Update' | translate}}
-                            </button>
-                        </form>
                     </div>
                 </div>
             </div>