Fix: disable sort field for singleton collections (directus#9270)

* disable sort for singleton collections * fix modify sort then activate singleton
dimitrov-adrian · Nov 5, 2021 · 7f198de · 7f198de
1 parent e1c4659
commit 7f198de
Showing 1 changed file with 57 additions and 40 deletions.
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -80,10 +80,11 @@
 							v-model="info.name"
 							class="monospace"
 							:class="{ active: info.enabled }"
+							:disabled="info.inputDisabled"
 							@focus="info.enabled = true"
 						>
 							<template #prepend>
-								<v-checkbox v-model="info.enabled" />
+								<v-checkbox v-model="info.enabled" :disabled="info.inputDisabled" />
 							</template>
 
 							<template #append>
@@ -122,7 +123,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, reactive } from 'vue';
+import { cloneDeep } from 'lodash';
+import { defineComponent, ref, reactive, watch } from 'vue';
 import api from '@/api';
 import { Field, Relation } from '@directus/shared/types';
 import { useFieldsStore, useCollectionsStore, useRelationsStore } from '@/stores/';
@@ -132,6 +134,51 @@ import { useRouter } from 'vue-router';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { DeepPartial } from '@directus/shared/types';
 
+const defaultSystemFields = {
+	status: {
+		enabled: false,
+		inputDisabled: false,
+		name: 'status',
+		label: 'status',
+		icon: 'flag',
+	},
+	sort: {
+		enabled: false,
+		inputDisabled: false,
+		name: 'sort',
+		label: 'sort',
+		icon: 'low_priority',
+	},
+	dateCreated: {
+		enabled: false,
+		inputDisabled: false,
+		name: 'date_created',
+		label: 'created_on',
+		icon: 'access_time',
+	},
+	userCreated: {
+		enabled: false,
+		inputDisabled: false,
+		name: 'user_created',
+		label: 'created_by',
+		icon: 'account_circle',
+	},
+	dateUpdated: {
+		enabled: false,
+		inputDisabled: false,
+		name: 'date_updated',
+		label: 'updated_on',
+		icon: 'access_time',
+	},
+	userUpdated: {
+		enabled: false,
+		inputDisabled: false,
+		name: 'user_updated',
+		label: 'updated_by',
+		icon: 'account_circle',
+	},
+};
+
 export default defineComponent({
 	setup() {
 		const { t } = useI18n();
@@ -157,47 +204,12 @@ export default defineComponent({
 		const archiveValue = ref<string>();
 		const unarchiveValue = ref<string>();
 
-		const systemFields = reactive({
-			status: {
-				enabled: false,
-				name: 'status',
-				label: 'status',
-				icon: 'flag',
-			},
-			sort: {
-				enabled: false,
-				name: 'sort',
-				label: 'sort',
-				icon: 'low_priority',
-			},
-			dateCreated: {
-				enabled: false,
-				name: 'date_created',
-				label: 'created_on',
-				icon: 'access_time',
-			},
-			userCreated: {
-				enabled: false,
-				name: 'user_created',
-				label: 'created_by',
-				icon: 'account_circle',
-			},
-			dateUpdated: {
-				enabled: false,
-				name: 'date_updated',
-				label: 'updated_on',
-				icon: 'access_time',
-			},
-			userUpdated: {
-				enabled: false,
-				name: 'user_updated',
-				label: 'updated_by',
-				icon: 'account_circle',
-			},
-		});
+		const systemFields = reactive(cloneDeep(defaultSystemFields));
 
 		const saving = ref(false);
 
+		watch(() => singleton.value, setOptionsForSingleton);
+
 		return {
 			t,
 			router,
@@ -212,6 +224,11 @@ export default defineComponent({
 			singleton,
 		};
 
+		function setOptionsForSingleton() {
+			systemFields.sort = { ...defaultSystemFields.sort };
+			systemFields.sort.inputDisabled = singleton.value;
+		}
+
 		async function save() {
 			saving.value = true;