86 lines
3.7 KiB
Vue
86 lines
3.7 KiB
Vue
<template>
|
|
<div class="team-title-row">
|
|
<span class="team-name-strong">{{ title }}</span>
|
|
<span v-if="teamHandicap" class="team-hc">팀 핸디캡: {{ teamHandicap }}</span>
|
|
</div>
|
|
<div class="member-list">
|
|
<div v-for="member in members" :key="member.participantId" class="member-row">
|
|
<div class="member-info-block">
|
|
<div class="member-header-row">
|
|
<span class="member-name">{{ member.name }}</span>
|
|
<Tag v-if="member.isGuest" value="G" severity="warning" class="ml-2" />
|
|
</div>
|
|
<div class="info-under-name">
|
|
{{ member.gender || '-' }}
|
|
<span v-if="member.status" :class="{
|
|
'status-cancel': member.status === '취소',
|
|
'status-pending': member.status === '참가예정'
|
|
}">
|
|
· {{ member.status }}
|
|
</span>
|
|
<span v-if="member.paymentStatus" :class="{
|
|
'payment-unpaid': member.paymentStatus === '미납'
|
|
}">
|
|
· {{ member.paymentStatus }}
|
|
</span>
|
|
</div>
|
|
<div class="member-meta">핸디캡: {{ member.handicap ?? '-' }} / 에버리지: {{ member.average ?? '-' }}</div>
|
|
<div class="member-meta">{{ member.comment }}</div>
|
|
</div>
|
|
<div class="score-inputs-vertical">
|
|
<template v-for="n in gameCount" :key="n">
|
|
<div class="score-input-hc-wrap">
|
|
<div class="score-input-status-wrap">
|
|
<InputText
|
|
v-if="canInputScore"
|
|
v-model.number="scoresProxy[member.participantId + '-' + n]"
|
|
type="number"
|
|
class="score-input"
|
|
:placeholder="n + 'G'"
|
|
maxlength="3"
|
|
@input="onScoreInput(member, n, teamNumber)"
|
|
@blur="onScoreBlur(member, n, teamNumber)"
|
|
@keydown.enter="onScoreEnter(member, n, teamNumber)"
|
|
/>
|
|
<span v-else>{{ member.scores?.[n - 1] ?? '-' }}</span>
|
|
<span :class="scoreColorClass(scoreStates[member.participantId + '-' + n], scoresProxy[member.participantId + '-' + n], member.handicap)"
|
|
class="score-hc-value score-status-text"
|
|
:key="scoreStates[member.participantId + '-' + n] + '-' + scoresProxy[member.participantId + '-' + n]">
|
|
{{ (scoresProxy[member.participantId + '-' + n] !== undefined && scoresProxy[member.participantId + '-' + n] !== '') ?
|
|
Number(scoresProxy[member.participantId + '-' + n]) + (Number(member.handicap) || 0) : ''
|
|
}}
|
|
<i v-if="scoreStates[member.participantId + '-' + n] === 'saving'" class="pi pi-spin pi-spinner score-status-icon" />
|
|
<i v-else-if="scoreStates[member.participantId + '-' + n] === 'saved'" class="pi pi-check score-status-icon" />
|
|
<i v-else-if="scoreStates[member.participantId + '-' + n] === 'error'" class="pi pi-times score-status-icon" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="member-score-summary">
|
|
<span>총점: {{ getMemberTotalScore(member) }}</span>
|
|
<span class="member-score-avg">/ 에버리지: {{ getMemberAverageScore(member) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { toRefs } from 'vue'
|
|
const props = defineProps({
|
|
title: String,
|
|
members: Array,
|
|
teamHandicap: [Number, String],
|
|
teamNumber: [Number, String, null],
|
|
gameCount: Number,
|
|
canInputScore: Boolean,
|
|
scoresProxy: Object,
|
|
scoreStates: Object,
|
|
onScoreInput: Function,
|
|
onScoreBlur: Function,
|
|
onScoreEnter: Function,
|
|
getMemberTotalScore: Function,
|
|
getMemberAverageScore: Function,
|
|
scoreColorClass: Function
|
|
})
|
|
</script>
|