salix/modules/item/front/fixed-price-search-panel/index.html

<vn-crud-model url="Tags" fields="['id','name','isFree']" data="$ctrl.tags" auto-load="true" />
<vn-crud-model url="ItemCategories" data="categories" auto-load="true" />
<vn-side-menu side="right">
    <vn-horizontal class="input">
        <vn-textfield
            label="General search"
            ng-model="$ctrl.filter.search"
            info="Search items by id, name or barcode"
            vn-focus
            ng-keydown="$ctrl.onKeyPress($event)">
        </vn-textfield>
    </vn-horizontal>
    <vn-horizontal class="item-category">
        <vn-autocomplete
            vn-id="category"
            data="categories"
            ng-model="$ctrl.filter.categoryFk"
            show-field="name"
            value-field="id"
            label="Category">
        </vn-autocomplete>
        <vn-one ng-repeat="category in categories">
            <vn-icon
                ng-class="{'active': $ctrl.filter.categoryFk == 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"
            disabled="!$ctrl.filter.categoryFk"
            url="ItemTypes"
            label="Type"
            where="{categoryFk: $ctrl.filter.categoryFk}"
            show-field="name"
            value-field="id"
            ng-model="$ctrl.filter.typeFk"
            fields="['categoryFk']"
            include="'category'"
            on-change="$ctrl.addFilters()">
            <tpl-item>
                <div>{{name}}</div>
                <div class="text-caption text-secondary">
                    {{category.name}}
                </div>
            </tpl-item>
        </vn-autocomplete>
    </vn-vertical>
    <vn-horizontal class="input horizontal">
        <vn-autocomplete
            vn-id="buyer"
            disabled="false"
            ng-model="$ctrl.filter.buyerFk"
            url="TicketRequests/getItemTypeWorker"
            show-field="nickname"
            search-function="{firstName: $search}"
            value-field="id"
            label="Buyer"
            on-change="$ctrl.addFilters()">
        </vn-autocomplete>
        <vn-autocomplete
            vn-id="warehouse"
            label="Warehouse"
            ng-model="$ctrl.filter.warehouseFk"
            url="Warehouses"
            show-field="name"
            value-field="id"
            on-change="$ctrl.addFilters()">
        </vn-autocomplete>
    </vn-horizontal>
    <vn-horizontal class="input horizontal">
        <vn-date-picker
            label="From"
            ng-model="$ctrl.filter.started"
            on-change="$ctrl.addFilters()">
        </vn-date-picker>
        <vn-date-picker
            label="To"
            ng-model="$ctrl.filter.ended"
            on-change="$ctrl.addFilters()">
        </vn-date-picker>
    </vn-horizontal>
    <vn-horizontal class="input horizontal">
        <vn-check
            label="For me"
            ng-model="$ctrl.filter.mine"
            triple-state="true"
            ng-click="$ctrl.addFilters()">
        </vn-check>
        <vn-check
            label="Minimum price"
            ng-model="$ctrl.filter.hasMinPrice"
            triple-state="true"
            ng-click="$ctrl.addFilters()">
        </vn-check>
    </vn-horizontal>
    <vn-horizontal class="tags">
        <vn-one class="text-subtitle1" translate> Tags </vn-one>
        <vn-icon-button
            vn-none
            vn-tooltip="Add tag"
            icon="add_circle"
            ng-click="$ctrl.filter.tags.push({})">
        </vn-icon-button>
    </vn-horizontal>
    <vn-horizontal class="tags horizontal" ng-repeat="itemTag in $ctrl.filter.tags">
        <vn-autocomplete
            vn-id="tag"
            data="$ctrl.tags"
            ng-model="itemTag.tagFk"
            show-field="name"
            label="Tag"
            on-change="itemTag.value = null">
        </vn-autocomplete>
        <vn-textfield
            ng-show="tag.selection.isFree || tag.selection.isFree == undefined"
            label="Value"
            ng-model="itemTag.value"
            ng-keydown="$ctrl.onKeyPress($event)">
        </vn-textfield>
        <vn-autocomplete
            ng-show="tag.selection.isFree === false"
            url="{{'Tags/' + itemTag.tagFk + '/filterValue'}}"
            search-function="{value: $search}"
            label="Value"
            ng-model="itemTag.value"
            show-field="value"
            value-field="value"
            on-change="$ctrl.addFilters()">
        </vn-autocomplete>
        <vn-icon-button
            vn-none
            vn-tooltip="Remove tag"
            icon="delete"
            ng-click="$ctrl.removeTag(itemTag)">
        </vn-icon-button>
    </vn-horizontal>
    <div class="chips">
        <vn-chip
            ng-if="$ctrl.filter.search"
            removable="true"
            on-remove="$ctrl.removeItemFilter('search')"
            class="colored">
            <span>Id/{{$ctrl.$t('Name')}}: {{$ctrl.filter.search}}</span>
        </vn-chip>
        <vn-chip
            ng-if="category.selection"
            removable="true"
            on-remove="$ctrl.removeItemFilter('categoryFk')"
            class="colored">
            <span>{{$ctrl.$t('Category')}}: {{category.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="type.selection"
            removable="true"
            on-remove="$ctrl.removeItemFilter('typeFk')"
            class="colored">
            <span>{{$ctrl.$t('Type')}}: {{type.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="buyer.selection"
            removable="true"
            on-remove="$ctrl.removeItemFilter('buyerFk')"
            class="colored">
            <span>{{$ctrl.$t('Buyer')}}: {{buyer.selection.nickname}}</span>
        </vn-chip>
        <vn-chip
            ng-if="warehouse.selection"
            removable="true"
            on-remove="$ctrl.removeItemFilter('warehouseFk')"
            class="colored">
            <span>{{$ctrl.$t('Warehouse')}}: {{warehouse.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.started"
            removable="true"
            on-remove="$ctrl.removeItemFilter('started')"
            class="colored">
            <span>{{$ctrl.$t('Started')}}: {{$ctrl.filter.started | date:'dd/MM/yyyy'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.ended"
            removable="true"
            on-remove="$ctrl.removeItemFilter('ended')"
            class="colored">
            <span>{{$ctrl.$t('Ended')}}: {{$ctrl.filter.ended | date:'dd/MM/yyyy'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.mine != null"
            removable="true"
            on-remove="$ctrl.removeItemFilter('mine')"
            class="colored">
            <span>{{$ctrl.$t('For me')}}: {{$ctrl.filter.mine ? '✓' : '✗'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.hasMinPrice != null"
            removable="true"
            on-remove="$ctrl.removeItemFilter('hasMinPrice')"
            class="colored">
            <span>{{$ctrl.$t('Minimum price')}}: {{$ctrl.filter.hasMinPrice ? '✓' : '✗'}}</span>
        </vn-chip>
        <vn-chip
            ng-repeat="chipTag in $ctrl.filter.tags"
            removable="true"
            on-remove="$ctrl.removeTag(chipTag)"
            class="colored"
            ng-if="chipTag.value">
            <span>{{$ctrl.showTagInfo(chipTag)}}</span>
        </vn-chip>
    </div>
</vn-side-menu>