2019-06-23 03:35:23 -07:00
|
|
|
<template>
|
|
|
|
<div class="workflow-activator">
|
2022-11-11 00:07:14 -08:00
|
|
|
<div :class="$style.activeStatusText" data-test-id="workflow-activator-status">
|
2022-10-18 06:28:21 -07:00
|
|
|
<n8n-text v-if="workflowActive" :color="couldNotBeStarted ? 'danger' : 'success'" size="small" bold>
|
|
|
|
{{ $locale.baseText('workflowActivator.active') }}
|
|
|
|
</n8n-text>
|
|
|
|
<n8n-text v-else color="text-base" size="small" bold>
|
|
|
|
{{ $locale.baseText('workflowActivator.inactive') }}
|
|
|
|
</n8n-text>
|
|
|
|
</div>
|
2022-01-21 09:00:00 -08:00
|
|
|
<n8n-tooltip :disabled="!disabled" placement="bottom">
|
2022-11-18 05:59:31 -08:00
|
|
|
<template #content>
|
|
|
|
<div>{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div>
|
|
|
|
</template>
|
2022-01-21 09:00:00 -08:00
|
|
|
<el-switch
|
2022-06-20 12:39:24 -07:00
|
|
|
v-loading="updatingWorkflowActivation"
|
2022-01-21 09:00:00 -08:00
|
|
|
:value="workflowActive"
|
|
|
|
@change="activeChanged"
|
|
|
|
:title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
|
2022-06-20 12:39:24 -07:00
|
|
|
:disabled="disabled || updatingWorkflowActivation"
|
2022-01-21 09:00:00 -08:00
|
|
|
:active-color="getActiveColor"
|
|
|
|
inactive-color="#8899AA"
|
|
|
|
element-loading-spinner="el-icon-loading">
|
|
|
|
</el-switch>
|
|
|
|
</n8n-tooltip>
|
2019-06-23 03:35:23 -07:00
|
|
|
|
|
|
|
<div class="could-not-be-started" v-if="couldNotBeStarted">
|
2021-08-29 04:36:17 -07:00
|
|
|
<n8n-tooltip placement="top">
|
2022-11-18 05:59:31 -08:00
|
|
|
<template #content>
|
|
|
|
<div @click="displayActivationError" v-html="$locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"></div>
|
|
|
|
</template>
|
2019-06-23 03:35:23 -07:00
|
|
|
<font-awesome-icon @click="displayActivationError" icon="exclamation-triangle" />
|
2021-08-29 04:36:17 -07:00
|
|
|
</n8n-tooltip>
|
2019-06-23 03:35:23 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
|
|
|
import { showMessage } from '@/components/mixins/showMessage';
|
2022-06-20 12:39:24 -07:00
|
|
|
import { workflowActivate } from '@/components/mixins/workflowActivate';
|
2022-11-04 06:04:31 -07:00
|
|
|
import { useUIStore } from '@/stores/ui';
|
|
|
|
import { useWorkflowsStore } from '@/stores/workflows';
|
|
|
|
import { mapStores } from 'pinia';
|
2019-06-23 03:35:23 -07:00
|
|
|
import mixins from 'vue-typed-mixins';
|
2022-01-21 09:00:00 -08:00
|
|
|
import { getActivatableTriggerNodes } from './helpers';
|
|
|
|
|
2019-06-23 03:35:23 -07:00
|
|
|
export default mixins(
|
|
|
|
showMessage,
|
2022-06-20 12:39:24 -07:00
|
|
|
workflowActivate,
|
2019-06-23 03:35:23 -07:00
|
|
|
)
|
|
|
|
.extend(
|
|
|
|
{
|
|
|
|
name: 'WorkflowActivator',
|
|
|
|
props: [
|
|
|
|
'workflowActive',
|
|
|
|
'workflowId',
|
|
|
|
],
|
|
|
|
computed: {
|
2022-11-04 06:04:31 -07:00
|
|
|
...mapStores(
|
|
|
|
useUIStore,
|
|
|
|
useWorkflowsStore,
|
|
|
|
),
|
|
|
|
getStateIsDirty (): boolean {
|
|
|
|
return this.uiStore.stateIsDirty;
|
|
|
|
},
|
2019-06-23 03:35:23 -07:00
|
|
|
nodesIssuesExist (): boolean {
|
2022-11-04 06:04:31 -07:00
|
|
|
return this.workflowsStore.nodesIssuesExist;
|
2019-06-23 03:35:23 -07:00
|
|
|
},
|
|
|
|
isWorkflowActive (): boolean {
|
2022-11-04 06:04:31 -07:00
|
|
|
const activeWorkflows = this.workflowsStore.activeWorkflows;
|
2019-06-23 03:35:23 -07:00
|
|
|
return activeWorkflows.includes(this.workflowId);
|
|
|
|
},
|
|
|
|
couldNotBeStarted (): boolean {
|
|
|
|
return this.workflowActive === true && this.isWorkflowActive !== this.workflowActive;
|
|
|
|
},
|
|
|
|
getActiveColor (): string {
|
|
|
|
if (this.couldNotBeStarted === true) {
|
|
|
|
return '#ff4949';
|
|
|
|
}
|
|
|
|
return '#13ce66';
|
|
|
|
},
|
2022-01-21 09:00:00 -08:00
|
|
|
isCurrentWorkflow(): boolean {
|
2022-11-04 06:04:31 -07:00
|
|
|
return this.workflowsStore.workflowId === this.workflowId;
|
2022-01-21 09:00:00 -08:00
|
|
|
},
|
|
|
|
disabled(): boolean {
|
|
|
|
const isNewWorkflow = !this.workflowId;
|
|
|
|
if (isNewWorkflow || this.isCurrentWorkflow) {
|
|
|
|
return !this.workflowActive && !this.containsTrigger;
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
},
|
|
|
|
containsTrigger(): boolean {
|
2022-11-04 06:04:31 -07:00
|
|
|
const foundTriggers = getActivatableTriggerNodes(this.workflowsStore.workflowTriggerNodes);
|
2022-01-21 09:00:00 -08:00
|
|
|
return foundTriggers.length > 0;
|
|
|
|
},
|
2019-06-23 03:35:23 -07:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
async activeChanged (newActiveState: boolean) {
|
2022-11-08 09:05:50 -08:00
|
|
|
return await this.updateWorkflowActivation(this.workflowId, newActiveState);
|
2019-06-23 03:35:23 -07:00
|
|
|
},
|
|
|
|
async displayActivationError () {
|
|
|
|
let errorMessage: string;
|
|
|
|
try {
|
|
|
|
const errorData = await this.restApi().getActivationError(this.workflowId);
|
|
|
|
|
|
|
|
if (errorData === undefined) {
|
2021-12-15 04:16:53 -08:00
|
|
|
errorMessage = this.$locale.baseText('workflowActivator.showMessage.displayActivationError.message.errorDataUndefined');
|
2019-06-23 03:35:23 -07:00
|
|
|
} else {
|
2021-12-15 04:16:53 -08:00
|
|
|
errorMessage = this.$locale.baseText(
|
2021-11-10 10:41:40 -08:00
|
|
|
'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined',
|
|
|
|
{ interpolate: { message: errorData.error.message } },
|
|
|
|
);
|
2019-06-23 03:35:23 -07:00
|
|
|
}
|
|
|
|
} catch (error) {
|
2021-12-15 04:16:53 -08:00
|
|
|
errorMessage = this.$locale.baseText('workflowActivator.showMessage.displayActivationError.message.catchBlock');
|
2019-06-23 03:35:23 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
this.$showMessage({
|
2021-12-15 04:16:53 -08:00
|
|
|
title: this.$locale.baseText('workflowActivator.showMessage.displayActivationError.title'),
|
2019-06-23 03:35:23 -07:00
|
|
|
message: errorMessage,
|
|
|
|
type: 'warning',
|
|
|
|
duration: 0,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
2019-12-29 13:02:21 -08:00
|
|
|
},
|
2019-06-23 03:35:23 -07:00
|
|
|
);
|
|
|
|
</script>
|
|
|
|
|
2022-10-18 06:28:21 -07:00
|
|
|
<style lang="scss" module>
|
|
|
|
.activeStatusText {
|
|
|
|
width: 64px; // Required to avoid jumping when changing active state
|
|
|
|
padding-right: var(--spacing-2xs);
|
|
|
|
box-sizing: border-box;
|
|
|
|
display: inline-block;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
</style>
|
2022-01-21 09:00:00 -08:00
|
|
|
|
2022-10-18 06:28:21 -07:00
|
|
|
<style lang="scss" scoped>
|
2019-06-23 03:35:23 -07:00
|
|
|
.workflow-activator {
|
2022-10-18 06:28:21 -07:00
|
|
|
display: inline-flex;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
align-items: center;
|
2019-06-23 03:35:23 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
.could-not-be-started {
|
|
|
|
display: inline-block;
|
|
|
|
color: #ff4949;
|
|
|
|
margin-left: 0.5em;
|
|
|
|
}
|
|
|
|
|
2021-08-29 04:36:17 -07:00
|
|
|
::v-deep .el-loading-spinner {
|
2019-06-23 03:35:23 -07:00
|
|
|
margin-top: -10px;
|
|
|
|
}
|
|
|
|
</style>
|