mirror of https://github.com/statping/statping
fixed the date range filter error
smit95tpatel
parent
a118ecbef1
commit
d0f427f436
|
|
@ -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: {
|
||||
|
|
@ -90,17 +93,18 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
getDowntimes: async function (params = this.params) {
|
||||
const {start, end} = params;
|
||||
const { start, end } = params;
|
||||
|
||||
let startSec = "", endSec = "";
|
||||
this.checkFilterErrors();
|
||||
|
||||
if(start) {
|
||||
startSec = convertToSec(start);
|
||||
}
|
||||
if(end) {
|
||||
endSec = convertToSec(end);
|
||||
if (Object.keys(this.filterErrors).length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
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];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -201,17 +201,17 @@ export default {
|
|||
}),
|
||||
},
|
||||
mounted: function () {
|
||||
if(this.editDowntime) {
|
||||
const { service_id, sub_status, failures, start, end } = this.editDowntime;
|
||||
if (this.editDowntime) {
|
||||
const { service_id, sub_status, failures, start, end } = this.editDowntime;
|
||||
|
||||
this.downtime = {
|
||||
start,
|
||||
end,
|
||||
failures,
|
||||
serviceId: service_id,
|
||||
subStatus: sub_status
|
||||
};
|
||||
}
|
||||
this.downtime = {
|
||||
start,
|
||||
end,
|
||||
failures,
|
||||
serviceId: service_id,
|
||||
subStatus: sub_status
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isCreateDowntimeBtnEnabled: function () {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue