Fix click event for unconfigured tables (#9056)

* fix click event for unconfigured tables

* fix lint errors

* replace click events with links in collection-item

* handle link and click on single block

* Revert "handle link and click on single block"

This reverts commit ef9db8c0ab.

* use button for click actions

* add dense to db-only

* fix hitbox

* add stop modifier to folder toggle

* Prevent route action on folder click

Co-authored-by: Jose Varela <joselcvarela@gmail.com>
Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/modules/settings/routes/data-model/collections/collections.vue

@@ -64,16 +64,17 @@
 					v-tooltip="t('db_only_click_to_configure')"
 					class="collection-row hidden"
 					block
+					dense
 					clickable
 				>
 					<v-list-item-icon>
 						<v-icon name="add" />
 					</v-list-item-icon>
 
-					<div class="collection-name" @click="openCollection(collection)">
+					<router-link class="collection-name" :to="`/settings/data-model/${collection.collection}`">
 						<v-icon class="collection-icon" name="dns" />
 						<span class="collection-name">{{ collection.name }}</span>
-					</div>
+					</router-link>
 
 					<collection-options :collection="collection" />
 				</v-list-item>
@@ -127,7 +128,7 @@ export default defineComponent({
 		const { t } = useI18n();
 
 		const collectionDialogActive = ref(false);
-		const editCollection = ref<Collection>();
+		const editCollection = ref<Collection | null>();
 
 		const collectionsStore = useCollectionsStore();
 
@@ -203,7 +204,7 @@ export default defineComponent({
 						})
 					)
 				);
-			} catch (err) {
+			} catch (err: any) {
 				unexpectedError(err);
 			}
 		}

app/src/modules/settings/routes/data-model/collections/components/collection-item.vue

@@ -1,10 +1,17 @@
 <template>
 	<div class="collection-item">
-		<v-list-item block dense clickable :class="{ hidden: collection.meta?.hidden }">
+		<v-list-item
+			block
+			dense
+			clickable
+			:class="{ hidden: collection.meta?.hidden }"
+			:to="collection.schema ? `/settings/data-model/${collection.collection}` : undefined"
+			@click="!collection.schema ? $emit('editCollection', $event) : null"
+		>
 			<v-list-item-icon>
 				<v-icon v-if="!disableDrag" class="drag-handle" name="drag_handle" />
 			</v-list-item-icon>
-			<div class="collection-name" @click="openCollection(collection)">
+			<div class="collection-name">
 				<v-icon
 					:color="collection.meta?.hidden ? 'var(--foreground-subdued)' : collection.color"
 					class="collection-icon"
@@ -19,7 +26,7 @@
 					v-tooltip="collapseTooltip"
 					:name="collapseIcon"
 					:clickable="nestedCollections.length > 0"
-					@click="toggleCollapse"
+					@click.stop.prevent="toggleCollapse"
 				/>
 				<v-icon v-else :name="collapseIcon" />
 			</template>
@@ -52,7 +59,6 @@
 import { defineComponent, PropType, computed, ref } from 'vue';
 import CollectionOptions from './collection-options.vue';
 import { Collection } from '@/types';
-import { useRouter } from 'vue-router';
 import Draggable from 'vuedraggable';
 import { useCollectionsStore } from '@/stores';
 import { DeepPartial } from '@directus/shared/types';
@@ -79,7 +85,6 @@ export default defineComponent({
 	emits: ['setNestedSort', 'editCollection'],
 	setup(props, { emit }) {
 		const collectionsStore = useCollectionsStore();
-		const router = useRouter();
 		const { t } = useI18n();
 
 		const nestedCollections = computed(() =>
@@ -116,7 +121,6 @@ export default defineComponent({
 
 		return {
 			collapseIcon,
-			openCollection,
 			onGroupSortChange,
 			nestedCollections,
 			update,
@@ -140,7 +144,7 @@ export default defineComponent({
 
 			try {
 				await update({ meta: { collapse: newCollapse } });
-			} catch (err) {
+			} catch (err: any) {
 				unexpectedError(err);
 			} finally {
 				collapseLoading.value = false;
@@ -151,14 +155,6 @@ export default defineComponent({
 			await collectionsStore.updateCollection(props.collection.collection, updates);
 		}
 
-		function openCollection(collection: Collection) {
-			if (collection.schema) {
-				router.push(`/settings/data-model/${collection.collection}`);
-			} else {
-				emit('editCollection', collection);
-			}
-		}
-
 		function onGroupSortChange(collections: Collection[]) {
 			const updates = collections.map((collection) => ({
 				collection: collection.collection,

app/src/modules/settings/routes/data-model/collections/components/collection-options.vue

@@ -1,8 +1,8 @@
 <template>
 	<div v-if="collection.collection.startsWith('directus_') === false">
 		<v-menu placement="left-start" show-arrow>
-			<template #activator="{ toggle }">
-				<v-icon name="more_vert" clickable class="ctx-toggle" @click="toggle" />
+			<template #activator="{ toggle, deactivate }">
+				<v-icon name="more_vert" clickable class="ctx-toggle" @click.stop.prevent="toggle" @focusout="deactivate" />
 			</template>
 			<v-list>
 				<v-list-item clickable class="danger" @click="deleteActive = true">