From 52b8334e3950804c042d8fa666f9fc2e5e62557f Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 14 Dec 2020 19:54:55 -0500
Subject: [PATCH] Fix deselect button not showing up for non-admin users

Fixes #3265
---
 app/src/interfaces/files/files.vue               | 14 +++-----------
 app/src/interfaces/many-to-many/many-to-many.vue | 14 +++-----------
 app/src/interfaces/one-to-many/one-to-many.vue   | 16 ++++------------
 3 files changed, 10 insertions(+), 34 deletions(-)

diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index ef953b623e..014fc55253 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -25,7 +25,7 @@
 				/>
 			</template>
 
-			<template #item-append="{ item }" v-if="!disabled">
+			<template #item-append="{ item }" v-show="!disabled">
 				<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deleteItem(item)" />
 			</template>
 		</v-table>
@@ -117,10 +117,7 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { collection, field, value, primaryKey, sortField } = toRefs(props);
 
-		const { junction, junctionCollection, relation, relationCollection, relationInfo } = useRelation(
-			collection,
-			field
-		);
+		const { junction, junctionCollection, relation, relationCollection, relationInfo } = useRelation(collection, field);
 
 		function emitter(newVal: any[] | null) {
 			emit('input', newVal);
@@ -180,12 +177,7 @@ export default defineComponent({
 			relatedPrimaryKey,
 		} = useEdit(value, relationInfo, emitter);
 
-		const { stageSelection, selectModalActive, selectionFilters } = useSelection(
-			value,
-			items,
-			relationInfo,
-			emitter
-		);
+		const { stageSelection, selectModalActive, selectionFilters } = useSelection(value, items, relationInfo, emitter);
 
 		const { showUpload, onUpload } = useUpload();
 
diff --git a/app/src/interfaces/many-to-many/many-to-many.vue b/app/src/interfaces/many-to-many/many-to-many.vue
index af6e2991db..d815ab7ad2 100644
--- a/app/src/interfaces/many-to-many/many-to-many.vue
+++ b/app/src/interfaces/many-to-many/many-to-many.vue
@@ -30,7 +30,7 @@
 				/>
 			</template>
 
-			<template #item-append="{ item }" v-if="!disabled">
+			<template #item-append="{ item }" v-show="!disabled">
 				<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deleteItem(item)" />
 			</template>
 		</v-table>
@@ -118,10 +118,7 @@ export default defineComponent({
 			emit('input', newVal);
 		}
 
-		const { junction, junctionCollection, relation, relationCollection, relationInfo } = useRelation(
-			collection,
-			field
-		);
+		const { junction, junctionCollection, relation, relationCollection, relationInfo } = useRelation(collection, field);
 
 		const {
 			deleteItem,
@@ -154,12 +151,7 @@ export default defineComponent({
 			editModalActive,
 		} = useEdit(value, relationInfo, emitter);
 
-		const { stageSelection, selectModalActive, selectionFilters } = useSelection(
-			value,
-			items,
-			relationInfo,
-			emitter
-		);
+		const { stageSelection, selectModalActive, selectionFilters } = useSelection(value, items, relationInfo, emitter);
 
 		const { sort, sortItems, sortedItems } = useSort(sortField, fields, items, emitter);
 
diff --git a/app/src/interfaces/one-to-many/one-to-many.vue b/app/src/interfaces/one-to-many/one-to-many.vue
index d5a133cb72..4a95657380 100644
--- a/app/src/interfaces/one-to-many/one-to-many.vue
+++ b/app/src/interfaces/one-to-many/one-to-many.vue
@@ -30,7 +30,7 @@
 				/>
 			</template>
 
-			<template #item-append="{ item }" v-if="!disabled">
+			<template #item-append="{ item }" v-show="!disabled">
 				<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deleteItem(item)" />
 			</template>
 		</v-table>
@@ -277,8 +277,7 @@ export default defineComponent({
 						fields.push(pkField);
 					}
 
-					if (props.sortField !== null && fields.includes(props.sortField) === false)
-						fields.push(props.sortField);
+					if (props.sortField !== null && fields.includes(props.sortField) === false) fields.push(props.sortField);
 
 					try {
 						const endpoint = relatedCollection.value.collection.startsWith('directus_')
@@ -389,12 +388,7 @@ export default defineComponent({
 				const hasPrimaryKey = pkField in edits;
 
 				const newValue = (props.value || []).map((item) => {
-					if (
-						typeof item === 'object' &&
-						pkField in item &&
-						pkField in edits &&
-						item[pkField] === edits[pkField]
-					) {
+					if (typeof item === 'object' && pkField in item && pkField in edits && item[pkField] === edits[pkField]) {
 						return edits;
 					}
 
@@ -431,9 +425,7 @@ export default defineComponent({
 
 				const pkField = relatedPrimaryKeyField.value.field;
 
-				return items.value
-					.filter((currentItem) => pkField in currentItem)
-					.map((currentItem) => currentItem[pkField]);
+				return items.value.filter((currentItem) => pkField in currentItem).map((currentItem) => currentItem[pkField]);
 			});
 
 			const selectionFilters = computed<Filter[]>(() => {