refactor(editor): Migrate TemplatesCollectionView.vue to composition API (#10917)

packages/editor-ui/src/views/TemplatesCollectionView.vue

@@ -1,18 +1,9 @@
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
-import { mapStores } from 'pinia';
-
 import TemplateDetails from '@/components/TemplateDetails.vue';
 import TemplateList from '@/components/TemplateList.vue';
 import TemplatesView from './TemplatesView.vue';
-
+import type { ITemplatesWorkflow } from '@/Interface';
-import type {
-	ITemplatesCollection,
-	ITemplatesCollectionFull,
-	ITemplatesWorkflow,
-} from '@/Interface';
-
-import { setPageTitle } from '@/utils/htmlUtils';
 import { VIEWS } from '@/constants';
 import { useTemplatesStore } from '@/stores/templates.store';
 import { usePostHog } from '@/stores/posthog.store';
@@ -20,72 +11,41 @@ import { useTemplateWorkflow } from '@/utils/templates/templateActions';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { isFullTemplatesCollection } from '@/utils/templates/typeGuards';
+import { useRoute, useRouter } from 'vue-router';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { setPageTitle } from '@/utils/htmlUtils';
+import { useI18n } from '@/composables/useI18n';
 
-export default defineComponent({
-	name: 'TemplatesCollectionView',
-	components: {
-		TemplateDetails,
-		TemplateList,
-		TemplatesView,
-	},
-	setup() {
 const externalHooks = useExternalHooks();
+const templatesStore = useTemplatesStore();
+const posthogStore = usePostHog();
+const nodeTypesStore = useNodeTypesStore();
 
-		return {
+const route = useRoute();
-			externalHooks,
+const router = useRouter();
-		};
+const telemetry = useTelemetry();
-	},
+const i18n = useI18n();
-	computed: {
+
-		...mapStores(useTemplatesStore, usePostHog),
+const loading = ref(true);
-		collection(): ITemplatesCollectionFull | ITemplatesCollection | null {
+const notFoundError = ref(false);
-			return this.templatesStore.getCollectionById(this.collectionId);
+
-		},
+const collectionId = computed(() => {
-		collectionId(): string {
+	const { id } = route.params;
-			return Array.isArray(this.$route.params.id)
+	return Array.isArray(id) ? id[0] : id;
-				? this.$route.params.id[0]
+});
-				: this.$route.params.id;
+
-		},
+const collection = computed(() => templatesStore.getCollectionById(collectionId.value));
-		collectionWorkflows(): ITemplatesWorkflow[] {
+
-			if (!this.collection || this.loading) {
+const collectionWorkflows = computed(() => {
+	if (!collection.value || loading.value) {
 		return [];
 	}
-			return this.collection.workflows
+	return collection.value.workflows
-				.map(({ id }) => this.templatesStore.getTemplateById(id.toString()))
+		.map(({ id }) => templatesStore.getTemplateById(id.toString()))
 		.filter((workflow): workflow is ITemplatesWorkflow => !!workflow);
-		},
+});
-	},
-	data() {
-		return {
-			loading: true,
-			notFoundError: false,
-		};
-	},
-	watch: {
-		collection(collection: ITemplatesCollection) {
-			if (collection) {
-				setPageTitle(`n8n - Template collection: ${collection.name}`);
-			} else {
-				setPageTitle('n8n - Templates');
-			}
-		},
-	},
-	async mounted() {
-		this.scrollToTop();
 
-		if (this.collection && 'full' in this.collection && this.collection.full) {
+const scrollToTop = () => {
-			this.loading = false;
-			return;
-		}
-
-		try {
-			await this.templatesStore.fetchCollectionById(this.collectionId);
-		} catch (e) {
-			this.notFoundError = true;
-		}
-		this.loading = false;
-	},
-	methods: {
-		scrollToTop() {
 	setTimeout(() => {
 		const contentArea = document.getElementById('content');
 		if (contentArea) {
@@ -95,34 +55,61 @@ export default defineComponent({
 			});
 		}
 	}, 50);
-		},
+};
-		onOpenTemplate({ event, id }: { event: MouseEvent; id: string }) {
+
-			this.navigateTo(event, VIEWS.TEMPLATE, id);
+const onOpenTemplate = ({ event, id }: { event: MouseEvent; id: string }) => {
-		},
+	navigateTo(event, VIEWS.TEMPLATE, id);
-		async onUseWorkflow({ event, id }: { event: MouseEvent; id: string }) {
+};
+
+const onUseWorkflow = async ({ event, id }: { event: MouseEvent; id: string }) => {
 	await useTemplateWorkflow({
-				posthogStore: this.posthogStore,
+		posthogStore,
-				router: this.$router,
+		router,
 		templateId: id,
 		inNewBrowserTab: event.metaKey || event.ctrlKey,
-				templatesStore: useTemplatesStore(),
+		templatesStore,
-				externalHooks: this.externalHooks,
+		externalHooks,
-				nodeTypesStore: useNodeTypesStore(),
+		nodeTypesStore,
-				telemetry: this.$telemetry,
+		telemetry,
 		source: 'template_list',
 	});
-		},
+};
-		navigateTo(e: MouseEvent, page: string, id: string) {
+
+const navigateTo = (e: MouseEvent, page: string, id: string) => {
 	if (e.metaKey || e.ctrlKey) {
-				const route = this.$router.resolve({ name: page, params: { id } });
+		const route = router.resolve({ name: page, params: { id } });
 		window.open(route.href, '_blank');
 		return;
 	} else {
-				void this.$router.push({ name: page, params: { id } });
+		void router.push({ name: page, params: { id } });
+	}
+};
+
+watch(
+	() => collection.value,
+	() => {
+		if (collection.value && 'full' in collection.value && collection.value.full) {
+			setPageTitle(`n8n - Template collection: ${collection.value.name}`);
+		} else {
+			setPageTitle('n8n - Templates');
 		}
 	},
-		isFullTemplatesCollection,
+);
-	},
+
+onMounted(async () => {
+	scrollToTop();
+
+	if (collection.value && 'full' in collection.value && collection.value.full) {
+		loading.value = false;
+		return;
+	}
+
+	try {
+		await templatesStore.fetchCollectionById(collectionId.value);
+	} catch (e) {
+		notFoundError.value = true;
+	}
+	loading.value = false;
 });
 </script>
 
@@ -135,15 +122,13 @@ export default defineComponent({
 						{{ collection.name }}
 					</n8n-heading>
 					<n8n-text v-if="collection && collection.name" color="text-base" size="small">
-						{{ $locale.baseText('templates.collection') }}
+						{{ i18n.baseText('templates.collection') }}
 					</n8n-text>
 					<n8n-loading :loading="!collection || !collection.name" :rows="2" variant="h1" />
 				</div>
 			</div>
 			<div v-else :class="$style.notFound">
-				<n8n-text color="text-base">{{
+				<n8n-text color="text-base">{{ i18n.baseText('templates.collectionsNotFound') }}</n8n-text>
-					$locale.baseText('templates.collectionsNotFound')
-				}}</n8n-text>
 			</div>
 		</template>
 		<template v-if="!notFoundError" #content>
@@ -167,7 +152,7 @@ export default defineComponent({
 				</div>
 				<div :class="$style.details">
 					<TemplateDetails
-						:block-title="$locale.baseText('template.details.appsInTheCollection')"
+						:block-title="i18n.baseText('template.details.appsInTheCollection')"
 						:loading="loading"
 						:template="collection"
 					/>