2691 - Added "or" between date ranges and scope days #505

Merged
joan merged 5 commits from 2691-ticket_scope_days into dev 2021-01-11 14:13:51 +00:00
8 changed files with 139 additions and 33 deletions

View File

@ -187,7 +187,10 @@ export default class Field extends FormInput {
}
onChange() {
this.emit('change', {value: this.field});
// Changes doesn't reflect until appling async
this.$.$applyAsync(() => {
this.emit('change', {value: this.field});
});
}
}
Field.$inject = ['$element', '$scope'];

View File

@ -1,4 +1,5 @@
import Component from '../../lib/component';
import './style.scss';
export default class SearchPanel extends Component {
set filter(value) {

View File

@ -1,4 +1,4 @@
@import "variables";
@import "./variables";
vn-searchbar {
display: block;
@ -44,4 +44,27 @@ vn-searchbar {
& > form {
padding: $spacing-lg;
}
& > form#manifold-form {
padding: 0;
.manifold-panel {
border: $border-thin-light;
border-radius: 5px;
position: relative;
text-align: right;
.or {
font-weight: bold;
font-size: 26px;
color: $color-font-secondary
}
vn-icon[icon="info"] {
position: absolute;
top: 2px;
right: 2px
}
}
}
}

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-textfield
vn-one
label="Client id"
@ -21,27 +21,37 @@
ng-model="filter.orderFk">
</vn-textfield>
</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-input-number
vn-one
min="0"
step="1"
label="Days onward"
ng-model="filter.scopeDays"
display-controls="true">
</vn-input-number>
</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-textfield
vn-one
label="Nickname"
@ -63,7 +73,7 @@
ng-model="filter.refFk">
</vn-textfield>
</vn-horizontal>
<vn-horizontal>
<vn-horizontal class="vn-px-lg">
<vn-autocomplete
vn-one
label="Agency"
@ -87,7 +97,7 @@
</tpl-item>
</vn-autocomplete>
</vn-horizontal>
<vn-horizontal>
<vn-horizontal class="vn-px-lg">
<vn-autocomplete
vn-one
label="Warehouse"
@ -101,7 +111,7 @@
url="Provinces">
</vn-autocomplete>
</vn-horizontal>
<vn-horizontal>
<vn-horizontal class="vn-px-lg">
<vn-check
vn-one
label="My team"
@ -121,7 +131,7 @@
triple-state="true">
</vn-check>
</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,8 +1,11 @@
import ngModule from '../module';
import SearchPanel from 'core/components/searchbar/search-panel';
class Controller extends SearchPanel {
constructor($, $element) {
super($, $element);
this.filter = this.$.filter;
this.getGroupedStates();
}
@ -19,6 +22,35 @@ class Controller extends SearchPanel {
this.groupedStates = groupedStates;
});
}
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('vnTicketSearchPanel', {

View File

@ -10,10 +10,11 @@ describe('Ticket Component vnTicketSearchPanel', () => {
$httpBackend = _$httpBackend_;
controller = $componentController('vnTicketSearchPanel', {$element: null});
controller.$t = () => {};
controller.filter = {};
}));
describe('getGroupedStates()', () => {
it('should set an array of groupedStates with the aditionof a name translation', () => {
it('should set an array of groupedStates with the adition of a name translation', () => {
jest.spyOn(controller, '$t').mockReturnValue('miCodigo');
const data = [
{
@ -32,4 +33,39 @@ describe('Ticket Component vnTicketSearchPanel', () => {
}]);
});
});
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();
});
});
});

View File

@ -16,4 +16,5 @@ Pending: Pendiente
FREE: Libre
DELIVERED: Servido
ON_PREPARATION: En preparacion
PACKED: Encajado
PACKED: Encajado
Cannot choose a range of dates and days onward at the same time: No se puede selecionar un rango de fechas y días en adelante a la vez

View File

@ -4,4 +4,4 @@ You are going to delete this weekly ticket: Vas a eliminar este ticket programad
This ticket will be removed from weekly tickets! Continue anyway?: Este ticket se eliminará de tickets programados! ¿Continuar de todas formas?
Search weekly ticket by id or client id: Busca tickets programados por el identificador o el identificador del cliente
Search by weekly ticket: Buscar por tickets programados
weekDay: Dia
Weekday: Llegada