jaybe/bowlingManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

정리

Browse Source
This commit is contained in:
Jaybe
2025-05-09 00:54:10 +09:00
parent 744a0db3bd
commit 486ae6de6b
15 changed files with 295 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/event/EventDetailsDialog.vue
+73 -66
View File
@@ -7,70 +7,81 @@
:modal="true"
class="event-details-dialog"
>
<TabView>
<Tabs value="기본정보">
<TabList>
<Tab value="기본정보"><i class="pi pi-info-circle mr-2" />기본정보</Tab>
<Tab value="참가자 관리"><i class="pi pi-users mr-2" />참가자 관리</Tab>
<Tab value="점수 관리"><i class="pi pi-chart-bar mr-2" />점수 관리</Tab>
<Tab value="팀 편성"><i class="pi pi-sitemap mr-2" />팀 편성</Tab>
</TabList>
<TabPanels>
<!-- 기본 정보 탭 -->
<TabPanel header="기본 정보">
<div class="event-details">
<div class="event-details-header">
<Badge :value="getEventTypeName(eventModel.eventType)" :severity="getStatusSeverity(eventModel.status)" />
<Badge :value="getStatusName(eventModel.status)" :severity="getStatusSeverity(eventModel.status)" />
</div>
<div class="event-details-content">
<div class="event-details-section">
<h4>이벤트 정보</h4>
<TabPanel value="기본정보">
<div class="event-details p-3">
<div class="flex align-items-center gap-2 mb-3">
<Badge :value="getEventTypeName(eventModel.eventType)" :severity="getStatusSeverity(eventModel.status)" />
<Badge :value="getStatusName(eventModel.status)" :severity="getStatusSeverity(eventModel.status)" />
</div>
<div class="card surface-100 p-3 mb-3">
<div class="grid">
<div class="col-12 md:col-6">
<p><strong>시작일:</strong> {{ formattedStartDate }}</p>
<p><strong>종료일:</strong> {{ formattedEndDate }}</p>
<p><strong>장소:</strong> {{ eventModel.location }}</p>
<p v-if="eventModel.publicHash">
<strong>공개 URL:</strong>
<InputText :value="publicEventUrl" readonly style="width:70%" class="mr-2" />
<Button icon="pi pi-copy" @click="copyPublicUrl" class="p-button-sm" v-tooltip.bottom="'복사'" />
</p>
<p v-if="eventModel.accessPassword">
<strong>공개 비밀번호:</strong> {{ eventModel.accessPassword }}
</p>
<div class="col-12 md:col-6 mb-2">
<span class="font-bold text-color-secondary">시작일:</span>
<span class="ml-2">{{ formattedStartDate }}</span>
</div>
<div class="col-12 md:col-6">
<p><strong>최대 참가자 수:</strong> {{ eventModel.maxParticipants || '제한 없음' }}</p>
<p><strong>현재 참가자 수:</strong> {{ eventModel.participants?.length || 0 }}</p>
<div class="col-12 md:col-6 mb-2">
<span class="font-bold text-color-secondary">종료일:</span>
<span class="ml-2">{{ formattedEndDate }}</span>
</div>
<div class="col-12 md:col-6 mb-2">
<span class="font-bold text-color-secondary">장소:</span>
<span class="ml-2">{{ eventModel.location }}</span>
</div>
<div class="col-12 md:col-6 mb-2">
<span class="font-bold text-color-secondary">참가자 수:</span>
<span class="ml-2">{{ eventModel.currentParticipants }} / {{ eventModel.maxParticipants }}</span>
</div>
<div class="col-12 md:col-6 mb-2 flex align-items-center">
<span class="font-bold text-color-secondary">공개 URL:</span>
<InputText :value="publicEventUrl" class="ml-2 w-full" readonly />
<Button icon="pi pi-copy" class="ml-2" @click="copyPublicUrl" />
</div>
<div class="col-12 md:col-6 mb-2">
<span class="font-bold text-color-secondary">공개 비밀번호:</span>
<span class="ml-2">{{ eventModel.publicPassword }}</span>
</div>
</div>
</div>
<div class="event-details-section">
<h4>설명</h4>
<p>{{ eventModel.description || '설명이 없습니다.' }}</p>
<div class="card surface-100 p-3">
<span class="font-bold text-color-secondary">설명</span>
<div class="mt-2">{{ eventModel.description }}</div>
</div>
</div>
</div>
</TabPanel>
</TabPanel>
<!-- 참가자 관리 탭 -->
<TabPanel header="참가자 관리">
<ParticipantManagement
:eventId="eventModel.id"
:availableMembers="availableMembers"
@participant-updated="handleParticipantUpdated"
/>
</TabPanel>
<!-- 참가자 관리 탭 -->
<TabPanel value="참가자 관리">
<ParticipantManagement
:eventId="eventModel.id"
:availableMembers="availableMembers"
@participant-updated="handleParticipantUpdated"
/>
</TabPanel>
<!-- 점수 관리 탭 -->
<TabPanel header="점수 관리">
<ScoreManagement
:eventId="eventModel.id"
:participants="eventModel.participants || []"
:maxGames="eventModel.gameCount"
@score-updated="$emit('score-updated')"
/>
</TabPanel>
<!-- 팀 편성 탭 -->
<TabPanel header="팀 편성">
<TeamGeneration :participants="confirmedParticipants" :teams="teams" @update:teams="teams = $event" @teams-generated="teams = $event" @save-teams="handleSaveTeams" />
</TabPanel>
</TabView>
<!-- 점수 관리 탭 -->
<TabPanel value="점수 관리">
<ScoreManagement
:eventId="eventModel.id"
:participants="eventModel.participants || []"
:maxGames="eventModel.gameCount"
@score-updated="$emit('score-updated')"
/>
</TabPanel>
<!-- 팀 편성 탭 -->
<TabPanel value="팀 편성">
<TeamGeneration :participants="confirmedParticipants" :teams="teams" @save-teams="handleSaveTeams" />
</TabPanel>
</TabPanels>
</Tabs>
<template #footer>
<div class="dialog-footer">
@@ -84,15 +95,8 @@
import { ref, computed, watch } from 'vue';
import TeamGeneration from './TeamGeneration.vue';
import Dialog from 'primevue/dialog';
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
import Badge from 'primevue/badge';
import Button from 'primevue/button';
import InputNumber from 'primevue/inputnumber';
import InputText from 'primevue/inputtext';
import ParticipantManagement from './ParticipantManagement.vue';
import ScoreManagement from './ScoreManagement.vue';
import dayjs from 'dayjs';
const props = defineProps({
visible: { type: Boolean, required: true },
@@ -144,11 +148,13 @@ watch(() => eventModel.value.id, async (eventId) => {
}, { immediate: true });
// 참가확정 참가자 목록을 계산하는 computed 속성
const confirmedParticipants = computed(() => {
const confirmedParticipants = ref([]);
function updateConfirmedParticipants() {
const arr = eventModel.value.EventParticipants?.filter(p => p.status === '참가확정' || p.status === '참가예정') || [];
console.log('[상위] 참가확정:', arr);
return arr;
});
confirmedParticipants.value = arr;
}
// 최초 및 eventModel 변경 시 동기화
watch(() => eventModel.value.EventParticipants, updateConfirmedParticipants, { immediate: true, deep: true });
// 참가확정 인원 수
const confirmedCount = computed(() => confirmedParticipants.value.length);
@@ -176,11 +182,12 @@ async function handleSaveTeams(savedTeams) {
function handleParticipantUpdated(data) {
// 부모 컴포넌트에 이벤트 전달
emit('participant-updated', data);
// 전체 참가자 목록이 있는 경우 직접 업데이트
if (data.allParticipants) {
// EventParticipants 속성을 완전히 대체
eventModel.value.EventParticipants = [...data.allParticipants];
// 참가확정 참가자도 즉시 반영
updateConfirmedParticipants();
}
};