diff --git a/README.md b/README.md index 6ef2117..08f92a6 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,70 @@ -# Json Schema Form Builder +# Schema Form Builder +A simple form builder that generates a schema and form based on the [angular schema form](http://schemaform.io) package. + +<<<<<<< HEAD +======= (branch for directive development) Quickly generate your your schema form using this GUI builder. +>>>>>>> refs/remotes/origin/directive # Roadmap - Complete support of all elements based on schema-form +<<<<<<< HEAD +- Support for editing existing Schemas & Forms - Provide source definition for different platforms - 100% test coverage +<<<<<<< HEAD +======= +<<<<<<< HEAD # Demo There is a live demo at http://ralphowino.github.io/schema-form-builder +======= +>>>>>>> refs/remotes/origin/directive + + +#Basic Usage + +**This is what using the Schema Form Builder should look like:** +First, expose your (exinsting) schema and form to the $scope. + +```javascript +angular.module('myModule', ['schemaFormBuilder']) + .controller('FormBuilderController', function($scope) { + // JSON Schema + // add an existing schema to edit it + // or leave blank to create a new form + $scope.schema = {}; + + // Schema Form Defintion + // add an existing form definition for editing + // or leave blank to create a new form + $scope.form = []; + + +}); +``` + +Then load them into the Schema Form Builder using the `sfbSchema` and `sfbForm` directives. + +```html +
+
+
+``` + +<<<<<<< HEAD +======= +>>>>>>> refs/remotes/origin/master +>>>>>>> refs/remotes/origin/directive # Simply need a html form? -To generate vanilla/bootstrap/material forms check out ralphowino.github.com/form-builder +To generate vanilla/bootstrap/material forms checkout ralphowino.github.com/form-builder +======= +- Generate vanilla/bootstrap/material forms + +Built By: [ralphowino.com](http://ralphowino.com) +>>>>>>> parent of 81af0ee... update builder diff --git a/app/app-controller.es6 b/app/app-controller.es6 new file mode 100644 index 0000000..d7e24cc --- /dev/null +++ b/app/app-controller.es6 @@ -0,0 +1,82 @@ +angular.module('schemaFormBuilderApp').controller('FormBuilderController',function ($scope) { + // JSON Schema + // add an existing schema to edit it + // or leave blank to create a new form + $scope.schema = {}; + + // Schema Form Defintion + // add an existing form definition for editing + // or leave blank to create a new form + $scope.form = []; + + + $scope.$watch(function () { + return $scope.schema; + }, function (update) { + window.console.log("schema udpated"); + //window.console.log("Schema Update: " + JSON.stringify(update)); + //window.console.log("Form Update: " + JSON.stringify($scope.form)); + }, true); + + $scope.newForm = function () { + $scope.model = { + fields: [] + }; + } + + $scope.model = { + type: 'schema-form', + fields: [ + { + type: 'text', + key: 'first_name', + title: 'First name', + open: false + }, + { + type: 'text', + key: 'last_name', + title: 'Last name', + open: false + }, + { + type: 'email', + key: 'email', + title: 'Email', + open: false, + showAdvance: true, + fieldAddonRight:'' + }, + { + type: 'date', + key: 'dob', + title: 'Date of Birth', + open: false + }, + { + type: 'dropdown', + key: 'marital-status', + title: 'Marital Status', + open: false + }, + { + type: 'date-time', + key: 'check-in', + title: 'Check In', + open: false + }, + { + type: 'date-time', + key: 'check-out', + title: 'Check Out', + open: false + }, + { + type: 'textarea', + key: 'bio', + title: 'Biography', + open: false + } + ] + }; +}); \ No newline at end of file diff --git a/app/app-module.es6 b/app/app-module.es6 index 09bd985..dada330 100644 --- a/app/app-module.es6 +++ b/app/app-module.es6 @@ -2,13 +2,13 @@ 'use strict'; /* @ngdoc object - * @name schemaFormBuilder + * @name schemaFormBuilderApp * @description * */ angular - .module('schemaFormBuilder', [ - 'builder', + .module('schemaFormBuilderApp', [ + 'schemaFormBuilder', 'ui.bootstrap' ]); }()); diff --git a/app/app-routes.es6 b/app/app-routes.es6 deleted file mode 100644 index ecfb3d7..0000000 --- a/app/app-routes.es6 +++ /dev/null @@ -1,11 +0,0 @@ -(function () { - 'use strict'; - - angular - .module('schemaFormBuilder') - .config(config); - - function config($urlRouterProvider) { - $urlRouterProvider.otherwise('/builder'); - } -}()); diff --git a/app/builder/builder-directive.es6 b/app/builder/builder-directive.es6 new file mode 100644 index 0000000..28dcc74 --- /dev/null +++ b/app/builder/builder-directive.es6 @@ -0,0 +1,321 @@ +(function () { + 'use strict'; + + angular.module('schemaFormBuilder').directive('sfbSchema',['Converter', function(Converter){ + return { + restrict: 'A', + scope: { + sfbSchema: '=sfbSchema', + sfbForm: '=sfbForm', + builderModel: '=sfbModel' + }, + templateUrl: 'builder/builder.tpl.html', + link: function (scope, element, attrs) { + + var vm = scope; + + // sample form + scope.sampleForm = scope.builderModel; + + // describing properties of each form field + scope.builderSchema = { + type: 'object', + title: 'Comment', + properties: { + name: { + type: 'string' + }, + fields: { + type: 'array', + title: 'Fields', + items: { + type: 'object', + properties: { + open: { + type: 'boolean', + 'default': true + }, + type: { + title: 'Type', + type: 'string', + 'enum': ['text', 'textarea', 'number', 'email', 'password', 'dropdown', 'radios', 'radios-inline', 'radiobuttons', 'checkbox', 'checkboxes', 'boolean', 'date', 'time', 'date-time', 'button', 'submit', 'reset', 'help', 'template'] + }, + key: { + title: 'Key', + type: 'string', + description: 'Unique identifier' + }, + title: { + condition: 'model.notitle', + title: 'Title', + type: 'string' + }, + notitle: { + type: 'boolean', + title: 'Don\'t show title' + }, + description: { + title: 'Description', + type: 'string' + }, + validationMessage: { + title: 'Validation Message', + description: 'A custom validation error message. It can be a string, an object with error codes as key and messages as values or a custom message function', + type: 'string' + }, + onChange: { + title: 'onChange', + description: 'onChange event handler, expression or function. For expression, modelValue and form are both available. For a function, they will be passed as parameters in that order', + type: 'string' + }, + feedback: { + title: 'Feedback Icon', + description: 'Inline feedback icons. To turn off just set feedback to false. If set to a string that string is evaluated by a ngClass in the decorators scope. If not set att all the default value is { "glyphicon": true, "glyphicon-ok": hasSuccess(), "glyphicon-remove": hasError() }', + type: 'string' + }, + disableSuccessState: { + type: 'boolean', + title: 'Disable Success State', + 'default': false + }, + disableErrorState: { + type: 'boolean', + title: 'Disable Error State', + 'default': false + }, + placeholder: { + title: 'Placeholder', + description: 'Placeholder on inputs and textarea', + type: 'string' + }, + ngModelOptions: { + title: 'ng-Model Options', + description: 'Passed along to ng-model-options', + type: 'string' + }, + readonly: { + type: 'boolean', + title: 'Readonly', + 'default': false + }, + htmlClass: { + title: 'Class', + description: 'CSS Class(es) to be added to the container div e.g. : \'street foobar\'', + type: 'string' + }, + destroyStrategy: { + title: 'Destroy Strategy', + description: 'One of null, empty , remove, or retain. Changes model on $destroy event. default is remove.', + type: 'string' + }, + copyValueTo: { + title: 'Copy Value To', + description: 'Copy values to these schema keys e.g [\'address.street\']. The receiving fields can be shown, but the intent for them is to be hidden.', + type: 'string' + }, + fieldHtmlClass: { + title: 'Field Class', + description: 'CSS Class(es) to be added to field input (or similar)', + type: 'string' + }, + labelHtmlClass: { + title: 'Label Class', + description: 'CSS Class(es) to be added to the label of the field (or similar)', + type: 'string' + }, + condition: { + title: 'Condition', + description: 'Show or hide field depending on an angular expression e.g \'model.age < 18\'. The expression has access to model, modelValue, arrayIndex. The condition need not reference a model value it could be anything on scope.', + type: 'string' + }, + fieldAddonLeft: { + title: 'Field Addon - Left', + description: 'Add html code to left of input field. For reference check bootstrap input groups.', + type: 'string' + }, + fieldAddonRight: { + title: 'Field Addon - Right', + description: 'Add html code to right of input field. For reference check bootstrap input groups.', + type: 'string' + }, + onClick: { + title: 'onClick', + description: 'Function to call when a button/submit is clicked', + type: 'string' + }, + showAdvanced: { + title: 'Show advance options', + type: 'boolean' + } + }, + required: ['key'] + } + } + }, + required: ['name'] + }; + + // holding properties of each form field + scope.model = {}; + + // describing the layout of the builder fields + scope.builderForm = [{ + type: 'section', + htmlClass: 'my-field row', + items: [{ + type: 'section', + htmlClass: 'col-sm-6', + items: [{ + type: 'help', + helpvalue: '

My Fields:

' + }] + }] + }, { + key: 'fields', + type: 'accordion-array', + title: '{{ value.title || "Field "+ $index}}', + add: 'Add a new Field', + remove: 'Remove Field', + startEmpty: true, + items: [{ + key: 'fields[].title', + htmlClass: 'hide-label', + placeholder: 'Title' + }, { + type: 'section', + htmlClass: 'row', + items: [{ + key: 'fields[].type', + placeholder: 'Type', + notitle: true, + htmlClass: 'col-sm-6 hide-label' + }, { + key: 'fields[].key', + //type: 'section', + placeholder: 'Key (Unique Identifier)', + notitle: true, + htmlClass: 'col-sm-6 hide-label' + }] + }, { + key: 'fields[].open', + notitle: true, + type: 'hidden' + }, { + key: 'fields[].description', + type: 'textarea', + placeholder: 'Description', + notitle: true + }, { + type: 'section', + htmlClass: 'row', + items: [{ + key: 'fields[].notitle', + htmlClass: 'col-sm-6' + }, { + key: 'fields[].showAdvanced', + htmlClass: 'col-sm-6' + }] + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + type: 'help', + helpvalue: '
' + }, { + type: 'section', + htmlClass: 'row', + items: [{ + type: 'section', + htmlClass: 'col-md-4', + items: [{ + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].disableSuccessState' + }] + }, { + type: 'section', + htmlClass: 'col-md-4', + items: [{ + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].disableErrorState' + }] + }, { + type: 'section', + htmlClass: 'col-md-4', + items: [{ + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].readonly' + }] + }] + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + type: 'help', + helpvalue: '
' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].validationMessage', + type: 'textarea' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].onChange', + type: 'textarea' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].feedback' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].placeholder' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].ngModelOptions', + type: 'textarea' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].htmlClass' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].destroyStrategy' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].copyValueTo' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].fieldHtmlClass' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].labelHtmlClass' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].condition' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + 'key': 'fields[].fieldAddonLeft' + }, { + condition: 'model.fields[arrayIndex].showAdvanced', + key: 'fields[].fieldAddonRight' + }] + }]; + + // the resulting schema and form definitions + scope.output = { schema: {}, form: [] }; + + function generateOutput(update) { + scope.output = Converter.generateFields(update); + //console.log(JSON.stringify(scope.output)); + scope.sfbSchema = angular.copy(scope.output.schema); + console.log("sfbSchema: " + JSON.stringify(scope.sfbSchema)); + scope.sfbForm = angular.copy(scope.output.form); + console.log("sfbForm: " + JSON.stringify(scope.sfbForm)); + window.console.log("generate output"); + } + + scope.$watch(function () { + return scope.builderModel; + }, function (update) { + generateOutput(update); + }, true); + } + } + }]); + + + + }() +); \ No newline at end of file diff --git a/app/builder/builder-directive_test.es6 b/app/builder/builder-directive_test.es6 new file mode 100644 index 0000000..086680f --- /dev/null +++ b/app/builder/builder-directive_test.es6 @@ -0,0 +1,2 @@ +/* global describe, beforeEach, it, expect, inject, module */ +'use strict'; diff --git a/app/builder/builder-module.es6 b/app/builder/builder-module.es6 index 5591ed6..0b55c3b 100644 --- a/app/builder/builder-module.es6 +++ b/app/builder/builder-module.es6 @@ -7,23 +7,10 @@ * */ angular - .module('builder', [ - 'angular-growl', - 'angular-locker', + .module('schemaFormBuilder', [ 'schemaForm', 'ui.bootstrap', - 'ui.router', 'ui.sortable' - ]).config(['lockerProvider', function config(lockerProvider) { - lockerProvider.defaults({ - driver: 'local', - namespace: 'ro', - separator: '.', - eventsEnabled: true, - extend: {} - }); - }]) - .config(['growlProvider', function (growlProvider) { - growlProvider.globalTimeToLive({success: 1000, error: 2000, warning: 3000, info: 4000}); - }]); -}()); + ]); + +}()); diff --git a/app/builder/builder-routes.es6 b/app/builder/builder-routes.es6 deleted file mode 100644 index 028fb1a..0000000 --- a/app/builder/builder-routes.es6 +++ /dev/null @@ -1,17 +0,0 @@ -(function () { - 'use strict'; - - angular - .module('builder') - .config(config); - - function config($stateProvider) { - $stateProvider - .state('builder', { - url: '/builder', - templateUrl: 'builder/views/builder.tpl.html', - controller: 'BuilderCtrl', - controllerAs: 'builder' - }); - } -}()); diff --git a/app/builder/builder.tpl.html b/app/builder/builder.tpl.html new file mode 100644 index 0000000..962ebeb --- /dev/null +++ b/app/builder/builder.tpl.html @@ -0,0 +1,18 @@ + +
+
+
+
+
+
+
+
+
+

preview

+
+
+
+
+
\ No newline at end of file diff --git a/app/builder/controllers/builder-controller.es6 b/app/builder/controllers/builder-controller.es6 index a2a93bf..31f2e52 100644 --- a/app/builder/controllers/builder-controller.es6 +++ b/app/builder/controllers/builder-controller.es6 @@ -5,65 +5,63 @@ constructor(Converter, growl, locker, $scope, $uibModal) { let vm = this; - vm.forms = locker.get('schema_forms', { - 'sample_form': { - name: 'Sample Form', - type: 'schema-form', - fields: [ - { - type: 'text', - key: 'first_name', - title: 'First name', - open: false - }, - { - type: 'text', - key: 'last_name', - title: 'Last name', - open: false - }, - { - type: 'email', - key: 'email', - title: 'Email', - open: false, - showAdvance: true, - fieldAddonRight:'' - }, - { - type: 'date', - key: 'dob', - title: 'Date of Birth', - open: false - }, - { - type: 'dropdown', - key: 'marital-status', - title: 'Marital Status', - open: false - }, - { - type: 'date-time', - key: 'check-in', - title: 'Check In', - open: false - }, - { - type: 'date-time', - key: 'check-out', - title: 'Check Out', - open: false - }, - { - type: 'textarea', - key: 'bio', - title: 'Biography', - open: false - } - ] - } - }); - + vm.forms = locker.get('schema_forms', {}/* { + 'sample_form': { + name: 'Sample Form', + type: 'schema-form', + fields: [ + { + type: 'text', + key: 'first_name', + title: 'First name', + open: false + }, + { + type: 'text', + key: 'last_name', + title: 'Last name', + open: false + }, + { + type: 'email', + key: 'email', + title: 'Email', + open: false + }, + { + type: 'date', + key: 'dob', + title: 'Date of Birth', + open: false + }, + { + type: 'dropdown', + key: 'marital-status', + title: 'Marital Status', + open: false + }, + { + type: 'date-time', + key: 'check-in', + title: 'Check In', + open: false + }, + { + type: 'date-time', + key: 'check-out', + title: 'Check Out', + open: false + }, + { + type: 'textarea', + key: 'bio', + title: 'Biography', + open: false + } + ] + } + }*/); + console.log(vm.forms); vm.schema = { type: 'object', title: 'Comment', @@ -71,6 +69,14 @@ name: { type: 'string' }, + type: { + type: 'string', + title: 'Form Output', + enum: [ + 'schema-form', + 'bootstrap', + ] + }, fields: { type: 'array', title: 'Fields', @@ -110,7 +116,7 @@ key: { title: 'Key', type: 'string', - description: 'Unique identifier' + //description: 'Unique identifier' }, title: { condition: 'model.notitle', @@ -216,6 +222,7 @@ } }, required: [ + 'type', 'key' ] } @@ -236,7 +243,14 @@ notitle: true, fieldHtmlClass: 'field-name', labelHtmlClass: 'field-name-label' - } + }, + { + key: 'type', + htmlClass: 'col-sm-6', + //notitle: true, + fieldHtmlClass: 'output-type', + labelHtmlClass: 'output-type-label' + }, ] }, { diff --git a/app/builder/controllers/builder-controller_test.es6 b/app/builder/controllers/builder-controller_test.es6 deleted file mode 100644 index c1af1a4..0000000 --- a/app/builder/controllers/builder-controller_test.es6 +++ /dev/null @@ -1,16 +0,0 @@ -/* global describe, beforeEach, it, expect, inject, module */ -'use strict'; - -describe('BuilderCtrl', () => { - let ctrl; - - beforeEach(module('builder')); - - beforeEach(inject(($rootScope, $controller) => { - ctrl = $controller('BuilderCtrl'); - })); - - it('should have ctrlName as BuilderCtrl', () => { - expect(ctrl.ctrlName).to.equal('BuilderCtrl'); - }); -}); diff --git a/app/builder/factories/converter-factory.es6 b/app/builder/converter-factory.es6 similarity index 98% rename from app/builder/factories/converter-factory.es6 rename to app/builder/converter-factory.es6 index 46f7071..5a4f302 100644 --- a/app/builder/factories/converter-factory.es6 +++ b/app/builder/converter-factory.es6 @@ -9,7 +9,7 @@ * */ angular - .module('builder') + .module('schemaFormBuilder') .factory('Converter', Converter); function Converter() { @@ -21,6 +21,7 @@ 'condition', 'onChange', 'notitle', + 'showAdvanced', 'validationMessage', 'onChange', 'ngModelOptions', @@ -57,7 +58,7 @@ let index = _.findKey(output.form, 'key', key); output.form[index][attr] = value; return output; - } + }; ConverterBase.generateTextField = (field, output) => { output.schema.properties[field.key]['type'] = 'string'; diff --git a/app/builder/factories/converter-factory_test.es6 b/app/builder/converter-factory_test.es6 similarity index 90% rename from app/builder/factories/converter-factory_test.es6 rename to app/builder/converter-factory_test.es6 index af054ce..1058697 100644 --- a/app/builder/factories/converter-factory_test.es6 +++ b/app/builder/converter-factory_test.es6 @@ -4,7 +4,7 @@ describe('Converter', () => { let factory; - beforeEach(module('builder')); + beforeEach(module('schemaFormBuilder')); beforeEach(inject((Converter) => { factory = Converter; diff --git a/app/builder/decorators/accordion-array/bootstrap-accordion-array-decorator.es6 b/app/builder/decorators/accordion-array/bootstrap-accordion-array-decorator.es6 index 05220e8..d7040d6 100644 --- a/app/builder/decorators/accordion-array/bootstrap-accordion-array-decorator.es6 +++ b/app/builder/decorators/accordion-array/bootstrap-accordion-array-decorator.es6 @@ -7,7 +7,7 @@ * */ angular - .module('builder').config(bootstrapAccordionArrayDecorator); + .module('schemaFormBuilder').config(bootstrapAccordionArrayDecorator); function bootstrapAccordionArrayDecorator(schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) { diff --git a/app/builder/decorators/number/bootstrap-decorator.es6 b/app/builder/decorators/number/bootstrap-decorator.es6 index 22706b4..9ad64d6 100644 --- a/app/builder/decorators/number/bootstrap-decorator.es6 +++ b/app/builder/decorators/number/bootstrap-decorator.es6 @@ -7,7 +7,7 @@ * */ angular - .module('builder').config(bootstrapDecorator); + .module('schemaFormBuilder').config(bootstrapDecorator); function bootstrapDecorator(schemaFormDecoratorsProvider) { schemaFormDecoratorsProvider.addMapping( diff --git a/app/builder/decorators/select-box/bootstrap-select-box-decorator.es6 b/app/builder/decorators/select-box/bootstrap-select-box-decorator.es6 index 32a5792..6f3f237 100644 --- a/app/builder/decorators/select-box/bootstrap-select-box-decorator.es6 +++ b/app/builder/decorators/select-box/bootstrap-select-box-decorator.es6 @@ -7,7 +7,7 @@ * */ angular - .module('builder').config(bootstrapTypeHeadDecorator); + .module('schemaFormBuilder').config(bootstrapTypeHeadDecorator); function bootstrapTypeHeadDecorator(schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) { diff --git a/app/builder/decorators/simple-array/bootstrap-simple-array-decorator.es6 b/app/builder/decorators/simple-array/bootstrap-simple-array-decorator.es6 index d294932..9c09dd9 100644 --- a/app/builder/decorators/simple-array/bootstrap-simple-array-decorator.es6 +++ b/app/builder/decorators/simple-array/bootstrap-simple-array-decorator.es6 @@ -7,7 +7,7 @@ * */ angular - .module('builder').config(bootstrapSimpleArrayDecorator); + .module('schemaFormBuilder').config(bootstrapSimpleArrayDecorator); function bootstrapSimpleArrayDecorator(schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) { schemaFormDecoratorsProvider.addMapping( diff --git a/app/builder/decorators/typehead/bootstrap-typehead-decorator.es6 b/app/builder/decorators/typehead/bootstrap-typehead-decorator.es6 index 1139f17..c042bbe 100644 --- a/app/builder/decorators/typehead/bootstrap-typehead-decorator.es6 +++ b/app/builder/decorators/typehead/bootstrap-typehead-decorator.es6 @@ -7,7 +7,7 @@ * */ angular - .module('builder').config(bootstrapTypeHeadDecorator); + .module('schemaFormBuilder').config(bootstrapTypeHeadDecorator); function bootstrapTypeHeadDecorator(schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) { diff --git a/app/builder/views/builder.tpl.html b/app/builder/views/builder.tpl.html deleted file mode 100644 index e631425..0000000 --- a/app/builder/views/builder.tpl.html +++ /dev/null @@ -1,71 +0,0 @@ - -
-
-

- - Schema Form Builder / {{ builder.model.name || 'Untitled Form'}} - New Form - My previous Forms -

-
-
- - -
-
-
-
-
-
-
-

preview

-
-
-
-
-
-
-

Instructions

-

In your angular project do the following

-

First, Install angular-schema form

-

Using bower:

- 
bower install angular-schema-form
-

Using npm:

- 
npm install angular-schema-form

-

Then add it as a dependency to your module

- 
angular.module('myModule', ['schemaForm'])
-
-

Secondly, Specify your schema and form

-

In your controller, add the following schema and form an pass it to your views

-
-
-
Schema
- 
 {{ builder.output.schema | json }}
-
-
-
Forms
- 
 {{ builder.output.form | json }}
-
-
-
-

Lastly, Display the form in your view

- 
-                        <form name="myForm" ng-submit="submit()"> 

-                        <div sf-schema="schema" sf-form="form" sf-model="model"></div>

-                        <input type="submit" value="Submit">

-                            <button type="button" ng-click="goBack()">Cancel</button>

-                        </form>
-
-
-
-

To be created

- 
 {{ builder.output | json }}
-
- -
-
-
-
\ No newline at end of file diff --git a/app/builder/views/open.tpl.html b/app/builder/views/open.tpl.html deleted file mode 100644 index d7fdccc..0000000 --- a/app/builder/views/open.tpl.html +++ /dev/null @@ -1,15 +0,0 @@ -
- - - - - -
{{ form.name}} - - -
-
-
- - -
\ No newline at end of file diff --git a/app/images/logo.png b/app/images/logo.png deleted file mode 100644 index b8e6936..0000000 Binary files a/app/images/logo.png and /dev/null differ diff --git a/app/index.html b/app/index.html index 13dad52..ecb0507 100644 --- a/app/index.html +++ b/app/index.html @@ -1,5 +1,5 @@ - + schema form builder @@ -13,11 +13,12 @@ - -
- + +
+ New Form +
+
-
diff --git a/app/scss/builder.scss b/app/scss/builder.scss index e45339c..68c7465 100644 --- a/app/scss/builder.scss +++ b/app/scss/builder.scss @@ -7,20 +7,6 @@ body{ } } .body-section{ - .header{ - width:100%; - padding:20px 15px; - background:#000; - h4{ - color:#fff; - img{ - width: 80px; - margin-top: -20px; - margin-bottom: -10px; - margin-right: 20px; - } - } - } .container{ width:100%; h1, h2, h3, h4{ @@ -28,8 +14,8 @@ body{ font-weight:600; text-transform: uppercase; } - .builder{ - height:calc(100vh - 80px); + .schemaFormBuilder{ + height:calc(100%); border-right:1px solid #ccc; overflow-y:auto; .my-field{ @@ -113,27 +99,13 @@ body{ } .preview{ background: #eee; - height:calc(100vh - 80px); + height:calc(100%); overflow-y:auto; input, textarea{ background:none; } } } - .instructions{ - display:none; - width:100%; - height:calc(100vh - 80px); - background:#eee; - position: absolute; - top:80px; - left:0; - overflow-y:auto; - z-index:2; - } - .instructions.visible{ - display: block; - } } .hide-label{ diff --git a/bower.json b/bower.json index 9a4989c..d444dd3 100644 --- a/bower.json +++ b/bower.json @@ -9,9 +9,7 @@ "font-awesome": "~4.2.0", "lodash": "~3.9.0", "angular-schema-form": "~0.8.12", - "angular-locker": "~2.0.4", - "angular-ui-sortable": "~0.13.4", - "angular-growl-v2": "~0.7.9" + "angular-ui-sortable": "~0.13.4" }, "devDependencies": { "angular-mocks": "~1.4.*" @@ -22,8 +20,5 @@ "jquery": "*" } } - }, - "resolutions": { - "angular": "~1.4.*" } } diff --git a/package.json b/package.json index 45c0db4..d7088bd 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "eslint-plugin-angular": "^0.2.0", "find-up": "^1.0.0", "glob": "^5.0.1", - "gulp": "^3.8.7", + "gulp": "^3.9.1", "gulp-angular-filesort": "^1.0.4", "gulp-autoprefixer": "^2.0.0", "gulp-babel": "^5.0.0",