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(editor): Convert ResourceLocator to composition API (no-changelog) (#10526)

Browse source
This commit is contained in:
Elias Meire 2024-08-29 17:01:43 +02:00 committed by GitHub
parent 38eb00a643
commit fcdeb0f5d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 921 additions and 940 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

826
packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
View file

File diff suppressed because it is too large Load diff

241
packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
View file

@ -1,71 +1,64 @@
<script lang="ts"> <script setup lang="ts">
import type { IResourceLocatorResultExpanded } from '@/Interface'; import type { IResourceLocatorResultExpanded } from '@/Interface';
import { defineComponent } from 'vue'; import { N8nLoading } from 'n8n-design-system';
import type { PropType } from 'vue';
import type { EventBus } from 'n8n-design-system/utils'; import type { EventBus } from 'n8n-design-system/utils';
import { createEventBus } from 'n8n-design-system/utils'; import { createEventBus } from 'n8n-design-system/utils';
import type { NodeParameterValue } from 'n8n-workflow'; import type { NodeParameterValue } from 'n8n-workflow';
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
const SEARCH_BAR_HEIGHT_PX = 40; const SEARCH_BAR_HEIGHT_PX = 40;
const SCROLL_MARGIN_PX = 10; const SCROLL_MARGIN_PX = 10;
export default defineComponent({ type Props = {
name: 'ResourceLocatorDropdown', modelValue?: NodeParameterValue;
props: { resources?: IResourceLocatorResultExpanded[];
modelValue: { show?: boolean;
type: [String, Number] as PropType<NodeParameterValue>, filterable?: boolean;
}, loading?: boolean;
show: { filter?: string;
type: Boolean, hasMore?: boolean;
default: false, errorView?: boolean;
}, filterRequired?: boolean;
resources: { width?: number;
type: Array as PropType<IResourceLocatorResultExpanded[]>, eventBus?: EventBus;
},
filterable: {
type: Boolean,
},
loading: {
type: Boolean,
},
filter: {
type: String,
},
hasMore: {
type: Boolean,
},
errorView: {
type: Boolean,
},
filterRequired: {
type: Boolean,
},
width: {
type: Number,
},
eventBus: {
type: Object as PropType<EventBus>,
default: () => createEventBus(),
},
},
emits: ['update:modelValue', 'loadMore', 'filter'],
data() {
return {
hoverIndex: 0,
showHoverUrl: false,
}; };
},
computed: { const props = withDefaults(defineProps<Props>(), {
sortedResources(): IResourceLocatorResultExpanded[] { modelValue: undefined,
resources: () => [],
show: false,
filterable: false,
loading: false,
filter: '',
hasMore: false,
errorView: false,
filterRequired: false,
width: undefined,
eventBus: () => createEventBus(),
});
const emit = defineEmits<{
'update:modelValue': [value: NodeParameterValue];
loadMore: [];
filter: [filter: string];
}>();
const hoverIndex = ref(0);
const showHoverUrl = ref(false);
const searchRef = ref<HTMLInputElement>();
const resultsContainerRef = ref<HTMLDivElement>();
const itemsRef = ref<HTMLDivElement[]>([]);
const sortedResources = computed<IResourceLocatorResultExpanded[]>(() => {
const seen = new Set(); const seen = new Set();
const { selected, notSelected } = (this.resources ?? []).reduce( const { selected, notSelected } = props.resources.reduce(
(acc, item: IResourceLocatorResultExpanded) => { (acc, item: IResourceLocatorResultExpanded) => {
if (seen.has(item.value)) { if (seen.has(item.value)) {
return acc; return acc;
} }
seen.add(item.value); seen.add(item.value);
if (this.modelValue && item.value === this.modelValue) { if (props.modelValue && item.value === props.modelValue) {
acc.selected = item; acc.selected = item;
} else { } else {
acc.notSelected.push(item); acc.notSelected.push(item);
@ -84,108 +77,114 @@ export default defineComponent({
} }
return notSelected; return notSelected;
}, });
},
watch: { watch(
show(value) { () => props.show,
(value) => {
if (value) { if (value) {
this.hoverIndex = 0; hoverIndex.value = 0;
this.showHoverUrl = false; showHoverUrl.value = false;
setTimeout(() => { setTimeout(() => {
if (value && this.filterable && this.$refs.search) { if (value && props.filterable && searchRef.value) {
(this.$refs.search as HTMLElement).focus(); searchRef.value.focus();
} }
}, 0); }, 0);
} }
}, },
loading() { );
setTimeout(() => this.onResultsEnd(), 0); // in case of filtering
watch(
() => props.loading,
() => {
setTimeout(() => onResultsEnd(), 0); // in case of filtering
}, },
}, );
mounted() { onMounted(() => {
this.eventBus.on('keyDown', this.onKeyDown); props.eventBus.on('keyDown', onKeyDown);
}, });
beforeUnmount() {
this.eventBus.off('keyDown', this.onKeyDown); onBeforeUnmount(() => {
}, props.eventBus.off('keyDown', onKeyDown);
methods: { });
openUrl(event: MouseEvent, url: string) {
function openUrl(event: MouseEvent, url: string) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
window.open(url, '_blank'); window.open(url, '_blank');
}, }
onKeyDown(e: KeyboardEvent) {
const containerRef = this.$refs.resultsContainer as HTMLElement | undefined;
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'ArrowDown') { if (e.key === 'ArrowDown') {
if (this.hoverIndex < this.sortedResources.length - 1) { if (hoverIndex.value < sortedResources.value.length - 1) {
this.hoverIndex++; hoverIndex.value++;
const itemRefs = this.$refs[`item-${this.hoverIndex}`] as HTMLElement[] | undefined; if (resultsContainerRef.value && itemsRef.value.length === 1) {
if (containerRef && Array.isArray(itemRefs) && itemRefs.length === 1) { const item = itemsRef.value[0];
const item = itemRefs[0];
if ( if (
item.offsetTop + item.clientHeight > item.offsetTop + item.clientHeight >
containerRef.scrollTop + containerRef.offsetHeight resultsContainerRef.value.scrollTop + resultsContainerRef.value.offsetHeight
) { ) {
const top = item.offsetTop - containerRef.offsetHeight + item.clientHeight; const top = item.offsetTop - resultsContainerRef.value.offsetHeight + item.clientHeight;
containerRef.scrollTo({ top }); resultsContainerRef.value.scrollTo({ top });
} }
} }
} }
} else if (e.key === 'ArrowUp') { } else if (e.key === 'ArrowUp') {
if (this.hoverIndex > 0) { if (hoverIndex.value > 0) {
this.hoverIndex--; hoverIndex.value--;
const searchOffset = this.filterable ? SEARCH_BAR_HEIGHT_PX : 0; const searchOffset = props.filterable ? SEARCH_BAR_HEIGHT_PX : 0;
const itemRefs = this.$refs[`item-${this.hoverIndex}`] as HTMLElement[] | undefined; if (resultsContainerRef.value && itemsRef.value.length === 1) {
if (containerRef && Array.isArray(itemRefs) && itemRefs.length === 1) { const item = itemsRef.value[0];
const item = itemRefs[0]; if (item.offsetTop <= resultsContainerRef.value.scrollTop + searchOffset) {
if (item.offsetTop <= containerRef.scrollTop + searchOffset) { resultsContainerRef.value.scrollTo({ top: item.offsetTop - searchOffset });
containerRef.scrollTo({ top: item.offsetTop - searchOffset });
} }
} }
} }
} else if (e.key === 'Enter') { } else if (e.key === 'Enter') {
this.$emit('update:modelValue', this.sortedResources[this.hoverIndex].value); emit('update:modelValue', sortedResources.value[hoverIndex.value].value);
} }
}, }
onFilterInput(value: string) {
this.$emit('filter', value); function onFilterInput(value: string) {
}, emit('filter', value);
onItemClick(selected: string | number | boolean) { }
this.$emit('update:modelValue', selected);
}, function onItemClick(selected: string | number | boolean) {
onItemHover(index: number) { emit('update:modelValue', selected);
this.hoverIndex = index; }
function onItemHover(index: number) {
hoverIndex.value = index;
setTimeout(() => { setTimeout(() => {
if (this.hoverIndex === index) { if (hoverIndex.value === index) {
this.showHoverUrl = true; showHoverUrl.value = true;
} }
}, 250); }, 250);
}, }
onItemHoverLeave() {
this.showHoverUrl = false; function onItemHoverLeave() {
}, showHoverUrl.value = false;
onResultsEnd() { }
if (this.loading || !this.hasMore) {
function onResultsEnd() {
if (props.loading || !props.loading) {
return; return;
} }
const containerRef = this.$refs.resultsContainer as HTMLElement | undefined; if (resultsContainerRef.value) {
if (containerRef) {
const diff = const diff =
containerRef.offsetHeight - (containerRef.scrollHeight - containerRef.scrollTop); resultsContainerRef.value.offsetHeight -
(resultsContainerRef.value.scrollHeight - resultsContainerRef.value.scrollTop);
if (diff > -SCROLL_MARGIN_PX && diff < SCROLL_MARGIN_PX) { if (diff > -SCROLL_MARGIN_PX && diff < SCROLL_MARGIN_PX) {
this.$emit('loadMore'); emit('loadMore');
}
} }
} }
},
},
});
</script> </script>
<template> <template>
@ -201,8 +200,8 @@ export default defineComponent({
<slot name="error"></slot> <slot name="error"></slot>
</div> </div>
<div v-if="filterable && !errorView" :class="$style.searchInput" @keydown="onKeyDown"> <div v-if="filterable && !errorView" :class="$style.searchInput" @keydown="onKeyDown">
<n8n-input <N8nInput
ref="search" ref="searchRef"
:model-value="filter" :model-value="filter"
:clearable="true" :clearable="true"
:placeholder="$locale.baseText('resourceLocator.search.placeholder')" :placeholder="$locale.baseText('resourceLocator.search.placeholder')"
@ -212,7 +211,7 @@ export default defineComponent({
<template #prefix> <template #prefix>
<font-awesome-icon :class="$style.searchIcon" icon="search" /> <font-awesome-icon :class="$style.searchIcon" icon="search" />
</template> </template>
</n8n-input> </N8nInput>
</div> </div>
<div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired"> <div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired">
{{ $locale.baseText('resourceLocator.mode.list.searchRequired') }} {{ $locale.baseText('resourceLocator.mode.list.searchRequired') }}
@ -225,14 +224,14 @@ export default defineComponent({
</div> </div>
<div <div
v-else-if="!errorView" v-else-if="!errorView"
ref="resultsContainer" ref="resultsContainerRef"
:class="$style.container" :class="$style.container"
@scroll="onResultsEnd" @scroll="onResultsEnd"
> >
<div <div
v-for="(result, i) in sortedResources" v-for="(result, i) in sortedResources"
:key="result.value.toString()" :key="result.value.toString()"
:ref="`item-${i}`" ref="itemsRef"
:class="{ :class="{
[$style.resourceItem]: true, [$style.resourceItem]: true,
[$style.selected]: result.value === modelValue, [$style.selected]: result.value === modelValue,
@ -257,7 +256,7 @@ export default defineComponent({
</div> </div>
<div v-if="loading && !errorView"> <div v-if="loading && !errorView">
<div v-for="i in 3" :key="i" :class="$style.loadingItem"> <div v-for="i in 3" :key="i" :class="$style.loadingItem">
<n8n-loading :class="$style.loader" variant="p" :rows="1" /> <N8nLoading :class="$style.loader" variant="p" :rows="1" />
</div> </div>
</div> </div>
</div> </div>

6
packages/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
View file

@ -108,7 +108,9 @@ function setWidth() {
} }
} }
function onInputChange(value: string): void { function onInputChange(value: NodeParameterValue): void {
if (typeof value !== 'string') return;
const params: INodeParameterResourceLocator = { __rl: true, value, mode: selectedMode.value }; const params: INodeParameterResourceLocator = { __rl: true, value, mode: selectedMode.value };
if (isListMode.value) { if (isListMode.value) {
const resource = workflowsStore.getWorkflowById(value); const resource = workflowsStore.getWorkflowById(value);
@ -119,7 +121,7 @@ function onInputChange(value: string): void {
emit('update:modelValue', params); emit('update:modelValue', params);
} }
function onListItemSelected(value: string) { function onListItemSelected(value: NodeParameterValue) {
onInputChange(value); onInputChange(value);
hideDropdown(); hideDropdown();
} }