mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-12 15:44:06 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor(editor): Migrate ActivationModal.vue to composition API (#10723)

Browse source
This commit is contained in:
Ricardo Espinoza 2024-09-10 10:19:50 -04:00 committed by GitHub
parent 22c70d5069
commit 14580dadde
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 77 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
packages/editor-ui/src/components/ActivationModal.vue
View file

@ -1,7 +1,5 @@
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue'; import { computed, ref } from 'vue';
import { mapStores } from 'pinia';
import { createEventBus } from 'n8n-design-system/utils';
import Modal from '@/components/Modal.vue'; import Modal from '@/components/Modal.vue';
import { import {
@ -16,92 +14,86 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store'; import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useStorage } from '@/composables/useStorage'; import { useStorage } from '@/composables/useStorage';
import { useExecutionsStore } from '@/stores/executions.store'; import { useExecutionsStore } from '@/stores/executions.store';
import { useRouter } from 'vue-router';
import { useI18n } from '@/composables/useI18n';
export default defineComponent({ const checked = ref(false);
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;
if (activeExecution) { const executionsStore = useExecutionsStore();
this.$router const workflowsStore = useWorkflowsStore();
.push({ const nodeTypesStore = useNodeTypesStore();
name: VIEWS.EXECUTION_PREVIEW, const uiStore = useUIStore();
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 '';
}
if (foundTriggers.length > 1) { const router = useRouter();
return this.$locale.baseText('activationModal.yourTriggersWillNowFire'); 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 (foundTriggers.length > 1) {
if (triggerNodeType) { return i18n.baseText('activationModal.yourTriggersWillNowFire');
if (triggerNodeType.activationMessage) { }
return triggerNodeType.activationMessage;
}
const serviceName = getTriggerNodeServiceName(triggerNodeType); const trigger = foundTriggers[0];
if (trigger.webhookId) {
return this.$locale.baseText('activationModal.yourWorkflowWillNowListenForEvents', { const triggerNodeType = nodeTypesStore.getNodeType(trigger.type, trigger.typeVersion);
interpolate: { if (triggerNodeType) {
serviceName, if (triggerNodeType.activationMessage) {
}, return triggerNodeType.activationMessage;
}); }
} else if (triggerNodeType.polling) {
return this.$locale.baseText('activationModal.yourWorkflowWillNowRegularlyCheck', { const serviceName = getTriggerNodeServiceName(triggerNodeType);
interpolate: { if (trigger.webhookId) {
serviceName, return i18n.baseText('activationModal.yourWorkflowWillNowListenForEvents', {
}, interpolate: {
}); serviceName,
} },
} });
return this.$locale.baseText('activationModal.yourTriggerWillNowFire'); } 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> </script>
<template> <template>
<Modal <Modal
:name="WORKFLOW_ACTIVE_MODAL_KEY" :name="WORKFLOW_ACTIVE_MODAL_KEY"
:title="$locale.baseText('activationModal.workflowActivated')" :title="i18n.baseText('activationModal.workflowActivated')"
width="460px" width="460px"
> >
<template #content> <template #content>
@ -111,14 +103,14 @@ export default defineComponent({
<div :class="$style.spaced"> <div :class="$style.spaced">
<n8n-text> <n8n-text>
<n8n-text :bold="true"> <n8n-text :bold="true">
{{ $locale.baseText('activationModal.theseExecutionsWillNotShowUp') }} {{ i18n.baseText('activationModal.theseExecutionsWillNotShowUp') }}
</n8n-text> </n8n-text>
{{ $locale.baseText('activationModal.butYouCanSeeThem') }} {{ i18n.baseText('activationModal.butYouCanSeeThem') }}
<a @click="showExecutionsList"> <a @click="showExecutionsList">
{{ $locale.baseText('activationModal.executionList') }} {{ i18n.baseText('activationModal.executionList') }}
</a> </a>
{{ $locale.baseText('activationModal.ifYouChooseTo') }} {{ i18n.baseText('activationModal.ifYouChooseTo') }}
<a @click="showSettings">{{ $locale.baseText('activationModal.saveExecutions') }}</a> <a @click="showSettings">{{ i18n.baseText('activationModal.saveExecutions') }}</a>
</n8n-text> </n8n-text>
</div> </div>
</template> </template>
@ -126,9 +118,9 @@ export default defineComponent({
<template #footer="{ close }"> <template #footer="{ close }">
<div :class="$style.footer"> <div :class="$style.footer">
<el-checkbox :model-value="checked" @update:model-value="handleCheckboxChange">{{ <el-checkbox :model-value="checked" @update:model-value="handleCheckboxChange">{{
$locale.baseText('generic.dontShowAgain') i18n.baseText('generic.dontShowAgain')
}}</el-checkbox> }}</el-checkbox>
<n8n-button :label="$locale.baseText('activationModal.gotIt')" @click="close" /> <n8n-button :label="i18n.baseText('activationModal.gotIt')" @click="close" />
</div> </div>
</template> </template>
</Modal> </Modal>