Change collection setup to childroute

app/src/modules/settings/index.ts

@@ -1,6 +1,6 @@
 import { defineModule } from '@/modules/define';
 import SettingsProject from './routes/project';
-import { SettingsCollections, SettingsFields, SettingsFieldDetail } from './routes/data-model/';
+import { SettingsCollections, SettingsNewCollection, SettingsFields, SettingsFieldDetail } from './routes/data-model/';
 import { SettingsRolesBrowse, SettingsRolesDetail } from './routes/roles';
 import { SettingsWebhooksBrowse, SettingsWebhooksDetail } from './routes/webhooks';
 import { SettingsPresetsBrowse, SettingsPresetsDetail } from './routes/presets';
@@ -25,6 +25,15 @@ export default defineModule(({ i18n }) => ({
 			name: 'settings-collections',
 			path: '/data-model',
 			component: SettingsCollections,
+			children: [
+				{
+					path: '+',
+					name: 'settings-add-new',
+					components: {
+						add: SettingsNewCollection
+					}
+				}
+			]
 		},
 		{
 			name: 'settings-fields',

app/src/modules/settings/routes/data-model/collections/collections.vue

@@ -9,7 +9,7 @@
 		</template>
 
 		<template #actions>
-			<v-button rounded icon @click="addNewActive = true">
+			<v-button rounded icon to="/settings/data-model/+">
 				<v-icon name="add" />
 			</v-button>
 		</template>
@@ -23,7 +23,7 @@
 				{{ $t('no_collections_copy_admin') }}
 
 				<template #append>
-					<v-button @click="addNewActive = true">{{ $t('create_collection') }}</v-button>
+					<v-button to="/settings/data-model/+">{{ $t('create_collection') }}</v-button>
 				</template>
 			</v-info>
 
@@ -73,7 +73,7 @@
 			</v-table>
 		</div>
 
-		<new-collection v-model="addNewActive" />
+		<router-view name="add" />
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
@@ -90,7 +90,6 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from '@vue/composition-api';
 import SettingsNavigation from '../../../components/navigation/';
-import NewCollection from './components/new-collection/';
 import { HeaderRaw } from '../../../../../components/v-table/types';
 import { i18n } from '@/lang/';
 import useCollectionsStore from '@/stores/collections';
@@ -102,9 +101,8 @@ import CollectionsFilter from './components/collections-filter';
 import marked from 'marked';
 
 export default defineComponent({
-	components: { SettingsNavigation, NewCollection, CollectionOptions, CollectionsFilter },
+	components: { SettingsNavigation, CollectionOptions, CollectionsFilter },
 	setup() {
-		const addNewActive = ref(false);
 		const activeTypes = ref(['visible', 'hidden', 'unmanaged']);
 
 		const collectionsStore = useCollectionsStore();
@@ -134,7 +132,6 @@ export default defineComponent({
 		const { items } = useItems();
 
 		return {
-			addNewActive,
 			tableHeaders,
 			items,
 			openCollection,

app/src/modules/settings/routes/data-model/collections/components/new-collection/index.ts

@@ -1,4 +0,0 @@
-import NewCollection from './new-collection.vue';
-
-export { NewCollection };
-export default NewCollection;

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

@@ -42,7 +42,7 @@
 			/>
 		</draggable>
 
-		<v-menu attached>
+		<v-menu attached close-on-content-click>
 			<template #activator="{ toggle, active }">
 				<v-button
 					@click="toggle"

app/src/modules/settings/routes/data-model/index.ts

@@ -1,3 +1,4 @@
 export * from './collections';
 export * from './fields';
 export * from './field-detail';
+export * from './new-collection';

app/src/modules/settings/routes/data-model/new-collection/index.ts

@@ -0,0 +1,4 @@
+import SettingsNewCollection from './new-collection.vue';
+
+export { SettingsNewCollection };
+export default SettingsNewCollection;

app/src/modules/settings/routes/data-model/new-collection/new-collection.vue

@@ -1,8 +1,7 @@
 <template>
 	<v-modal
 		:title="$t('creating_new_collection')"
-		:active="active"
-		@toggle="$emit('toggle', $event)"
+		:active="true"
 		class="new-collection"
 		persistent
 	>
@@ -82,7 +81,7 @@
 		</v-tabs-items>
 
 		<template #footer>
-			<v-button secondary @click="$emit('toggle', false)">
+			<v-button secondary to="/settings/data-model">
 				{{ $t('cancel') }}
 			</v-button>
 			<div class="spacer" />
@@ -110,19 +109,10 @@ import { Field } from '@/stores/fields/types';
 import useCollectionsStore from '@/stores/collections';
 import useFieldsStore from '@/stores/fields';
 import notify from '@/utils/notify';
+import router from '@/router';
 
 export default defineComponent({
-	model: {
-		prop: 'active',
-		event: 'toggle',
-	},
-	props: {
-		active: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props, { emit }) {
+	setup(props) {
 		const collectionsStore = useCollectionsStore();
 		const fieldsStore = useFieldsStore();
 
@@ -209,7 +199,7 @@ export default defineComponent({
 					type: 'success',
 				});
 
-				emit('toggle', false);
+				router.push('/settings/data-model');
 			} catch (error) {
 				console.log(error);
 				saveError.value = error;