feat: allow "Select all" monitors on the maintenance page (#6528)

src/lang/en.json

@@ -1149,6 +1149,8 @@
     "Money": "Money",
     "Scifi": "Scifi",
     "Clear": "Clear",
+    "Select All": "Select All",
+    "Deselect All": "Deselect All",
     "Elevator": "Elevator",
     "Guitar": "Guitar",
     "Pop": "Pop",

src/pages/EditMaintenance.vue

@@ -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>}