Merge pull request '2691 - Added "or" between date ranges and scope days' (#505) from 2691-ticket_scope_days into dev

Reviewed-on: #505
Reviewed-by: Carlos Jimenez Ruiz <carlosjr@verdnatura.es>

front/core/components/field/index.js

@@ -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'];

front/core/components/searchbar/search-panel.js

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

front/core/components/searchbar/style.scss

@@ -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
+            }
+        }
+    }
 }

modules/ticket/front/search-panel/index.html

@@ -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>

modules/ticket/front/search-panel/index.js

@@ -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', {

modules/ticket/front/search-panel/index.spec.js

@@ -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();
+        });
+    });
 });

modules/ticket/front/search-panel/locale/es.yml

@@ -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

modules/ticket/front/weekly/locale/es.yml

@@ -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