2b6cccdead
All checks were successful
Build Docker Image / build (push) Successful in 5m8s
- Remove all Storybook files and configuration - Add type declarations for @vueuse/core, @formkit/core, vue3-apexcharts - Fix TypeScript configuration (typeRoots, include paths) - Fix Sentry config - move settings to plugin - Fix nullable prop assignments with ?? operator - Fix type narrowing issues with explicit type assertions - Fix Card component linkable computed properties - Update codegen with operationResultSuffix - Fix GraphQL operation type definitions
79 lines
2.3 KiB
Vue
79 lines
2.3 KiB
Vue
<template>
|
|
<div class="card bg-base-100 border border-base-300 shadow">
|
|
<div class="card-body gap-4">
|
|
<div class="flex justify-between items-start gap-3">
|
|
<div>
|
|
<h3 class="font-semibold text-base-content text-lg">{{ team.name }}</h3>
|
|
<p class="text-sm text-base-content/60 mt-1">
|
|
{{ $t('teams.created') }}: {{ formatDate(team.createdAt) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Members Preview -->
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-base-content/80">{{ $t('teams.members') }}</span>
|
|
<span class="text-sm text-base-content/60">{{ membersCount }}</span>
|
|
</div>
|
|
|
|
<div class="flex -space-x-2">
|
|
<div
|
|
v-for="(member, index) in displayMembers"
|
|
:key="member.id"
|
|
class="w-8 h-8 rounded-full bg-primary text-primary-content border-2 border-base-100 flex items-center justify-center text-xs font-medium"
|
|
:title="member.userId"
|
|
>
|
|
{{ getInitials(member.userId) }}
|
|
</div>
|
|
<div
|
|
v-if="remainingMembers > 0"
|
|
class="w-8 h-8 rounded-full bg-base-300 text-base-content border-2 border-base-100 flex items-center justify-center text-xs font-medium"
|
|
>
|
|
+{{ remainingMembers }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface TeamMember {
|
|
id: string
|
|
userId: string
|
|
role?: string | null
|
|
}
|
|
|
|
interface Team {
|
|
id?: string | null
|
|
name: string
|
|
createdAt?: string | null
|
|
members?: TeamMember[] | null
|
|
}
|
|
|
|
interface Props {
|
|
team: Team
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const membersCount = computed(() => props.team?.members?.length || 1)
|
|
const displayMembers = computed(() => (props.team?.members || []).slice(0, 3))
|
|
const remainingMembers = computed(() => Math.max(0, membersCount.value - 3))
|
|
|
|
const formatDate = (dateString: string | null | undefined) => {
|
|
if (!dateString) return ''
|
|
try {
|
|
return new Date(dateString).toLocaleDateString('ru-RU')
|
|
} catch (e) {
|
|
return dateString
|
|
}
|
|
}
|
|
|
|
const getInitials = (userId: string) => {
|
|
if (!userId) return '??'
|
|
return userId.substring(0, 2).toUpperCase()
|
|
}
|
|
</script>
|