2691 - Scope days changes

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

@@ -1,6 +1,6 @@
 <div class="search-panel">
-    <form ng-submit="$ctrl.onSearch()">
+    <form id="ticket-form" ng-submit="$ctrl.onSearch()">
-        <vn-horizontal>
+        <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,33 @@
                 ng-model="filter.orderFk">
             </vn-textfield>
         </vn-horizontal>
-        <vn-horizontal>
+        <section class="vn-px-md">
-            <vn-date-picker
+            <vn-horizontal class="scope-days vn-pa-md">
-                vn-one
+                <vn-date-picker
-                label="From"
+                    vn-one
-                ng-model="filter.from">
+                    label="From"
-            </vn-date-picker>
+                    ng-model="filter.from"
-            <vn-date-picker
+                    on-change="$ctrl.from = value">
-                vn-one
+                </vn-date-picker>
-                label="To"
+                <vn-date-picker
-                ng-model="filter.to">
+                    vn-one
-            </vn-date-picker>
+                    label="To"
-            <vn-input-number
+                    ng-model="filter.to"
-                vn-one
+                    on-change="$ctrl.to = value">
-                min="0"
+                </vn-date-picker>
-                step="1"
+                <vn-none class="or vn-px-md">O</vn-none>
-                label="Days onward"
+                <vn-input-number
-                ng-model="filter.scopeDays"
+                    vn-one
-                display-controls="true">
+                    min="0"
-            </vn-input-number>
+                    step="1"
-        </vn-horizontal>
+                    label="Days onward"
-        <vn-horizontal>
+                    ng-model="filter.scopeDays"
+                    on-change="$ctrl.scopeDays = value"
+                    display-controls="true">
+                </vn-input-number>
+            </vn-horizontal>
+        </section>
+        <vn-horizontal class="vn-px-lg">
             <vn-textfield
                 vn-one
                 label="Nickname"
@@ -63,7 +69,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 +93,7 @@
                 </tpl-item>
             </vn-autocomplete>
         </vn-horizontal>
-        <vn-horizontal>
+        <vn-horizontal class="vn-px-lg">
             <vn-autocomplete
                 vn-one
                 label="Warehouse"
@@ -101,7 +107,7 @@
                 url="Provinces">
             </vn-autocomplete>
         </vn-horizontal>
-        <vn-horizontal>
+        <vn-horizontal class="vn-px-lg">
             <vn-check
                 vn-one
                 label="My team"
@@ -121,7 +127,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,12 @@
 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.getGroupedStates();
     }
 
@@ -19,6 +23,37 @@ 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/style.scss

@@ -0,0 +1,22 @@
+@import "./effects";
+@import "./variables";
+
+
+form#ticket-form {
+    padding: 0
+}
+
+.scope-days {
+    border: $border-thin-light;
+    text-align: right;
+
+    & > p {
+        font-size: 1.2rem;
+        margin: 3px;
+    }
+
+    .or {
+        font-weight: bold;
+        font-size: 26px
+    }
+}