mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 10:31:15 +00:00
138 lines
3.2 KiB
Vue
138 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
|
import { ref, computed } from 'vue';
|
|
import type { TableHeader } from '@n8n/design-system/components/N8nDataTableServer';
|
|
import type { RouteLocationRaw } from 'vue-router';
|
|
import { VIEWS } from '@/constants';
|
|
import type { WorkflowResource } from '@/Interface';
|
|
import ProjectCardBadge from '@/components/Projects/ProjectCardBadge.vue';
|
|
import { useI18n } from '@n8n/i18n';
|
|
import { ResourceType } from '@/utils/projects.utils';
|
|
import { useProjectsStore } from '@/stores/projects.store';
|
|
|
|
type WorkflowData = WorkflowResource[];
|
|
|
|
type WorkflowDataItem = WorkflowData[number];
|
|
|
|
type WorkflowDataKeys = keyof WorkflowDataItem;
|
|
|
|
const props = defineProps<{
|
|
data: WorkflowData;
|
|
}>();
|
|
|
|
const sortBy = defineModel<Array<{ id: WorkflowDataKeys; desc: boolean }>>('sortBy');
|
|
|
|
const i18n = useI18n();
|
|
const projectsStore = useProjectsStore();
|
|
|
|
const headers = ref<Array<TableHeader<WorkflowDataItem>>>([
|
|
{
|
|
title: 'Workflow',
|
|
key: 'name',
|
|
width: 250,
|
|
},
|
|
{
|
|
title: 'Owner',
|
|
key: 'homeProject.name',
|
|
width: 100,
|
|
},
|
|
{
|
|
title: 'Status',
|
|
key: 'active',
|
|
width: 30,
|
|
},
|
|
]);
|
|
|
|
const sortedItems = computed(() => {
|
|
if (!sortBy?.value?.length) return props.data;
|
|
|
|
const [{ id, desc }] = sortBy.value;
|
|
|
|
return [...props.data].sort((a, b) => {
|
|
if (!a[id] || !b[id]) return 0;
|
|
if (a[id] < b[id]) return desc ? 1 : -1;
|
|
if (a[id] > b[id]) return desc ? -1 : 1;
|
|
return 0;
|
|
});
|
|
});
|
|
|
|
const getWorkflowLink = (workflowId: string): RouteLocationRaw => ({
|
|
name: VIEWS.WORKFLOW,
|
|
params: {
|
|
name: workflowId,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<N8nDataTableServer
|
|
v-if="sortedItems?.length"
|
|
v-model:sort-by="sortBy"
|
|
:headers="headers"
|
|
:items="sortedItems"
|
|
:items-length="sortedItems.length"
|
|
:page-sizes="[sortedItems.length + 1]"
|
|
>
|
|
<template #[`item.name`]="{ item }">
|
|
<router-link :to="getWorkflowLink(item.id)" target="_blank">
|
|
<N8nText class="ellipsis" style="color: var(--color-text-base)">{{ item.name }}</N8nText>
|
|
</router-link>
|
|
</template>
|
|
<template #[`item.homeProject.name`]="{ item }">
|
|
<div>
|
|
<ProjectCardBadge
|
|
class="cardBadge"
|
|
:resource="item"
|
|
:resource-type="ResourceType.Workflow"
|
|
:resource-type-label="i18n.baseText('generic.workflow').toLowerCase()"
|
|
:personal-project="projectsStore.personalProject"
|
|
:show-badge-border="false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #[`item.active`]="{ item }">
|
|
<span v-if="item.active" class="status active">Active</span>
|
|
<span v-else class="status inactive">Inactive</span>
|
|
</template>
|
|
</N8nDataTableServer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Use deep selector to access internal scroll container in N8nDataTableServer */
|
|
:deep(.n8n-data-table-server-wrapper .table-scroll) {
|
|
max-height: 275px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.status {
|
|
border-style: solid;
|
|
border-width: var(--border-width-base);
|
|
padding: var(--spacing-4xs);
|
|
border-radius: var(--border-radius-base);
|
|
}
|
|
|
|
.active {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.inactive {
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
.ellipsis {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.2;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.cardBadge {
|
|
margin-right: auto;
|
|
width: fit-content;
|
|
}
|
|
</style>
|