mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
refactor(editor): Fix TypeScript issues in template code (no-changelog) (#9574)
This commit is contained in:
parent
d361b42c70
commit
1cefd488fe
|
@ -12,7 +12,7 @@
|
|||
<div v-if="loading" :class="$style.loading">
|
||||
<n8n-loading :rows="2" :shrink-last="false" :loading="loading" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-else-if="workflow">
|
||||
<n8n-heading :bold="true" size="small">{{ workflow.name }}</n8n-heading>
|
||||
<div v-if="!simpleView" :class="$style.content">
|
||||
<span v-if="workflow.totalViews">
|
||||
|
@ -31,7 +31,10 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!loading" :class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]">
|
||||
<div
|
||||
v-if="!loading && workflow"
|
||||
:class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]"
|
||||
>
|
||||
<NodeList v-if="workflow.nodes" :nodes="workflow.nodes" :limit="nodesToBeShown" size="md" />
|
||||
</div>
|
||||
<div v-if="useWorkflowButton" :class="$style.buttonContainer">
|
||||
|
@ -47,11 +50,12 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { type PropType, defineComponent } from 'vue';
|
||||
import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
|
||||
import { abbreviateNumber } from '@/utils/typesUtils';
|
||||
import NodeList from './NodeList.vue';
|
||||
import TimeAgo from '@/components/TimeAgo.vue';
|
||||
import type { ITemplatesWorkflow } from '@/Interface';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TemplateCard',
|
||||
|
@ -60,6 +64,9 @@ export default defineComponent({
|
|||
NodeList,
|
||||
},
|
||||
props: {
|
||||
workflow: {
|
||||
type: Object as PropType<ITemplatesWorkflow>,
|
||||
},
|
||||
lastItem: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
|
@ -68,9 +75,6 @@ export default defineComponent({
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
workflow: {
|
||||
type: Object,
|
||||
},
|
||||
useWorkflowButton: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
|
|
@ -2,7 +2,10 @@
|
|||
<div>
|
||||
<n8n-loading :loading="loading" :rows="5" variant="p" />
|
||||
|
||||
<TemplateDetailsBlock v-if="!loading && template.nodes.length > 0" :title="blockTitle">
|
||||
<TemplateDetailsBlock
|
||||
v-if="!loading && template && template.nodes.length > 0"
|
||||
:title="blockTitle"
|
||||
>
|
||||
<div :class="$style.icons">
|
||||
<div
|
||||
v-for="node in filterTemplateNodes(template.nodes)"
|
||||
|
@ -20,15 +23,18 @@
|
|||
</TemplateDetailsBlock>
|
||||
|
||||
<TemplateDetailsBlock
|
||||
v-if="!loading && template?.categories.length > 0"
|
||||
v-if="!loading && isFullTemplatesCollection(template) && template.categories.length > 0"
|
||||
:title="$locale.baseText('template.details.categories')"
|
||||
>
|
||||
<n8n-tags :tags="template.categories" @click:tag="redirectToCategory" />
|
||||
</TemplateDetailsBlock>
|
||||
|
||||
<TemplateDetailsBlock v-if="!loading" :title="$locale.baseText('template.details.details')">
|
||||
<TemplateDetailsBlock
|
||||
v-if="!loading && template"
|
||||
:title="$locale.baseText('template.details.details')"
|
||||
>
|
||||
<div :class="$style.text">
|
||||
<n8n-text size="small" color="text-base">
|
||||
<n8n-text v-if="isTemplatesWorkflow(template)" size="small" color="text-base">
|
||||
{{ $locale.baseText('template.details.created') }}
|
||||
<TimeAgo :date="template.createdAt" />
|
||||
{{ $locale.baseText('template.details.by') }}
|
||||
|
@ -36,7 +42,11 @@
|
|||
</n8n-text>
|
||||
</div>
|
||||
<div :class="$style.text">
|
||||
<n8n-text v-if="template.totalViews !== 0" size="small" color="text-base">
|
||||
<n8n-text
|
||||
v-if="isTemplatesWorkflow(template) && template.totalViews !== 0"
|
||||
size="small"
|
||||
color="text-base"
|
||||
>
|
||||
{{ $locale.baseText('template.details.viewed') }}
|
||||
{{ abbreviateNumber(template.totalViews) }}
|
||||
{{ $locale.baseText('template.details.times') }}
|
||||
|
@ -53,10 +63,16 @@ import TemplateDetailsBlock from '@/components/TemplateDetailsBlock.vue';
|
|||
import NodeIcon from '@/components/NodeIcon.vue';
|
||||
import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
|
||||
import { abbreviateNumber } from '@/utils/typesUtils';
|
||||
import type { ITemplatesNode, ITemplatesWorkflow, ITemplatesWorkflowFull } from '@/Interface';
|
||||
import type {
|
||||
ITemplatesCollection,
|
||||
ITemplatesCollectionFull,
|
||||
ITemplatesNode,
|
||||
ITemplatesWorkflow,
|
||||
} from '@/Interface';
|
||||
import { mapStores } from 'pinia';
|
||||
import { useTemplatesStore } from '@/stores/templates.store';
|
||||
import TimeAgo from '@/components/TimeAgo.vue';
|
||||
import { isFullTemplatesCollection, isTemplatesWorkflow } from '@/utils/templates/typeGuards';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TemplateDetails',
|
||||
|
@ -66,15 +82,19 @@ export default defineComponent({
|
|||
TimeAgo,
|
||||
},
|
||||
props: {
|
||||
template: {
|
||||
type: Object as PropType<
|
||||
ITemplatesWorkflow | ITemplatesCollection | ITemplatesCollectionFull | null
|
||||
>,
|
||||
required: true,
|
||||
},
|
||||
blockTitle: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
},
|
||||
template: {
|
||||
type: Object as PropType<ITemplatesWorkflow | ITemplatesWorkflowFull>,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useTemplatesStore),
|
||||
|
@ -90,6 +110,8 @@ export default defineComponent({
|
|||
this.templatesStore.resetSessionId();
|
||||
void this.$router.push(`/templates?search=${node.displayName}`);
|
||||
},
|
||||
isFullTemplatesCollection,
|
||||
isTemplatesWorkflow,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -34,8 +34,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { type PropType, defineComponent } from 'vue';
|
||||
import TemplateCard from './TemplateCard.vue';
|
||||
import type { ITemplatesWorkflow } from '@/Interface';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TemplateList',
|
||||
|
@ -55,7 +56,7 @@ export default defineComponent({
|
|||
default: false,
|
||||
},
|
||||
workflows: {
|
||||
type: Array,
|
||||
type: Array as PropType<ITemplatesWorkflow[]>,
|
||||
default: () => [],
|
||||
},
|
||||
totalWorkflows: {
|
||||
|
@ -103,10 +104,10 @@ export default defineComponent({
|
|||
this.$emit('loadMore');
|
||||
}
|
||||
},
|
||||
onCardClick(event: MouseEvent, id: string) {
|
||||
onCardClick(event: MouseEvent, id: number) {
|
||||
this.$emit('openTemplate', { event, id });
|
||||
},
|
||||
onUseWorkflow(event: MouseEvent, id: string) {
|
||||
onUseWorkflow(event: MouseEvent, id: number) {
|
||||
this.$emit('useWorkflow', { event, id });
|
||||
},
|
||||
},
|
||||
|
|
|
@ -13,9 +13,10 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { type PropType, defineComponent } from 'vue';
|
||||
import Card from '@/components/CollectionWorkflowCard.vue';
|
||||
import NodeList from '@/components/NodeList.vue';
|
||||
import type { ITemplatesCollection } from '@/Interface';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TemplatesInfoCard',
|
||||
|
@ -24,12 +25,13 @@ export default defineComponent({
|
|||
NodeList,
|
||||
},
|
||||
props: {
|
||||
collection: {
|
||||
type: Object as PropType<ITemplatesCollection>,
|
||||
required: true,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
},
|
||||
collection: {
|
||||
type: Object,
|
||||
},
|
||||
showItemCount: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
|
|
@ -56,6 +56,7 @@ export default defineComponent({
|
|||
props: {
|
||||
collections: {
|
||||
type: Array as PropType<ITemplatesCollection[]>,
|
||||
required: true,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
|
@ -125,7 +126,7 @@ export default defineComponent({
|
|||
this.scrollEnd = scrollWidth - width <= scrollLeft + 7;
|
||||
}
|
||||
},
|
||||
onCardClick(event: MouseEvent, id: string) {
|
||||
onCardClick(event: MouseEvent, id: number) {
|
||||
this.$emit('openCollection', { event, id });
|
||||
},
|
||||
scrollLeft() {
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
import { onMounted, onBeforeUnmount, ref, computed, watch } from 'vue';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { useToast } from '@/composables/useToast';
|
||||
import type { IWorkflowDb } from '@/Interface';
|
||||
import type { IWorkflowDb, IWorkflowTemplate } from '@/Interface';
|
||||
import { useRootStore } from '@/stores/n8nRoot.store';
|
||||
import { useExecutionsStore } from '@/stores/executions.store';
|
||||
|
||||
|
@ -34,7 +34,7 @@ const props = withDefaults(
|
|||
defineProps<{
|
||||
loading?: boolean;
|
||||
mode?: 'workflow' | 'execution';
|
||||
workflow?: IWorkflowDb;
|
||||
workflow?: IWorkflowDb | IWorkflowTemplate['workflow'];
|
||||
executionId?: string;
|
||||
executionMode?: string;
|
||||
loaderType?: 'image' | 'spinner';
|
||||
|
|
1
packages/editor-ui/src/shims.d.ts
vendored
1
packages/editor-ui/src/shims.d.ts
vendored
|
@ -5,6 +5,7 @@ import { ExternalHooks } from '@/types/externalHooks';
|
|||
declare module 'markdown-it-link-attributes';
|
||||
declare module 'markdown-it-emoji';
|
||||
declare module 'markdown-it-task-lists';
|
||||
declare module 'vue-agile';
|
||||
|
||||
declare global {
|
||||
interface ImportMeta {
|
||||
|
|
17
packages/editor-ui/src/utils/templates/typeGuards.ts
Normal file
17
packages/editor-ui/src/utils/templates/typeGuards.ts
Normal file
|
@ -0,0 +1,17 @@
|
|||
import type {
|
||||
ITemplatesCollection,
|
||||
ITemplatesCollectionFull,
|
||||
ITemplatesWorkflow,
|
||||
} from '@/Interface';
|
||||
|
||||
export function isTemplatesWorkflow(
|
||||
template: ITemplatesWorkflow | ITemplatesCollection | ITemplatesCollectionFull | null,
|
||||
): template is ITemplatesWorkflow {
|
||||
return !!template && 'totalViews' in template;
|
||||
}
|
||||
|
||||
export function isFullTemplatesCollection(
|
||||
template: ITemplatesWorkflow | ITemplatesCollectionFull | ITemplatesCollection | null,
|
||||
): template is ITemplatesCollectionFull {
|
||||
return !!template && 'description' in template && 'categories' in template;
|
||||
}
|
|
@ -21,10 +21,10 @@
|
|||
<template v-if="!notFoundError" #content>
|
||||
<div :class="$style.wrapper">
|
||||
<div :class="$style.mainContent">
|
||||
<div v-if="loading || (collection && collection.description)" :class="$style.markdown">
|
||||
<div v-if="loading || isFullTemplatesCollection(collection)" :class="$style.markdown">
|
||||
<n8n-markdown
|
||||
:content="collection && collection.description"
|
||||
:images="collection && collection.image"
|
||||
:content="isFullTemplatesCollection(collection) && collection.description"
|
||||
:images="isFullTemplatesCollection(collection) && collection.image"
|
||||
:loading="loading"
|
||||
/>
|
||||
</div>
|
||||
|
@ -32,7 +32,7 @@
|
|||
:infinite-scroll-enabled="false"
|
||||
:loading="loading"
|
||||
:use-workflow-button="true"
|
||||
:workflows="loading ? [] : collectionWorkflows"
|
||||
:workflows="collectionWorkflows"
|
||||
@use-workflow="onUseWorkflow"
|
||||
@open-template="onOpenTemplate"
|
||||
/>
|
||||
|
@ -61,7 +61,6 @@ import type {
|
|||
ITemplatesCollection,
|
||||
ITemplatesCollectionFull,
|
||||
ITemplatesWorkflow,
|
||||
ITemplatesWorkflowFull,
|
||||
} from '@/Interface';
|
||||
|
||||
import { setPageTitle } from '@/utils/htmlUtils';
|
||||
|
@ -71,6 +70,7 @@ import { usePostHog } from '@/stores/posthog.store';
|
|||
import { useTemplateWorkflow } from '@/utils/templates/templateActions';
|
||||
import { useExternalHooks } from '@/composables/useExternalHooks';
|
||||
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
||||
import { isFullTemplatesCollection } from '@/utils/templates/typeGuards';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TemplatesCollectionView',
|
||||
|
@ -88,7 +88,7 @@ export default defineComponent({
|
|||
},
|
||||
computed: {
|
||||
...mapStores(useTemplatesStore, usePostHog),
|
||||
collection(): ITemplatesCollectionFull | null {
|
||||
collection(): ITemplatesCollectionFull | ITemplatesCollection | null {
|
||||
return this.templatesStore.getCollectionById(this.collectionId);
|
||||
},
|
||||
collectionId(): string {
|
||||
|
@ -96,13 +96,13 @@ export default defineComponent({
|
|||
? this.$route.params.id[0]
|
||||
: this.$route.params.id;
|
||||
},
|
||||
collectionWorkflows(): Array<ITemplatesWorkflow | ITemplatesWorkflowFull | null> | null {
|
||||
if (!this.collection) {
|
||||
return null;
|
||||
collectionWorkflows(): ITemplatesWorkflow[] {
|
||||
if (!this.collection || this.loading) {
|
||||
return [];
|
||||
}
|
||||
return this.collection.workflows.map(({ id }) => {
|
||||
return this.templatesStore.getTemplateById(id.toString());
|
||||
});
|
||||
return this.collection.workflows
|
||||
.map(({ id }) => this.templatesStore.getTemplateById(id.toString()))
|
||||
.filter((workflow): workflow is ITemplatesWorkflow => !!workflow);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
@ -123,7 +123,7 @@ export default defineComponent({
|
|||
async mounted() {
|
||||
this.scrollToTop();
|
||||
|
||||
if (this.collection && this.collection.full) {
|
||||
if (this.collection && 'full' in this.collection && this.collection.full) {
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
|
@ -172,6 +172,7 @@ export default defineComponent({
|
|||
void this.$router.push({ name: page, params: { id } });
|
||||
}
|
||||
},
|
||||
isFullTemplatesCollection,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -198,8 +198,9 @@ export default defineComponent({
|
|||
|
||||
setTimeout(() => {
|
||||
// Check if there is scroll position saved in route and scroll to it
|
||||
if (this.$route.meta && this.$route.meta.scrollOffset > 0) {
|
||||
this.scrollTo(this.$route.meta.scrollOffset, 'auto');
|
||||
const scrollOffset = this.$route.meta?.scrollOffset;
|
||||
if (typeof scrollOffset === 'number' && scrollOffset > 0) {
|
||||
this.scrollTo(scrollOffset, 'auto');
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
|
|
|
@ -31,15 +31,15 @@
|
|||
<WorkflowPreview
|
||||
v-if="showPreview"
|
||||
:loading="loading"
|
||||
:workflow="template && template.workflow"
|
||||
:workflow="template?.workflow"
|
||||
@close="onHidePreview"
|
||||
/>
|
||||
</div>
|
||||
<div :class="$style.content">
|
||||
<div :class="$style.markdown" data-test-id="template-description">
|
||||
<n8n-markdown
|
||||
:content="template && template.description"
|
||||
:images="template && template.image"
|
||||
:content="template?.description"
|
||||
:images="template?.image"
|
||||
:loading="loading"
|
||||
/>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue