fixes #5206 travel buscador en el lateral #1384
|
|
@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
|
||||
### Changed
|
||||
- (Envíos -> Extra comunitarios) Se agrupan las entradas del mismo travel. Añadidos campos Referencia y Importe.
|
||||
- (Envíos -> Índice) Cambiado el buscador superior por uno lateral
|
||||
|
||||
### Fixed
|
||||
-
|
||||
|
|
|
|||
|
|
@ -1138,7 +1138,16 @@ export default {
|
|||
landingDate: 'vn-travel-create vn-date-picker[ng-model="$ctrl.travel.landed"]',
|
||||
warehouseOut: 'vn-travel-create vn-autocomplete[ng-model="$ctrl.travel.warehouseOutFk"]',
|
||||
warehouseIn: 'vn-travel-create vn-autocomplete[ng-model="$ctrl.travel.warehouseInFk"]',
|
||||
save: 'vn-travel-create vn-submit > button'
|
||||
save: 'vn-travel-create vn-submit > button',
|
||||
generalSearchFilter: 'vn-travel-search-panel vn-textfield[ng-model="$ctrl.search"]',
|
||||
agencyFilter: 'vn-travel-search-panel vn-autocomplete[ng-model="$ctrl.filter.agencyModeFk"]',
|
||||
warehouseOutFilter: 'vn-travel-search-panel vn-autocomplete[ng-model="$ctrl.filter.warehouseOutFk"]',
|
||||
warehouseInFilter: 'vn-travel-search-panel vn-autocomplete[ng-model="$ctrl.filter.warehouseInFk"]',
|
||||
scopeDaysFilter: 'vn-travel-search-panel vn-input-number[ng-model="$ctrl.filter.scopeDays"]',
|
||||
continentFilter: 'vn-travel-search-panel vn-autocomplete[ng-model="$ctrl.filter.continent"]',
|
||||
totalEntriesFilter: 'vn-travel-search-panel vn-input-number[ng-model="$ctrl.totalEntries"]',
|
||||
chip: 'vn-travel-search-panel vn-chip > vn-icon',
|
||||
|
||||
},
|
||||
travelExtraCommunity: {
|
||||
anySearchResult: 'vn-travel-extra-community > vn-card div > tbody > tr[ng-attr-id="{{::travel.id}}"]',
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ describe('Travel basic data path', () => {
|
|||
browser = await getBrowser();
|
||||
page = browser.page;
|
||||
await page.loginAndModule('buyer', 'travel');
|
||||
await page.accessToSearchResult('3');
|
||||
await page.write(selectors.travelIndex.generalSearchFilter, '3');
|
||||
await page.keyboard.press('Enter');
|
||||
await page.accessToSection('travel.card.basicData');
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ describe('Travel descriptor path', () => {
|
|||
browser = await getBrowser();
|
||||
page = browser.page;
|
||||
await page.loginAndModule('buyer', 'travel');
|
||||
await page.accessToSearchResult('1');
|
||||
await page.write(selectors.travelIndex.generalSearchFilter, '1');
|
||||
|
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForState('travel.card.summary');
|
||||
});
|
||||
|
||||
|
|
@ -81,7 +82,8 @@ describe('Travel descriptor path', () => {
|
|||
await page.waitToClick('.cancel');
|
||||
await page.waitToClick(selectors.globalItems.homeButton);
|
||||
await page.selectModule('travel');
|
||||
await page.accessToSearchResult('3');
|
||||
await page.write(selectors.travelIndex.generalSearchFilter, '3');
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForState('travel.card.summary');
|
||||
const state = await page.getState();
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ describe('Travel thermograph path', () => {
|
|||
browser = await getBrowser();
|
||||
page = browser.page;
|
||||
await page.loginAndModule('buyer', 'travel');
|
||||
await page.accessToSearchResult('3');
|
||||
await page.write(selectors.travelIndex.generalSearchFilter, '3');
|
||||
await page.keyboard.press('Enter');
|
||||
await page.accessToSection('travel.card.thermograph.index');
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
import selectors from '../../helpers/selectors.js';
|
||||
import getBrowser from '../../helpers/puppeteer';
|
||||
|
||||
describe('Travel search panel path', () => {
|
||||
let browser;
|
||||
let page;
|
||||
let httpRequest;
|
||||
|
||||
beforeAll(async() => {
|
||||
browser = await getBrowser();
|
||||
page = browser.page;
|
||||
await page.loginAndModule('buyer', 'travel');
|
||||
page.on('request', req => {
|
||||
if (req.url().includes(`Travels/filter`))
|
||||
httpRequest = req.url();
|
||||
});
|
||||
});
|
||||
|
||||
afterAll(async() => {
|
||||
await browser.close();
|
||||
});
|
||||
|
||||
it('should filter using all the fields', async() => {
|
||||
await page.click(selectors.travelIndex.chip);
|
||||
await page.write(selectors.travelIndex.generalSearchFilter, 'travel');
|
||||
await page.keyboard.press('Enter');
|
||||
|
||||
expect(httpRequest).toContain('search=travel');
|
||||
|
||||
await page.click(selectors.travelIndex.chip);
|
||||
await page.autocompleteSearch(selectors.travelIndex.agencyFilter, 'Entanglement');
|
||||
|
||||
expect(httpRequest).toContain('agencyModeFk');
|
||||
|
||||
await page.click(selectors.travelIndex.chip);
|
||||
await page.autocompleteSearch(selectors.travelIndex.warehouseOutFilter, 'Warehouse One');
|
||||
|
||||
expect(httpRequest).toContain('warehouseOutFk');
|
||||
|
||||
await page.click(selectors.travelIndex.chip);
|
||||
await page.autocompleteSearch(selectors.travelIndex.warehouseInFilter, 'Warehouse Two');
|
||||
|
||||
expect(httpRequest).toContain('warehouseInFk');
|
||||
|
||||
await page.click(selectors.travelIndex.chip);
|
||||
await page.overwrite(selectors.travelIndex.scopeDaysFilter, '15');
|
||||
await page.keyboard.press('Enter');
|
||||
|
||||
expect(httpRequest).toContain('scopeDays=15');
|
||||
|
||||
await page.click(selectors.travelIndex.chip);
|
||||
await page.autocompleteSearch(selectors.travelIndex.continentFilter, 'Asia');
|
||||
|
||||
expect(httpRequest).toContain('continent');
|
||||
|
||||
await page.click(selectors.travelIndex.chip);
|
||||
await page.write(selectors.travelIndex.totalEntriesFilter, '1');
|
||||
await page.keyboard.press('Enter');
|
||||
|
||||
expect(httpRequest).toContain('totalEntries=1');
|
||||
});
|
||||
});
|
||||
|
|
@ -26,7 +26,7 @@ Value should have at most %s characters: El valor debe tener un máximo de %s ca
|
|||
Enter a new search: Introduce una nueva búsqueda
|
||||
No results: Sin resultados
|
||||
Ups! It seems there was an error: ¡Vaya! Parece que ha habido un error
|
||||
General search: Busqueda general
|
||||
General search: Búsqueda general
|
||||
January: Enero
|
||||
February: Febrero
|
||||
March: Marzo
|
||||
|
|
@ -42,9 +42,9 @@ December: Diciembre
|
|||
Monday: Lunes
|
||||
Tuesday: Martes
|
||||
Wednesday: Miércoles
|
||||
Thursday: Jueves
|
||||
Friday: Viernes
|
||||
Saturday: Sábado
|
||||
Thursday: Jueves
|
||||
Friday: Viernes
|
||||
Saturday: Sábado
|
||||
Sunday: Domingo
|
||||
Has delivery: Hay reparto
|
||||
Loading: Cargando
|
||||
|
|
@ -63,4 +63,4 @@ Loading...: Cargando...
|
|||
No results found: Sin resultados
|
||||
No data: Sin datos
|
||||
Undo changes: Deshacer cambios
|
||||
Load more results: Cargar más resultados
|
||||
Load more results: Cargar más resultados
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
$font-size: 11pt;
|
||||
$menu-width: 256px;
|
||||
$right-menu-width: 318px;
|
||||
$topbar-height: 56px;
|
||||
$mobile-width: 800px;
|
||||
$float-spacing: 20px;
|
||||
|
|
|
|||
|
|
@ -88,13 +88,13 @@ vn-layout {
|
|||
}
|
||||
&.right-menu {
|
||||
& > vn-topbar > .end {
|
||||
width: 80px + $menu-width;
|
||||
width: 80px + $right-menu-width;
|
||||
}
|
||||
& > .main-view {
|
||||
padding-right: $menu-width;
|
||||
padding-right: $right-menu-width;
|
||||
}
|
||||
[fixed-bottom-right] {
|
||||
right: $menu-width;
|
||||
right: $right-menu-width;
|
||||
}
|
||||
}
|
||||
& > .main-view {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@ Phy. KG: KG físico
|
|||
Vol. KG: KG Vol.
|
||||
Search by travel id or reference: Buscar por id de travel o referencia
|
||||
Search by extra community travel: Buscar por envío extra comunitario
|
||||
Continent Out: Continente salida
|
||||
Continent Out: Cont. salida
|
||||
W. Shipped: F. envío
|
||||
W. Landed: F. llegada
|
||||
W. Landed: F. llegada
|
||||
|
|
|
|||
|
|
@ -2,6 +2,15 @@
|
|||
<vn-auto-search
|
||||
model="model">
|
||||
</vn-auto-search>
|
||||
<vn-travel-search-panel
|
||||
model="model">
|
||||
</vn-travel-search-panel>
|
||||
<vn-crud-model
|
||||
vn-id="model"
|
||||
url="Travels/filter"
|
||||
limit="20"
|
||||
order="shipped DESC, landed DESC">
|
||||
</vn-crud-model>
|
||||
<vn-data-viewer
|
||||
model="model"
|
||||
class="vn-mb-xl vn-w-xl">
|
||||
|
|
@ -9,23 +18,22 @@
|
|||
<vn-table model="model">
|
||||
<vn-thead>
|
||||
<vn-tr>
|
||||
<vn-th field="id" number filter-enabled="false">Id</vn-th>
|
||||
<vn-th field="ref">Reference</vn-th>
|
||||
<vn-th field="agencyModeFk">Agency</vn-th>
|
||||
<vn-th field="warehouseOutFk">Warehouse Out</vn-th>
|
||||
<vn-th field="shipped" center shrink-date>Shipped</vn-th>
|
||||
<vn-th field="isDelivered" center>Delivered</vn-th>
|
||||
<vn-th shrink></vn-th>
|
||||
<vn-th field="warehouseInFk">Warehouse In</vn-th>
|
||||
<vn-th field="landed" center shrink-date>Landed</vn-th>
|
||||
<vn-th field="isReceived" center>Received</vn-th>
|
||||
<vn-th shrink></vn-th>
|
||||
<vn-th shrink field="totalEntries">Total entries</vn-th>
|
||||
<vn-th shrink></vn-th>
|
||||
</vn-tr>
|
||||
</vn-thead>
|
||||
<vn-tbody>
|
||||
<a ng-repeat="travel in model.data"
|
||||
<a ng-repeat="travel in model.data"
|
||||
class="clickable vn-tr search-result"
|
||||
ui-sref="travel.card.summary({id: {{::travel.id}}})">
|
||||
<vn-td number>{{::travel.id}}</vn-td>
|
||||
<vn-td>{{::travel.ref}}</vn-td>
|
||||
<vn-td>{{::travel.agencyModeName}}</vn-td>
|
||||
<vn-td>{{::travel.warehouseOutName}}</vn-td>
|
||||
|
|
@ -34,14 +42,27 @@
|
|||
{{::travel.shipped | date:'dd/MM/yyyy'}}
|
||||
</span>
|
||||
</vn-td>
|
||||
<vn-td center><vn-check ng-model="travel.isDelivered" disabled="true"></vn-check></vn-td>
|
||||
<vn-td shrink>
|
||||
<vn-icon
|
||||
icon="flight_takeoff"
|
||||
translate-attr="{title: 'Delivered'}"
|
||||
ng-class="{active: travel.isDelivered}">
|
||||
</vn-icon>
|
||||
</vn-td>
|
||||
<vn-td expand>{{::travel.warehouseInName}}</vn-td>
|
||||
<vn-td center shrink-date>
|
||||
<span class="chip {{$ctrl.compareDate(travel.landed)}}">
|
||||
{{::travel.landed | date:'dd/MM/yyyy'}}
|
||||
</span>
|
||||
</vn-td>
|
||||
<vn-td center><vn-check ng-model="travel.isReceived" disabled="true"></vn-check></vn-td>
|
||||
<vn-td shrink>
|
||||
<vn-icon
|
||||
icon="flight_land"
|
||||
translate-attr="{title: 'Received'}"
|
||||
ng-class="{active: travel.isReceived}">
|
||||
</vn-icon>
|
||||
</vn-td>
|
||||
<vn-td shrink>{{::travel.totalEntries}}</vn-td>
|
||||
<vn-td shrink>
|
||||
<vn-horizontal class="buttons">
|
||||
<vn-icon-button
|
||||
|
|
@ -49,7 +70,7 @@
|
|||
vn-tooltip="Clone"
|
||||
icon="icon-clone">
|
||||
</vn-icon-button>
|
||||
<vn-icon-button
|
||||
<vn-icon-button
|
||||
vn-anchor="::{state: 'entry.create', params: {travelFk: travel.id}}"
|
||||
vn-tooltip="Add entry"
|
||||
icon="icon-ticket">
|
||||
|
|
@ -78,38 +99,9 @@
|
|||
fixed-bottom-right>
|
||||
<vn-float-button icon="add"></vn-float-button>
|
||||
</a>
|
||||
<vn-confirm
|
||||
<vn-confirm
|
||||
vn-id="clone"
|
||||
on-accept="$ctrl.onCloneAccept($data)"
|
||||
question="Do you want to clone this travel?"
|
||||
message="All it's properties will be copied">
|
||||
</vn-confirm>
|
||||
<vn-contextmenu vn-id="contextmenu" targets="['vn-data-viewer']" model="model"
|
||||
expr-builder="$ctrl.exprBuilder(param, value)">
|
||||
<slot-menu>
|
||||
<vn-item translate
|
||||
ng-if="contextmenu.isFilterAllowed()"
|
||||
ng-click="contextmenu.filterBySelection()">
|
||||
Filter by selection
|
||||
</vn-item>
|
||||
<vn-item translate
|
||||
ng-if="contextmenu.isFilterAllowed()"
|
||||
ng-click="contextmenu.excludeSelection()">
|
||||
Exclude selection
|
||||
</vn-item>
|
||||
<vn-item translate
|
||||
ng-if="contextmenu.isFilterAllowed()"
|
||||
ng-click="contextmenu.removeFilter()">
|
||||
Remove filter
|
||||
</vn-item>
|
||||
<vn-item translate
|
||||
ng-click="contextmenu.removeAllFilters()" >
|
||||
Remove all filters
|
||||
</vn-item>
|
||||
<vn-item translate
|
||||
ng-if="contextmenu.isActionAllowed()"
|
||||
ng-click="contextmenu.copyValue()">
|
||||
Copy value
|
||||
</vn-item>
|
||||
</slot-menu>
|
||||
</vn-contextmenu>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import ngModule from '../module';
|
||||
import Section from 'salix/components/section';
|
||||
import './style.scss';
|
||||
|
||||
export default class Controller extends Section {
|
||||
preview(travel) {
|
||||
|
|
@ -30,37 +31,6 @@ export default class Controller extends Section {
|
|||
if (timeDifference == 0) return 'warning';
|
||||
if (timeDifference < 0) return 'success';
|
||||
}
|
||||
|
||||
exprBuilder(param, value) {
|
||||
switch (param) {
|
||||
case 'search':
|
||||
return /^\d+$/.test(value)
|
||||
? {'t.id': value}
|
||||
: {'t.ref': {like: `%${value}%`}};
|
||||
case 'ref':
|
||||
return {'t.ref': {like: `%${value}%`}};
|
||||
case 'shipped':
|
||||
return {'t.shipped': {between: this.dateRange(value)}};
|
||||
case 'landed':
|
||||
return {'t.landed': {between: this.dateRange(value)}};
|
||||
case 'id':
|
||||
case 'agencyModeFk':
|
||||
case 'warehouseOutFk':
|
||||
case 'warehouseInFk':
|
||||
case 'totalEntries':
|
||||
param = `t.${param}`;
|
||||
return {[param]: value};
|
||||
}
|
||||
}
|
||||
|
||||
dateRange(value) {
|
||||
const minHour = new Date(value);
|
||||
minHour.setHours(0, 0, 0, 0);
|
||||
const maxHour = new Date(value);
|
||||
maxHour.setHours(23, 59, 59, 59);
|
||||
|
||||
return [minHour, maxHour];
|
||||
}
|
||||
}
|
||||
|
||||
ngModule.vnComponent('vnTravelIndex', {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
@import "variables";
|
||||
|
||||
vn-travel-index {
|
||||
vn-icon {
|
||||
color: $color-font-secondary
|
||||
}
|
||||
|
||||
vn-icon.active {
|
||||
color: $color-success
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
#Ordenar alfabeticamente
|
||||
Reference: Referencia
|
||||
Warehouse Out: Almacén salida
|
||||
Warehouse In: Almacén llegada
|
||||
Warehouse Out: Alm salida
|
||||
Warehouse In: Alm llegada
|
||||
Shipped from: Salida desde
|
||||
Shipped to: Salida hasta
|
||||
Landed from: Llegada desde
|
||||
|
|
@ -10,12 +10,12 @@ Shipped: F. salida
|
|||
Landed: F. llegada
|
||||
Delivered: Enviado
|
||||
Received: Recibido
|
||||
Travel id: Id envío
|
||||
Search travels by id: Buscar envíos por identificador
|
||||
Travel id: Id
|
||||
Search travels by id: Buscar envíos por identificador o referencia
|
||||
New travel: Nuevo envío
|
||||
travel: envío
|
||||
|
||||
# Sections
|
||||
Travels: Envíos
|
||||
Log: Historial
|
||||
Thermographs: Termógrafos
|
||||
Thermographs: Termógrafos
|
||||
|
|
|
|||
|
|
@ -1,20 +1,6 @@
|
|||
<vn-crud-model
|
||||
vn-id="model"
|
||||
url="Travels/filter"
|
||||
limit="20"
|
||||
order="shipped DESC, landed DESC">
|
||||
</vn-crud-model>
|
||||
<vn-portal slot="topbar">
|
||||
<vn-searchbar
|
||||
vn-focus
|
||||
panel="vn-travel-search-panel"
|
||||
info="Search travels by id"
|
||||
model="model"
|
||||
fetch-params="$ctrl.fetchParams($params)"
|
||||
suggested-filter="$ctrl.filterParams">
|
||||
</vn-searchbar>
|
||||
</vn-portal>
|
||||
<vn-portal slot="menu">
|
||||
<vn-left-menu></vn-left-menu>
|
||||
</vn-portal>
|
||||
<ui-view></ui-view>
|
||||
<ui-view></ui-view>
|
||||
|
|
|
|||
|
|
@ -4,28 +4,6 @@ import ModuleMain from 'salix/components/module-main';
|
|||
export default class Travel extends ModuleMain {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.filterParams = {
|
||||
scopeDays: 1
|
||||
};
|
||||
}
|
||||
|
||||
fetchParams($params) {
|
||||
if (!Object.entries($params).length)
|
||||
$params.scopeDays = 1;
|
||||
|
||||
if (typeof $params.scopeDays === 'number') {
|
||||
const shippedFrom = Date.vnNew();
|
||||
shippedFrom.setHours(0, 0, 0, 0);
|
||||
|
||||
const shippedTo = new Date(shippedFrom.getTime());
|
||||
shippedTo.setDate(shippedTo.getDate() + $params.scopeDays);
|
||||
shippedTo.setHours(23, 59, 59, 999);
|
||||
|
||||
Object.assign($params, {shippedFrom, shippedTo});
|
||||
}
|
||||
|
||||
return $params;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
import './index.js';
|
||||
|
||||
describe('Travel Component vnTravel', () => {
|
||||
let controller;
|
||||
|
||||
beforeEach(ngModule('travel'));
|
||||
|
||||
beforeEach(inject($componentController => {
|
||||
let $element = angular.element(`<div></div>`);
|
||||
controller = $componentController('vnTravel', {$element});
|
||||
}));
|
||||
|
||||
describe('fetchParams()', () => {
|
||||
it('should return a range of dates with passed scope days', () => {
|
||||
let params = controller.fetchParams({
|
||||
scopeDays: 2
|
||||
});
|
||||
const shippedFrom = Date.vnNew();
|
||||
shippedFrom.setHours(0, 0, 0, 0);
|
||||
const shippedTo = new Date(shippedFrom.getTime());
|
||||
shippedTo.setDate(shippedTo.getDate() + params.scopeDays);
|
||||
shippedTo.setHours(23, 59, 59, 999);
|
||||
|
||||
const expectedParams = {
|
||||
shippedFrom,
|
||||
scopeDays: params.scopeDays,
|
||||
shippedTo
|
||||
};
|
||||
|
||||
expect(params).toEqual(expectedParams);
|
||||
});
|
||||
|
||||
it('should return default value for scope days', () => {
|
||||
let params = controller.fetchParams({
|
||||
scopeDays: 1
|
||||
});
|
||||
|
||||
expect(params.scopeDays).toEqual(1);
|
||||
});
|
||||
|
||||
it('should return the given scope days', () => {
|
||||
let params = controller.fetchParams({
|
||||
scopeDays: 2
|
||||
});
|
||||
|
||||
expect(params.scopeDays).toEqual(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,109 +1,146 @@
|
|||
<div class="search-panel">
|
||||
<form ng-submit="$ctrl.onSearch()" id="manifold-form">
|
||||
<vn-horizontal class="vn-px-lg vn-pt-lg">
|
||||
<vn-textfield
|
||||
vn-one
|
||||
label="General search"
|
||||
ng-model="filter.search"
|
||||
info="Search travels by id"
|
||||
vn-focus>
|
||||
</vn-textfield>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal class="vn-px-lg">
|
||||
<vn-textfield
|
||||
vn-one
|
||||
label="Reference"
|
||||
ng-model="filter.ref">
|
||||
</vn-textfield>
|
||||
<vn-textfield
|
||||
vn-one
|
||||
label="Total entries"
|
||||
ng-model="filter.totalEntries">
|
||||
</vn-textfield>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal class="vn-px-lg">
|
||||
<vn-textfield
|
||||
vn-one
|
||||
label="Travel id"
|
||||
ng-model="filter.id">
|
||||
</vn-textfield>
|
||||
<vn-autocomplete vn-one
|
||||
label="Agency"
|
||||
ng-model="filter.agencyModeFk"
|
||||
url="AgencyModes"
|
||||
show-field="name"
|
||||
value-field="id">
|
||||
</vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
<section class="vn-px-md">
|
||||
<vn-horizontal class="manifold-panel vn-pa-md">
|
||||
<vn-date-picker
|
||||
vn-one
|
||||
label="Shipped from"
|
||||
ng-model="filter.shippedFrom"
|
||||
on-change="$ctrl.shippedFrom = value">
|
||||
</vn-date-picker>
|
||||
<vn-date-picker
|
||||
vn-one
|
||||
label="Shipped to"
|
||||
ng-model="filter.shippedTo"
|
||||
on-change="$ctrl.shippedTo = value">
|
||||
</vn-date-picker>
|
||||
<vn-none class="or vn-px-md" translate>Or</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-date-picker
|
||||
vn-one
|
||||
label="Landed from"
|
||||
ng-model="filter.landedFrom">
|
||||
</vn-date-picker>
|
||||
<vn-date-picker
|
||||
vn-one
|
||||
label="Landed to"
|
||||
ng-model="filter.landedTo">
|
||||
</vn-date-picker>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal class="vn-px-lg">
|
||||
<vn-autocomplete vn-one
|
||||
label="Warehouse Out"
|
||||
ng-model="filter.warehouseOutFk"
|
||||
url="Warehouses"
|
||||
show-field="name"
|
||||
value-field="id">
|
||||
</vn-autocomplete>
|
||||
<vn-autocomplete vn-one
|
||||
label="Warehouse In"
|
||||
ng-model="filter.warehouseInFk"
|
||||
url="Warehouses"
|
||||
show-field="name"
|
||||
value-field="id">
|
||||
</vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal class="vn-px-lg">
|
||||
<vn-autocomplete vn-one
|
||||
label="Continent Out"
|
||||
ng-model="filter.continent"
|
||||
url="Continents"
|
||||
show-field="name"
|
||||
value-field="code">
|
||||
</vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal class="vn-px-lg vn-pb-lg vn-mt-lg">
|
||||
<vn-submit label="Search"></vn-submit>
|
||||
</vn-horizontal>
|
||||
</form>
|
||||
</div>
|
||||
<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-autocomplete
|
||||
vn-id="agency"
|
||||
label="Agency"
|
||||
ng-model="$ctrl.filter.agencyModeFk"
|
||||
data="$ctrl.agencyModes"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
on-change="$ctrl.applyFilters()">
|
||||
</vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal class="input horizontal">
|
||||
<vn-autocomplete
|
||||
vn-id="warehouseOut"
|
||||
label="Warehouse Out"
|
||||
ng-model="$ctrl.filter.warehouseOutFk"
|
||||
data="$ctrl.warehouses"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
on-change="$ctrl.applyFilters()">
|
||||
</vn-autocomplete>
|
||||
<vn-autocomplete
|
||||
vn-id="warehouseIn"
|
||||
label="Warehouse In"
|
||||
ng-model="$ctrl.filter.warehouseInFk"
|
||||
data="$ctrl.warehouses"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
on-change="$ctrl.applyFilters()">
|
||||
</vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal class="input horizontal">
|
||||
<vn-input-number
|
||||
min="0"
|
||||
step="1"
|
||||
label="Days onward"
|
||||
ng-model="$ctrl.filter.scopeDays"
|
||||
on-change="$ctrl.applyFilters()"
|
||||
display-controls="true"
|
||||
info="Cannot choose a range of dates and days onward at the same time">
|
||||
</vn-input-number>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal class="input horizontal">
|
||||
<vn-date-picker
|
||||
label="Landed from"
|
||||
ng-model="$ctrl.filter.landedFrom"
|
||||
on-change="$ctrl.applyFilters()">
|
||||
</vn-date-picker>
|
||||
<vn-date-picker
|
||||
label="Landed to"
|
||||
ng-model="$ctrl.filter.landedTo"
|
||||
on-change="$ctrl.applyFilters()">
|
||||
</vn-date-picker>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal class="input horizontal">
|
||||
<vn-autocomplete
|
||||
vn-id="continent"
|
||||
label="Continent Out"
|
||||
ng-model="$ctrl.filter.continent"
|
||||
data="$ctrl.continents"
|
||||
show-field="name"
|
||||
value-field="code"
|
||||
on-change="$ctrl.applyFilters()">
|
||||
</vn-autocomplete>
|
||||
<vn-input-number
|
||||
min="0"
|
||||
label="Total entries"
|
||||
ng-model="$ctrl.totalEntries"
|
||||
ng-keydown="$ctrl.onKeyPress($event, 'totalEntries')">
|
||||
</vn-input-number>
|
||||
</vn-horizontal>
|
||||
<div class="chips">
|
||||
joan
commented
Els tags ho podríes automatitzar obtinguent les claus dels params aplicats al objecte filter Exemple: En Lilium ho fa aixi Els tags ho podríes automatitzar obtinguent les claus dels params aplicats al objecte filter
Exemple:
```
Object.keys($ctrl.filter).map(tag => ({
label: tag,
value: $ctrl.filter[tag]
}))
```
En Lilium ho fa aixi
https://gitea.verdnatura.es/verdnatura/salix-front/src/branch/dev/src/components/ui/VnFilterPanel.vue#L70
alexandre
commented
Es que si ho feia d'ixa forma hi havia valors que no podia mostrar en els chips com els noms dels warehouses o els continents perque ho havia d'agafar del selection en el autocomplete, no del filter Es que si ho feia d'ixa forma hi havia valors que no podia mostrar en els chips com els noms dels warehouses o els continents perque ho havia d'agafar del selection en el autocomplete, no del filter
|
||||
<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="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="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>
|
||||
<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="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.totalEntries"
|
||||
removable="true"
|
||||
on-remove="$ctrl.removeParamFilter('totalEntries')"
|
||||
class="colored">
|
||||
<span>{{$ctrl.$t('Total entries')}}: {{$ctrl.filter.totalEntries}}</span>
|
||||
</vn-chip>
|
||||
</div>
|
||||
</vn-side-menu>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,69 @@
|
|||
import ngModule from '../module';
|
||||
import SearchPanel from 'core/components/searchbar/search-panel';
|
||||
import './style.scss';
|
||||
|
||||
class Controller extends SearchPanel {
|
||||
constructor($, $element) {
|
||||
super($, $element);
|
||||
this.filter = this.$.filter;
|
||||
this.initFilter();
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
get shippedFrom() {
|
||||
return this._shippedFrom;
|
||||
$onChanges() {
|
||||
if (this.model)
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
set shippedFrom(value) {
|
||||
this._shippedFrom = value;
|
||||
this.filter.scopeDays = null;
|
||||
fetchData() {
|
||||
this.$http.get('AgencyModes').then(res => {
|
||||
this.agencyModes = res.data;
|
||||
});
|
||||
this.$http.get('Warehouses').then(res => {
|
||||
this.warehouses = res.data;
|
||||
});
|
||||
this.$http.get('Continents').then(res => {
|
||||
this.continents = res.data;
|
||||
});
|
||||
}
|
||||
|
||||
get shippedTo() {
|
||||
return this._shippedTo;
|
||||
initFilter() {
|
||||
this.filter = {};
|
||||
if (this.$params.q) {
|
||||
this.filter = JSON.parse(this.$params.q);
|
||||
this.search = this.filter.search;
|
||||
this.totalEntries = this.filter.totalEntries;
|
||||
}
|
||||
if (!this.filter.scopeDays) this.filter.scopeDays = 7;
|
||||
}
|
||||
|
||||
set shippedTo(value) {
|
||||
this._shippedTo = value;
|
||||
this.filter.scopeDays = null;
|
||||
applyFilters(param) {
|
||||
this.model.applyFilter({}, this.filter)
|
||||
.then(() => {
|
||||
if (param && this.model._orgData.length === 1)
|
||||
this.$state.go('travel.card.summary', {id: this.model._orgData[0].id});
|
||||
else
|
||||
this.$state.go(this.$state.current.name, {q: JSON.stringify(this.filter)}, {location: 'replace'});
|
||||
});
|
||||
}
|
||||
|
||||
get scopeDays() {
|
||||
return this._scopeDays;
|
||||
removeParamFilter(param) {
|
||||
if (this[param]) delete this[param];
|
||||
delete this.filter[param];
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
set scopeDays(value) {
|
||||
this._scopeDays = value;
|
||||
|
||||
this.filter.shippedFrom = null;
|
||||
this.filter.shippedTo = null;
|
||||
onKeyPress($event, param) {
|
||||
if ($event.key === 'Enter') {
|
||||
this.filter[param] = this[param];
|
||||
this.applyFilters(param === 'search');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngModule.vnComponent('vnTravelSearchPanel', {
|
||||
template: require('./index.html'),
|
||||
controller: Controller
|
||||
controller: Controller,
|
||||
bindings: {
|
||||
model: '<'
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,41 +8,31 @@ describe('Travel Component vnTravelSearchPanel', () => {
|
|||
beforeEach(inject($componentController => {
|
||||
controller = $componentController('vnTravelSearchPanel', {$element: null});
|
||||
controller.$t = () => {};
|
||||
controller.filter = {};
|
||||
}));
|
||||
|
||||
describe('shippedFrom() setter', () => {
|
||||
it('should clear the scope days when setting the from property', () => {
|
||||
controller.filter.scopeDays = 1;
|
||||
describe('applyFilters()', () => {
|
||||
it('should apply filters', async() => {
|
||||
controller.filter = {foo: 'bar'};
|
||||
controller.model = {
|
||||
applyFilter: jest.fn().mockResolvedValue(),
|
||||
_orgData: [{id: 1}]
|
||||
};
|
||||
controller.$state = {
|
||||
current: {
|
||||
name: 'foo'
|
||||
},
|
||||
go: jest.fn()
|
||||
};
|
||||
|
||||
controller.shippedFrom = Date.vnNew();
|
||||
await controller.applyFilters(true);
|
||||
|
||||
expect(controller.filter.scopeDays).toBeNull();
|
||||
expect(controller.shippedFrom).toBeDefined();
|
||||
});
|
||||
});
|
||||
expect(controller.model.applyFilter).toHaveBeenCalledWith({}, controller.filter);
|
||||
expect(controller.$state.go).toHaveBeenCalledWith('travel.card.summary', {id: 1});
|
||||
|
||||
describe('shippedTo() setter', () => {
|
||||
it('should clear the scope days when setting the to property', () => {
|
||||
controller.filter.scopeDays = 1;
|
||||
await controller.applyFilters(false);
|
||||
|
||||
controller.shippedTo = Date.vnNew();
|
||||
|
||||
expect(controller.filter.scopeDays).toBeNull();
|
||||
expect(controller.shippedTo).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('scopeDays() setter', () => {
|
||||
it('should clear the date range when setting the scopeDays property', () => {
|
||||
controller.filter.shippedFrom = Date.vnNew();
|
||||
controller.filter.shippedTo = Date.vnNew();
|
||||
|
||||
controller.scopeDays = 1;
|
||||
|
||||
expect(controller.filter.shippedFrom).toBeNull();
|
||||
expect(controller.filter.shippedTo).toBeNull();
|
||||
expect(controller.scopeDays).toBeDefined();
|
||||
expect(controller.$state.go).toHaveBeenCalledWith(controller.$state.current.name,
|
||||
{q: JSON.stringify(controller.filter)}, {location: 'replace'});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
@import "variables";
|
||||
|
||||
vn-travel-search-panel vn-side-menu {
|
||||
.menu {
|
||||
min-width: $right-menu-width;
|
||||
}
|
||||
& > div {
|
||||
.input {
|
||||
padding-left: $spacing-md;
|
||||
padding-right: $spacing-md;
|
||||
border-color: $color-spacer;
|
||||
border-bottom: $border-thin;
|
||||
}
|
||||
.horizontal {
|
||||
padding-left: $spacing-md;
|
||||
padding-right: $spacing-md;
|
||||
grid-auto-flow: column;
|
||||
grid-column-gap: $spacing-sm;
|
||||
align-items: center;
|
||||
}
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $spacing-md;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
border-color: $color-spacer;
|
||||
}
|
||||
|
||||
.or {
|
||||
align-self: center;
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
color: $color-font-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
Reference: Referencia
|
||||
Warehouse In: Almacén entrada
|
||||
Warehouse Out: Almacén salida
|
||||
Warehouse In: Alm. entrada
|
||||
Warehouse Out: Alm. salida
|
||||
Shipped: F. envío
|
||||
Landed: F. entrega
|
||||
Total entries: Entradas totales
|
||||
Total entries: Ent. totales
|
||||
Delivered: Enviada
|
||||
Received: Recibida
|
||||
Agency: Agencia
|
||||
|
|
|
|||
Loading…
Reference in New Issue
També desapareix la barra de búsqueda general, aso es lo que es vol fer? No es pot buscar desde dins de la entitat
Me varen dir que ho posara tot el en el buscador de la dreta, encara aixina també vaig implementar per a que si al filtrar te troba un únic resultat que te redirigixca a ell