fix repeater limit, improve recommended and update notice

app/src/interfaces/notice/index.ts

@@ -4,7 +4,7 @@ import InterfaceNotice from './notice.vue';
 export default defineInterface(({ i18n }) => ({
 	id: 'notice',
 	name: i18n.t('notice'),
-	icon: 'remove',
+	icon: 'info',
 	component: InterfaceNotice,
 	hideLabel: true,
 	hideLoader: true,

app/src/interfaces/repeater/index.ts

@@ -9,4 +9,5 @@ export default defineInterface(({ i18n }) => ({
 	component: InterfaceRepeater,
 	types: ['json'],
 	options: RepeaterOptions,
+	recommendedDisplays: ['related-values'],
 }));

app/src/interfaces/repeater/options.vue

@@ -1,9 +1,12 @@
 <template>
 	<div>
-		<p class="type-label">Template</p>
+		<p class="type-label half">{{ $t('template') }}</p>
 		<v-input class="input" v-model="template" :placeholder="`{{ field }}`" />
 
-		<p class="type-label">Fields</p>
+		<p class="type-label half">{{ $t('max-amount') }}</p>
+		<v-input class="input" type="number" v-model="limit" />
+
+		<p class="type-label">{{ $t('edit_fields') }}</p>
 		<repeater v-model="repeaterValue" :template="`{{ field }} — {{ interface }}`" :fields="repeaterFields" />
 	</div>
 </template>
@@ -115,6 +118,18 @@ export default defineComponent({
 			},
 		];
 
+		const limit = computed({
+			get() {
+				return props.value?.limit;
+			},
+			set(newLimit: string) {
+				emit('input', {
+					...(props.value || {}),
+					limit: newLimit,
+				});
+			},
+		});
+
 		const template = computed({
 			get() {
 				return props.value?.template;
@@ -127,7 +142,7 @@ export default defineComponent({
 			},
 		});
 
-		return { repeaterValue, repeaterFields, template };
+		return { repeaterValue, repeaterFields, template, limit };
 	},
 });
 </script>

app/src/interfaces/repeater/repeater.vue

@@ -60,7 +60,7 @@ export default defineComponent({
 			if (props.disabled) return false;
 			if (props.value === null) return true;
 			if (props.limit === null) return true;
-			if (Array.isArray(props.value) && props.value.length <= props.limit) return true;
+			if (Array.isArray(props.value) && props.value.length < props.limit) return true;
 			return false;
 		});
 

app/src/lang/en-US/index.json

@@ -313,6 +313,7 @@
 	"notice": "Notice",
 	"slug": "Slug",
 	"repeater": "Repeater",
+	"max-amount": "Max Amount",
 
 	"months": {
 		"january": "January",
@@ -707,6 +708,7 @@
 	"role_only": "Role Only",
 	"update": "Update",
 
+	"edit_fields": "Edit Fields",
 	"select_fields": "Select Fields",
 	"readable_fields": "Readable Fields",
 	"writable_fields": "Writable Fields",

app/src/modules/settings/routes/data-model/field-detail/components/display.vue

@@ -68,15 +68,23 @@ export default defineComponent({
 				return item;
 			});
 
-			if (displayItems.length >= 5 && recommended.length > 0) {
-				return [
-					...recommended.map((key) => displayItems.find((item) => item.value === key)),
-					{ divider: true },
-					...displayItems.filter((item) => recommended.includes(item.value as string) === false),
-				];
-			} else {
-				return displayItems;
+			const recommendedItems: (FancySelectItem | { divider: boolean } | undefined)[] = [];
+
+			const recommendedList = recommended.map((key) => displayItems.find((item) => item.value === key));
+			if (recommendedList !== undefined && recommendedList.includes(undefined) === false) {
+				recommendedItems.push(...recommendedList);
 			}
+
+			if (displayItems.length >= 5 && recommended.length > 0) {
+				recommendedItems.push({ divider: true });
+			}
+
+			const displayList = displayItems.filter((item) => recommended.includes(item.value as string) === false);
+			if (displayList !== undefined) {
+				recommendedItems.push(...displayList);
+			}
+
+			return recommendedItems;
 		});
 
 		const selectedDisplay = computed(() => {

app/src/modules/settings/routes/data-model/field-detail/components/interface.vue

@@ -85,17 +85,22 @@ export default defineComponent({
 				return item;
 			});
 
-			const recommendedItems: (FancySelectItem | { divider: boolean } | undefined)[] = [
-				...recommended.map((key) => interfaceItems.find((item) => item.value === key)),
-			];
+			const recommendedItems: (FancySelectItem | { divider: boolean } | undefined)[] = [];
+
+			const recommendedList = recommended.map((key) => interfaceItems.find((item) => item.value === key));
+			if (recommendedList !== undefined && recommendedList.includes(undefined) === false) {
+				recommendedItems.push(...recommendedList);
+			}
 
 			if (interfaceItems.length >= 5 && recommended.length > 0) {
 				recommendedItems.push({ divider: true });
 			}
 
-			recommendedItems.push(
-				...interfaceItems.filter((item) => recommended.includes(item.value as string) === false)
-			);
+			const interfaceList = interfaceItems.filter((item) => recommended.includes(item.value as string) === false);
+			if (interfaceList !== undefined) {
+				recommendedItems.push(...interfaceList);
+			}
+
 			return recommendedItems;
 		});