fixes #42 - automatically generate default templates for rows, titles…

… and form refs #43 - extract more functionatlity to the framework
opensas · Sep 13, 2012 · b4e4f11 · b4e4f11
1 parent 06bc694
commit b4e4f11
Show file tree

Hide file tree

Showing 15 changed files with 428 additions and 80 deletions.
diff --git a/webapp/js/app/models/WineCollection.js b/webapp/js/app/models/WineCollection.js
@@ -6,7 +6,17 @@ define(
   function(Backbone, BaseCollection, WineModel) {
 
 var WineCollection = BaseCollection.extend({
+
   model: WineModel,
+
+  tableFields: [
+    {field: 'id',       label: 'N',       order: false},
+    {field: 'name',     label: 'Name',    order: 'name'},
+    {field: 'grapes',   label: 'Grapes'},
+    {field: 'country',  label: 'Country'},
+    {field: 'region',   label: 'Region'},
+    {field: 'year',     label: 'Year'}
+  ]
 });
 
   return WineCollection;

diff --git a/webapp/js/app/models/WineModel.js b/webapp/js/app/models/WineModel.js
@@ -7,14 +7,23 @@ define(
 
 var WineModel = BaseModel.extend({
   defaults: {
-    'id': null,
-    'name': 'new wine',
-    'grapes': '',
-    'country': '',
-    'region': '',
-    'description': 'enter the wine\'s description',
-    'year': 2000
-  }
+    'id'          : null,
+    'name'        : 'new wine',
+    'grapes'      : '',
+    'country'     : '',
+    'region'      : '',
+    'description' : 'enter the wine\'s description',
+    'year'        : 2000
+  },
+  formFields: [
+    { field: 'id', readOnly: true, label: 'Id', help: 'Automatically generated', control: 'id' },
+    { field: 'name',        span: 6, label: 'Name',         help: 'Enter your name' },
+    { field: 'grapes',      span: 8, label: 'Grapes',       help: 'Enter the wines grapes' },
+    { field: 'country',     span: 8, label: 'Country',      help: 'Enter the wines country' },
+    { field: 'region',      span: 8, label: 'Region',       help: 'Enter the wines region' },
+    { field: 'year',        span: 8, label: 'Year',         help: 'Enter the wines year' },
+    { field: 'description', span: 8, label: 'Description',  help: 'Enter the wines description', control: 'textarea', rows: 4 }
+  ]
 });
 
   return WineModel;

diff --git a/webapp/js/app/routers/WineRouter.js b/webapp/js/app/routers/WineRouter.js
@@ -5,19 +5,18 @@ define(
   [
     'backbone', 'src/routers/CrudRouter',
     'app/config', 'app/models/WineModel', 'app/models/WineCollection',
-    'app/views/wines/RowsView', 'app/views/wines/FormView'
+    'text!app/views/wines/wineForm.html'
   ],
   function(Backbone, CrudRouter,
     config, WineModel, WineCollection,
-    RowsView, FormView
-    ) {
+    wineFormTemplate
+  ) {
 
 var Router = CrudRouter.extend({
   config: config,
   Model: WineModel,
   Collection: WineCollection,
-  RowsView: RowsView,
-  FormView: FormView,
+  formTemplate: wineFormTemplate,
   baseUrl: 'wines'
 });
 

diff --git a/webapp/js/app/views/wines/form.html → webapp/js/app/views/wines/wineForm.html b/webapp/js/app/views/wines/form.html → webapp/js/app/views/wines/wineForm.html
@@ -13,7 +13,7 @@
 
             <div class="span2">
               <label class="control-label" for="id">Id</label> 
-              <input type="text" class="span2" id="id" value="<%= id || "new" %>">
+              <span class="span2 uneditable-input"><%= id || "new" %></span>
               <p class="help-block">The id is automatically assigned</p>
             </div>
 
@@ -60,8 +60,8 @@
           <div class="row">
 
             <div class="span11 control-group">
-              <label class="control-label" for="description">Description</label> 
-              <input type="text" class="span11" id="description" value="<%= description %>">
+              <label class="control-label" for="description">Description</label>
+              <textarea class="span11" id="description" rows="3"><%= description %></textarea>
               <p class="help-block">Enter the description of the wine</p>
               <ul></ul>
             </div>

diff --git a/webapp/js/src/models/BaseCollection.js b/webapp/js/src/models/BaseCollection.js
@@ -10,12 +10,21 @@ var BaseCollection = Backbone.Collection.extend({
 
   model: BaseModel,
 
-  page:   1,
-  len:    10,
-  order:  '',
-  filter: '',
-  query: '',
-  total:  -1,
+  // array of columns to be rendered by RowsView view and TableView
+  // it should have the form:
+  // [
+  //   { field: 'fieldname1', label: 'field1 label', order: 'fieldname1' }
+  // ]
+  // Order is the expression to order by, if not specified it assumes it to be the field
+  // Specify false to stop that column to be ordered
+  tableFields: undefined,
+
+  page   : 1,
+  len    : 10,
+  order  : '',
+  filter : '',
+  query  : '',
+  total  : -1,
 
   setPage: function (value) {
     if (value !== undefined && value !== this.page) {

diff --git a/webapp/js/src/models/BaseModel.js b/webapp/js/src/models/BaseModel.js
@@ -6,6 +6,19 @@ define(
   function(Backbone) {
 
 var BaseModel = Backbone.Model.extend({
+
+/**
+ * Array of field definition to be displayed in edit mode
+ * This information is used by utils.crud.generateFormTemplate
+ * to automatically generate a template for form edition
+ * example: formFields: [
+ *   {field: 'id', readOnly: true, label: 'Id', help: 'Automatically generated' },
+ *   {field: 'name', span: 6, label: 'Name', help: 'Enter your name' },
+ *   {field: 'comment', span: 8, label: 'Comment', help: 'Enter your comment', control: 'textarea', rows: 4 }
+ *   ...
+ * ]
+ */
+  formFields: undefined
 });
 
   return BaseModel;

diff --git a/webapp/js/src/routers/CrudRouter.js b/webapp/js/src/routers/CrudRouter.js
@@ -4,8 +4,8 @@ define( [
     'jquery', 'lodash', 'backbone',
     'app/config',
     'src/models/BaseModel', 'src/models/BaseCollection',
-    'src/views/crud/table', 
-    'app/views/wines/RowsView', 'app/views/wines/FormView',
+    'src/views/crud/TableView', 
+    'src/views/crud/RowsView', 'src/views/crud/FormView',
     'src/views/widgets/WidgetsView',
     'src/utils/http', 'src/utils/convert', 'src/utils/errorManager',
     'src/utils/toastMessage'
@@ -58,6 +58,8 @@ var Router = Backbone.Router.extend({
     this.RowsView = this.RowsView || options.RowsView || RowsView;
     this.FormView = this.FormView || options.FormView || FormView;
 
+    this.formTemplate = options.formTemplate || this.formTemplate || undefined;
+
     this.collection = new this.Collection({
       url: this.config.endpoint
     });
@@ -100,7 +102,10 @@ var Router = Backbone.Router.extend({
     this.model = id ? this.collection.get(id) : new this.Model();
 
     this.formView = new this.FormView({
-      el: '#form-view', model: this.model, collection: this.collection
+      el: '#form-view', 
+      template: this.formTemplate,
+      model: this.model, 
+      collection: this.collection
     });
 
     this.formView.render();
@@ -132,6 +137,14 @@ var Router = Backbone.Router.extend({
 
   navigateWith: function(params, options) {
     this.navigate(this.routeWith(params), options);
+  },
+
+  navigateToId: function(id, options) {
+    this.navigate(this.baseUrl + '/' + id.toString(), options);
+  },
+
+  navigateToList: function(options) {
+    this.navigate(this.baseUrl, options);
   }
 
 });