salix/modules/order/front/catalog/index.html

<vn-crud-model
    url="ItemCategories"
    data="categories"
    auto-load="true">
</vn-crud-model>
<vn-crud-model
    vn-id="model"
    url="Orders/CatalogFilter"
    params="{orderFk: $ctrl.$state.params.id}"
    limit="50"
    data="$ctrl.items">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar info="Search by item id or name"></vn-searchbar>
</vn-portal>
<vn-auto-search
    on-search="$ctrl.onSearch($params)">
</vn-auto-search>

<vn-order-catalog-view model="model" 
    order="$ctrl.order">
</vn-order-catalog-view>
<vn-side-menu side="right">
    <vn-horizontal class="item-category">
        <vn-autocomplete vn-id="category"
            data="categories"
            ng-model="$ctrl.categoryId"
            show-field="name"
            value-field="id"
            label="Category">
        </vn-autocomplete>
        <vn-one ng-repeat="category in categories">
            <vn-icon 
                ng-class="{'active': $ctrl.categoryId == category.id}"
                icon="{{::category.icon}}"
                vn-tooltip="{{::category.name}}"
                ng-click="$ctrl.changeCategory(category.id)">
            </vn-icon>
        </vn-one>
    </vn-horizontal>
    <vn-vertical class="input">
        <vn-autocomplete vn-id="type"
            data="$ctrl.itemTypes"
            ng-model="$ctrl.typeId"
            show-field="name"
            value-field="id"
            label="Type"
            fields="['categoryFk']"
            include="'category'">
                <tpl-item>
                    <div>{{name}}</div>
                    <div class="text-caption text-secondary">
                        {{categoryName}}
                    </div>
                </tpl-item>
        </vn-autocomplete>
    </vn-vertical>
    <vn-vertical class="input vn-pt-md">
        <vn-autocomplete
            vn-id="field"
            data="$ctrl.orderFields"
            ng-model="$ctrl.orderField"
            selection="$ctrl.orderSelection"
            translate-fields="['name']"
            order="name"
            show-field="name"
            value-field="field"
            label="Order by"
            disabled="!model.data">
        </vn-autocomplete>
        <vn-autocomplete
            data="$ctrl.orderWays"
            ng-model="$ctrl.orderWay"
            translate-fields="['name']"
            show-field="name"
            value-field="way"
            label="Order"
            disabled="!model.data">
        </vn-autocomplete>
        <div ng-if="false && model.moreRows">
            <span translate>More than</span> {{model.limit}} <span translate>results</span>
        </div>
    </vn-vertical>
    <vn-vertical class="input vn-pt-md">
        <!-- <vn-textfield vn-id="itemId"
            ng-keyUp="$ctrl.onSearchById($event)"
            label="Item id">
            <prepend>
                <vn-icon icon="icon-item"></vn-icon>
            </prepend>
        </vn-textfield> -->

        <vn-datalist vn-one 
            vn-id="search"
            data="$ctrl.tagValues"
            ng-keyUp="$ctrl.onSearchByTag($event)"
            show-field="value"
            value-field="value"
            label="Search tag">
            <prepend>
                <vn-icon icon="search"></vn-icon>
            </prepend>
            <append>
                <vn-icon
                    icon="keyboard_arrow_down"
                    ng-click="$ctrl.openPanel($event)"
                    style="cursor: pointer;">
                </vn-icon>
            </append>
        </vn-datalist>
    </vn-vertical>
    <vn-popover
        vn-id="popover"
        on-close="$ctrl.onPopoverClose()">
        <vn-order-catalog-search-panel
            filter="panelFilter"
            on-submit="$ctrl.onPanelSubmit($filter)">
        </vn-order-catalog-search-panel>
    </vn-popover>
    <div class="chips">
        <vn-chip 
            ng-if="$ctrl.itemId"
            removable="true"
            translate-attr="{title: 'Item'}"
            on-remove="$ctrl.itemId = null"
            class="colored"> 
            <span>Id: {{$ctrl.itemId}}</span>
        </vn-chip>
        <vn-chip 
            ng-if="category.selection"
            removable="true"
            translate-attr="{title: 'Category'}"
            on-remove="$ctrl.categoryId = null"
            class="colored"> 
            <span translate>{{category.selection.name}}</span>
        </vn-chip>
        <vn-chip 
            ng-if="type.selection"
            removable="true"
            translate-attr="{title: 'Type'}"
            on-remove="$ctrl.typeId = null"
            class="colored"> 
            <span translate>{{type.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-repeat="tag in $ctrl.tags"
            removable="true"
            translate-attr="{title: 'Tag'}"
            on-remove="$ctrl.remove($index)"
            class="colored"> 
            <div>
                <span ng-if="::tag.tagFk">
                    <span translate>
                        {{::tag.tagSelection.name}}
                    </span>
                    <span ng-if="::tag.value">: </span> 
                </span>
                <span translate ng-if="::tag.value">
                    "{{::tag.value}}"
                </span>
            </div>
        </vn-chip>
    </div>
</vn-side-menu>