투표하기 모달

src/components/main/MainVote.vue

@@ -6,9 +6,9 @@
                 <h5 class="mb-1 me-2">투표진행</h5>
             </div>
         </div>
-        <div class="card-body" v-if="voteList.length > 0">
+        <div class="card-body" v-if="voteListData.length > 0">
             <ul class="p-0 m-0">
-                <li class="d-flex  mb-1" v-for="item in voteList" :key="item.LOCVOTSEQ">
+                <li class="d-flex  mb-1" v-for="item in voteListData" :key="item.LOCVOTSEQ">
                     <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                         <div class="me-2 mb-3">
                             <div class="text-muted small">{{ item.localVote.formatted_LOCVOTRDT }}</div>
@@ -23,16 +23,18 @@
                                         @error="setDefaultImage"
                                     />
                                 </div>
-                                <div class="timeline-event ps-1"  style="cursor: pointer;" @click="goVoteList()" >
+                                <!-- <div class="timeline-event ps-1"  style="cursor: pointer;" @click="goVoteList()" > -->
+                                <div class="timeline-event ps-1"  style="cursor: pointer;" @click.stop="openModal(item.localVote.LOCVOTSEQ)" >
                                     <div class="timeline-header ">
                                         <small ><strong>{{ truncateTitle(item.localVote.LOCVOTTTL) }}</strong></small>
                                     </div>
-                                    <small class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span class="badge badge-dot text-bg-warning  me-1">
+                                    <small class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span >
                                     </span> {{ getDaysAgo(item.localVote.formatted_LOCVOTEDT) }} ({{item.localVote.total_voted}}/{{ item.localVote.total_votable }})</small>
                                 </div>
                             </div>
                         </div>
                     </div>
+
                 </li>
             </ul>
         </div>
@@ -50,12 +52,54 @@
         </div>
     </div>
 </div>
+<!--투표 모달 -->
+<CenterModal :display="isModalOpen" @close="closeModal">
+    <template #title> 투표 하기 </template>
+    <template #body>
+        <div>
+            <vote-list
+            :data="selectVoteDate"
+            @checkedNames="checkedNames"
+            @addContents="addContents"
+            @endVoteId="endVoteId"
+            @voteDelete="voteDelete"
+            />
+        </div>
+    </template>
+    <template #footer>
+        <BackButton @click="closeModal" />
+    </template>
+</CenterModal>
+
+
+
 </template>
 
 <script setup>
 import router from '@/router';
 import $api from '@api';
 import { onMounted, ref } from 'vue';
+import CenterModal from '@c/modal/CenterModal.vue';
+import BackButton from '@c/button/BackBtn.vue';
+import voteList from '@c/voteboard/voteCardList.vue';
+import { useToastStore } from '@s/toastStore';
+const toastStore = useToastStore();
+
+// 로그 모달 상태
+const isModalOpen = ref(false);
+const selectVoteDate = ref([]);
+// 로그 모달 열기
+const openModal = async (id) => {
+    isModalOpen.value = true;
+    if(id){
+        const selectData = voteListData.value.filter((item) => item.localVote.LOCVOTSEQ === id);
+        selectVoteDate.value = selectData;
+    }
+};
+// 로그 모달 닫기
+const closeModal = () => {
+    isModalOpen.value = false;
+};
 
 // 프로필 이미지
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
@@ -69,7 +113,7 @@ const setDefaultImage = (event) => {
 
 const currentPage = ref(1);
 const voteset = ref(0);
-const voteList= ref([]);
+const voteListData= ref([]);
 onMounted(() => {
     getvoteList();
 });
@@ -85,11 +129,60 @@ const getvoteList = () => {
                 ,myVote:'2' //내가 안한 투표
             }
         }).then(res => {
-            voteList.value = res.data.data.list;
+            voteListData.value = res.data.data.list;
-            voteList.value = res.data.data.list.slice(0, 6);
+            voteListData.value = res.data.data.list.slice(0, 6);
+
         })
     };
 
+//투표하기
+const checkedNames = (numList) => {
+    $api.post('vote/insertCheckedNums',{
+        checkedList :numList
+        ,votenum : numList[0].LOCVOTSEQ
+        }).then((res)=>{
+            if(res.data.status === 'OK'){
+                toastStore.onToast('투표가 완료되었습니다.', 's');
+                isModalOpen.value = false;
+                getvoteList();
+            }
+        })
+}
+//투표항목추가
+const addContents = (itemList, voteId) => {
+    console.log('itemList',itemList)
+    $api.post('vote/insertWord',{
+            itemList :itemList
+            ,voteId :voteId
+        }).then((res)=>{
+            if(res.data.status === 'OK'){
+                toastStore.onToast('항목이 등록되었습니다.', 's');
+            }
+        })
+}
+//투표종료
+const endVoteId = (endVoteId) => {
+    $api.patch('vote/updateEndData',{
+        endVoteId :endVoteId
+        }).then((res)=>{
+            if(res.data.status === 'OK'){
+                getvoteList();
+                isModalOpen.value = false;
+            }
+        })
+}
+//투표 삭제
+const voteDelete =(id) =>{
+    $api.patch('vote/updateDeleteData',{
+        deleteVoteId :id
+        }).then((res)=>{
+            if(res.data.status === 'OK'){
+                toastStore.onToast('투표가 삭제되었습니다.', 's');
+                getvoteList();
+                isModalOpen.value = false;
+            }
+        })
+}
 // 제목이 14글자 넘어가면 ... 처리하는 함수
 const truncateTitle = title => {
 return title.length > 10 ? title.slice(0, 10) + '...' : title;
@@ -102,6 +195,7 @@ const goVoteList = () =>{
         query: {
             voteset: '2' //투표중
             ,myVote:'2' //내가 안한 투표
+            ,id:id
         }
     });
 }