From aa808313ad45ffad6d4b70dd030f8317d3aaa1f8 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 22 Apr 2021 17:31:19 -0400
Subject: [PATCH] Add elipsis/tooltips for existing relationships

---
 .../components/relationship-m2a.vue           | 32 +++++++++++++++----
 .../components/relationship-m2m.vue           | 24 +++++++++++---
 .../components/relationship-m2o.vue           | 19 ++++++++---
 .../components/relationship-o2m.vue           | 20 +++++++++---
 4 files changed, 77 insertions(+), 18 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
index 16ac2dc536..97093762d9 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
@@ -15,7 +15,7 @@
 					:disabled="autoFill || isExisting"
 					db-safe
 				>
-					<template #append>
+					<template #append v-if="!isExisting">
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
 								<v-icon
@@ -56,6 +56,10 @@
 							</v-list>
 						</v-menu>
 					</template>
+
+					<template #input v-if="isExisting">
+						<v-text-overflow :text="junctionCollection" />
+					</template>
 				</v-input>
 			</div>
 			<div class="field">
@@ -72,7 +76,11 @@
 					:multiple-preview-threshold="0"
 				/>
 			</div>
-			<v-input disabled :value="relations[0].one_primary" />
+			<v-input disabled>
+				<template #input>
+					<v-text-overflow :text="relations[0].one_primary" />
+				</template>
+			</v-input>
 			<v-input
 				:class="{ matches: junctionFieldExists(relations[0].many_field) }"
 				v-model="relations[0].many_field"
@@ -81,7 +89,7 @@
 				:disabled="autoFill || isExisting"
 				db-safe
 			>
-				<template #append v-if="junctionCollectionExists">
+				<template #append v-if="junctionCollectionExists && !isExisting">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
 							<v-icon
@@ -107,6 +115,10 @@
 						</v-list>
 					</v-menu>
 				</template>
+
+				<template #input v-if="isExisting">
+					<v-text-overflow :text="relations[0].many_field" />
+				</template>
 			</v-input>
 			<div class="related-collections-preview">{{ (relations[1].one_allowed_collections || []).join(', ') }}</div>
 			<div class="spacer" />
@@ -119,7 +131,7 @@
 				:disabled="autoFill || isExisting"
 				db-safe
 			>
-				<template #append v-if="junctionCollectionExists">
+				<template #append v-if="junctionCollectionExists && !isExisting">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
 							<v-icon
@@ -145,6 +157,10 @@
 						</v-list>
 					</v-menu>
 				</template>
+
+				<template #input v-if="isExisting">
+					<v-text-overflow :text="relations[1].one_collection_field" />
+				</template>
 			</v-input>
 			<div class="spacer" />
 			<v-input
@@ -155,7 +171,7 @@
 				:disabled="autoFill || isExisting"
 				db-safe
 			>
-				<template #append v-if="junctionCollectionExists">
+				<template #append v-if="junctionCollectionExists && !isExisting">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
 							<v-icon
@@ -181,6 +197,10 @@
 						</v-list>
 					</v-menu>
 				</template>
+
+				<template #input v-if="isExisting">
+					<v-text-overflow :text="relations[1].many_field" />
+				</template>
 			</v-input>
 			<v-input disabled :value="$t('primary_key')" />
 			<div class="spacer" />
@@ -199,7 +219,7 @@
 				:placeholder="$t('add_sort_field') + '...'"
 				db-safe
 			>
-				<template #append v-if="junctionCollectionExists">
+				<template #append v-if="junctionCollectionExists && !isExisting">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
 							<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index 2f7b0c5b67..272f864662 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -15,7 +15,7 @@
 					:disabled="autoFill || isExisting"
 					db-safe
 				>
-					<template #append>
+					<template #append v-if="!isExisting">
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
 								<v-icon
@@ -56,6 +56,10 @@
 							</v-list>
 						</v-menu>
 					</template>
+
+					<template #input v-if="isExisting">
+						<v-text-overflow :text="junctionCollection" />
+					</template>
 				</v-input>
 			</div>
 			<div class="field">
@@ -71,7 +75,7 @@
 				>
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
-							<template #activator="{ toggle }">
+							<template #activator="{ toggle }" v-if="!isExisting">
 								<v-icon
 									name="list_alt"
 									@click="toggle"
@@ -110,6 +114,10 @@
 							</v-list>
 						</v-menu>
 					</template>
