n8n/packages/editor-ui/src/stores/templates.ts

import { defineStore } from 'pinia';
import { STORES } from '@/constants';
import type {
	ITemplatesCategory,
	ITemplatesCollection,
	ITemplatesCollectionFull,
	ITemplatesQuery,
	ITemplateState,
	ITemplatesWorkflow,
	ITemplatesWorkflowFull,
	IWorkflowTemplate,
} from '@/Interface';
import Vue from 'vue';
import { useSettingsStore } from './settings';
import {
	getCategories,
	getCollectionById,
	getCollections,
	getTemplateById,
	getWorkflows,
	getWorkflowTemplate,
} from '@/api/templates';

const TEMPLATES_PAGE_SIZE = 10;

function getSearchKey(query: ITemplatesQuery): string {
	return JSON.stringify([query.search || '', [...query.categories].sort()]);
}

export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
	state: (): ITemplateState => ({
		categories: {},
		collections: {},
		workflows: {},
		collectionSearches: {},
		workflowSearches: {},
		currentSessionId: '',
		previousSessionId: '',
	}),
	getters: {
		allCategories(): ITemplatesCategory[] {
			return Object.values(this.categories).sort((a: ITemplatesCategory, b: ITemplatesCategory) =>
				a.name > b.name ? 1 : -1,
			);
		},
		getTemplateById() {
			return (id: string): null | ITemplatesWorkflow => this.workflows[id];
		},
		getCollectionById() {
			return (id: string): null | ITemplatesCollection => this.collections[id];
		},
		getCategoryById() {
			return (id: string): null | ITemplatesCategory => this.categories[id];
		},
		getSearchedCollections() {
			return (query: ITemplatesQuery) => {
				const searchKey = getSearchKey(query);
				const search = this.collectionSearches[searchKey];
				if (!search) {
					return null;
				}

				return search.collectionIds.map((collectionId: string) => this.collections[collectionId]);
			};
		},
		getSearchedWorkflows() {
			return (query: ITemplatesQuery) => {
				const searchKey = getSearchKey(query);
				const search = this.workflowSearches[searchKey];
				if (!search) {
					return null;
				}

				return search.workflowIds.map((workflowId: string) => this.workflows[workflowId]);
			};
		},
		getSearchedWorkflowsTotal() {
			return (query: ITemplatesQuery) => {
				const searchKey = getSearchKey(query);
				const search = this.workflowSearches[searchKey];

				return search ? search.totalWorkflows : 0;
			};
		},
		isSearchLoadingMore() {
			return (query: ITemplatesQuery) => {
				const searchKey = getSearchKey(query);
				const search = this.workflowSearches[searchKey];

				return Boolean(search && search.loadingMore);
			};
		},
		isSearchFinished() {
			return (query: ITemplatesQuery) => {
				const searchKey = getSearchKey(query);
				const search = this.workflowSearches[searchKey];

				return Boolean(
					search && !search.loadingMore && search.totalWorkflows === search.workflowIds.length,
				);
			};
		},
	},
	actions: {
		addCategories(categories: ITemplatesCategory[]): void {
			categories.forEach((category: ITemplatesCategory) => {
				Vue.set(this.categories, category.id, category);
			});
		},
		addCollections(collections: Array<ITemplatesCollection | ITemplatesCollectionFull>): void {
			collections.forEach((collection) => {
				const workflows = (collection.workflows || []).map((workflow) => ({ id: workflow.id }));
				const cachedCollection = this.collections[collection.id] || {};
				Vue.set(this.collections, collection.id, {
					...cachedCollection,
					...collection,
					workflows,
				});
			});
		},
		addWorkflows(workflows: Array<ITemplatesWorkflow | ITemplatesWorkflowFull>): void {
			workflows.forEach((workflow: ITemplatesWorkflow) => {
				const cachedWorkflow = this.workflows[workflow.id] || {};
				Vue.set(this.workflows, workflow.id, {
					...cachedWorkflow,
					...workflow,
				});
			});
		},
		addCollectionSearch(data: {
			collections: ITemplatesCollection[];
			query: ITemplatesQuery;
		}): void {
			const collectionIds = data.collections.map((collection) => collection.id);
			const searchKey = getSearchKey(data.query);
			Vue.set(this.collectionSearches, searchKey, {
				collectionIds,
			});
		},
		addWorkflowsSearch(data: {
			totalWorkflows: number;
			workflows: ITemplatesWorkflow[];
			query: ITemplatesQuery;
		}): void {
			const workflowIds = data.workflows.map((workflow) => workflow.id);
			const searchKey = getSearchKey(data.query);
			const cachedResults = this.workflowSearches[searchKey];
			if (!cachedResults) {
				Vue.set(this.workflowSearches, searchKey, {
					workflowIds,
					totalWorkflows: data.totalWorkflows,
				});

				return;
			}

			Vue.set(this.workflowSearches, searchKey, {
				workflowIds: [...cachedResults.workflowIds, ...workflowIds],
				totalWorkflows: data.totalWorkflows,
			});
		},
		setWorkflowSearchLoading(query: ITemplatesQuery): void {
			const searchKey = getSearchKey(query);
			const cachedResults = this.workflowSearches[searchKey];
			if (!cachedResults) {
				return;
			}

			Vue.set(this.workflowSearches[searchKey], 'loadingMore', true);
		},
		setWorkflowSearchLoaded(query: ITemplatesQuery): void {
			const searchKey = getSearchKey(query);
			const cachedResults = this.workflowSearches[searchKey];
			if (!cachedResults) {
				return;
			}

			Vue.set(this.workflowSearches[searchKey], 'loadingMore', false);
		},
		resetSessionId(): void {
			this.previousSessionId = this.currentSessionId;
			this.currentSessionId = '';
		},
		setSessionId(): void {
			if (!this.currentSessionId) {
				this.currentSessionId = `templates-${Date.now()}`;
			}
		},
		async fetchTemplateById(
			templateId: string,
		): Promise<ITemplatesWorkflow | ITemplatesWorkflowFull> {
			const settingsStore = useSettingsStore();
			const apiEndpoint: string = settingsStore.templatesHost;
			const versionCli: string = settingsStore.versionCli;
			const response = await getTemplateById(apiEndpoint, templateId, {
				'n8n-version': versionCli,
			});

			const template: ITemplatesWorkflowFull = {
				...response.workflow,
				full: true,
			};
			this.addWorkflows([template]);

			return template;
		},
		async fetchCollectionById(collectionId: string): Promise<ITemplatesCollection | null> {
			const settingsStore = useSettingsStore();
			const apiEndpoint: string = settingsStore.templatesHost;
			const versionCli: string = settingsStore.versionCli;
			const response = await getCollectionById(apiEndpoint, collectionId, {
				'n8n-version': versionCli,
			});
			const collection: ITemplatesCollectionFull = {
				...response.collection,
				full: true,
			};

			this.addCollections([collection]);
			this.addWorkflows(response.collection.workflows);
			return this.getCollectionById(collectionId);
		},
		async getCategories(): Promise<ITemplatesCategory[]> {
			const cachedCategories = this.allCategories;
			if (cachedCategories.length) {
				return cachedCategories;
			}
			const settingsStore = useSettingsStore();
			const apiEndpoint: string = settingsStore.templatesHost;
			const versionCli: string = settingsStore.versionCli;
			const response = await getCategories(apiEndpoint, { 'n8n-version': versionCli });
			const categories = response.categories;

			this.addCategories(categories);
			return categories;
		},
		async getCollections(query: ITemplatesQuery): Promise<ITemplatesCollection[]> {
			const cachedResults = this.getSearchedCollections(query);
			if (cachedResults) {
				return cachedResults;
			}

			const settingsStore = useSettingsStore();
			const apiEndpoint: string = settingsStore.templatesHost;
			const versionCli: string = settingsStore.versionCli;
			const response = await getCollections(apiEndpoint, query, { 'n8n-version': versionCli });
			const collections = response.collections;

			this.addCollections(collections);
			this.addCollectionSearch({ query, collections });
			collections.forEach((collection) =>
				this.addWorkflows(collection.workflows as ITemplatesWorkflowFull[]),
			);

			return collections;
		},
		async getWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
			const cachedResults = this.getSearchedWorkflows(query);
			if (cachedResults) {
				return cachedResults;
			}

			const settingsStore = useSettingsStore();
			const apiEndpoint: string = settingsStore.templatesHost;
			const versionCli: string = settingsStore.versionCli;

			const payload = await getWorkflows(
				apiEndpoint,
				{ ...query, skip: 0, limit: TEMPLATES_PAGE_SIZE },
				{ 'n8n-version': versionCli },
			);

			this.addWorkflows(payload.workflows);
			this.addWorkflowsSearch({ ...payload, query });
			return this.getSearchedWorkflows(query) || [];
		},
		async getMoreWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
			if (this.isSearchLoadingMore(query) && !this.isSearchFinished(query)) {
				return [];
			}
			const cachedResults = this.getSearchedWorkflows(query) || [];
			const settingsStore = useSettingsStore();
			const apiEndpoint: string = settingsStore.templatesHost;

			this.setWorkflowSearchLoading(query);
			try {
				const payload = await getWorkflows(apiEndpoint, {
					...query,
					skip: cachedResults.length,
					limit: TEMPLATES_PAGE_SIZE,
				});

				this.setWorkflowSearchLoaded(query);
				this.addWorkflows(payload.workflows);
				this.addWorkflowsSearch({ ...payload, query });

				return this.getSearchedWorkflows(query) || [];
			} catch (e) {
				this.setWorkflowSearchLoaded(query);
				throw e;
			}
		},
		async getWorkflowTemplate(templateId: string): Promise<IWorkflowTemplate> {
			const settingsStore = useSettingsStore();
			const apiEndpoint: string = settingsStore.templatesHost;
			const versionCli: string = settingsStore.versionCli;
			return await getWorkflowTemplate(apiEndpoint, templateId, { 'n8n-version': versionCli });
		},
	},
});