localhost-front/src/views/voteboard/voteboardWrite.vue

<template>
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card mb-6">
    <div class="card-body">
        <div class="user-list-container">
        <ul class="timeline mb-1">
            <li class="timeline-item timeline-item-transparent">
            <span class="timeline-point timeline-point-info"></span>
            <div class="timeline-event">
                <div class="timeline-header mb-2">
                <h6 class="mb-0">투표 인원</h6>
                </div>
                <UserList @userListInfo="userSet" @user-list-update="handleUserListUpdate" class="mb-3" />
                <div v-if="UserListAlert" class="red">2명이상 선택해주세요 </div>
                <form-input
                title="제목"
                name="title"
                :is-essential="true"
                :is-alert="titleAlert"
                v-model="title"
                />
                <form-input
                title="종료날짜"
                name="endDate"
                type="date"
                :is-essential="true"
                :is-alert="endDateAlert"
                v-model="endDate"
                />
                <!-- 항목 입력 반복 -->
                <div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-center mb-2 position-relative">
                <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"
                />
                <link-input v-model="item.url" />
                <delete-btn @click="removeItem(index)" :disabled="index < 2" class="ms-2" />
                </div>
                <plus-btn @click="addItem" :disabled="itemList.length >= 10" class="mb-3" />
                <div>
                <label class="list-group-item">
                    <input
                    class="form-check-input me-1"
                    type="checkbox"
                    id="addvoteitem"
                    v-model="addvoteitem"
                />
                    항목 추가여부
                </label>
                <label class="list-group-item">
                    <input
                    class="form-check-input me-1"
                    type="checkbox"
                    id="addvotemulti"
                    v-model="addvotemulti"
                    />
                    다중투표 허용여부
                </label>
                </div>
            </div>
            </li>
        </ul>

        <div class="mb-4 d-flex justify-content-end">
            <button type="button" class="btn btn-info" @click="goList">
            <i class="bx bx-left-arrow-alt"></i>
            </button>
            <button type="button" class="btn btn-primary ms-1" @click="saveValid">
            <i class="bx bx-check"></i>
            </button>
        </div>
        </div>
    </div>
    </div>
</div>
</template>

<script setup>
import { ref, toRaw } from "vue";
import UserList from "@c/user/UserList.vue";
import formInput from "@c/input/FormInput.vue";
import { useToastStore } from "@s/toastStore";
import PlusBtn from "@c/button/PlusBtn.vue";
import DeleteBtn from "@c/button/DeleteBtn.vue";
import $api from "@api";
import router from "@/router";
import LinkInput from "@/components/voteboard/voteLinkInput.vue";
import { voteCommon } from '@s/voteCommon';

const toastStore = useToastStore();
const activeUserList = ref([]);
const disabledUsers = ref([]);
const titleAlert = ref(false);
const endDateAlert = ref(false);
const contentAlerts = ref([false, false]);
const UserListAlert = ref(false);
const title = ref("");
const endDate = ref("");
const { itemList, addItem, removeItem } = voteCommon();

const userListTotal = ref(0);
const addvoteitem = ref(false);
const addvotemulti= ref(false);

const userSet = ({ userList, userTotal }) => {
    activeUserList.value = userList;
    userListTotal.value = userTotal;
};

const handleUserListUpdate = ({ activeUsers, disabledUsers: updatedDisabledUsers }) => {
    activeUserList.value = activeUsers;
    disabledUsers.value = updatedDisabledUsers;
    userListTotal.value = activeUsers.length;
};

const saveValid = () => {
    let valid = true;

    if (title.value === '') {
        titleAlert.value = true;
        valid = false;
    } else {
        titleAlert.value = false;
    }

    if (endDate.value === '') {
        endDateAlert.value = true;
        valid = false;
    } else {
        endDateAlert.value = false;
    }

    if (itemList.value[0].content === '') {
        contentAlerts.value[0] = true;
        valid = false;
    } else {
        contentAlerts.value[0] = false;
    }

    if (itemList.value[1].content === '') {
        contentAlerts.value[1] = true;
        valid = false;
    } else {
        contentAlerts.value[1] = false;
    }

    if (activeUserList.value.length < 2) {
        UserListAlert.value = true;
        valid = false;
    } else {
        UserListAlert.value = false;
    }

    if (valid) {
        saveVote();
    }
};

const saveVote = () => {
    console.log('activeUserList',activeUserList.value)
    const unwrappedUserList = toRaw(activeUserList.value);
    const listId = unwrappedUserList.map(item => ({
        id: item.MEMBERSEQ,
    }));
    $api.post('vote/insertWord',{
        addvoteIs       :addvoteitem ? '1' :'0'
        ,votemMltiIs    :addvotemulti ? '1' :'0'
        ,title          :title.value
        ,endDate        :endDate.value
        ,itemList       :itemList.value
        ,activeUserList :listId
    }).then((res)=>{
        if(res.data.status == 'OK'){
            toastStore.onToast('투표가 등록되었습니다.', 's');
            goList();
        }
    })
};

const goList = () => {
    router.push('/voteboard');
};

</script>

<style scoped>
.item-input {
max-width: 200px;
}
</style>