Added scope days and test

modules/item/front/request-search-panel/index.html

@@ -1,6 +1,6 @@
 <div class="search-panel">
-    <form class="vn-pa-lg" ng-submit="$ctrl.onSearch()">
+    <form id="manifold-form" ng-submit="$ctrl.onSearch()">
-        <vn-horizontal>
+        <vn-horizontal class="vn-px-lg vn-pt-lg">
             <vn-textfield
                 vn-one
                 label="General search"
@@ -8,7 +8,7 @@
                 vn-focus>
             </vn-textfield>
         </vn-horizontal>
-        <vn-horizontal>
+        <vn-horizontal class="vn-px-lg">
             <vn-textfield
                 vn-one
                 label="Ticket id"
@@ -25,7 +25,7 @@
                 <tpl-item>{{nickname}}</tpl-item>
             </vn-autocomplete>
         </vn-horizontal>
-        <vn-horizontal>
+        <vn-horizontal class="vn-px-lg">
             <vn-textfield
                 vn-one
                 label="Client id"
@@ -38,19 +38,37 @@
                 url="Warehouses">
             </vn-autocomplete>
         </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">
+                ng-model="filter.from"
+                on-change="$ctrl.from = value">
             </vn-date-picker>
             <vn-date-picker
                 vn-one
                 label="To"
-                ng-model="filter.to">
+                ng-model="filter.to"
+                on-change="$ctrl.to = 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>
-        <vn-horizontal>
+    </section>
+        <vn-horizontal class="vn-px-lg">
             <vn-check vn-one 
                 triple-state="true" 
                 label="For me" 
@@ -65,7 +83,7 @@
                 <tpl-item>{{name}}</tpl-item>
             </vn-autocomplete>
         </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/item/front/request-search-panel/index.js

@@ -11,6 +11,35 @@ class Controller extends SearchPanel {
             {code: 'denied', name: this.$t('Denied')}
         ];
     }
+
+    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('vnRequestSearchPanel', {

modules/item/front/request-search-panel/index.spec.js

@@ -0,0 +1,48 @@
+import './index';
+
+describe(' Component vnRequestSearchPanel', () => {
+    let controller;
+
+    beforeEach(ngModule('item'));
+
+    beforeEach(inject($componentController => {
+        controller = $componentController('vnRequestSearchPanel', {$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();
+        });
+    });
+});

modules/item/front/request/index.html

@@ -10,9 +10,9 @@
 <vn-portal slot="topbar">
     <vn-searchbar
         panel="vn-request-search-panel"
-        suggested-filter="$ctrl.filterParams"
         info="Search request by id or alias"
         filter="$ctrl.filterParams"
+        fetch-params="$ctrl.fetchParams($params)"
         model="model"
         auto-state="false">
     </vn-searchbar>

modules/item/front/request/index.js

@@ -16,13 +16,31 @@ export default class Controller extends Section {
 
             this.filterParams = {
                 mine: true,
-                from: today,
+                to: today,
-                to: nextWeek,
+                from: nextWeek,
                 state: 'pending'
             };
         }
     }
 
+    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;
+    }
+
     getState(isOk) {
         if (isOk === null)
             return 'Pending';