138 lines
4.5 KiB
Vue
138 lines
4.5 KiB
Vue
<template>
|
|
<div class="">
|
|
<template v-for="category in categoryList" :key="category.CMNCODVAL">
|
|
<div
|
|
v-if="
|
|
(category.CMNCODVAL === 300201 && birthdayList?.length) ||
|
|
(category.CMNCODVAL === 300202 && vacationList?.length) ||
|
|
(category.CMNCODVAL === 300203 && birthdayPartyList?.length) ||
|
|
(category.CMNCODVAL === 300204 && dinnerList?.length) ||
|
|
(category.CMNCODVAL === 300205 && teaTimeList?.length) ||
|
|
(category.CMNCODVAL === 300206 && workShopList?.length)
|
|
"
|
|
@click="category.CMNCODVAL == 300202 ? $emit('handleClickVacation') : ''"
|
|
:class="category.CMNCODVAL == 300202 ? 'pointer' : ''"
|
|
class="border border-2 mt-3 card p-2"
|
|
>
|
|
<div class="row g-2 position-relative">
|
|
<div class="col-3 mx-0 px-0">
|
|
<div class="ratio ratio-1x1">
|
|
<img
|
|
:src="`${baseUrl}img/main-category-img/main-${category.CMNCODVAL}.png`"
|
|
:alt="`${category.CMNCODNAM}`"
|
|
@error="$event.target.src = '/img/icons/icon.png'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-9 mx-0 px-0 d-flex align-items-center">
|
|
<template v-if="category.CMNCODVAL === 300201">
|
|
<MainMemberProfile :members="birthdayList" :baseUrl="baseUrl" />
|
|
</template>
|
|
<template v-if="category.CMNCODVAL === 300202">
|
|
<MainMemberProfile :members="vacationList" :baseUrl="baseUrl" />
|
|
</template>
|
|
<template v-if="category.CMNCODVAL === 300203">
|
|
<MainEventBoard :place="birthdayPartyList[0].LOCEVTPLC" :time="birthdayPartyList[0].LOCEVTTME" />
|
|
</template>
|
|
<template v-if="category.CMNCODVAL === 300204">
|
|
<MainEventBoard :place="dinnerList[0].LOCEVTPLC" :time="dinnerList[0].LOCEVTTME" />
|
|
</template>
|
|
<template v-if="category.CMNCODVAL === 300205">
|
|
<MainEventBoard :place="teaTimeList[0].LOCEVTPLC" :time="teaTimeList[0].LOCEVTTME" />
|
|
</template>
|
|
<template v-if="category.CMNCODVAL === 300206">
|
|
<MainEventBoard :place="workShopList[0].LOCEVTPLC" :time="workShopList[0].LOCEVTTME" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineEmits } from 'vue';
|
|
import MainMemberProfile from '@c/main/MainMemberProfile.vue';
|
|
import MainEventBoard from '@c/main/MainEventBoard.vue';
|
|
|
|
const props = defineProps({
|
|
project: {
|
|
type: Object,
|
|
required: false,
|
|
},
|
|
categoryList: {
|
|
type: Array,
|
|
},
|
|
commuters: {
|
|
type: Array,
|
|
required: false,
|
|
},
|
|
baseUrl: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
user: {
|
|
type: Object,
|
|
required: false,
|
|
},
|
|
selectedProject: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
checkedInProject: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
birthdayList: {
|
|
type: Array,
|
|
},
|
|
vacationList: {
|
|
type: Array,
|
|
},
|
|
birthdayPartyList: {
|
|
type: Array,
|
|
},
|
|
dinnerList: {
|
|
type: Array,
|
|
},
|
|
teaTimeList: {
|
|
type: Array,
|
|
},
|
|
workShopList: {
|
|
type: Array,
|
|
},
|
|
});
|
|
|
|
defineEmits(['handleClickVacation']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.event-board {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.event-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.label {
|
|
font-weight: 500;
|
|
color: #666;
|
|
min-width: 3rem;
|
|
}
|
|
|
|
.content {
|
|
color: #333;
|
|
word-break: break-all;
|
|
}
|
|
</style>
|