From ef272d18d6c34937ad73755bc83aaae565a96d35 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Wed, 3 May 2023 11:49:36 -0400
Subject: [PATCH] script[setup]: settings presets (#18446)

---
 .../routes/presets/collection/collection.vue  | 231 +++++++-----------
 .../presets-info-sidebar-detail.vue           |  58 ++---
 2 files changed, 121 insertions(+), 168 deletions(-)

diff --git a/app/src/modules/settings/routes/presets/collection/collection.vue b/app/src/modules/settings/routes/presets/collection/collection.vue
index e25c13dc3e..73103ebc2d 100644
--- a/app/src/modules/settings/routes/presets/collection/collection.vue
+++ b/app/src/modules/settings/routes/presets/collection/collection.vue
@@ -145,171 +145,130 @@
 	</component>
 </template>
 
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, computed, ref } from 'vue';
-import SettingsNavigation from '../../../components/navigation.vue';
-import PresetsInfoSidebarDetail from './components/presets-info-sidebar-detail.vue';
-
-import { useCollection, useLayout } from '@directus/composables';
+<script setup lang="ts">
+import { useExtension } from '@/composables/use-extension';
+import { usePreset } from '@/composables/use-preset';
+import { usePermissionsStore } from '@/stores/permissions';
+import { usePresetsStore } from '@/stores/presets';
+import { useUserStore } from '@/stores/user';
+import DrawerBatch from '@/views/private/components/drawer-batch.vue';
 import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail.vue';
 import RefreshSidebarDetail from '@/views/private/components/refresh-sidebar-detail.vue';
 import SearchInput from '@/views/private/components/search-input.vue';
-import { usePermissionsStore } from '@/stores/permissions';
-import { useUserStore } from '@/stores/user';
-import { usePresetsStore } from '@/stores/presets';
-import DrawerBatch from '@/views/private/components/drawer-batch.vue';
-import { usePreset } from '@/composables/use-preset';
-import { useExtension } from '@/composables/use-extension';
+import { useCollection, useLayout } from '@directus/composables';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import SettingsNavigation from '../../../components/navigation.vue';
+import PresetsInfoSidebarDetail from './components/presets-info-sidebar-detail.vue';
 
