mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 01:56:46 +00:00
133 lines
3.2 KiB
Vue
133 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
|
import { useI18n } from '@/composables/useI18n';
|
|
import { MOVE_FOLDER_MODAL_KEY } from '@/constants';
|
|
import { useProjectsStore } from '@/stores/projects.store';
|
|
import { useUIStore } from '@/stores/ui.store';
|
|
import { type EventBus } from '@n8n/utils/event-bus';
|
|
import { computed, ref } from 'vue';
|
|
|
|
/**
|
|
* This modal is used to move a resource (folder or workflow) to a different folder.
|
|
*/
|
|
|
|
type Props = {
|
|
modalName: string;
|
|
data: {
|
|
resourceType: 'folder' | 'workflow';
|
|
resource: {
|
|
id: string;
|
|
name: string;
|
|
parentFolderId?: string;
|
|
};
|
|
workflowListEventBus: EventBus;
|
|
};
|
|
};
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const i18n = useI18n();
|
|
|
|
const projectsStore = useProjectsStore();
|
|
const uiStore = useUIStore();
|
|
|
|
const selectedFolder = ref<{ id: string; name: string } | null>(null);
|
|
|
|
const title = computed(() => {
|
|
return i18n.baseText('folders.move.modal.title', {
|
|
interpolate: { folderName: props.data.resource.name },
|
|
});
|
|
});
|
|
|
|
const currentFolder = computed(() => {
|
|
if (props.data.resourceType === 'workflow') {
|
|
return;
|
|
}
|
|
return {
|
|
id: props.data.resource.id,
|
|
name: props.data.resource.name,
|
|
};
|
|
});
|
|
|
|
const onFolderSelected = (payload: { id: string; name: string; type: string }) => {
|
|
selectedFolder.value = payload;
|
|
};
|
|
|
|
const onSubmit = () => {
|
|
if (props.data.resourceType === 'folder') {
|
|
props.data.workflowListEventBus.emit('folder-moved', {
|
|
newParent: selectedFolder.value,
|
|
folder: { id: props.data.resource.id, name: props.data.resource.name },
|
|
});
|
|
} else {
|
|
props.data.workflowListEventBus.emit('workflow-moved', {
|
|
newParent: selectedFolder.value,
|
|
workflow: {
|
|
id: props.data.resource.id,
|
|
name: props.data.resource.name,
|
|
oldParentId: props.data.resource.parentFolderId,
|
|
},
|
|
});
|
|
}
|
|
uiStore.closeModal(MOVE_FOLDER_MODAL_KEY);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Modal :name="modalName" :title="title" width="500" :class="$style.container">
|
|
<template #content>
|
|
<MoveToFolderDropdown
|
|
v-if="projectsStore.currentProject"
|
|
:current-folder-id="currentFolder?.id"
|
|
:current-project-id="projectsStore.currentProject?.id"
|
|
:parent-folder-id="props.data.resource.parentFolderId"
|
|
:exclude-only-parent="props.data.resourceType === 'workflow'"
|
|
@location:selected="onFolderSelected"
|
|
/>
|
|
<p
|
|
v-if="props.data.resourceType === 'folder'"
|
|
:class="$style.description"
|
|
data-test-id="move-folder-description"
|
|
>
|
|
{{ i18n.baseText('folders.move.modal.description') }}
|
|
</p>
|
|
</template>
|
|
<template #footer="{ close }">
|
|
<div :class="$style.footer">
|
|
<n8n-button
|
|
type="secondary"
|
|
:label="i18n.baseText('generic.cancel')"
|
|
float="right"
|
|
data-test-id="cancel-move-folder-button"
|
|
@click="close"
|
|
/>
|
|
<n8n-button
|
|
:disabled="!selectedFolder"
|
|
:label="i18n.baseText('folders.move.modal.confirm')"
|
|
float="right"
|
|
data-test-id="confirm-move-folder-button"
|
|
@click="onSubmit"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
.container {
|
|
h1 {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
|
|
.description {
|
|
font-size: var(--font-size-s);
|
|
margin: var(--spacing-s) 0;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
gap: var(--spacing-2xs);
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|