✨ Add Templates (#2720)
* Templates Bugs / Fixed Various Bugs / Multiply Api Request, Carousel Gradient, Core Nodes Filters ... * Updated MainSidebar Paddings * N8N-Templates Bugfixing - Remove Unnecesairy Icon (Shape), Refatctor infiniteScrollEnabled Prop + updated infiniterScroll functinality * N8N-2853 Fixed Carousel Arrows Bug after Cleaning the SearchBar * fix telemetry init * fix search tracking issues * N8N-2853 Created FilterTemplateNode Constant Array, Filter PlayButton and WebhookRespond from Nodes, Added Box for showing more nodes inside TemplateList, Updated NewWorkflowButton to primary, Fixed Markdown issue with Code * N8N-2853 Removed Placeholder if Workflows Or Collections are not found, Updated the Logic * fix telemetry events * clean up session id * update user inserted event * N8N-2853 Fixed Categories to Moving if the names are long * Add todos * Update Routes on loading * fix spacing * Update Border Color * Update Border Readius * fix filter fn * fix constant, console error * N8N-2853 PR Fixes, Refactoring, Removing unnecesairy code .. * N8N-2853 PR Fixes - Editor-ui Fixes, Refactoring, Removing Dead Code ... * N8N-2853 Refactor Card to LongCard * clean up spacing, replace css var * clean up spacing * set categories as optional in node * replace vars * refactor store * remove unnesssary import * fix error * fix templates view to start * add to cache * fix coll view data * fix categories * fix category event * fix collections carousel * fix initial load and search * fix infinite load * fix query param * fix scrolling issues * fix scroll to top * fix search * fix collections search * fix navigation bug * rename view * update package lock * rename workflow view * rename coll view * update routes * add wrapper component * set session id * fix search tracking * fix session tracking * remove deleted mutation * remove check for unsupported nodes * refactor filters * lazy load template * clean up types * refactor infinte scroll * fix end of search * Fix spacing * fix coll loading * fix types * fix coll view list * fix navigation * rename types * rename state * fix search responsiveness * fix coll view spacing * fix search view spacing * clean up views * set background color * center page not vert * fix workflow view * remove import * fix background color * fix background * clean props * clean up imports * refactor button * update background color * fix spacing issue * rename event * update telemetry event * update endpoints, add loading view, check for endpoint health * remove conolse log * N8N-2853 Fixed Menu Items Padding * replace endpoints * fix type issues * fix categories * N8N-2853 Fixed ParameterInput Placeholder after ElementUI Upgrade * update createdAt * ⚡ Fix placeholder in creds config modal * ✏️ Adjust docstring to `credText` placeholder version * N8N-2853 Optimized * N8N-2853 Optimized code * ⚡ Add deployment type to FE settings * ⚡ Add deployment type to interfaces * N8N-2853 Removed Animated prop from components * ⚡ Add deployment type to store module * ✨ Create hiring banner * ⚡ Display hiring banner * ⏪ Undo unrelated change * N8N-2853 Refactor TemplateFilters * ⚡ Fix indentation * N8N-2853 Reorder items / TemplateList * 👕 Fix lint * N8N-2853 Refactor TemplateFilters Component * N8N-2853 Reorder TemplateList * refactor template card * update timeout * fix removelistener * fix spacing * split enabled from offline * add spacing to go back * N8N-2853 Fixed Screens for Tablet & Mobile * N8N-2853 Update Stores Order * remove image componet * remove placeholder changes * N8N-2853 Fixed Chinnese Placeholders for El Select Component that comes from the Library Upgrade * N8N-2853 Fixed Vue Agile Console Warnings * N8N-2853 Update Collection Route * ✏️ Update jobs URL * 🚚 Move logging to root component * ⚡ Refactor `deploymentType` to `isInternalUser` * ⚡ Improve syntax * fix cut bug in readonly view * N8N-3012 Fixed Details section in templates with lots of description, Fixed Mardown Block with overflox-x * N8N-3012 Increased Font-size, Spacing and Line-height of the Categories Items * N8N-3012 Fixed Vue-agile client width error on resize * only delay redirect for root path * N8N-3012 Fixed Carousel Arrows that Disappear * N8N-3012 Make Loading Screen same color as Templates * N8N-3012 Markdown renders inline block as block code * add offline warning * hide log from workflow iframe * update text * make search button larger * N8N-3012 Categories / Tags extended all the way in details section * load data in cred modals * remove deleted message * add external hook * remove import * update env variable description * fix markdown width issue * disable telemetry for demo, add session id to template pages * fix telemetery bugs * N8N-3012 Not found Collections/Wokrkflow * N8N-3012 Checkboxes change order when categories are changed * N8N-3012 Refactor SortedCategories inside TemplateFilters component * fix firefox bug * add telemetry requirements * add error check * N8N-3012 Update GoBackButton to check if Route History is present * N8N-3012 Fixed WF Nodes Icons * hide workflow screenshots * remove unnessary mixins * rename prop * fix design a bit * rename data * clear workspace on destroy * fix copy paste bug * fix disabled state * N8N-3012 Fixed Saving/Leave without saving Modal * fix telemetry issue * fix telemetry issues, error bug * fix error notification * disable workflow menu items on templates * fix i18n elementui issue * Remove Emit - NodeType from HoverableNodeIcon component * TechnicalFixes: NavigateTo passed down as function should be helper * TechnicalFixes: Update NavigateTo function * TechnicalFixes: Add FilterCoreNodes directly as function * check for empty connecitions * fix titles * respect new lines * increase categories to be sliced * rename prop * onUseWorkflow * refactor click event * fix bug, refactor * fix loading story * add default * fix styles at right level of abstraction * add wrapper with width * remove loading blocks component * add story * rename prop * fix spacing * refactor tag, add story * move margin to container * fix tag redirect, remove unnessary check * make version optional * rename view * move from workflows to templates store * remove unnessary change * remove unnessary css * rename component * refactor collection card * add boolean to prevent shrink * clean up carousel * fix redirection bug on save * remove listeners to fix multiple listeners bug * remove unnessary types * clean up boolean set * fix node select bug * rename component * remove unnessary class * fix redirection bug * remove unnessary error * fix typo * fix blockquotes, pre * refactor markdown rendering * remove console log * escape markdown * fix safari bug * load active workflows to fix modal bug * ⬆️ Update package-lock.json file * ⚡ Add n8n version as header Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com> Co-authored-by: Mutasem <mutdmour@gmail.com> Co-authored-by: Iván Ovejero <ivov.src@gmail.com> Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Oliver Trajceski
GitHub
396
packages/editor-ui/src/views/TemplatesSearchView.vue
Normal file
396
packages/editor-ui/src/views/TemplatesSearchView.vue
Normal file
@@ -0,0 +1,396 @@
|
||||
<template>
|
||||
<TemplatesView>
|
||||
<template v-slot:header>
|
||||
<div :class="$style.wrapper">
|
||||
<div :class="$style.title">
|
||||
<n8n-heading tag="h1" size="2xlarge">
|
||||
{{ $locale.baseText('templates.heading') }}
|
||||
</n8n-heading>
|
||||
</div>
|
||||
<div :class="$style.button">
|
||||
<n8n-button
|
||||
size="medium"
|
||||
:label="$locale.baseText('templates.newButton')"
|
||||
@click="openNewWorkflow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<div :class="$style.contentWrapper">
|
||||
<div :class="$style.filters">
|
||||
<TemplateFilters
|
||||
:categories="allCategories"
|
||||
:sortOnPopulate="areCategoriesPrepopulated"
|
||||
:loading="loadingCategories"
|
||||
:selected="categories"
|
||||
@clear="onCategoryUnselected"
|
||||
@clearAll="onCategoriesCleared"
|
||||
@select="onCategorySelected"
|
||||
/>
|
||||
</div>
|
||||
<div :class="$style.search">
|
||||
<n8n-input
|
||||
:value="search"
|
||||
:placeholder="$locale.baseText('templates.searchPlaceholder')"
|
||||
@input="onSearchInput"
|
||||
@blur="trackSearch"
|
||||
clearable
|
||||
>
|
||||
<font-awesome-icon icon="search" slot="prefix" />
|
||||
</n8n-input>
|
||||
<div :class="$style.carouselContainer" v-show="collections.length || loadingCollections">
|
||||
<div :class="$style.header">
|
||||
<n8n-heading :bold="true" size="medium" color="text-light">
|
||||
{{ $locale.baseText('templates.collections') }}
|
||||
<span v-if="!loadingCollections" v-text="`(${collections.length})`" />
|
||||
</n8n-heading>
|
||||
</div>
|
||||
|
||||
<CollectionsCarousel
|
||||
:collections="collections"
|
||||
:loading="loadingCollections"
|
||||
@openCollection="onOpenCollection"
|
||||
/>
|
||||
</div>
|
||||
<TemplateList
|
||||
:infinite-scroll-enabled="true"
|
||||
:loading="loadingWorkflows"
|
||||
:total-workflows="totalWorkflows"
|
||||
:workflows="workflows"
|
||||
@loadMore="onLoadMore"
|
||||
@openTemplate="onOpenTemplate"
|
||||
/>
|
||||
<div v-if="endOfSearchMessage" :class="$style.endText">
|
||||
<n8n-text size="medium" color="text-base">
|
||||
<span v-html="endOfSearchMessage" />
|
||||
</n8n-text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</TemplatesView>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import CollectionsCarousel from '@/components/CollectionsCarousel.vue';
|
||||
import TemplateFilters from '@/components/TemplateFilters.vue';
|
||||
import TemplateList from '@/components/TemplateList.vue';
|
||||
import TemplatesView from './TemplatesView.vue';
|
||||
|
||||
import { genericHelpers } from '@/components/mixins/genericHelpers';
|
||||
import { ITemplatesCollection, ITemplatesWorkflow, ITemplatesQuery, ITemplatesCategory } from '@/Interface';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { IDataObject } from 'n8n-workflow';
|
||||
import { setPageTitle } from '@/components/helpers';
|
||||
|
||||
interface ISearchEvent {
|
||||
search_string: string;
|
||||
workflow_results_count: number;
|
||||
collection_results_count: number;
|
||||
categories_applied: ITemplatesCategory[];
|
||||
wf_template_repo_session_id: number;
|
||||
}
|
||||
|
||||
export default mixins(genericHelpers).extend({
|
||||
name: 'TemplatesSearchView',
|
||||
components: {
|
||||
CollectionsCarousel,
|
||||
TemplateFilters,
|
||||
TemplateList,
|
||||
TemplatesView,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('templates', ['allCategories', 'getSearchedWorkflowsTotal', 'getSearchedWorkflows', 'getSearchedCollections']),
|
||||
...mapGetters('settings', ['isTemplatesEndpointReachable']),
|
||||
collections(): ITemplatesCollection[] {
|
||||
return this.getSearchedCollections(this.query) || [];
|
||||
},
|
||||
endOfSearchMessage(): string | null {
|
||||
if (this.loadingWorkflows) {
|
||||
return null;
|
||||
}
|
||||
if (this.workflows.length && this.workflows.length >= this.totalWorkflows) {
|
||||
return this.$locale.baseText('templates.endResult');
|
||||
}
|
||||
if (!this.loadingCollections && this.workflows.length === 0 && this.collections.length === 0) {
|
||||
if (!this.isTemplatesEndpointReachable && this.errorLoadingWorkflows) {
|
||||
return this.$locale.baseText('templates.connectionWarning');
|
||||
}
|
||||
return this.$locale.baseText('templates.noSearchResults');
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
query(): ITemplatesQuery {
|
||||
return {
|
||||
categories: this.categories,
|
||||
search: this.search,
|
||||
};
|
||||
},
|
||||
nothingFound(): boolean {
|
||||
return (
|
||||
!this.loadingWorkflows &&
|
||||
!this.loadingCollections &&
|
||||
this.workflows.length === 0 &&
|
||||
this.collections.length === 0
|
||||
);
|
||||
},
|
||||
totalWorkflows(): number {
|
||||
return this.getSearchedWorkflowsTotal(this.query);
|
||||
},
|
||||
workflows(): ITemplatesWorkflow[] {
|
||||
return this.getSearchedWorkflows(this.query) || [];
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
areCategoriesPrepopulated: false,
|
||||
categories: [] as number[],
|
||||
loading: true,
|
||||
loadingCategories: true,
|
||||
loadingCollections: true,
|
||||
loadingWorkflows: true,
|
||||
search: '',
|
||||
searchEventToTrack: null as null | ISearchEvent,
|
||||
errorLoadingWorkflows: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onOpenCollection({event, id}: {event: MouseEvent, id: string}) {
|
||||
this.navigateTo(event, 'TemplatesCollectionView', id);
|
||||
},
|
||||
onOpenTemplate({event, id}: {event: MouseEvent, id: string}) {
|
||||
this.navigateTo(event, 'TemplatesWorkflowView', id);
|
||||
},
|
||||
navigateTo(e: MouseEvent, page: string, id: string) {
|
||||
if (e.metaKey || e.ctrlKey) {
|
||||
const route = this.$router.resolve({ name: page, params: { id } });
|
||||
window.open(route.href, '_blank');
|
||||
return;
|
||||
} else {
|
||||
this.$router.push({ name: page, params: { id } });
|
||||
}
|
||||
},
|
||||
updateSearch() {
|
||||
this.updateQueryParam(this.search, this.categories.join(','));
|
||||
this.loadWorkflowsAndCollections(false);
|
||||
},
|
||||
updateSearchTracking(search: string, categories: number[]) {
|
||||
if (!search) {
|
||||
return;
|
||||
}
|
||||
if (this.searchEventToTrack && this.searchEventToTrack.search_string.length > search.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.searchEventToTrack = {
|
||||
search_string: search,
|
||||
workflow_results_count: this.getSearchedWorkflowsTotal({search, categories}),
|
||||
collection_results_count: this.getSearchedCollections({search, categories}).length,
|
||||
categories_applied: categories.map((categoryId) =>
|
||||
this.$store.getters['templates/getCategoryById'](categoryId),
|
||||
) as ITemplatesCategory[],
|
||||
wf_template_repo_session_id: this.$store.getters['templates/currentSessionId'],
|
||||
};
|
||||
},
|
||||
trackSearch() {
|
||||
if (this.searchEventToTrack) {
|
||||
this.$telemetry.track('User searched workflow templates', this.searchEventToTrack as unknown as IDataObject);
|
||||
this.searchEventToTrack = null;
|
||||
}
|
||||
},
|
||||
openNewWorkflow() {
|
||||
this.$router.push({ name: 'NodeViewNew' });
|
||||
},
|
||||
onSearchInput(search: string) {
|
||||
this.loadingWorkflows = true;
|
||||
this.loadingCollections = true;
|
||||
this.search = search;
|
||||
this.callDebounced('updateSearch', 500, true);
|
||||
|
||||
if (search.length === 0) {
|
||||
this.trackSearch();
|
||||
}
|
||||
},
|
||||
onCategorySelected(selected: number) {
|
||||
this.categories = this.categories.concat(selected);
|
||||
this.updateSearch();
|
||||
this.trackCategories();
|
||||
},
|
||||
onCategoryUnselected(selected: number) {
|
||||
this.categories = this.categories.filter((id) => id !== selected);
|
||||
this.updateSearch();
|
||||
this.trackCategories();
|
||||
},
|
||||
onCategoriesCleared() {
|
||||
this.categories = [];
|
||||
this.updateSearch();
|
||||
},
|
||||
trackCategories() {
|
||||
if (this.categories.length) {
|
||||
this.$telemetry.track('User changed template filters', {
|
||||
search_string: this.search,
|
||||
categories_applied: this.categories.map((categoryId: number) =>
|
||||
this.$store.getters['templates/getCategoryById'](categoryId),
|
||||
),
|
||||
wf_template_repo_session_id: this.$store.getters['templates/currentSessionId'],
|
||||
});
|
||||
}
|
||||
},
|
||||
updateQueryParam(search: string, category: string) {
|
||||
const query = Object.assign({}, this.$route.query);
|
||||
|
||||
if (category.length) {
|
||||
query.categories = category;
|
||||
} else {
|
||||
delete query.categories;
|
||||
}
|
||||
|
||||
if (search.length) {
|
||||
query.search = search;
|
||||
} else {
|
||||
delete query.search;
|
||||
}
|
||||
|
||||
this.$router.replace({ query });
|
||||
},
|
||||
async onLoadMore() {
|
||||
if (this.workflows.length >= this.totalWorkflows) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
this.loadingWorkflows = true;
|
||||
await this.$store.dispatch('templates/getMoreWorkflows', {
|
||||
categories: this.categories,
|
||||
search: this.search,
|
||||
});
|
||||
} catch (e) {
|
||||
this.$showMessage({
|
||||
title: 'Error',
|
||||
message: 'Could not load more workflows',
|
||||
type: 'error',
|
||||
});
|
||||
} finally {
|
||||
this.loadingWorkflows = false;
|
||||
}
|
||||
},
|
||||
async loadCategories() {
|
||||
try {
|
||||
await this.$store.dispatch('templates/getCategories');
|
||||
} catch (e) {
|
||||
}
|
||||
|
||||
this.loadingCategories = false;
|
||||
},
|
||||
async loadCollections() {
|
||||
try {
|
||||
this.loadingCollections = true;
|
||||
await this.$store.dispatch('templates/getCollections', {
|
||||
categories: this.categories,
|
||||
search: this.search,
|
||||
});
|
||||
} catch (e) {
|
||||
}
|
||||
|
||||
this.loadingCollections = false;
|
||||
},
|
||||
async loadWorkflows() {
|
||||
try {
|
||||
this.loadingWorkflows = true;
|
||||
await this.$store.dispatch('templates/getWorkflows', {
|
||||
search: this.search,
|
||||
categories: this.categories,
|
||||
});
|
||||
this.errorLoadingWorkflows = false;
|
||||
} catch (e) {
|
||||
this.errorLoadingWorkflows = true;
|
||||
}
|
||||
|
||||
this.loadingWorkflows = false;
|
||||
},
|
||||
async loadWorkflowsAndCollections(initialLoad: boolean) {
|
||||
const search = this.search;
|
||||
const categories = [...this.categories];
|
||||
await Promise.all([this.loadWorkflows(), this.loadCollections()]);
|
||||
if (!initialLoad) {
|
||||
this.updateSearchTracking(search, categories);
|
||||
}
|
||||
},
|
||||
scrollToTop() {
|
||||
setTimeout(() => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}, 100);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
workflows(newWorkflows) {
|
||||
if (newWorkflows.length === 0) {
|
||||
this.scrollToTop();
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
this.trackSearch();
|
||||
next();
|
||||
},
|
||||
async mounted() {
|
||||
setPageTitle('n8n - Templates');
|
||||
this.loadCategories();
|
||||
this.loadWorkflowsAndCollections(true);
|
||||
},
|
||||
async created() {
|
||||
if (this.$route.query.search && typeof this.$route.query.search === 'string') {
|
||||
this.search = this.$route.query.search;
|
||||
}
|
||||
|
||||
if (typeof this.$route.query.categories === 'string' && this.$route.query.categories.length) {
|
||||
this.categories = this.$route.query.categories.split(',').map((categoryId) => parseInt(categoryId, 10));
|
||||
this.areCategoriesPrepopulated = true;
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: $--breakpoint-xs) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
width: 200px;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
padding-left: var(--spacing-2xl);
|
||||
|
||||
> * {
|
||||
margin-bottom: var(--spacing-l);
|
||||
}
|
||||
|
||||
@media (max-width: $--breakpoint-xs) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: var(--spacing-2xs);
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user