Fix v-field-select not using _value

app/src/components/v-field-select/v-field-select.vue

@@ -1,5 +1,8 @@
 <template>
-	<draggable v-model="selectedFields" draggable=".draggable" :set-data="hideDragImage" class="v-field-select">
+	<v-notice v-if="!availableFields || availableFields.length === 0">
+		{{ $t('no_fields_in_collection', { collection: (collectionInfo && collectionInfo.name) || collection }) }}
+	</v-notice>
+	<draggable v-else v-model="selectedFields" draggable=".draggable" :set-data="hideDragImage" class="v-field-select">
 		<v-chip
 			v-for="(field, index) in selectedFields"
 			:key="index"
@@ -9,27 +12,21 @@
 		>
 			{{ field.name }}
 		</v-chip>
-		<v-menu
-			show-arrow
-			v-model="menuActive"
-			v-show="selectableFields.length > 0"
-			slot="footer"
-			class="add"
-			placement="bottom-end"
-		>
+		<v-menu show-arrow v-model="menuActive" slot="footer" class="add" placement="bottom">
 			<template #activator="{ toggle }">
-				<v-chip @click="toggle">
-					<v-icon name="add" />
-				</v-chip>
+				<v-button @click="toggle" small>
+					{{ $t('add_field') }}
+					<v-icon small name="add" />
+				</v-button>
 			</template>
 
 			<v-list dense>
 				<field-list-item
-					@add="addField"
-					v-for="field in selectableFields"
-					:key="field.field"
+					v-for="field in availableFields"
+					:key="field.collection + field.field"
 					:field="field"
 					:depth="depth"
+					@add="addField"
 				/>
 			</v-list>
 		</v-menu>
@@ -87,7 +84,7 @@ export default defineComponent({
 
 		const selectedFields = computed({
 			get() {
-				return props.value.map((field) => ({
+				return _value.value.map((field) => ({
 					field,
 					name: findTree(tree.value, field.split('.'))?.name as string,
 				}));
@@ -97,11 +94,20 @@ export default defineComponent({
 			},
 		});
 
-		const selectableFields = computed(() => {
-			return filterTree(tree.value, (field, prefix) => props.value.includes(prefix + field.field) === false);
+		const availableFields = computed(() => {
+			return filterTree(tree.value);
 		});
 
-		return { menuActive, addField, removeField, selectableFields, selectedFields, hideDragImage, tree };
+		return {
+			menuActive,
+			addField,
+			removeField,
+			availableFields,
+			selectedFields,
+			hideDragImage,
+			tree,
+			collectionInfo: info,
+		};
 
 		function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
 			if (tree === undefined) return undefined;
@@ -113,23 +119,18 @@ export default defineComponent({
 			return findTree(fieldObject.children, fieldSections.slice(1));
 		}
 
-		function filterTree(
-			tree: FieldTree[] | undefined,
-			f: (field: FieldTree, prefix: string) => boolean,
-			prefix = ''
-		) {
+		function filterTree(tree: FieldTree[] | undefined, prefix = '') {
 			if (tree === undefined) return undefined;
 
-			const newTree: FieldTree[] = [];
-			tree.forEach((field) => {
-				if (f(field, prefix)) {
-					newTree.push({
-						field: field.field,
-						name: field.name,
-						children: filterTree(field.children, f, prefix + field.field + '.'),
-					});
-				}
+			const newTree: FieldTree[] = tree.map((field) => {
+				return {
+					name: field.name,
+					field: field.field,
+					disabled: _value.value.includes(prefix + field.field),
+					children: filterTree(field.children, prefix + field.field + '.'),
+				};
 			});
+
 			return newTree.length === 0 ? undefined : newTree;
 		}