From dbfc594857e41bcf294f6f0bedd680b6f96b791a Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 28 Jan 2021 17:39:28 -0500
Subject: [PATCH] Fix activity sidebar filters

Fixes #3768
---
 app/src/composables/use-preset/use-preset.ts  |  5 +-
 app/src/displays/collection/collection.vue    |  2 +-
 .../activity/components/navigation.vue        | 74 +++++++++++++++----
 .../activity/composables/use-navigation.ts    |  9 ---
 .../modules/activity/routes/collection.vue    | 30 +-------
 5 files changed, 67 insertions(+), 53 deletions(-)
 delete mode 100644 app/src/modules/activity/composables/use-navigation.ts

diff --git a/app/src/composables/use-preset/use-preset.ts b/app/src/composables/use-preset/use-preset.ts
index ad11bbc6af..3a00361a23 100644
--- a/app/src/composables/use-preset/use-preset.ts
+++ b/app/src/composables/use-preset/use-preset.ts
@@ -27,7 +27,10 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 	const savePreset = async (preset?: Partial<Preset>) => {
 		busy.value = true;
 		const updatedValues = await presetsStore.savePreset(preset ? preset : localPreset.value);
-		localPreset.value.id = updatedValues.id;
+		localPreset.value = {
+			...localPreset.value,
+			id: updatedValues.id,
+		};
 		busy.value = false;
 		return updatedValues;
 	};
diff --git a/app/src/displays/collection/collection.vue b/app/src/displays/collection/collection.vue
index c00fa1f7c8..fecf87331d 100644
--- a/app/src/displays/collection/collection.vue
+++ b/app/src/displays/collection/collection.vue
@@ -1,5 +1,5 @@
 <template>
-	<value-null v-if="value === null" />
+	<value-null v-if="value === null || !info" />
 	<div v-else>
 		<v-icon v-if="icon" :name="info.icon" left small />
 		{{ info.name }}
diff --git a/app/src/modules/activity/components/navigation.vue b/app/src/modules/activity/components/navigation.vue
index fa17620a4b..2ee22d207e 100644
--- a/app/src/modules/activity/components/navigation.vue
+++ b/app/src/modules/activity/components/navigation.vue
@@ -1,6 +1,6 @@
 <template>
 	<v-list large>
-		<v-list-item :active="isEqual(navFilter, null)" @click="setNavFilter(null)">
+		<v-list-item @click="clearNavFilter" :active="!activeFilter">
 			<v-list-item-icon>
 				<v-icon name="access_time" />
 			</v-list-item-icon>
@@ -10,8 +10,8 @@
 		</v-list-item>
 
 		<v-list-item
-			:active="isEqual(navFilter, { user: currentUserID })"
-			@click="setNavFilter({ user: currentUserID })"
+			@click="setNavFilter('user', currentUserID)"
+			:active="activeFilter && activeFilter.field === 'user' && activeFilter.value === currentUserID"
 		>
 			<v-list-item-icon>
 				<v-icon name="face" />
@@ -23,7 +23,10 @@
 
 		<v-divider />
 
-		<v-list-item :active="isEqual(navFilter, { action: 'create' })" @click="setNavFilter({ action: 'create' })">
+		<v-list-item
+			@click="setNavFilter('action', 'create')"
+			:active="activeFilter && activeFilter.field === 'action' && activeFilter.value === 'create'"
+		>
 			<v-list-item-icon>
 				<v-icon name="add" />
 			</v-list-item-icon>
@@ -32,7 +35,10 @@
 			</v-list-item-content>
 		</v-list-item>
 
-		<v-list-item :active="isEqual(navFilter, { action: 'update' })" @click="setNavFilter({ action: 'update' })">
+		<v-list-item
+			@click="setNavFilter('action', 'update')"
+			:active="activeFilter && activeFilter.field === 'action' && activeFilter.value === 'update'"
+		>
 			<v-list-item-icon>
 				<v-icon name="check" />
 			</v-list-item-icon>
@@ -41,7 +47,10 @@
 			</v-list-item-content>
 		</v-list-item>
 
-		<v-list-item :active="isEqual(navFilter, { action: 'delete' })" @click="setNavFilter({ action: 'delete' })">
+		<v-list-item
+			@click="setNavFilter('action', 'delete')"
+			:active="activeFilter && activeFilter.field === 'action' && activeFilter.value === 'delete'"
+		>
 			<v-list-item-icon>
 				<v-icon name="clear" />
 			</v-list-item-icon>
@@ -50,7 +59,10 @@
 			</v-list-item-content>
 		</v-list-item>
 
-		<v-list-item :active="isEqual(navFilter, { action: 'comment' })" @click="setNavFilter({ action: 'comment' })">
+		<v-list-item
+			@click="setNavFilter('action', 'comment')"
+			:active="activeFilter && activeFilter.field === 'action' && activeFilter.value === 'comment'"
+		>
 			<v-list-item-icon>
 				<v-icon name="chat_bubble_outline" />
 			</v-list-item-icon>
