From 0a0d52117ceb956d0bc34e4b3f43e1542eab9996 Mon Sep 17 00:00:00 2001
From: Dutchman97 <11137836+Dutchman97@users.noreply.github.com>
Date: Sun, 10 Dec 2023 20:45:34 +0100
Subject: [PATCH] Small improvements

---
 .../src/components/DropdownMultiSelectButton.vue   | 10 +++-------
 .../src/views/surveyresults/SurveyResultsFull.vue  | 14 +++++++-------
 .../components/SimpleResultsTable.vue              |  2 +-
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/DropdownMultiSelectButton.vue b/frontend/src/components/DropdownMultiSelectButton.vue
index 08dee2e..979c59d 100644
--- a/frontend/src/components/DropdownMultiSelectButton.vue
+++ b/frontend/src/components/DropdownMultiSelectButton.vue
@@ -45,6 +45,7 @@
 <script setup lang="ts">
 import type { ResultType, SelectInputOptions } from "@/util/data";
 import IdGenerator from "@/util/id-generator";
+import _ from "lodash";
 import { computed } from "vue";
 
 const props = withDefaults(defineProps<{
@@ -61,8 +62,8 @@ const emit = defineEmits<{
 
 
 const dropdownId = IdGenerator.generateUniqueId('dropdownMultiSelect');
+const originalModelValues = _.clone(props.modelValue);
 
-const originalModelValues = props.modelValue;
 
 function isNotNil<T>(value: T | null | undefined): value is T {
   return value != null;
@@ -81,12 +82,7 @@ const selectAll = computed<boolean>({
     return props.options.length === props.modelValue.length;
   },
   set(value) {
-    onSelectionChanged(value ? props.options.map(option => option.value) : originalModelValues);
+    emit('update:modelValue', value ? props.options.map(option => option.value) : originalModelValues);
   },
 });
-
-
-function onSelectionChanged(newSelectedOptionIds: number[]): void {
-  emit('update:modelValue', newSelectedOptionIds);
-}
 </script>
diff --git a/frontend/src/views/surveyresults/SurveyResultsFull.vue b/frontend/src/views/surveyresults/SurveyResultsFull.vue
index 9d6bd12..ea3da5c 100644
--- a/frontend/src/views/surveyresults/SurveyResultsFull.vue
+++ b/frontend/src/views/surveyresults/SurveyResultsFull.vue
@@ -5,16 +5,16 @@
       <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>
-    <DropdownMultiSelectButton :options="(tableDataOfSeries.columnsAsSelectorItems as SelectInputOptions<ResultType>)" v-model="tableDataOfSeries.visibleColumnTypes">
+    <DropdownMultiSelectButton :options="(tableDataOfSeries.columnsAsSelectInputOptions as SelectInputOptions<ResultType>)" v-model="tableDataOfSeries.visibleColumnTypes">
       Columns
     </DropdownMultiSelectButton>
-    <FullResultsTable :columns="tableDataOfSeries.processedColumns" :entries="tableDataOfSeries.entries" isAnimeSeries/>
+    <FullResultsTable :columns="tableDataOfSeries.visibleColumns" :entries="tableDataOfSeries.entries" isAnimeSeries/>
 
     <h3 class="section-title" id="tableSpecial">Anime OVAs / ONAs / Movies / Specials</h3>
-    <DropdownMultiSelectButton :options="(tableDataOfSpecial.columnsAsSelectorItems as SelectInputOptions<ResultType>)" v-model="tableDataOfSpecial.visibleColumnTypes">
+    <DropdownMultiSelectButton :options="(tableDataOfSpecial.columnsAsSelectInputOptions as SelectInputOptions<ResultType>)" v-model="tableDataOfSpecial.visibleColumnTypes">
       Columns
     </DropdownMultiSelectButton>
-    <FullResultsTable :columns="tableDataOfSpecial.processedColumns" :entries="tableDataOfSpecial.entries"/>
+    <FullResultsTable :columns="tableDataOfSpecial.visibleColumns" :entries="tableDataOfSpecial.entries"/>
 
     <div class="row g-0">
       <div class="col-auto pe-1">
@@ -43,11 +43,11 @@ class TableData {
   entries: AnimeTableEntryData[] = [];
   isColumnVisible: Partial<Record<ResultType, boolean>> = {};
 
-  get processedColumns(): AnimeTableColumnData[] {
+  get visibleColumns(): AnimeTableColumnData[] {
     return this.columns.filter(column => this.isColumnVisible[column.resultType]);
   }
 
-  get columnsAsSelectorItems(): SelectInputOptions<ResultType> {
+  get columnsAsSelectInputOptions(): SelectInputOptions<ResultType> {
     return new SelectInputOptions<ResultType>(this.columns.map(column => ({
       displayName: getResultTypeName(column.resultType, true),
       value: column.resultType,
@@ -55,7 +55,7 @@ class TableData {
   }
 
   get visibleColumnTypes(): ResultType[] {
-    return this.processedColumns.map(column => column.resultType);
+    return this.visibleColumns.map(column => column.resultType);
   }
   set visibleColumnTypes(value: ResultType[]) {
     this.columns.forEach(column => this.isColumnVisible[column.resultType] = value.includes(column.resultType));
diff --git a/frontend/src/views/surveyresults/components/SimpleResultsTable.vue b/frontend/src/views/surveyresults/components/SimpleResultsTable.vue
index 47579f4..dddd706 100644
--- a/frontend/src/views/surveyresults/components/SimpleResultsTable.vue
+++ b/frontend/src/views/surveyresults/components/SimpleResultsTable.vue
@@ -55,7 +55,7 @@ import type { RouteLocationNormalized } from 'vue-router';
 
 const props = defineProps<{
   ranking: { anime: AnimeViewModel, result: number, extraResult?: number }[];
-  resultTypes: ResultType[]; // Must have either length 1 or 2
+  resultTypes: [ResultType] | [ResultType, ResultType]; // Must have either length 1 or 2
   isAnimeSeries?: boolean;
 
   top: number;