fixed the date range filter error

frontend/src/components/Dashboard/DashboardDowntimes.vue

@@ -4,6 +4,8 @@
       :handle-clear-filters="handleClearFilters"
       :params="params"
       :handle-filter-search="handleFilterSearch"
+      :filter-errors="filterErrors"
+      :handle-filter-change="handleFilterChange"
     />
     
     <div class="card contain-card mb-4">
@@ -66,8 +68,8 @@ export const initialParams = {
 };
 
 const convertToSec = (val) => {
-    return +new Date(val)/1000
+    return +new Date(val)/1000;
-}
+};
 
 export default {
     name: 'DashboardDowntimes',
@@ -79,7 +81,8 @@ export default {
     data: function () {
         return {
             isLoading: false,
-            params: { ...initialParams }
+            params: { ...initialParams },
+            filterErrors: {}
         };
     },
     computed: {
@@ -92,15 +95,16 @@ export default {
         getDowntimes: async function (params = this.params) {
             const { start, end } = params;
 
-            let startSec = "", endSec = "";
+            this.checkFilterErrors();
 
-            if(start) {
+            if (Object.keys(this.filterErrors).length > 0) {
-              startSec = convertToSec(start);
+                return;
-            }
-            if(end) {
-              endSec = convertToSec(end);
             }
 
+            const startSec = convertToSec(start);
+            const endSec = convertToSec(end) + (60 * 60 * 23 + 59 * 60 + 59); // adding end of time for that particular date.
+        
+
             this.isLoading = true;
             await this.$store.dispatch({ type: 'getDowntimes', payload: { ...params, start: startSec, end: endSec } });
             this.isLoading = false;
@@ -120,6 +124,30 @@ export default {
             this.params = { ...this.params, skip: 0 };
 
             this.getDowntimes();
+        },
+        checkFilterErrors: function () {
+            const { start, end } = this.params;
+            const errors = {};
+
+            // Converting into millisec
+            const startSec = convertToSec(start);
+            const endSec = convertToSec(end) + (60 * 60 * 23 + 59 * 60 + 59);
+
+            if (!start && end) {
+                errors.start = 'Need to enter Start Date';
+            } else if (start && !end) {
+                errors.end = 'Need to enter End Date';
+            } else if ( startSec > endSec ) {
+                errors.end = 'End Date should be greater than Start Date';
+            }
+
+            this.filterErrors = Object.assign({}, errors);
+        },
+        handleFilterChange: function (e) {
+            // reset all the errors
+            const { name } = e.target;
+
+            delete this.filterErrors[name];
         }
     }
 };

frontend/src/forms/DowntimeFilters.vue

@@ -6,7 +6,7 @@
     <div class="card-body">
       <form>
         <div class="form-row">
-          <div class="form-group col-md-3">
+          <div class="form-group col-md-2">
             <label class="col-form-label">
               {{ $t('service') }}
             </label>
@@ -27,7 +27,7 @@
               </option>
             </select>
           </div>
-          <div class="form-group col-md-4">
+          <div class="form-group col-md-5">
             <label class="col-form-label">
               {{ $t('downtime_date_range') }}
             </label>
@@ -42,7 +42,14 @@
                   value=""
                   :config="config"
                   placeholder="Select Start Date"
+                  @on-change="handleFilterChange({target: {name: 'start'}})"
                 />
+                <small
+                  v-if="filterErrors.start"
+                  class="form-text text-danger"
+                >
+                  {{ filterErrors.start }}
+                </small>
               </div>
               <div class="col-sm-6">
                 <FlatPickr
@@ -52,9 +59,16 @@
                   name="end"
                   class="form-control form-control-plaintext"
                   value=""
-                  :config="config"
+                  :config="{...config, ...endConfig}"
                   placeholder="Select End Date"
+                  @on-change="handleFilterChange({target: {name: 'end'}})"
                 />
+                <small
+                  v-if="filterErrors.end"
+                  class="form-text text-danger"
+                >
+                  {{ filterErrors.end }}
+                </small>
               </div>
             </div>
           </div>
@@ -79,9 +93,12 @@
             </select>
           </div>
 
-          <div class="form-group col-md-3 d-flex align-items-end">
+          <div class="form-group col-md-3">
+            <label class="col-form-label invisible">
+              {{ $t('actions') }}
+            </label>
             <div
-              class="ml-auto"
+              class="d-flex justify-content-end"
               role="group"
             >
               <button
@@ -129,6 +146,14 @@ export default {
         handleFilterSearch: {
             type: Function,
             default: function () {}
+        },
+        filterErrors: {
+            type: Object,
+            default: null
+        },
+        handleFilterChange: {
+            type: Function,
+            default: function () {}
         }
     },
     data: function () {
@@ -137,12 +162,14 @@ export default {
                 altFormat: 'D, J M Y',
                 altInput: true,
                 dateFormat: 'Z',
-                maxDate: new Date()
             },
         };
     },
     computed: {
-        ...mapState([ 'services' ])
+        ...mapState([ 'services' ]),
+        endConfig: function (){
+            return { ...(this.params.start && { minDate: this.params.start }) };
+        }
     },
 };
 </script>