Rename view -> layout in db

app/src/modules/activity/routes/browse.vue

@@ -20,11 +20,10 @@
 
 		<component
 			class="layout"
-			ref="layout"
-			:is="`layout-${viewType}`"
+			:is="`layout-${layout}`"
 			collection="directus_activity"
-			:view-options.sync="viewOptions"
-			:view-query.sync="viewQuery"
+			:layout-options.sync="layoutOptions"
+			:layout-query.sync="layoutQuery"
 			:filters="_filters"
 			:search-query="searchQuery"
 			@update:filters="filters = $event"
@@ -36,7 +35,7 @@
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_activity_browse'))" />
 			</drawer-detail>
-			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
+			<layout-drawer-detail @input="layout = $event" :value="layout" />
 			<portal-target name="drawer" />
 		</template>
 	</private-view>
@@ -46,7 +45,6 @@
 import { defineComponent, computed, ref } from '@vue/composition-api';
 import ActivityNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
-import { LayoutComponent } from '@/layouts/types';
 import usePreset from '@/composables/use-preset';
 import marked from 'marked';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
@@ -72,9 +70,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const layout = ref<LayoutComponent | null>(null);
-
-		const { viewType, viewOptions, viewQuery, filters, searchQuery } = usePreset(ref('directus_activity'));
+		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_activity'));
 		const { breadcrumb } = useBreadcrumb();
 
 		const _filters = computed(() => {
@@ -97,11 +93,10 @@ export default defineComponent({
 
 		return {
 			breadcrumb,
-			layout,
 			marked,
-			viewType,
-			viewOptions,
-			viewQuery,
+			layout,
+			layoutOptions,
+			layoutQuery,
 			filters,
 			searchQuery,
 			_filters,

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

@@ -29,7 +29,12 @@
 				<v-icon class="saved" name="bookmark" v-else-if="bookmarkSaved" />
 
 				<template v-else-if="bookmarkIsMine">
-					<v-icon class="save" @click="savePreset()" name="bookmark_save" v-tooltip.bottom="$t('update_bookmark')" />
+					<v-icon
+						class="save"
+						@click="savePreset()"
+						name="bookmark_save"
+						v-tooltip.bottom="$t('update_bookmark')"
+					/>
 				</template>
 
 				<bookmark-add
@@ -166,12 +171,12 @@
 		<component
 			v-else
 			class="layout"
-			ref="layout"
-			:is="`layout-${viewType || 'tabular'}`"
+			ref="layoutRef"
+			:is="`layout-${layout || 'tabular'}`"
 			:collection="collection"
 			:selection.sync="selection"
-			:view-options.sync="viewOptions"
-			:view-query.sync="viewQuery"
+			:layout-options.sync="layoutOptions"
+			:layout-query.sync="layoutQuery"
 			:filters.sync="filters"
 			:search-query.sync="searchQuery"
 			:reset-preset="resetPreset"
@@ -210,7 +215,7 @@
 					"
 				/>
 			</drawer-detail>
-			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
+			<layout-drawer-detail @input="layout = $event" :value="layout" />
 			<portal-target name="drawer" />
 		</template>
 
@@ -271,7 +276,7 @@ export default defineComponent({
 	setup(props) {
 		const userStore = useUserStore();
 		const permissionsStore = usePermissionsStore();
-		const layout = ref<LayoutComponent | null>(null);
+		const layoutRef = ref<LayoutComponent | null>(null);
 
 		const { collection } = toRefs(props);
 		const bookmarkID = computed(() => (props.bookmark ? +props.bookmark : null));
@@ -282,9 +287,9 @@ export default defineComponent({
 		const { breadcrumb } = useBreadcrumb();
 
 		const {
-			viewType,
-			viewOptions,
-			viewQuery,
+			layout,
+			layoutOptions,
+			layoutQuery,
 			filters,
 			searchQuery,
 			savePreset,
@@ -319,8 +324,8 @@ export default defineComponent({
 		watch(
 			collection,
 			() => {
-				if (viewType.value === null) {
-					viewType.value = 'tabular';
+				if (layout.value === null) {
+					layout.value = 'tabular';
 				}
 			},
 			{ immediate: true }
@@ -337,11 +342,11 @@ export default defineComponent({
 			currentCollection,
 			deleting,
 			filters,
-			layout,
+			layoutRef,
 			selection,
-			viewOptions,
-			viewQuery,
-			viewType,
+			layoutOptions,
+			layoutQuery,
+			layout,
 			searchQuery,
 			savePreset,
 			bookmarkExists,
@@ -411,7 +416,7 @@ export default defineComponent({
 
 				try {
 					await api.delete(`/items/${props.collection}/${batchPrimaryKeys}`);
-					await layout.value?.refresh?.();
+					await layoutRef.value?.refresh?.();
 
 					selection.value = [];
 					confirmDelete.value = false;
@@ -431,7 +436,7 @@ export default defineComponent({
 
 				try {
 					await api.patch(`/items/${props.collection}/${batchPrimaryKeys}`);
-					await layout.value?.refresh?.();
+					await layoutRef.value?.refresh?.();
 
 					selection.value = [];
 					confirmArchive.value = false;
@@ -599,8 +604,11 @@ export default defineComponent({
 	.save,
 	.clear {
 		cursor: pointer;
-		color: var(--foreground-subdued);
 		transition: color var(--fast) var(--transition);
+	}
+
+	.add {
+		color: var(--foreground-subdued);
 
 		&:hover {
 			color: var(--foreground-normal);
@@ -615,17 +623,17 @@ export default defineComponent({
 		}
 	}
 
-	.saved {
-		color: var(--primary);
-	}
-
 	.clear {
-		color: var(--foreground-subdued);
 		margin-left: 4px;
+		color: var(--foreground-subdued);
 
 		&:hover {
 			color: var(--warning);
 		}
 	}
+
+	.saved {
+		color: var(--primary);
+	}
 }
 </style>

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

@@ -372,7 +372,12 @@ export default defineComponent({
 			if (saveAllowed.value === false || hasEdits.value === false) return;
 
 			await save();
-			router.push(`/collections/${props.collection}/+`);
+
+			if (isNew.value === true) {
+				refresh();
+			} else {
+				router.push(`/collections/${props.collection}/+`);
+			}
 		}
 
 		async function saveAsCopyAndNavigate() {

app/src/modules/files/routes/browse.vue

@@ -93,12 +93,12 @@
 
 		<component
 			class="layout"
-			ref="layout"
-			:is="`layout-${viewType}`"
+			ref="layoutRef"
+			:is="`layout-${layout}`"
 			collection="directus_files"
 			:selection.sync="selection"
-			:view-options.sync="viewOptions"
-			:view-query.sync="viewQuery"
+			:layout-options.sync="layoutOptions"
+			:layout-query.sync="layoutQuery"
 			:filters="filtersWithFolderAndType"
 			:search-query="searchQuery"
 			@update:filters="filters = $event"
@@ -130,7 +130,7 @@
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_files_browse'))" />
 			</drawer-detail>
-			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
+			<layout-drawer-detail @input="layout = $event" :value="layout" />
 			<portal-target name="drawer" />
 		</template>
 	</private-view>
@@ -175,12 +175,12 @@ export default defineComponent({
 	},
 	setup(props) {
 		const { folders } = useFolders();
-		const layout = ref<LayoutComponent | null>(null);
+		const layoutRef = ref<LayoutComponent | null>(null);
 		const selection = ref<Item[]>([]);
 
 		const userStore = useUserStore();
 
-		const { viewType, viewOptions, viewQuery, filters, searchQuery } = usePreset(ref('directus_files'));
+		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_files'));
 		const { batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb, title } = useBreadcrumb();
@@ -252,9 +252,9 @@ export default defineComponent({
 			filters,
 			layout,
 			selection,
-			viewOptions,
-			viewQuery,
-			viewType,
+			layoutOptions,
+			layoutQuery,
+			layout,
 			filtersWithFolderAndType,
 			searchQuery,
 			marked,
@@ -281,7 +281,7 @@ export default defineComponent({
 
 				await api.delete(`/files/${batchPrimaryKeys}`);
 
-				await layout.value?.refresh();
+				await layoutRef.value?.refresh();
 
 				selection.value = [];
 				deleting.value = false;
@@ -371,7 +371,7 @@ export default defineComponent({
 		}
 
 		function refresh() {
-			layout.value?.refresh();
+			layoutRef.value?.refresh();
 		}
 
 		function clearFilters() {

app/src/modules/settings/routes/presets/browse/browse.vue

@@ -110,7 +110,7 @@ type PresetRaw = {
 	user: null | { first_name: string; last_name: string };
 	role: null | { name: string };
 	collection: string;
-	view_type: string;
+	layout: string;
 };
 
 type Preset = {
@@ -176,7 +176,7 @@ export default defineComponent({
 					}
 
 					const collection = collectionsStore.getCollection(preset.collection)?.name;
-					const layout = layouts.find((l) => l.id === preset.view_type)?.name;
+					const layout = layouts.find((l) => l.id === preset.layout)?.name;
 
 					return {
 						id: preset.id,
@@ -203,7 +203,7 @@ export default defineComponent({
 								'user.last_name',
 								'role.name',
 								'collection',
-								'view_type',
+								'layout',
 							],
 							limit: -1,
 						},

app/src/modules/settings/routes/presets/detail.vue

@@ -66,8 +66,8 @@
 					v-if="values.layout && values.collection"
 					:is="`layout-${values.layout}`"
 					:collection="values.collection"
-					:view-options.sync="viewOptions"
-					:view-query.sync="viewQuery"
+					:layout-options.sync="layoutOptions"
+					:layout-query.sync="layoutQuery"
 					:filters="values.filters || []"
 					@update:filters="edits.filters = $event"
 					readonly
@@ -116,9 +116,9 @@ type FormattedPreset = {
 	layout: string | null;
 	name: string | null;
 
-	view_query: Record<string, any> | null;
+	layout_query: Record<string, any> | null;
 
-	view_options: Record<string, any> | null;
+	layout_options: Record<string, any> | null;
 	filters: readonly Filter[] | null;
 };
 
@@ -141,7 +141,7 @@ export default defineComponent({
 		const { loading: rolesLoading, roles } = useRoles();
 		const { loading: presetLoading, error, preset } = usePreset();
 		const { fields } = useForm();
-		const { edits, hasEdits, initialValues, values, viewQuery, viewOptions } = useValues();
+		const { edits, hasEdits, initialValues, values, layoutQuery, layoutOptions } = useValues();
 		const { save, saving } = useSave();
 		const { deleting, deleteAndQuit, confirmDelete } = useDelete();
 
@@ -158,8 +158,8 @@ export default defineComponent({
 			initialValues,
 			saving,
 			save,
-			viewQuery,
-			viewOptions,
+			layoutQuery,
+			layoutOptions,
 			hasEdits,
 			deleting,
 			deleteAndQuit,
@@ -180,9 +180,9 @@ export default defineComponent({
 				if (edits.value.name) editsParsed.title = edits.value.name;
 				if (edits.value.name?.length === 0) editsParsed.title = null;
 				if (edits.value.collection) editsParsed.collection = edits.value.collection;
-				if (edits.value.layout) editsParsed.view_type = edits.value.layout;
-				if (edits.value.view_query) editsParsed.view_query = edits.value.view_query;
-				if (edits.value.view_options) editsParsed.view_options = edits.value.view_options;
+				if (edits.value.layout) editsParsed.layout = edits.value.layout;
+				if (edits.value.layout_query) editsParsed.layout_query = edits.value.layout_query;
+				if (edits.value.layout_options) editsParsed.layout_options = edits.value.layout_options;
 				if (edits.value.filters) editsParsed.filters = edits.value.filters;
 
 				if (edits.value.scope) {
@@ -253,11 +253,11 @@ export default defineComponent({
 					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 					id: preset.value.id!,
 					collection: preset.value.collection,
-					layout: preset.value.view_type,
+					layout: preset.value.layout,
 					name: preset.value.title,
 					scope: scope,
-					view_query: preset.value.view_query,
-					view_options: preset.value.view_options,
+					layout_query: preset.value.layout_query,
+					layout_options: preset.value.layout_options,
 					filters: preset.value.filters,
 				};
 
@@ -271,43 +271,43 @@ export default defineComponent({
 				};
 			});
 
-			const viewQuery = computed({
+			const layoutQuery = computed({
 				get() {
-					if (!values.value.view_query) return null;
+					if (!values.value.layout_query) return null;
 					if (!values.value.layout) return null;
 
-					return values.value.view_query[values.value.layout];
+					return values.value.layout_query[values.value.layout];
 				},
 				set(newQuery) {
 					edits.value = {
 						...edits.value,
-						view_query: {
-							...edits.value.view_query,
+						layout_query: {
+							...edits.value.layout_query,
 							[values.value.layout]: newQuery,
 						},
 					};
 				},
 			});
 
-			const viewOptions = computed({
+			const layoutOptions = computed({
 				get() {
-					if (!values.value.view_options) return null;
+					if (!values.value.layout_options) return null;
 					if (!values.value.layout) return null;
 
-					return values.value.view_options[values.value.layout];
+					return values.value.layout_options[values.value.layout];
 				},
 				set(newOptions) {
 					edits.value = {
 						...edits.value,
-						view_options: {
-							...edits.value.view_options,
+						layout_options: {
+							...edits.value.layout_options,
 							[values.value.layout]: newOptions,
 						},
 					};
 				},
 			});
 
-			return { edits, initialValues, values, viewQuery, viewOptions, hasEdits };
+			return { edits, initialValues, values, layoutQuery, layoutOptions, hasEdits };
 		}
 
 		function usePreset() {

app/src/modules/settings/routes/webhooks/browse.vue

@@ -12,51 +12,8 @@
 			<settings-navigation />
 		</template>
 
-		<!--
-		<template #actions>
-			<v-dialog v-model="confirmDelete">
-				<template #activator="{ on }">
-					<v-button rounded icon class="action-delete" v-if="selection.length > 0" @click="on">
-						<v-icon name="delete" outline />
-					</v-button>
-				</template>
-
-				<v-card>
-					<v-card-title>{{ $tc('batch_delete_confirm', selection.length) }}</v-card-title>
-
-					<v-card-actions>
-						<v-button @click="confirmDelete = false" secondary>
-							{{ $t('cancel') }}
-						</v-button>
-						<v-button @click="batchDelete" class="action-delete" :loading="deleting">
-							{{ $t('delete') }}
-						</v-button>
-					</v-card-actions>
-				</v-card>
-			</v-dialog>
-
-			<v-button rounded icon class="action-batch" v-if="selection.length > 1" :to="batchLink">
-				<v-icon name="edit" outline />
-			</v-button>
-
-			<v-button rounded icon :to="addNewLink">
-				<v-icon name="add" />
-			</v-button>
-		</template>
-
-		<layout-tabular
-			class="layout"
-			ref="layout"
-			collection="directus_webhooks"
-			:selection.sync="selection"
-			:view-options.sync="viewOptions"
-			:view-query.sync="viewQuery"
-		/> -->
-
 		<div class="content">
-			<v-notice>
-				Pre-Release: Feature not yet available
-			</v-notice>
+			<v-notice>Pre-Release: Feature not yet available</v-notice>
 		</div>
 
 		<template #drawer>
@@ -70,14 +27,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import SettingsNavigation from '../../components/navigation.vue';
 
-import { i18n } from '@/lang';
-import api from '@/api';
-import { LayoutComponent } from '@/layouts/types';
-import usePreset from '@/composables/use-preset';
-import marked from 'marked';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 
 type Item = {
@@ -87,123 +39,10 @@ type Item = {
 export default defineComponent({
 	name: 'webhooks-browse',
 	components: { SettingsNavigation, LayoutDrawerDetail },
-	props: {},
-	setup() {
-		const layout = ref<LayoutComponent | null>(null);
-
-		const selection = ref<Item[]>([]);
-
-		const { viewType, viewOptions, viewQuery } = usePreset(ref('directus_webhooks'));
-		const { addNewLink, batchLink } = useLinks();
-		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
-		const { breadcrumb } = useBreadcrumb();
-
-		if (viewType.value === null) {
-			viewType.value = 'tabular';
-		}
-
-		if (viewOptions.value === null && viewType.value === 'tabular') {
-			viewOptions.value = {
-				widths: {
-					status: 50,
-					name: 120,
-					directus_action: 180,
-					collection: 220,
-				},
-			};
-		}
-
-		if (viewQuery.value === null && viewType.value === 'tabular') {
-			viewQuery.value = {
-				fields: ['status', 'name', 'directus_action', 'collection'],
-			};
-		}
-
-		return {
-			addNewLink,
-			batchLink,
-			selection,
-			breadcrumb,
-			confirmDelete,
-			batchDelete,
-			deleting,
-			layout,
-			viewOptions,
-			viewQuery,
-			marked,
-		};
-
-		function useBatchDelete() {
-			const confirmDelete = ref(false);
-			const deleting = ref(false);
-
-			return { confirmDelete, deleting, batchDelete };
-
-			async function batchDelete() {
-				deleting.value = true;
-
-				confirmDelete.value = false;
-
-				const batchPrimaryKeys = selection.value.map((item) => item.id).join();
-
-				await api.delete(`/settings/webhooks/${batchPrimaryKeys}`);
-
-				await layout.value?.refresh();
-
-				selection.value = [];
-				deleting.value = false;
-				confirmDelete.value = false;
-			}
-		}
-
-		function useLinks() {
-			const addNewLink = computed<string>(() => {
-				return `/settings/webhooks/+`;
-			});
-
-			const batchLink = computed<string>(() => {
-				const batchPrimaryKeys = selection.value.map((item) => item.id).join();
-				return `/settings/webhooks/${batchPrimaryKeys}`;
-			});
-
-			return { addNewLink, batchLink };
-		}
-
-		function useBreadcrumb() {
-			const breadcrumb = computed(() => {
-				return [
-					{
-						name: i18n.tc('collection', 2),
-						to: `/collections`,
-					},
-				];
-			});
-
-			return { breadcrumb };
-		}
-	},
 });
 </script>
 
 <style lang="scss" scoped>
-// .action-delete {
-// 	--v-button-background-color: var(--danger-25);
-// 	--v-button-color: var(--danger);
-// 	--v-button-background-color-hover: var(--danger-50);
-// 	--v-button-color-hover: var(--danger);
-// }
-
-// .action-batch {
-// 	--v-button-background-color: var(--warning-25);
-// 	--v-button-color: var(--warning);
-// 	--v-button-background-color-hover: var(--warning-50);
-// 	--v-button-color-hover: var(--warning);
-// }
-
-// .layout {
-// 	--layout-offset-top: 64px;
-// }
-
 .header-icon {
 	--v-button-color-disabled: var(--warning);
 	--v-button-background-color-disabled: var(--warning-25);

app/src/modules/users/routes/browse.vue

@@ -60,12 +60,12 @@
 
 		<component
 			class="layout"
-			ref="layout"
-			:is="`layout-${viewType}`"
+			ref="layoutRef"
+			:is="`layout-${layout}`"
 			collection="directus_users"
 			:selection.sync="selection"
-			:view-options.sync="viewOptions"
-			:view-query.sync="viewQuery"
+			:layout-options.sync="layoutOptions"
+			:layout-query.sync="layoutQuery"
 			:filters="_filters"
 			:search-query="searchQuery"
 			@update:filters="filters = $event"
@@ -95,7 +95,7 @@
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_users_browse'))" />
 			</drawer-detail>
-			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
+			<layout-drawer-detail @input="layout = $event" :value="layout" />
 			<portal-target name="drawer" />
 		</template>
 	</private-view>
@@ -129,11 +129,11 @@ export default defineComponent({
 	},
 	setup(props) {
 		const { roles } = useNavigation();
-		const layout = ref<LayoutComponent | null>(null);
+		const layoutRef = ref<LayoutComponent | null>(null);
 
 		const selection = ref<Item[]>([]);
 
-		const { viewType, viewOptions, viewQuery, filters, searchQuery } = usePreset(ref('directus_users'));
+		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_users'));
 		const { addNewLink, batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb, title } = useBreadcrumb();
@@ -167,11 +167,11 @@ export default defineComponent({
 			confirmDelete,
 			deleting,
 			filters,
-			layout,
+			layoutRef,
 			selection,
-			viewOptions,
-			viewQuery,
-			viewType,
+			layoutOptions,
+			layoutQuery,
+			layout,
 			searchQuery,
 			marked,
 			clearFilters,
@@ -192,7 +192,7 @@ export default defineComponent({
 
 				await api.delete(`/users/${batchPrimaryKeys}`);
 
-				await layout.value?.refresh();
+				await layoutRef.value?.refresh();
 
 				selection.value = [];
 				deleting.value = false;