Show selected items in drawer collection (#8051)

* show selected items in drawer collection
Instead of hiding items in drawer as far as they are selected,
just show them but selected.

* Remove unused imports/params

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/interfaces/list-m2m/list-m2m.vue

@@ -69,8 +69,7 @@
 			v-if="!disabled"
 			v-model:active="selectModalActive"
 			:collection="relationCollection.collection"
-			:selection="[]"
-			:filters="selectionFilters"
+			:selection="selectedPrimaryKeys"
 			multiple
 			@input="stageSelection"
 		/>
@@ -198,7 +197,8 @@ export default defineComponent({
 		const { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit, relatedPrimaryKey, editModalActive } =
 			useEdit(value, relationInfo, emitter);
 
-		const { stageSelection, selectModalActive, selectionFilters } = useSelection(value, items, relationInfo, emitter);
+		const { stageSelection, selectModalActive, selectedPrimaryKeys } = useSelection(items, relationInfo, emitter);
+
 		const { sort, sortItems, sortedItems } = useSort(relationInfo, fields, items, emitter);
 
 		const { createAllowed, selectAllowed } = usePermissions();
@@ -221,7 +221,7 @@ export default defineComponent({
 			stageSelection,
 			selectModalActive,
 			deleteItem,
-			selectionFilters,
+			selectedPrimaryKeys,
 			items,
 			relationInfo,
 			relatedPrimaryKey,

app/src/interfaces/list-m2m/use-selection.ts

@@ -1,4 +1,3 @@
-import { Filter } from '@directus/shared/types';
 import { get } from 'lodash';
 import { computed, ComputedRef, Ref, ref } from 'vue';
 import { RelationInfo } from './use-relation';
@@ -7,11 +6,9 @@ type UsableSelection = {
 	stageSelection: (newSelection: (number | string)[]) => void;
 	selectModalActive: Ref<boolean>;
 	selectedPrimaryKeys: ComputedRef<(string | number)[]>;
-	selectionFilters: ComputedRef<Filter[]>;
 };
 
 export default function useSelection(
-	value: Ref<(string | number | Record<string, any>)[] | null>,
 	items: Ref<Record<string, any>[]>,
 	relation: Ref<RelationInfo>,
 	emit: (newVal: any[] | null) => void
@@ -32,34 +29,14 @@ export default function useSelection(
 		return selectedKeys;
 	});
 
-	const selectionFilters = computed<Filter[]>(() => {
-		const { relationPkField } = relation.value;
-
-		if (selectedPrimaryKeys.value.length === 0) return [];
-
-		const filter: Filter = {
-			key: 'selection',
-			field: relationPkField,
-			operator: 'nin',
-			value: selectedPrimaryKeys.value.join(','),
-			locked: true,
-		};
-
-		return [filter];
-	});
-
 	function stageSelection(newSelection: (number | string)[]) {
 		const { junctionField } = relation.value;
 
-		const selection = newSelection.reduce((acc, item) => {
-			if (selectedPrimaryKeys.value.includes(item) === false) acc.push({ [junctionField]: item });
-			return acc;
-		}, [] as Record<string, any>[]);
+		const selection = newSelection.map((item) => ({ [junctionField]: item }));
 
-		const newVal = [...selection, ...(value.value || [])];
-		if (newVal.length === 0) emit(null);
-		else emit(newVal);
+		if (selection.length === 0) emit(null);
+		else emit(selection);
 	}
 
-	return { stageSelection, selectModalActive, selectedPrimaryKeys, selectionFilters };
+	return { stageSelection, selectModalActive, selectedPrimaryKeys };
 }

app/src/interfaces/list-o2m/list-o2m.vue

@@ -70,10 +70,9 @@
 			v-if="!disabled"
 			v-model:active="selectModalActive"
 			:collection="relatedCollection.collection"
-			:selection="[]"
-			:filters="selectionFilters"
+			:selection="selectedPrimaryKeys"
 			multiple
-			@input="stageSelection"
+			@input="$emit('input', $event.length > 0 ? $event : null)"
 		/>
 	</div>
 </template>
@@ -86,7 +85,7 @@ import { useCollection } from '@directus/shared/composables';
 import { useCollectionsStore, useRelationsStore, useFieldsStore, usePermissionsStore, useUserStore } from '@/stores/';
 import DrawerItem from '@/views/private/components/drawer-item';
 import DrawerCollection from '@/views/private/components/drawer-collection';
-import { Filter, Field, Relation } from '@directus/shared/types';
+import { Field, Relation } from '@directus/shared/types';
 import { get, isEqual, sortBy } from 'lodash';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { getFieldsFromTemplate } from '@directus/shared/utils';
@@ -155,7 +154,7 @@ export default defineComponent({
 
 		const { items, loading } = usePreview();
 		const { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit } = useEdits();
-		const { stageSelection, selectModalActive, selectionFilters } = useSelection();
+		const { selectModalActive, selectedPrimaryKeys } = useSelection();
 		const { sort, sortItems, sortedItems } = useSort();
 
 		const { createAllowed, updateAllowed } = usePermissions();
@@ -170,12 +169,11 @@ export default defineComponent({
 			editsAtStart,
 			stageEdits,
 			cancelEdit,
-			stageSelection,
 			selectModalActive,
 			deleteItem,
 			items,
 			sortItems,
-			selectionFilters,
+			selectedPrimaryKeys,
 			sort,
 			sortedItems,
 			get,
@@ -438,32 +436,7 @@ export default defineComponent({
 				return items.value.filter((currentItem) => pkField in currentItem).map((currentItem) => currentItem[pkField]);
 			});
 
-			const selectionFilters = computed<Filter[]>(() => {
-				const pkField = relatedPrimaryKeyField.value?.field;
-
-				if (selectedPrimaryKeys.value.length === 0) return [];
-
-				const filter: Filter = {
-					key: 'selection',
-					field: pkField,
-					operator: 'nin',
-					value: selectedPrimaryKeys.value.join(','),
-					locked: true,
-				};
-
-				return [filter];
-			});
-
-			return { stageSelection, selectModalActive, selectionFilters };
-
-			function stageSelection(newSelection: (number | string)[]) {
-				const selection = newSelection.filter((item) => selectedPrimaryKeys.value.includes(item) === false);
-
-				const newVal = [...selection, ...(props.value || [])];
-
-				if (newVal.length === 0) emit('input', null);
-				else emit('input', newVal);
-			}
+			return { selectModalActive, selectedPrimaryKeys };
 		}
 
 		function getDefaultFields(): string[] {