muk_web/muk_web_searchpanel/static/src/xml/kanban.xml

<?xml version="1.0" encoding="UTF-8"?>

<!--     
	Copyright (C) 2018 MuK IT GmbH
	
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>. 
-->

<templates id="template" xml:space="preserve">

<t t-name="SearchPanel.SectionHeader">
    <header class="o_search_panel_section_header text-uppercase">
        <i t-attf-class="mr-1 fa #{section.icon} o_search_panel_section_icon" t-attf-style="#{section.color ? ('color: ' + section.color) : ''}"/>
        <b><t t-esc="section.description"/></b>
    </header>
</t>

<t t-name="SearchPanel.Category">
    <section class="o_search_panel_section o_search_panel_category">
        <t t-call="SearchPanel.SectionHeader">
            <t t-set="section" t-value="category"/>
        </t>
        <ul class="list-group d-block">
            <li class="o_search_panel_category_value border-0 list-group-item" t-att-data-category-id="category.id">
                <header t-att-class="'list-group-item-action' + (!category.activeValueId ? ' active' : '')">
                    <label class="o_search_panel_label mb0 d-block">
                        <span class="o_search_panel_label_title"><b>All</b></span>
                    </label>
                </header>
            </li>
            <t t-call="SearchPanel.CategoryValues">
                <t t-set="values" t-value="category.rootIds"/>
            </t>
        </ul>
    </section>
</t>
<t t-name="SearchPanel.CategoryValues">
    <t t-foreach="values" t-as="valueId">
        <t t-set="value" t-value="category.values[valueId]"/>
        <li class="o_search_panel_category_value border-0 list-group-item" t-att-data-id="value.id" t-att-data-category-id="category.id">
            <header t-att-class="'list-group-item-action' + (value.id === category.activeValueId ? ' active' : '')">
                <label t-att-for="value.display_name" class="o_search_panel_label mb0 d-block">
                    <i t-if="value.childrenIds.length" t-att-class="'fa fa-fw pull-right o_toggle_fold ' + (value.folded ? 'fa-caret-left' : 'fa-caret-down')"/>
                    <span class="o_search_panel_label_title"><t t-esc="value.display_name"/></span>
                </label>
            </header>
            <ul t-if="!value.folded" class="list-group d-block">
                <t t-call="SearchPanel.CategoryValues">
                    <t t-set="values" t-value="value.childrenIds"/>
                </t>
            </ul>
        </li>
    </t>
</t>

<t t-name="SearchPanel.Filter">
    <section class="o_search_panel_section o_search_panel_filter">
        <t t-call="SearchPanel.SectionHeader">
            <t t-set="section" t-value="filter"/>
        </t>
        <ul class="list-group d-block">
            <t t-if="filter.groups" t-call="SearchPanel.FilterGroups">
                <t t-set="groups" t-value="filter.groups"/>
            </t>
            <t t-else="" t-call="SearchPanel.FilterValues">
                <t t-set="sortedValueIds" t-value="filter.sortedValueIds"/>
                <t t-set="values" t-value="filter.values"/>
            </t>
        </ul>
    </section>
</t>
<t t-name="SearchPanel.FilterGroups">
    <li t-foreach="filter.sortedGroupIds" t-as="groupId" t-att-data-group-id="groupId" t-att-data-filter-id="filter.id"
        class="o_search_panel_filter_group list-group-item border-0">
        <t t-set="group" t-value="groups[groupId]"/>
        <div class="custom-control custom-checkbox">
            <t t-set="inputId" t-value="_.uniqueId('input_')"/>
            <input type="checkbox" t-att-id="inputId" t-att-checked="group.state === 'checked' ? 'checked' : undefined" class="custom-control-input"/>
            <label t-att-for="inputId" class="o_search_panel_label custom-control-label d-block" t-att-title="group.tooltip">
                <i t-att-class="'fa fa-fw pull-right o_toggle_fold ' + (group.folded ? 'fa-caret-left' : 'fa-caret-down')"/>
                <span class="o_search_panel_label_title"><t t-esc="group.name"/></span>
            </label>
        </div>
        <ul t-if="!group.folded" class="list-group d-block">
            <t t-call="SearchPanel.FilterValues">
                <t t-set="sortedValueIds" t-value="group.sortedValueIds"/>
                <t t-set="values" t-value="group.values"/>
            </t>
        </ul>
    </li>
     <ul t-if="groups['false']" class="list-group d-block">
        <t t-call="SearchPanel.FilterValues">
            <t t-set="group" t-value="groups['false']"/>
            <t t-set="sortedValueIds" t-value="group.sortedValueIds"/>
            <t t-set="values" t-value="group.values"/>
        </t>
    </ul>
</t>
<t t-name="SearchPanel.FilterValues">
    <li t-foreach="sortedValueIds" t-as="valueId" t-att-data-value-id="valueId" t-att-data-filter-id="filter.id"
        class="o_search_panel_filter_value list-group-item border-0">
        <t t-set="value" t-value="values[valueId]"/>
        <div class="custom-control custom-checkbox">
            <t t-set="inputId" t-value="_.uniqueId('input_')"/>
            <input type="checkbox" t-att-id="inputId" t-att-checked="value.checked ? 'checked' : undefined" class="custom-control-input"/>
            <label t-att-for="inputId" class="o_search_panel_label custom-control-label d-block" t-att-title="group &amp;&amp; group.tooltip">
                <span class="o_search_panel_label_title"><t t-esc="value.name"/></span>
                <span t-if="value.count > 0" class="pull-right text-muted mr-2 mt-1 small"><t t-esc="value.count"/></span>
                <span t-if="filter.disableCounters" class="pull-right text-muted mr-2 mt-1 small">?</span>
            </label>
        </div>
    </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>