Filter out circular fields in relational drawer-item use (#5067)

Fixes #2961

app/src/interfaces/files/files.vue

@@ -58,6 +58,7 @@
 			:edits="editsAtStart"
 			:related-primary-key="relatedPrimaryKey || '+'"
 			:junction-field="relationInfo.junctionField"
+			:circular-field="junction.many_field"
 			@input="stageEdits"
 			@update:active="cancelEdit"
 		/>

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

@@ -96,7 +96,6 @@
 			@input="stageSelection"
 			@update:active="selectingFrom = null"
 		/>
-		<!-- :filters="selectionFilters" -->
 
 		<drawer-item
 			v-if="!disabled"
@@ -106,6 +105,7 @@
 			:related-primary-key="relatedPrimaryKey || '+'"
 			:junction-field="o2mRelation.junction_field"
 			:edits="editsAtStart"
+			:circular-field="o2mRelation.many_field"
 			@input="stageEdits"
 			@update:active="cancelEdit"
 		/>

app/src/interfaces/many-to-many/many-to-many.vue

@@ -56,6 +56,7 @@
 			:related-primary-key="relatedPrimaryKey || '+'"
 			:junction-field="relationInfo.junctionField"
 			:edits="editsAtStart"
+			:circular-field="junction.many_field"
 			@input="stageEdits"
 			@update:active="cancelEdit"
 		/>

app/src/interfaces/many-to-one/many-to-one.vue

@@ -69,6 +69,7 @@
 			:collection="relatedCollection.collection"
 			:primary-key="currentPrimaryKey"
 			:edits="edits"
+			:circular-field="relation.one_field"
 			@input="stageEdits"
 		/>
 

app/src/interfaces/one-to-many/one-to-many.vue

@@ -54,6 +54,7 @@
 			:collection="relatedCollection.collection"
 			:primary-key="currentlyEditing || '+'"
 			:edits="editsAtStart"
+			:circular-field="relation.many_field"
 			@input="stageEdits"
 			@update:active="cancelEdit"
 		/>

app/src/interfaces/translations/translations.vue

@@ -22,6 +22,7 @@
 			:collection="translationsCollection"
 			:primary-key="editing"
 			:edits="edits"
+			:circular-field="translationsRelation.many_field"
 			@input="stageEdits"
 			@update:active="cancelEdit"
 		/>

app/src/interfaces/tree-view/item-preview.vue

@@ -12,6 +12,7 @@
 			:collection="collection"
 			:primary-key="item[primaryKeyField] || '+'"
 			:edits="item"
+			:circular-field="parentField"
 			@input="$emit('input', $event)"
 		/>
 	</div>
@@ -44,6 +45,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		parentField: {
+			type: String,
+			required: true,
+		},
 	},
 	setup(props, { emit }) {
 		const editActive = ref(false);

app/src/interfaces/tree-view/nested-draggable.vue

@@ -21,6 +21,7 @@
 				:collection="collection"
 				:primary-key-field="primaryKeyField"
 				:disabled="disabled"
+				:parent-field="parentField"
 				@input="replaceItem(index, $event)"
 				@deselect="removeItem(index)"
 			/>
@@ -29,6 +30,7 @@
 				:template="template"
 				:collection="collection"
 				:primary-key-field="primaryKeyField"
+				:parent-field="parentField"
 				:children-field="childrenField"
 				:disabled="disabled"
 				@change="$emit('change', $event)"
@@ -68,6 +70,10 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		parentField: {
+			type: String,
+			required: true,
+		},
 		childrenField: {
 			type: String,
 			required: true,

app/src/interfaces/tree-view/tree-view.vue

@@ -10,6 +10,7 @@
 			:tree="stagedValues || []"
 			:primary-key-field="primaryKeyField.field"
 			:children-field="relation.one_field"
+			:parent-field="relation.many_field"
 			:disabled="disabled"
 			root
 			@change="onDraggableChange"
@@ -29,6 +30,7 @@
 			:collection="collection"
 			:primary-key="'+'"
 			:edits="{}"
+			:circular-field="relation.many_field"
 			@input="addNew"
 			@update:active="addNewActive = false"
 		/>

app/src/views/private/components/drawer-item/drawer-item.vue

@@ -76,6 +76,13 @@ export default defineComponent({
 			type: [String, Number],
 			default: '+',
 		},
+
+		// If this drawer-item is opened from a relational interface, we need to force-block the field
+		// that relates back to the parent item.
+		circularField: {
+			type: String,
+			default: null,
+		},
 	},
 	setup(props, { emit }) {
 		const fieldsStore = useFieldsStore();
@@ -120,12 +127,22 @@ export default defineComponent({
 			computed(() => props.primaryKey === '+')
 		);
 
-		const { fields } = usePermissions(
+		const { fields: fieldsWithPermissions } = usePermissions(
 			collection,
 			item,
 			computed(() => props.primaryKey === '+')
 		);
 
+		const fields = computed(() => {
+			if (props.circularField) {
+				return fieldsWithPermissions.value.filter((field) => {
+					return field.field !== props.circularField;
+				});
+			} else {
+				return fieldsWithPermissions.value;
+			}
+		});
+
 		const templatePrimaryKey = computed(() =>
 			junctionFieldInfo.value ? String(props.relatedPrimaryKey) : String(props.primaryKey)
 		);