-export default defineComponent({
-	name: 'ContentCollection',
-	components: {
-		SettingsNavigation,
-		PresetsInfoSidebarDetail,
-		LayoutSidebarDetail,
-		SearchInput,
-		DrawerBatch,
-		RefreshSidebarDetail,
-	},
-	setup() {
-		const layout = ref('tabular');
-		const collection = ref('directus_presets');
-		const { layoutOptions, layoutQuery, filter, search, refreshInterval } = usePreset(collection);
+const layout = ref('tabular');
+const collection = ref('directus_presets');
+const { layoutOptions, layoutQuery, filter, search, refreshInterval } = usePreset(collection);
 
-		const { t } = useI18n();
+const { t } = useI18n();
 
-		const userStore = useUserStore();
-		const permissionsStore = usePermissionsStore();
-		const layoutRef = ref();
+const userStore = useUserStore();
+const permissionsStore = usePermissionsStore();
+const layoutRef = ref();
 
-		const { selection } = useSelection();
-		const { info: currentCollection } = useCollection(collection);
+const { selection } = useSelection();
+const { info: currentCollection } = useCollection(collection);
 
-		const { layoutWrapper } = useLayout(layout);
+const { layoutWrapper } = useLayout(layout);
 
-		const { confirmDelete, deleting, batchDelete, error: deleteError, batchEditActive } = useBatch();
+const { confirmDelete, deleting, batchDelete, error: deleteError, batchEditActive } = useBatch();
 
-		const currentLayout = useExtension('layout', layout);
+const currentLayout = useExtension('layout', layout);
 
-		const { batchEditAllowed, batchDeleteAllowed, createAllowed } = usePermissions();
+const { batchEditAllowed, batchDeleteAllowed, createAllowed } = usePermissions();
 
-		const presetsStore = usePresetsStore();
+const presetsStore = usePresetsStore();
 
-		return {
-			t,
-			batchDelete,
-			batchEditActive,
-			confirmDelete,
-			currentCollection,
-			deleting,
-			filter,
-			layoutRef,
-			layoutWrapper,
-			selection,
-			layoutOptions,
-			layoutQuery,
-			layout,
-			search,
-			clearFilters,
-			batchEditAllowed,
-			batchDeleteAllowed,
-			deleteError,
-			createAllowed,
-			drawerBatchRefresh,
-			refresh,
-			refreshInterval,
-			currentLayout,
-			collection,
-		};
+async function refresh() {
+	await layoutRef.value?.state?.refresh?.();
+}
 
-		async function refresh() {
-			await layoutRef.value?.state?.refresh?.();
-		}
+async function drawerBatchRefresh() {
+	selection.value = [];
+	await refresh();
+}
+
+function useSelection() {
+	const selection = ref<number[]>([]);
+
+	return { selection };
+}
+
+function useBatch() {
+	const confirmDelete = ref(false);
+	const deleting = ref(false);
+
+	const batchEditActive = ref(false);
+
+	const error = ref<any>(null);
+
+	return { batchEditActive, confirmDelete, deleting, batchDelete, error };
+
+	async function batchDelete() {
+		deleting.value = true;
+
+		try {
+			const batchPrimaryKeys = selection.value;
+			await presetsStore.delete(batchPrimaryKeys);
 
-		async function drawerBatchRefresh() {
 			selection.value = [];
 			await refresh();
+
+			confirmDelete.value = false;
+		} catch (err: any) {
+			error.value = err;
+		} finally {
+			deleting.value = false;
 		}
+	}
+}
 
-		function useSelection() {
-			const selection = ref<number[]>([]);
+function clearFilters() {
+	filter.value = null;
+	search.value = null;
+}
 
-			return { selection };
-		}
+function usePermissions() {
+	const batchEditAllowed = computed(() => {
+		const admin = userStore?.currentUser?.role.admin_access === true;
+		if (admin) return true;
 
-		function useBatch() {
-			const confirmDelete = ref(false);
-			const deleting = ref(false);
+		const updatePermissions = permissionsStore.permissions.find(
+			(permission) => permission.action === 'update' && permission.collection === collection.value
+		);
 
-			const batchEditActive = ref(false);
+		return !!updatePermissions;
+	});
 
-			const error = ref<any>(null);
+	const batchDeleteAllowed = computed(() => {
+		const admin = userStore?.currentUser?.role.admin_access === true;
+		if (admin) return true;
 
-			return { batchEditActive, confirmDelete, deleting, batchDelete, error };
+		const deletePermissions = permissionsStore.permissions.find(
+			(permission) => permission.action === 'delete' && permission.collection === collection.value
+		);
 
-			async function batchDelete() {
-				deleting.value = true;
+		return !!deletePermissions;
+	});
 
-				try {
-					const batchPrimaryKeys = selection.value;
-					await presetsStore.delete(batchPrimaryKeys);
+	const createAllowed = computed(() => {
+		const admin = userStore?.currentUser?.role.admin_access === true;
+		if (admin) return true;
 
-					selection.value = [];
-					await refresh();
+		const createPermissions = permissionsStore.permissions.find(
+			(permission) => permission.action === 'create' && permission.collection === collection.value
+		);
 
-					confirmDelete.value = false;
-				} catch (err: any) {
-					error.value = err;
-				} finally {
-					deleting.value = false;
-				}
-			}
-		}
+		return !!createPermissions;
+	});
 
-		function clearFilters() {
-			filter.value = null;
-			search.value = null;
-		}
-
-		function usePermissions() {
-			const batchEditAllowed = computed(() => {
-				const admin = userStore?.currentUser?.role.admin_access === true;
-				if (admin) return true;
-
-				const updatePermissions = permissionsStore.permissions.find(
-					(permission) => permission.action === 'update' && permission.collection === collection.value
-				);
-
-				return !!updatePermissions;
-			});
-
-			const batchDeleteAllowed = computed(() => {
-				const admin = userStore?.currentUser?.role.admin_access === true;
-				if (admin) return true;
-
-				const deletePermissions = permissionsStore.permissions.find(
-					(permission) => permission.action === 'delete' && permission.collection === collection.value
-				);
-
-				return !!deletePermissions;
-			});
-
-			const createAllowed = computed(() => {
-				const admin = userStore?.currentUser?.role.admin_access === true;
-				if (admin) return true;
-
-				const createPermissions = permissionsStore.permissions.find(
-					(permission) => permission.action === 'create' && permission.collection === collection.value
-				);
-
-				return !!createPermissions;
-			});
-
-			return { batchEditAllowed, batchDeleteAllowed, createAllowed };
-		}
-	},
-});
+	return { batchEditAllowed, batchDeleteAllowed, createAllowed };
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/modules/settings/routes/presets/collection/components/presets-info-sidebar-detail.vue b/app/src/modules/settings/routes/presets/collection/components/presets-info-sidebar-detail.vue
index 67bf437b8a..0e3eee2d3c 100644
--- a/app/src/modules/settings/routes/presets/collection/components/presets-info-sidebar-detail.vue
+++ b/app/src/modules/settings/routes/presets/collection/components/presets-info-sidebar-detail.vue
@@ -17,46 +17,40 @@
 	</sidebar-detail>
 </template>
 
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
 import api from '@/api';
 import { unexpectedError } from '@/utils/unexpected-error';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-export default defineComponent({
-	setup() {
-		const { t } = useI18n();
+const { t } = useI18n();
 
-		const loading = ref(false);
-		const bookmarksCount = ref<number | null>(null);
-		const presetsCount = ref<number | null>(null);
+const loading = ref(false);
+const bookmarksCount = ref<number | null>(null);
+const presetsCount = ref<number | null>(null);
 
-		fetchCounts();
+fetchCounts();
 
-		return { t, bookmarksCount, presetsCount };
+async function fetchCounts() {
+	loading.value = true;
 
-		async function fetchCounts() {
-			loading.value = true;
+	try {
+		const response = await api.get(`/presets`, {
+			params: {
+				[`filter[bookmark][_nnull]`]: true,
+				fields: ['id'],
+				meta: 'filter_count,total_count',
+			},
+		});
 
-			try {
-				const response = await api.get(`/presets`, {
-					params: {
-						[`filter[bookmark][_nnull]`]: true,
-						fields: ['id'],
-						meta: 'filter_count,total_count',
-					},
-				});
-
-				bookmarksCount.value = response.data.meta.filter_count as number;
-				presetsCount.value = (response.data.meta.total_count as number) - bookmarksCount.value;
-			} catch (err: any) {
-				unexpectedError(err);
-			} finally {
-				loading.value = false;
-			}
-		}
-	},
-});
+		bookmarksCount.value = response.data.meta.filter_count as number;
+		presetsCount.value = (response.data.meta.total_count as number) - bookmarksCount.value;
+	} catch (err: any) {
+		unexpectedError(err);
+	} finally {
+		loading.value = false;
+	}
+}
 </script>
 
 <style lang="scss" scoped>