publish muk_web_searchpanel - 12.0

muk_web_searchpanel/__manifest__.py

@@ -20,7 +20,7 @@
 {
     'name': 'MuK Search Panel',
     'summary': 'Kanban Search Panel',
-    'version': '12.0.1.1.1',
+    'version': '12.0.1.2.0',
     'category': 'Extra Tools',
     'license': 'AGPL-3',
     'author': 'MuK IT',

muk_web_searchpanel/doc/changelog.rst

@@ -1,3 +1,8 @@
+`1.2.0`
+-------
+
+- Mobile Support
+
 `1.1.0`
 -------
 

muk_web_searchpanel/static/src/js/kanban_searchpanel.js

@@ -21,6 +21,7 @@ odoo.define('web.SearchPanel', function (require) {
 "use strict";
 
 var core = require('web.core');
+var config = require('web.config');
 var Domain = require('web.Domain');
 var Widget = require('web.Widget');
 
@@ -581,6 +582,66 @@ var SearchPanel = Widget.extend({
     },
 });
 
+if (config.device.isMobile) {
+    SearchPanel.include({
+        tagName: 'details',
+
+        _getCategorySelection: function () {
+            var self = this;
+            return Object.keys(this.categories).reduce(function (selection, categoryId) {
+                var category = self.categories[categoryId];
+                console.log('category', category);
+                if (category.activeValueId) {
+                    var ancestorIds = [category.activeValueId].concat(self._getAncestorValueIds(category, category.activeValueId));
+                    var breadcrumb = ancestorIds.map(function (valueId) {
+                        return category.values[valueId].display_name;
+                    });
+                    selection.push({ breadcrumb: breadcrumb, icon: category.icon, color: category.color});
+                }
+                console.log('selection', selection);
+                return selection;
+            }, []);
+        },
+
+        _getFilterSelection: function () {
+            var self = this;
+            return Object.keys(this.filters).reduce(function (selection, filterId) {
+                var filter = self.filters[filterId];
+                console.log('filter', filter);
+                if (filter.groups) {
+                    Object.keys(filter.groups).forEach(function (groupId) {
+                        var group = filter.groups[groupId];
+                        Object.keys(group.values).forEach(function (valueId) {
+                            var value = group.values[valueId];
+                            if (value.checked) {
+                                selection.push({name: value.name, icon: filter.icon, color: filter.color});
+                            }
+                        });
+                    });
+                } else if (filter.values) {
+                    Object.keys(filter.values).forEach(function (valueId) {
+                        var value = filter.values[valueId];
+                        if (value.checked) {
+                            selection.push({name: value.name, icon: filter.icon, color: filter.color});
+                        }
+                    });
+                }
+                console.log('selection', selection);
+                return selection;
+            }, []);
+        },
+
+        _render: function () {
+            this._super.apply(this, arguments);
+            this.$el.prepend(qweb.render('SearchPanel.MobileSummary', {
+                categories: this._getCategorySelection(),
+                filterValues: this._getFilterSelection(),
+                separator: ' / ',
+            }));
+        },
+    });
+}
+
 return SearchPanel;
 
 });

muk_web_searchpanel/static/src/js/kanban_view.js

@@ -83,9 +83,10 @@ KanbanView.include({
     },
     _processNode: function (node, fv) {
         if (node.tag === 'searchpanel') {
-            if (!config.device.isMobile) {
-                this._processSearchPanelNode(node, fv);
-            }
+//            if (!config.device.isMobile) {
+//                this._processSearchPanelNode(node, fv);
+//            }
+        	this._processSearchPanelNode(node, fv);
             return false;
         }
         return this._super.apply(this, arguments);

muk_web_searchpanel/static/src/scss/kanban_view.scss

@@ -121,3 +121,46 @@
         }
     }
 }
+
+@include media-breakpoint-down(sm) {
+	.o_kanban_with_searchpanel {
+        flex-direction: column;
+
+        details.o_search_panel {
+            flex-basis: auto;
+            height: auto;
+            width: 100%;
+            padding: 0;
+
+            > summary {
+                padding: $o-searchpanel-p-small;
+                // Hide the caret. For details see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
+                list-style-type: none;
+                &::-webkit-details-marker {
+                    display: none
+                }
+
+                .badge {
+                    font-size: 100%;
+                    background-color: white;
+                }
+            }
+
+            > .o_search_panel_section {
+                margin: 0 $o-searchpanel-p-small 0 $o-searchpanel-p;
+            }
+
+            &[open] {
+                z-index: $zindex-dropdown;
+
+                > summary {
+                    background-color: $list-group-action-active-bg;
+                }
+
+                .fa-chevron-left:before {
+                    content: "\f078";
+                }
+            }
+        }
+    }
+}

muk_web_searchpanel/static/src/xml/kanban.xml

@@ -123,4 +123,22 @@
     </li>
 </t>
 
+<t t-name="SearchPanel.MobileSummary">
+    <t t-set="emptySelection" t-value="!categories.length &amp; !filterValues.length"/>
+    <summary class="d-flex align-items-center">
+        <div class="text-truncate font-italic ml-2 mr-auto">
+            <t t-if="emptySelection">Filters...</t>
+            <span t-foreach="categories" t-as="category" class="o_search_panel_category mr-1">
+                <i t-if="category.icon" t-attf-class="o_search_panel_section_icon fa fa-w #{category.icon}" t-attf-style="#{category.color ? ('color: ' + category.color) : undefined}"/>
+                <t t-esc="category.breadcrumb.join(separator)"/>
+            </span>
+            <span t-foreach="filterValues" t-as="filterValue" class="o_search_panel_filter mr-1">
+                <i t-if="filterValue.icon" t-attf-class="o_search_panel_section_icon fa fa-w #{filterValue.icon}" t-attf-style="#{filterValue.color ? ('color: ' + filterValue.color) : undefined}"/>
+                <t t-esc="filterValue.name"/>
+            </span>
+        </div>
+        <i class="fa fa-fw fa-chevron-left"/>
+    </summary>
+</t>
+
 </templates>