localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

프로젝트 참여인원 많은 순 정렬

Browse Source
This commit is contained in:
yoon 2025-03-25 17:44:07 +09:00
parent a391d677bd
commit 0da0d604e0
1 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/commuters/CommuterProjectList.vue
View File

@ -1,23 +1,32 @@
<template> <template>
<div class="commuter-list"> <div class="commuter-list">
<div v-for="post in project" :key="post.PROJCTSEQ" <div
v-for="post in sortedProjects"
:key="post.PROJCTSEQ"
class="border border-2 mt-3 card p-2" class="border border-2 mt-3 card p-2"
:style="`border-color: ${post.projctcolor} !important; color: ${post.projctcolor} !important;`" :style="`border-color: ${post.projctcolor} !important; color: ${post.projctcolor} !important;`"
@dragover="allowDrop($event)" @dragover="allowDrop($event)"
@drop="handleDrop($event, post)"> @drop="handleDrop($event, post)"
>
<p class="mb-1"> <p class="mb-1">
{{ post.PROJCTNAM }} {{ post.PROJCTNAM }}
</p> </p>
<div class="row gx-2"> <div class="row gx-2">
<div v-for="commuter in commuters.filter(c => c.PROJCTNAM === post.PROJCTNAM)" :key="commuter.COMMUTCMT" class="col-4"> <div
v-for="commuter in commuters.filter(c => c.PROJCTNAM === post.PROJCTNAM)"
:key="commuter.COMMUTCMT"
class="col-4"
>
<div class="ratio ratio-1x1"> <div class="ratio ratio-1x1">
<img :src="`${baseUrl}upload/img/profile/${commuter.profile}`" <img
:src="`${baseUrl}upload/img/profile/${commuter.profile}`"
alt="User Profile" alt="User Profile"
class="rounded-circle" class="rounded-circle"
:class="isCurrentUser(commuter) ? 'cursor-pointer' : ''" :class="isCurrentUser(commuter) ? 'cursor-pointer' : ''"
:draggable="isCurrentUser(commuter)" :draggable="isCurrentUser(commuter)"
@dragstart="isCurrentUser(commuter) ? dragStart($event, post) : null" @dragstart="isCurrentUser(commuter) ? dragStart($event, post) : null"
@error="$event.target.src = '/img/icons/icon.png'"> @error="$event.target.src = '/img/icons/icon.png'"
>
</div> </div>
</div> </div>
</div> </div>
@ -26,7 +35,7 @@
</template> </template>
<script setup> <script setup>
import { defineProps, defineEmits } from 'vue'; import { defineProps, defineEmits, computed } from 'vue';
const props = defineProps({ const props = defineProps({
project: { project: {
@ -57,6 +66,15 @@ const props = defineProps({
const emit = defineEmits(['drop', 'update:selectedProject', 'update:checkedInProject']); 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 isCurrentUser = (commuter) => {
return props.user && commuter && commuter.MEMBERSEQ === props.user.id; return props.user && commuter && commuter.MEMBERSEQ === props.user.id;
@ -79,4 +97,6 @@ const handleDrop = (event, targetProject) => {
event.preventDefault(); event.preventDefault();
emit('drop', { event, targetProject }); emit('drop', { event, targetProject });
}; };
</script> </script>