DropdownMultiSelectButton improvements

frontend/src/components/DropdownMultiSelectButton.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="dropdown">
+    <button :id="dropdownId"
+            type="button"
+            class="btn dropdown-toggle"
+            :class="buttonClass"
+            data-bs-toggle="dropdown"
+            data-bs-auto-close="outside"
+            aria-expanded="false">
+      <slot></slot>
+    </button>
+    <ul class="dropdown-menu" :aria-labelledby="dropdownId">
+      <li class="px-2"
+          v-for="option in options"
+          :key="option.id">
+        <div class="form-check">
+          <input :id="'option'+option.id"
+                 type="checkbox"
+                 class="form-check-input"
+                 :value="option.id"
+                 v-model="selectedOptionIds">
+          <label class="form-check-label"
+                 :for="'option'+option.id">
+            {{ option.displayName }}
+          </label>
+        </div>
+      </li>
+      <li><hr class="dropdown-divider"></li>
+      <li class="px-2">
+        <div class="form-check">
+          <input id="optionAll"
+                 type="checkbox"
+                 class="form-check-input"
+                 v-model="selectAll">
+          <label class="form-check-label"
+                 for="optionAll">
+            Select all
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ResultType, SelectInputOptions } from "@/util/data";
+import IdGenerator from "@/util/id-generator";
+import { computed } from "vue";
+
+const props = withDefaults(defineProps<{
+  options: SelectInputOptions<ResultType>,
+  modelValue: ResultType[];
+  buttonClass?: string;
+}>(), {
+  buttonClass: 'btn-primary',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', newSelectedOptionIds: ResultType[]): void;
+}>();
+
+
+const dropdownId = IdGenerator.generateUniqueId('dropdownMultiSelect');
+
+const originalModelValues = props.modelValue;
+
+function isNotNil<T>(value: T | null | undefined): value is T {
+  return value != null;
+}
+
+const selectedOptionIds = computed<string[]>({
+  get() {
+    return props.modelValue.map(value => props.options.getOptionByValue(value)?.id).filter(isNotNil);
+  },
+  set(ids) {
+    emit('update:modelValue', ids.map(id => props.options.getOptionById(id)?.value).filter(isNotNil));
+  },
+});
+const selectAll = computed<boolean>({
+  get() {
+    return props.options.length === props.modelValue.length;
+  },
+  set(value) {
+    onSelectionChanged(value ? props.options.map(option => option.value) : originalModelValues);
+  },
+});
+
+
+function onSelectionChanged(newSelectedOptionIds: number[]): void {
+  emit('update:modelValue', newSelectedOptionIds);
+}
+</script>

frontend/src/views/surveyresults/SurveyResultsFull.vue

@@ -5,15 +5,15 @@
       <label class="form-check-label" for="filterBelowPopularityThreshold">Filter away anime below the popularity threshold (2%)</label>
     </div>
     <h3 class="section-title" id="tableSeries">Anime Series</h3>
-    <DropdownMultiSelect :items="tableDataOfSeries.columnsAsSelectorItems" v-model="tableDataOfSeries.visibleColumnTypes">
+    <DropdownMultiSelectButton :options="(tableDataOfSeries.columnsAsSelectorItems as SelectInputOptions<ResultType>)" v-model="tableDataOfSeries.visibleColumnTypes">
       Columns
-    </DropdownMultiSelect>
+    </DropdownMultiSelectButton>
     <FullResultsTable :columns="tableDataOfSeries.processedColumns" :entries="tableDataOfSeries.entries" isAnimeSeries/>
 
     <h3 class="section-title" id="tableSpecial">Anime OVAs / ONAs / Movies / Specials</h3>
-    <DropdownMultiSelect :items="tableDataOfSpecial.columnsAsSelectorItems" v-model="tableDataOfSpecial.visibleColumnTypes">
+    <DropdownMultiSelectButton :options="(tableDataOfSpecial.columnsAsSelectorItems as SelectInputOptions<ResultType>)" v-model="tableDataOfSpecial.visibleColumnTypes">
       Columns
-    </DropdownMultiSelect>
+    </DropdownMultiSelectButton>
     <FullResultsTable :columns="tableDataOfSpecial.processedColumns" :entries="tableDataOfSpecial.entries"/>
 
     <div class="row g-0">
@@ -29,8 +29,8 @@
 </template>
 
 <script setup lang="ts">
-import DropdownMultiSelect from '@/components/DropdownMultiSelect.vue';
-import { ResultType, type SelectorItem } from '@/util/data';
+import DropdownMultiSelectButton from '@/components/DropdownMultiSelectButton.vue';
+import { ResultType, SelectInputOptions } from '@/util/data';
 import { getResultTypeName, isAnimeSeries } from '@/util/helpers';
 import { inject, ref, watch, type Ref } from 'vue';
 import FullResultsTable from './components/FullResultsTable.vue';
@@ -47,8 +47,11 @@ class TableData {
     return this.columns.filter(column => this.isColumnVisible[column.resultType]);
   }
 
-  get columnsAsSelectorItems(): SelectorItem[] {
-    return this.columns.map(column => ({ id: column.resultType, name: getResultTypeName(column.resultType, true) }));
+  get columnsAsSelectorItems(): SelectInputOptions<ResultType> {
+    return new SelectInputOptions<ResultType>(this.columns.map(column => ({
+      displayName: getResultTypeName(column.resultType, true),
+      value: column.resultType,
+    })));
   }
 
   get visibleColumnTypes(): ResultType[] {