+
+					<template #input v-if="isExisting">
+						<v-text-overflow :text="relations[1].one_collection" />
+					</template>
 				</v-input>
 			</div>
 			<v-input disabled :value="relations[0].one_primary" />
@@ -121,7 +129,7 @@
 				:disabled="autoFill || isExisting"
 				db-safe
 			>
-				<template #append v-if="junctionCollectionExists">
+				<template #append v-if="junctionCollectionExists && !isExisting">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
 							<v-icon
@@ -147,6 +155,10 @@
 						</v-list>
 					</v-menu>
 				</template>
+
+				<template #input v-if="isExisting">
+					<v-text-overflow :text="relations[0].many_field" />
+				</template>
 			</v-input>
 			<div class="spacer" />
 			<div class="spacer" />
@@ -158,7 +170,7 @@
 				:disabled="autoFill || isExisting"
 				db-safe
 			>
-				<template #append v-if="junctionCollectionExists">
+				<template #append v-if="junctionCollectionExists && !isExisting">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
 							<v-icon
@@ -184,6 +196,10 @@
 						</v-list>
 					</v-menu>
 				</template>
+
+				<template #input v-if="isExisting">
+					<v-text-overflow :text="relations[1].many_field" />
+				</template>
 			</v-input>
 			<v-input
 				db-safe
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
index bcb5eba849..8a72831073 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
@@ -1,6 +1,5 @@
 <template>
 	<div>
-
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -17,7 +16,7 @@
 					:disabled="isExisting"
 					:placeholder="$t('collection') + '...'"
 				>
-					<template #append>
+					<template #append v-if="!isExisting">
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
 								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
@@ -53,16 +52,28 @@
 							</v-list>
 						</v-menu>
 					</template>
+
+					<template #input v-if="isExisting">
+						<v-text-overflow :text="relations[0].one_collection" />
+					</template>
 				</v-input>
 			</div>
-			<v-input disabled :value="relations[0].many_field" />
+			<v-input disabled>
+				<template #input>
+					<v-text-overflow :text="relations[0].many_field" />
+				</template>
+			</v-input>
 			<v-input
 				db-safe
 				:disabled="relatedCollectionExists"
 				v-model="relations[0].one_primary"
 				:nullable="false"
 				:placeholder="$t('primary_key') + '...'"
-			/>
+			>
+				<template #input>
+					<v-text-overflow :text="relations[0].one_primary" />
+				</template>
+			</v-input>
 			<v-icon class="arrow" name="arrow_back" />
 		</div>
 
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
index f9165717ed..28edbff65a 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -15,7 +15,7 @@
 					:disabled="isExisting"
 					:class="{ matches: relatedCollectionExists }"
 				>
-					<template #append>
+					<template #append v-if="!isExisting">
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
 								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
@@ -51,9 +51,17 @@
 							</v-list>
 						</v-menu>
 					</template>
+
+					<template #input v-if="isExisting">
+						<v-text-overflow :text="relations[0].many_collection" />
+					</template>
 				</v-input>
 			</div>
-			<v-input disabled :value="currentCollectionPrimaryKey.field" />
+			<v-input disabled :value="currentCollectionPrimaryKey.field">
+				<template #input>
+					<v-text-overflow :text="currentCollectionPrimaryKey.field" />
+				</template>
+			</v-input>
 			<v-input
 				db-safe
 				v-model="relations[0].many_field"
@@ -62,7 +70,7 @@
 				:placeholder="$t('foreign_key') + '...'"
 				:class="{ matches: relatedFieldExists }"
 			>
-				<template #append v-if="fields && fields.length > 0">
+				<template #append v-if="fields && fields.length > 0 && !isExisting">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
 							<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
@@ -83,6 +91,10 @@
 						</v-list>
 					</v-menu>
 				</template>
+
+				<template #input v-if="isExisting">
+					<v-text-overflow :text="relations[0].many_field" />
+				</template>
 			</v-input>
 			<v-icon class="arrow" name="arrow_forward" />
 		</div>
@@ -110,7 +122,7 @@
 				:placeholder="$t('add_sort_field') + '...'"
 				:class="{ matches: sortFieldExists }"
 			>
-				<template #append v-if="fields && fields.length > 0">
+				<template #append v-if="fields && fields.length > 0 && !isExisting">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
 							<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />