From ed76e58ff15119dca1ccf958c9be26bd76fa2922 Mon Sep 17 00:00:00 2001
From: Julian Pollinger <julian@pollinger.dev>
Date: Fri, 6 Sep 2024 10:17:55 +0200
Subject: [PATCH] fix: fix activity orga view not reloading after filter change

---
 client/src/components/Orga/OrgaActivities.vue | 24 +++++--------------
 client/src/components/tagDropdown.vue         | 13 +++++-----
 2 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/client/src/components/Orga/OrgaActivities.vue b/client/src/components/Orga/OrgaActivities.vue
index 00d69a3..6678d0a 100644
--- a/client/src/components/Orga/OrgaActivities.vue
+++ b/client/src/components/Orga/OrgaActivities.vue
@@ -17,7 +17,8 @@
             </b-input-group>
             <hr />
             <tag-dropdown
-                @change="taskFilterChange"
+                v-model="selectedTasks"
+                @change="loadActivities"
                 :label="t('task', 2)"
                 :options="
                     tasks.map((u) => {
@@ -27,7 +28,8 @@
             ></tag-dropdown>
             <hr />
             <tag-dropdown
-                @change="userFilterChange"
+                v-model="selectedUsers"
+                @change="loadActivities"
                 :options="
                     users.map((u) => {
                         return { desc: u.name, id: u.id };
@@ -104,8 +106,8 @@ const errorStore = useErrorStore();
 const tasks: Ref<Array<Task>> = ref([]);
 const users: Ref<Array<User>> = ref([]);
 
-const selectedTasks: Ref<Array<Task>> = ref([]);
-const selectedUsers: Ref<Array<User>> = ref([]);
+const selectedTasks: Ref<TagOption[]> = ref([]);
+const selectedUsers: Ref<TagOption[]> = ref([]);
 
 const activities: Ref<Activity[]> = ref([]);
 
@@ -142,18 +144,6 @@ onMounted(() => {
     loadActivities();
 });
 
-function taskFilterChange(newTasks: TagOption[]) {
-    selectedTasks.value = newTasks.map(
-        (nt) => tasks.value.filter((t) => t.id === nt.id)[0]
-    );
-}
-
-function userFilterChange(newUsers: TagOption[]) {
-    selectedUsers.value = newUsers.map(
-        (nu) => users.value.filter((u) => u.id === nu.id)[0]
-    );
-}
-
 function loadActivities() {
     const startDate = new Date(from.value);
     const endDate = new Date(to.value);
@@ -245,8 +235,6 @@ function downloadJSON() {
 
 watch(from, loadActivities);
 watch(to, loadActivities);
-watch(selectedTasks, loadActivities);
-watch(selectedUsers, loadActivities);
 </script>
 
 <style>
diff --git a/client/src/components/tagDropdown.vue b/client/src/components/tagDropdown.vue
index 07914ae..9de778d 100644
--- a/client/src/components/tagDropdown.vue
+++ b/client/src/components/tagDropdown.vue
@@ -57,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, type ModelRef, ref, watch } from 'vue';
 import type { Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { TagOption } from '@/additionalTypes';
@@ -70,7 +70,7 @@ const props = defineProps<{
 }>();
 
 const search = ref('');
-const tags: Ref<TagOption[]> = ref([]);
+const tags = defineModel<TagOption[]>({ required: true });
 
 const criteria = computed(() => {
     return search.value.trim().toLowerCase();
@@ -78,12 +78,12 @@ const criteria = computed(() => {
 
 const availableOptions = computed(() => {
     const options = props.options.filter(
-        (opt) => tags.value.indexOf(opt) === -1
+        (opt) => tags.value.indexOf(opt) === -1,
     );
     if (criteria.value) {
         // Show only options that match criteria
         return options.filter(
-            (opt) => opt.desc.toLowerCase().indexOf(criteria.value) > -1
+            (opt) => opt.desc.toLowerCase().indexOf(criteria.value) > -1,
         );
     }
     // Show all options available
@@ -100,17 +100,16 @@ const searchDesc = computed(() => {
 function onOptionClick(option: TagOption) {
     tags.value.push(option);
     search.value = '';
+    emit('change', tags.value);
 }
 
 function removeTag(option: TagOption) {
     tags.value.splice(tags.value.indexOf(option), 1);
+    emit('change', tags.value);
 }
 
 const emit = defineEmits<{ (e: 'change', newValue: TagOption[]): void }>();
 
-watch(tags, () => {
-    emit('change', tags.value);
-});
 </script>
 
 <style>