Mike
106 lines
2.8 KiB
Vue
106 lines
2.8 KiB
Vue
<template>
|
|
<div
|
|
class="bg-foundation border border-outline-3 rounded-xl p-5 pb-4 flex flex-col gap-y-3"
|
|
>
|
|
<NuxtLink
|
|
:to="projectRoute(project.id)"
|
|
class="text-heading hover:text-primary truncate"
|
|
>
|
|
{{ project.name }}
|
|
</NuxtLink>
|
|
<div class="flex-1 gap-y-3">
|
|
<p class="text-body-3xs text-foreground-2">
|
|
<span class="capitalize">
|
|
{{ project.role?.split(':').reverse()[0] }}
|
|
</span>
|
|
<span class="pl-1 pr-2">•</span>
|
|
<span v-tippy="updatedAt.full">
|
|
{{ updatedAt.relative }}
|
|
</span>
|
|
</p>
|
|
<UserAvatarGroup :users="teamUsers" :max-count="4" class="pt-3 -ml-0.5" />
|
|
</div>
|
|
<div class="flex flex-col gap-y-3 pt-1">
|
|
<NuxtLink
|
|
v-if="project.workspace && isWorkspacesEnabled"
|
|
:to="workspaceRoute(project.workspace.slug)"
|
|
class="flex items-center"
|
|
>
|
|
<WorkspaceAvatar
|
|
:logo="project.workspace.logo"
|
|
:name="project.workspace.name"
|
|
size="sm"
|
|
/>
|
|
<p class="text-body-2xs text-foreground ml-2">
|
|
{{ project.workspace.name }}
|
|
</p>
|
|
</NuxtLink>
|
|
<FormButton
|
|
:to="allProjectModelsRoute(project.id)"
|
|
size="sm"
|
|
color="outline"
|
|
:icon-right="ChevronRightIcon"
|
|
>
|
|
{{
|
|
`${project.models.totalCount} ${
|
|
project.models.totalCount === 1 ? 'model' : 'models'
|
|
}`
|
|
}}
|
|
</FormButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { graphql } from '~~/lib/common/generated/gql'
|
|
import type { DashboardProjectCard_ProjectFragment } from '~~/lib/common/generated/gql/graphql'
|
|
import { projectRoute, allProjectModelsRoute } from '~~/lib/common/helpers/route'
|
|
import { ChevronRightIcon } from '@heroicons/vue/20/solid'
|
|
import { useGeneralProjectPageUpdateTracking } from '~~/lib/projects/composables/projectPages'
|
|
import { workspaceRoute } from '~/lib/common/helpers/route'
|
|
|
|
graphql(`
|
|
fragment DashboardProjectCard_Project on Project {
|
|
id
|
|
name
|
|
role
|
|
updatedAt
|
|
models {
|
|
totalCount
|
|
}
|
|
team {
|
|
user {
|
|
...LimitedUserAvatar
|
|
}
|
|
}
|
|
workspace {
|
|
id
|
|
slug
|
|
name
|
|
logo
|
|
}
|
|
}
|
|
`)
|
|
|
|
const props = defineProps<{
|
|
project: DashboardProjectCard_ProjectFragment
|
|
}>()
|
|
|
|
const isWorkspacesEnabled = useIsWorkspacesEnabled()
|
|
|
|
const projectId = computed(() => props.project.id)
|
|
|
|
useGeneralProjectPageUpdateTracking(
|
|
{ projectId },
|
|
{ redirectHomeOnProjectDeletion: false }
|
|
)
|
|
|
|
const teamUsers = computed(() => props.project.team.map((t) => t.user))
|
|
const updatedAt = computed(() => {
|
|
return {
|
|
full: formattedFullDate(props.project.updatedAt),
|
|
relative: formattedRelativeDate(props.project.updatedAt, { capitalize: true })
|
|
}
|
|
})
|
|
</script>
|