mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-25 20:54:07 -08:00
feat(editor): create new workflows page (#4267)
* feat(editor): extract credentials view into reusable layout components for workflows view * feat(editor): add workflow card and start work on empty state * feat: add hoverable card and finish workflows empty state * fix: undo workflows response interface changes * chore: fix linting issues. * fix: remove enterprise sharing env schema * fix(editor): fix workflows resource view when sharing is enabled * fix: change owner tag design and order * feat: add personalization survey on workflows page * fix: update component snapshots * feat: refactored workflow card to use workflow-activator properly * fix: fix workflow activator and proptypes * fix: hide owner tag for workflow card until sharing is available * fix: fixed ownedBy and sharedWith appearing for workflows list * feat: update tags component design * refactor: change resource filter select to n8n-user-select * fix: made telemetry messages reusable * chore: remove unused import * refactor: fix component name casing * refactor: use Vue.set to make workflow property reactive * feat: add support for clicking on tags for filtering * chore: fix tags linting issues * fix: fix resources list layout when title words are very long * refactor: add active and inactive status text to workflow activator * fix: fix credentials and workflows sorting when name contains leading whitespace * fix: remove wrongfully added style tag * feat: add translations and storybook examples for truncated tags * fix: remove enterprise sharing env from schema * refactor: fix workflows module and workflows field store naming conflict * fix: fix workflow activator wrapping * feat: updated empty workflows list cards design * feat: update workflow activator margins and workflow card * feat: add duplicate workflow functionality and update tags * feat: fix duplicate workflow flow * fix: fix status color for workflow activator with could not be started status * fix: remove createdAt and updatedAt from workflow duplication
This commit is contained in:
Alex Grozav
GitHub
parent
bb4e08c076
commit
be7aac3279
|
|
@ -19,6 +19,25 @@ export const Default: StoryFn = (args, {argTypes}) => ({
|
|||
template: `<n8n-card v-bind="$props">This is a card.</n8n-card>`,
|
||||
});
|
||||
|
||||
export const Hoverable: StoryFn = (args, {argTypes}) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: {
|
||||
N8nCard,
|
||||
N8nIcon,
|
||||
N8nText,
|
||||
},
|
||||
template: `<div style="width: 140px; text-align: center;">
|
||||
<n8n-card v-bind="$props">
|
||||
<n8n-icon icon="plus" size="xlarge" />
|
||||
<n8n-text size="large" class="mt-2xs">Add</n8n-text>
|
||||
</n8n-card>
|
||||
</div>`,
|
||||
});
|
||||
|
||||
Hoverable.args = {
|
||||
hoverable: true,
|
||||
};
|
||||
|
||||
|
||||
export const WithSlots: StoryFn = (args, {argTypes}) => ({
|
||||
props: Object.keys(argTypes),
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :class="['card', $style.card]" v-on="$listeners">
|
||||
<div :class="classes" v-on="$listeners">
|
||||
<div :class="$style.icon" v-if="$slots.prepend">
|
||||
<slot name="prepend"/>
|
||||
</div>
|
||||
|
|
@ -26,6 +26,21 @@ import Vue from 'vue';
|
|||
export default Vue.extend({
|
||||
name: 'n8n-card',
|
||||
inheritAttrs: true,
|
||||
props: {
|
||||
hoverable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
classes(): Record<string, boolean> {
|
||||
return {
|
||||
card: true,
|
||||
[this.$style.card]: true,
|
||||
[this.$style.hoverable]: this.hoverable,
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -73,4 +88,17 @@ export default Vue.extend({
|
|||
align-items: center;
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
|
||||
.hoverable {
|
||||
cursor: pointer;
|
||||
transition-property: border, color;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
// Vitest Snapshot v1
|
||||
|
||||
exports[`components > N8nCard > should render correctly 1`] = `
|
||||
"<div class=\\"card _card_nk81s_1\\">
|
||||
"<div class=\\"card _card_10dnp_1\\">
|
||||
<!---->
|
||||
<div class=\\"_content_nk81s_20\\">
|
||||
<div class=\\"_content_10dnp_20\\">
|
||||
<!---->
|
||||
<div class=\\"_body_nk81s_28\\">This is a card.</div>
|
||||
<div class=\\"_body_10dnp_28\\">This is a card.</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
|
|
@ -13,12 +13,12 @@ exports[`components > N8nCard > should render correctly 1`] = `
|
|||
`;
|
||||
|
||||
exports[`components > N8nCard > should render correctly with header and footer 1`] = `
|
||||
"<div class=\\"card _card_nk81s_1\\">
|
||||
"<div class=\\"card _card_10dnp_1\\">
|
||||
<!---->
|
||||
<div class=\\"_content_nk81s_20\\">
|
||||
<div class=\\"_header_nk81s_12\\">Header</div>
|
||||
<div class=\\"_body_nk81s_28\\">This is a card.</div>
|
||||
<div class=\\"_footer_nk81s_13\\">Footer</div>
|
||||
<div class=\\"_content_10dnp_20\\">
|
||||
<div class=\\"_header_10dnp_12\\">Header</div>
|
||||
<div class=\\"_body_10dnp_28\\">This is a card.</div>
|
||||
<div class=\\"_footer_10dnp_13\\">Footer</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// Vitest Snapshot v1
|
||||
|
||||
exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class=\\"n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_91pa9_34 _size-medium_91pa9_19 _regular_91pa9_5\\"></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></span></div>"`;
|
||||
exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class=\\"n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_odhsl_34 _size-medium_odhsl_19 _regular_odhsl_5\\"></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></span></div>"`;
|
||||
|
||||
exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
|
||||
"<div class=\\"n8n-info-tip _info_3egb8_33 _tooltip_3egb8_23 _base_3egb8_1 _bold_3egb8_12\\">
|
||||
<n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_91pa9_34 _size-medium_91pa9_19 _regular_91pa9_5\\"></span></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></n8n-tooltip-stub>
|
||||
<n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_odhsl_34 _size-medium_odhsl_19 _regular_odhsl_5\\"></span></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></n8n-tooltip-stub>
|
||||
</div>"
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -107,6 +107,11 @@ export default Vue.extend({
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.text-underline {
|
||||
composes: text;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.danger-underline {
|
||||
composes: danger;
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export default Vue.extend({
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: '',
|
||||
activeTab: this.value,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
|
|
@ -101,6 +101,10 @@ export default Vue.extend({
|
|||
items: {
|
||||
type: Array as PropType<IMenuItem[]>,
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.mode === 'router') {
|
||||
|
|
@ -112,6 +116,8 @@ export default Vue.extend({
|
|||
} else {
|
||||
this.activeTab = this.items.length > 0 ? this.items[0].id : '';
|
||||
}
|
||||
|
||||
this.$emit('input', this.activeTab);
|
||||
},
|
||||
computed: {
|
||||
upperMenuItems(): IMenuItem[] {
|
||||
|
|
@ -127,6 +133,12 @@ export default Vue.extend({
|
|||
this.activeTab = option;
|
||||
}
|
||||
this.$emit('select', option);
|
||||
this.$emit('input', this.activeTab);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value(value: string) {
|
||||
this.activeTab = value;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -148,7 +160,7 @@ export default Vue.extend({
|
|||
|
||||
& > div > :global(.el-menu) {
|
||||
background: none;
|
||||
padding: 12px;
|
||||
padding: var(--menu-padding, 12px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,10 +20,16 @@ export default Vue.extend({
|
|||
<style lang="scss" module>
|
||||
.tag {
|
||||
min-width: max-content;
|
||||
padding: var(--spacing-4xs);
|
||||
background-color: var(--color-foreground-base);
|
||||
padding: 1px var(--spacing-4xs);
|
||||
color: var(--color-text-dark);
|
||||
background-color: var(--color-background-base);
|
||||
border-radius: var(--border-radius-base);
|
||||
font-size: var(--font-size-2xs);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: hsl(var(--color-background-base-h), var(--color-background-base-s), calc(var(--color-background-base-l) - 4%));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,3 +33,31 @@ Tags.args = {
|
|||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
export const Truncated = Template.bind({});
|
||||
Truncated.args = {
|
||||
truncate: true,
|
||||
tags: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'very long tag name',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'tag1',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'tag2 yo',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'tag3',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'tag4',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,21 +1,65 @@
|
|||
<template>
|
||||
<div :class="['n8n-tags', $style.tags]">
|
||||
<n8n-tag v-for="tag in tags" :key="tag.id" :text="tag.name" @click="$emit('click', tag.id, $event)"/>
|
||||
<n8n-tag v-for="tag in visibleTags" :key="tag.id" :text="tag.name" @click="$emit('click', tag.id, $event)"/>
|
||||
<n8n-link
|
||||
v-if="truncate && !showAll && hiddenTagsLength > 0"
|
||||
theme="text"
|
||||
underline
|
||||
size="small"
|
||||
@click.stop.prevent="showAll = true"
|
||||
>
|
||||
{{ t('tags.showMore', hiddenTagsLength) }}
|
||||
</n8n-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import N8nTag from '../N8nTag';
|
||||
import Vue from 'vue';
|
||||
import N8nLink from '../N8nLink';
|
||||
import Locale from "../../mixins/locale";
|
||||
import Vue, {PropType} from 'vue';
|
||||
import mixins from "vue-typed-mixins";
|
||||
|
||||
export default Vue.extend({
|
||||
interface ITag {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export default mixins(Locale).extend({
|
||||
name: 'n8n-tags',
|
||||
components: {
|
||||
N8nTag,
|
||||
N8nLink,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAll: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
tags: {
|
||||
type: Array,
|
||||
type: Array as PropType<ITag[]>,
|
||||
default: () => [],
|
||||
},
|
||||
truncate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
truncateAt: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
visibleTags(): ITag[] {
|
||||
if (this.truncate && !this.showAll && this.tags.length > this.truncateAt) {
|
||||
return this.tags.slice(0, this.truncateAt);
|
||||
}
|
||||
|
||||
return this.tags;
|
||||
},
|
||||
hiddenTagsLength(): number {
|
||||
return this.tags.length - this.truncateAt;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -23,8 +67,9 @@ export default Vue.extend({
|
|||
|
||||
<style lang="scss" module>
|
||||
.tags {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
overflow-x: scroll;
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
|
|
@ -36,9 +81,10 @@ export default Vue.extend({
|
|||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
margin-top: calc(var(--spacing-4xs) * -1); // Cancel out top margin of first tags row
|
||||
|
||||
* {
|
||||
margin: 0 var(--spacing-4xs) var(--spacing-4xs) 0;
|
||||
margin: var(--spacing-4xs) var(--spacing-4xs) 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default {
|
|||
color: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight'],
|
||||
options: ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger', 'success'],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default Vue.extend({
|
|||
},
|
||||
color: {
|
||||
type: String,
|
||||
validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger'].includes(value),
|
||||
validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger', 'success'].includes(value),
|
||||
},
|
||||
align: {
|
||||
type: String,
|
||||
|
|
@ -122,6 +122,10 @@ export default Vue.extend({
|
|||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-select
|
||||
<n8n-select
|
||||
:value="value"
|
||||
:filterable="true"
|
||||
:filterMethod="setFilter"
|
||||
|
|
@ -16,16 +16,17 @@
|
|||
<template #prefix v-if="$slots.prefix">
|
||||
<slot name="prefix" />
|
||||
</template>
|
||||
<el-option
|
||||
<n8n-option
|
||||
v-for="user in sortedUsers"
|
||||
:key="user.id"
|
||||
:value="user.id"
|
||||
:class="$style.itemContainer"
|
||||
:label="getLabel(user)"
|
||||
:disabled="user.disabled"
|
||||
>
|
||||
<n8n-user-info v-bind="user" :isCurrentUser="currentUserId === user.id" />
|
||||
</el-option>
|
||||
</el-select>
|
||||
</n8n-option>
|
||||
</n8n-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
|||
|
|
@ -759,7 +759,7 @@ $cascader-height: 200px;
|
|||
/* Switch
|
||||
-------------------------- */
|
||||
/// color||Color|0
|
||||
$switch-on-color: var(--color-primary);
|
||||
$switch-on-color: #13ce66;
|
||||
/// color||Color|0
|
||||
$switch-off-color: var(--color-text-light);
|
||||
/// fontSize||Font|1
|
||||
|
|
|
|||
|
|
@ -19,4 +19,5 @@ export default {
|
|||
}`),
|
||||
"formInput.validator.defaultPasswordRequirements": "8+ characters, at least 1 number and 1 capital letter",
|
||||
"sticky.markdownHint": `You can style with <a href="https://docs.n8n.io/workflows/sticky-notes/" target="_blank">Markdown</a>`,
|
||||
'tags.showMore': (count) => `+${count} more`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -286,6 +286,8 @@ export interface IWorkflowDb {
|
|||
settings?: IWorkflowSettings;
|
||||
tags?: ITag[] | string[]; // string[] when store or requested, ITag[] from API response
|
||||
pinData?: IPinData;
|
||||
sharedWith?: Array<Partial<IUser>>;
|
||||
ownedBy?: Partial<IUser>;
|
||||
}
|
||||
|
||||
// Identical to cli.Interfaces.ts
|
||||
|
|
@ -884,6 +886,7 @@ export interface IRootState {
|
|||
urlBaseEditor: string;
|
||||
urlBaseWebhook: string;
|
||||
workflow: IWorkflowDb;
|
||||
workflowsById: IWorkflowsMap;
|
||||
sidebarMenuItems: IMenuItem[];
|
||||
instanceId: string;
|
||||
nodeMetadata: {[nodeName: string]: INodeMetadata};
|
||||
|
|
@ -918,6 +921,7 @@ export interface ITagsState {
|
|||
export interface IModalState {
|
||||
open: boolean;
|
||||
mode?: string | null;
|
||||
data?: Record<string, unknown>;
|
||||
activeId?: string | null;
|
||||
curlCommand?: string;
|
||||
httpNodeParameters?: string;
|
||||
|
|
@ -1055,9 +1059,12 @@ export interface IUsersState {
|
|||
users: {[userId: string]: IUser};
|
||||
}
|
||||
|
||||
export interface IWorkflowsState {
|
||||
export interface IWorkflowsMap {
|
||||
[name: string]: IWorkflowDb;
|
||||
}
|
||||
|
||||
export interface IWorkflowsState {}
|
||||
|
||||
export interface ICommunityNodesState {
|
||||
availablePackageCount: number;
|
||||
installedPackages: ICommunityPackageMap;
|
||||
|
|
|
|||
|
|
@ -9,3 +9,13 @@ export async function getNewWorkflow(context: IRestApiContext, name?: string) {
|
|||
};
|
||||
}
|
||||
|
||||
export async function getWorkflows(context: IRestApiContext, filter?: object) {
|
||||
const sendData = filter ? { filter } : undefined;
|
||||
|
||||
return await makeRestApiRequest(context, 'GET', `/workflows`, sendData);
|
||||
}
|
||||
|
||||
export async function getActiveWorkflows(context: IRestApiContext) {
|
||||
return await makeRestApiRequest(context, 'GET', `/active`);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { genericHelpers } from '@/components/mixins/genericHelpers';
|
||||
import Card from '@/components/WorkflowCard.vue';
|
||||
import Card from '@/components/CollectionWorkflowCard.vue';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
import NodeList from '@/components/NodeList.vue';
|
||||
|
||||
|
|
|
|||
66
packages/editor-ui/src/components/CollectionWorkflowCard.vue
Normal file
66
packages/editor-ui/src/components/CollectionWorkflowCard.vue
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<n8n-card
|
||||
:class="$style.card"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<template #header v-if="!loading">
|
||||
<span
|
||||
v-text="title"
|
||||
:class="$style.title"
|
||||
/>
|
||||
</template>
|
||||
<n8n-loading :loading="loading" :rows="3" variant="p" />
|
||||
<template #footer v-if="!loading">
|
||||
<slot name="footer" />
|
||||
</template>
|
||||
</n8n-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { genericHelpers } from '@/components/mixins/genericHelpers';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
export default mixins(genericHelpers).extend({
|
||||
name: 'Card',
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.card {
|
||||
width: 240px !important;
|
||||
height: 140px;
|
||||
margin-right: var(--spacing-2xs);
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: var(--spacing-5xs);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px rgba(68,28,23,0.07);
|
||||
}
|
||||
|
||||
> div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-regular);
|
||||
font-weight: var(--font-weight-bold);
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<script lang="ts">
|
||||
import { PropType } from "vue";
|
||||
import { ITemplatesCollection } from "@/Interface";
|
||||
import Card from '@/components/WorkflowCard.vue';
|
||||
import Card from '@/components/CollectionWorkflowCard.vue';
|
||||
import CollectionCard from '@/components/CollectionCard.vue';
|
||||
import VueAgile from 'vue-agile';
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,9 @@ export default mixins(
|
|||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('users', ['currentUser']),
|
||||
currentUser (): IUser {
|
||||
return this.$store.getters['users/currentUser'];
|
||||
},
|
||||
credentialType(): ICredentialType {
|
||||
return this.$store.getters['credentials/getCredentialTypeByName'](this.data.type);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -47,15 +47,15 @@ import { showMessage } from "@/components/mixins/showMessage";
|
|||
import TagsDropdown from "@/components/TagsDropdown.vue";
|
||||
import Modal from "./Modal.vue";
|
||||
import { mapGetters } from "vuex";
|
||||
import {restApi} from "@/components/mixins/restApi";
|
||||
import {IWorkflowDb} from "@/Interface";
|
||||
|
||||
export default mixins(showMessage, workflowHelpers).extend({
|
||||
export default mixins(showMessage, workflowHelpers, restApi).extend({
|
||||
components: { TagsDropdown, Modal },
|
||||
name: "DuplicateWorkflow",
|
||||
props: ["modalName", "isActive"],
|
||||
props: ["modalName", "isActive", "data"],
|
||||
data() {
|
||||
const currentTagIds = this.$store.getters[
|
||||
"workflowTags"
|
||||
] as string[];
|
||||
const currentTagIds = this.data.tags;
|
||||
|
||||
return {
|
||||
name: '',
|
||||
|
|
@ -68,7 +68,7 @@ export default mixins(showMessage, workflowHelpers).extend({
|
|||
};
|
||||
},
|
||||
async mounted() {
|
||||
this.$data.name = await this.$store.dispatch('workflows/getDuplicateCurrentWorkflowName');
|
||||
this.name = await this.$store.dispatch('workflows/getDuplicateCurrentWorkflowName', this.data.name);
|
||||
this.$nextTick(() => this.focusOnNameInput());
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -113,21 +113,29 @@ export default mixins(showMessage, workflowHelpers).extend({
|
|||
return;
|
||||
}
|
||||
|
||||
const currentWorkflowId = this.$store.getters.workflowId;
|
||||
const currentWorkflowId = this.data.id;
|
||||
|
||||
this.$data.isSaving = true;
|
||||
this.isSaving = true;
|
||||
|
||||
const saved = await this.saveAsNewWorkflow({name, tags: this.currentTagIds, resetWebhookUrls: true, openInNewWindow: true, resetNodeIds: true});
|
||||
const { createdAt, updatedAt, ...workflow } = await this.restApi().getWorkflow(this.data.id);
|
||||
const saved = await this.saveAsNewWorkflow({
|
||||
name,
|
||||
data: workflow,
|
||||
tags: this.currentTagIds,
|
||||
resetWebhookUrls: true,
|
||||
openInNewWindow: true,
|
||||
resetNodeIds: true,
|
||||
});
|
||||
|
||||
if (saved) {
|
||||
this.closeDialog();
|
||||
this.$telemetry.track('User duplicated workflow', {
|
||||
old_workflow_id: currentWorkflowId,
|
||||
workflow_id: this.$store.getters.workflowId,
|
||||
workflow_id: this.data.id,
|
||||
});
|
||||
}
|
||||
|
||||
this.$data.isSaving = false;
|
||||
this.isSaving = false;
|
||||
},
|
||||
closeDialog(): void {
|
||||
this.modalBus.$emit("close");
|
||||
|
|
|
|||
|
|
@ -62,8 +62,7 @@
|
|||
<PushConnectionTracker class="actions">
|
||||
<template>
|
||||
<span class="activator">
|
||||
<span>{{ $locale.baseText('workflowDetails.active') + ':' }}</span>
|
||||
<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId"/>
|
||||
<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" />
|
||||
</span>
|
||||
<SaveButton
|
||||
type="secondary"
|
||||
|
|
@ -308,7 +307,14 @@ export default mixins(workflowHelpers, titleChange).extend({
|
|||
async onWorkflowMenuSelect(action: string): Promise<void> {
|
||||
switch (action) {
|
||||
case WORKFLOW_MENU_ACTIONS.DUPLICATE: {
|
||||
this.$store.dispatch('ui/openModal', DUPLICATE_MODAL_KEY);
|
||||
await this.$store.dispatch('ui/openModalWithData', {
|
||||
name: DUPLICATE_MODAL_KEY,
|
||||
data: {
|
||||
id: this.$store.getters.workflowId,
|
||||
name: this.$store.getters.workflowName,
|
||||
tags: this.$store.getters.workflowTags,
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
|
||||
|
|
@ -465,7 +471,6 @@ $--header-spacing: 20px;
|
|||
|
||||
.tags {
|
||||
flex: 1;
|
||||
padding-right: 20px;
|
||||
margin-right: $--header-spacing;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,6 @@ import {
|
|||
VERSIONS_MODAL_KEY,
|
||||
EXECUTIONS_MODAL_KEY,
|
||||
VIEWS,
|
||||
WORKFLOW_OPEN_MODAL_KEY,
|
||||
} from '@/constants';
|
||||
import { userHelpers } from './mixins/userHelpers';
|
||||
import { debounceHelper } from './mixins/debounce';
|
||||
|
|
@ -174,20 +173,7 @@ export default mixins(
|
|||
icon: 'network-wired',
|
||||
label: this.$locale.baseText('mainSidebar.workflows'),
|
||||
position: 'top',
|
||||
activateOnRouteNames: [ VIEWS.NEW_WORKFLOW, VIEWS.WORKFLOWS, VIEWS.WORKFLOW ],
|
||||
children: [
|
||||
{
|
||||
id: 'workflow',
|
||||
label: this.$locale.baseText('mainSidebar.new'),
|
||||
icon: 'file',
|
||||
activateOnRouteNames: [ VIEWS.NEW_WORKFLOW ],
|
||||
},
|
||||
{
|
||||
id: 'workflow-open',
|
||||
label: this.$locale.baseText('mainSidebar.open'),
|
||||
icon: 'folder-open',
|
||||
},
|
||||
],
|
||||
activateOnRouteNames: [ VIEWS.WORKFLOWS ],
|
||||
},
|
||||
{
|
||||
id: 'templates',
|
||||
|
|
@ -333,12 +319,10 @@ export default mixins(
|
|||
},
|
||||
async handleSelect (key: string) {
|
||||
switch (key) {
|
||||
case 'workflow': {
|
||||
await this.createNewWorkflow();
|
||||
break;
|
||||
case 'workflows': {
|
||||
if (this.$router.currentRoute.name !== VIEWS.WORKFLOWS) {
|
||||
this.$router.push({name: VIEWS.WORKFLOWS});
|
||||
}
|
||||
case 'workflow-open': {
|
||||
this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
|
||||
break;
|
||||
}
|
||||
case 'templates': {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
:open="isOpen(name)"
|
||||
:activeId="getActiveId(name)"
|
||||
:mode="getMode(name)"
|
||||
:data="getData(name)"
|
||||
></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -25,6 +26,9 @@ export default Vue.extend({
|
|||
isOpen(name: string) {
|
||||
return this.$store.getters['ui/isModalOpen'](name);
|
||||
},
|
||||
getData(name: string) {
|
||||
return this.$store.getters['ui/getModalData'](name);
|
||||
},
|
||||
getMode(name: string) {
|
||||
return this.$store.getters['ui/getModalMode'](name);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -26,8 +26,9 @@
|
|||
</ModalRoot>
|
||||
|
||||
<ModalRoot :name="DUPLICATE_MODAL_KEY">
|
||||
<template v-slot:default="{ modalName, active }">
|
||||
<template v-slot:default="{ modalName, active, data }">
|
||||
<DuplicateWorkflowDialog
|
||||
:data="data"
|
||||
:isActive="active"
|
||||
:modalName="modalName"
|
||||
/>
|
||||
|
|
@ -52,10 +53,6 @@
|
|||
</template>
|
||||
</ModalRoot>
|
||||
|
||||
<ModalRoot :name="WORKFLOW_OPEN_MODAL_KEY">
|
||||
<WorkflowOpen />
|
||||
</ModalRoot>
|
||||
|
||||
<ModalRoot :name="WORKFLOW_SETTINGS_MODAL_KEY">
|
||||
<WorkflowSettings />
|
||||
</ModalRoot>
|
||||
|
|
@ -130,7 +127,6 @@ import {
|
|||
VALUE_SURVEY_MODAL_KEY,
|
||||
VERSIONS_MODAL_KEY,
|
||||
WORKFLOW_ACTIVE_MODAL_KEY,
|
||||
WORKFLOW_OPEN_MODAL_KEY,
|
||||
WORKFLOW_SETTINGS_MODAL_KEY,
|
||||
IMPORT_CURL_MODAL_KEY,
|
||||
} from '@/constants';
|
||||
|
|
@ -151,7 +147,6 @@ import TagsManager from "./TagsManager/TagsManager.vue";
|
|||
import UpdatesPanel from "./UpdatesPanel.vue";
|
||||
import ValueSurvey from "./ValueSurvey.vue";
|
||||
import WorkflowSettings from "./WorkflowSettings.vue";
|
||||
import WorkflowOpen from "./WorkflowOpen.vue";
|
||||
import DeleteUserModal from "./DeleteUserModal.vue";
|
||||
import ExecutionsList from "./ExecutionsList.vue";
|
||||
import ActivationModal from "./ActivationModal.vue";
|
||||
|
|
@ -179,7 +174,6 @@ export default Vue.extend({
|
|||
UpdatesPanel,
|
||||
ValueSurvey,
|
||||
WorkflowSettings,
|
||||
WorkflowOpen,
|
||||
ImportCurlModal,
|
||||
},
|
||||
data: () => ({
|
||||
|
|
@ -197,7 +191,6 @@ export default Vue.extend({
|
|||
INVITE_USER_MODAL_KEY,
|
||||
TAGS_MANAGER_MODAL_KEY,
|
||||
VERSIONS_MODAL_KEY,
|
||||
WORKFLOW_OPEN_MODAL_KEY,
|
||||
WORKFLOW_SETTINGS_MODAL_KEY,
|
||||
VALUE_SURVEY_MODAL_KEY,
|
||||
EXECUTIONS_MODAL_KEY,
|
||||
|
|
|
|||
|
|
@ -245,6 +245,23 @@ $--max-input-height: 60px;
|
|||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.tags-container {
|
||||
.el-tag {
|
||||
padding: 1px var(--spacing-4xs);
|
||||
color: var(--color-text-dark);
|
||||
background-color: var(--color-background-base);
|
||||
border-radius: var(--border-radius-base);
|
||||
font-size: var(--font-size-2xs);
|
||||
border: 0;
|
||||
|
||||
.el-tag__close {
|
||||
max-height: 14px;
|
||||
max-width: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags-dropdown {
|
||||
$--item-font-size: 14px;
|
||||
$--item-line-height: 18px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
<template>
|
||||
<div class="workflow-activator">
|
||||
<div :class="$style.activeStatusText">
|
||||
<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>
|
||||
<n8n-tooltip :disabled="!disabled" placement="bottom">
|
||||
<div slot="content">{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div>
|
||||
<el-switch
|
||||
|
|
@ -113,10 +121,21 @@ export default mixins(
|
|||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.workflow-activator {
|
||||
<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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.workflow-activator {
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.could-not-be-started {
|
||||
|
|
@ -128,5 +147,4 @@ export default mixins(
|
|||
::v-deep .el-loading-spinner {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,66 +1,240 @@
|
|||
<template>
|
||||
<n8n-card
|
||||
:class="$style.card"
|
||||
v-on="$listeners"
|
||||
:class="$style.cardLink"
|
||||
@click="onClick"
|
||||
>
|
||||
<template #header v-if="!loading">
|
||||
<span
|
||||
v-text="title"
|
||||
:class="$style.title"
|
||||
/>
|
||||
<template #header>
|
||||
<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style.cardHeading">
|
||||
{{ data.name }}
|
||||
</n8n-heading>
|
||||
</template>
|
||||
<n8n-loading :loading="loading" :rows="3" variant="p" />
|
||||
<template #footer v-if="!loading">
|
||||
<slot name="footer" />
|
||||
<div :class="$style.cardDescription">
|
||||
<n8n-text color="text-light" size="small">
|
||||
<span v-show="data">{{$locale.baseText('workflows.item.updated')}} <time-ago :date="data.updatedAt" /> | </span>
|
||||
<span v-show="data" class="mr-2xs">{{$locale.baseText('workflows.item.created')}} {{ formattedCreatedAtDate }} </span>
|
||||
<span v-if="areTagsEnabled && data.tags && data.tags.length > 0" v-show="data">
|
||||
<n8n-tags
|
||||
:tags="data.tags"
|
||||
:truncateAt="3"
|
||||
truncate
|
||||
@click="onClickTag"
|
||||
/>
|
||||
</span>
|
||||
</n8n-text>
|
||||
</div>
|
||||
<template #append>
|
||||
<div :class="$style.cardActions">
|
||||
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-show="false">
|
||||
<n8n-badge
|
||||
v-if="credentialPermissions.isOwner"
|
||||
class="mr-xs"
|
||||
theme="tertiary"
|
||||
bold
|
||||
>
|
||||
{{$locale.baseText('workflows.item.owner')}}
|
||||
</n8n-badge>
|
||||
</enterprise-edition>
|
||||
|
||||
<workflow-activator
|
||||
class="mr-s"
|
||||
:workflow-active="data.active"
|
||||
:workflow-id="data.id"
|
||||
ref="activator"
|
||||
/>
|
||||
|
||||
<n8n-action-toggle
|
||||
:actions="actions"
|
||||
theme="dark"
|
||||
@action="onAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</n8n-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { genericHelpers } from '@/components/mixins/genericHelpers';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
import {IWorkflowDb, IUser, ITag} from "@/Interface";
|
||||
import {DUPLICATE_MODAL_KEY, EnterpriseEditionFeature, VIEWS} from '@/constants';
|
||||
import {showMessage} from "@/components/mixins/showMessage";
|
||||
import {getWorkflowPermissions, IPermissions} from "@/permissions";
|
||||
import dateformat from "dateformat";
|
||||
import { restApi } from '@/components/mixins/restApi';
|
||||
import WorkflowActivator from '@/components/WorkflowActivator.vue';
|
||||
import Vue from "vue";
|
||||
|
||||
export default mixins(genericHelpers).extend({
|
||||
name: 'Card',
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
export const WORKFLOW_LIST_ITEM_ACTIONS = {
|
||||
OPEN: 'open',
|
||||
DUPLICATE: 'duplicate',
|
||||
DELETE: 'delete',
|
||||
};
|
||||
|
||||
export default mixins(
|
||||
showMessage,
|
||||
restApi,
|
||||
).extend({
|
||||
data() {
|
||||
return {
|
||||
EnterpriseEditionFeature,
|
||||
};
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
components: {
|
||||
WorkflowActivator,
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: (): IWorkflowDb => ({
|
||||
id: '',
|
||||
createdAt: '',
|
||||
updatedAt: '',
|
||||
active: false,
|
||||
connections: {},
|
||||
nodes: [],
|
||||
name: '',
|
||||
sharedWith: [],
|
||||
ownedBy: {} as IUser,
|
||||
}),
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
currentUser (): IUser {
|
||||
return this.$store.getters['users/currentUser'];
|
||||
},
|
||||
areTagsEnabled(): boolean {
|
||||
return this.$store.getters['settings/areTagsEnabled'];
|
||||
},
|
||||
credentialPermissions(): IPermissions {
|
||||
return getWorkflowPermissions(this.currentUser, this.data, this.$store);
|
||||
},
|
||||
actions(): Array<{ label: string; value: string; }> {
|
||||
return [
|
||||
{
|
||||
label: this.$locale.baseText('workflows.item.open'),
|
||||
value: WORKFLOW_LIST_ITEM_ACTIONS.OPEN,
|
||||
},
|
||||
{
|
||||
label: this.$locale.baseText('workflows.item.duplicate'),
|
||||
value: WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE,
|
||||
},
|
||||
].concat(this.credentialPermissions.delete ? [{
|
||||
label: this.$locale.baseText('workflows.item.delete'),
|
||||
value: WORKFLOW_LIST_ITEM_ACTIONS.DELETE,
|
||||
}]: []);
|
||||
},
|
||||
formattedCreatedAtDate(): string {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return dateformat(this.data.createdAt, `d mmmm${this.data.createdAt.startsWith(currentYear) ? '' : ', yyyy'}`);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async onClick(event?: PointerEvent) {
|
||||
if (event) {
|
||||
if ((this.$refs.activator as Vue)?.$el.contains(event.target as HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.metaKey || event.ctrlKey) {
|
||||
const route = this.$router.resolve({name: VIEWS.WORKFLOW, params: { name: this.data.id }});
|
||||
window.open(route.href, '_blank');
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.$router.push({
|
||||
name: VIEWS.WORKFLOW,
|
||||
params: { name: this.data.id },
|
||||
});
|
||||
},
|
||||
onClickTag(tagId: string, event: PointerEvent) {
|
||||
event.stopPropagation();
|
||||
|
||||
this.$emit('click:tag', tagId, event);
|
||||
},
|
||||
async onAction(action: string) {
|
||||
if (action === WORKFLOW_LIST_ITEM_ACTIONS.OPEN) {
|
||||
await this.onClick();
|
||||
} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE) {
|
||||
await this.$store.dispatch('ui/openModalWithData', {
|
||||
name: DUPLICATE_MODAL_KEY,
|
||||
data: {
|
||||
id: this.data.id,
|
||||
name: this.data.name,
|
||||
tags: (this.data.tags || []).map((tag: ITag) => tag.id),
|
||||
},
|
||||
});
|
||||
} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DELETE) {
|
||||
const deleteConfirmed = await this.confirmMessage(
|
||||
this.$locale.baseText(
|
||||
'mainSidebar.confirmMessage.workflowDelete.message',
|
||||
{ interpolate: { workflowName: this.data.name } },
|
||||
),
|
||||
this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
|
||||
'warning',
|
||||
this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
|
||||
this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
|
||||
);
|
||||
|
||||
if (deleteConfirmed === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await this.restApi().deleteWorkflow(this.data.id);
|
||||
this.$store.commit('deleteWorkflow', this.data.id);
|
||||
} catch (error) {
|
||||
this.$showError(
|
||||
error,
|
||||
this.$locale.baseText('mainSidebar.showError.stopExecution.title'),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Reset tab title since workflow is deleted.
|
||||
this.$showMessage({
|
||||
title: this.$locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
|
||||
type: 'success',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.card {
|
||||
width: 240px !important;
|
||||
height: 140px;
|
||||
margin-right: var(--spacing-2xs);
|
||||
.cardLink {
|
||||
transition: box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: var(--spacing-5xs);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px rgba(68,28,23,0.07);
|
||||
}
|
||||
|
||||
> div {
|
||||
height: 100%;
|
||||
box-shadow: 0 2px 8px rgba(#441C17, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
.cardHeading {
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-regular);
|
||||
font-weight: var(--font-weight-bold);
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.cardDescription {
|
||||
min-height: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cardActions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,333 +0,0 @@
|
|||
<template>
|
||||
<Modal
|
||||
:name="WORKFLOW_OPEN_MODAL_KEY"
|
||||
width="80%"
|
||||
minWidth="620px"
|
||||
:classic="true"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<div class="workflows-header">
|
||||
<n8n-heading tag="h1" size="xlarge" class="title">
|
||||
{{ $locale.baseText('workflowOpen.openWorkflow') }}
|
||||
</n8n-heading>
|
||||
<div class="tags-filter" v-if="areTagsEnabled">
|
||||
<TagsDropdown
|
||||
:placeholder="$locale.baseText('workflowOpen.filterWorkflows')"
|
||||
:currentTagIds="filterTagIds"
|
||||
:createEnabled="false"
|
||||
@update="updateTagsFilter"
|
||||
@esc="onTagsFilterEsc"
|
||||
@blur="onTagsFilterBlur"
|
||||
/>
|
||||
</div>
|
||||
<div class="search-filter">
|
||||
<n8n-input :placeholder="$locale.baseText('workflowOpen.searchWorkflows')" ref="inputFieldFilter" v-model="filterText">
|
||||
<font-awesome-icon slot="prefix" icon="search"></font-awesome-icon>
|
||||
</n8n-input>
|
||||
</div>
|
||||
<div class="open-wf-button">
|
||||
<n8n-button
|
||||
:label="$locale.baseText('workflowOpen.newWFButton.label')"
|
||||
:title="$locale.baseText('workflowOpen.newWFButton.title')"
|
||||
size="large"
|
||||
icon="plus"
|
||||
type="primary"
|
||||
@click="onNewWFClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:content>
|
||||
<el-table class="search-table" :data="filteredWorkflows" stripe @cell-click="openWorkflow" :default-sort = "{prop: 'updatedAt', order: 'descending'}" v-loading="isDataLoading">
|
||||
<el-table-column property="name" :label="$locale.baseText('workflowOpen.name')" class-name="clickable" sortable>
|
||||
<template slot-scope="scope">
|
||||
<div class="ph-no-capture" :key="scope.row.id">
|
||||
<span class="name">{{scope.row.name}}</span>
|
||||
<TagsContainer v-if="areTagsEnabled" class="hidden-sm-and-down" :tagIds="getIds(scope.row.tags)" :limit="3" @click="onTagClick" :clickable="true" :hoverable="true" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="createdAt" :label="$locale.baseText('workflowOpen.created')" class-name="clickable" width="155" sortable></el-table-column>
|
||||
<el-table-column property="updatedAt" :label="$locale.baseText('workflowOpen.updated')" class-name="clickable" width="155" sortable></el-table-column>
|
||||
<el-table-column :label="$locale.baseText('workflowOpen.active')" width="75">
|
||||
<template slot-scope="scope">
|
||||
<workflow-activator :workflow-active="scope.row.active" :workflow-id="scope.row.id" @workflowActiveChanged="workflowActiveChanged" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
import { ITag, IWorkflowShortResponse } from '@/Interface';
|
||||
|
||||
import { restApi } from '@/components/mixins/restApi';
|
||||
import { genericHelpers } from '@/components/mixins/genericHelpers';
|
||||
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
|
||||
import { showMessage } from '@/components/mixins/showMessage';
|
||||
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import TagsContainer from '@/components/TagsContainer.vue';
|
||||
import TagsDropdown from '@/components/TagsDropdown.vue';
|
||||
import WorkflowActivator from '@/components/WorkflowActivator.vue';
|
||||
import { convertToDisplayDate } from './helpers';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, VIEWS, WORKFLOW_OPEN_MODAL_KEY } from '../constants';
|
||||
import { titleChange } from './mixins/titleChange';
|
||||
|
||||
export default mixins(
|
||||
genericHelpers,
|
||||
restApi,
|
||||
showMessage,
|
||||
workflowHelpers,
|
||||
titleChange,
|
||||
).extend({
|
||||
name: 'WorkflowOpen',
|
||||
components: {
|
||||
WorkflowActivator,
|
||||
TagsContainer,
|
||||
TagsDropdown,
|
||||
Modal,
|
||||
},
|
||||
props: ['modalName'],
|
||||
data () {
|
||||
return {
|
||||
filterText: '',
|
||||
isDataLoading: false,
|
||||
workflows: [] as IWorkflowShortResponse[],
|
||||
filterTagIds: [] as string[],
|
||||
prevFilterTagIds: [] as string[],
|
||||
WORKFLOW_OPEN_MODAL_KEY,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('settings', ['areTagsEnabled']),
|
||||
filteredWorkflows (): IWorkflowShortResponse[] {
|
||||
return this.workflows
|
||||
.filter((workflow: IWorkflowShortResponse) => {
|
||||
if (this.filterText && !workflow.name.toLowerCase().includes(this.filterText.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.filterTagIds.length === 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!workflow.tags || workflow.tags.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return this.filterTagIds.reduce((accu: boolean, id: string) => accu && !!workflow.tags.find(tag => tag.id === id), true);
|
||||
});
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
this.filterText = '';
|
||||
this.filterTagIds = [];
|
||||
|
||||
this.isDataLoading = true;
|
||||
await this.loadActiveWorkflows();
|
||||
await this.loadWorkflows();
|
||||
this.isDataLoading = false;
|
||||
|
||||
Vue.nextTick(() => {
|
||||
// Make sure that users can directly type in the filter
|
||||
(this.$refs.inputFieldFilter as HTMLInputElement).focus();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getIds(tags: ITag[] | undefined) {
|
||||
return (tags || []).map((tag) => tag.id);
|
||||
},
|
||||
updateTagsFilter(tags: string[]) {
|
||||
this.filterTagIds = tags;
|
||||
},
|
||||
onTagClick(tagId: string) {
|
||||
if (tagId !== 'count' && !this.filterTagIds.includes(tagId)) {
|
||||
this.filterTagIds.push(tagId);
|
||||
}
|
||||
},
|
||||
async openWorkflow (data: IWorkflowShortResponse, column: any, cell: any, e: PointerEvent) { // tslint:disable-line:no-any
|
||||
if (column.label !== 'Active') {
|
||||
|
||||
const currentWorkflowId = this.$store.getters.workflowId;
|
||||
|
||||
if (e.metaKey || e.ctrlKey) {
|
||||
const route = this.$router.resolve({name: VIEWS.WORKFLOW, params: {name: data.id}});
|
||||
window.open(route.href, '_blank');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.id === currentWorkflowId) {
|
||||
this.$showMessage({
|
||||
title: this.$locale.baseText('workflowOpen.showMessage.title'),
|
||||
message: this.$locale.baseText('workflowOpen.showMessage.message'),
|
||||
type: 'error',
|
||||
duration: 1500,
|
||||
});
|
||||
// Do nothing if current workflow is the one user chose to open
|
||||
return;
|
||||
}
|
||||
|
||||
const result = this.$store.getters.getStateIsDirty;
|
||||
if(result) {
|
||||
const confirmModal = await this.confirmModal(
|
||||
this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
|
||||
this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
|
||||
'warning',
|
||||
this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
|
||||
this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
|
||||
true,
|
||||
);
|
||||
|
||||
if (confirmModal === MODAL_CONFIRMED) {
|
||||
const saved = await this.saveCurrentWorkflow({}, false);
|
||||
if (saved) this.$store.dispatch('settings/fetchPromptsData');
|
||||
|
||||
this.$router.push({
|
||||
name: VIEWS.WORKFLOW,
|
||||
params: { name: data.id },
|
||||
});
|
||||
} else if (confirmModal === MODAL_CANCEL) {
|
||||
this.$store.commit('setStateDirty', false);
|
||||
|
||||
this.$router.push({
|
||||
name: VIEWS.WORKFLOW,
|
||||
params: { name: data.id },
|
||||
});
|
||||
} else if (confirmModal === MODAL_CLOSE) {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: VIEWS.WORKFLOW,
|
||||
params: { name: data.id },
|
||||
});
|
||||
}
|
||||
this.$store.commit('ui/closeAllModals');
|
||||
}
|
||||
},
|
||||
async loadWorkflows () {
|
||||
try {
|
||||
this.workflows = await this.restApi().getWorkflows();
|
||||
this.workflows.forEach((workflowData: IWorkflowShortResponse) => {
|
||||
workflowData.createdAt = convertToDisplayDate(workflowData.createdAt as number);
|
||||
workflowData.updatedAt = convertToDisplayDate(workflowData.updatedAt as number);
|
||||
});
|
||||
} catch (error) {
|
||||
this.$showError(
|
||||
error,
|
||||
this.$locale.baseText('workflowOpen.showError.title'),
|
||||
);
|
||||
}
|
||||
},
|
||||
async loadActiveWorkflows () {
|
||||
try {
|
||||
const activeWorkflows = await this.restApi().getActiveWorkflows();
|
||||
this.$store.commit('setActiveWorkflows', activeWorkflows);
|
||||
} catch (error) {
|
||||
this.$showError(
|
||||
error,
|
||||
this.$locale.baseText('workflowOpen.couldNotLoadActiveWorkflows'),
|
||||
);
|
||||
}
|
||||
},
|
||||
async onNewWFClick () {
|
||||
const result = this.$store.getters.getStateIsDirty;
|
||||
if(result) {
|
||||
const confirmModal = await this.confirmModal(
|
||||
this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
|
||||
this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
|
||||
'warning',
|
||||
this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
|
||||
this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
|
||||
true,
|
||||
);
|
||||
if (confirmModal === MODAL_CONFIRMED) {
|
||||
const saved = await this.saveCurrentWorkflow({}, false);
|
||||
if (saved) this.$store.dispatch('settings/fetchPromptsData');
|
||||
if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
|
||||
this.$root.$emit('newWorkflow');
|
||||
} else {
|
||||
this.$router.push({ name: VIEWS.NEW_WORKFLOW });
|
||||
}
|
||||
this.$showMessage({
|
||||
title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
|
||||
type: 'success',
|
||||
});
|
||||
} else if (confirmModal === MODAL_CANCEL) {
|
||||
this.$store.commit('setStateDirty', false);
|
||||
if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
|
||||
this.$root.$emit('newWorkflow');
|
||||
} else {
|
||||
this.$router.push({ name: VIEWS.NEW_WORKFLOW });
|
||||
}
|
||||
this.$showMessage({
|
||||
title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
|
||||
type: 'success',
|
||||
});
|
||||
} else if (confirmModal === MODAL_CLOSE) {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
|
||||
this.$router.push({ name: VIEWS.NEW_WORKFLOW });
|
||||
}
|
||||
this.$showMessage({
|
||||
title: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.title'),
|
||||
type: 'success',
|
||||
});
|
||||
}
|
||||
this.$titleReset();
|
||||
this.$store.commit('ui/closeModal', WORKFLOW_OPEN_MODAL_KEY);
|
||||
},
|
||||
workflowActiveChanged (data: { id: string, active: boolean }) {
|
||||
for (const workflow of this.workflows) {
|
||||
if (workflow.id === data.id) {
|
||||
workflow.active = data.active;
|
||||
}
|
||||
}
|
||||
},
|
||||
onTagsFilterBlur() {
|
||||
this.prevFilterTagIds = this.filterTagIds;
|
||||
},
|
||||
onTagsFilterEsc() {
|
||||
// revert last applied tags
|
||||
this.filterTagIds = this.prevFilterTagIds;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.workflows-header {
|
||||
display: flex;
|
||||
|
||||
> *:first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.search-filter {
|
||||
margin-left: 12px;
|
||||
margin-right: 24px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.tags-filter {
|
||||
flex-grow: 1;
|
||||
max-width: 270px;
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-table .name {
|
||||
font-weight: 400;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<n8n-popover
|
||||
trigger="click"
|
||||
>
|
||||
<template slot="reference">
|
||||
<n8n-button
|
||||
icon="filter"
|
||||
type="tertiary"
|
||||
size="medium"
|
||||
:active="hasFilters"
|
||||
:class="[$style['filter-button'], 'ml-2xs']"
|
||||
>
|
||||
<n8n-badge
|
||||
v-show="filtersLength > 0"
|
||||
theme="primary"
|
||||
class="mr-4xs"
|
||||
>
|
||||
{{ filtersLength }}
|
||||
</n8n-badge>
|
||||
{{ $locale.baseText('forms.resourceFiltersDropdown.filters') }}
|
||||
</n8n-button>
|
||||
</template>
|
||||
<div :class="$style['filters-dropdown']">
|
||||
<slot :filters="value" :setKeyValue="setKeyValue" />
|
||||
<enterprise-edition class="mb-s" :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
|
||||
<n8n-input-label
|
||||
:label="$locale.baseText('forms.resourceFiltersDropdown.ownedBy')"
|
||||
:bold="false"
|
||||
size="small"
|
||||
color="text-base"
|
||||
class="mb-3xs"
|
||||
/>
|
||||
<n8n-user-select
|
||||
:users="ownedByUsers"
|
||||
:currentUserId="currentUser.id"
|
||||
:value="value.ownedBy"
|
||||
size="small"
|
||||
@input="setKeyValue('ownedBy', $event)"
|
||||
/>
|
||||
</enterprise-edition>
|
||||
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
|
||||
<n8n-input-label
|
||||
:label="$locale.baseText('forms.resourceFiltersDropdown.sharedWith')"
|
||||
:bold="false"
|
||||
size="small"
|
||||
color="text-base"
|
||||
class="mb-3xs"
|
||||
/>
|
||||
<n8n-user-select
|
||||
:users="sharedWithUsers"
|
||||
:currentUserId="currentUser.id"
|
||||
:value="value.sharedWith"
|
||||
size="small"
|
||||
@input="setKeyValue('sharedWith', $event)"
|
||||
/>
|
||||
</enterprise-edition>
|
||||
<div :class="[$style['filters-dropdown-footer'], 'mt-s']" v-if="hasFilters">
|
||||
<n8n-link @click="resetFilters">
|
||||
{{ $locale.baseText('forms.resourceFiltersDropdown.reset') }}
|
||||
</n8n-link>
|
||||
</div>
|
||||
</div>
|
||||
</n8n-popover>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue, { PropType } from 'vue';
|
||||
import {EnterpriseEditionFeature} from "@/constants";
|
||||
import {IResource} from "@/components/layouts/ResourcesListLayout.vue";
|
||||
import {IUser} from "@/Interface";
|
||||
|
||||
export type IResourceFiltersType = Record<string, boolean | string | string[]>;
|
||||
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
value: {
|
||||
type: Object as PropType<IResourceFiltersType>,
|
||||
default: () => ({}),
|
||||
},
|
||||
keys: {
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => [],
|
||||
},
|
||||
shareable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
reset: {
|
||||
type: Function as PropType<() => void>,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
EnterpriseEditionFeature,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentUser(): IUser {
|
||||
return this.$store.getters['users/currentUser'];
|
||||
},
|
||||
allUsers(): IUser[] {
|
||||
return this.$store.getters['users/allUsers'];
|
||||
},
|
||||
ownedByUsers(): IUser[] {
|
||||
return this.allUsers.map((user) => user.id === this.value.sharedWith ? { ...user, disabled: true } : user);
|
||||
},
|
||||
sharedWithUsers(): IUser[] {
|
||||
return this.allUsers.map((user) => user.id === this.value.ownedBy ? { ...user, disabled: true } : user);
|
||||
},
|
||||
filtersLength(): number {
|
||||
let length = 0;
|
||||
|
||||
(this.keys as string[]).forEach((key) => {
|
||||
if (key === 'search') {
|
||||
return;
|
||||
}
|
||||
|
||||
length += (Array.isArray(this.value[key]) ? this.value[key].length > 0 : this.value[key] !== '') ? 1 : 0;
|
||||
});
|
||||
|
||||
return length;
|
||||
},
|
||||
hasFilters(): boolean {
|
||||
return this.filtersLength > 0;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setKeyValue(key: string, value: unknown) {
|
||||
const filters = {
|
||||
...this.value,
|
||||
[key]: value,
|
||||
};
|
||||
|
||||
this.$emit('input', filters);
|
||||
},
|
||||
resetFilters() {
|
||||
if (this.reset) {
|
||||
this.reset();
|
||||
} else {
|
||||
const filters = { ...this.value };
|
||||
|
||||
(this.keys as string[]).forEach((key) => {
|
||||
filters[key] = Array.isArray(this.value[key]) ? [] : '';
|
||||
});
|
||||
|
||||
this.$emit('input', filters);
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
filtersLength(value: number) {
|
||||
this.$emit('update:filtersLength', value);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.filter-button {
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filters-dropdown {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.filters-dropdown-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<n8n-menu
|
||||
:items="menuItems"
|
||||
mode="tabs"
|
||||
:value="value ? 'owner' : 'all'"
|
||||
@input="onSelectOwner"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { IMenuItem } from 'n8n-design-system';
|
||||
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
myResourcesLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
allResourcesLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
menuItems(): IMenuItem[] {
|
||||
return [
|
||||
{
|
||||
id: 'owner',
|
||||
icon: 'user',
|
||||
label: this.myResourcesLabel,
|
||||
position: 'top',
|
||||
},
|
||||
{
|
||||
id: 'all',
|
||||
icon: 'globe-americas',
|
||||
label: this.allResourcesLabel,
|
||||
position: 'top',
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSelectOwner(type: string) {
|
||||
this.$emit('input', type === 'owner');
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-container {
|
||||
--menu-padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,408 @@
|
|||
<template>
|
||||
<page-view-layout>
|
||||
<template #aside v-if="showAside">
|
||||
<div :class="[$style['heading-wrapper'], 'mb-xs']">
|
||||
<n8n-heading size="2xlarge">
|
||||
{{ $locale.baseText(`${resourceKey}.heading`) }}
|
||||
</n8n-heading>
|
||||
</div>
|
||||
|
||||
<div class="mt-xs mb-l">
|
||||
<n8n-button size="large" block @click="$emit('click:add', $event)">
|
||||
{{ $locale.baseText(`${resourceKey}.add`) }}
|
||||
</n8n-button>
|
||||
</div>
|
||||
|
||||
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
|
||||
<resource-ownership-select
|
||||
v-model="isOwnerSubview"
|
||||
:my-resources-label="$locale.baseText(`${resourceKey}.menu.my`)"
|
||||
:all-resources-label="$locale.baseText(`${resourceKey}.menu.all`)"
|
||||
/>
|
||||
</enterprise-edition>
|
||||
</template>
|
||||
|
||||
<div v-if="loading">
|
||||
<n8n-loading :class="[$style['header-loading'], 'mb-l']" variant="custom"/>
|
||||
<n8n-loading :class="[$style['card-loading'], 'mb-2xs']" variant="custom"/>
|
||||
<n8n-loading :class="$style['card-loading']" variant="custom"/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="ph-no-capture" v-if="resources.length === 0">
|
||||
<slot name="empty">
|
||||
<n8n-action-box
|
||||
emoji="👋"
|
||||
:heading="$locale.baseText(currentUser.firstName ? `${resourceKey}.empty.heading` : `${resourceKey}.empty.heading.userNotSetup`, {
|
||||
interpolate: { name: currentUser.firstName }
|
||||
})"
|
||||
:description="$locale.baseText(`${resourceKey}.empty.description`)"
|
||||
:buttonText="$locale.baseText(`${resourceKey}.empty.button`)"
|
||||
buttonType="secondary"
|
||||
@click="$emit('click:add', $event)"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
<page-view-layout-list v-else>
|
||||
<template #header>
|
||||
<div class="mb-xs">
|
||||
<div :class="$style['filters-row']">
|
||||
<n8n-input
|
||||
:class="[$style['search'], 'mr-2xs']"
|
||||
:placeholder="$locale.baseText(`${resourceKey}.search.placeholder`)"
|
||||
v-model="filters.search"
|
||||
size="medium"
|
||||
clearable
|
||||
ref="search"
|
||||
>
|
||||
<n8n-icon icon="search" slot="prefix"/>
|
||||
</n8n-input>
|
||||
<div :class="$style['sort-and-filter']">
|
||||
<n8n-select
|
||||
v-model="sortBy"
|
||||
size="medium"
|
||||
>
|
||||
<n8n-option value="lastUpdated" :label="$locale.baseText(`${resourceKey}.sort.lastUpdated`)"/>
|
||||
<n8n-option value="lastCreated" :label="$locale.baseText(`${resourceKey}.sort.lastCreated`)"/>
|
||||
<n8n-option value="nameAsc" :label="$locale.baseText(`${resourceKey}.sort.nameAsc`)"/>
|
||||
<n8n-option value="nameDesc" :label="$locale.baseText(`${resourceKey}.sort.nameDesc`)"/>
|
||||
</n8n-select>
|
||||
<resource-filters-dropdown
|
||||
:keys="filterKeys"
|
||||
:reset="resetFilters"
|
||||
:value="filters"
|
||||
:shareable="shareable"
|
||||
@input="$emit('update:filters', $event)"
|
||||
@update:filtersLength="onUpdateFiltersLength"
|
||||
>
|
||||
<template v-slot="resourceFiltersSlotProps">
|
||||
<slot name="filters" v-bind="resourceFiltersSlotProps" />
|
||||
</template>
|
||||
</resource-filters-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-show="hasFilters" class="mt-xs">
|
||||
<n8n-info-tip :bold="false">
|
||||
{{ $locale.baseText(`${resourceKey}.filters.active`) }}
|
||||
<n8n-link @click="resetFilters" size="small">
|
||||
{{ $locale.baseText(`${resourceKey}.filters.active.reset`) }}
|
||||
</n8n-link>
|
||||
</n8n-info-tip>
|
||||
</div>
|
||||
|
||||
<div class="mt-xs mb-l">
|
||||
<ul :class="[$style.list, 'list-style-none']" v-if="filteredAndSortedSubviewResources.length > 0">
|
||||
<li v-for="resource in filteredAndSortedSubviewResources" :key="resource.id" class="mb-2xs">
|
||||
<slot :data="resource" />
|
||||
</li>
|
||||
</ul>
|
||||
<n8n-text color="text-base" size="medium" v-else>
|
||||
{{ $locale.baseText(`${resourceKey}.noResults`) }}
|
||||
<template v-if="!hasFilters && isOwnerSubview && resourcesNotOwned.length > 0">
|
||||
<span v-if="!filters.search">
|
||||
({{ $locale.baseText(`${resourceKey}.noResults.switchToShared.preamble`) }}
|
||||
<n8n-link @click="setOwnerSubview(false)">{{$locale.baseText(`${resourceKey}.noResults.switchToShared.link`) }}</n8n-link>)
|
||||
</span>
|
||||
<span v-else>
|
||||
({{ $locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.preamble`) }}
|
||||
<n8n-link @click="setOwnerSubview(false)">{{$locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.link`) }}</n8n-link>)
|
||||
</span>
|
||||
</template>
|
||||
</n8n-text>
|
||||
</div>
|
||||
</page-view-layout-list>
|
||||
</template>
|
||||
</page-view-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {showMessage} from '@/components/mixins/showMessage';
|
||||
import {IUser} from '@/Interface';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
import PageViewLayout from "@/components/layouts/PageViewLayout.vue";
|
||||
import PageViewLayoutList from "@/components/layouts/PageViewLayoutList.vue";
|
||||
import {EnterpriseEditionFeature} from "@/constants";
|
||||
import TemplateCard from "@/components/TemplateCard.vue";
|
||||
import Vue, {PropType} from "vue";
|
||||
import {debounceHelper} from '@/components/mixins/debounce';
|
||||
import ResourceOwnershipSelect from "@/components/forms/ResourceOwnershipSelect.ee.vue";
|
||||
import ResourceFiltersDropdown from "@/components/forms/ResourceFiltersDropdown.vue";
|
||||
|
||||
export interface IResource {
|
||||
id: string;
|
||||
name: string;
|
||||
updatedAt: string;
|
||||
createdAt: string;
|
||||
ownedBy?: Partial<IUser>;
|
||||
sharedWith?: Array<Partial<IUser>>;
|
||||
}
|
||||
|
||||
interface IFilters {
|
||||
search: string;
|
||||
ownedBy: string;
|
||||
sharedWith: string;
|
||||
|
||||
[key: string]: boolean | string | string[];
|
||||
}
|
||||
|
||||
type IResourceKeyType = 'credentials' | 'workflows';
|
||||
|
||||
const filterKeys = ['ownedBy', 'sharedWith'];
|
||||
|
||||
export default mixins(
|
||||
showMessage,
|
||||
debounceHelper,
|
||||
).extend({
|
||||
name: 'resources-list-layout',
|
||||
components: {
|
||||
TemplateCard,
|
||||
PageViewLayout,
|
||||
PageViewLayoutList,
|
||||
ResourceOwnershipSelect,
|
||||
ResourceFiltersDropdown,
|
||||
},
|
||||
props: {
|
||||
resourceKey: {
|
||||
type: String,
|
||||
default: '' as IResourceKeyType,
|
||||
},
|
||||
resources: {
|
||||
type: Array,
|
||||
default: (): IResource[] => [],
|
||||
},
|
||||
initialize: {
|
||||
type: Function as PropType<() => Promise<void>>,
|
||||
default: () => () => Promise.resolve(),
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: (): IFilters => ({ search: '', ownedBy: '', sharedWith: '' }),
|
||||
},
|
||||
additionalFiltersHandler: {
|
||||
type: Function,
|
||||
},
|
||||
showAside: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
shareable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
isOwnerSubview: true,
|
||||
sortBy: 'lastUpdated',
|
||||
hasFilters: false,
|
||||
resettingFilters: false,
|
||||
EnterpriseEditionFeature,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentUser(): IUser {
|
||||
return this.$store.getters['users/currentUser'];
|
||||
},
|
||||
allUsers(): IUser[] {
|
||||
return this.$store.getters['users/allUsers'];
|
||||
},
|
||||
subviewResources(): IResource[] {
|
||||
if (!this.shareable) {
|
||||
return this.resources as IResource[];
|
||||
}
|
||||
|
||||
return (this.resources as IResource[]).filter((resource) => {
|
||||
if (this.isOwnerSubview && this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
|
||||
return !!(resource.ownedBy && resource.ownedBy.id === this.currentUser.id);
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
},
|
||||
filterKeys(): string[] {
|
||||
return Object.keys(this.filters);
|
||||
},
|
||||
filteredAndSortedSubviewResources(): IResource[] {
|
||||
const filtered: IResource[] = this.subviewResources.filter((resource: IResource) => {
|
||||
let matches = true;
|
||||
|
||||
if (this.filters.ownedBy) {
|
||||
matches = matches && !!(resource.ownedBy && resource.ownedBy.id === this.filters.ownedBy);
|
||||
}
|
||||
|
||||
if (this.filters.sharedWith) {
|
||||
matches = matches && !!(resource.sharedWith && resource.sharedWith.find((sharee) => sharee.id === this.filters.sharedWith));
|
||||
}
|
||||
|
||||
if (this.filters.search) {
|
||||
const searchString = this.filters.search.toLowerCase();
|
||||
|
||||
matches = matches && resource.name.toLowerCase().includes(searchString);
|
||||
}
|
||||
|
||||
if (this.additionalFiltersHandler) {
|
||||
matches = this.additionalFiltersHandler(resource, this.filters, matches);
|
||||
}
|
||||
|
||||
return matches;
|
||||
});
|
||||
|
||||
return filtered.sort((a, b) => {
|
||||
switch (this.sortBy) {
|
||||
case 'lastUpdated':
|
||||
return (new Date(b.updatedAt)).valueOf() - (new Date(a.updatedAt)).valueOf();
|
||||
case 'lastCreated':
|
||||
return (new Date(b.createdAt)).valueOf() - (new Date(a.createdAt)).valueOf();
|
||||
case 'nameAsc':
|
||||
return a.name.trim().localeCompare(b.name.trim());
|
||||
case 'nameDesc':
|
||||
return b.name.localeCompare(a.name);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
resourcesNotOwned(): IResource[] {
|
||||
return (this.resources as IResource[]).filter((resource) => {
|
||||
return resource.ownedBy && resource.ownedBy.id !== this.currentUser.id;
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async onMounted() {
|
||||
await this.initialize();
|
||||
|
||||
this.loading = false;
|
||||
this.$nextTick(this.focusSearchInput);
|
||||
},
|
||||
resetFilters() {
|
||||
Object.keys(this.filters).forEach((key) => {
|
||||
this.filters[key] = Array.isArray(this.filters[key]) ? [] : '';
|
||||
});
|
||||
|
||||
this.resettingFilters = true;
|
||||
this.sendFiltersTelemetry('reset');
|
||||
},
|
||||
focusSearchInput() {
|
||||
if (this.$refs.search) {
|
||||
(this.$refs.search as Vue & { focus: () => void }).focus();
|
||||
}
|
||||
},
|
||||
setOwnerSubview(active: boolean) {
|
||||
this.isOwnerSubview = active;
|
||||
},
|
||||
getTelemetrySubview(): string {
|
||||
return this.$locale.baseText(`${this.resourceKey as IResourceKeyType}.menu.${this.isOwnerSubview ? 'my' : 'all'}`);
|
||||
},
|
||||
sendSubviewTelemetry() {
|
||||
this.$telemetry.track(`User changed ${this.resourceKey} sub view`, {
|
||||
sub_view: this.getTelemetrySubview(),
|
||||
});
|
||||
},
|
||||
sendSortingTelemetry() {
|
||||
this.$telemetry.track(`User changed sorting in ${this.resourceKey} list`, {
|
||||
sub_view: this.getTelemetrySubview(),
|
||||
sorting: this.sortBy,
|
||||
});
|
||||
},
|
||||
sendFiltersTelemetry(source: string) {
|
||||
// Prevent sending multiple telemetry events when resetting filters
|
||||
// Timeout is required to wait for search debounce to be over
|
||||
if (this.resettingFilters) {
|
||||
if (source !== 'reset') {
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(() => this.resettingFilters = false, 1500);
|
||||
}
|
||||
|
||||
const filters = this.filters as Record<string, string[] | string | boolean>;
|
||||
const filtersSet: string[] = [];
|
||||
const filterValues: Array<string[] | string | boolean | null> = [];
|
||||
|
||||
Object.keys(filters).forEach((key) => {
|
||||
if (filters[key]) {
|
||||
filtersSet.push(key);
|
||||
filterValues.push(key === 'search' ? null : filters[key]);
|
||||
}
|
||||
});
|
||||
|
||||
this.$telemetry.track(`User set filters in ${this.resourceKey} list`, {
|
||||
filters_set: filtersSet,
|
||||
filter_values: filterValues,
|
||||
sub_view: this.getTelemetrySubview(),
|
||||
[`${this.resourceKey}_total_in_view`]: this.subviewResources.length,
|
||||
[`${this.resourceKey}_after_filtering`]: this.filteredAndSortedSubviewResources.length,
|
||||
});
|
||||
},
|
||||
onUpdateFiltersLength(length: number) {
|
||||
this.hasFilters = length > 0;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.onMounted();
|
||||
},
|
||||
watch: {
|
||||
isOwnerSubview() {
|
||||
this.sendSubviewTelemetry();
|
||||
},
|
||||
'filters.ownedBy'(value) {
|
||||
if (value) {
|
||||
this.setOwnerSubview(false);
|
||||
}
|
||||
this.sendFiltersTelemetry('ownedBy');
|
||||
},
|
||||
'filters.sharedWith'() {
|
||||
this.sendFiltersTelemetry('sharedWith');
|
||||
},
|
||||
'filters.search'() {
|
||||
this.callDebounced('sendFiltersTelemetry', {debounceTime: 1000, trailing: true}, 'search');
|
||||
},
|
||||
sortBy() {
|
||||
this.sendSortingTelemetry();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.heading-wrapper {
|
||||
padding-bottom: 1px; // Match input height
|
||||
}
|
||||
|
||||
.filters-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search {
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sort-and-filter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-loading {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.card-loading {
|
||||
height: 69px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -35,7 +35,6 @@ export const workflowActivate = mixins(
|
|||
}
|
||||
currWorkflowId = this.$store.getters.workflowId as string;
|
||||
}
|
||||
|
||||
const isCurrentWorkflow = currWorkflowId === this.$store.getters['workflowId'];
|
||||
|
||||
const activeWorkflows = this.$store.getters.getActiveWorkflows;
|
||||
|
|
|
|||
|
|
@ -730,11 +730,11 @@ export const workflowHelpers = mixins(
|
|||
}
|
||||
},
|
||||
|
||||
async saveAsNewWorkflow ({name, tags, resetWebhookUrls, resetNodeIds, openInNewWindow}: {name?: string, tags?: string[], resetWebhookUrls?: boolean, openInNewWindow?: boolean, resetNodeIds?: boolean} = {}, redirect = true): Promise<boolean> {
|
||||
async saveAsNewWorkflow ({ name, tags, resetWebhookUrls, resetNodeIds, openInNewWindow, data }: {name?: string, tags?: string[], resetWebhookUrls?: boolean, openInNewWindow?: boolean, resetNodeIds?: boolean, data?: IWorkflowDataUpdate} = {}, redirect = true): Promise<boolean> {
|
||||
try {
|
||||
this.$store.commit('addActiveAction', 'workflowSaving');
|
||||
|
||||
const workflowDataRequest: IWorkflowDataUpdate = await this.getWorkflowDataToSave();
|
||||
const workflowDataRequest: IWorkflowDataUpdate = data || await this.getWorkflowDataToSave();
|
||||
// make sure that the new ones are not active
|
||||
workflowDataRequest.active = false;
|
||||
const changedNodes = {} as IDataObject;
|
||||
|
|
@ -765,6 +765,9 @@ export const workflowHelpers = mixins(
|
|||
workflowDataRequest.tags = tags;
|
||||
}
|
||||
const workflowData = await this.restApi().createNewWorkflow(workflowDataRequest);
|
||||
|
||||
this.$store.commit('addWorkflow', workflowData);
|
||||
|
||||
if (openInNewWindow) {
|
||||
const routeData = this.$router.resolve({name: VIEWS.WORKFLOW, params: {name: workflowData.id}});
|
||||
window.open(routeData.href, '_blank');
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ export const DELETE_USER_MODAL_KEY = 'deleteUser';
|
|||
export const INVITE_USER_MODAL_KEY = 'inviteUser';
|
||||
export const DUPLICATE_MODAL_KEY = 'duplicate';
|
||||
export const TAGS_MANAGER_MODAL_KEY = 'tagsManager';
|
||||
export const WORKFLOW_OPEN_MODAL_KEY = 'workflowOpen';
|
||||
export const VERSIONS_MODAL_KEY = 'versions';
|
||||
export const WORKFLOW_SETTINGS_MODAL_KEY = 'settings';
|
||||
export const PERSONALIZATION_MODAL_KEY = 'personalization';
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ import {
|
|||
VALUE_SURVEY_MODAL_KEY,
|
||||
VERSIONS_MODAL_KEY,
|
||||
WORKFLOW_ACTIVE_MODAL_KEY,
|
||||
WORKFLOW_OPEN_MODAL_KEY,
|
||||
WORKFLOW_SETTINGS_MODAL_KEY,
|
||||
VIEWS,
|
||||
ONBOARDING_CALL_SIGNUP_MODAL_KEY,
|
||||
|
|
@ -77,9 +76,6 @@ const module: Module<IUiState, IRootState> = {
|
|||
[TAGS_MANAGER_MODAL_KEY]: {
|
||||
open: false,
|
||||
},
|
||||
[WORKFLOW_OPEN_MODAL_KEY]: {
|
||||
open: false,
|
||||
},
|
||||
[VALUE_SURVEY_MODAL_KEY]: {
|
||||
open: false,
|
||||
},
|
||||
|
|
@ -213,6 +209,9 @@ const module: Module<IUiState, IRootState> = {
|
|||
getModalMode: (state: IUiState) => {
|
||||
return (name: string) => state.modals[name].mode;
|
||||
},
|
||||
getModalData: (state: IUiState) => {
|
||||
return (name: string) => state.modals[name].data;
|
||||
},
|
||||
sidebarMenuCollapsed: (state: IUiState): boolean => state.sidebarMenuCollapsed,
|
||||
ndvSessionId: (state: IUiState): string => state.ndv.sessionId,
|
||||
getPanelDisplayMode: (state: IUiState) => {
|
||||
|
|
@ -276,6 +275,11 @@ const module: Module<IUiState, IRootState> = {
|
|||
const { name, id } = params;
|
||||
Vue.set(state.modals[name], 'activeId', id);
|
||||
},
|
||||
setModalData: (state: IUiState, params: { name: string, data: Record<string, unknown> }) => {
|
||||
const { name, data } = params;
|
||||
|
||||
Vue.set(state.modals[name], 'data', data);
|
||||
},
|
||||
setCurlCommand: (state: IUiState, params: {name: string, command: string}) => {
|
||||
const { name, command } = params;
|
||||
Vue.set(state.modals[name], 'curlCommand', command);
|
||||
|
|
@ -379,6 +383,10 @@ const module: Module<IUiState, IRootState> = {
|
|||
openModal: async (context: ActionContext<IUiState, IRootState>, modalKey: string) => {
|
||||
context.commit('openModal', modalKey);
|
||||
},
|
||||
openModalWithData: async (context: ActionContext<IUiState, IRootState>, payload: { name: string, data: Record<string, unknown> }) => {
|
||||
context.commit('setModalData', payload);
|
||||
context.commit('openModal', payload.name);
|
||||
},
|
||||
openDeleteUserModal: async (context: ActionContext<IUiState, IRootState>, { id }: {id: string}) => {
|
||||
context.commit('setActiveId', { name: DELETE_USER_MODAL_KEY, id });
|
||||
context.commit('openModal', DELETE_USER_MODAL_KEY);
|
||||
|
|
|
|||
|
|
@ -27,9 +27,7 @@ const module: Module<IWorkflowsState, IRootState> = {
|
|||
return workflowData;
|
||||
},
|
||||
|
||||
getDuplicateCurrentWorkflowName: async (context: ActionContext<IWorkflowsState, IRootState>): Promise<string> => {
|
||||
const currentWorkflowName = context.rootGetters.workflowName;
|
||||
|
||||
getDuplicateCurrentWorkflowName: async (context: ActionContext<IWorkflowsState, IRootState>, currentWorkflowName: string): Promise<string> => {
|
||||
if (currentWorkflowName && (currentWorkflowName.length + DUPLICATE_POSTFFIX.length) >= MAX_WORKFLOW_NAME_LENGTH) {
|
||||
return currentWorkflowName;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
* @usage getCredentialPermissions(user, credential).isOwner;
|
||||
*/
|
||||
|
||||
import {IUser, ICredentialsResponse, IRootState} from "@/Interface";
|
||||
import {IUser, ICredentialsResponse, IRootState, IWorkflowDb} from "@/Interface";
|
||||
import {Store} from "vuex";
|
||||
import {EnterpriseEditionFeature} from "@/constants";
|
||||
|
||||
|
|
@ -69,3 +69,22 @@ export const getCredentialPermissions = (user: IUser, credential: ICredentialsRe
|
|||
|
||||
return parsePermissionsTable(user, table);
|
||||
};
|
||||
|
||||
export const getWorkflowPermissions = (user: IUser, workflow: IWorkflowDb, store: Store<IRootState>) => {
|
||||
const table: IPermissionsTable = [
|
||||
// { name: UserRole.ResourceOwner, test: () => !!(workflow && workflow.ownedBy && workflow.ownedBy.id === user.id) || !store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing) },
|
||||
{ name: UserRole.ResourceOwner, test: () => true },
|
||||
// { name: UserRole.ResourceReader, test: () => !!(workflow && workflow.sharedWith && workflow.sharedWith.find((sharee) => sharee.id === user.id)) },
|
||||
{ name: UserRole.ResourceReader, test: () => true },
|
||||
{ name: 'read', test: [UserRole.ResourceOwner, UserRole.InstanceOwner, UserRole.ResourceReader] },
|
||||
{ name: 'save', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
|
||||
{ name: 'updateName', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
|
||||
{ name: 'updateConnection', test: [UserRole.ResourceOwner] },
|
||||
{ name: 'updateSharing', test: [UserRole.ResourceOwner] },
|
||||
{ name: 'updateNodeAccess', test: [UserRole.ResourceOwner] },
|
||||
{ name: 'delete', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
|
||||
{ name: 'use', test: [UserRole.ResourceOwner, UserRole.ResourceReader] },
|
||||
];
|
||||
|
||||
return parsePermissionsTable(user, table);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -325,20 +325,15 @@
|
|||
"credentials.empty.heading.userNotSetup": "Set up a credential",
|
||||
"credentials.empty.description": "Credentials let workflows interact with your apps and services",
|
||||
"credentials.empty.button": "Add first credential",
|
||||
"credentials.menu.myCredentials": "My credentials",
|
||||
"credentials.menu.allCredentials": "All credentials",
|
||||
"credentials.menu.my": "My credentials",
|
||||
"credentials.menu.all": "All credentials",
|
||||
"credentials.item.open": "Open",
|
||||
"credentials.item.delete": "Delete",
|
||||
"credentials.item.updated": "Last updated",
|
||||
"credentials.item.created": "Created",
|
||||
"credentials.item.owner": "Owner",
|
||||
"credentials.search.placeholder": "Search credentials...",
|
||||
"credentials.filters": "Filters",
|
||||
"credentials.filters.type": "Type",
|
||||
"credentials.filters.ownedBy": "Owned by",
|
||||
"credentials.filters.sharedWith": "Shared with",
|
||||
"credentials.filters.apply": "Apply filters",
|
||||
"credentials.filters.reset": "Reset all",
|
||||
"credentials.filters.active": "Some credentials may be hidden since filters are applied.",
|
||||
"credentials.filters.active.reset": "Remove filters",
|
||||
"credentials.sort.lastUpdated": "Sort by last updated",
|
||||
|
|
@ -480,6 +475,10 @@
|
|||
"forgotPassword.returnToSignIn": "Back to sign in",
|
||||
"forgotPassword.sendingEmailError": "Problem sending email",
|
||||
"forgotPassword.smtpErrorContactAdministrator": "Please contact your administrator (problem with your SMTP setup)",
|
||||
"forms.resourceFiltersDropdown.filters": "Filters",
|
||||
"forms.resourceFiltersDropdown.ownedBy": "Owned by",
|
||||
"forms.resourceFiltersDropdown.sharedWith": "Shared with",
|
||||
"forms.resourceFiltersDropdown.reset": "Reset all",
|
||||
"generic.oauth1Api": "OAuth1 API",
|
||||
"generic.oauth2Api": "OAuth2 API",
|
||||
"genericHelpers.loading": "Loading",
|
||||
|
|
@ -1197,6 +1196,8 @@
|
|||
"workflowActivator.workflowIsActive": "Workflow is already active",
|
||||
"workflowActivator.activateWorkflow": "Activate workflow",
|
||||
"workflowActivator.deactivateWorkflow": "Deactivate workflow",
|
||||
"workflowActivator.active": "Active",
|
||||
"workflowActivator.inactive": "Inactive",
|
||||
"workflowActivator.showError.title": "Workflow could not be {newStateName}",
|
||||
"workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message": "Please resolve outstanding issues before you activate it",
|
||||
"workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title": "Problem activating workflow",
|
||||
|
|
@ -1280,6 +1281,39 @@
|
|||
"workflowSettings.timeoutAfter": "Timeout After",
|
||||
"workflowSettings.timeoutWorkflow": "Timeout Workflow",
|
||||
"workflowSettings.timezone": "Timezone",
|
||||
"workflows.heading": "Workflows",
|
||||
"workflows.add": "Add Workflow",
|
||||
"workflows.menu.my": "My workflows",
|
||||
"workflows.menu.all": "All workflows",
|
||||
"workflows.item.open": "Open",
|
||||
"workflows.item.duplicate": "Duplicate",
|
||||
"workflows.item.delete": "Delete",
|
||||
"workflows.item.updated": "Last updated",
|
||||
"workflows.item.created": "Created",
|
||||
"workflows.item.owner": "Owner",
|
||||
"workflows.search.placeholder": "Search workflows...",
|
||||
"workflows.filters": "Filters",
|
||||
"workflows.filters.tags": "Tags",
|
||||
"workflows.filters.ownedBy": "Owned by",
|
||||
"workflows.filters.sharedWith": "Shared with",
|
||||
"workflows.filters.apply": "Apply filters",
|
||||
"workflows.filters.reset": "Reset all",
|
||||
"workflows.filters.active": "Some workflows may be hidden since filters are applied.",
|
||||
"workflows.filters.active.reset": "Remove filters",
|
||||
"workflows.sort.lastUpdated": "Sort by last updated",
|
||||
"workflows.sort.lastCreated": "Sort by last created",
|
||||
"workflows.sort.nameAsc": "Sort by name (A-Z)",
|
||||
"workflows.sort.nameDesc": "Sort by name (Z-A)",
|
||||
"workflows.noResults": "No workflows found",
|
||||
"workflows.noResults.withSearch.switchToShared.preamble": "some workflows may be",
|
||||
"workflows.noResults.withSearch.switchToShared.link": "hidden",
|
||||
"workflows.noResults.switchToShared.preamble": "but there are some",
|
||||
"workflows.noResults.switchToShared.link": "shared with you",
|
||||
"workflows.empty.heading": "👋 Welcome {name}!",
|
||||
"workflows.empty.heading.userNotSetup": "👋 Welcome!",
|
||||
"workflows.empty.description": "Create your first workflow",
|
||||
"workflows.empty.startFromScratch": "Start from scratch",
|
||||
"workflows.empty.browseTemplates": "Browse templates",
|
||||
"importCurlModal.title": "Import cURL command",
|
||||
"importCurlModal.input.label": "cURL Command",
|
||||
"importCurlModal.input.placeholder": "Paste the cURL command here",
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@ import TemplatesCollectionView from '@/views/TemplatesCollectionView.vue';
|
|||
import TemplatesWorkflowView from '@/views/TemplatesWorkflowView.vue';
|
||||
import TemplatesSearchView from '@/views/TemplatesSearchView.vue';
|
||||
import CredentialsView from '@/views/CredentialsView.vue';
|
||||
import WorkflowsView from '@/views/WorkflowsView.vue';
|
||||
import { Store } from 'vuex';
|
||||
import { IPermissions, IRootState, IWorkflowsState } from './Interface';
|
||||
import { LOGIN_STATUS, ROLE } from './modules/userHelpers';
|
||||
import { RouteConfigSingleView } from 'vue-router/types/router';
|
||||
import { VIEWS } from './constants';
|
||||
import { store } from './store';
|
||||
import e from 'express';
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ const router = new Router({
|
|||
name: VIEWS.HOMEPAGE,
|
||||
meta: {
|
||||
getRedirect(store: Store<IRootState>) {
|
||||
return { name: VIEWS.NEW_WORKFLOW };
|
||||
return { name: VIEWS.WORKFLOWS };
|
||||
},
|
||||
permissions: {
|
||||
allow: {
|
||||
|
|
@ -189,6 +189,21 @@ const router = new Router({
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/workflows',
|
||||
name: VIEWS.WORKFLOWS,
|
||||
components: {
|
||||
default: WorkflowsView,
|
||||
sidebar: MainSidebar,
|
||||
},
|
||||
meta: {
|
||||
permissions: {
|
||||
allow: {
|
||||
loginStatus: [LOGIN_STATUS.LoggedIn],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/workflow',
|
||||
name: VIEWS.NEW_WORKFLOW,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import Vuex, {ActionContext} from 'vuex';
|
||||
|
||||
import {
|
||||
PLACEHOLDER_EMPTY_WORKFLOW_ID,
|
||||
|
|
@ -32,6 +32,8 @@ import {
|
|||
IWorkflowDb,
|
||||
XYPosition,
|
||||
IRestApiContext,
|
||||
IWorkflowsState,
|
||||
IWorkflowsMap,
|
||||
} from './Interface';
|
||||
|
||||
import nodeTypes from './modules/nodeTypes';
|
||||
|
|
@ -48,6 +50,7 @@ import {dataPinningEventBus} from "@/event-bus/data-pinning-event-bus";
|
|||
import communityNodes from './modules/communityNodes';
|
||||
import nodeCreator from './modules/nodeCreator';
|
||||
import { isJsonKeyObject } from './utils';
|
||||
import {getActiveWorkflows, getWorkflows} from "@/api/workflows";
|
||||
import { getPairedItemsMapping } from './pairedItemUtils';
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
|
@ -100,6 +103,7 @@ const state: IRootState = {
|
|||
tags: [],
|
||||
pinData: {},
|
||||
},
|
||||
workflowsById: {},
|
||||
sidebarMenuItems: [],
|
||||
instanceId: '',
|
||||
nodeMetadata: {},
|
||||
|
|
@ -181,6 +185,25 @@ export const store = new Vuex.Store({
|
|||
Vue.set(state, 'activeExecutions', newActiveExecutions);
|
||||
},
|
||||
|
||||
// Workflows
|
||||
setWorkflows: (state: IRootState, workflows: IWorkflowDb[]) => {
|
||||
state.workflowsById = workflows.reduce<IWorkflowsMap>((acc, workflow: IWorkflowDb) => {
|
||||
if (workflow.id) {
|
||||
acc[workflow.id] = workflow;
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
},
|
||||
deleteWorkflow: (state: IRootState, id: string) => {
|
||||
const { [id]: deletedWorkflow, ...workflows } = state.workflowsById;
|
||||
|
||||
state.workflowsById = workflows;
|
||||
},
|
||||
addWorkflow: (state: IRootState, workflow: IWorkflowDb) => {
|
||||
Vue.set(state.workflowsById, workflow.id, workflow);
|
||||
},
|
||||
|
||||
// Active Workflows
|
||||
setActiveWorkflows(state, newActiveWorkflows: string[]) {
|
||||
state.activeWorkflows = newActiveWorkflows;
|
||||
|
|
@ -191,12 +214,20 @@ export const store = new Vuex.Store({
|
|||
if (index === -1) {
|
||||
state.activeWorkflows.push(workflowId);
|
||||
}
|
||||
|
||||
if (state.workflowsById[workflowId]) {
|
||||
Vue.set(state.workflowsById[workflowId], 'active', true);
|
||||
}
|
||||
},
|
||||
setWorkflowInactive(state, workflowId: string) {
|
||||
const index = state.activeWorkflows.indexOf(workflowId);
|
||||
if (index !== -1) {
|
||||
state.activeWorkflows.splice(index, 1);
|
||||
}
|
||||
|
||||
if (state.workflowsById[workflowId]) {
|
||||
Vue.set(state.workflowsById[workflowId], 'active', false);
|
||||
}
|
||||
},
|
||||
// Set state condition dirty or not
|
||||
// ** Dirty: if current workflow state has been synchronized with database AKA has it been saved
|
||||
|
|
@ -831,6 +862,12 @@ export const store = new Vuex.Store({
|
|||
return state.sessionId;
|
||||
},
|
||||
|
||||
// Workflows
|
||||
allWorkflows(state: IRootState): IWorkflowDb[] {
|
||||
return Object.values(state.workflowsById)
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
},
|
||||
|
||||
// Active Workflows
|
||||
getActiveWorkflows: (state): string[] => {
|
||||
return state.activeWorkflows;
|
||||
|
|
@ -1011,4 +1048,18 @@ export const store = new Vuex.Store({
|
|||
return state.sidebarMenuItems;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
fetchAllWorkflows: async (context: ActionContext<IWorkflowsState, IRootState>): Promise<IWorkflowDb[]> => {
|
||||
const workflows = await getWorkflows(context.rootGetters.getRestApiContext);
|
||||
context.commit('setWorkflows', workflows);
|
||||
|
||||
return workflows;
|
||||
},
|
||||
fetchActiveWorkflows: async (context: ActionContext<IWorkflowsState, IRootState>): Promise<string[]> => {
|
||||
const activeWorkflows = await getActiveWorkflows(context.rootGetters.getRestApiContext);
|
||||
context.commit('setActiveWorkflows', activeWorkflows);
|
||||
|
||||
return activeWorkflows;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,89 +1,18 @@
|
|||
<template>
|
||||
<page-view-layout>
|
||||
<template #aside>
|
||||
<div :class="[$style['heading-wrapper'], 'mb-xs']">
|
||||
<n8n-heading size="2xlarge">
|
||||
{{ $locale.baseText('credentials.heading') }}
|
||||
</n8n-heading>
|
||||
</div>
|
||||
|
||||
<div class="mt-xs mb-l">
|
||||
<n8n-button size="large" block @click="addCredential">
|
||||
{{ $locale.baseText('credentials.add') }}
|
||||
</n8n-button>
|
||||
</div>
|
||||
|
||||
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
|
||||
<div :class="$style.sidebarContainer">
|
||||
<n8n-menu :items="menuItems" mode="tabs" @select="onSelectOwner" ref="selectOwnerMenu"></n8n-menu>
|
||||
</div>
|
||||
</enterprise-edition>
|
||||
<resources-list-layout
|
||||
ref="layout"
|
||||
resource-key="credentials"
|
||||
:resources="allCredentials"
|
||||
:initialize="initialize"
|
||||
:filters="filters"
|
||||
:additional-filters-handler="onFilter"
|
||||
@click:add="addCredential"
|
||||
@update:filters="filters = $event"
|
||||
>
|
||||
<template v-slot="{ data }">
|
||||
<credential-card :data="data"/>
|
||||
</template>
|
||||
|
||||
<div v-if="loading">
|
||||
<n8n-loading :class="[$style['header-loading'], 'mb-l']" variant="custom"/>
|
||||
<n8n-loading :class="[$style['card-loading'], 'mb-2xs']" variant="custom"/>
|
||||
<n8n-loading :class="$style['card-loading']" variant="custom"/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="ph-no-capture" v-if="allCredentials.length === 0">
|
||||
<n8n-action-box
|
||||
emoji="👋"
|
||||
:heading="$locale.baseText(currentUser.firstName ? 'credentials.empty.heading' : 'credentials.empty.heading.userNotSetup', {
|
||||
interpolate: { name: currentUser.firstName }
|
||||
})"
|
||||
:description="$locale.baseText('credentials.empty.description')"
|
||||
:buttonText="$locale.baseText('credentials.empty.button')"
|
||||
buttonType="secondary"
|
||||
@click="addCredential"
|
||||
/>
|
||||
</div>
|
||||
<page-view-layout-list v-else>
|
||||
<template #header>
|
||||
<div class="mb-xs">
|
||||
<div :class="$style['filters-row']">
|
||||
<n8n-input
|
||||
:class="[$style['search'], 'mr-2xs']"
|
||||
:placeholder="$locale.baseText('credentials.search.placeholder')"
|
||||
v-model="filters.search"
|
||||
size="medium"
|
||||
clearable
|
||||
ref="search"
|
||||
>
|
||||
<n8n-icon icon="search" slot="prefix"/>
|
||||
</n8n-input>
|
||||
<div :class="$style['sort-and-filter']">
|
||||
<n8n-select
|
||||
v-model="filters.sortBy"
|
||||
size="medium"
|
||||
>
|
||||
<n8n-option value="lastUpdated" :label="$locale.baseText('credentials.sort.lastUpdated')"/>
|
||||
<n8n-option value="lastCreated" :label="$locale.baseText('credentials.sort.lastCreated')"/>
|
||||
<n8n-option value="nameAsc" :label="$locale.baseText('credentials.sort.nameAsc')"/>
|
||||
<n8n-option value="nameDesc" :label="$locale.baseText('credentials.sort.nameDesc')"/>
|
||||
</n8n-select>
|
||||
<n8n-popover
|
||||
trigger="click"
|
||||
>
|
||||
<template slot="reference">
|
||||
<n8n-button
|
||||
icon="filter"
|
||||
type="tertiary"
|
||||
size="medium"
|
||||
:active="hasFilters"
|
||||
:class="[$style['filter-button'], 'ml-2xs']"
|
||||
>
|
||||
<n8n-badge
|
||||
v-show="filtersLength > 0"
|
||||
theme="primary"
|
||||
class="mr-4xs"
|
||||
>
|
||||
{{ filtersLength }}
|
||||
</n8n-badge>
|
||||
{{ $locale.baseText('credentials.filters') }}
|
||||
</n8n-button>
|
||||
</template>
|
||||
<div :class="$style['filters-dropdown']">
|
||||
<template v-slot:filters="{ setKeyValue }">
|
||||
<div class="mb-s">
|
||||
<n8n-input-label
|
||||
:label="$locale.baseText('credentials.filters.type')"
|
||||
|
|
@ -93,12 +22,13 @@
|
|||
class="mb-3xs"
|
||||
/>
|
||||
<n8n-select
|
||||
v-model="filters.type"
|
||||
:value="filters.type"
|
||||
size="small"
|
||||
multiple
|
||||
filterable
|
||||
ref="typeInput"
|
||||
:class="$style['type-input']"
|
||||
@input="setKeyValue('type', $event)"
|
||||
>
|
||||
<n8n-option
|
||||
v-for="credentialType in allCredentialTypes"
|
||||
|
|
@ -108,122 +38,8 @@
|
|||
/>
|
||||
</n8n-select>
|
||||
</div>
|
||||
<enterprise-edition class="mb-s" :features="[EnterpriseEditionFeature.Sharing]">
|
||||
<n8n-input-label
|
||||
:label="$locale.baseText('credentials.filters.ownedBy')"
|
||||
:bold="false"
|
||||
size="small"
|
||||
color="text-base"
|
||||
class="mb-3xs"
|
||||
/>
|
||||
<n8n-select
|
||||
v-model="filters.ownedBy"
|
||||
class="ph-no-capture"
|
||||
:class="$style['user-select']"
|
||||
size="small"
|
||||
filterable
|
||||
>
|
||||
<template
|
||||
v-for="user in allUsers"
|
||||
>
|
||||
<n8n-option
|
||||
v-if="!user.isPending"
|
||||
:key="user.id"
|
||||
:value="user.id"
|
||||
:label="user.fullName"
|
||||
:disabled="user.id === filters.sharedWith"
|
||||
>
|
||||
<n8n-user-info
|
||||
v-bind="user"
|
||||
:class="$style['user-info']"
|
||||
:isCurrentUser="user.id === currentUser.id"
|
||||
:disabled="user.id === filters.sharedWith"
|
||||
/>
|
||||
</n8n-option>
|
||||
</template>
|
||||
</n8n-select>
|
||||
</enterprise-edition>
|
||||
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
|
||||
<n8n-input-label
|
||||
:label="$locale.baseText('credentials.filters.sharedWith')"
|
||||
:bold="false"
|
||||
size="small"
|
||||
color="text-base"
|
||||
class="mb-3xs"
|
||||
/>
|
||||
<n8n-select
|
||||
v-model="filters.sharedWith"
|
||||
class="ph-no-capture"
|
||||
:class="$style['user-select']"
|
||||
size="small"
|
||||
filterable
|
||||
>
|
||||
<template v-for="user in allUsers">
|
||||
<n8n-option
|
||||
v-if="!user.isPending"
|
||||
:key="user.id"
|
||||
:value="user.id"
|
||||
:label="user.fullName"
|
||||
:disabled="user.id === filters.ownedBy"
|
||||
>
|
||||
<n8n-user-info
|
||||
v-bind="user"
|
||||
:class="$style['user-info']"
|
||||
:isCurrentUser="user.id === currentUser.id"
|
||||
:disabled="user.id === filters.ownedBy"
|
||||
/>
|
||||
</n8n-option>
|
||||
</template>
|
||||
</n8n-select>
|
||||
</enterprise-edition>
|
||||
<div :class="[$style['filters-dropdown-footer'], 'mt-s']" v-if="hasFilters">
|
||||
<n8n-link @click="resetFilters">
|
||||
{{ $locale.baseText('credentials.filters.reset') }}
|
||||
</n8n-link>
|
||||
</div>
|
||||
</div>
|
||||
</n8n-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-show="hasFilters" class="mt-xs">
|
||||
<n8n-info-tip :bold="false">
|
||||
{{ $locale.baseText('credentials.filters.active') }}
|
||||
<n8n-link @click="resetFilters" size="small">
|
||||
{{ $locale.baseText('credentials.filters.active.reset') }}
|
||||
</n8n-link>
|
||||
</n8n-info-tip>
|
||||
</div>
|
||||
|
||||
<div class="mt-xs mb-l">
|
||||
<ul class="list-style-none" v-if="filteredAndSortedSubviewCredentials.length > 0">
|
||||
<li v-for="credential in filteredAndSortedSubviewCredentials" :key="credential.id" class="mb-2xs">
|
||||
<credential-card :data="credential"/>
|
||||
</li>
|
||||
</ul>
|
||||
<n8n-text color="text-base" size="medium" v-else>
|
||||
{{ $locale.baseText('credentials.noResults') }}
|
||||
<template v-if="!hasFilters && filters.owner && credentialsNotOwned.length > 0">
|
||||
<span v-if="!filters.search">
|
||||
({{ $locale.baseText('credentials.noResults.switchToShared.preamble') }}
|
||||
<n8n-link @click="setOwnerFilter(false)">{{
|
||||
$locale.baseText('credentials.noResults.switchToShared.link')
|
||||
}}</n8n-link>)
|
||||
</span>
|
||||
<span v-else>
|
||||
({{ $locale.baseText('credentials.noResults.withSearch.switchToShared.preamble') }}
|
||||
<n8n-link @click="setOwnerFilter(false)">{{
|
||||
$locale.baseText('credentials.noResults.withSearch.switchToShared.link')
|
||||
}}</n8n-link>)
|
||||
</span>
|
||||
</template>
|
||||
</n8n-text>
|
||||
</div>
|
||||
</page-view-layout-list>
|
||||
</template>
|
||||
</page-view-layout>
|
||||
</resources-list-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -232,16 +48,19 @@ import {ICredentialsResponse, IUser} from '@/Interface';
|
|||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
import SettingsView from './SettingsView.vue';
|
||||
import ResourcesListLayout from "@/components/layouts/ResourcesListLayout.vue";
|
||||
import PageViewLayout from "@/components/layouts/PageViewLayout.vue";
|
||||
import PageViewLayoutList from "@/components/layouts/PageViewLayoutList.vue";
|
||||
import CredentialCard from "@/components/CredentialCard.vue";
|
||||
import {CREDENTIAL_SELECT_MODAL_KEY} from "@/constants";
|
||||
import {ICredentialType} from "n8n-workflow";
|
||||
import {EnterpriseEditionFeature} from "@/constants";
|
||||
import TemplateCard from "@/components/TemplateCard.vue";
|
||||
import Vue from "vue";
|
||||
import { debounceHelper } from '@/components/mixins/debounce';
|
||||
import { IMenuItem } from 'n8n-design-system';
|
||||
import ResourceOwnershipSelect from "@/components/forms/ResourceOwnershipSelect.ee.vue";
|
||||
import ResourceFiltersDropdown from "@/components/forms/ResourceFiltersDropdown.vue";
|
||||
import {CREDENTIAL_SELECT_MODAL_KEY} from '@/constants';
|
||||
import Vue from "vue";
|
||||
|
||||
type IResourcesListLayoutInstance = Vue & { sendFiltersTelemetry: (source: string) => void };
|
||||
|
||||
export default mixins(
|
||||
showMessage,
|
||||
|
|
@ -249,49 +68,26 @@ export default mixins(
|
|||
).extend({
|
||||
name: 'SettingsPersonalView',
|
||||
components: {
|
||||
ResourcesListLayout,
|
||||
TemplateCard,
|
||||
PageViewLayout,
|
||||
PageViewLayoutList,
|
||||
SettingsView,
|
||||
CredentialCard,
|
||||
ResourceOwnershipSelect,
|
||||
ResourceFiltersDropdown,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
filters: {
|
||||
owner: true,
|
||||
sortBy: 'lastUpdated',
|
||||
search: '',
|
||||
type: [] as string[],
|
||||
ownedBy: '',
|
||||
sharedWith: '',
|
||||
type: '',
|
||||
},
|
||||
filtersInput: {
|
||||
type: [] as string[],
|
||||
ownedBy: '',
|
||||
sharedWith: '',
|
||||
},
|
||||
resettingFilters: false,
|
||||
EnterpriseEditionFeature,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
menuItems(): IMenuItem[] {
|
||||
return [
|
||||
{
|
||||
id: 'owner',
|
||||
icon: 'user',
|
||||
label: this.$locale.baseText('credentials.menu.myCredentials'),
|
||||
position: 'top',
|
||||
},
|
||||
{
|
||||
id: 'all',
|
||||
icon: 'globe-americas',
|
||||
label: this.$locale.baseText('credentials.menu.allCredentials'),
|
||||
position: 'top',
|
||||
},
|
||||
];
|
||||
},
|
||||
currentUser(): IUser {
|
||||
return this.$store.getters['users/currentUser'];
|
||||
},
|
||||
|
|
@ -307,88 +103,10 @@ export default mixins(
|
|||
credentialTypesById(): Record<ICredentialType['name'], ICredentialType> {
|
||||
return this.$store.getters['credentials/credentialTypesById'];
|
||||
},
|
||||
filtersLength(): number {
|
||||
let length = 0;
|
||||
|
||||
if (this.filters.ownedBy) {
|
||||
length += 1;
|
||||
}
|
||||
if (this.filters.sharedWith) {
|
||||
length += 1;
|
||||
}
|
||||
if (this.filters.type.length > 0) {
|
||||
length += 1;
|
||||
}
|
||||
|
||||
return length;
|
||||
},
|
||||
subviewCredentials(): ICredentialsResponse[] {
|
||||
return this.allCredentials.filter((credential: ICredentialsResponse) => {
|
||||
if (this.filters.owner && this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
|
||||
return !!(credential.ownedBy && credential.ownedBy.id === this.currentUser.id);
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
},
|
||||
filteredAndSortedSubviewCredentials(): ICredentialsResponse[] {
|
||||
const filtered: ICredentialsResponse[] = this.subviewCredentials.filter((credential: ICredentialsResponse) => {
|
||||
let matches = true;
|
||||
|
||||
if (this.filters.ownedBy) {
|
||||
matches = matches && !!(credential.ownedBy && credential.ownedBy.id === this.filters.ownedBy);
|
||||
}
|
||||
|
||||
if (this.filters.sharedWith) {
|
||||
matches = matches && !!(credential.sharedWith && credential.sharedWith.find((sharee) => sharee.id === this.filters.sharedWith));
|
||||
}
|
||||
|
||||
if (this.filters.type.length > 0) {
|
||||
matches = matches && this.filters.type.includes(credential.type);
|
||||
}
|
||||
|
||||
if (this.filters.search) {
|
||||
const searchString = this.filters.search.toLowerCase();
|
||||
|
||||
matches = matches && (
|
||||
credential.name.toLowerCase().includes(searchString) ||
|
||||
this.credentialTypesById[credential.type] && this.credentialTypesById[credential.type].displayName.toLowerCase().includes(searchString)
|
||||
);
|
||||
}
|
||||
|
||||
return matches;
|
||||
});
|
||||
|
||||
return filtered.sort((a, b) => {
|
||||
switch (this.filters.sortBy) {
|
||||
case 'lastUpdated':
|
||||
return (new Date(b.updatedAt)).valueOf() - (new Date(a.updatedAt)).valueOf();
|
||||
case 'lastCreated':
|
||||
return (new Date(b.createdAt)).valueOf() - (new Date(a.createdAt)).valueOf();
|
||||
case 'nameAsc':
|
||||
return a.name.localeCompare(b.name);
|
||||
case 'nameDesc':
|
||||
return b.name.localeCompare(a.name);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
credentialsNotOwned(): ICredentialsResponse[] {
|
||||
return this.allCredentials.filter((credential: ICredentialsResponse) => {
|
||||
return credential.ownedBy && credential.ownedBy.id !== this.currentUser.id;
|
||||
});
|
||||
},
|
||||
hasFilters(): boolean {
|
||||
return this.filters.type.length > 0 ||
|
||||
this.filters.ownedBy !== '' ||
|
||||
this.filters.sharedWith !== '';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addCredential() {
|
||||
this.$store.dispatch('ui/openModal', CREDENTIAL_SELECT_MODAL_KEY);
|
||||
this.resetFilters();
|
||||
|
||||
this.$telemetry.track('User clicked add cred button', {
|
||||
source: 'Creds list',
|
||||
|
|
@ -406,160 +124,36 @@ export default mixins(
|
|||
|
||||
await Promise.all(loadPromises);
|
||||
|
||||
this.loading = false;
|
||||
this.$nextTick(this.focusSearchInput);
|
||||
|
||||
this.$store.dispatch('users/fetchUsers'); // Can be loaded in the background, used for filtering
|
||||
},
|
||||
resetFilters() {
|
||||
this.filters.search = '';
|
||||
this.filters.type = [];
|
||||
this.filters.ownedBy = '';
|
||||
this.filters.sharedWith = '';
|
||||
this.filtersInput.type = [];
|
||||
this.filtersInput.ownedBy = '';
|
||||
this.filtersInput.sharedWith = '';
|
||||
|
||||
this.resettingFilters = true;
|
||||
this.sendFiltersTelemetry('reset');
|
||||
},
|
||||
focusSearchInput() {
|
||||
if (this.$refs.search) {
|
||||
(this.$refs.search as Vue & { focus: () => void }).focus();
|
||||
onFilter(resource: ICredentialsResponse, filters: { type: string[]; search: string; }, matches: boolean): boolean {
|
||||
if (filters.type.length > 0) {
|
||||
matches = matches && filters.type.includes(resource.type);
|
||||
}
|
||||
},
|
||||
setOwnerFilter(active: boolean) {
|
||||
(this.$refs.selectOwnerMenu as Vue & { $children: Array<{ activeIndex: string; }> }).$children[0].activeIndex = active ? 'owner' : 'all';
|
||||
this.filters.owner = active;
|
||||
},
|
||||
onSelectOwner(type: string) {
|
||||
this.filters.owner = type === 'owner';
|
||||
},
|
||||
sendSubviewTelemetry() {
|
||||
this.$telemetry.track('User changed credentials sub view', {
|
||||
sub_view: this.filters.owner ? 'My credentials' : 'All credentials',
|
||||
});
|
||||
},
|
||||
sendSortingTelemetry() {
|
||||
this.$telemetry.track('User changed sorting in cred list', {
|
||||
sub_view: this.filters.owner ? 'My credentials' : 'All credentials',
|
||||
sorting: this.filters.sortBy,
|
||||
});
|
||||
|
||||
if (filters.search) {
|
||||
const searchString = filters.search.toLowerCase();
|
||||
|
||||
matches = matches || (
|
||||
this.credentialTypesById[resource.type] && this.credentialTypesById[resource.type].displayName.toLowerCase().includes(searchString)
|
||||
);
|
||||
}
|
||||
|
||||
return matches;
|
||||
},
|
||||
sendFiltersTelemetry(source: string) {
|
||||
// Prevent sending multiple telemetry events when resetting filters
|
||||
// Timeout is required to wait for search debounce to be over
|
||||
if (this.resettingFilters) {
|
||||
if (source !== 'reset') {
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(() => this.resettingFilters = false, 1500);
|
||||
}
|
||||
|
||||
const filters = this.filters as Record<string, string[] | string | boolean>;
|
||||
const filtersSet: string[] = [];
|
||||
const filterValues: Array<string[] | string | boolean | null> = [];
|
||||
|
||||
['ownedBy', 'sharedWith', 'type', 'search'].forEach((key) => {
|
||||
if (filters[key]) {
|
||||
filtersSet.push(key);
|
||||
filterValues.push(key === 'search' ? null : filters[key]);
|
||||
}
|
||||
});
|
||||
|
||||
this.$telemetry.track('User set filters in cred list', {
|
||||
filters_set: filtersSet,
|
||||
filter_values: filterValues,
|
||||
sub_view: this.filters.owner ? 'My credentials' : 'All credentials',
|
||||
creds_total_in_view: this.subviewCredentials.length,
|
||||
creds_after_filtering: this.filteredAndSortedSubviewCredentials.length,
|
||||
});
|
||||
(this.$refs.layout as IResourcesListLayoutInstance).sendFiltersTelemetry(source);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initialize();
|
||||
},
|
||||
watch: {
|
||||
'filters.owner'() {
|
||||
this.sendSubviewTelemetry();
|
||||
},
|
||||
'filters.ownedBy'(value) {
|
||||
if (value) {
|
||||
this.setOwnerFilter(false);
|
||||
}
|
||||
this.sendFiltersTelemetry('ownedBy');
|
||||
},
|
||||
'filters.sharedWith'() {
|
||||
this.sendFiltersTelemetry('sharedWith');
|
||||
},
|
||||
'filters.type'() {
|
||||
this.sendFiltersTelemetry('type');
|
||||
},
|
||||
'filters.search'() {
|
||||
this.callDebounced('sendFiltersTelemetry', { debounceTime: 1000, trailing: true }, 'search');
|
||||
},
|
||||
'filters.sortBy'() {
|
||||
this.sendSortingTelemetry();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.heading-wrapper {
|
||||
padding-bottom: 1px; // Match input height
|
||||
}
|
||||
|
||||
.filters-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search {
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.sort-and-filter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filters-dropdown {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.filters-dropdown-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-loading {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.card-loading {
|
||||
height: 69px;
|
||||
}
|
||||
|
||||
.user-select {
|
||||
--select-option-line-height: auto;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin: var(--spacing-2xs) 0;
|
||||
}
|
||||
|
||||
.type-input {
|
||||
--max-width: 265px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -142,7 +142,6 @@ import {
|
|||
STICKY_NODE_TYPE,
|
||||
VIEWS,
|
||||
WEBHOOK_NODE_TYPE,
|
||||
WORKFLOW_OPEN_MODAL_KEY,
|
||||
TRIGGER_NODE_FILTER,
|
||||
} from '@/constants';
|
||||
import { copyPaste } from '@/components/mixins/copyPaste';
|
||||
|
|
@ -869,15 +868,6 @@ export default mixins(
|
|||
e.preventDefault();
|
||||
|
||||
this.callDebounced('cutSelectedNodes', { debounceTime: 1000 });
|
||||
} else if (e.key === 'o' && this.isCtrlKeyPressed(e) === true) {
|
||||
// Open workflow dialog
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if (this.isDemo) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
|
||||
} else if (e.key === 'n' && this.isCtrlKeyPressed(e) === true && e.altKey === true) {
|
||||
// Create a new workflow
|
||||
e.stopPropagation();
|
||||
|
|
|
|||
187
packages/editor-ui/src/views/WorkflowsView.vue
Normal file
187
packages/editor-ui/src/views/WorkflowsView.vue
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
<template>
|
||||
<resources-list-layout
|
||||
ref="layout"
|
||||
resource-key="workflows"
|
||||
:resources="allWorkflows"
|
||||
:initialize="initialize"
|
||||
:filters="filters"
|
||||
:additional-filters-handler="onFilter"
|
||||
:show-aside="allWorkflows.length > 0"
|
||||
:shareable="false"
|
||||
@click:add="addWorkflow"
|
||||
@update:filters="filters = $event"
|
||||
>
|
||||
<template v-slot="{ data }">
|
||||
<workflow-card :data="data" @click:tag="onClickTag" />
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="text-center mt-s">
|
||||
<n8n-heading tag="h2" size="xlarge" class="mb-2xs">
|
||||
{{ $locale.baseText(currentUser.firstName ? 'workflows.empty.heading' : 'workflows.empty.heading.userNotSetup', { interpolate: { name: currentUser.firstName } }) }}
|
||||
</n8n-heading>
|
||||
<n8n-text size="large" color="text-base">
|
||||
{{ $locale.baseText('workflows.empty.description') }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
<div class="text-center mt-2xl">
|
||||
<n8n-card :class="[$style.emptyStateCard, 'mr-s']" hoverable @click="addWorkflow">
|
||||
<n8n-icon :class="$style.emptyStateCardIcon" icon="file" />
|
||||
<n8n-text size="large" class="mt-xs" color="text-base">
|
||||
{{ $locale.baseText('workflows.empty.startFromScratch') }}
|
||||
</n8n-text>
|
||||
</n8n-card>
|
||||
<n8n-card :class="$style.emptyStateCard" hoverable @click="goToTemplates">
|
||||
<n8n-icon :class="$style.emptyStateCardIcon" icon="box-open" />
|
||||
<n8n-text size="large" class="mt-xs" color="text-base">
|
||||
{{ $locale.baseText('workflows.empty.browseTemplates') }}
|
||||
</n8n-text>
|
||||
</n8n-card>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:filters="{ setKeyValue }">
|
||||
<div class="mb-s" v-if="areTagsEnabled">
|
||||
<n8n-input-label
|
||||
:label="$locale.baseText('workflows.filters.tags')"
|
||||
:bold="false"
|
||||
size="small"
|
||||
color="text-base"
|
||||
class="mb-3xs"
|
||||
/>
|
||||
<TagsDropdown
|
||||
:placeholder="$locale.baseText('workflowOpen.filterWorkflows')"
|
||||
:currentTagIds="filters.tags"
|
||||
:createEnabled="false"
|
||||
@update="setKeyValue('tags', $event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</resources-list-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {showMessage} from '@/components/mixins/showMessage';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
import SettingsView from './SettingsView.vue';
|
||||
import ResourcesListLayout from "@/components/layouts/ResourcesListLayout.vue";
|
||||
import PageViewLayout from "@/components/layouts/PageViewLayout.vue";
|
||||
import PageViewLayoutList from "@/components/layouts/PageViewLayoutList.vue";
|
||||
import WorkflowCard from "@/components/WorkflowCard.vue";
|
||||
import TemplateCard from "@/components/TemplateCard.vue";
|
||||
import { debounceHelper } from '@/components/mixins/debounce';
|
||||
import {VIEWS} from '@/constants';
|
||||
import Vue from "vue";
|
||||
import {ITag, IUser, IWorkflowDb} from "@/Interface";
|
||||
import TagsDropdown from "@/components/TagsDropdown.vue";
|
||||
|
||||
type IResourcesListLayoutInstance = Vue & { sendFiltersTelemetry: (source: string) => void };
|
||||
|
||||
export default mixins(
|
||||
showMessage,
|
||||
debounceHelper,
|
||||
).extend({
|
||||
name: 'SettingsPersonalView',
|
||||
components: {
|
||||
ResourcesListLayout,
|
||||
TemplateCard,
|
||||
PageViewLayout,
|
||||
PageViewLayoutList,
|
||||
SettingsView,
|
||||
WorkflowCard,
|
||||
TagsDropdown,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filters: {
|
||||
search: '',
|
||||
ownedBy: '',
|
||||
sharedWith: '',
|
||||
tags: [] as string[],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentUser(): IUser {
|
||||
return this.$store.getters['users/currentUser'];
|
||||
},
|
||||
areTagsEnabled(): boolean {
|
||||
return this.$store.getters['settings/areTagsEnabled'];
|
||||
},
|
||||
allWorkflows(): IWorkflowDb[] {
|
||||
return this.$store.getters['allWorkflows'];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addWorkflow() {
|
||||
this.$router.push({ name: VIEWS.NEW_WORKFLOW });
|
||||
|
||||
this.$telemetry.track('User clicked add workflow button', {
|
||||
source: 'Workflows list',
|
||||
});
|
||||
},
|
||||
goToTemplates() {
|
||||
this.$router.push({ name: VIEWS.TEMPLATES });
|
||||
},
|
||||
async initialize() {
|
||||
this.$store.dispatch('users/fetchUsers'); // Can be loaded in the background, used for filtering
|
||||
|
||||
return await Promise.all([
|
||||
this.$store.dispatch('fetchAllWorkflows'),
|
||||
this.$store.dispatch('fetchActiveWorkflows'),
|
||||
]);
|
||||
},
|
||||
onClickTag(tagId: string, event: PointerEvent) {
|
||||
if (!this.filters.tags.includes(tagId)) {
|
||||
this.filters.tags.push(tagId);
|
||||
}
|
||||
},
|
||||
onFilter(resource: IWorkflowDb, filters: { tags: string[]; search: string; }, matches: boolean): boolean {
|
||||
if (this.areTagsEnabled && filters.tags.length > 0) {
|
||||
matches = matches && filters.tags.every(
|
||||
(tag) => (resource.tags as ITag[])?.find((resourceTag) => typeof resourceTag === 'object' ? `${resourceTag.id}` === `${tag}` : `${resourceTag}` === `${tag}`),
|
||||
);
|
||||
}
|
||||
|
||||
return matches;
|
||||
},
|
||||
sendFiltersTelemetry(source: string) {
|
||||
(this.$refs.layout as IResourcesListLayoutInstance).sendFiltersTelemetry(source);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'filters.tags'() {
|
||||
this.sendFiltersTelemetry('tags');
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('users/showPersonalizationSurvey');
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.emptyStateCard {
|
||||
width: 192px;
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
height: 230px;
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emptyStateCardIcon {
|
||||
font-size: 48px;
|
||||
|
||||
svg {
|
||||
width: 48px!important;
|
||||
color: var(--color-foreground-dark);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in a new issue