Merge branch 'user-invite' of https://github.com/directus/next into user-invite

app/src/displays/datetime/datetime.vue

@@ -20,6 +20,10 @@ export default defineComponent({
 			required: true,
 			validator: (val: string) => ['dateTime', 'date', 'time', 'timestamp'].includes(val),
 		},
+		format: {
+			type: String,
+			default: 'long',
+		},
 		relative: {
 			type: Boolean,
 			default: false,
@@ -57,9 +61,18 @@ export default defineComponent({
 						addSuffix: true,
 					});
 				} else {
-					let format = `${i18n.t('date-fns_date')} ${i18n.t('date-fns_time')}`;
-					if (props.type === 'date') format = String(i18n.t('date-fns_date'));
-					if (props.type === 'time') format = String(i18n.t('date-fns_time'));
+					let format;
+					if (props.format === 'long') {
+						format = `${i18n.t('date-fns_date')} ${i18n.t('date-fns_time')}`;
+						if (props.type === 'date') format = String(i18n.t('date-fns_date'));
+						if (props.type === 'time') format = String(i18n.t('date-fns_time'));
+					} else if (props.format === 'short') {
+						format = `${i18n.t('date-fns_date_short')} ${i18n.t('date-fns_time_short')}`;
+						if (props.type === 'date') format = String(i18n.t('date-fns_date_short'));
+						if (props.type === 'time') format = String(i18n.t('date-fns_time_short'));
+					} else {
+						format = props.format;
+					}
 
 					displayValue.value = await localizedFormat(newValue, format);
 				}

app/src/displays/datetime/index.ts

@@ -8,11 +8,32 @@ export default defineDisplay(({ i18n }) => ({
 	icon: 'query_builder',
 	handler: DisplayDateTime,
 	options: [
+		{
+			field: 'format',
+			name: i18n.t('displays.datetime.format'),
+			type: 'string',
+			meta: {
+				interface: 'dropdown',
+				width: 'half',
+				options: {
+					choices: [
+						{ text: i18n.t('displays.datetime.long'), value: 'long' },
+						{ text: i18n.t('displays.datetime.short'), value: 'short' },
+					],
+					allowOther: true,
+				},
+				note: i18n.t('displays.datetime.format_note'),
+			},
+			schema: {
+				default_value: 'long',
+			},
+		},
 		{
 			field: 'relative',
 			name: i18n.t('displays.datetime.relative'),
 			type: 'boolean',
 			meta: {
+				width: 'half',
 				interface: 'toggle',
 				options: {
 					label: i18n.t('displays.datetime.relative_label'),

app/src/interfaces/many-to-many/use-relation.ts

@@ -20,11 +20,18 @@ export default function useRelation(collection: Ref<string>, field: Ref<string>)
 	});
 
 	const junction = computed(() => {
-		return relations.value.find((relation) => relation.one_collection === collection.value) as Relation;
+		return relations.value.find(
+			(relation) => relation.one_collection === collection.value && relation.one_field === field.value
+		) as Relation;
 	});
 
 	const relation = computed(() => {
-		return relations.value.find((relation) => relation.one_collection !== collection.value) as Relation;
+		return relations.value.find(
+			(relation) =>
+				relation.many_collection === junction.value.many_collection &&
+				relation.many_field !== junction.value.many_field &&
+				relation.many_field === junction.value.junction_field
+		) as Relation;
 	});
 
 	const junctionCollection = computed(() => {

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

@@ -26,6 +26,10 @@
 		"datetime": {
 			"datetime": "Datetime",
 			"description": "Display values related to time",
+			"format": "Format",
+			"format_note": "The custom format accetps the __[Date Field Symbol Table](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table)__",
+			"long": "Long",
+			"short": "Short",
 			"relative": "Relative",
 			"relative_label": "Show relative time, eg: 5 minutes ago"
 		},

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

@@ -32,10 +32,10 @@
 	"create_webhook": "Create Webhook",
 
 	"invite_users": "Invite Users",
-	"add_to_invite_user": "admin@example.com, user@example.com...",
+	"email_examples": "admin@example.com, user@example.com...",
 	"invite": "Invite",
 	"emails": "Emails",
-	
+
 	"connection_excellent": "Excellent Connection",
 	"connection_good": "Good Connection",
 	"connection_fair": "Fair Connection",
@@ -393,8 +393,9 @@
 
 	"date-fns_datetime": "PPP h:mma",
 	"date-fns_date": "PPP",
-	"date-fns_time": "h:mma",
+	"date-fns_time": "h:mm:ss a",
 	"date-fns_date_short": "MMM d, u",
+	"date-fns_time_short": "h:mma",
 	"date-fns_date_short_no_year": "MMM d",
 	"month": "Month",
 	"year": "Year",

app/src/modules/collections/routes/item.vue

@@ -10,7 +10,12 @@
 			</h1>
 		</template>
 
-		<template #title v-else-if="isNew === false && isBatch === false && collectionInfo.meta.display_template">
+		<template
+			#title
+			v-else-if="
+				isNew === false && isBatch === false && collectionInfo.meta && collectionInfo.meta.display_template
+			"
+		>
 			<v-skeleton-loader class="title-loader" type="text" v-if="loading" />
 
 			<h1 class="type-title" v-else>

app/src/modules/settings/routes/data-model/fields/components/field-select.vue

@@ -207,6 +207,7 @@ import { getInterfaces } from '@/interfaces';
 import router from '@/router';
 import notify from '@/utils/notify';
 import { i18n } from '@/lang';
+import { cloneDeep } from 'lodash';
 import { getLocalTypeForField } from '../../get-local-type';
 
 export default defineComponent({
@@ -323,8 +324,8 @@ export default defineComponent({
 			};
 
 			async function saveDuplicate() {
-				const newField: any = {
-					...props.field,
+				const newField: Record<string, any> = {
+					...cloneDeep(props.field),
 					field: duplicateName.value,
 					collection: duplicateTo.value,
 				};
@@ -334,6 +335,10 @@ export default defineComponent({
 					delete newField.meta.sort;
 				}
 
+				if (newField.schema) {
+					delete newField.schema.comment;
+				}
+
 				delete newField.name;
 
 				duplicating.value = true;

app/src/views/private/components/users-invite/users-invite.vue

@@ -8,7 +8,7 @@
 					<div class="type-label">{{ $t('emails') }}</div>
 					<interface-tags
 						v-model="emails"
-						:placeholder="$t('add_to_invite_user')"
+						:placeholder="$t('email_examples')"
 						icon-right="email"
 						whitespace=""
 					/>