fixed issues on dates

frontend/src/components/Dashboard/DashboardDowntimes.vue

@@ -67,10 +67,29 @@ export const initialParams = {
     subStatus: ''
 };
 
-const convertToSec = (val) => {
+export const convertToSec = (val) => {
     return +new Date(val)/1000;
 };
 
+export const checkErrors = (params) => {
+    const { start, end } = 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';
+    }
+  
+    return errors;
+};
+
 export default {
     name: 'DashboardDowntimes',
     components: {
@@ -91,7 +110,7 @@ export default {
     created: function () {
         // Set start date
         const startDate = new Date();
-        startDate.setDate(-10);
+        startDate.setDate(startDate.getDate() - 30);
         startDate.setHours(0,0,0,0);
         this.params.start = startDate.toJSON();
 
@@ -106,9 +125,10 @@ export default {
         getDowntimes: async function (params = this.params) {
             const { start, end } = params;
 
-            this.checkFilterErrors();
+            const errors = checkErrors(this.params);
 
-            if (Object.keys(this.filterErrors).length > 0) {
+            if (Object.keys(errors).length > 0) {
+                this.filterErrors = Object.assign({}, errors);
                 return;
             }
 
@@ -142,24 +162,6 @@ export default {
 
             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) {
             const { name } = e.target;
 

frontend/src/forms/Downtime.vue

@@ -90,6 +90,12 @@
                   :config="config"
                   placeholder="Select Start Date"
                 />
+                <small
+                  v-if="errors.start"
+                  class="form-text text-danger"
+                >
+                  {{ errors.start }}
+                </small>
               </div>
               <div class="col-sm-6">
                 <FlatPickr
@@ -102,6 +108,12 @@
                   :config="config"
                   placeholder="Select End Date"
                 />
+                <small
+                  v-if="errors.end"
+                  class="form-text text-danger"
+                >
+                  {{ errors.end }}
+                </small>
               </div>
             </div>
             <small
@@ -128,6 +140,7 @@
               required
             >
             <small
+              v-if="errors.failures"
               class="form-text text-danger"
             >
               {{ errors.failures }}
@@ -144,7 +157,7 @@
           <div class="col-12">
             <button
               :disabled="isLoading || !isCreateDowntimeBtnEnabled()"
-              type="submit"
+              type="button"
               class="btn btn-success btn-block"
               @click.prevent="saveDowntime"
             >
@@ -162,6 +175,29 @@ import { mapState } from 'vuex';
 import Api from '../API';
 import FlatPickr from 'vue-flatpickr-component';
 import 'flatpickr/dist/flatpickr.css';
+import { convertToSec } from '../components/Dashboard/DashboardDowntimes.vue';
+
+const checkFormErrors = (value) => {
+    const { failures, start, end } = value;
+    const errors = {};
+    
+    // Converting into millisec
+    const startSec = convertToSec(start);
+    const endSec = convertToSec(end);
+
+    // Check for valid positive numbers
+    if (!(/^\d+$/.test(failures))) {
+        errors.failures = 'Enter Valid Positve Number without decimal point';
+    } else 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';
+    }
+
+    return errors;
+};
 
 export default {
     name: 'FormDowntime',
@@ -182,11 +218,11 @@ export default {
                 serviceId: '',
                 subStatus: 'degraded',
                 failures: 20,
-                start: new Date(),
-                end: new Date(),
+                start: new Date().toJSON(),
+                end: new Date().toJSON(),
             },
             config: {
-                altFormat: 'D, J M Y, \\at h:iK',
+                altFormat: 'J M, Y, h:iK',
                 altInput: true,
                 enableTime: true,
                 dateFormat: 'Z',
@@ -225,19 +261,9 @@ export default {
 
             return serviceId && subStatus && failures && start && end;
         },
-        checkFormErrors: function (value) {
-            const errors = {};
-
-            // Check for valid positive numbers
-            if (!(/^\d+$/.test(value.failures))) {
-                errors.failures = 'Enter Valid Positve Number without decimal point';
-            }
-
-            return errors;
-        },
         saveDowntime: async function () {
-            const errors = this.checkFormErrors(this.downtime);
             const id = this.$route.params.id;
+            const errors = checkFormErrors(this.downtime);
             
             // Check of invalid input.
             if (Object.keys(errors).length > 0) {

frontend/src/forms/DowntimeFilters.vue

@@ -42,7 +42,7 @@
                   value=""
                   :config="config"
                   placeholder="Select Start Date"
-                  @on-change="handleFilterChange({target: {name: 'start'}})"
+                  @on-change="() => handleFilterChange({target: {name: 'start'}})"
                 />
                 <small
                   v-if="filterErrors.start"
@@ -59,9 +59,9 @@
                   name="end"
                   class="form-control form-control-plaintext"
                   value=""
-                  :config="{...config, ...endConfig}"
+                  :config="config"
                   placeholder="Select End Date"
-                  @on-change="handleFilterChange({target: {name: 'end'}})"
+                  @on-change="() => handleFilterChange({target: {name: 'end'}})"
                 />
                 <small
                   v-if="filterErrors.end"
@@ -159,17 +159,14 @@ export default {
     data: function () {
         return {
             config: {
-                altFormat: 'D, J M Y',
+                altFormat: 'J M, Y',
                 altInput: true,
                 dateFormat: 'Z',
             },
         };
     },
     computed: {
-        ...mapState([ 'services' ]),
-        endConfig: function (){
-            return { minDate: this.params.start ? this.params.start : null };
-        }
+        ...mapState([ 'services' ])
     },
 };
 </script>