Merge PR #2268 into 14.0

Signed-off-by pedrobaeza

web_timeline/static/lib/vis-timeline/vis-timeline-graph2d.css

@@ -5,6 +5,35 @@
   width: auto;
 }
 
+.vis-current-time {
+  background-color: #FF7F6E;
+  width: 2px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.vis-rolling-mode-btn {
+  height: 40px;
+  width: 40px;
+  position: absolute;
+  top: 7px;
+  right: 20px;
+  border-radius: 50%;
+  font-size: 28px;
+  cursor: pointer;
+  opacity: 0.8;
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  background: #3876c2;
+}
+.vis-rolling-mode-btn:before {
+  content: "\26F6";
+}
+
+.vis-rolling-mode-btn:hover {
+  opacity: 1;
+}
 .vis-timeline {
   /*
   -webkit-transition: height .4s ease-in-out;
@@ -38,52 +67,6 @@
   transition:         height .4s ease-in-out, top .4s ease-in-out;
 }
 /**/
-.vis-current-time {
-  background-color: #FF7F6E;
-  width: 2px;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.vis-rolling-mode-btn {
-  height: 40px;
-  width: 40px;
-  position: absolute;
-  top: 7px;
-  right: 20px;
-  border-radius: 50%;
-  font-size: 28px;
-  cursor: pointer;
-  opacity: 0.8;
-  color: white;
-  font-weight: bold;
-  text-align: center;
-  background: #3876c2;
-}
-.vis-rolling-mode-btn:before {
-  content: "\26F6";
-}
-
-.vis-rolling-mode-btn:hover {
-  opacity: 1;
-}
-
-.vis-timeline {
-  position: relative;
-  border: 1px solid #bfbfbf;
-  overflow: hidden;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-.vis-loading-screen {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
 .vis-panel {
   position: absolute;
 
@@ -272,6 +255,23 @@
     stroke: none;
 }
 
+
+.vis-timeline {
+  position: relative;
+  border: 1px solid #bfbfbf;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.vis-loading-screen {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 .vis-custom-time {
   background-color: #6E94FF;
   width: 2px;
@@ -393,6 +393,50 @@
   display: inline-block
 }
 
+.vis-labelset {
+  position: relative;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+}
+
+.vis-labelset .vis-label {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  color: #4d4d4d;
+
+  box-sizing: border-box;
+}
+
+.vis-labelset .vis-label {
+  border-bottom: 1px solid #bfbfbf;
+}
+
+.vis-labelset .vis-label.draggable {
+  cursor: pointer;
+}
+
+.vis-group-is-dragging {
+  background: rgba(0, 0, 0, .1);
+}
+
+.vis-labelset .vis-label:last-child {
+  border-bottom: none;
+}
+
+.vis-labelset .vis-label .vis-inner {
+  display: inline-block;
+  padding: 5px;
+}
+
+.vis-labelset .vis-label .vis-inner.vis-hidden {
+  padding: 0;
+}
+
+
 .vis-itemset {
   position: relative;
   padding: 0;
@@ -571,50 +615,6 @@
   height: 100%;
   z-index: 10;
 }
-
-.vis-labelset {
-  position: relative;
-
-  overflow: hidden;
-
-  box-sizing: border-box;
-}
-
-.vis-labelset .vis-label {
-  position: relative;
-  left: 0;
-  top: 0;
-  width: 100%;
-  color: #4d4d4d;
-
-  box-sizing: border-box;
-}
-
-.vis-labelset .vis-label {
-  border-bottom: 1px solid #bfbfbf;
-}
-
-.vis-labelset .vis-label.draggable {
-  cursor: pointer;
-}
-
-.vis-group-is-dragging {
-  background: rgba(0, 0, 0, .1);
-}
-
-.vis-labelset .vis-label:last-child {
-  border-bottom: none;
-}
-
-.vis-labelset .vis-label .vis-inner {
-  display: inline-block;
-  padding: 5px;
-}
-
-.vis-labelset .vis-label .vis-inner.vis-hidden {
-  padding: 0;
-}
-
 .vis-time-axis {
   position: relative;
   overflow: hidden;

web_timeline/static/src/js/timeline_controller.js

@@ -66,6 +66,7 @@ odoo.define("web_timeline.TimelineController", function (require) {
                     kwargs: {
                         fields: fields,
                         domain: domains,
+                        order: [{name: this.renderer.arch.attrs.default_group_by}],
                     },
                     context: this.getSession().user_context,
                 }).then((data) =>

web_timeline/static/src/js/timeline_model.js

@@ -11,6 +11,7 @@ odoo.define("web_timeline.TimelineModel", function (require) {
         load: function (params) {
             this.modelName = params.modelName;
             this.fieldNames = params.fieldNames;
+            this.default_group_by = params.default_group_by;
             if (!this.preload_def) {
                 this.preload_def = $.Deferred();
                 $.when(
@@ -55,9 +56,12 @@ odoo.define("web_timeline.TimelineModel", function (require) {
             return this._rpc({
                 model: this.modelName,
                 method: "search_read",
-                context: this.data.context,
+                kwargs: {
                     fields: this.fieldNames,
                     domain: this.data.domain,
+                    order: [{name: this.default_group_by}],
+                    context: this.data.context,
+                },
             }).then((events) => {
                 this.data.data = events;
                 this.data.rights = {

web_timeline/static/src/js/timeline_renderer.js

@@ -35,6 +35,7 @@ odoo.define("web_timeline.TimelineRenderer", function (require) {
             this.date_delay = params.date_delay;
             this.colors = params.colors;
             this.fieldNames = params.fieldNames;
+            this.default_group_by = params.default_group_by;
             this.dependency_arrow = params.dependency_arrow;
             this.modelClass = params.view.model;
             this.fields = params.fields;
@@ -376,7 +377,8 @@ odoo.define("web_timeline.TimelineRenderer", function (require) {
                 return events;
             }
             const groups = [];
-            groups.push({id: -1, content: _t("<b>UNASSIGNED</b>")});
+            groups.push({id: -1, content: _t("<b>UNASSIGNED</b>"), order: -1});
+            var seq = 1;
             for (const evt of events) {
                 const group_name = evt[_.first(group_bys)];
                 if (group_name) {
@@ -389,7 +391,9 @@ odoo.define("web_timeline.TimelineRenderer", function (require) {
                             groups.push({
                                 id: group_name[0],
                                 content: group_name[1],
+                                order: seq,
                             });
+                            seq += 1;
                         }
                     }
                 }
@@ -470,6 +474,7 @@ odoo.define("web_timeline.TimelineRenderer", function (require) {
                 start: date_start,
                 content: content,
                 id: evt.id,
+                order: evt.order,
                 group: group,
                 evt: evt,
                 style: `background-color: ${this.color};`,

web_timeline/static/src/js/timeline_view.js

@@ -72,8 +72,10 @@ odoo.define("web_timeline.TimelineView", function (require) {
 
             const colors = this.parse_colors();
             for (const color of colors) {
+                if (!fieldNames.includes(color.field)) {
                     fieldNames.push(color.field);
                 }
+            }
 
             if (dependency_arrow) {
                 fieldNames.push(dependency_arrow);
@@ -106,11 +108,13 @@ odoo.define("web_timeline.TimelineView", function (require) {
             this.rendererParams.date_delay = date_delay;
             this.rendererParams.colors = colors;
             this.rendererParams.fieldNames = fieldNames;
+            this.rendererParams.default_group_by = attrs.default_group_by;
             this.rendererParams.min_height = min_height;
             this.rendererParams.dependency_arrow = dependency_arrow;
             this.rendererParams.fields = fields;
             this.loadParams.modelName = this.modelName;
             this.loadParams.fieldNames = fieldNames;
+            this.loadParams.default_group_by = attrs.default_group_by;
             this.controllerParams.open_popup_action = open_popup_action;
             this.controllerParams.date_start = date_start;
             this.controllerParams.date_stop = date_stop;
@@ -121,7 +125,7 @@ odoo.define("web_timeline.TimelineView", function (require) {
 
         _preapre_vis_timeline_options: function (attrs) {
             return {
-                groupOrder: this.group_order,
+                groupOrder: "order",
                 orientation: "both",
                 selectable: true,
                 multiselect: true,
@@ -134,24 +138,6 @@ odoo.define("web_timeline.TimelineView", function (require) {
             };
         },
 
-        /**
-         * Order function for groups.
-         * @param {Object} grp1
-         * @param {Object} grp2
-         * @returns {Integer}
-         */
-        group_order: function (grp1, grp2) {
-            // Display non grouped elements first
-            if (grp1.id === -1) {
-                return -1;
-            }
-            if (grp2.id === -1) {
-                return 1;
-            }
-
-            return grp1.content.localeCompare(grp2.content);
-        },
-
         /**
          * Parse the colors attribute.
          *