Add view type switch (#424)

* Manage view_type through collection preset composition

* Move view type translation

* Add layout drawer detail component

* Use different icon for tabular

* Render view as section in browse sidebar

* Fix sticky header in table

* Sort return statement values 🤓

* Use viewtype picker on users

* Use layout picker on files

* Default to tabular view when invalid is set

* Render view type dynamically based on setting

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

@@ -8,6 +8,7 @@
 		</template>
 
 		<template #drawer>
+			<layout-drawer-detail v-model="viewType" />
 			<filter-drawer-detail v-model="filters" :collection="collection" />
 			<portal-target name="drawer" />
 		</template>
@@ -53,9 +54,10 @@
 			<collections-navigation />
 		</template>
 
-		<layout-tabular
+		<component
 			class="layout"
 			ref="layout"
+			:is="`layout-${viewType}`"
 			:collection="collection"
 			:selection.sync="selection"
 			:view-options.sync="viewOptions"
@@ -78,6 +80,7 @@ import CollectionsNotFound from '../not-found/';
 import useCollection from '@/compositions/use-collection';
 import useCollectionPreset from '@/compositions/use-collection-preset';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
+import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 
 const redirectIfNeeded: NavigationGuard = async (to, from, next) => {
 	const collectionsStore = useCollectionsStore();
@@ -115,7 +118,12 @@ export default defineComponent({
 	beforeRouteEnter: redirectIfNeeded,
 	beforeRouteUpdate: redirectIfNeeded,
 	name: 'collections-browse',
-	components: { CollectionsNavigation, CollectionsNotFound, FilterDrawerDetail },
+	components: {
+		CollectionsNavigation,
+		CollectionsNotFound,
+		FilterDrawerDetail,
+		LayoutDrawerDetail,
+	},
 	props: {
 		collection: {
 			type: String,
@@ -132,22 +140,23 @@ export default defineComponent({
 		const { selection } = useSelection();
 		const { info: currentCollection, primaryKeyField } = useCollection(collection);
 		const { addNewLink, batchLink, collectionsLink } = useLinks();
-		const { viewOptions, viewQuery, filters } = useCollectionPreset(collection);
+		const { viewType, viewOptions, viewQuery, filters } = useCollectionPreset(collection);
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 
 		return {
-			currentCollection,
 			addNewLink,
-			batchLink,
-			selection,
-			confirmDelete,
 			batchDelete,
+			batchLink,
+			collectionsLink,
+			confirmDelete,
+			currentCollection,
 			deleting,
+			filters,
 			layout,
+			selection,
 			viewOptions,
 			viewQuery,
-			collectionsLink,
-			filters,
+			viewType,
 		};
 
 		function useSelection() {

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

@@ -7,6 +7,7 @@
 		</template>
 
 		<template #drawer>
+			<layout-drawer-detail v-model="viewType" />
 			<filter-drawer-detail v-model="filters" collection="directus_files" />
 			<portal-target name="drawer" />
 		</template>
@@ -52,9 +53,10 @@
 			<files-navigation />
 		</template>
 
-		<layout-tabular
+		<component
 			class="layout"
 			ref="layout"
+			:is="`layout-${viewType}`"
 			collection="directus_files"
 			:selection.sync="selection"
 			:view-options.sync="viewOptions"
@@ -74,6 +76,7 @@ import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
 import useCollectionPreset from '@/compositions/use-collection-preset';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
+import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 
 type Item = {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -82,7 +85,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'files-browse',
-	components: { FilesNavigation, FilterDrawerDetail },
+	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail },
 	props: {},
 	setup() {
 		const layout = ref<LayoutComponent>(null);
@@ -90,23 +93,26 @@ export default defineComponent({
 
 		const selection = ref<Item[]>([]);
 
-		const { viewOptions, viewQuery, filters } = useCollectionPreset(ref('directus_files'));
+		const { viewType, viewOptions, viewQuery, filters } = useCollectionPreset(
+			ref('directus_files')
+		);
 		const { addNewLink, batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb } = useBreadcrumb();
 
 		return {
 			addNewLink,
+			batchDelete,
 			batchLink,
-			selection,
 			breadcrumb,
 			confirmDelete,
-			batchDelete,
 			deleting,
+			filters,
 			layout,
+			selection,
 			viewOptions,
 			viewQuery,
-			filters,
+			viewType,
 		};
 
 		function useBatchDelete() {

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

@@ -7,6 +7,7 @@
 		</template>
 
 		<template #drawer>
+			<layout-drawer-detail v-model="viewType" />
 			<filter-drawer-detail v-model="filters" collection="directus_users" />
 			<portal-target name="drawer" />
 		</template>
@@ -52,9 +53,10 @@
 			<users-navigation />
 		</template>
 
-		<layout-tabular
+		<component
 			class="layout"
 			ref="layout"
+			:is="`layout-${viewType}`"
 			collection="directus_users"
 			:selection.sync="selection"
 			:view-options.sync="viewOptions"
@@ -75,6 +77,7 @@ import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
 import useCollectionPreset from '@/compositions/use-collection-preset';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
+import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 
 type Item = {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -83,7 +86,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'users-browse',
-	components: { UsersNavigation, FilterDrawerDetail },
+	components: { UsersNavigation, FilterDrawerDetail, LayoutDrawerDetail },
 	props: {
 		role: {
 			type: String,
@@ -96,7 +99,9 @@ export default defineComponent({
 
 		const selection = ref<Item[]>([]);
 
-		const { viewOptions, viewQuery, filters } = useCollectionPreset(ref('directus_users'));
+		const { viewType, viewOptions, viewQuery, filters } = useCollectionPreset(
+			ref('directus_users')
+		);
 		const { addNewLink, batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb } = useBreadcrumb();
@@ -129,18 +134,19 @@ export default defineComponent({
 		});
 
 		return {
+			_filters,
 			addNewLink,
+			batchDelete,
 			batchLink,
-			selection,
 			breadcrumb,
 			confirmDelete,
-			batchDelete,
 			deleting,
+			filters,
 			layout,
+			selection,
 			viewOptions,
 			viewQuery,
-			_filters,
-			filters,
+			viewType,
 		};
 
 		function useBatchDelete() {