salix/modules/travel/front/search-panel/index.html

<vn-side-menu side="right">
    <vn-horizontal class="input">
        <vn-textfield
            label="General search"
            info="Search travels by id"
            ng-model="$ctrl.search"
            ng-keydown="$ctrl.onKeyPress($event, 'search')">
        </vn-textfield>
    </vn-horizontal>
    <vn-horizontal class="input horizontal">
        <vn-input-number
            min="0"
            label="Total entries"
            ng-model="$ctrl.totalEntries"
            ng-keydown="$ctrl.onKeyPress($event, 'totalEntries')">
        </vn-input-number>
    </vn-horizontal>
    <vn-horizontal class="input horizontal">
        <vn-autocomplete
            vn-id="agency"
            label="Agency"
            ng-model="$ctrl.filter.agencyModeFk"
            url="AgencyModes"
            show-field="name"
            value-field="id"
            on-change="$ctrl.addFilters()">
        </vn-autocomplete>
        <vn-autocomplete
            vn-id="continent"
            label="Continent Out"
            ng-model="$ctrl.filter.continent"
            url="Continents"
            show-field="name"
            value-field="code"
            on-change="$ctrl.addFilters()">
        </vn-autocomplete>
    </vn-horizontal>
    <vn-horizontal class="horizontal">
        <vn-date-picker
            label="Shipped from"
            ng-model="$ctrl.filter.shippedFrom"
            on-change="$ctrl.changeShipped()">
        </vn-date-picker>
        <vn-date-picker
            label="Shipped to"
            ng-model="$ctrl.filter.shippedTo"
            on-change="$ctrl.changeShipped()">
        </vn-date-picker>
    </vn-horizontal>
    <vn-vertical class="input">
        <vn-none class="or" translate>Or</vn-none>
        <div class="scope-days">
            <vn-input-number
                min="0"
                step="1"
                label="Days onward"
                ng-model="$ctrl.filter.scopeDays"
                on-change="$ctrl.changeScopeDays()"
                display-controls="true"
                info="Cannot choose a range of dates and days onward at the same time">
            </vn-input-number>
        </div>
    </vn-vertical>
    <vn-horizontal class="input horizontal">
        <vn-date-picker
            label="Landed from"
            ng-model="$ctrl.filter.landedFrom"
            on-change="$ctrl.addFilters()">
        </vn-date-picker>
        <vn-date-picker
            label="Landed to"
            ng-model="$ctrl.filter.landedTo"
            on-change="$ctrl.addFilters()">
        </vn-date-picker>
    </vn-horizontal>
    <vn-horizontal class="input horizontal">
        <vn-autocomplete
            vn-id="warehouseOut"
            label="Warehouse Out"
            ng-model="$ctrl.filter.warehouseOutFk"
            url="Warehouses"
            show-field="name"
            value-field="id"
            on-change="$ctrl.addFilters()">
        </vn-autocomplete>
        <vn-autocomplete
            vn-id="warehouseIn"
            label="Warehouse In"
            ng-model="$ctrl.filter.warehouseInFk"
            url="Warehouses"
            show-field="name"
            value-field="id"
            on-change="$ctrl.addFilters()">
        </vn-autocomplete>
    </vn-horizontal>
    <div class="chips">
        <vn-chip
            ng-if="$ctrl.filter.search"
            removable="true"
            on-remove="$ctrl.removeParamFilter('search')"
            class="colored">
            <span>Id/{{$ctrl.$t('Reference')}}: {{$ctrl.filter.search}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.totalEntries"
            removable="true"
            on-remove="$ctrl.removeParamFilter('totalEntries')"
            class="colored">
            <span>{{$ctrl.$t('Total entries')}}: {{$ctrl.filter.totalEntries}}</span>
        </vn-chip>
        <vn-chip
            ng-if="agency.selection"
            removable="true"
            on-remove="$ctrl.removeParamFilter('agencyModeFk')"
            class="colored">
            <span>{{$ctrl.$t('Agency')}}: {{agency.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="continent.selection"
            removable="true"
            on-remove="$ctrl.removeParamFilter('continent')"
            class="colored">
            <span>{{$ctrl.$t('Continent Out')}}: {{continent.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.shippedFrom"
            removable="true"
            on-remove="$ctrl.removeParamFilter('shippedFrom')"
            class="colored">
            <span>{{$ctrl.$t('Shipped from')}}: {{$ctrl.filter.shippedFrom | date:'dd/MM/yyyy'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.shippedTo"
            removable="true"
            on-remove="$ctrl.removeParamFilter('shippedTo')"
            class="colored">
            <span>{{$ctrl.$t('Shipped to')}}: {{$ctrl.filter.shippedTo | date:'dd/MM/yyyy'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.scopeDays"
            removable="true"
            on-remove="$ctrl.removeParamFilter('scopeDays')"
            class="colored">
            <span>{{$ctrl.$t('Days onward')}}: {{$ctrl.filter.scopeDays}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.landedFrom"
            removable="true"
            on-remove="$ctrl.removeParamFilter('landedFrom')"
            class="colored">
            <span>{{$ctrl.$t('Landed from')}}: {{$ctrl.filter.landedFrom | date:'dd/MM/yyyy'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.landedTo"
            removable="true"
            on-remove="$ctrl.removeParamFilter('landedTo')"
            class="colored">
            <span>{{$ctrl.$t('Landed to')}}: {{$ctrl.filter.landedTo | date:'dd/MM/yyyy'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="warehouseOut.selection"
            removable="true"
            on-remove="$ctrl.removeParamFilter('warehouseOutFk')"
            class="colored">
            <span>{{$ctrl.$t('Warehouse Out')}}: {{warehouseOut.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="warehouseIn.selection"
            removable="true"
            on-remove="$ctrl.removeParamFilter('warehouseInFk')"
            class="colored">
            <span>{{$ctrl.$t('Warehouse In')}}: {{warehouseIn.selection.name}}</span>
        </vn-chip>
    </div>
</vn-side-menu>