Update steps template #32

 - Refactor/rename bill-workflow to flow
 - Add metadata model for templates
 - Add view to show it.
 - Update bills fixtures.
 - Fix some old issues on flow.

Author: vmariano

lib/fixtures/bills.json

@@ -20,6 +20,14 @@
     {
       "number" : 1
     , "arriveAt" : "2014-04-01T15:00:00.001Z"
+    , "metadata": {
+      "members": [
+        {
+          "name" : "Bill Snake Charmer"
+        , "description" : "aditional information from the author / such as afiliations etc."
+        }
+      ]
+    }
     , "name": "Budget"
     , "billText": {
       "officialTitle": ""
@@ -159,6 +167,14 @@
       "number" : 2
     , "arriveAt" : "2014-04-07T15:00:00.001Z"
     , "name" : "Urban planing"
+    , "metadata": {
+        "members": [
+          {
+            "name" : "Bill Snake Charmer"
+          , "description" : "aditional information from the author / such as afiliations etc."
+          }
+        ]
+      }
     , "billText": {
         "officialTitle": ""
       , "mediaTitle": "Internet civil framework"
@@ -292,6 +308,14 @@
       "number" : 3
     , "arriveAt" : "2014-04-12T15:00:00.001Z"
     , "name" : "Building Specialist"
+    , "metadata": {
+        "members": [
+          {
+            "name" : "Bill Snake Charmer"
+          , "description" : "aditional information from the author / such as afiliations etc."
+          }
+        ]
+      }
     , "billText": {
         "officialTitle": ""
       , "mediaTitle": "Internet civil framework"
@@ -430,6 +454,14 @@
       "number" : 4
     , "arriveAt" : "2014-04-28T15:00:00.001Z"
     , "name" : "Planification"
+    , "metadata": {
+        "members": [
+          {
+            "name" : "Bill Snake Charmer"
+          , "description" : "aditional information from the author / such as afiliations etc."
+          }
+        ]
+      }
     , "billText": {
         "officialTitle": ""
       , "mediaTitle": "Internet civil framework"
@@ -573,6 +605,14 @@
           "number" : 1
         , "arriveAt" : "2014-04-01T15:00:00.001Z"
         , "name": "Planificacion"
+        , "metadata": {
+          "members": [
+            {
+              "name" : "Bill Snake Charmer"
+            , "description" : "aditional information from the author / such as afiliations etc."
+            }
+          ]
+      }
         , "billText": {
               "officialTitle": ""
             , "mediaTitle": "Internet civil framework"
@@ -601,6 +641,14 @@
           "number" : 1
         , "arriveAt" : "2014-04-01T15:00:00.001Z"
         , "name": "Planeamiento urbano"
+        , "metadata": {
+          "members": [
+            {
+              "name" : "Bill Snake Charmer"
+            , "description" : "aditional information from the author / such as afiliations etc."
+            }
+          ]
+        }
         , "billText": {
               "officialTitle": ""
             , "mediaTitle": "Internet civil framework"
@@ -642,10 +690,18 @@
       ]
     , "steps": [
       {
-        "number": 1,
-        "arriveAt": "2014-04-01T15:00:00.001Z",
-        "name": "Planeamiento urbano",
-        "billText": {
+          "number": 1
+        , "arriveAt": "2014-04-01T15:00:00.001Z"
+        , "name": "Planeamiento urbano"
+        , "metadata": {
+          "members": [
+            {
+              "name" : "Bill Snake Charmer"
+            , "description" : "aditional information from the author / such as afiliations etc."
+            }
+          ]
+        }
+        , "billText": {
             "officialTitle": ""
           , "mediaTitle": "Parque de Recreación nº1 y Planta de recuperación de residuos sólidos"
           , "source": "http://direitorio.fgv.br/sites/direitorio.fgv.br/files/Marco%20Civil%20-%20English%20Version%20sept2011.pdf"
@@ -713,6 +769,14 @@
         "number": 1,
         "arriveAt": "2014-04-01T15:00:00.001Z",
         "name": "Presupuesto",
+        "metadata": {
+          "members": [
+            {
+              "name" : "Bill Snake Charmer"
+            , "description" : "aditional information from the author / such as afiliations etc."
+            }
+          ]
+        },
         "billText": {
         "officialTitle": ""
         , "mediaTitle": "Parque de Recreación nº1 y Planta de recuperación de residuos sólidos"

lib/bill-workflow/component.json renamed to lib/flow/component.json

@@ -1,6 +1,6 @@
 {
-  "name": "bill-workflow",
-  "description": "Workflow for bills page.",
+  "name": "flow",
+  "description": "Flow for bills steps.",
   "dependencies": {
     "visionmedia/jade": "1.3.1",
     "component/dom": "1.0.5",
@@ -22,6 +22,9 @@
     "images/hexagon.png",
     "images/time_line.png"
   ],
-  "templates": [ "template.jade" ],
+  "templates": [
+    "template.jade",
+    "stepTemplate.jade"
+  ],
   "main": "view.js"
 }

lib/bill-workflow/images/hexagon.png renamed to lib/flow/images/hexagon.png

@@ -0,0 +1,4 @@
+li(on-click="{{number}}")
+   i.fa.fa-file-text
+   p.date {{arriveAt}}
+   p.title {{name}}

lib/bill-workflow/images/time_line.png renamed to lib/flow/images/time_line.png

@@ -1,5 +1,6 @@
 /*TODO: replace with https://github.com/rschmukler/component-stylus-plugin */
 @import "./lib/view/styles.styl"
+image_path = "/flow/images/"
 
 .history
   ol
@@ -31,7 +32,7 @@
 
     ul
       font-size 0
-      background url("/bill-workflow/images/time_line.png") repeat-x scroll center 68px transparent
+      background url(image_path + "time_line.png") repeat-x scroll center 68px transparent
       list-style none outside none
       margin 0
       padding 0
@@ -53,7 +54,7 @@
 
         &.selected
           margin 0
-          background url("/bill-workflow/images/time_line.png") repeat-x scroll center 68px #ffffff
+          background url(image_path + "time_line.png") repeat-x scroll center 68px #ffffff
 
           div.block
             background-color #ffffff
@@ -73,7 +74,7 @@
             color #bbbbbb
 
         i
-          background url("/bill-workflow/images/hexagon.png") no-repeat scroll center bottom transparent
+          background url(image_path + "hexagon.png") no-repeat scroll center bottom transparent
           clear both
           color #ffffff
           display block

lib/flow/stepTemplate.jade

@@ -1,4 +1,4 @@
-#workflow-container
+#flow-container
   .historyWrapper
     .scrollbar
     .handle

lib/bill-workflow/styles.styl renamed to lib/flow/styles.styl

@@ -1,30 +1,30 @@
 var View = require('view');
 var template = require('./template');
+var stepTemplate = require('./stepTemplate');
 var dom = require('dom');
-var Emitter = require('emitter');
 var request = require('superagent');
 var ripple = require('ripple');
 var moment = require('moment');
 
-module.exports = WorkflowView;
-
-function WorkflowView() {
-  if (!this instanceof WorkflowView) {
-    return new WorkflowView();
+function FlowView() {
+  if (!this instanceof FlowView) {
+    return new FlowView();
   }
 
   View.call(this, template);
 }
 
-View(WorkflowView);
+module.exports = FlowView;
+
+View(FlowView);
 
 /**
  * Click over some step to set active.
  * @param {Object} el Dom node.
  * @param {Object} step Step data.
  * @param {Object} prevStep previous step
  */
-WorkflowView.prototype.onClickStep = function (el, step, prevStep) {
+FlowView.prototype.onClickStep = function (el, step, prevStep) {
   var currentStep = step;
   this.el.find('li').removeClass('selected');
   dom(el).addClass('selected');
@@ -36,7 +36,7 @@ WorkflowView.prototype.onClickStep = function (el, step, prevStep) {
  * .
  * @param {String} billId Bill id to request steps.
  */
-WorkflowView.prototype.loadSteps = function (billId) {
+FlowView.prototype.loadSteps = function (billId) {
   var billUrl = '/api/bill/' + billId +  '/step/all';
   var self = this;
 
@@ -61,21 +61,17 @@ WorkflowView.prototype.loadSteps = function (billId) {
  * @param {Object} step current step
  * @param {Object} prevStep Previous step
  */
-WorkflowView.prototype.createStepView = function (step, prevStep) {
-  var Template = ripple('<li on-click="{{number}}">' +
-    '<i class="fa fa-file-text"></i>' +
-    '<p class="date">{{arriveAt}}</p>' +
-    '<p class="title">{{name}}</p>' +
-  '</li>');
-
+FlowView.prototype.createStepView = function (step, prevStep) {
+  var Template = ripple(stepTemplate());
   var self = this;
+
   Template.directive('on-click', function (number, el, view) {
     el.addEventListener('click', function () {
       self.onClickStep(el, step, prevStep);
     });
   });
 
   step.arriveAt = moment(step.arriveAt).format("DD-MM-YYYY");
-  var stepTemplate = new Template(step);
-  stepTemplate.appendTo('.frame ul');
+  var stepView = new Template(step);
+  stepView.appendTo('.frame ul');
 };

lib/bill-workflow/template.jade renamed to lib/flow/template.jade

@@ -8,10 +8,11 @@
   },
   "local": [
     "view",
-    "bill-workflow",
+    "flow",
     "bill-view",
     "sidebar",
-    "bill-diff"
+    "bill-diff",
+    "step-info"
   ],
   "scripts": [
     "homepage.js",

lib/bill-workflow/view.js renamed to lib/flow/view.js

@@ -1,19 +1,13 @@
 /**
  * Module dependencies.
  */
-
 var template = require('./template');
 var View = require('view');
-var WorkflowView = require('bill-workflow');
+var FlowView = require('flow');
 var DiffView = require('bill-diff');
 var BillView = require('bill-view');
 var SidebarView = require('sidebar');
-
-/**
- * Expose HomepageView
- */
-
-module.exports = HomepageView;
+var StepInfoView = require('step-info');
 
 /**
  * Creates `HomepageView`
@@ -38,9 +32,13 @@ HomepageView.prototype.appendElementsToMainView = function () {
   var billView = new BillView();
   mainView.append(billView.el);
 
-  var workflowView = new WorkflowView();
+  var workflowView = new FlowView();
   mainView.append(workflowView.el);
 
+  var stepInfo = new StepInfoView();
+  mainView.append(stepInfo.el);
+  workflowView.on('step:change', stepInfo.loadData.bind(stepInfo));
+
   var diffView = new DiffView();
   mainView.append(diffView.el);
   workflowView.on('step:change', diffView.changeBillContent.bind(diffView));
@@ -54,3 +52,7 @@ HomepageView.prototype.appendElementsToMainView = function () {
   sidebar.on('sidebar:click-at', workflowView.loadSteps.bind(workflowView));
 };
 
+/**
+ * Expose HomepageView
+ */
+module.exports = HomepageView;