119 lines
4.4 KiB
Vue
119 lines
4.4 KiB
Vue
<template>
|
|
<div class="">
|
|
<template v-for="category in categoryList" :key="category.CMNCODVAL">
|
|
<div class="border border-2 mt-3 card p-2">
|
|
<div class="row g-2">
|
|
<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">
|
|
<div class="ms-2">
|
|
<ul class="row gx-1 mb-0 list-inline d-flex align-items-center">
|
|
<li class="col-4 me-0" v-for="member in birthdayList" :key="member.MEMBERSEQ">
|
|
<div class="ratio ratio-1x1 mb-0 profile-list">
|
|
<img
|
|
:src="`${baseUrl}upload/img/profile/${member.MEMBERPRF}`"
|
|
alt="User Profile"
|
|
class="rounded-circle"
|
|
@error="$event.target.src = '/img/icons/icon.png'"
|
|
/>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<template v-if="category.CMNCODVAL === 300202">
|
|
<div class="ms-2">
|
|
<ul class="row gx-1 mb-0 list-inline d-flex align-items-center">
|
|
<li class="col-4 me-0" v-for="member in vacationList" :key="member.MEMBERSEQ">
|
|
<div class="ratio ratio-1x1 mb-0 profile-list">
|
|
<img
|
|
:src="`${baseUrl}upload/img/profile/${member.MEMBERPRF}`"
|
|
alt="User Profile"
|
|
class="rounded-circle"
|
|
@error="$event.target.src = '/img/icons/icon.png'"
|
|
/>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineEmits } from '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,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['drop', 'update:selectedProject', 'update:checkedInProject']);
|
|
|
|
// 현재 사용자 확인
|
|
const isCurrentUser = commuter => {
|
|
return props.user && commuter && commuter.MEMBERSEQ === props.user.id;
|
|
};
|
|
|
|
// 드래그 시작 이벤트 핸들러
|
|
const dragStart = (event, project) => {
|
|
// 드래그 데이터 설정
|
|
event.dataTransfer.setData('application/json', JSON.stringify(project));
|
|
event.dataTransfer.effectAllowed = 'copy';
|
|
};
|
|
|
|
// 드래그 오버 드롭 허용
|
|
const allowDrop = event => {
|
|
event.preventDefault();
|
|
};
|
|
|
|
// 드롭
|
|
const handleDrop = (event, targetProject) => {
|
|
event.preventDefault();
|
|
emit('drop', { event, targetProject });
|
|
};
|
|
</script>
|