From 776050996f481600d046d12f925fb32b3f688b63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Sat, 1 Jun 2024 12:16:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Extend=20data=20list=20filter=20?=
 =?UTF-8?q?for=20bool=20columns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DataTable.vue            | 5 +++--
 frontend/src/views/admin/SubscriberPanelView.vue | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index 1b758b69b..6b1ccbecd 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -8,7 +8,9 @@
         <label class="flex items-center gap-4 whitespace-nowrap">
         {{ filter.name }} {{ t('label.filter') }}:
         <select class="rounded-md" @change="(evt) => onColumnFilter(evt, filter)">
-          <option :value="option.key" v-for="option in filter.options" :key="option.key">{{ option.name }}</option>
+          <option :value="option.key" v-for="option in filter.options" :key="option.key">
+            {{ option.name }}
+          </option>
         </select>
         </label>
       </div>
@@ -173,7 +175,6 @@ const onFieldSelect = (evt, fieldData) => {
 
 const onColumnFilter = (evt, filter) => {
   mutableDataList.value = filter.fn(evt.target.value, dataList.value);
-  console.log('Data list info: ', mutableDataList.value, ' vs ', dataList.value);
   if (mutableDataList.value === dataList.value) {
     mutableDataList.value = null;
   }
diff --git a/frontend/src/views/admin/SubscriberPanelView.vue b/frontend/src/views/admin/SubscriberPanelView.vue
index b48c6f6cd..2411ef849 100644
--- a/frontend/src/views/admin/SubscriberPanelView.vue
+++ b/frontend/src/views/admin/SubscriberPanelView.vue
@@ -108,7 +108,7 @@ const filteredSubscribers = computed(() => subscribers.value.map((subscriber) =>
   },
   wasInvited: {
     type: tableDataType.bool,
-    value: subscriber.invite,
+    value: Boolean(subscriber.invite),
   },
   disable: {
     type: tableDataType.button,
@@ -161,11 +161,11 @@ const filters = [
       },
       {
         name: 'Yes',
-        key: 'yes',
+        key: 'true',
       },
       {
         name: 'No',
-        key: 'no',
+        key: 'false',
       },
     ],
     /**
@@ -178,7 +178,7 @@ const filters = [
       if (selectedKey === 'all') {
         return mutableDataList;
       }
-      return mutableDataList.filter((data) => data.wasInvited.value.toLowerCase() === selectedKey);
+      return mutableDataList.filter((data) => data.wasInvited.value?.toString().toLowerCase() === selectedKey);
     },
   },
 ];