mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: Move page components to composables (no-changelog) (#11494)

Browse source
This commit is contained in:
Mutasem Aldmour 2024-11-01 14:11:42 +01:00 committed by GitHub
parent ca2a583b5c
commit c773181a3a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 82 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

137
packages/editor-ui/src/components/TemplateList.vue
View file

@ -1,82 +1,75 @@
<script lang="ts"> <script lang="ts" setup>
import { type PropType, defineComponent } from 'vue'; import { onBeforeUnmount, onMounted, ref } from 'vue';
import TemplateCard from './TemplateCard.vue'; import TemplateCard from './TemplateCard.vue';
import type { ITemplatesWorkflow } from '@/Interface'; import type { ITemplatesWorkflow } from '@/Interface';
export default defineComponent({ interface Props {
name: 'TemplateList', workflows?: ITemplatesWorkflow[];
components: { infiniteScrollEnabled?: boolean;
TemplateCard, loading?: boolean;
}, useWorkflowButton?: boolean;
props: { totalWorkflows?: number;
infiniteScrollEnabled: { simpleView?: boolean;
type: Boolean, totalCount?: number;
default: false, }
},
loading: { const emit = defineEmits<{
type: Boolean, loadMore: [];
}, openTemplate: [{ event: MouseEvent; id: number }];
useWorkflowButton: { useWorkflow: [{ event: MouseEvent; id: number }];
type: Boolean, }>();
default: false,
}, const props = withDefaults(defineProps<Props>(), {
workflows: { infiniteScrollEnabled: false,
type: Array as PropType<ITemplatesWorkflow[]>, loading: false,
default: () => [], useWorkflowButton: false,
}, workflows: () => [],
totalWorkflows: { totalWorkflows: 0,
type: Number, simpleView: false,
default: 0, totalCount: 0,
}, });
simpleView: {
type: Boolean, const loader = ref<HTMLElement | null>(null);
default: false,
}, onMounted(() => {
totalCount: { if (props.infiniteScrollEnabled) {
type: Number,
default: 0,
},
},
mounted() {
if (this.infiniteScrollEnabled) {
const content = document.getElementById('content');
if (content) {
content.addEventListener('scroll', this.onScroll);
}
}
},
beforeUnmount() {
const content = document.getElementById('content'); const content = document.getElementById('content');
if (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> </script>
<template> <template>

18
packages/editor-ui/src/components/layouts/PageViewLayout.vue
View file

@ -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> <template>
<div :class="$style.wrapper"> <div :class="$style.wrapper">
<slot name="header" /> <slot name="header" />

15
packages/editor-ui/src/components/layouts/PageViewLayoutList.vue
View file

@ -1,13 +1,10 @@
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; interface Props {
overflow: boolean;
}
export default defineComponent({ withDefaults(defineProps<Props>(), {
props: { overflow: false,
overflow: {
type: Boolean,
default: false,
},
},
}); });
</script> </script>

8
packages/editor-ui/src/views/TemplatesCollectionView.vue
View file

@ -58,15 +58,15 @@ const scrollToTop = () => {
}, 50); }, 50);
}; };
const onOpenTemplate = ({ event, id }: { event: MouseEvent; id: string }) => { const onOpenTemplate = ({ event, id }: { event: MouseEvent; id: number }) => {
navigateTo(event, VIEWS.TEMPLATE, id); 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({ await useTemplateWorkflow({
posthogStore, posthogStore,
router, router,
templateId: id, templateId: `${id}`,
inNewBrowserTab: event.metaKey || event.ctrlKey, inNewBrowserTab: event.metaKey || event.ctrlKey,
templatesStore, templatesStore,
externalHooks, externalHooks,

20
packages/editor-ui/src/views/TemplatesView.vue
View file

@ -1,18 +1,12 @@
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import GoBackButton from '@/components/GoBackButton.vue'; import GoBackButton from '@/components/GoBackButton.vue';
export default defineComponent({ interface Props {
name: 'TemplatesView', goBackEnabled?: boolean;
components: { }
GoBackButton,
}, withDefaults(defineProps<Props>(), {
props: { goBackEnabled: false,
goBackEnabled: {
type: Boolean,
default: false,
},
},
}); });
</script> </script>