From 54a3fb3b12a1f789d529c4686bedccb5c541c34e Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 13 Jan 2021 17:10:38 -0500
Subject: [PATCH 1/6] Default to primary key for related values display

Fixes #3470
---
 app/src/displays/related-values/index.ts       |  6 ++++--
 .../displays/related-values/related-values.vue | 18 +++++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/app/src/displays/related-values/index.ts b/app/src/displays/related-values/index.ts
index 99c24dfa7e..f421f220f6 100644
--- a/app/src/displays/related-values/index.ts
+++ b/app/src/displays/related-values/index.ts
@@ -20,13 +20,15 @@ export default defineDisplay(({ i18n }) => ({
 	options: options,
 	types: ['alias', 'string', 'uuid', 'integer', 'bigInteger', 'json'],
 	groups: ['m2m', 'm2o', 'o2m'],
-	fields: (options: Options, { field, collection }) => {
+	fields: (options: Options | null, { field, collection }) => {
 		const relatedCollection = getRelatedCollection(collection, field);
 		const { primaryKeyField } = useCollection(ref(relatedCollection as string));
 
 		if (!relatedCollection) return [];
 
-		const fields = adjustFieldsForDisplays(getFieldsFromTemplate(options.template), relatedCollection);
+		const fields = options?.template
+			? adjustFieldsForDisplays(getFieldsFromTemplate(options.template), relatedCollection)
+			: [];
 
 		if (fields.includes(primaryKeyField.value.field) === false) {
 			fields.push(primaryKeyField.value.field);
diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index 2b262bcfaa..b8994ad526 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -1,6 +1,10 @@
 <template>
 	<value-null v-if="!relatedCollection" />
-	<v-menu v-else-if="type.toLowerCase() === 'o2m' || type.toLowerCase() === 'm2m'" show-arrow :disabled="value.length === 0">
+	<v-menu
+		v-else-if="type.toLowerCase() === 'o2m' || type.toLowerCase() === 'm2m'"
+		show-arrow
+		:disabled="value.length === 0"
+	>
 		<template #activator="{ toggle }">
 			<span @click.stop="toggle" class="toggle" :class="{ subdued: value.length === 0 }">
 				<span class="label">{{ $tc('item_count', value.length) }}</span>
@@ -10,7 +14,7 @@
 		<v-list>
 			<v-list-item v-for="item in value" :key="item[primaryKeyField]" :to="getLinkForItem(item)">
 				<v-list-item-content>
-					<render-template :template="template" :item="item" :collection="relatedCollection" />
+					<render-template :template="_template" :item="item" :collection="relatedCollection" />
 				</v-list-item-content>
 				<v-list-item-icon>
 					<v-icon name="launch" small />
@@ -18,7 +22,7 @@
 			</v-list-item>
 		</v-list>
 	</v-menu>
-	<render-template v-else :template="template" :item="value" :collection="relatedCollection" />
+	<render-template v-else :template="_template" :item="value" :collection="relatedCollection" />
 </template>
 
 <script lang="ts">
@@ -44,7 +48,7 @@ export default defineComponent({
 		},
 		template: {
 			type: String,
-			required: true,
+			default: null,
 		},
 		type: {
 			type: String,
@@ -62,7 +66,11 @@ export default defineComponent({
 			}
 		});
 
-		return { relatedCollection, primaryKeyField, getLinkForItem };
+		const _template = computed(() => {
+			return props.template || `{{ ${primaryKeyField.value.field} }}`;
+		});
+
+		return { relatedCollection, primaryKeyField, getLinkForItem, _template };
 
 		function getLinkForItem(item: any) {
 			if (!relatedCollection.value || !primaryKeyField.value) return null;

From 3503b7c7218eac56c457edbba6432fa09c0e9794 Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Fri, 18 Dec 2020 14:50:01 +0100
Subject: [PATCH 2/6] Reset value of v-input to NULL if input is empty

---
 app/src/components/v-input/v-input.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/src/components/v-input/v-input.vue b/app/src/components/v-input/v-input.vue
index e01adcd716..681061482a 100644
--- a/app/src/components/v-input/v-input.vue
+++ b/app/src/components/v-input/v-input.vue
@@ -84,6 +84,10 @@ export default defineComponent({
 			type: [String, Number],
 			default: null,
 		},
+		nullable: {
+			type: Boolean,
+			default: true,
+		},
 		slug: {
 			type: Boolean,
 			default: false,
@@ -197,6 +201,11 @@ export default defineComponent({
 		function emitValue(event: InputEvent) {
 			let value = (event.target as HTMLInputElement).value;
 
+			if (props.nullable === true && value === '') {
+				emit('input', null);
+				return;
+			}
+
 			if (props.type === 'number') {
 				emit('input', Number(value));
 			} else {

From d5890df4c2299d996e142cdc54ff0604b4427542 Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Mon, 28 Dec 2020 01:27:02 +0100
Subject: [PATCH 3/6] Add Nullable option to text-input interface

---
 app/src/interfaces/text-input/index.ts       | 15 +++++++++++++++
 app/src/interfaces/text-input/text-input.vue |  5 +++++
 app/src/lang/translations/en-US.yaml         |  2 ++
 3 files changed, 22 insertions(+)

diff --git a/app/src/interfaces/text-input/index.ts b/app/src/interfaces/text-input/index.ts
index 8baee8cbcb..8c42f14269 100644
--- a/app/src/interfaces/text-input/index.ts
+++ b/app/src/interfaces/text-input/index.ts
@@ -87,5 +87,20 @@ export default defineInterface(({ i18n }) => ({
 				default_value: false,
 			},
 		},
+		{
+			field: 'nullable',
+			name: i18n.t('interfaces.text-input.nullable'),
+			type: 'boolean',
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+				options: {
+					label: i18n.t('interfaces.text-input.nullable_label'),
+				},
+			},
+			schema: {
+				default_value: true,
+			},
+		},
 	],
 }));
diff --git a/app/src/interfaces/text-input/text-input.vue b/app/src/interfaces/text-input/text-input.vue
index a966c608e1..2b0342cd24 100644
--- a/app/src/interfaces/text-input/text-input.vue
+++ b/app/src/interfaces/text-input/text-input.vue
@@ -1,6 +1,7 @@
 <template>
 	<v-input
 		:value="value"
+		:nullable="nullable"
 		:placeholder="placeholder"
 		:disabled="disabled"
 		:trim="trim"
@@ -38,6 +39,10 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		nullable: {
+			type: Boolean,
+			default: true,
+		},
 		disabled: {
 			type: Boolean,
 			default: false,
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 1b878e0c7b..d182877cd3 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -917,6 +917,8 @@ interfaces:
     trim_label: Trim the start and end
     mask: Masked
     mask_label: Hide the real value
+    nullable: Nullable
+    nullable_label: Send NULL as empty
   textarea:
     textarea: Textarea
     description: Enter multiline plain-text

From 1d51dcf13d79c80cf7dd575e8293c0e63489f3c8 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Mon, 28 Dec 2020 10:11:35 -0500
Subject: [PATCH 4/6] Update app/src/lang/translations/en-US.yaml

---
 app/src/lang/translations/en-US.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index d182877cd3..f0e41d3fdf 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -918,7 +918,7 @@ interfaces:
     mask: Masked
     mask_label: Hide the real value
     nullable: Nullable
-    nullable_label: Send NULL as empty
+    nullable_label: Save empty value as NULL
   textarea:
     textarea: Textarea
     description: Enter multiline plain-text

From 890d5338f2e003d46296c7ef32070cf2033e4e5c Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 13 Jan 2021 17:31:40 -0500
Subject: [PATCH 5/6] Tweak equality check of input nullable

---
 app/src/components/v-input/v-input.vue             | 2 +-
 app/src/displays/related-values/related-values.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/components/v-input/v-input.vue b/app/src/components/v-input/v-input.vue
index 681061482a..893285f36d 100644
--- a/app/src/components/v-input/v-input.vue
+++ b/app/src/components/v-input/v-input.vue
@@ -201,7 +201,7 @@ export default defineComponent({
 		function emitValue(event: InputEvent) {
 			let value = (event.target as HTMLInputElement).value;
 
-			if (props.nullable === true && value === '') {
+			if (props.nullable === true && !value) {
 				emit('input', null);
 				return;
 			}
diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index b8994ad526..7679691ca8 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -67,7 +67,7 @@ export default defineComponent({
 		});
 
 		const _template = computed(() => {
-			return props.template || `{{ ${primaryKeyField.value.field} }}`;
+			return props.template || `{{ ${primaryKeyField.value!.field} }}`;
 		});
 
 		return { relatedCollection, primaryKeyField, getLinkForItem, _template };

From f05e264c854f274ab81d97ddc0844a2fce94435b Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 13 Jan 2021 17:44:57 -0500
Subject: [PATCH 6/6] Fix datetime interface displayvalue not initializing on
 load

Fixes #3137, fixes #3252
---
 app/src/interfaces/datetime/datetime.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/interfaces/datetime/datetime.vue b/app/src/interfaces/datetime/datetime.vue
index 68f7ec3663..5b95946a5e 100644
--- a/app/src/interfaces/datetime/datetime.vue
+++ b/app/src/interfaces/datetime/datetime.vue
@@ -256,7 +256,7 @@ export default defineComponent({
 		function useDisplayValue() {
 			const displayValue = ref<string | null>(null);
 
-			watch(_value, setDisplayValue);
+			watch(_value, setDisplayValue, { immediate: true });
 
 			return { displayValue };