Merge pull request #3815 from nickrum/nullable-fixes

Nullable fixes

app/src/components/v-upload/v-upload.vue

@@ -68,7 +68,7 @@
 					<v-card>
 						<v-card-title>{{ $t('import_from_url') }}</v-card-title>
 						<v-card-text>
-							<v-input :placeholder="$t('url')" v-model="url" :disabled="urlLoading" />
+							<v-input :placeholder="$t('url')" v-model="url" :nullable="false" :disabled="urlLoading" />
 						</v-card-text>
 						<v-card-actions>
 							<v-button :disabled="urlLoading" @click="activeDialog = null" secondary>
@@ -161,9 +161,7 @@ export default defineComponent({
 					if (props.multiple === true) {
 						const uploadedFiles = await uploadFiles(Array.from(files), {
 							onProgressChange: (percentage) => {
-								progress.value = Math.round(
-									percentage.reduce((acc, cur) => (acc += cur)) / files.length
-								);
+								progress.value = Math.round(percentage.reduce((acc, cur) => (acc += cur)) / files.length);
 								done.value = percentage.filter((p) => p === 100).length;
 							},
 							preset: props.preset,

app/src/interfaces/_system/tfa-setup/tfa-setup.vue

@@ -15,7 +15,7 @@
 						{{ $t('enter_password_to_enable_tfa') }}
 					</v-card-title>
 					<v-card-text>
-						<v-input v-model="password" type="password" :placeholder="$t('password')" />
+						<v-input v-model="password" :nullable="false" type="password" :placeholder="$t('password')" />
 
 						<v-error v-if="error" :error="error" />
 					</v-card-text>
@@ -48,7 +48,7 @@
 					{{ $t('enter_otp_to_disable_tfa') }}
 				</v-card-title>
 				<v-card-text>
-					<v-input type="text" :placeholder="$t('otp')" v-model="otp" />
+					<v-input type="text" :placeholder="$t('otp')" v-model="otp" :nullable="false" />
 				</v-card-text>
 				<v-card-actions>
 					<v-button class="disable" :loading="loading" @click="disableTFA" :disabled="otp.length !== 6">

app/src/interfaces/file/file.vue

@@ -107,7 +107,7 @@
 			<v-card>
 				<v-card-title>{{ $t('import_from_url') }}</v-card-title>
 				<v-card-text>
-					<v-input :placeholder="$t('url')" v-model="url" :disabled="urlLoading" />
+					<v-input :placeholder="$t('url')" v-model="url" :nullable="false" :disabled="urlLoading" />
 				</v-card-text>
 				<v-card-actions>
 					<v-button :disabled="urlLoading" @click="activeDialog = null" secondary>

app/src/modules/collections/components/navigation-bookmark.vue

@@ -35,7 +35,9 @@
 				</v-card-text>
 				<v-card-actions>
 					<v-button secondary @click="renameActive = false">{{ $t('cancel') }}</v-button>
-					<v-button @click="renameSave" :loading="renameSaving">{{ $t('save') }}</v-button>
+					<v-button @click="renameSave" :disabled="renameValue === null" :loading="renameSaving">
+						{{ $t('save') }}
+					</v-button>
 				</v-card-actions>
 			</v-card>
 		</v-dialog>

app/src/modules/files/components/add-folder.vue

@@ -20,7 +20,7 @@
 			</v-card-text>
 			<v-card-actions>
 				<v-button secondary @click="dialogActive = false">{{ $t('cancel') }}</v-button>
-				<v-button :disabled="!newFolderName || newFolderName.length === 0" @click="addFolder" :loading="saving">
+				<v-button :disabled="newFolderName === null" @click="addFolder" :loading="saving">
 					{{ $t('save') }}
 				</v-button>
 			</v-card-actions>

app/src/modules/files/components/navigation-folder.vue

@@ -74,7 +74,9 @@
 				</v-card-text>
 				<v-card-actions>
 					<v-button secondary @click="renameActive = false">{{ $t('cancel') }}</v-button>
-					<v-button @click="renameSave" :loading="renameSaving">{{ $t('save') }}</v-button>
+					<v-button @click="renameSave" :disabled="renameValue === null" :loading="renameSaving">
+						{{ $t('save') }}
+					</v-button>
 				</v-card-actions>
 			</v-card>
 		</v-dialog>

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

@@ -12,6 +12,7 @@
 				<v-input
 					:class="{ matches: junctionCollectionExists }"
 					v-model="junctionCollection"
+					:nullable="false"
 					:placeholder="$t('collection') + '...'"
 					:disabled="autoFill || isExisting"
 					db-safe
@@ -77,6 +78,7 @@
 			<v-input
 				:class="{ matches: junctionFieldExists(relations[0].many_field) }"
 				v-model="relations[0].many_field"
+				:nullable="false"
 				:placeholder="$t('foreign_key') + '...'"
 				:disabled="autoFill || isExisting"
 				db-safe
@@ -114,6 +116,7 @@
 				class="one-collection-field"
 				:class="{ matches: junctionFieldExists(relations[0].one_collection_field) }"
 				v-model="relations[1].one_collection_field"
+				:nullable="false"
 				:placeholder="$t('collection_key') + '...'"
 				:disabled="autoFill || isExisting"
 				db-safe
@@ -149,6 +152,7 @@
 			<v-input
 				:class="{ matches: junctionFieldExists(relations[1].many_field) }"
 				v-model="relations[1].many_field"
+				:nullable="false"
 				:placeholder="$t('foreign_key') + '...'"
 				:disabled="autoFill || isExisting"
 				db-safe

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

@@ -12,6 +12,7 @@
 				<v-input
 					:class="{ matches: junctionCollectionExists }"
 					v-model="junctionCollection"
+					:nullable="false"
 					:placeholder="$t('collection') + '...'"
 					:disabled="autoFill || isExisting"
 					db-safe
@@ -65,6 +66,7 @@
 					:autofocus="autoFill"
 					:class="{ matches: relatedCollectionExists }"
 					v-model="relations[1].one_collection"
+					:nullable="false"
 					:placeholder="$t('collection') + '...'"
 					:disabled="type === 'files' || isExisting"
 					db-safe
@@ -116,6 +118,7 @@
 			<v-input
 				:class="{ matches: junctionFieldExists(relations[0].many_field) }"
 				v-model="relations[0].many_field"
+				:nullable="false"
 				:placeholder="$t('foreign_key') + '...'"
 				:disabled="autoFill || isExisting"
 				db-safe
@@ -152,6 +155,7 @@
 			<v-input
 				:class="{ matches: junctionFieldExists(relations[1].many_field) }"
 				v-model="relations[1].many_field"
+				:nullable="false"
 				:placeholder="$t('foreign_key') + '...'"
 				:disabled="autoFill || isExisting"
 				db-safe
@@ -187,6 +191,7 @@
 				db-safe
 				:disabled="relatedCollectionExists"
 				v-model="relations[1].one_primary"
+				:nullable="false"
 				:placeholder="$t('primary_key') + '...'"
 			/>
 			<div class="spacer" />
@@ -332,10 +337,7 @@ export default defineComponent({
 					return !!state.newFields.find((field: any) => field.$type === 'corresponding');
 				},
 				set(enabled: boolean) {
-					if (
-						enabled === true &&
-						!!state.newFields.find((field: any) => field.$type === 'corresponding') === false
-					) {
+					if (enabled === true && !!state.newFields.find((field: any) => field.$type === 'corresponding') === false) {
 						state.newFields = [
 							...state.newFields,
 							{

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

@@ -14,6 +14,7 @@
 					db-safe
 					key="related-collection"
 					v-model="relations[0].one_collection"
+					:nullable="false"
 					:disabled="isExisting"
 					:placeholder="$t('collection') + '...'"
 				>
@@ -60,6 +61,7 @@
 				db-safe
 				:disabled="relatedCollectionExists"
 				v-model="relations[0].one_primary"
+				:nullable="false"
 				:placeholder="$t('primary_key') + '...'"
 			/>
 			<v-icon class="arrow" name="arrow_back" />

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

@@ -13,18 +13,14 @@
 					db-safe
 					:placeholder="$t('collection') + '...'"
 					v-model="relations[0].many_collection"
+					:nullable="false"
 					:disabled="isExisting"
 					:class="{ matches: relatedCollectionExists }"
 				>
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
-								<v-icon
-									name="list_alt"
-									@click="toggle"
-									v-tooltip="$t('select_existing')"
-									:disabled="isExisting"
-								/>
+								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
 							</template>
 
 							<v-list class="monospace">
@@ -63,6 +59,7 @@
 			<v-input
 				db-safe
 				v-model="relations[0].many_field"
+				:nullable="false"
 				:disabled="isExisting"
 				:placeholder="$t('foreign_key') + '...'"
 				:class="{ matches: relatedFieldExists }"
@@ -97,12 +94,7 @@
 		<div class="corresponding" v-if="!isExisting">
 			<div class="field">
 				<div class="type-label">{{ $t('create_field') }}</div>
-				<v-checkbox
-					block
-					:disabled="isExisting"
-					:label="correspondingLabel"
-					v-model="hasCorresponding"
-				/>
+				<v-checkbox block :disabled="isExisting" :label="correspondingLabel" v-model="hasCorresponding" />
 			</div>
 			<div class="field">
 				<div class="type-label">{{ $t('field_name') }}</div>
@@ -152,9 +144,7 @@ export default defineComponent({
 		const { hasCorresponding, correspondingLabel } = useCorresponding();
 
 		const relatedCollectionExists = computed(() => {
-			return collectionsStore.state.collections.find(
-				(col) => col.collection === state.relations?.[0].many_collection
-			);
+			return collectionsStore.state.collections.find((col) => col.collection === state.relations?.[0].many_collection);
 		});
 
 		const relatedFieldExists = computed(() => {
@@ -180,8 +170,7 @@ export default defineComponent({
 				return orderBy(
 					collectionsStore.state.collections.filter((collection) => {
 						return (
-							collection.collection.startsWith('directus_') === false &&
-							collection.collection !== props.collection
+							collection.collection.startsWith('directus_') === false && collection.collection !== props.collection
 						);
 					}),
 					['collection'],
@@ -192,19 +181,14 @@ export default defineComponent({
 			const systemCollections = computed(() => {
 				return orderBy(
 					collectionsStore.state.collections.filter((collection) => {
-						return (
-							collection.collection.startsWith('directus_') === true &&
-							collection.collection !== props.collection
-						);
+						return collection.collection.startsWith('directus_') === true && collection.collection !== props.collection;
 					}),
 					['collection'],
 					['asc']
 				);
 			});
 
-			const currentCollectionPrimaryKey = computed(() =>
-				fieldsStore.getPrimaryKeyFieldForCollection(props.collection)
-			);
+			const currentCollectionPrimaryKey = computed(() => fieldsStore.getPrimaryKeyFieldForCollection(props.collection));
 
 			const fields = computed(() => {
 				if (!state.relations[0].many_collection) return [];
@@ -215,9 +199,7 @@ export default defineComponent({
 						text: field.field,
 						value: field.field,
 						disabled:
-							!field.schema ||
-							field.schema?.is_primary_key ||
-							field.type !== currentCollectionPrimaryKey.value.type,
+							!field.schema || field.schema?.is_primary_key || field.type !== currentCollectionPrimaryKey.value.type,
 					}));
 			});
 
@@ -241,16 +223,15 @@ export default defineComponent({
 
 					if (relatedFieldExists.value === true) {
 						return (
-							state.updateFields.find(
-								(updateField: any) => updateField.field === state.relations[0].many_field
-							)?.meta?.interface === 'many-to-one' ||
-							fieldsStore.getField(state.relations[0].many_collection, state.relations[0].many_field)
-								?.meta?.interface === 'many-to-one'
+							state.updateFields.find((updateField: any) => updateField.field === state.relations[0].many_field)?.meta
+								?.interface === 'many-to-one' ||
+							fieldsStore.getField(state.relations[0].many_collection, state.relations[0].many_field)?.meta
+								?.interface === 'many-to-one'
 						);
 					} else {
 						return (
-							state.newFields.find((newField: any) => newField.$type === 'manyRelated')?.meta
-								?.interface === 'many-to-one'
+							state.newFields.find((newField: any) => newField.$type === 'manyRelated')?.meta?.interface ===
+							'many-to-one'
 						);
 					}
 				},
@@ -282,9 +263,7 @@ export default defineComponent({
 							];
 						}
 					} else {
-						const newFieldCreated = !!state.newFields.find(
-							(newField: any) => newField.$type === 'manyRelated'
-						);
+						const newFieldCreated = !!state.newFields.find((newField: any) => newField.$type === 'manyRelated');
 
 						if (newFieldCreated === false) {
 							state.newFields = [

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

@@ -15,6 +15,7 @@
 					autofocus
 					class="monospace"
 					v-model="fieldData.field"
+					:nullable="false"
 					db-safe
 					:placeholder="$t('a_unique_column_name')"
 				/>

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

@@ -12,6 +12,7 @@
 				<v-input
 					:class="{ matches: junctionCollectionExists }"
 					v-model="junctionCollection"
+					:nullable="false"
 					:placeholder="$t('collection') + '...'"
 					:disabled="autoFill || isExisting"
 					db-safe
@@ -65,6 +66,7 @@
 					:autofocus="autoFill"
 					:class="{ matches: relatedCollectionExists }"
 					v-model="relations[1].one_collection"
+					:nullable="false"
 					:placeholder="$t('collection') + '...'"
 					:disabled="type === 'files' || isExisting"
 					db-safe
@@ -116,6 +118,7 @@
 			<v-input
 				:class="{ matches: junctionFieldExists(relations[0].many_field) }"
 				v-model="relations[0].many_field"
+				:nullable="false"
 				:placeholder="$t('foreign_key') + '...'"
 				:disabled="autoFill || isExisting"
 				db-safe
@@ -152,6 +155,7 @@
 			<v-input
 				:class="{ matches: junctionFieldExists(relations[1].many_field) }"
 				v-model="relations[1].many_field"
+				:nullable="false"
 				:placeholder="$t('foreign_key') + '...'"
 				:disabled="autoFill || isExisting"
 				db-safe
@@ -187,6 +191,7 @@
 				db-safe
 				:disabled="relatedCollectionExists"
 				v-model="relations[1].one_primary"
+				:nullable="false"
 				:placeholder="$t('primary_key') + '...'"
 			/>
 			<div class="spacer" />

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

@@ -172,7 +172,7 @@
 					<v-button secondary @click="duplicateActive = false">
 						{{ $t('cancel') }}
 					</v-button>
-					<v-button @click="saveDuplicate" :loading="duplicating">
+					<v-button @click="saveDuplicate" :disabled="duplicateName === null" :loading="duplicating">
 						{{ $t('duplicate') }}
 					</v-button>
 				</v-card-actions>

app/src/modules/settings/routes/roles/add-new.vue

@@ -23,7 +23,7 @@
 			</v-card-text>
 			<v-card-actions>
 				<v-button to="/settings/roles" secondary>{{ $t('cancel') }}</v-button>
-				<v-button @click="save" :loading="saving">{{ $t('save') }}</v-button>
+				<v-button @click="save" :disabled="roleName === null" :loading="saving">{{ $t('save') }}</v-button>
 			</v-card-actions>
 		</v-card>
 	</v-dialog>
@@ -38,7 +38,7 @@ import { unexpectedError } from '@/utils/unexpected-error';
 
 export default defineComponent({
 	setup() {
-		const roleName = ref<string>();
+		const roleName = ref<string | null>(null);
 		const appAccess = ref(true);
 		const adminAccess = ref(false);
 

app/src/views/private/components/filter-sidebar-detail/filter-input.vue

@@ -47,7 +47,15 @@
 		</template>
 		<template v-else-if="['empty', 'nempty'].includes(operator) === false">
 			<v-checkbox block :label="$t('active')" v-if="type === 'checkbox'" v-model="_value" :disabled="disabled" />
-			<v-input :disabled="disabled" v-else autofocus v-model="_value" :type="type" :placeholder="$t('enter_a_value')" />
+			<v-input
+				:disabled="disabled"
+				v-else
+				autofocus
+				v-model="_value"
+				:nullable="false"
+				:type="type"
+				:placeholder="$t('enter_a_value')"
+			/>
 		</template>
 	</div>
 </template>