|
@@ -0,0 +1,140 @@
|
|
|
+function configuration_widget (instance, widget) {
|
|
|
+ "use strict";
|
|
|
+
|
|
|
+ var QWeb = instance.web.qweb;
|
|
|
+
|
|
|
+ widget.DashboardConfigurationWidget = instance.Widget.extend({
|
|
|
+ template: 'ConfigurationTmpl',
|
|
|
+ events: {
|
|
|
+ 'click .user_wrapper': 'selectUser',
|
|
|
+ 'dragstart .grid-stack': 'onDragWidget',
|
|
|
+ 'dragstop .grid-stack': 'onDropWidget',
|
|
|
+ 'added .grid-stack': 'onDropWidget',
|
|
|
+ 'click .widget_action': 'onClickWidgetAction',
|
|
|
+ },
|
|
|
+ init: function (parent) {
|
|
|
+ this._super(parent);
|
|
|
+ },
|
|
|
+ start: function () {
|
|
|
+ this.renderUsersArea();
|
|
|
+ this.renderWidgetsAsignedArea();
|
|
|
+ this.renderWidgetsArea();
|
|
|
+
|
|
|
+ this.isBorderDancing = false;
|
|
|
+ },
|
|
|
+ getUsers: function () {
|
|
|
+ var User = new instance.web.Model('res.users');
|
|
|
+ var fields = ['name', 'display_name', 'image_medium'];
|
|
|
+ var domain = [['active', '=', true]];
|
|
|
+ return User.query(fields).filter(domain).order_by(['id']).all();
|
|
|
+ },
|
|
|
+ renderUsersArea: function () {
|
|
|
+ var self = this;
|
|
|
+
|
|
|
+ self.getUsers().then(function (users) {
|
|
|
+ this.users = users;
|
|
|
+
|
|
|
+ var usersAreaHtml = QWeb.render('ConfigurationUsersTmpl', { users: users });
|
|
|
+ self.$el.find('.user_selectable_area').html(usersAreaHtml);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ renderWidgetsAsignedArea: function () {
|
|
|
+ this.$el.find('.widgets_droppable_area > div').gridstack({
|
|
|
+ cellHeight: 100,
|
|
|
+ animate: true,
|
|
|
+ acceptWidgets: true,
|
|
|
+ disableResize: true,
|
|
|
+ minWidth: 100,
|
|
|
+ width: 4
|
|
|
+ });
|
|
|
+ },
|
|
|
+ renderWidgetsArea: function () {
|
|
|
+ var widgets = [
|
|
|
+ {
|
|
|
+ id: "w_01",
|
|
|
+ name: 'Widget 1',
|
|
|
+ description: 'Description 1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "w_02",
|
|
|
+ name: 'Widget 2',
|
|
|
+ description: 'Description 2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "w_03",
|
|
|
+ name: 'Widget 3',
|
|
|
+ description: 'Description 3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "w_04",
|
|
|
+ name: 'Widget 4',
|
|
|
+ description: 'Description 4'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "w_05",
|
|
|
+ name: 'Widget 5',
|
|
|
+ description: 'Description 5'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ var element = this.$el.find('.widgets_draggable_area');
|
|
|
+ var widgetsAreaHtml = QWeb.render('ConfigurationWidgetsTmpl', { widgets: widgets });
|
|
|
+ element.html(widgetsAreaHtml);
|
|
|
+ element.find('.grid-stack').gridstack({
|
|
|
+ cellHeight: 100,
|
|
|
+ animate: true,
|
|
|
+ disableResize: true,
|
|
|
+ width: 1
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectUser: function (e) {
|
|
|
+ this.$el.find('.user_wrapper').removeClass('user_selected');
|
|
|
+
|
|
|
+ var element = $(e.target).closest('.user_wrapper');
|
|
|
+ element.addClass('user_selected');
|
|
|
+ },
|
|
|
+ borderDance: function (e) {
|
|
|
+ this.isBorderDancing = !this.isBorderDancing;
|
|
|
+
|
|
|
+ if (this.isBorderDancing) {
|
|
|
+ this.$el.find('.widgets_draggable_area').removeClass('vertical_scrollable');
|
|
|
+ this.$el.find('.widgets_droppable_area').addClass('dancing_border');
|
|
|
+ } else {
|
|
|
+ this.$el.find('.widgets_draggable_area').addClass('vertical_scrollable')
|
|
|
+ this.$el.find('.widgets_droppable_area').removeClass('dancing_border');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onDragWidget: function (e, ui) {
|
|
|
+ this.borderDance(e);
|
|
|
+ },
|
|
|
+ onDropWidget: function (e, ui) {
|
|
|
+ this.borderDance(e);
|
|
|
+
|
|
|
+ if (e.type === 'added') {
|
|
|
+ var el = ui.shift().el;
|
|
|
+ var trash = el.find('.widget_trash');
|
|
|
+ var add = el.find('.widget_add');
|
|
|
+ var display = trash.css('display');
|
|
|
+
|
|
|
+ trash.css('display', add.css('display'));
|
|
|
+ add.css('display', display);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onClickWidgetAction: function (e) {
|
|
|
+ var gridOrigin = $(e.target).closest('.grid-stack').data('gridstack');
|
|
|
+ var gridDest = null;
|
|
|
+ var el = $(e.target).closest('.grid-stack-item');
|
|
|
+ var action = $(e.target).closest('.widget_action').data('action');
|
|
|
+
|
|
|
+ if (action === 'add') {
|
|
|
+ gridDest = this.$el.find('.widgets_droppable_area > .grid-stack').data('gridstack');
|
|
|
+ } else {
|
|
|
+ gridDest = this.$el.find('.widgets_draggable_area > .grid-stack').data('gridstack');
|
|
|
+ }
|
|
|
+
|
|
|
+ this.borderDance();
|
|
|
+
|
|
|
+ gridOrigin.removeWidget(el);
|
|
|
+ gridDest.addWidget(el);
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|