localhost-front/src/components/main/MainEventList.vue

123 lines
4.4 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)
"
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">
<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">
<div>
{{ birthdayPartyList[0].LOCEVTPLC }}
</div>
<div>
{{ $common.dateFormatter(birthdayPartyList[0].LOCEVTTME) }}
</div>
</template>
<template v-if="category.CMNCODVAL === 300204">
<div>
{{ dinnerList[0].LOCEVTPLC }}
</div>
<div>
{{ $common.dateFormatter(dinnerList[0].LOCEVTTME) }}
</div>
</template>
<template v-if="category.CMNCODVAL === 300205">
<div>
{{ teaTimeList[0].LOCEVTPLC }}
</div>
<div>
{{ $common.dateFormatter(teaTimeList[0].LOCEVTTME) }}
</div>
</template>
<template v-if="category.CMNCODVAL === 300206">
<div>
{{ workShopList[0].LOCEVTPLC }}
</div>
<div>
{{ $common.dateFormatter(workShopList[0].LOCEVTTME) }}
</div>
</template>
</div>
</div>
</div>
</template>
</div>
</template>
<script setup>
import { defineEmits } from 'vue';
import MainMemberProfile from '@c/main/MainMemberProfile.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,
},
});
</script>