feat: Replace all Vue.set usages with direct assignment and spread operator (no-changelog) (#6280)

* refactor: replace all Vue.set usages with direct assignment and spread operator

* chore: fix linting issue

* fix: fix updateNodeAtIndex function

* fix: various post-refactoring fixes

* fix: refactor recently added Vue.set directive
This commit is contained in:
Alex Grozav
2023-06-15 15:30:05 +03:00
committed by GitHub
parent c2afed4ca1
commit 596cf07e42
24 changed files with 620 additions and 307 deletions

View File

@@ -8,7 +8,6 @@ import type {
} from '@/Interface';
import type { INodeIssues, IRunData } from 'n8n-workflow';
import { defineStore } from 'pinia';
import Vue from 'vue';
import { useWorkflowsStore } from './workflows.store';
export const useNDVStore = defineStore(STORES.NDV, {
@@ -128,38 +127,47 @@ export const useNDVStore = defineStore(STORES.NDV, {
},
},
actions: {
setInputNodeName(name: string | undefined): void {
Vue.set(this.input, 'nodeName', name);
setInputNodeName(nodeName: string | undefined): void {
this.input = {
...this.input,
nodeName,
};
},
setInputRunIndex(run?: string): void {
Vue.set(this.input, 'run', run);
setInputRunIndex(run?: number): void {
this.input = {
...this.input,
run,
};
},
setMainPanelDimensions(params: {
panelType: string;
dimensions: { relativeLeft?: number; relativeRight?: number; relativeWidth?: number };
}): void {
Vue.set(this.mainPanelDimensions, params.panelType, {
...this.mainPanelDimensions[params.panelType],
...params.dimensions,
});
this.mainPanelDimensions = {
...this.mainPanelDimensions,
[params.panelType]: {
...this.mainPanelDimensions[params.panelType],
...params.dimensions,
},
};
},
setNDVSessionId(): void {
Vue.set(this, 'sessionId', `ndv-${Math.random().toString(36).slice(-8)}`);
this.sessionId = `ndv-${Math.random().toString(36).slice(-8)}`;
},
resetNDVSessionId(): void {
Vue.set(this, 'sessionId', '');
this.sessionId = '';
},
setPanelDisplayMode(params: { pane: NodePanelType; mode: IRunDataDisplayMode }): void {
Vue.set(this[params.pane], 'displayMode', params.mode);
this[params.pane].displayMode = params.mode;
},
setOutputPanelEditModeEnabled(isEnabled: boolean): void {
Vue.set(this.output.editMode, 'enabled', isEnabled);
this.output.editMode.enabled = isEnabled;
},
setOutputPanelEditModeValue(payload: string): void {
Vue.set(this.output.editMode, 'value', payload);
this.output.editMode.value = payload;
},
setMappableNDVInputFocus(paramName: string): void {
Vue.set(this, 'focusedMappableInput', paramName);
this.focusedMappableInput = paramName;
},
draggableStartDragging({ type, data }: { type: string; data: string }): void {
this.draggable = {
@@ -180,10 +188,10 @@ export const useNDVStore = defineStore(STORES.NDV, {
};
},
setDraggableStickyPos(position: XYPosition | null): void {
Vue.set(this.draggable, 'stickyPosition', position);
this.draggable.stickyPosition = position;
},
setDraggableCanDrop(canDrop: boolean): void {
Vue.set(this.draggable, 'canDrop', canDrop);
this.draggable.canDrop = canDrop;
},
setMappingTelemetry(telemetry: { [key: string]: string | number | boolean }): void {
this.mappingTelemetry = { ...this.mappingTelemetry, ...telemetry };
@@ -192,13 +200,13 @@ export const useNDVStore = defineStore(STORES.NDV, {
this.mappingTelemetry = {};
},
setHoveringItem(item: null | NDVState['hoveringItem']): void {
Vue.set(this, 'hoveringItem', item);
this.hoveringItem = item;
},
setNDVBranchIndex(e: { pane: 'input' | 'output'; branchIndex: number }): void {
Vue.set(this[e.pane], 'branch', e.branchIndex);
this[e.pane].branch = e.branchIndex;
},
setNDVPanelDataIsEmpty(payload: { panel: 'input' | 'output'; isEmpty: boolean }): void {
Vue.set(this[payload.panel].data, 'isEmpty', payload.isEmpty);
this[payload.panel].data.isEmpty = payload.isEmpty;
},
disableMappingHint(store = true) {
this.isMappingOnboarded = true;
@@ -207,11 +215,19 @@ export const useNDVStore = defineStore(STORES.NDV, {
}
},
updateNodeParameterIssues(issues: INodeIssues): void {
const activeNode = this.activeNode;
const workflowsStore = useWorkflowsStore();
const activeNode = workflowsStore.getNodeByName(this.activeNodeName || '');
if (activeNode) {
Vue.set(activeNode, 'issues', {
...activeNode.issues,
...issues,
const nodeIndex = workflowsStore.workflow.nodes.findIndex((node) => {
return node.name === activeNode.name;
});
workflowsStore.updateNodeAtIndex(nodeIndex, {
issues: {
...activeNode.issues,
...issues,
},
});
}
},