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:
khj0414 2025-02-27 13:06:35 +09:00
parent 98aa44f497
commit 7f71d5b589
9 changed files with 77 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/voteboard/voteCard.vue
View File

@ -1,13 +1,15 @@
<template>
<div class="card mb-6">
<div class="card-body" v-if="!data.localVote.LOCVOTDEL" >
<h5 class="card-title mb-1"><div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
<h5 class="card-title mb-1">
<div class="list-unstyled users-list d-flex align-items-center gap-1">
<img
class="rounded-circle user-avatar border border-3 w-px-40"
:src="`${baseUrl}upload/img/profile/${data.localVote.MEMBERPRF}`"
:style="`border-color: ${data.localVote.usercolor} !important;`"
alt="user"
/>
<div class="w-100">
<div class="d-flex justify-content-between">
<div class="user-info">
@ -24,7 +26,6 @@
class="bx btn btn-danger"
@click="endBtn(data.localVote.LOCVOTSEQ)"
>종료</button>
<EditBtn v-if="!data.localVote.LOCVOTDDT" @click="updateVote(data.localVote.LOCVOTSEQ)"/>
<DeleteBtn @click="voteDelete(data.localVote.LOCVOTSEQ)" />
</div>
</div>
@ -32,10 +33,8 @@
</div>
</div>
</h5>
<h5>{{ data.localVote.LOCVOTTTL }}</h5>
<div class="mb-1">{{ data.localVote.formatted_LOCVOTRDT }} ~ {{ data.localVote.formatted_LOCVOTEDT }}</div>
<!-- 투표완료시-->
<button v-if="data.yesVotetotal > 0 && !data.localVote.LOCVOTDDT" class="btn btn-primary btn-sm" >재투표</button>
<h5 class="mb-1">{{ data.localVote.LOCVOTTTL }}</h5>
<small >{{ data.localVote.formatted_LOCVOTRDT }} ~ {{ data.localVote.formatted_LOCVOTEDT }}</small>
<!-- 투표안했을시-->
<div v-if="data.localVote.LOCVOTDDT && data.voteResult.length == 0">
<small class="text-primary text-uppercase">투표 결과없음 (😂아무도 투표하지 않았습니다)</small>
@ -48,13 +47,14 @@
:data="data.voteDetails"
:voteInfo="data.localVote"
:total="data.voteDetails.length "/>
<!-- 투표완/미완 인원 -->
<vote-user-list v-if="!data.localVote.LOCVOTDDT"
:data="data.voteMembers"/>
<!-- 투표 결과 -->
<div v-if="data.localVote.LOCVOTDDT" class="mt-3">
<vote-result-list :data="data.voteResult" @randomList="randomList" :randomResultNum="data.localVote.LOCVOTRES"/>
</div>
<!-- 투표완/미완 인원 -->
<vote-user-list
:data="data.voteMembers"/>
</div>
</div>
<div v-else class="card-body">

8
src/components/voteboard/voteCardCheck.vue
View File

