Add prefix option to list-m2a (#19441)

* Add prefix option to m2a

* clean up

* Format file

* Add changeset

* Update app/src/lang/translations/en-US.yaml

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

---------

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
Co-authored-by: Brainslug <br41nslug@users.noreply.github.com>

.changeset/eighty-ants-attack.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': minor
+---
+
+Added a option to the M2A interface allowing to set custom prefix instead of the collection name

app/src/interfaces/list-m2a/index.ts

@@ -11,7 +11,7 @@ export default defineInterface({
 	types: ['alias'],
 	localTypes: ['m2a'],
 	group: 'relational',
-	options: [
+	options: ({ editing, relations }) => [
 		{
 			field: 'enableSelect',
 			name: '$t:selecting_items',
@@ -63,6 +63,25 @@ export default defineInterface({
 				width: 'half',
 			},
 		},
+		{
+			field: 'prefix',
+			name: '$t:prefix',
+			meta:
+				editing === '+'
+					? {
+							interface: 'presentation-notice',
+							options: {
+								text: '$t:interfaces.list-m2m.display_template_configure_notice',
+							},
+					  }
+					: {
+							interface: 'system-display-template',
+							note: '$t:interfaces.list-m2a.prefix_note',
+							options: {
+								collectionName: relations.o2m?.collection,
+							},
+					  },
+		},
 	],
 	preview: PreviewSVG,
 });

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

@@ -31,7 +31,7 @@
 						@click="editItem(element)"
 					>
 						<v-icon v-if="allowDrag" class="drag-handle" left name="drag_handle" @click.stop />
-						<span class="collection">{{ getCollectionName(element) }}:</span>
+						<span class="collection">{{ getPrefix(element) }}:</span>
 						<render-template
 							:collection="element[relationInfo.collectionField.field]"
 							:template="templates[element[relationInfo.collectionField.field]]"
@@ -144,6 +144,7 @@ import { useRelationPermissionsM2A } from '@/composables/use-relation-permission
 import { addRelatedPrimaryKeyToFields } from '@/utils/add-related-primary-key-to-fields';
 import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { hideDragImage } from '@/utils/hide-drag-image';
+import { renderStringTemplate } from '@/utils/render-string-template';
 import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
 import { Filter } from '@directus/types';
@@ -163,6 +164,7 @@ const props = withDefaults(
 		enableCreate?: boolean;
 		enableSelect?: boolean;
 		limit?: number;
+		prefix?: string;
 		allowDuplicates?: boolean;
 	}>(),
 	{
@@ -217,6 +219,10 @@ const fields = computed(() => {
 		fields.push(...addRelatedPrimaryKeyToFields(collection.collection, displayFields));
 	}
 
+	if (props.prefix) {
+		fields.push(...getFieldsFromTemplate(props.prefix));
+	}
+
 	return fields;
 });
 
@@ -375,7 +381,9 @@ function hasAllowedCollection(item: DisplayItem) {
 	);
 }
 
-function getCollectionName(item: DisplayItem) {
+function getPrefix(item: DisplayItem) {
+	if (props.prefix) return renderStringTemplate(props.prefix, item).displayValue.value;
+
 	const info = relationInfo.value;
 	if (!info) return false;
 

app/src/lang/translations/en-US.yaml

@@ -1506,6 +1506,8 @@ undo_removed_item: Undo Removed Item
 remove_item: Remove Item
 delete_item: Delete Item
 interfaces:
+  list-m2a:
+    prefix_note: Uses the related item's collection name by default.
   filter:
     name: Filter
     description: Configure a filter object.