From c773181a3aabae48e51a4d1695d19c0218bd0282 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Fri, 1 Nov 2024 14:11:42 +0100
Subject: [PATCH] refactor: Move page components to composables (no-changelog)
 (#11494)

---
 .../editor-ui/src/components/TemplateList.vue | 137 +++++++++---------
 .../src/components/layouts/PageViewLayout.vue |  18 ---
 .../components/layouts/PageViewLayoutList.vue |  15 +-
 .../src/views/TemplatesCollectionView.vue     |   8 +-
 .../editor-ui/src/views/TemplatesView.vue     |  20 +--
 5 files changed, 82 insertions(+), 116 deletions(-)

diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
index 06c644dc80..dac129173a 100644
--- a/packages/editor-ui/src/components/TemplateList.vue
+++ b/packages/editor-ui/src/components/TemplateList.vue
@@ -1,82 +1,75 @@
-<script lang="ts">
-import { type PropType, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import TemplateCard from './TemplateCard.vue';
 import type { ITemplatesWorkflow } from '@/Interface';
 
-export default defineComponent({
-	name: 'TemplateList',
-	components: {
-		TemplateCard,
-	},
-	props: {
-		infiniteScrollEnabled: {
-			type: Boolean,
-			default: false,
-		},
-		loading: {
-			type: Boolean,
-		},
-		useWorkflowButton: {
-			type: Boolean,
-			default: false,
-		},
-		workflows: {
-			type: Array as PropType<ITemplatesWorkflow[]>,
-			default: () => [],
-		},
-		totalWorkflows: {
-			type: Number,
-			default: 0,
-		},
-		simpleView: {
-			type: Boolean,
-			default: false,
-		},
-		totalCount: {
-			type: Number,
-			default: 0,
-		},
-	},
-	mounted() {
-		if (this.infiniteScrollEnabled) {
-			const content = document.getElementById('content');
-			if (content) {
-				content.addEventListener('scroll', this.onScroll);
-			}
-		}
-	},
-	beforeUnmount() {
+interface Props {
+	workflows?: ITemplatesWorkflow[];
+	infiniteScrollEnabled?: boolean;
+	loading?: boolean;
+	useWorkflowButton?: boolean;
+	totalWorkflows?: number;
+	simpleView?: boolean;
+	totalCount?: number;
+}
+
+const emit = defineEmits<{
+	loadMore: [];
+	openTemplate: [{ event: MouseEvent; id: number }];
+	useWorkflow: [{ event: MouseEvent; id: number }];
+}>();
+
+const props = withDefaults(defineProps<Props>(), {
+	infiniteScrollEnabled: false,
+	loading: false,
+	useWorkflowButton: false,
+	workflows: () => [],
+	totalWorkflows: 0,
+	simpleView: false,
+	totalCount: 0,
+});
+
+const loader = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+	if (props.infiniteScrollEnabled) {
 		const content = document.getElementById('content');
 		if (content) {
-			content.removeEventListener('scroll', this.onScroll);
+			content.addEventListener('scroll', onScroll);
 		}
-	},
-	methods: {
-		onScroll() {
-			const loaderRef = this.$refs.loader as HTMLElement | undefined;
-			if (!loaderRef || this.loading) {
-				return;
-			}
-
-			const rect = loaderRef.getBoundingClientRect();
-			const inView =
-				rect.top >= 0 &&
-				rect.left >= 0 &&
-				rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-				rect.right <= (window.innerWidth || document.documentElement.clientWidth);
-
-			if (inView) {
-				this.$emit('loadMore');
-			}
-		},
-		onCardClick(event: MouseEvent, id: number) {
-			this.$emit('openTemplate', { event, id });
-		},
-		onUseWorkflow(event: MouseEvent, id: number) {
-			this.$emit('useWorkflow', { event, id });
-		},
-	},
+	}
 });
+
+onBeforeUnmount(() => {
+	const content = document.getElementById('content');
+	if (content) {
+		content.removeEventListener('scroll', onScroll);
+	}
+});
+
+function onScroll() {
+	const loaderRef = loader.value as HTMLElement | undefined;
+	if (!loaderRef || props.loading) {
+		return;
+	}
+
+	const rect = loaderRef.getBoundingClientRect();
+	const inView =
+		rect.top >= 0 &&
+		rect.left >= 0 &&
+		rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+		rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+	if (inView) {
+		emit('loadMore');
+	}
+}
+function onCardClick(event: MouseEvent, id: number) {
+	emit('openTemplate', { event, id });
+}
+function onUseWorkflow(event: MouseEvent, id: number) {
+	emit('useWorkflow', { event, id });
+}
 </script>
 
 <template>
diff --git a/packages/editor-ui/src/components/layouts/PageViewLayout.vue b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
index f5cd733a15..3500700373 100644
--- a/packages/editor-ui/src/components/layouts/PageViewLayout.vue
+++ b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
@@ -1,21 +1,3 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-import { useUIStore } from '@/stores/ui.store';
-
-export default defineComponent({
-	name: 'PageViewLayout',
-	data() {
-		return {
-			loading: false,
-		};
-	},
-	computed: {
-		...mapStores(useUIStore),
-	},
-});
-</script>
-
 <template>
 	<div :class="$style.wrapper">
 		<slot name="header" />
diff --git a/packages/editor-ui/src/components/layouts/PageViewLayoutList.vue b/packages/editor-ui/src/components/layouts/PageViewLayoutList.vue
index 263a5b4cab..b46f58d284 100644
--- a/packages/editor-ui/src/components/layouts/PageViewLayoutList.vue
+++ b/packages/editor-ui/src/components/layouts/PageViewLayoutList.vue
@@ -1,13 +1,10 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+interface Props {
+	overflow: boolean;
+}
 
-export default defineComponent({
-	props: {
-		overflow: {
-			type: Boolean,
-			default: false,
-		},
-	},
+withDefaults(defineProps<Props>(), {
+	overflow: false,
 });
 </script>
 
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 5432a8ed54..d5ddf2ade3 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -58,15 +58,15 @@ const scrollToTop = () => {
 	}, 50);
 };
 
-const onOpenTemplate = ({ event, id }: { event: MouseEvent; id: string }) => {
-	navigateTo(event, VIEWS.TEMPLATE, id);
+const onOpenTemplate = ({ event, id }: { event: MouseEvent; id: number }) => {
+	navigateTo(event, VIEWS.TEMPLATE, `${id}`);
 };
 
-const onUseWorkflow = async ({ event, id }: { event: MouseEvent; id: string }) => {
+const onUseWorkflow = async ({ event, id }: { event: MouseEvent; id: number }) => {
 	await useTemplateWorkflow({
 		posthogStore,
 		router,
-		templateId: id,
+		templateId: `${id}`,
 		inNewBrowserTab: event.metaKey || event.ctrlKey,
 		templatesStore,
 		externalHooks,
diff --git a/packages/editor-ui/src/views/TemplatesView.vue b/packages/editor-ui/src/views/TemplatesView.vue
index 6ace293911..d38107f51f 100644
--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@@ -1,18 +1,12 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import GoBackButton from '@/components/GoBackButton.vue';
 
-export default defineComponent({
-	name: 'TemplatesView',
-	components: {
-		GoBackButton,
-	},
-	props: {
-		goBackEnabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
+interface Props {
+	goBackEnabled?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+	goBackEnabled: false,
 });
 </script>