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: Remove deprecated $data (#6576)

Browse source 
Co-authored-by: Alex Grozav <alex@grozav.com>
This commit is contained in:
Iván Ovejero 2023-07-25 12:30:23 +02:00 committed by GitHub
parent 8616f28516
commit 94b7023da8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 83 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/editor-ui/src/components/BreakpointsObserver.vue
View file

@ -42,7 +42,7 @@ export default defineComponent({
void this.callDebounced('onResizeEnd', { debounceTime: 50 }); void this.callDebounced('onResizeEnd', { debounceTime: 50 });
}, },
onResizeEnd() { onResizeEnd() {
this.$data.width = window.innerWidth; this.width = window.innerWidth;
this.$nextTick(async () => { this.$nextTick(async () => {
const bannerHeight = await getBannerRowHeight(); const bannerHeight = await getBannerRowHeight();
useUIStore().updateBannersHeight(bannerHeight); useUIStore().updateBannersHeight(bannerHeight);
@ -51,19 +51,19 @@ export default defineComponent({
}, },
computed: { computed: {
bp(): string { bp(): string {
if (this.$data.width < BREAKPOINT_SM) { if (this.width < BREAKPOINT_SM) {
return 'XS'; return 'XS';
} }
if (this.$data.width >= BREAKPOINT_XL) { if (this.width >= BREAKPOINT_XL) {
return 'XL'; return 'XL';
} }
if (this.$data.width >= BREAKPOINT_LG) { if (this.width >= BREAKPOINT_LG) {
return 'LG'; return 'LG';
} }
if (this.$data.width >= BREAKPOINT_MD) { if (this.width >= BREAKPOINT_MD) {
return 'MD'; return 'MD';
} }
@ -71,19 +71,19 @@ export default defineComponent({
}, },
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
value(): any | undefined { value(): any | undefined {
if (this.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) { if (this.valueXS !== undefined && this.width < BREAKPOINT_SM) {
return this.valueXS; return this.valueXS;
} }
if (this.valueXL !== undefined && this.$data.width >= BREAKPOINT_XL) { if (this.valueXL !== undefined && this.width >= BREAKPOINT_XL) {
return this.valueXL; return this.valueXL;
} }
if (this.valueLG !== undefined && this.$data.width >= BREAKPOINT_LG) { if (this.valueLG !== undefined && this.width >= BREAKPOINT_LG) {
return this.valueLG; return this.valueLG;
} }
if (this.valueMD !== undefined && this.$data.width >= BREAKPOINT_MD) { if (this.valueMD !== undefined && this.width >= BREAKPOINT_MD) {
return this.valueMD; return this.valueMD;
} }

14
packages/editor-ui/src/components/InlineTextEdit.vue
View file

@ -75,7 +75,7 @@ export default defineComponent({
return; return;
} }
this.$data.newValue = this.modelValue; this.newValue = this.modelValue;
this.$emit('toggle'); this.$emit('toggle');
}, },
onBlur() { onBlur() {
@ -83,10 +83,10 @@ export default defineComponent({
return; return;
} }
if (!this.$data.escPressed) { if (!this.escPressed) {
this.submit(); this.submit();
} }
this.$data.escPressed = false; this.escPressed = false;
}, },
submit() { submit() {
if (this.disabled) { if (this.disabled) {
@ -94,14 +94,14 @@ export default defineComponent({
} }
const onSubmit = (updated: boolean) => { const onSubmit = (updated: boolean) => {
this.$data.disabled = false; this.disabled = false;
if (!updated) { if (!updated) {
this.$data.inputBus.emit('focus'); this.inputBus.emit('focus');
} }
}; };
this.$data.disabled = true; this.disabled = true;
this.$emit('submit', this.newValue, onSubmit); this.$emit('submit', this.newValue, onSubmit);
}, },
onEscape() { onEscape() {
@ -109,7 +109,7 @@ export default defineComponent({
return; return;
} }
this.$data.escPressed = true; this.escPressed = true;
this.$emit('toggle'); this.$emit('toggle');
}, },
}, },

2
packages/editor-ui/src/components/IntersectionObserver.vue
View file

@ -63,7 +63,7 @@ export default defineComponent({
}, },
beforeUnmount() { beforeUnmount() {
if (this.enabled) { if (this.enabled) {
this.$data.observer.disconnect(); this.observer.disconnect();
} }
}, },
}); });

40
packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
View file

@ -364,31 +364,31 @@ export default defineComponent({
}); });
}, },
onTagsEditEnable() { onTagsEditEnable() {
this.$data.appliedTagIds = this.currentWorkflowTagIds; this.appliedTagIds = this.currentWorkflowTagIds;
this.$data.isTagsEditEnabled = true; this.isTagsEditEnabled = true;
setTimeout(() => { setTimeout(() => {
// allow name update to occur before disabling name edit // allow name update to occur before disabling name edit
this.$data.isNameEditEnabled = false; this.isNameEditEnabled = false;
this.$data.tagsEditBus.emit('focus'); this.tagsEditBus.emit('focus');
}, 0); }, 0);
}, },
async onTagsUpdate(tags: string[]) { async onTagsUpdate(tags: string[]) {
this.$data.appliedTagIds = tags; this.appliedTagIds = tags;
}, },
async onTagsBlur() { async onTagsBlur() {
const current = this.currentWorkflowTagIds; const current = this.currentWorkflowTagIds;
const tags = this.$data.appliedTagIds; const tags = this.appliedTagIds;
if (!hasChanged(current, tags)) { if (!hasChanged(current, tags)) {
this.$data.isTagsEditEnabled = false; this.isTagsEditEnabled = false;
return; return;
} }
if (this.$data.tagsSaving) { if (this.tagsSaving) {
return; return;
} }
this.$data.tagsSaving = true; this.tagsSaving = true;
const saved = await this.saveCurrentWorkflow({ tags }); const saved = await this.saveCurrentWorkflow({ tags });
this.$telemetry.track('User edited workflow tags', { this.$telemetry.track('User edited workflow tags', {
@ -396,23 +396,23 @@ export default defineComponent({
new_tag_count: tags.length, new_tag_count: tags.length,
}); });
this.$data.tagsSaving = false; this.tagsSaving = false;
if (saved) { if (saved) {
this.$data.isTagsEditEnabled = false; this.isTagsEditEnabled = false;
} }
}, },
onTagsEditEsc() { onTagsEditEsc() {
this.$data.isTagsEditEnabled = false; this.isTagsEditEnabled = false;
}, },
onNameToggle() { onNameToggle() {
this.$data.isNameEditEnabled = !this.$data.isNameEditEnabled; this.isNameEditEnabled = !this.isNameEditEnabled;
if (this.$data.isNameEditEnabled) { if (this.isNameEditEnabled) {
if (this.$data.isTagsEditEnabled) { if (this.isTagsEditEnabled) {
// @ts-ignore // @ts-ignore
void this.onTagsBlur(); void this.onTagsBlur();
} }
this.$data.isTagsEditEnabled = false; this.isTagsEditEnabled = false;
} }
}, },
async onNameSubmit(name: string, cb: (saved: boolean) => void) { async onNameSubmit(name: string, cb: (saved: boolean) => void) {
@ -429,7 +429,7 @@ export default defineComponent({
} }
if (newName === this.workflowName) { if (newName === this.workflowName) {
this.$data.isNameEditEnabled = false; this.isNameEditEnabled = false;
cb(true); cb(true);
return; return;
@ -437,7 +437,7 @@ export default defineComponent({
const saved = await this.saveCurrentWorkflow({ name }); const saved = await this.saveCurrentWorkflow({ name });
if (saved) { if (saved) {
this.$data.isNameEditEnabled = false; this.isNameEditEnabled = false;
} }
cb(saved); cb(saved);
}, },
@ -602,8 +602,8 @@ export default defineComponent({
}, },
watch: { watch: {
currentWorkflowId() { currentWorkflowId() {
this.$data.isTagsEditEnabled = false; this.isTagsEditEnabled = false;
this.$data.isNameEditEnabled = false; this.isNameEditEnabled = false;
}, },
}, },
}); });

4
packages/editor-ui/src/components/PersonalizationModal.vue
View file

@ -630,7 +630,7 @@ export default defineComponent({
this.formBus.emit('submit'); this.formBus.emit('submit');
}, },
async onSubmit(values: IPersonalizationLatestVersion): Promise<void> { async onSubmit(values: IPersonalizationLatestVersion): Promise<void> {
this.$data.isSaving = true; this.isSaving = true;
try { try {
const survey: Record<string, GenericValue> = { const survey: Record<string, GenericValue> = {
@ -653,7 +653,7 @@ export default defineComponent({
this.showError(e, 'Error while submitting results'); this.showError(e, 'Error while submitting results');
} }
this.$data.isSaving = false; this.isSaving = false;
this.closeDialog(); this.closeDialog();
}, },
async fetchOnboardingPrompt() { async fetchOnboardingPrompt() {

4
packages/editor-ui/src/components/TagsContainer.vue
View file

@ -79,7 +79,7 @@ export default defineComponent({
let toDisplay: TagEl[] = limit ? tags.slice(0, limit) : tags; let toDisplay: TagEl[] = limit ? tags.slice(0, limit) : tags;
toDisplay = toDisplay.map((tag: ITag) => ({ toDisplay = toDisplay.map((tag: ITag) => ({
...tag, ...tag,
hidden: this.responsive && !this.$data.visibility[tag.id], hidden: this.responsive && !this.visibility[tag.id],
})); }));
let visibleCount = toDisplay.length; let visibleCount = toDisplay.length;
@ -111,7 +111,7 @@ export default defineComponent({
methods: { methods: {
onObserved({ el, isIntersecting }: { el: HTMLElement; isIntersecting: boolean }) { onObserved({ el, isIntersecting }: { el: HTMLElement; isIntersecting: boolean }) {
if (el.dataset.id) { if (el.dataset.id) {
this.$data.visibility = { ...this.$data.visibility, [el.dataset.id]: isIntersecting }; this.visibility = { ...this.visibility, [el.dataset.id]: isIntersecting };
} }
}, },
onClick(e: MouseEvent, tag: TagEl) { onClick(e: MouseEvent, tag: TagEl) {

18
packages/editor-ui/src/components/TagsDropdown.vue
View file

@ -118,7 +118,7 @@ export default defineComponent({
if (keyboardEvent.key === 'Escape') { if (keyboardEvent.key === 'Escape') {
this.$emit('esc'); this.$emit('esc');
} else if (keyboardEvent.key === 'Enter' && this.filter.length === 0) { } else if (keyboardEvent.key === 'Enter' && this.filter.length === 0) {
this.$data.preventUpdate = true; this.preventUpdate = true;
this.$emit('blur'); this.$emit('blur');
if (typeof selectRef?.blur === 'function') { if (typeof selectRef?.blur === 'function') {
@ -146,7 +146,7 @@ export default defineComponent({
}, },
options(): ITag[] { options(): ITag[] {
return this.allTags.filter( return this.allTags.filter(
(tag: ITag) => tag && tag.name.toLowerCase().includes(this.$data.filter.toLowerCase()), (tag: ITag) => tag && tag.name.toLowerCase().includes(this.filter.toLowerCase()),
); );
}, },
appliedTags(): string[] { appliedTags(): string[] {
@ -159,17 +159,17 @@ export default defineComponent({
this.focusOnTopOption(); this.focusOnTopOption();
}, },
filterOptions(filter = '') { filterOptions(filter = '') {
this.$data.filter = filter.trim(); this.filter = filter.trim();
this.$nextTick(() => this.focusOnTopOption()); this.$nextTick(() => this.focusOnTopOption());
}, },
async onCreate() { async onCreate() {
const name = this.$data.filter; const name = this.filter;
try { try {
const newTag = await this.tagsStore.create(name); const newTag = await this.tagsStore.create(name);
this.$emit('update', [...this.currentTagIds, newTag.id]); this.$emit('update', [...this.currentTagIds, newTag.id]);
this.$nextTick(() => this.focusOnTag(newTag.id)); this.$nextTick(() => this.focusOnTag(newTag.id));
this.$data.filter = ''; this.filter = '';
} catch (error) { } catch (error) {
this.showError( this.showError(
error, error,
@ -181,16 +181,16 @@ export default defineComponent({
onTagsUpdated(selected: string[]) { onTagsUpdated(selected: string[]) {
const ops = selected.find((value) => value === MANAGE_KEY || value === CREATE_KEY); const ops = selected.find((value) => value === MANAGE_KEY || value === CREATE_KEY);
if (ops === MANAGE_KEY) { if (ops === MANAGE_KEY) {
this.$data.filter = ''; this.filter = '';
this.uiStore.openModal(TAGS_MANAGER_MODAL_KEY); this.uiStore.openModal(TAGS_MANAGER_MODAL_KEY);
} else if (ops === CREATE_KEY) { } else if (ops === CREATE_KEY) {
void this.onCreate(); void this.onCreate();
} else { } else {
setTimeout(() => { setTimeout(() => {
if (!this.$data.preventUpdate) { if (!this.preventUpdate) {
this.$emit('update', selected); this.$emit('update', selected);
} }
this.$data.preventUpdate = false; this.preventUpdate = false;
}, 0); }, 0);
} }
}, },
@ -221,7 +221,7 @@ export default defineComponent({
}, },
onVisibleChange(visible: boolean) { onVisibleChange(visible: boolean) {
if (!visible) { if (!visible) {
this.$data.filter = ''; this.filter = '';
this.focused = false; this.focused = false;
} else { } else {
this.focused = true; this.focused = true;

12
packages/editor-ui/src/components/TagsManager/TagsManager.vue
View file

@ -71,9 +71,7 @@ export default defineComponent({
return this.tagsStore.isLoading; return this.tagsStore.isLoading;
}, },
tags(): ITag[] { tags(): ITag[] {
return this.$data.tagIds return this.tagIds.map((tagId: string) => this.tagsStore.getTagById(tagId)).filter(Boolean); // if tag is deleted from store
.map((tagId: string) => this.tagsStore.getTagById(tagId))
.filter(Boolean); // if tag is deleted from store
}, },
hasTags(): boolean { hasTags(): boolean {
return this.tags.length > 0; return this.tags.length > 0;
@ -81,11 +79,11 @@ export default defineComponent({
}, },
methods: { methods: {
onEnableCreate() { onEnableCreate() {
this.$data.isCreating = true; this.isCreating = true;
}, },
onDisableCreate() { onDisableCreate() {
this.$data.isCreating = false; this.isCreating = false;
}, },
async onCreate(name: string, cb: (tag: ITag | null, error?: Error) => void) { async onCreate(name: string, cb: (tag: ITag | null, error?: Error) => void) {
@ -95,7 +93,7 @@ export default defineComponent({
} }
const newTag = await this.tagsStore.create(name); const newTag = await this.tagsStore.create(name);
this.$data.tagIds = [newTag.id].concat(this.$data.tagIds); this.tagIds = [newTag.id].concat(this.tagIds);
cb(newTag); cb(newTag);
} catch (error) { } catch (error) {
const escapedName = escape(name); const escapedName = escape(name);
@ -154,7 +152,7 @@ export default defineComponent({
throw new Error(this.$locale.baseText('tagsManager.couldNotDeleteTag')); throw new Error(this.$locale.baseText('tagsManager.couldNotDeleteTag'));
} }
this.$data.tagIds = this.$data.tagIds.filter((tagId: string) => tagId !== id); this.tagIds = this.tagIds.filter((tagId: string) => tagId !== id);
cb(deleted); cb(deleted);

52
packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
View file

@ -52,7 +52,7 @@ export default defineComponent({
computed: { computed: {
...mapStores(useUsersStore), ...mapStores(useUsersStore),
isCreateEnabled(): boolean { isCreateEnabled(): boolean {
return (this.tags || []).length === 0 || this.$data.createEnabled; return (this.tags || []).length === 0 || this.createEnabled;
}, },
rows(): ITagRow[] { rows(): ITagRow[] {
const getUsage = (count: number | undefined) => const getUsage = (count: number | undefined) =>
@ -60,16 +60,16 @@ export default defineComponent({
? this.$locale.baseText('tagsView.inUse', { adjustToNumber: count }) ? this.$locale.baseText('tagsView.inUse', { adjustToNumber: count })
: this.$locale.baseText('tagsView.notBeingUsed'); : this.$locale.baseText('tagsView.notBeingUsed');
const disabled = this.isCreateEnabled || this.$data.updateId || this.$data.deleteId; const disabled = this.isCreateEnabled || this.updateId || this.deleteId;
const tagRows = (this.tags || []) const tagRows = (this.tags || [])
.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.$data.search)) .filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search))
.map( .map(
(tag: ITag): ITagRow => ({ (tag: ITag): ITagRow => ({
tag, tag,
usage: getUsage(tag.usageCount), usage: getUsage(tag.usageCount),
disable: disabled && tag.id !== this.deleteId && tag.id !== this.$data.updateId, disable: disabled && tag.id !== this.deleteId && tag.id !== this.updateId,
update: disabled && tag.id === this.$data.updateId, update: disabled && tag.id === this.updateId,
delete: disabled && tag.id === this.$data.deleteId, delete: disabled && tag.id === this.deleteId,
canDelete: this.usersStore.canUserDeleteTags, canDelete: this.usersStore.canUserDeleteTags,
}), }),
); );
@ -82,13 +82,11 @@ export default defineComponent({
this.newName = name; this.newName = name;
}, },
onSearchChange(search: string): void { onSearchChange(search: string): void {
this.$data.stickyIds.clear(); this.stickyIds.clear();
this.$data.search = search; this.search = search;
}, },
isHeaderDisabled(): boolean { isHeaderDisabled(): boolean {
return ( return this.isLoading || !!(this.isCreateEnabled || this.updateId || this.deleteId);
this.isLoading || !!(this.isCreateEnabled || this.$data.updateId || this.$data.deleteId)
);
}, },
onUpdateEnable(updateId: string): void { onUpdateEnable(updateId: string): void {
@ -99,10 +97,10 @@ export default defineComponent({
this.newName = ''; this.newName = '';
}, },
updateTag(): void { updateTag(): void {
this.$data.isSaving = true; this.isSaving = true;
const name = this.newName.trim(); const name = this.newName.trim();
const onUpdate = (updated: boolean) => { const onUpdate = (updated: boolean) => {
this.$data.isSaving = false; this.isSaving = false;
if (updated) { if (updated) {
this.stickyIds.add(this.updateId); this.stickyIds.add(this.updateId);
this.disableUpdate(); this.disableUpdate();
@ -119,58 +117,58 @@ export default defineComponent({
this.deleteId = ''; this.deleteId = '';
}, },
deleteTag(): void { deleteTag(): void {
this.$data.isSaving = true; this.isSaving = true;
const onDelete = (deleted: boolean) => { const onDelete = (deleted: boolean) => {
if (deleted) { if (deleted) {
this.disableDelete(); this.disableDelete();
} }
this.$data.isSaving = false; this.isSaving = false;
}; };
this.$emit('delete', this.deleteId, onDelete); this.$emit('delete', this.deleteId, onDelete);
}, },
onCreateEnable(): void { onCreateEnable(): void {
this.$data.createEnabled = true; this.createEnabled = true;
this.$data.newName = ''; this.newName = '';
}, },
disableCreate(): void { disableCreate(): void {
this.$data.createEnabled = false; this.createEnabled = false;
this.$emit('disableCreate'); this.$emit('disableCreate');
}, },
createTag(): void { createTag(): void {
this.$data.isSaving = true; this.isSaving = true;
const name = this.$data.newName.trim(); const name = this.newName.trim();
const onCreate = (created: ITag | null, error?: Error) => { const onCreate = (created: ITag | null, error?: Error) => {
if (created) { if (created) {
this.stickyIds.add(created.id); this.stickyIds.add(created.id);
this.disableCreate(); this.disableCreate();
} }
this.$data.isSaving = false; this.isSaving = false;
}; };
this.$emit('create', name, onCreate); this.$emit('create', name, onCreate);
}, },
applyOperation(): void { applyOperation(): void {
if (this.$data.isSaving) { if (this.isSaving) {
return; return;
} else if (this.isCreateEnabled) { } else if (this.isCreateEnabled) {
this.createTag(); this.createTag();
} else if (this.$data.updateId) { } else if (this.updateId) {
this.updateTag(); this.updateTag();
} else if (this.$data.deleteId) { } else if (this.deleteId) {
this.deleteTag(); this.deleteTag();
} }
}, },
cancelOperation(): void { cancelOperation(): void {
if (this.$data.isSaving) { if (this.isSaving) {
return; return;
} else if (this.isCreateEnabled) { } else if (this.isCreateEnabled) {
this.disableCreate(); this.disableCreate();
} else if (this.$data.updateId) { } else if (this.updateId) {
this.disableUpdate(); this.disableUpdate();
} else if (this.$data.deleteId) { } else if (this.deleteId) {
this.disableDelete(); this.disableDelete();
} }
}, },

6
packages/editor-ui/src/views/SettingsCommunityNodesView.vue
View file

@ -92,7 +92,7 @@ export default defineComponent({
this.pushConnect(); this.pushConnect();
try { try {
this.$data.loading = true; this.loading = true;
await this.communityNodesStore.fetchInstalledPackages(); await this.communityNodesStore.fetchInstalledPackages();
const installedPackages: PublicInstalledPackage[] = const installedPackages: PublicInstalledPackage[] =
@ -126,12 +126,12 @@ export default defineComponent({
this.$locale.baseText('settings.communityNodes.fetchError.message'), this.$locale.baseText('settings.communityNodes.fetchError.message'),
); );
} finally { } finally {
this.$data.loading = false; this.loading = false;
} }
try { try {
await this.communityNodesStore.fetchAvailableCommunityPackageCount(); await this.communityNodesStore.fetchAvailableCommunityPackageCount();
} finally { } finally {
this.$data.loading = false; this.loading = false;
} }
}, },
beforeUnmount() { beforeUnmount() {