Add scopeDays to search bar on route

This commit is contained in:
Jorge Padawan 2021-01-20 13:19:28 +01:00
parent 61c18f09e2
commit 91979f5d69
5 changed files with 145 additions and 28 deletions

View File

@ -9,7 +9,8 @@
vn-focus
panel="vn-route-search-panel"
info="Search routes by id"
filter="$ctrl.filterParams"
fetch-params="$ctrl.fetchParams($params)"
suggested-filter="$ctrl.filterParams"
model="model">
</vn-searchbar>
</vn-portal>

View File

@ -2,16 +2,30 @@ import ngModule from '../module';
import ModuleMain from 'salix/components/module-main';
export default class Route extends ModuleMain {
$postLink() {
let to = new Date();
to.setDate(to.getDate() + 1);
to.setHours(0, 0, 0, 0);
constructor() {
super();
let from = new Date();
from.setHours(0, 0, 0, 0);
this.filterParams = {
scopeDays: 1
};
}
this.filterParams = {from, to, warehouseFk: this.vnConfig.warehouseFk};
this.$.model.applyFilter(null, this.filterParams);
fetchParams($params) {
if (!Object.entries($params).length)
$params.scopeDays = 1;
if (typeof $params.scopeDays === 'number') {
const from = new Date();
from.setHours(0, 0, 0, 0);
const to = new Date(from.getTime());
to.setDate(to.getDate() + $params.scopeDays);
to.setHours(23, 59, 59, 999);
Object.assign($params, {from, to});
}
return $params;
}
}

View File

@ -1,6 +1,6 @@
<div class="search-panel">
<form ng-submit="$ctrl.onSearch()">
<vn-horizontal>
<form id="manifold-form" ng-submit="$ctrl.onSearch()">
<vn-horizontal class="vn-px-lg vn-pt-lg">
<vn-textfield
vn-one
label="General search"
@ -9,7 +9,7 @@
vn-focus>
</vn-textfield>
</vn-horizontal>
<vn-horizontal>
<vn-horizontal class="vn-px-lg">
<vn-autocomplete
vn-one
ng-model="filter.workerFk"
@ -29,19 +29,37 @@
value-field="id">
</vn-autocomplete>
</vn-horizontal>
<vn-horizontal>
<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>
<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"
on-change="$ctrl.from = value">
</vn-date-picker>
<vn-date-picker
vn-one
label="To"
ng-model="filter.to"
on-change="$ctrl.to = value">
</vn-date-picker>
<vn-none class="or vn-px-md">O</vn-none>
<vn-input-number
vn-one
min="0"
step="1"
label="Days onward"
ng-model="filter.scopeDays"
on-change="$ctrl.scopeDays = value"
display-controls="true">
</vn-input-number>
<vn-icon color-marginal
icon="info"
vn-tooltip="Cannot choose a range of dates and days onward at the same time">
</vn-icon>
</vn-horizontal>
</section>
<vn-horizontal class="vn-px-lg">
<vn-autocomplete
vn-one
label="Vehicle"
@ -56,7 +74,7 @@
ng-model="filter.m3">
</vn-textfield>
</vn-horizontal>
<vn-horizontal>
<vn-horizontal class="vn-px-lg">
<vn-autocomplete
vn-one
label="Warehouse"
@ -71,7 +89,7 @@
ng-model="filter.description">
</vn-textfield>
</vn-horizontal>
<vn-horizontal class="vn-mt-lg">
<vn-horizontal class="vn-px-lg vn-pb-lg vn-mt-lg">
<vn-submit label="Search"></vn-submit>
</vn-horizontal>
</form>

View File

@ -1,7 +1,43 @@
import ngModule from '../module';
import SearchPanel from 'core/components/searchbar/search-panel';
class Controller extends SearchPanel {
constructor($, $element) {
super($, $element);
this.filter = this.$.filter;
}
get from() {
return this._from;
}
set from(value) {
this._from = value;
this.filter.scopeDays = null;
}
get to() {
return this._to;
}
set to(value) {
this._to = value;
this.filter.scopeDays = null;
}
get scopeDays() {
return this._scopeDays;
}
set scopeDays(value) {
this._scopeDays = value;
this.filter.from = null;
this.filter.to = null;
}
}
ngModule.vnComponent('vnRouteSearchPanel', {
template: require('./index.html'),
controller: SearchPanel
controller: Controller
});

View File

@ -0,0 +1,48 @@
import './index';
describe('Route Component vnRouteSearchPanel', () => {
let controller;
beforeEach(ngModule('route'));
beforeEach(inject(($componentController, _$httpBackend_) => {
controller = $componentController('vnRouteSearchPanel', {$element: null});
controller.$t = () => {};
controller.filter = {};
}));
describe('from() setter', () => {
it('should clear the scope days when setting the from property', () => {
controller.filter.scopeDays = 1;
controller.from = new Date();
expect(controller.filter.scopeDays).toBeNull();
expect(controller.from).toBeDefined();
});
});
describe('to() setter', () => {
it('should clear the scope days when setting the to property', () => {
controller.filter.scopeDays = 1;
controller.to = new Date();
expect(controller.filter.scopeDays).toBeNull();
expect(controller.to).toBeDefined();
});
});
describe('scopeDays() setter', () => {
it('should clear the date range when setting the scopeDays property', () => {
controller.filter.from = new Date();
controller.filter.to = new Date();
controller.scopeDays = 1;
expect(controller.filter.from).toBeNull();
expect(controller.filter.to).toBeNull();
expect(controller.scopeDays).toBeDefined();
});
});
});