mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 04:04:06 -08:00
refactor(editor): DuplicateWorkflowDialog.vue to script setup (#10902)
This commit is contained in:
Raúl Gómez Morales
GitHub
parent
f9f303f562
commit
4effb66952
|
|
@ -1,6 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { mapStores } from 'pinia';
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onMounted, nextTick } from 'vue';
|
||||
import { MAX_WORKFLOW_NAME_LENGTH, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
|
||||
import { useToast } from '@/composables/useToast';
|
||||
import WorkflowTagsDropdown from '@/components/WorkflowTagsDropdown.vue';
|
||||
|
|
@ -8,145 +7,136 @@ import Modal from '@/components/Modal.vue';
|
|||
import { useSettingsStore } from '@/stores/settings.store';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
import type { IWorkflowDataUpdate } from '@/Interface';
|
||||
import { useUsersStore } from '@/stores/users.store';
|
||||
import { createEventBus } from 'n8n-design-system/utils';
|
||||
import { useCredentialsStore } from '@/stores/credentials.store';
|
||||
import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { useTelemetry } from '@/composables/useTelemetry';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DuplicateWorkflow',
|
||||
components: { WorkflowTagsDropdown, Modal },
|
||||
props: ['modalName', 'isActive', 'data'],
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const workflowHelpers = useWorkflowHelpers({ router });
|
||||
const props = defineProps<{
|
||||
modalName: string;
|
||||
isActive: boolean;
|
||||
data: { tags: string[]; id: string; name: string };
|
||||
}>();
|
||||
|
||||
return {
|
||||
...useToast(),
|
||||
workflowHelpers,
|
||||
};
|
||||
const router = useRouter();
|
||||
const workflowHelpers = useWorkflowHelpers({ router });
|
||||
const { showMessage, showError } = useToast();
|
||||
const i18n = useI18n();
|
||||
const telemetry = useTelemetry();
|
||||
|
||||
const credentialsStore = useCredentialsStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const workflowsStore = useWorkflowsStore();
|
||||
|
||||
const name = ref('');
|
||||
const currentTagIds = ref(props.data.tags);
|
||||
const isSaving = ref(false);
|
||||
const prevTagIds = ref(currentTagIds.value);
|
||||
const modalBus = createEventBus();
|
||||
const dropdownBus = createEventBus();
|
||||
|
||||
const nameInputRef = ref<HTMLElement>();
|
||||
|
||||
const focusOnSelect = () => {
|
||||
dropdownBus.emit('focus');
|
||||
};
|
||||
|
||||
const focusOnNameInput = () => {
|
||||
if (nameInputRef.value?.focus) {
|
||||
nameInputRef.value.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const onTagsBlur = () => {
|
||||
prevTagIds.value = currentTagIds.value;
|
||||
};
|
||||
|
||||
const onTagsEsc = () => {
|
||||
currentTagIds.value = prevTagIds.value;
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
modalBus.emit('close');
|
||||
};
|
||||
|
||||
const save = async (): Promise<void> => {
|
||||
const workflowName = name.value.trim();
|
||||
if (!workflowName) {
|
||||
showMessage({
|
||||
title: i18n.baseText('duplicateWorkflowDialog.errors.missingName.title'),
|
||||
message: i18n.baseText('duplicateWorkflowDialog.errors.missingName.message'),
|
||||
type: 'error',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const currentWorkflowId = props.data.id;
|
||||
isSaving.value = true;
|
||||
|
||||
try {
|
||||
let workflowToUpdate: IWorkflowDataUpdate | undefined;
|
||||
if (currentWorkflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
|
||||
const {
|
||||
createdAt,
|
||||
updatedAt,
|
||||
usedCredentials,
|
||||
id,
|
||||
homeProject,
|
||||
sharedWithProjects,
|
||||
...workflow
|
||||
} = await workflowsStore.fetchWorkflow(props.data.id);
|
||||
workflowToUpdate = workflow;
|
||||
|
||||
workflowHelpers.removeForeignCredentialsFromWorkflow(
|
||||
workflowToUpdate,
|
||||
credentialsStore.allCredentials,
|
||||
);
|
||||
}
|
||||
|
||||
const saved = await workflowHelpers.saveAsNewWorkflow({
|
||||
name: workflowName,
|
||||
data: workflowToUpdate,
|
||||
tags: currentTagIds.value,
|
||||
resetWebhookUrls: true,
|
||||
openInNewWindow: true,
|
||||
resetNodeIds: true,
|
||||
});
|
||||
|
||||
if (saved) {
|
||||
closeDialog();
|
||||
telemetry.track('User duplicated workflow', {
|
||||
old_workflow_id: currentWorkflowId,
|
||||
workflow_id: props.data.id,
|
||||
sharing_role: workflowHelpers.getWorkflowProjectRole(props.data.id),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.httpStatusCode === 403) {
|
||||
error.message = i18n.baseText('duplicateWorkflowDialog.errors.forbidden.message');
|
||||
showError(error, i18n.baseText('duplicateWorkflowDialog.errors.forbidden.title'));
|
||||
} else {
|
||||
showError(error, i18n.baseText('duplicateWorkflowDialog.errors.generic.title'));
|
||||
}
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.isActive,
|
||||
(active) => {
|
||||
if (active) {
|
||||
focusOnSelect();
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const currentTagIds = this.data.tags;
|
||||
);
|
||||
|
||||
return {
|
||||
name: '',
|
||||
currentTagIds,
|
||||
isSaving: false,
|
||||
modalBus: createEventBus(),
|
||||
dropdownBus: createEventBus(),
|
||||
MAX_WORKFLOW_NAME_LENGTH,
|
||||
prevTagIds: currentTagIds,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useCredentialsStore, useUsersStore, useSettingsStore, useWorkflowsStore),
|
||||
},
|
||||
watch: {
|
||||
isActive(active) {
|
||||
if (active) {
|
||||
this.focusOnSelect();
|
||||
}
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
this.name = await this.workflowsStore.getDuplicateCurrentWorkflowName(this.data.name);
|
||||
await this.$nextTick();
|
||||
this.focusOnNameInput();
|
||||
},
|
||||
methods: {
|
||||
focusOnSelect() {
|
||||
this.dropdownBus.emit('focus');
|
||||
},
|
||||
focusOnNameInput() {
|
||||
const inputRef = this.$refs.nameInput as HTMLElement | undefined;
|
||||
if (inputRef?.focus) {
|
||||
inputRef.focus();
|
||||
}
|
||||
},
|
||||
onTagsBlur() {
|
||||
this.prevTagIds = this.currentTagIds;
|
||||
},
|
||||
onTagsEsc() {
|
||||
// revert last changes
|
||||
this.currentTagIds = this.prevTagIds;
|
||||
},
|
||||
async save(): Promise<void> {
|
||||
const name = this.name.trim();
|
||||
if (!name) {
|
||||
this.showMessage({
|
||||
title: this.$locale.baseText('duplicateWorkflowDialog.errors.missingName.title'),
|
||||
message: this.$locale.baseText('duplicateWorkflowDialog.errors.missingName.message'),
|
||||
type: 'error',
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const currentWorkflowId = this.data.id;
|
||||
|
||||
this.isSaving = true;
|
||||
|
||||
try {
|
||||
let workflowToUpdate: IWorkflowDataUpdate | undefined;
|
||||
if (currentWorkflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
|
||||
const {
|
||||
createdAt,
|
||||
updatedAt,
|
||||
usedCredentials,
|
||||
id,
|
||||
homeProject,
|
||||
sharedWithProjects,
|
||||
...workflow
|
||||
} = await this.workflowsStore.fetchWorkflow(this.data.id);
|
||||
workflowToUpdate = workflow;
|
||||
|
||||
this.workflowHelpers.removeForeignCredentialsFromWorkflow(
|
||||
workflowToUpdate,
|
||||
this.credentialsStore.allCredentials,
|
||||
);
|
||||
}
|
||||
|
||||
const saved = await this.workflowHelpers.saveAsNewWorkflow({
|
||||
name,
|
||||
data: workflowToUpdate,
|
||||
tags: this.currentTagIds,
|
||||
resetWebhookUrls: true,
|
||||
openInNewWindow: true,
|
||||
resetNodeIds: true,
|
||||
});
|
||||
|
||||
if (saved) {
|
||||
this.closeDialog();
|
||||
this.$telemetry.track('User duplicated workflow', {
|
||||
old_workflow_id: currentWorkflowId,
|
||||
workflow_id: this.data.id,
|
||||
sharing_role: this.workflowHelpers.getWorkflowProjectRole(this.data.id),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.httpStatusCode === 403) {
|
||||
error.message = this.$locale.baseText('duplicateWorkflowDialog.errors.forbidden.message');
|
||||
|
||||
this.showError(
|
||||
error,
|
||||
this.$locale.baseText('duplicateWorkflowDialog.errors.forbidden.title'),
|
||||
);
|
||||
} else {
|
||||
this.showError(
|
||||
error,
|
||||
this.$locale.baseText('duplicateWorkflowDialog.errors.generic.title'),
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
this.isSaving = false;
|
||||
}
|
||||
},
|
||||
closeDialog(): void {
|
||||
this.modalBus.emit('close');
|
||||
},
|
||||
},
|
||||
onMounted(async () => {
|
||||
name.value = await workflowsStore.getDuplicateCurrentWorkflowName(props.data.name);
|
||||
await nextTick();
|
||||
focusOnNameInput();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -154,7 +144,7 @@ export default defineComponent({
|
|||
<Modal
|
||||
:name="modalName"
|
||||
:event-bus="modalBus"
|
||||
:title="$locale.baseText('duplicateWorkflowDialog.duplicateWorkflow')"
|
||||
:title="i18n.baseText('duplicateWorkflowDialog.duplicateWorkflow')"
|
||||
:center="true"
|
||||
width="420px"
|
||||
@enter="save"
|
||||
|
|
@ -162,9 +152,9 @@ export default defineComponent({
|
|||
<template #content>
|
||||
<div :class="$style.content">
|
||||
<n8n-input
|
||||
ref="nameInput"
|
||||
ref="nameInputRef"
|
||||
v-model="name"
|
||||
:placeholder="$locale.baseText('duplicateWorkflowDialog.enterWorkflowName')"
|
||||
:placeholder="i18n.baseText('duplicateWorkflowDialog.enterWorkflowName')"
|
||||
:maxlength="MAX_WORKFLOW_NAME_LENGTH"
|
||||
/>
|
||||
<WorkflowTagsDropdown
|
||||
|
|
@ -173,7 +163,7 @@ export default defineComponent({
|
|||
v-model="currentTagIds"
|
||||
:create-enabled="true"
|
||||
:event-bus="dropdownBus"
|
||||
:placeholder="$locale.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
|
||||
:placeholder="i18n.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
|
||||
@blur="onTagsBlur"
|
||||
@esc="onTagsEsc"
|
||||
/>
|
||||
|
|
@ -183,14 +173,14 @@ export default defineComponent({
|
|||
<div :class="$style.footer">
|
||||
<n8n-button
|
||||
:loading="isSaving"
|
||||
:label="$locale.baseText('duplicateWorkflowDialog.save')"
|
||||
:label="i18n.baseText('duplicateWorkflowDialog.save')"
|
||||
float="right"
|
||||
@click="save"
|
||||
/>
|
||||
<n8n-button
|
||||
type="secondary"
|
||||
:disabled="isSaving"
|
||||
:label="$locale.baseText('duplicateWorkflowDialog.cancel')"
|
||||
:label="i18n.baseText('duplicateWorkflowDialog.cancel')"
|
||||
float="right"
|
||||
@click="close"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue