mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 01:56:46 +00:00
102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useI18n } from '@/composables/useI18n';
|
|
import {
|
|
type Project,
|
|
type ProjectIcon as ProjectIconType,
|
|
ProjectTypes,
|
|
} from '@/types/projects.types';
|
|
|
|
type Props = {
|
|
currentProject: Project;
|
|
isDragging?: boolean;
|
|
};
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
isDragging: false,
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
projectHover: [];
|
|
projectDrop: [];
|
|
}>();
|
|
|
|
const i18n = useI18n();
|
|
|
|
const projectIcon = computed((): ProjectIconType => {
|
|
if (props.currentProject?.type === ProjectTypes.Personal) {
|
|
return { type: 'icon', value: 'user' };
|
|
} else if (props.currentProject?.name) {
|
|
return props.currentProject.icon ?? { type: 'icon', value: 'layer-group' };
|
|
} else {
|
|
return { type: 'icon', value: 'home' };
|
|
}
|
|
});
|
|
|
|
const projectName = computed(() => {
|
|
if (props.currentProject.type === ProjectTypes.Personal) {
|
|
return i18n.baseText('projects.menu.personal');
|
|
}
|
|
return props.currentProject.name;
|
|
});
|
|
|
|
const onHover = () => {
|
|
emit('projectHover');
|
|
};
|
|
|
|
const onProjectMouseUp = () => {
|
|
if (props.isDragging) {
|
|
emit('projectDrop');
|
|
}
|
|
};
|
|
</script>
|
|
<template>
|
|
<div
|
|
:class="{ [$style['home-project']]: true, [$style.dragging]: isDragging }"
|
|
data-test-id="home-project"
|
|
@mouseenter="onHover"
|
|
@mouseup="isDragging ? onProjectMouseUp() : null"
|
|
>
|
|
<n8n-link :to="`/projects/${currentProject.id}`" :class="[$style['project-link']]">
|
|
<ProjectIcon :icon="projectIcon" :border-less="true" size="mini" :title="projectName" />
|
|
<N8nText size="medium" color="text-base" :class="$style['project-label']">
|
|
{{ projectName }}
|
|
</N8nText>
|
|
</n8n-link>
|
|
</div>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
.home-project {
|
|
display: flex;
|
|
padding: var(--spacing-3xs) var(--spacing-4xs) var(--spacing-4xs);
|
|
border: var(--border-width-base) var(--border-style-base) transparent;
|
|
|
|
&.dragging:hover {
|
|
border: var(--border-width-base) var(--border-style-base) var(--color-secondary);
|
|
border-radius: var(--border-radius-base);
|
|
background-color: var(--color-callout-secondary-background);
|
|
* {
|
|
cursor: grabbing;
|
|
color: var(--color-text-base);
|
|
}
|
|
}
|
|
|
|
&:hover :global(.n8n-text) {
|
|
color: var(--color-text-dark);
|
|
}
|
|
}
|
|
|
|
.project-link :global(.n8n-text) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4xs);
|
|
}
|
|
|
|
:global(.n8n-text).project-label {
|
|
@media (max-width: $breakpoint-sm) {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|