SAFEKISO/inspond-nuxt-safekiso/base/pages/board/[...boardId]/view/[_cid].vue

<template>
    <div>
        <!-- Page head goes here -->
        <div class="max-w mx-auto px-3">
            <!-- Content goes here -->
            <BaseBoardView1
                :name="name"
                :profile-url="profileUrl"
                :title="title"
                :content="content"
                :flags="flags"
                :attachments="attachments"
                :hit-count="hitCount"
                :like-count="likeCount"
                :dislike-count="dislikeCount"
                :comment-count="commentCount"
                :report-count="reportCount"
                :status="status"
                :updated="updated"
                :created="created"
            />
            <BaseAttachmentCtl1
                v-if="attachmentEnabled"
                :attachments="attachments"
                :read-only-flag="true"
            />

            <div class="mt-5 flex justify-between items-center flex-wrap">
                <div class="ml-4 mt-4"></div>
                <div class="ml-4 mt-4 flex-shrink-0">
                    <button
                        type="button"
                        class="mr-3 inline-flex items-center rounded-md border border-transparent bg-indigo-100 px-3 py-2 text-sm font-medium leading-4 text-indigo-700 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                        @click="doFooterAction('닫기')"
                    >
                        {{ '닫기' }}
                    </button>

                    <button
                        v-if="myFlag"
                        type="button"
                        class="mr-3 inline-flex items-center rounded-md border border-transparent bg-red-600 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                        @click="doFooterAction('삭제')"
                    >
                        {{ '삭제' }}
                    </button>

                    <button
                        v-if="myFlag"
                        type="button"
                        class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                        @click="doFooterAction('수정')"
                    >
                        {{ '수정' }}
                    </button>
                </div>
            </div>

            <BaseCommentCtl1
                v-if="commentEnabled"
                class="mt-5"
                :tid="commentTargetId"
                :read-only-flag="!_crossCtl.isAuthenticated"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
definePageMeta({
    // middleware: 'check-auth-user',
});

const route = useRoute();
console.log('huk params = ', route.params);

const bid = ref('');
let cid: string | string[] = '';

bid.value = route.params.boardId[0];
cid = route.params['_cid'];

console.log('huk 7');

const commentTargetId = ref(cid.toString());

const name = ref('');
const profileUrl = ref('');
const title = ref('');
const content = ref('');
const flags = ref([]);
const attachments = ref([]);

const hitCount = ref(0);
const likeCount = ref(0);
const dislikeCount = ref(0);
const commentCount = ref(0);
const reportCount = ref(0);
const status = ref(0);
const updated = ref('');
const created = ref('');

const myFlag = ref(false);

const commentEnabled = ref(false);
const attachmentEnabled = ref(false);

const { $dayjs } = useNuxtApp();

function doFooterAction(tag) {
    console.log('on doFooterAction(), tag=', tag);

    switch (tag) {
        case '수정':
            _crossCtl.openModal(
                'confirm',
                '수정 확인',
                '정말로 수정하시겠습니까?',
                ['수정', '취소'],
                (serial, btnIdx) => {
                    console.log('btnIdx=', btnIdx);
                    if (btnIdx == 0) {
                        navigateTo('/board/' + bid.value + '/edit/' + cid);
                    }
                }
            );

            break;

        case '삭제':
            doDelete();
            break;

        case '닫기':
            // router.back();
            navigateTo('/board/' + bid.value + '/list', { replace: true });
            break;
    }
}

async function doDelete() {
    _crossCtl.openModal(
        'confirm',
        '삭제 확인',
        '정말로 삭제하시겠습니까?',
        ['삭제', '취소'],
        async (serial, btnIdx) => {
            console.log('btnIdx=', btnIdx);
            if (btnIdx == 0) {
                const responseJson = await _crossCtl.doComm('delete', 'board', {
                    boardId: bid.value,
                    hero: cid,
                });

                if (responseJson['responseCode'] != 200) {
                    alert(responseJson['responseMessage']);
                } else {
                    // router.back();
                    navigateTo('/board/' + bid.value + '/list', {
                        replace: true,
                    });
                }
            }
        }
    );
}
const responseJson = await _crossCtl.doComm('select', 'board', {
    boardId: bid.value,
    hero: cid,
});

console.log('huk responseJson=', responseJson);

if (responseJson['responseCode'] != 200) {
    alert(responseJson['responseMessage']);
} else {
    const tmpDatas = responseJson['data'];
    console.log('huk tmpDatas=', tmpDatas);
    if (tmpDatas.length == 1) {
        commentEnabled.value = responseJson['metaData']['commentEnabled'];
        attachmentEnabled.value = responseJson['metaData']['attachmentEnabled'];
        name.value = tmpDatas[0]['name'];
        profileUrl.value = tmpDatas[0]['profile_url'];
        title.value = tmpDatas[0]['title'];
        content.value = tmpDatas[0]['content'];
        flags.value = JSON.parse(tmpDatas[0]['flags']);
        attachments.value = JSON.parse(tmpDatas[0]['attachments']);
        hitCount.value = tmpDatas[0]['hit_count'];
        likeCount.value = tmpDatas[0]['like_count'];
        dislikeCount.value = tmpDatas[0]['dislike_count'];
        commentCount.value = tmpDatas[0]['comment_count'];
        reportCount.value = tmpDatas[0]['report_count'];
        status.value = tmpDatas[0]['status'];
        updated.value = $dayjs(tmpDatas[0]['updated']).format(
            'YY/MM/DD  A h:mm:ss'
        );
        created.value = $dayjs(tmpDatas[0]['created']).format(
            'YY/MM/DD  A h:mm:ss'
        );

        myFlag.value = tmpDatas[0]['myFlag'];

        // $dayjs(val).format('YY/MM/DD  A h:mm:ss')
    } else {
        console.log('bad count. count = ' + tmpDatas.length);
    }
}
</script>