<div class="search-panel"> <form id="manifold-form" ng-submit="$ctrl.onSearch()"> <vn-horizontal class="vn-px-lg vn-pt-lg"> <vn-textfield vn-one label="General search" ng-model="filter.search" info="Search routes by id" vn-focus> </vn-textfield> </vn-horizontal> <section class="vn-px-md"> <vn-horizontal class="manifold-panel vn-pa-md"> <vn-date-picker vn-one label="From" ng-model="filter.from"> </vn-date-picker> <vn-date-picker vn-one label="To" ng-model="filter.to"> </vn-date-picker> </vn-horizontal> </section> <vn-horizontal class="vn-px-lg"> <vn-textfield vn-one label="Tractor plate" ng-model="filter.tractorPlate"> </vn-textfield> <vn-textfield vn-one label="Trailer plate" ng-model="filter.trailerPlate"> </vn-textfield> </vn-horizontal> <vn-horizontal class="vn-px-lg"> <vn-autocomplete vn-one ng-model="filter.supplierFk" url="Suppliers" show-field="nickname" search-function="{or: [{id: $search}, {nickname: {like: '%'+ $search +'%'}}]}" value-field="id" order="nickname" label="Carrier"> <tpl-item> {{::id}} - {{::nickname}} </tpl-item> </vn-autocomplete> <vn-input-number vn-one label="Price" ng-model="filter.price"> </vn-input-number> </vn-horizontal> <vn-horizontal class="vn-px-lg"> <vn-textfield vn-one label="Driver name" ng-model="filter.driverName"> </vn-textfield> <vn-textfield vn-one label="Phone" ng-model="filter.phone"> </vn-textfield> </vn-horizontal> <vn-horizontal class="vn-px-lg vn-pb-lg vn-mt-lg"> <vn-submit label="Search"></vn-submit> </vn-horizontal> </form> </div>