mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 10:02:05 +00:00
✨ 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
181
packages/editor-ui/src/components/CollectionsCarousel.vue
Normal file
181
packages/editor-ui/src/components/CollectionsCarousel.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div :class="$style.container" v-show="loading || collections.length">
|
||||
<agile ref="slider" :dots="false" :navButtons="false" :infinite="false" :slides-to-show="4" @after-change="updateCarouselScroll">
|
||||
<Card v-for="n in (loading ? 4: 0)" :key="`loading-${n}`" :loading="loading" />
|
||||
<CollectionCard
|
||||
v-for="collection in (loading? []: collections)"
|
||||
:key="collection.id"
|
||||
:collection="collection"
|
||||
@click="(e) => onCardClick(e, collection.id)"
|
||||
/>
|
||||
</agile>
|
||||
<button v-show="carouselScrollPosition > 0" :class="$style.leftButton" @click="scrollLeft">
|
||||
<font-awesome-icon icon="chevron-left" />
|
||||
</button>
|
||||
<button v-show="!scrollEnd" :class="$style.rightButton" @click="scrollRight">
|
||||
<font-awesome-icon icon="chevron-right" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Card from '@/components/Card.vue';
|
||||
import CollectionCard from '@/components/CollectionCard.vue';
|
||||
import VueAgile from 'vue-agile';
|
||||
|
||||
import { genericHelpers } from '@/components/mixins/genericHelpers';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
export default mixins(genericHelpers).extend({
|
||||
name: 'CollectionsCarousel',
|
||||
props: {
|
||||
collections: {
|
||||
type: Array,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
collections() {
|
||||
setTimeout(() => {
|
||||
this.updateCarouselScroll();
|
||||
}, 0);
|
||||
},
|
||||
loading() {
|
||||
setTimeout(() => {
|
||||
this.updateCarouselScroll();
|
||||
}, 0);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Card,
|
||||
CollectionCard,
|
||||
VueAgile,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
carouselScrollPosition: 0,
|
||||
cardWidth: 240,
|
||||
scrollEnd: false,
|
||||
listElement: null as null | Element,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateCarouselScroll() {
|
||||
if (this.listElement) {
|
||||
this.carouselScrollPosition = Number(this.listElement.scrollLeft.toFixed());
|
||||
|
||||
const width = this.listElement.clientWidth;
|
||||
const scrollWidth = this.listElement.scrollWidth;
|
||||
const scrollLeft = this.carouselScrollPosition;
|
||||
this.scrollEnd = scrollWidth - width <= scrollLeft + 7;
|
||||
}
|
||||
},
|
||||
onCardClick(event: MouseEvent, id: string) {
|
||||
this.$emit('openCollection', {event, id});
|
||||
},
|
||||
scrollLeft() {
|
||||
if (this.listElement) {
|
||||
this.listElement.scrollBy({ left: -(this.cardWidth * 2), top: 0, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
scrollRight() {
|
||||
if (this.listElement) {
|
||||
this.listElement.scrollBy({ left: this.cardWidth * 2, top: 0, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const slider = this.$refs.slider;
|
||||
if (!slider) {
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
this.listElement = slider.$el.querySelector('.agile__list');
|
||||
if (this.listElement) {
|
||||
this.listElement.addEventListener('scroll', this.updateCarouselScroll);
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.$refs.slider) {
|
||||
// @ts-ignore
|
||||
this.$refs.slider.destroy();
|
||||
}
|
||||
window.removeEventListener('scroll', this.updateCarouselScroll);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 28px;
|
||||
height: 37px;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
border-radius: var(--border-radius-large);
|
||||
border: var(--border-base);
|
||||
background-color: #fbfcfe;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 40px;
|
||||
height: 140px;
|
||||
top: -55px;
|
||||
position: absolute;
|
||||
}
|
||||
svg {
|
||||
color: var(--color-foreground-xdark);
|
||||
}
|
||||
}
|
||||
|
||||
.leftButton {
|
||||
composes: button;
|
||||
left: -30px;
|
||||
|
||||
&:after {
|
||||
left: 27px;
|
||||
background: linear-gradient(270deg, rgba(255, 255, 255, 0.25) 0%, rgba(248, 249, 251, 1) 86%);
|
||||
}
|
||||
}
|
||||
|
||||
.rightButton {
|
||||
composes: button;
|
||||
right: -30px;
|
||||
&:after {
|
||||
right: 27px;
|
||||
background: linear-gradient(270deg,rgba(248, 249, 251, 1) 25%, rgba(255, 255, 255, 0.25) 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.agile {
|
||||
&__list {
|
||||
width: 100%;
|
||||
padding-bottom: var(--spacing-2xs);
|
||||
overflow-x: scroll;
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 6px;
|
||||
background-color: var(--color-foreground-dark);
|
||||
}
|
||||
}
|
||||
|
||||
&__track {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user