feat(forms) Internal templates, allow specification of overrides folder. Closes #80

mchapman · mchapman · commit 05cd985426ce · 2016-05-04T21:01:08.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # forms-angular
 
+## 0.6.0 to 0.7.0
+* Fixed bug with ui-router setup which meant that full routes were not parsed.
+* Added internal templates for lists, edit forms and report forms (previously they were in the Yeoman generator).
+* Internal templates can be over-ridden by specifying a templateFolder property in the routing config.
+### BREAKING CHANGES
+* To use the edit / list / report templates from a pre 0.7.0 application you must specify a templateFolder property of 'partials' when starting the routingService when configuring forms-angular       
+
 ## 0.5.1 to 0.6.0
 * Upgrade to angular-ui-bootstrap 0.14.x, which drops support for Bootstrap 2 (but seems to work fine for the forms-angular.org website, which is BS2)
 * Start specifying versions in npm and bower.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "forms-angular",
   "author": "Mark Chapman <support@forms-angular.org>",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "homepage": "https://github.com/forms-angular/forms-angular",
   "description": "No nonsense forms for the MEAN stack",
   "keywords": [
@@ -18,16 +18,16 @@
     "dist/forms-angular.js"
   ],
   "dependencies": {
-    "angular": "1.5.0",
-    "angular-sanitize": "1.5.0",
-    "angular-messages": "1.5.0",
+    "angular": "1.5.5",
+    "angular-sanitize": "1.5.5",
+    "angular-messages": "1.5.5",
     "angular-ui-bootstrap-bower": "0.14.3",
     "underscore": "1.8.3",
     "ngInfiniteScroll": "1.2.1",
     "angular-elastic": "2.5.1"
   },
   "devDependencies": {
-    "angular-mocks": "1.5.0",
+    "angular-mocks": "1.5.5",
     "bootstrap-3-3-5": "git://github.com/twbs/bootstrap.git#v3.3.5",
     "bootstrap-2-3-2": "git://github.com/twbs/bootstrap.git#v2.3.2"
   },
