feat: allow "Select all" monitors on the maintenance page (#6528)
This commit is contained in:
commit
ebf1a5bb6f
@ -1149,6 +1149,8 @@
|
||||
"Money": "Money",
|
||||
"Scifi": "Scifi",
|
||||
"Clear": "Clear",
|
||||
"Select All": "Select All",
|
||||
"Deselect All": "Deselect All",
|
||||
"Elevator": "Elevator",
|
||||
"Guitar": "Guitar",
|
||||
"Pop": "Pop",
|
||||
|
||||
@ -28,13 +28,16 @@
|
||||
|
||||
<!-- Affected Monitors -->
|
||||
<h2 class="mt-5">{{ $t("Affected Monitors") }}</h2>
|
||||
{{ $t("affectedMonitorsDescription") }}
|
||||
|
||||
<div class="my-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div class="form-text">{{ $t("affectedMonitorsDescription") }}</div>
|
||||
</div>
|
||||
|
||||
<VueMultiselect
|
||||
id="affected_monitors"
|
||||
v-model="affectedMonitors"
|
||||
:options="affectedMonitorsOptions"
|
||||
:options="affectedMonitorsOptionsWithSelectAll"
|
||||
track-by="id"
|
||||
label="pathName"
|
||||
:multiple="true"
|
||||
@ -45,7 +48,16 @@
|
||||
:preselect-first="false"
|
||||
:max-height="600"
|
||||
:taggable="false"
|
||||
></VueMultiselect>
|
||||
@select="onMonitorSelect"
|
||||
@remove="onMonitorRemove"
|
||||
>
|
||||
<template #option="props">
|
||||
<span v-if="props.option.id === 'select-all'">
|
||||
{{ affectedMonitorsAllSelected ? $t('Deselect All') : $t('Select All') }}
|
||||
</span>
|
||||
<span v-else>{{ props.option.pathName }}</span>
|
||||
</template>
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
|
||||
<!-- Status pages to display maintenance info on -->
|
||||
@ -353,6 +365,21 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
affectedMonitorsOptionsWithSelectAll() {
|
||||
return [
|
||||
{
|
||||
id: "select-all",
|
||||
pathName: this.affectedMonitorsAllSelected ? this.$t("Deselect All") : this.$t("Select All")
|
||||
},
|
||||
...this.affectedMonitorsOptions
|
||||
];
|
||||
},
|
||||
|
||||
affectedMonitorsAllSelected() {
|
||||
return this.affectedMonitors.length > 0 &&
|
||||
this.affectedMonitors.length === this.affectedMonitorsOptions.length;
|
||||
},
|
||||
|
||||
pageName() {
|
||||
let name = "Schedule Maintenance";
|
||||
|
||||
@ -494,6 +521,24 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
onMonitorSelect(selectedOption) {
|
||||
if (selectedOption.id === "select-all") {
|
||||
this.affectedMonitors = this.affectedMonitors.filter(m => m.id !== "select-all");
|
||||
|
||||
if (this.affectedMonitorsAllSelected) {
|
||||
this.affectedMonitors = [];
|
||||
} else {
|
||||
this.affectedMonitors = this.affectedMonitorsOptions.slice();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onMonitorRemove(removedOption) {
|
||||
if (removedOption.id === "select-all") {
|
||||
this.affectedMonitors = this.affectedMonitors.filter(m => m.id !== "select-all");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Create new maintenance
|
||||
* @returns {Promise<void>}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user