[IMP] Dashboard cleanup

bzr revid: fme@openerp.com-20110531222838-t2a9ksc7l2sthghn

3 files changed, 172 insertions, 134 deletions

diff --git a/addons/base_dashboard/static/src/css/dashboard.css b/addons/base_dashboard/static/src/css/dashboard.css
index 815c06b6bcd..071a8cb8228 100644
--- a/addons/base_dashboard/static/src/css/dashboard.css
+++ b/addons/base_dashboard/static/src/css/dashboard.css
@@ -1,36 +1,61 @@
-.column {
-    float: left; 
+.openerp .oe-dashboard-links {
+    text-align: right;
+    margin: -2em 1em 1em 0;
+}
+.openerp .oe-dashboard-column {
+    float: left;
     padding-bottom: 100px;
 }
-
-.portlet { 
+.openerp .oe-dashboard-action {
     margin: 0 1em 1em 0;
 }
-
-.portlet-header { 
-    margin: 0.3em; 
-    padding-bottom: 4px; 
-    padding-left: 0.2em;
+.openerp .oe-dashboard-action .oe-dashboard-action-header {
+    margin: 0.3em;
+    padding-bottom: 4px;
+    padding-left: 0.2em
 }
 
-.portlet-header:hover {
+.openerp .oe-dashboard-action .oe-dashboard-action-header:hover {
     cursor: move;
 }
 
-.portlet-header .ui-icon { 
+.openerp .oe-dashboard-action .oe-dashboard-action-header .ui-icon {
     float: right;
 }
 
-.portlet-content { 
+.openerp .oe-dashboard-action .oe-dashboard-action-content {
     padding: 0.4em;
 }
 
-.ui-sortable-placeholder { 
-    border: 1px dotted black; 
-    visibility: visible !important; 
+.openerp .oe-dashboard .ui-sortable-placeholder {
+    border: 1px dotted black;
+    visibility: visible !important;
     height: 50px !important;
 }
 
-.ui-sortable-placeholder * { 
+.openerp .oe-dashboard .ui-sortable-placeholder * {
     visibility: hidden;
-} 
\ No newline at end of file
+}
+
+/* Layouts */
+.openerp .oe-dashboard-layout_1 .oe-dashboard-column {
+    width: 100%;
+}
+.openerp .oe-dashboard-layout_1-1 .oe-dashboard-column {
+    width: 50%;
+}
+.openerp .oe-dashboard-layout_1-1-1 .oe-dashboard-column {
+    width: 33%;
+}
+.openerp .oe-dashboard-layout_2-1 .oe-dashboard-column.index_0 {
+    width: 70%;
+}
+.openerp .oe-dashboard-layout_2-1 .oe-dashboard-column.index_1 {
+    width: 30%;
+}
+.openerp .oe-dashboard-layout_1-2 .oe-dashboard-column.index_0 {
+    width: 30%;
+}
+.openerp .oe-dashboard-layout_1-2 .oe-dashboard-column.index_1 {
+    width: 70%;
+}
diff --git a/addons/base_dashboard/static/src/js/dashboard.js b/addons/base_dashboard/static/src/js/dashboard.js
index 8f09f622050..3e253194d57 100644
--- a/addons/base_dashboard/static/src/js/dashboard.js
+++ b/addons/base_dashboard/static/src/js/dashboard.js
@@ -1,127 +1,108 @@
-openerp.base_dashboard = function(openerp){
+openerp.base_dashboard = function(openerp) {
 
 QWeb.add_template('/base_dashboard/static/src/xml/base_dashboard.xml');
 
-openerp.base.form.Board = openerp.base.form.Widget.extend({
+openerp.base.form.DashBoard = openerp.base.form.Widget.extend({
     init: function(view, node) {
-        
         this._super(view, node);
-        this.template = "Board";
+        this.template = "DashBoard";
     },
     start: function() {
+        var self = this;
         this._super.apply(this, arguments);
-        
-        this.$element.html(QWeb.render(this.template));
-        var $dashboard =  this.$element.find('#dashboard');
-        var children = this.node.children;
-        
-        for(var ch=0; ch < children.length; ch++) {
-            var node = children[ch];
-            
-            var widget;
-            if(node.tag.indexOf('child') >= 0) {
-                widget = new (openerp.base.form.widgets.get_object('child')) (this.view, node, $dashboard);
-            } else {
-                //Vpaned
-                widget = new (openerp.base.form.widgets.get_object(node.tag)) (this.view, node, $dashboard);
-            }
-            
-            widget.start();
-            
-        }
-        
-        jQuery('.column').css('width', 100/children.length+'%');
-    },
-});
-
-
-openerp.base.form.Dashbar = openerp.base.form.Widget.extend({
-    init: function(view, node, dashboard) {
-        this._super(view, node, dashboard);
-        this.dashboard = dashboard;
-        this.template = 'Portlet'
-    },
-    start: function() {
-        var $dashboard = this.dashboard;
-        var children = this.node.children;
-        $dashboard.append(QWeb.render(this.template, {widget: this, 'children': children}))
-        
-        for(var chld=0; chld < children.length;chld++) {
-            var child = children[chld];
-            var widget = new (openerp.base.form.widgets.get_object(child.tag)) (this.view, child);
-            widget.start()
-        }
-        $( ".column" ).sortable({
-            connectWith: ".column",
+        this.$element.find(".oe-dashboard-column").sortable({
+            connectWith: ".oe-dashboard-column",
             scroll: false
-        });
+        }).disableSelection().bind('sortstop', self.do_save_dashboard);
+        this.$element.find('.oe-dashboard-link-add_widget').click(this.on_add_widget);
+        this.$element.find('.oe-dashboard-link-edit_layout').click(this.on_edit_layout);
 
-        $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
-			.find( ".portlet-header" )
-				.addClass( "ui-widget-header ui-corner-all" )
-				.end()
-			.find( ".portlet-content" );
-            
-		$( ".portlet-header .ui-icon" ).click(function() {
-			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
-			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
-		});
+        this.$element.find('.oe-dashboard-column .ui-icon-minusthick').click(function() {
+            $(this).toggleClass('ui-icon-minusthick').toggleClass('ui-icon-plusthick');
+            $(this).parents('.oe-dashboard-action:first .oe-dashboard-action-content').toggle();
+        });
 
-        $( ".column" ).disableSelection();
-    }
-})
+        $('.oe-dashboard-column .ui-icon-closethick').click(function() {
+            $(this).parents('.oe-dashboard-action:first').remove();
+            self.do_save_dashboard();
+        });
 
-openerp.base.form.Action = openerp.base.form.Widget.extend({
-    init: function(view, node) {
-        this._super(view, node);
+        this.actions_attrs = {};
+        // Init actions
+        _.each(this.node.children, function(column) {
+            _.each(column.children, function(action) {
+                delete(action.attrs.width);
+                delete(action.attrs.height);
+                delete(action.attrs.colspan);
+                self.actions_attrs[action.attrs.name] = action.attrs;
+                self.rpc('/base/action/load', {
+                    action_id: parseInt(action.attrs.name, 10)
+                }, self.on_load_action);
+            });
+        });
     },
-    start: function() {
-        this._super.apply(this, arguments);
-        this.rpc('/base_dashboard/dashboard/load',{
-            node_attrs: this.node.attrs
-        },
-        this.on_load_action);
+    on_add_widget: function() {
+    },
+    on_edit_layout: function() {
+    },
+    do_save_dashboard: function() {
+        var self = this;
+        var board = {
+                style : this.$element.find('.oe-dashboard').attr('data-layout'),
+                columns : []
+            };
+        this.$element.find('.oe-dashboard-column').each(function() {
+            var actions = [];
+            $(this).find('.oe-dashboard-action').each(function() {
+                var action_id = $(this).attr('data-id');
+                actions.push(self.actions_attrs[action_id]);
+            });
+            board.columns.push(actions);
+        });
+        var xml = QWeb.render('DashBoard.xml', board);
     },
-    
     on_load_action: function(result) {
-        var action = result.action;
+        var action = result.result;
         action.flags = {
             search_view : false,
             sidebar : false,
             views_switcher : false,
-            action_buttons : false
+            action_buttons : false,
+            pager: false
         }
-        var node_attrs = this.node.attrs;
-        var content_id = 'portlet-content-'+node_attrs.name;
-        var action_manager = new openerp.base.ActionManager(this.session, content_id);
-        action_manager.start();
-        action_manager.do_action(action);
-    }
-})
-
-openerp.base.form.Vpaned = openerp.base.form.Widget.extend({
-    init: function(view, node, board, child_index) {
-        
-        this._super(view, node, board, child_index);
-        this.board = board;
-        this.child_index = child_index;
+        var element_id = this.view.element_id + '_action_' + action.id;
+        var view = new openerp.base.ViewManagerAction(this.session, element_id, action);
+        view.start();
     },
-    start: function() {
-        this._super.apply(this, arguments);
-        var children = this.node.children;
-        for(var chld=0; chld<children.length; chld++) {
-            var ch_widget = children[chld].children;
-            for(var ch=0; ch<ch_widget.length; ch++) {
-                var widget_type = ch_widget[ch].tag;
-                var widget = new (openerp.base.form.widgets.get_object(widget_type)) (this.view, ch_widget[ch], this.board, this.child_index);
-                widget.start();
-            }
+    render: function() {
+        return QWeb.render(this.template, this);
+    }
+});
+openerp.base.form.DashBoardLegacy = openerp.base.form.DashBoard.extend({
+    render: function() {
+        if (this.node.tag == 'hpaned') {
+            this.node.attrs.style = '1-1';
+        } else if (this.node.tag == 'vpaned') {
+            this.node.attrs.style = '1';
         }
-    },
-})
+        this.node.tag = 'board';
+        _.each(this.node.children, function(child) {
+            if (child.tag.indexOf('child') == 0) {
+                child.tag = 'column';
+                var actions = [], first_child = child.children[0];
+                if (first_child && first_child.tag == 'vpaned') {
+                    _.each(first_child.children, function(subchild) {
+                        actions.push.apply(actions, subchild.children);
+                    });
+                    child.children = actions;
+                }
+            }
+        });
+        return QWeb.render(this.template, this);
+    }
+});
 
-openerp.base.form.widgets.add('hpaned', 'openerp.base.form.Board');
-openerp.base.form.widgets.add('child', 'openerp.base.form.Dashbar');
-openerp.base.form.widgets.add('vpaned', 'openerp.base.form.Vpaned');
-openerp.base.form.widgets.add('action', 'openerp.base.form.Action');
+openerp.base.form.widgets.add('hpaned', 'openerp.base.form.DashBoardLegacy');
+openerp.base.form.widgets.add('vpaned', 'openerp.base.form.DashBoardLegacy');
+openerp.base.form.widgets.add('board', 'openerp.base.form.DashBoard');
 }
diff --git a/addons/base_dashboard/static/src/xml/base_dashboard.xml b/addons/base_dashboard/static/src/xml/base_dashboard.xml
index 5d5b957e2ba..349823847aa 100644
--- a/addons/base_dashboard/static/src/xml/base_dashboard.xml
+++ b/addons/base_dashboard/static/src/xml/base_dashboard.xml
@@ -1,17 +1,49 @@
 <template>
-    <t t-name="Board">
-        <div id="dashboard" class="demo">
-        </div>
-    </t>
-    <t t-name="Portlet">
-            <div t-att-id="widget.node.tag" class="column">
-                <div class="portlet" t-foreach="children" t-as="child" t-att-id="child.attrs.name">
-                    <div class="portlet-header">
-                        <t t-esc="child.attrs.string"/>
-                        <span class="ui-icon ui-icon-minusthick"></span>
-                    </div>
-                    <div class="portlet-content" t-att-id="'portlet-content-'+child.attrs.name"></div>
+<t t-name="DashBoard">
+    <div class="oe-dashboard-links">
+        <button type="button" class="button oe-dashboard-link-add_widget">
+            Add Widget
+        </button>
+        <button type="button" class="button oe-dashboard-link-edit_layout">
+            Edit layout
+        </button>
+    </div>
+    <div t-att-data-layout="node.attrs.style" t-attf-class="oe-dashboard oe-dashboard-layout_#{node.attrs.style}">
+        <div t-foreach="node.children" t-as="column" t-if="column.tag == 'column'"
+             t-att-id="view.element_id + '_column_' + column_index" t-attf-class="oe-dashboard-column index_#{column_index}">
+
+            <div t-foreach="column.children" t-as="action" t-if="action.tag == 'action'" t-att-data-id="action.attrs.name"
+                class="oe-dashboard-action ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
+
+                <div class="oe-dashboard-action-header ui-widget-header ui-corner-all">
+                    <t t-esc="action.attrs.string"/>
+                    <span class='ui-icon ui-icon-closethick'></span>
+                    <span class='ui-icon ui-icon-minusthick'></span>
                 </div>
+                <div t-att-id="view.element_id + '_action_' + action.attrs.name" class="oe-dashboard-action-content"></div>
             </div>
-    </t>
-</template>
\ No newline at end of file
+        </div>
+    </div>
+</t>
+<t t-name="DashBoard.layouts">
+    <div class="oe-dashboard-layout-selector">
+        <p>
+            <strong>Choose dashboard layout</strong>
+        </p>
+        <ul class="layoutselection">
+            <li id="layout1" class="layoutchoice" layout-style="1"></li>
+            <li id="layout2" class="layoutchoice" layout-style="1-1"></li>
+            <li id="layout3" class="layoutchoice" layout-style="1-1-1"></li>
+            <li id="layout4" class="layoutchoice" layout-style="1-2"></li>
+            <li id="layout5" class="layoutchoice" layout-style="2-1"></li>
+        </ul>
+    </div>
+</t>
+<t t-name="DashBoard.xml">
+    <board t-att-style="style">
+        <column t-foreach="columns" t-as="column">
+            <action t-foreach="column" t-as="action" t-att="action"/>
+        </column>
+    </board>
+</t>
+</template>