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

Merge branch 'vue3' of github.com:n8n-io/n8n into vue3

Browse source
This commit is contained in:
Csaba Tuncsik 2023-07-25 13:36:55 +02:00
parent 1288648f53 94b7023da8
commit 03a8dd6f44
25 changed files with 118 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
cypress/e2e/16-webhook-node.cy.ts
View file

@ -121,13 +121,13 @@ describe('Webhook Trigger node', async () => {
workflowPage.actions.addNodeToCanvas('Set'); workflowPage.actions.addNodeToCanvas('Set');
workflowPage.actions.openNode('Set'); workflowPage.actions.openNode('Set');
cy.get('.add-option').click(); cy.get('.add-option').click();
cy.get('.add-option').find('.el-select-dropdown__item').contains('Number').click(); getVisibleSelect().find('.el-select-dropdown__item').contains('Number').click();
cy.get('.fixed-collection-parameter') cy.get('.fixed-collection-parameter')
.getByTestId('parameter-input-name') .getByTestId('parameter-input-name')
.clear() .clear()
.type('MyValue'); .type('MyValue');
cy.get('.fixed-collection-parameter').getByTestId('parameter-input-value').clear().type('1234'); cy.get('.fixed-collection-parameter').getByTestId('parameter-input-value').clear().type('1234');
ndv.getters.backToCanvas().click(); ndv.getters.backToCanvas().click({ force: true });
workflowPage.actions.addNodeToCanvas('Respond to Webhook'); workflowPage.actions.addNodeToCanvas('Respond to Webhook');
@ -173,10 +173,15 @@ describe('Webhook Trigger node', async () => {
getVisibleSelect().find('.el-select-dropdown__item').contains('Number').click(); getVisibleSelect().find('.el-select-dropdown__item').contains('Number').click();
cy.get('.fixed-collection-parameter') cy.get('.fixed-collection-parameter')
.getByTestId('parameter-input-name') .getByTestId('parameter-input-name')
.find('input')
.clear() .clear()
.type('MyValue'); .type('MyValue');
cy.get('.fixed-collection-parameter').getByTestId('parameter-input-value').clear().type('1234'); cy.get('.fixed-collection-parameter')
ndv.getters.backToCanvas().click(); .getByTestId('parameter-input-value')
.find('input')
.clear()
.type('1234');
ndv.getters.backToCanvas().click({ force: true });
workflowPage.actions.executeWorkflow(); workflowPage.actions.executeWorkflow();
cy.wait(waitForWebhook); cy.wait(waitForWebhook);
@ -216,11 +221,7 @@ describe('Webhook Trigger node', async () => {
workflowPage.actions.openNode('Move Binary Data'); workflowPage.actions.openNode('Move Binary Data');
cy.getByTestId('parameter-input-mode').click(); cy.getByTestId('parameter-input-mode').click();
cy.getByTestId('parameter-input-mode') getVisibleSelect().find('.option-headline').contains('JSON to Binary').click();
.find('.el-select-dropdown')
.find('.option-headline')
.contains('JSON to Binary')
.click();
ndv.getters.backToCanvas().click(); ndv.getters.backToCanvas().click();
workflowPage.actions.executeWorkflow(); workflowPage.actions.executeWorkflow();
@ -249,7 +250,7 @@ describe('Webhook Trigger node', async () => {
}); });
}); });
it('should listen for a GET request with Basic Authentication', () => { it.only('should listen for a GET request with Basic Authentication', () => {
const webhookPath = uuid(); const webhookPath = uuid();
simpleWebhookCall({ simpleWebhookCall({
method: 'GET', method: 'GET',

4
packages/design-system/src/components/N8nFormBox/FormBox.stories.ts
View file

@ -13,7 +13,7 @@ export default {
const methods = { const methods = {
onSubmit: action('submit'), onSubmit: action('submit'),
onChange: action('change'), onChange: action('update'),
}; };
const Template: StoryFn = (args, { argTypes }) => ({ const Template: StoryFn = (args, { argTypes }) => ({
@ -22,7 +22,7 @@ const Template: StoryFn = (args, { argTypes }) => ({
components: { components: {
N8nFormBox, N8nFormBox,
}, },
template: '<n8n-form-box v-bind="args" @submit="onSubmit" @change="onChange" />', template: '<n8n-form-box v-bind="args" @submit="onSubmit" @update="onUpdate" />',
methods, methods,
}); });

4
packages/design-system/src/components/N8nFormBox/FormBox.vue
View file

@ -10,7 +10,7 @@
:inputs="inputs" :inputs="inputs"
:eventBus="formBus" :eventBus="formBus"
:columnView="true" :columnView="true"
@update:modelValue="onUpdateModelValue" @update="onUpdateModelValue"
@submit="onSubmit" @submit="onSubmit"
/> />
</div> </div>
@ -88,7 +88,7 @@ export default defineComponent({
}, },
methods: { methods: {
onUpdateModelValue(e: { name: string; value: string }) { onUpdateModelValue(e: { name: string; value: string }) {
this.$emit('change', e); this.$emit('update', e);
}, },
onSubmit(e: { [key: string]: string }) { onSubmit(e: { [key: string]: string }) {
this.$emit('submit', e); this.$emit('submit', e);

2
packages/design-system/src/components/N8nFormInputs/FormInputs.vue
View file

@ -117,7 +117,7 @@ export default defineComponent({
...this.values, ...this.values,
[name]: value, [name]: value,
}; };
this.$emit('change', { name, value }); this.$emit('update', { name, value });
}, },
onValidate(name: string, valid: boolean) { onValidate(name: string, valid: boolean) {
this.validity = { this.validity = {

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;
} }

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

@ -12,7 +12,7 @@
:inputs="config" :inputs="config"
:eventBus="formBus" :eventBus="formBus"
:columnView="true" :columnView="true"
@change="onInput" @update="onInput"
@submit="onSubmit" @submit="onSubmit"
/> />
</template> </template>

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

@ -332,7 +332,7 @@ export default defineComponent({
return this.credentialsStore.allUsableCredentialsByType[type]; return this.credentialsStore.allUsableCredentialsByType[type];
}, },
onDataChange(event: { name: string; value: string | number | boolean | Date | null }): void { onDataChange(event: { name: string; value: string | number | boolean | Date | null }): void {
this.$emit('change', event); this.$emit('update', event);
}, },
onDocumentationUrlClick(): void { onDocumentationUrlClick(): void {
this.$telemetry.track('User clicked credential modal docs link', { this.$telemetry.track('User clicked credential modal docs link', {

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

@ -73,7 +73,7 @@
:mode="mode" :mode="mode"
:selectedCredential="selectedCredential" :selectedCredential="selectedCredential"
:showAuthTypeSelector="requiredCredentials" :showAuthTypeSelector="requiredCredentials"
@change="onDataChange" @update="onDataChange"
@oauth="oAuthCredentialAuthorize" @oauth="oAuthCredentialAuthorize"
@retest="retestCredential" @retest="retestCredential"
@scrollToTop="scrollToTop" @scrollToTop="scrollToTop"

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();
} }
}, },
}); });

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

@ -35,7 +35,7 @@
:inputs="config" :inputs="config"
:eventBus="formBus" :eventBus="formBus"
:columnView="true" :columnView="true"
@change="onInput" @update="onInput"
@submit="onSubmit" @submit="onSubmit"
/> />
</template> </template>

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;
}, },
}, },
}); });

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

@ -605,6 +605,8 @@ export default defineComponent({
valueChanged(parameterData: IUpdateInformation) { valueChanged(parameterData: IUpdateInformation) {
let newValue: NodeParameterValue; let newValue: NodeParameterValue;
console.log(parameterData);
if (parameterData.hasOwnProperty('value')) { if (parameterData.hasOwnProperty('value')) {
// New value is given // New value is given
newValue = parameterData.value as string | number; newValue = parameterData.value as string | number;
@ -768,6 +770,8 @@ export default defineComponent({
} }
} }
console.log('after set', nodeParameters);
// Get the parameters with the now new defaults according to the // Get the parameters with the now new defaults according to the
// from the user actually defined parameters // from the user actually defined parameters
nodeParameters = NodeHelpers.getNodeParameters( nodeParameters = NodeHelpers.getNodeParameters(
@ -778,6 +782,8 @@ export default defineComponent({
node, node,
); );
console.log('after getNodeParameters', nodeParameters);
for (const key of Object.keys(nodeParameters as object)) { for (const key of Object.keys(nodeParameters as object)) {
if (nodeParameters && nodeParameters[key] !== null && nodeParameters[key] !== undefined) { if (nodeParameters && nodeParameters[key] !== null && nodeParameters[key] !== undefined) {
this.setValue(`parameters.${key}`, nodeParameters[key] as string); this.setValue(`parameters.${key}`, nodeParameters[key] as string);

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

@ -131,14 +131,14 @@
<n8n-input <n8n-input
v-else v-else
:modelValue="tempValue" v-model="tempValue"
ref="inputField" ref="inputField"
:class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }" :class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }"
:size="inputSize" :size="inputSize"
:type="getStringInputType" :type="getStringInputType"
:rows="getArgument('rows')" :rows="getArgument('rows')"
:disabled="isReadOnly" :disabled="isReadOnly"
@update:modelValue="onUpdateTextInput" @update:modelValue="valueChanged($event) && onUpdateTextInput($event)"
@keydown.stop @keydown.stop
@focus="setFocus" @focus="setFocus"
@blur="onBlur" @blur="onBlur"

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

@ -35,7 +35,7 @@
@focus="onFocus" @focus="onFocus"
@blur="onBlur" @blur="onBlur"
@textInput="valueChanged" @textInput="valueChanged"
@update:modelValue="valueChanged" @update="valueChanged"
/> />
<div :class="$style.errors" v-if="showRequiredErrors"> <div :class="$style.errors" v-if="showRequiredErrors">
<n8n-text color="danger" size="small"> <n8n-text color="danger" size="small">

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/AuthView.vue
View file

@ -13,7 +13,7 @@
:buttonLoading="formLoading" :buttonLoading="formLoading"
@secondaryClick="onSecondaryClick" @secondaryClick="onSecondaryClick"
@submit="onSubmit" @submit="onSubmit"
@change="onChange" @update="onUpdate"
> >
<SSOLogin v-if="withSso" /> <SSOLogin v-if="withSso" />
</n8n-form-box> </n8n-form-box>
@ -48,8 +48,8 @@ export default defineComponent({
}, },
}, },
methods: { methods: {
onChange(e: { name: string; value: string }) { onUpdate(e: { name: string; value: string }) {
this.$emit('change', e); this.$emit('update', e);
}, },
onSubmit(values: { [key: string]: string }) { onSubmit(values: { [key: string]: string }) {
this.$emit('submit', values); this.$emit('submit', values);

2
packages/editor-ui/src/views/ChangePasswordView.vue
View file

@ -4,7 +4,7 @@
:form="config" :form="config"
:formLoading="loading" :formLoading="loading"
@submit="onSubmit" @submit="onSubmit"
@change="onInput" @update="onInput"
/> />
</template> </template>

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() {

2
packages/editor-ui/src/views/SettingsLdapView.vue
View file

@ -39,7 +39,7 @@
:eventBus="formBus" :eventBus="formBus"
:columnView="true" :columnView="true"
verticalSpacing="l" verticalSpacing="l"
@change="onInput" @update="onInput"
@ready="onReadyToSubmit" @ready="onReadyToSubmit"
@submit="onSubmit" @submit="onSubmit"
/> />

2
packages/editor-ui/src/views/SettingsPersonalView.vue
View file

@ -26,7 +26,7 @@
v-if="formInputs" v-if="formInputs"
:inputs="formInputs" :inputs="formInputs"
:eventBus="formBus" :eventBus="formBus"
@change="onInput" @update="onInput"
@ready="onReadyToSubmit" @ready="onReadyToSubmit"
@submit="onSubmit" @submit="onSubmit"
/> />