112 lines
3.4 KiB
Vue
112 lines
3.4 KiB
Vue
<template>
|
|
<div class="commuter-list mt-3">
|
|
<div
|
|
v-for="post in sortedProjects"
|
|
:key="post.PROJCTSEQ"
|
|
class="border border-2 mb-3 card p-2"
|
|
:style="`border-color: ${post.projctcolor} !important; color: ${post.projctcolor} !important;`"
|
|
@dragover="allowDrop($event)"
|
|
@drop="handleDrop($event, post)"
|
|
>
|
|
<p class="mb-1">
|
|
{{ post.PROJCTNAM }}
|
|
</p>
|
|
<div class="row gx-2">
|
|
<div
|
|
v-for="commuter in commuters.filter(c =>
|
|
(c.PROJCTLVE ? c.PROJCTLVE === post.PROJCTSEQ : c.PROJCTNAM === post.PROJCTNAM)
|
|
)"
|
|
:key="commuter.MEMBERSEQ"
|
|
class="col-4"
|
|
>
|
|
<div class="ratio ratio-1x1">
|
|
<img
|
|
:src="`${baseUrl}upload/img/profile/${commuter.profile}`"
|
|
alt="User Profile"
|
|
class="rounded-circle object-fit-cover"
|
|
:class="isCurrentUser(commuter) ? 'cursor-pointer' : ''"
|
|
:draggable="isCurrentUser(commuter)"
|
|
@dragstart="isCurrentUser(commuter) ? dragStart($event, post) : null"
|
|
@error="$event.target.src = '/img/icons/icon.png'"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits, computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
project: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
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
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['drop', 'update:selectedProject', 'update:checkedInProject']);
|
|
|
|
// 프로젝트 참여인원 순 정렬
|
|
const sortedProjects = computed(() => {
|
|
const projectList = Array.isArray(props.project) ? props.project :
|
|
Object.values(props.project || {});
|
|
|
|
return projectList
|
|
.filter(item => item && typeof item === 'object')
|
|
.sort((a, b) => (b.participant_count || 0) - (a.participant_count || 0));
|
|
});
|
|
// 현재 사용자 확인
|
|
const isCurrentUser = (commuter) => {
|
|
// 현재 사용자인지 확인
|
|
const isCurrentUserCheck = props.user && commuter && commuter.MEMBERSEQ === props.user.id;
|
|
|
|
// 퇴근 기록이 없는지 확인
|
|
const hasNoCheckRecord = !commuter.COMMUTLVE;
|
|
|
|
// 현재 사용자이면서 퇴근 기록이 없는 경우에만 true 반환
|
|
return isCurrentUserCheck && hasNoCheckRecord;
|
|
};
|
|
|
|
// 드래그 시작 이벤트 핸들러
|
|
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>
|