@@ -60,8 +72,8 @@
 		</v-list-item>
 
 		<v-list-item
-			:active="isEqual(navFilter, { action: 'authenticate' })"
-			@click="setNavFilter({ action: 'authenticate' })"
+			@click="setNavFilter('action', 'authenticate')"
+			:active="activeFilter && activeFilter.field === 'action' && activeFilter.value === 'authenticate'"
 		>
 			<v-list-item-icon>
 				<v-icon name="login" />
@@ -74,22 +86,52 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed, ref, PropType } from '@vue/composition-api';
 import { useUserStore } from '@/stores/user';
-import { useNavigation } from '../composables/use-navigation';
 import { isEqual } from 'lodash';
+import usePreset from '../../../composables/use-preset';
+import { nanoid } from 'nanoid';
+import { Filter } from '../../../types';
 
 export default defineComponent({
-	setup() {
+	props: {
+		filters: {
+			type: Array as PropType<Filter[]>,
+			required: true,
+		},
+	},
+	setup(props, { emit }) {
 		const userStore = useUserStore();
 		const currentUserID = computed(() => userStore.state.currentUser?.id);
 
-		const { navFilter } = useNavigation();
+		const activeFilter = computed(() => {
+			return props.filters.find((filter) => filter.locked === true);
+		});
 
-		return { currentUserID, setNavFilter, isEqual, navFilter };
+		return { currentUserID, setNavFilter, clearNavFilter, activeFilter };
 
-		function setNavFilter(filter: Record<string, any> | null) {
-			navFilter.value = filter;
+		function setNavFilter(key: string, value: any) {
+			emit('update:filters', [
+				...props.filters.filter((filter) => {
+					return filter.locked === false;
+				}),
+				{
+					key: nanoid(),
+					locked: true,
+					field: key,
+					operator: 'eq',
+					value: value,
+				},
+			]);
+		}
+
+		function clearNavFilter() {
+			emit(
+				'update:filters',
+				props.filters.filter((filter) => {
+					return filter.locked === false;
+				})
+			);
 		}
 	},
 });
diff --git a/app/src/modules/activity/composables/use-navigation.ts b/app/src/modules/activity/composables/use-navigation.ts
deleted file mode 100644
index 85137735d9..0000000000
--- a/app/src/modules/activity/composables/use-navigation.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ref, Ref } from '@vue/composition-api';
-
-let navFilter: Ref<Record<string, any> | null>;
-
-export function useNavigation() {
-	if (!navFilter) navFilter = ref(null);
-
-	return { navFilter };
-}
diff --git a/app/src/modules/activity/routes/collection.vue b/app/src/modules/activity/routes/collection.vue
index d814ca354b..6170da09b0 100644
--- a/app/src/modules/activity/routes/collection.vue
+++ b/app/src/modules/activity/routes/collection.vue
@@ -15,7 +15,7 @@
 		</template>
 
 		<template #navigation>
-			<activity-navigation />
+			<activity-navigation :filters.sync="filters" />
 		</template>
 
 		<component
@@ -24,9 +24,8 @@
 			collection="directus_activity"
 			:layout-options.sync="layoutOptions"
 			:layout-query.sync="layoutQuery"
-			:filters="_filters"
+			:filters.sync="filters"
 			:search-query="searchQuery"
-			@update:filters="filters = $event"
 		/>
 
 		<router-view name="detail" :primary-key="primaryKey" />
@@ -51,7 +50,7 @@ import FilterSidebarDetail from '@/views/private/components/filter-sidebar-detai
 import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import SearchInput from '@/views/private/components/search-input';
 import { nanoid } from 'nanoid';
-import { useNavigation } from '../composables/use-navigation';
+import { cloneDeep } from 'lodash';
 
 type Item = {
 	[field: string]: any;
@@ -70,35 +69,14 @@ export default defineComponent({
 		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_activity'));
 		const { breadcrumb } = useBreadcrumb();
 
-		const { navFilter } = useNavigation();
-
-		const _filters = computed(() => {
-			const filtersFormatted = [...filters.value];
-
-			if (navFilter.value) {
-				for (const [key, value] of Object.entries(navFilter.value)) {
-					filtersFormatted.push({
-						key: nanoid(),
-						locked: true,
-						field: key,
-						operator: 'eq',
-						value: value,
-					});
-				}
-			}
-
-			return filtersFormatted;
-		});
-
 		return {
 			breadcrumb,
 			marked,
 			layout,
 			layoutOptions,
 			layoutQuery,
-			filters,
 			searchQuery,
-			_filters,
+			filters,
 		};
 
 		function useBreadcrumb() {