@ -12,7 +12,7 @@
/>
<div v-if="voteInfo.LOCVOTADD ==='1' && index === data.length - 1" class="d-flex align-items-center">
<div class="d-flex flex-column gap-2">
<div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-center">
<div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-start">
<form-input
class="flex-grow-1 me-2"
:title="'항목 ' + (index + data.length + 1)"
@ -37,12 +37,13 @@
</div>
</div>
<button class="btn btn-primary btn-sm" @click="selectVote">투표하기</button>
<save-btn class="btn-sm mt-2" @click="selectVote"/>
</template>
<script setup>
import $api from '@api';
import PlusBtn from '@c/button/PlusBtn.vue';
import SaveBtn from '@c/button/SaveBtn.vue'
import FormInput from '@c/input/FormInput.vue';
import voteCardCheckList from '@c/voteboard/voteCardCheckList.vue';
import { computed, ref } from 'vue';
@ -78,7 +79,8 @@ const props = defineProps({
const emit = defineEmits(['addContents','checkedNames']);
//항목추가
const addContentSave = (voteId) =>{
emit('addContents',itemList.value,voteId);
const filteredItemList = itemList.value.filter(item => item.content && item.content.trim() !== '');
emit('addContents',filteredItemList,voteId);
itemList.value = [{ content: "", url: "" }];
}

1
src/components/voteboard/voteCompleteUserListCard.vue
View File

@ -10,6 +10,7 @@
class="rounded-circle user-avatar border border-3"
:src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
:style="`border-color: ${data.usercolor} !important;`"
@error="$event.target.src = '/img/icons/icon.png'"
alt="user"
/>
</li>

1
src/components/voteboard/voteInCompleteUserListCard.vue
View File

@ -10,6 +10,7 @@
class="rounded-circle user-avatar border border-3"
:src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
:style="`border-color: ${data.usercolor} !important;`"
@error="$event.target.src = '/img/icons/icon.png'"
alt="user"
/>
</li>

61
src/components/voteboard/voteLinkInput.vue
View File

@ -1,32 +1,33 @@
<template>
<div class="position-relative me-2">
<i class="bx bx-link-alt" @click="togglePopover"></i>
<!-- 링크 팝업 -->
<div class="d-flex align-items-center">
<!-- 링크 아이콘 -->
<i class="bx bx-link-alt me-2" @click="togglePopover"></i>
<!-- 링크 입력창 (옆으로 나오게) -->
<div
v-if="isPopoverVisible"
class="popover bs-popover-auto fade show d-flex align-items-center"
role="tooltip"
:style="popoverStyle"
class="popover-container d-flex align-items-center"
>
<div class="popover-arrow"></div>
<input
v-model="link"
placeholder="URL을 입력해주세요"
class="form-control me-2 flex-grow-1"
class="form-control me-2"
style="min-width: 200px;"
/>
<button type="button" class="btn btn-sm btn-primary ms-2" @click="saveLink">
등록
</button>
<save-btn class="btn-sm" @click="saveLink"/>
</div>
<!-- 등록된 링크 표시 -->
<div v-if="link" class="mt-1">
<!-- 등록된 링크, 입력창이 보이지 않고 등록된 링크만 보일 때 -->
<span v-if="isLinkSaved && !isPopoverVisible" class="ms-2">
<a :href="formattedLink" target="_blank" rel="noopener noreferrer">{{ link }}</a>
</div>
</span>
</div>
</template>
<script setup>
import SaveBtn from '@c/button/SaveBtn.vue'
import { ref, computed } from "vue";
const props = defineProps({
@ -36,45 +37,27 @@ const emit = defineEmits(["update:modelValue"]);
const isPopoverVisible = ref(false);
const link = ref(props.modelValue || "");
const popoverStyle = ref({});
const isLinkSaved = ref(false); // Track if the link has been saved
const formattedLink = computed(() => {
return link.value.startsWith("http") ? link.value : "http://" + link.value;
});
const togglePopover = (event) => {
const buttonRect = event.target.getBoundingClientRect();
const parentRect = event.target.parentElement.getBoundingClientRect();
popoverStyle.value = {
position: "absolute",
top: `${buttonRect.bottom - parentRect.top + 5}px`,
left: `${buttonRect.left - parentRect.left}px`,
zIndex: "1050",
display: "flex",
alignItems: "center",
};
const togglePopover = () => {
isPopoverVisible.value = !isPopoverVisible.value;
};
const saveLink = () => {
emit("update:modelValue", link.value);
isLinkSaved.value = true; // Set the link as saved
isPopoverVisible.value = false;
};
</script>
<style scoped>
.popover {
max-width: 300px;
border-radius: 6px;
padding: 5px;
}
.popover-arrow {
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
.popover-container {
display: flex;
align-items: center;
gap: 8px; /* 아이콘과 입력창 간격 조정 */
}
</style>

4
src/components/voteboard/voteResultRandom.vue
View File

@ -14,10 +14,10 @@
<button v-if="isRandom" class="btn btn-primary" type="button" disabled="">
<span class="spinner-grow me-1" role="status" aria-hidden="true"></span>
랜덤뽑기중..
random..
</button>
<div class="d-grid w-100 mt-6">
<button v-if="!isRandom && !randomResultNum" @click="randomList" class="btn btn-primary">랜덤 1위 뽑기</button>
<button v-if="!isRandom && !randomResultNum" @click="randomList" class="btn btn-primary"><i class='bx bx-sync'></i></button>
</div>
</template>

15
src/stores/voteDetail.js
View File

@ -1,15 +0,0 @@
import { defineStore } from "pinia";
export const useVoteStore = defineStore("vote", {
state: () => ({
selectedVote: {}
}),
actions: {
setVoteData(data) {
this.selectedVote = data;
},
clearVoteData() {
this.selectedVote = {};
}
}
});

4
src/views/voteboard/voteBoardList.vue
View File

@ -50,7 +50,6 @@ import $api from '@api';
import Quill from 'quill';
import WriteBtn from '@c/button/WriteBtn.vue';
import voteList from '@c/voteboard/voteCardList.vue';
import { useVoteStore } from '@s/voteDetail';
import { useRouter } from 'vue-router';
const toastStore = useToastStore();
@ -69,11 +68,8 @@ const router = useRouter();
onMounted(async () => {
getvoteList();
});
const voteStore = useVoteStore();
//글작성
const voteWrite = () => {
voteStore.setVoteData(selectedVote.value);
console.log("Pinia 상태 업데이트됨:", voteStore.selectedVote);
router.push('/voteboard/write');
};

48
src/views/voteboard/voteboardWrite.vue
View File

@ -17,7 +17,8 @@
name="title"
:is-essential="true"
:is-alert="titleAlert"
:v-model="title"
v-model="title"
@keyup="ValidHandler('title')"
/>
<form-input
title="종료날짜"
@ -27,20 +28,25 @@
:is-alert="endDateAlert"
v-model="endDate"
:min="today"
@change="ValidHandlerendDate"
/>
<!-- 항목 입력 반복 -->
<div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-center mb-2 position-relative">
<div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-start">
<div class="flex-grow-1 me-2 ">
<form-input
class="flex-grow-1 me-2"
:title="'항목 ' + (index + 1)"
:name="'content' + index"
:is-essential="index < 2"
:is-alert="contentAlerts[index]"
v-model="item.content"
@keyup="ValidHandler('content' + (index + 1))"
/>
<link-input v-model="item.url" />
<delete-btn @click="removeItem(index)" :disabled="index < 2" class="ms-2" />
<link-input v-model="item.url" class="mb-1"/>
</div>
<!-- delete-btn을 오른쪽으로 정렬 -->
<delete-btn @click="removeItem(index)" :disabled="index < 2" />
</div>
<plus-btn @click="addItem" :disabled="itemList.length >= 10" class="mb-3" />
<div>
<label class="list-group-item">
@ -92,7 +98,6 @@ import LinkInput from "@/components/voteboard/voteLinkInput.vue";
import { voteCommon } from '@s/voteCommon';
import { useUserStore } from '@s/userList';
import { useRoute } from "vue-router";
import { useVoteStore } from "@s/voteDetail";
const userStore = useUserStore();
const today = new Date().toISOString().substring(0, 10);
@ -115,12 +120,6 @@ const userSet = ({ userList, userTotal }) => {
userListTotal.value = userTotal;
};
const voteStore = useVoteStore();
onMounted(()=>{
console.log('상세데이터',voteStore.selectedVote);
})
const handleUserListUpdate = ({ activeUsers, disabledUsers: updatedDisabledUsers }) => {
activeUserList.value = activeUsers;
@ -133,7 +132,7 @@ const saveValid = () => {
if (disabledUsers.value.length === 0) {
activeUserList.value = [...userStore.userList];
}
if (title.value === '') {
if (title.value.trim() === '') {
titleAlert.value = true;
valid = false;
} else {
@ -145,13 +144,13 @@ const saveValid = () => {
} else {
endDateAlert.value = false;
}
if (itemList.value[0].content === '') {
if (itemList.value[0].content.trim() === '') {
contentAlerts.value[0] = true;
valid = false;
} else {
contentAlerts.value[0] = false;
}
if (itemList.value[1].content === '') {
if (itemList.value[1].content.trim() === '') {
contentAlerts.value[1] = true;
valid = false;
} else {
@ -168,6 +167,7 @@ const saveValid = () => {
}
};
const saveVote = () => {
const filteredItemList = itemList.value.filter(item => item.content && item.content.trim() !== '');
const unwrappedUserList = toRaw(activeUserList.value);
const listId = unwrappedUserList.map(item => ({
id: item.MEMBERSEQ,
@ -175,9 +175,9 @@ const saveVote = () => {
$api.post('vote/insertWord',{
addvoteIs :addvoteitem.value === false ? '0' :'1'
,votemMltiIs: addvotemulti.value === false ? '0' : '1'
,title :title.value
,title :title.value.trim()
,endDate :endDate.value
,itemList :itemList.value
,itemList :filteredItemList
,activeUserList :listId
}).then((res)=>{
if(res.data.status == 'OK'){
@ -186,6 +186,20 @@ const saveVote = () => {
}
})
};
const ValidHandler = (field) => {
if(field == 'title'){
titleAlert.value = false;
}
if(field == 'content1'){
contentAlerts.value[0] = false;
}
if(field == 'content2'){
contentAlerts.value[1] = false;
}
}
const ValidHandlerendDate = () =>{
endDateAlert.value = false;
}
const goList = () => {
router.push('/voteboard');
};