mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-21 03:42:16 +00:00
feat(editor): Add move resources option to workflows and credentials on (#9654)
This commit is contained in:
Csaba Tuncsik
@@ -0,0 +1,102 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import type { ICredentialsResponse, IWorkflowDb } from '@/Interface';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { useUIStore } from '@/stores/ui.store';
|
||||
import { useProjectsStore } from '@/stores/projects.store';
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import { N8nCheckbox, N8nText } from 'n8n-design-system';
|
||||
import { useToast } from '@/composables/useToast';
|
||||
|
||||
const props = defineProps<{
|
||||
modalName: string;
|
||||
data: {
|
||||
resource: IWorkflowDb | ICredentialsResponse;
|
||||
resourceType: 'workflow' | 'credential';
|
||||
projectId: string;
|
||||
};
|
||||
}>();
|
||||
|
||||
const i18n = useI18n();
|
||||
const toast = useToast();
|
||||
const uiStore = useUIStore();
|
||||
const projectsStore = useProjectsStore();
|
||||
|
||||
const checks = ref([false, false]);
|
||||
const allChecked = computed(() => checks.value.every(Boolean));
|
||||
|
||||
const moveResourceLabel = computed(() =>
|
||||
props.data.resourceType === 'workflow'
|
||||
? i18n.baseText('projects.move.workflow.confirm.modal.label')
|
||||
: i18n.baseText('projects.move.credential.confirm.modal.label'),
|
||||
);
|
||||
|
||||
const closeModal = () => {
|
||||
uiStore.closeModal(props.modalName);
|
||||
};
|
||||
|
||||
const confirm = async () => {
|
||||
try {
|
||||
await projectsStore.moveResourceToProject(
|
||||
props.data.resourceType,
|
||||
props.data.resource.id,
|
||||
props.data.projectId,
|
||||
);
|
||||
closeModal();
|
||||
} catch (error) {
|
||||
toast.showError(
|
||||
error.message,
|
||||
i18n.baseText('projects.move.resource.error.title', {
|
||||
interpolate: {
|
||||
resourceType: props.data.resourceType,
|
||||
resourceName: props.data.resource.name,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<Modal width="500px" :name="props.modalName" data-test-id="project-move-resource-confirm-modal">
|
||||
<template #header>
|
||||
<N8nHeading tag="h2" size="xlarge" class="mb-m">
|
||||
{{ i18n.baseText('projects.move.resource.confirm.modal.title') }}
|
||||
</N8nHeading>
|
||||
</template>
|
||||
<template #content>
|
||||
<N8nCheckbox v-model="checks[0]" :label="moveResourceLabel" />
|
||||
<N8nCheckbox v-model="checks[1]">
|
||||
<N8nText>
|
||||
<i18n-t keypath="projects.move.resource.confirm.modal.label">
|
||||
<template #resourceType>{{ props.data.resourceType }}</template>
|
||||
<template #numberOfUsers>{{
|
||||
i18n.baseText('projects.move.resource.confirm.modal.numberOfUsers', {
|
||||
interpolate: {
|
||||
numberOfUsers: props.data.resource.sharedWithProjects?.length ?? 0,
|
||||
},
|
||||
adjustToNumber: props.data.resource.sharedWithProjects?.length,
|
||||
})
|
||||
}}</template>
|
||||
</i18n-t>
|
||||
</N8nText>
|
||||
</N8nCheckbox>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div :class="$style.buttons">
|
||||
<N8nButton type="secondary" text class="mr-2xs" @click="closeModal">
|
||||
{{ i18n.baseText('generic.cancel') }}
|
||||
</N8nButton>
|
||||
<N8nButton :disabled="!allChecked" type="primary" @click="confirm">
|
||||
{{ i18n.baseText('projects.move.resource.confirm.modal.button.confirm') }}
|
||||
</N8nButton>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import type { ICredentialsResponse, IWorkflowDb } from '@/Interface';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { useUIStore } from '@/stores/ui.store';
|
||||
import { useProjectsStore } from '@/stores/projects.store';
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import { PROJECT_MOVE_RESOURCE_CONFIRM_MODAL } from '@/constants';
|
||||
import { splitName } from '@/utils/projects.utils';
|
||||
|
||||
const props = defineProps<{
|
||||
modalName: string;
|
||||
data: {
|
||||
resource: IWorkflowDb | ICredentialsResponse;
|
||||
resourceType: 'workflow' | 'credential';
|
||||
};
|
||||
}>();
|
||||
|
||||
const i18n = useI18n();
|
||||
const uiStore = useUIStore();
|
||||
const projectsStore = useProjectsStore();
|
||||
|
||||
const projectId = ref<string | null>(null);
|
||||
const processedName = computed(() => {
|
||||
const { firstName, lastName, email } = splitName(props.data.resource.homeProject?.name ?? '');
|
||||
return !firstName ? email : `${firstName}${lastName ? ' ' + lastName : ''}`;
|
||||
});
|
||||
const availableProjects = computed(() => {
|
||||
return projectsStore.teamProjects.filter((p) => p.id !== props.data.resource.homeProject?.id);
|
||||
});
|
||||
|
||||
const updateProject = (value: string) => {
|
||||
projectId.value = value;
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
uiStore.closeModal(props.modalName);
|
||||
};
|
||||
|
||||
const next = () => {
|
||||
closeModal();
|
||||
uiStore.openModalWithData({
|
||||
name: PROJECT_MOVE_RESOURCE_CONFIRM_MODAL,
|
||||
data: {
|
||||
resource: props.data.resource,
|
||||
resourceType: props.data.resourceType,
|
||||
projectId: projectId.value,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<Modal width="500px" :name="props.modalName" data-test-id="project-move-resource-modal">
|
||||
<template #header>
|
||||
<N8nHeading tag="h2" size="xlarge" class="mb-m">
|
||||
{{
|
||||
i18n.baseText('projects.move.resource.modal.title', {
|
||||
interpolate: { resourceType: props.data.resourceType },
|
||||
})
|
||||
}}
|
||||
</N8nHeading>
|
||||
<N8nText>
|
||||
<i18n-t keypath="projects.move.resource.modal.message">
|
||||
<template #resourceName
|
||||
><strong>{{ props.data.resource.name }}</strong></template
|
||||
>
|
||||
<template #resourceHomeProjectName>{{ processedName }}</template>
|
||||
<template #resourceType>{{ props.data.resourceType }}</template>
|
||||
</i18n-t>
|
||||
</N8nText>
|
||||
</template>
|
||||
<template #content>
|
||||
<div>
|
||||
<N8nSelect
|
||||
class="mr-2xs"
|
||||
:model-value="projectId"
|
||||
size="small"
|
||||
data-test-id="project-move-resource-modal-select"
|
||||
@update:model-value="updateProject"
|
||||
>
|
||||
<N8nOption
|
||||
v-for="p in availableProjects"
|
||||
:key="p.id"
|
||||
:value="p.id"
|
||||
:label="p.name"
|
||||
></N8nOption>
|
||||
</N8nSelect>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div :class="$style.buttons">
|
||||
<N8nButton type="secondary" text class="mr-2xs" @click="closeModal">
|
||||
{{ i18n.baseText('generic.cancel') }}
|
||||
</N8nButton>
|
||||
<N8nButton :disabled="!projectId" type="primary" @click="next">
|
||||
{{ i18n.baseText('generic.next') }}
|
||||
</N8nButton>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -255,9 +255,9 @@ onBeforeMount(async () => {
|
||||
</div>
|
||||
<form @submit.prevent="onSubmit">
|
||||
<fieldset>
|
||||
<label for="name">{{ locale.baseText('projects.settings.name') }}</label>
|
||||
<label for="projectName">{{ locale.baseText('projects.settings.name') }}</label>
|
||||
<N8nInput
|
||||
id="name"
|
||||
id="projectName"
|
||||
ref="nameInput"
|
||||
v-model="formData.name"
|
||||
type="text"
|
||||
|
||||
Reference in New Issue
Block a user