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.$params.id}"
    limit="50"
    data="$ctrl.items">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar vn-id="searchbar"
        auto-state="false"
        info="Search by item id or name"
        on-search="$ctrl.onSearch($params)">
    </vn-searchbar>
</vn-portal>
<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="priority DESC"
            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-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
            on-submit="$ctrl.onPanelSubmit($filter)"
            popover="popover">
        </vn-order-catalog-search-panel>
    </vn-popover>
    <div class="chips">
        <vn-chip 
            ng-if="$ctrl.itemId"
            removable="true"
            vn-tooltip="Item id"
            on-remove="$ctrl.removeItemId()"
            class="colored"> 
            <span>Id: {{$ctrl.itemId}}</span>
        </vn-chip>
        <vn-chip 
            ng-if="$ctrl.itemName"
            removable="true"
            vn-tooltip="Item"
            on-remove="$ctrl.removeItemName()"
            class="colored">
            <div>
                <span>
                    <span translate>Name</span>:
                </span>
                <span>{{$ctrl.itemName}}</span>
            </div>
        </vn-chip>
        <vn-chip 
            ng-if="category.selection"
            removable="true"
            vn-tooltip="Category"
            on-remove="$ctrl.categoryId = null"
            class="colored"> 
            <span translate>{{category.selection.name}}</span>
        </vn-chip>
        <vn-chip 
            ng-if="type.selection"
            removable="true"
            vn-tooltip="Type"
            on-remove="$ctrl.typeId = null"
            class="colored"> 
            <span translate>{{type.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-repeat="tagGroup in $ctrl.tagGroups"
            removable="true"
            on-remove="$ctrl.remove($index)"
            vn-tooltip="{{::$ctrl.formatTooltip(tagGroup)}}"
            class="colored"> 
            <div>
                <span ng-if="::tagGroup.tagFk">
                    <span translate>{{::tagGroup.tagSelection.name}}</span>:
                </span>
                <span ng-repeat="tagValue in tagGroup.values">
                    <span ng-if="$index > 0">,</span>
                    <span>"{{::tagValue.value}}"</span>
                </span>
            </div>
        </vn-chip>
    </div>
</vn-side-menu>