mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 20:24:05 -08:00
refactor(editor): Migrate ActivationModal.vue to composition API (#10723)
This commit is contained in:
Ricardo Espinoza
GitHub
parent
22c70d5069
commit
14580dadde
|
|
@ -1,7 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { mapStores } from 'pinia';
|
||||
import { createEventBus } from 'n8n-design-system/utils';
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import {
|
||||
|
|
@ -16,92 +14,86 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
|
|||
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
||||
import { useStorage } from '@/composables/useStorage';
|
||||
import { useExecutionsStore } from '@/stores/executions.store';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ActivationModal',
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
props: ['modalName'],
|
||||
data() {
|
||||
return {
|
||||
WORKFLOW_ACTIVE_MODAL_KEY,
|
||||
checked: false,
|
||||
modalBus: createEventBus(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async showExecutionsList() {
|
||||
const activeExecution = this.executionsStore.activeExecution;
|
||||
const currentWorkflow = this.workflowsStore.workflowId;
|
||||
const checked = ref(false);
|
||||
|
||||
if (activeExecution) {
|
||||
this.$router
|
||||
.push({
|
||||
name: VIEWS.EXECUTION_PREVIEW,
|
||||
params: { name: currentWorkflow, executionId: activeExecution.id },
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
this.$router
|
||||
.push({ name: VIEWS.EXECUTION_HOME, params: { name: currentWorkflow } })
|
||||
.catch(() => {});
|
||||
}
|
||||
this.uiStore.closeModal(WORKFLOW_ACTIVE_MODAL_KEY);
|
||||
},
|
||||
async showSettings() {
|
||||
this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
|
||||
},
|
||||
handleCheckboxChange(checkboxValue: boolean) {
|
||||
this.checked = checkboxValue;
|
||||
useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value = checkboxValue.toString();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useNodeTypesStore, useUIStore, useWorkflowsStore, useExecutionsStore),
|
||||
triggerContent(): string {
|
||||
const foundTriggers = getActivatableTriggerNodes(this.workflowsStore.workflowTriggerNodes);
|
||||
if (!foundTriggers.length) {
|
||||
return '';
|
||||
}
|
||||
const executionsStore = useExecutionsStore();
|
||||
const workflowsStore = useWorkflowsStore();
|
||||
const nodeTypesStore = useNodeTypesStore();
|
||||
const uiStore = useUIStore();
|
||||
|
||||
if (foundTriggers.length > 1) {
|
||||
return this.$locale.baseText('activationModal.yourTriggersWillNowFire');
|
||||
}
|
||||
const router = useRouter();
|
||||
const i18n = useI18n();
|
||||
|
||||
const trigger = foundTriggers[0];
|
||||
const triggerContent = computed(() => {
|
||||
const foundTriggers = getActivatableTriggerNodes(workflowsStore.workflowTriggerNodes);
|
||||
if (!foundTriggers.length) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const triggerNodeType = this.nodeTypesStore.getNodeType(trigger.type, trigger.typeVersion);
|
||||
if (triggerNodeType) {
|
||||
if (triggerNodeType.activationMessage) {
|
||||
return triggerNodeType.activationMessage;
|
||||
}
|
||||
if (foundTriggers.length > 1) {
|
||||
return i18n.baseText('activationModal.yourTriggersWillNowFire');
|
||||
}
|
||||
|
||||
const serviceName = getTriggerNodeServiceName(triggerNodeType);
|
||||
if (trigger.webhookId) {
|
||||
return this.$locale.baseText('activationModal.yourWorkflowWillNowListenForEvents', {
|
||||
interpolate: {
|
||||
serviceName,
|
||||
},
|
||||
});
|
||||
} else if (triggerNodeType.polling) {
|
||||
return this.$locale.baseText('activationModal.yourWorkflowWillNowRegularlyCheck', {
|
||||
interpolate: {
|
||||
serviceName,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return this.$locale.baseText('activationModal.yourTriggerWillNowFire');
|
||||
},
|
||||
},
|
||||
const trigger = foundTriggers[0];
|
||||
|
||||
const triggerNodeType = nodeTypesStore.getNodeType(trigger.type, trigger.typeVersion);
|
||||
if (triggerNodeType) {
|
||||
if (triggerNodeType.activationMessage) {
|
||||
return triggerNodeType.activationMessage;
|
||||
}
|
||||
|
||||
const serviceName = getTriggerNodeServiceName(triggerNodeType);
|
||||
if (trigger.webhookId) {
|
||||
return i18n.baseText('activationModal.yourWorkflowWillNowListenForEvents', {
|
||||
interpolate: {
|
||||
serviceName,
|
||||
},
|
||||
});
|
||||
} else if (triggerNodeType.polling) {
|
||||
return i18n.baseText('activationModal.yourWorkflowWillNowRegularlyCheck', {
|
||||
interpolate: {
|
||||
serviceName,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return i18n.baseText('activationModal.yourTriggerWillNowFire');
|
||||
});
|
||||
|
||||
const showExecutionsList = async () => {
|
||||
const activeExecution = executionsStore.activeExecution;
|
||||
const currentWorkflow = workflowsStore.workflowId;
|
||||
|
||||
if (activeExecution) {
|
||||
router
|
||||
.push({
|
||||
name: VIEWS.EXECUTION_PREVIEW,
|
||||
params: { name: currentWorkflow, executionId: activeExecution.id },
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
router.push({ name: VIEWS.EXECUTION_HOME, params: { name: currentWorkflow } }).catch(() => {});
|
||||
}
|
||||
uiStore.closeModal(WORKFLOW_ACTIVE_MODAL_KEY);
|
||||
};
|
||||
|
||||
const showSettings = async () => {
|
||||
uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (checkboxValue: boolean) => {
|
||||
checked.value = checkboxValue;
|
||||
useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value = checkboxValue.toString();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:name="WORKFLOW_ACTIVE_MODAL_KEY"
|
||||
:title="$locale.baseText('activationModal.workflowActivated')"
|
||||
:title="i18n.baseText('activationModal.workflowActivated')"
|
||||
width="460px"
|
||||
>
|
||||
<template #content>
|
||||
|
|
@ -111,14 +103,14 @@ export default defineComponent({
|
|||
<div :class="$style.spaced">
|
||||
<n8n-text>
|
||||
<n8n-text :bold="true">
|
||||
{{ $locale.baseText('activationModal.theseExecutionsWillNotShowUp') }}
|
||||
{{ i18n.baseText('activationModal.theseExecutionsWillNotShowUp') }}
|
||||
</n8n-text>
|
||||
{{ $locale.baseText('activationModal.butYouCanSeeThem') }}
|
||||
{{ i18n.baseText('activationModal.butYouCanSeeThem') }}
|
||||
<a @click="showExecutionsList">
|
||||
{{ $locale.baseText('activationModal.executionList') }}
|
||||
{{ i18n.baseText('activationModal.executionList') }}
|
||||
</a>
|
||||
{{ $locale.baseText('activationModal.ifYouChooseTo') }}
|
||||
<a @click="showSettings">{{ $locale.baseText('activationModal.saveExecutions') }}</a>
|
||||
{{ i18n.baseText('activationModal.ifYouChooseTo') }}
|
||||
<a @click="showSettings">{{ i18n.baseText('activationModal.saveExecutions') }}</a>
|
||||
</n8n-text>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -126,9 +118,9 @@ export default defineComponent({
|
|||
<template #footer="{ close }">
|
||||
<div :class="$style.footer">
|
||||
<el-checkbox :model-value="checked" @update:model-value="handleCheckboxChange">{{
|
||||
$locale.baseText('generic.dontShowAgain')
|
||||
i18n.baseText('generic.dontShowAgain')
|
||||
}}</el-checkbox>
|
||||
<n8n-button :label="$locale.baseText('activationModal.gotIt')" @click="close" />
|
||||
<n8n-button :label="i18n.baseText('activationModal.gotIt')" @click="close" />
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
|
|
|
|||
Loading…
Reference in a new issue