diff --git a/dist/forms-angular.d.ts b/dist/forms-angular.d.ts
@@ -139,6 +139,7 @@ declare module fng {
         routing: string;
         prefix: string;
         fixedRoutes?: Array<IBuiltInRoute>;
+        templateFolder?: string;
         add2fngRoutes?: any;
         variantsForDemoWebsite?: any;
         variants?: any;
diff --git a/dist/forms-angular.js b/dist/forms-angular.js
diff --git a/dist/forms-angular.min.js b/dist/forms-angular.min.js
diff --git a/js/fng-types.ts b/js/fng-types.ts
@@ -160,6 +160,7 @@ module fng {
                                     // prevent generated routes (which have a lot of parameters) from clashing with other routes in
                                     // the web app that have nothing to do with CRUD forms
     fixedRoutes?: Array<IBuiltInRoute>;
+    templateFolder?: string;        // The folder where the templates for base-list, base-edit and base-analysis live.  Internal templates used by default.  For pre 0.7.0 behaviour use 'partials/'
     add2fngRoutes?: any;            // An object to add to the generated routes.  One user case would be to add {authenticate: true}
                                     // so that the client authenticates for certain routes
 
diff --git a/js/services/add-all.js b/js/services/add-all.js
diff --git a/js/services/fng-routes.ts b/js/services/fng-routes.ts
@@ -10,44 +10,58 @@ module fng.services {
 //  fixedRoutes: [] an array in the same format as builtInRoutes that is matched before the generic routes.  Can be omitted
       hashPrefix: '',
       html5Mode: false,
-      routing: 'ngroute',    // What sort of routing do we want?  ngroute or uirouter
-      prefix: ''        // How do we want to prefix out routes?  If not empty string then first character must be slash (which is added if not)
+      routing: 'ngroute',   // What sort of routing do we want?  ngroute or uirouter
+      prefix: ''            // How do we want to prefix our routes?  If not empty string then first character must be slash (which is added if not)
     };
 
     var builtInRoutes:Array<fng.IBuiltInRoute> = [
       {
         route: '/analyse/:model/:reportSchemaName',
         state: 'analyse::model::report',
-        templateUrl: 'partials/base-analysis.html'
+        templateUrl: 'base-analysis.html'
       },
-      {route: '/analyse/:model', state: 'analyse::model', templateUrl: 'partials/base-analysis.html'},
-      {route: '/:model/:id/edit', state: 'model::edit', templateUrl: 'partials/base-edit.html'},
-      {route: '/:model/:id/edit/:tab', state: 'model::edit::tab', templateUrl: 'partials/base-edit.html'},
-      {route: '/:model/new', state: 'model::new', templateUrl: 'partials/base-edit.html'},
-      {route: '/:model', state: 'model::list', templateUrl: 'partials/base-list.html'},
-      {route: '/:model/:form/:id/edit', state: 'model::form::edit', templateUrl: 'partials/base-edit.html'},       // non default form (different fields etc)
-      {route: '/:model/:form/:id/edit/:tab', state: 'model::form::edit::tab', templateUrl: 'partials/base-edit.html'},       // non default form (different fields etc)
-      {route: '/:model/:form/new', state: 'model::form::new', templateUrl: 'partials/base-edit.html'},       // non default form (different fields etc)
-      {route: '/:model/:form', state: 'model::form::list', templateUrl: 'partials/base-list.html'}        // list page with links to non default form
+      {route: '/analyse/:model', state: 'analyse::model', templateUrl: 'base-analysis.html'},
+      {route: '/:model/:id/edit', state: 'model::edit', templateUrl: 'base-edit.html'},
+      {route: '/:model/:id/edit/:tab', state: 'model::edit::tab', templateUrl: 'base-edit.html'},
+      {route: '/:model/new', state: 'model::new', templateUrl: 'base-edit.html'},
+      {route: '/:model', state: 'model::list', templateUrl: 'base-list.html'},
+      {route: '/:model/:form/:id/edit', state: 'model::form::edit', templateUrl: 'base-edit.html'},       // non default form (different fields etc)
+      {route: '/:model/:form/:id/edit/:tab', state: 'model::form::edit::tab', templateUrl: 'base-edit.html'},       // non default form (different fields etc)
+      {route: '/:model/:form/new', state: 'model::form::new', templateUrl: 'base-edit.html'},       // non default form (different fields etc)
+      {route: '/:model/:form', state: 'model::form::list', templateUrl: 'base-list.html'}        // list page with links to non default form
     ];
 
     var _routeProvider, _stateProvider;
     var lastRoute = null;
     var lastObject:fng.IFngRoute = {};
 
+    function handleFolder(templateURL: string) : string {
+      var retVal : string = templateURL;
+      if (config.templateFolder) {
+        if (config.templateFolder[config.templateFolder.length-1] !== '/') {
+          retVal = config.templateFolder + '/' + retVal;
+        } else {
+          retVal = config.templateFolder + retVal;
+        }
+      }
+      return retVal;
+    }
+
     function _setUpNgRoutes(routes:Array<fng.IBuiltInRoute>, prefix:string = '', additional?:any):void {
       prefix = prefix || '';
       angular.forEach(routes, function (routeSpec) {
-        _routeProvider.when(prefix + routeSpec.route, angular.extend(routeSpec.options || {templateUrl: routeSpec.templateUrl}, additional));
+        _routeProvider.when(prefix + routeSpec.route, angular.extend(routeSpec.options || {templateUrl: handleFolder(routeSpec.templateUrl)}, additional));
       });
-      // This next bit is just for the demo website to allow demonstrating multiple frameworks - not available with other routers
+
+      // This next bit is just for the demo website to allow demonstrating multiple CSS frameworks - not available with other routers
       if (config.variantsForDemoWebsite) {
         angular.forEach(config.variantsForDemoWebsite, function (variant) {
           angular.forEach(routes, function (routeSpec) {
-            _routeProvider.when(prefix + variant + routeSpec.route, angular.extend(routeSpec.options || {templateUrl: routeSpec.templateUrl}, additional));
+            _routeProvider.when(prefix + variant + routeSpec.route, angular.extend(routeSpec.options || {templateUrl: handleFolder(routeSpec.templateUrl)}, additional));
           });
         });
       }
+
     }
 
     function _setUpUIRoutes(routes:Array<fng.IBuiltInRoute>, prefix:string = '', additional?:any):void {
diff --git a/less/forms-angular-bs-common.less b/less/forms-angular-bs-common.less
@@ -77,6 +77,7 @@ button.form-btn {
   max-width: 17em;
 }
 
+
 form {
   &.form-horizontal.compact {
     input + .help-block, select + .help-block, textarea + .help-block, .uneditable-input + .help-block,
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "author": "Mark Chapman <support@forms-angular.org>",
   "description": "A form builder that sits on top of Angular.js, Twitter Bootstrap, jQuery UI, Angular-UI, Express and Mongoose.  Opinionated or what?",
   "homepage": "http://forms-angular.org",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "engines": {
     "node": ">=0.10.x",
     "npm": ">=1.x"
diff --git a/server/data_form.js b/server/data_form.js
diff --git a/template/base-analysis.html b/template/base-analysis.html
@@ -0,0 +1,18 @@
+<div ng-controller="AnalysisCtrl">
+  <div class="container-fluid page-header report-header">
+    <div ng-class="css('rowFluid')">
+      <div class="header-lhs col-xs-7 span7">
+        <h1>{{ reportSchema.title }}</h1>
+      </div>
+      <div class="header-rhs col-xs-5 span5">
+        <form-input schema="paramSchema" name="paramForm" ng-show="paramSchema" formstyle="horizontalCompact"></form-input>
+      </div>
+    </div>
+  </div>
+  <div class="container-fluid page-body report-body">
+    <error-display></error-display>
+    <div class="row-fluid">
+      <div class="gridStyle" ng-grid="gridOptions"></div>
+    </div>
+  </div>
+</div>
diff --git a/template/base-edit.html b/template/base-edit.html
@@ -0,0 +1,16 @@
+<div ng-controller="BaseCtrl">
+    <div ng-class="css('rowFluid')" class="page-header edit-header">
+        <div class="header-lhs col-sm-8 span8">
+            <h4>{{modelNameDisplay}} :
+                <span ng-repeat="field in listSchema">{{getListData(record, field.name)}} </span>
+            </h4>
+        </div>
+        <div class="header-rhs col-sm-2 span2">
+            <div form-buttons></div>
+        </div>
+    </div>
+    <div class="container-fluid page-body edit-body">
+        <error-display></error-display>
+        <form-input name="baseForm" schema="baseSchema()" formstyle="compact"></form-input>
+    </div>
+</div>
diff --git a/template/base-list.html b/template/base-list.html
@@ -0,0 +1,20 @@
+<div ng-controller="BaseCtrl">
+    <div ng-class="css('rowFluid')" class="page-header list-header">
+        <div class="header-lhs col-sm-8 span8">
+            <h1>{{modelNameDisplay}}</h1>
+        </div>
+        <div class="header-rhs col-sm-2 span2">
+            <a ng-href="{{generateNewUrl()}}"><button id="newBtn" class="btn btn-default"><i class="icon-plus"></i> New</button></a>
+        </div>
+    </div>
+    <div class="page-body list-body">
+        <error-display></error-display>
+        <div ng-class="css('rowFluid')" infinite-scroll="scrollTheList()">
+            <a ng-repeat="record in recordList" ng-href="{{generateEditUrl(record)}}">
+                <div class="list-item">
+                    <div ng-class="css('span',12/listSchema.length)" ng-repeat="field in listSchema">{{getListData(record, field.name)}} </div>
+                </div>
+            </a>
+        </div>
+    </div>
+</div>

Original file line number	Diff line number	Diff line change
`@@ -77,6 +77,7 @@ button.form-btn {`
`77`	`77`	`max-width: 17em;`
`78`	`78`	`}`
`79`	`79`
	`80`	`+`
`80`	`81`	`form {`
`81`	`82`	`&.form-horizontal.compact {`
`82`	`83`	`input + .help-block, select + .help-block, textarea + .help-block, .uneditable-input + .help-block,`