freekake_webapp/pages/entertainment/manga/[mangaid]/chapters/add.vue

<template>
    <div>
        <ul class="flex space-x-2 rtl:space-x-reverse">
            <li>
                <a href="javascript:;" class="text-primary hover:underline">Intertainment</a>
            </li>
            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
                <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="text-primary hover:underline">Daftar Chapter</NuxtLink>
            </li>
            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
                <span>Tambah Chapter</span>
            </li>
        </ul>

        <div class="grid grid-cols-1 gap-6 pt-5">
            <div class="panel">
                <div class="mb-5 flex items-center justify-between">
                    <h5 class="text-lg font-semibold dark:text-white-light">Tambah Chapter</h5>
                    <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="dark:text-white-light btn btn-dark !py-1">
                        <icon-arrow-backward class="me-1" />
                        Daftar
                    </NuxtLink>
                </div>
                <div class="mb-5">
                    <form class="space-y-5" @submit.prevent="submitForm()">
                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
                            <div :class="{ 'has-error': $validate.form.chapter.$error, 'has-success': isSubmitted && !$validate.chapter.slug.$error }">
                                <label for="chapter">Chapter</label>
                                <input id="chapter" type="number" class="form-input" v-model="form.chapter" />
                                <template v-if="isSubmitted && $validate.form.chapter.$error">
                                    <p class="text-danger mt-1">Chapter harus diisi</p>
                                </template>
                            </div>
                            <div :class="{ 'has-error': $validate.form.status.$error, 'has-success': isSubmitted && !$validate.form.status.$error }">
                                <label for="status">Status</label>
                                <multiselect id="format"
                                    v-model="form.status"
                                    :options="statusOptions"
                                    class="custom-multiselect"
                                    :searchable="true"
                                    placeholder="Pilih status chapter"
                                    selected-label=""
                                    select-label=""
                                    deselect-label=""
                                    label="label"
                                    track-by="value"
                                ></multiselect>
                                <template v-if="isSubmitted && $validate.form.status.$error">
                                    <p class="text-danger mt-1">Stastus Chapter harus diisi</p>
                                </template>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
                            <div :class="{ 'has-error': $validate.form.posted_at.$error, 'has-success': isSubmitted && !$validate.form.posted_at.$error }">
                                <label for="posted_at">Tanggal Unggah</label>
                                <input id="posted_at" type="datetime-local" class="form-input" v-model="form.posted_at" />
                                <template v-if="isSubmitted && $validate.form.posted_at.$error">
                                    <p class="text-danger mt-1">Tanggal Harus Diisi</p>
                                </template>
                            </div>
                            <div :class="{ 'has-error': $validate.form.archived_at.$error, 'has-success': isSubmitted && !$validate.form.archived_at.$error }">
                                <label for="archived_at">Tanggal Arsip</label>
                                <input id="archived_at" type="datetime-local" class="form-input" v-model="form.archived_at" />
                                <template v-if="isSubmitted && $validate.form.archived_at.$error">
                                    <p class="text-danger mt-1">Tanggal Harus Diisi</p>
                                </template>
                            </div>
                        </div>
                        <div class="flex items-center ltr:ml-auto mt-8">
                            <button type="submit" class="btn btn-success !py-1" :disabled="isLoading"><icon-save class="me-1" /> {{ isLoading ? 'Menyimpan...' : 'Simpan' }}</button>
                            <button type="button" class="btn btn-dark !py-1 ml-1" @click="resetForm"><icon-restore class="me-1" />Reset</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { reactive } from 'vue'
    import { useVuelidate } from '@vuelidate/core';
    import { required, helpers } from '@vuelidate/validators';
    import Multiselect from '@suadelabs/vue3-multiselect';
    import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
    import '@/assets/css/file-upload-preview.css';

    useHead({ title: 'Tambah Chapter' });

    const form = ref({
        chapter: '',
        status: '',
        posted_at: '',
        archived_at: '',
    });
    const isSubmitted = ref(false);

    const rules = {
        form: {
            chapter: { required },
            status: { required },
            posted_at: { required },
            archived_at: { required },
        }
    };
    const $validate = useVuelidate(rules, { form });
    const router = useRouter();
    const route = useRoute();
    const { $api } = useNuxtApp();

    const statusOptions = [{ "value": "draft", "label": "Draft" }, { "value": "published", "label": "Dipublikasikan" }, { "value": "archived", "label": "Diarsipkan" } ]

    const isLoading = ref(false);

    const submitForm = async () => {
        isSubmitted.value = true;
        $validate.value.form.$touch();
        if ($validate.value.form.$invalid) {
            return false;
        }

        const formData = new FormData();
        
        formData.append('chapter', form.value.chapter);
        formData.append('status', form.value.status?.value ?? '');
        formData.append('manga', parseInt(route.params.mangaid));
        if (form.value.posted_at) {
            formData.append('posted_at', new Date(form.value.posted_at).toISOString());
        } else {
            formData.append('posted_at', '');
        }

        if (form.value.archived_at) {
            formData.append('archived_at', new Date(form.value.archived_at).toISOString());
        } else {
            formData.append('archived_at', '');
        }

        isLoading.value = true;
        await $api(`/entertainment/manga/${route.params.mangaid}/chapters/`, {
            method: 'POST',
            body: formData
        }).then(() => {
            router.push({ path: `/entertainment/manga/${route.params.mangaid}/chapters/list` });
        })
        .catch((error) => {
            console.log(error);
        })
        .finally(() => {
            isLoading.value = false;
        });
    }

    const resetForm = () => {
        form.value = {
            chapter: '',
            status: '',
            posted_at: '',
            archived_at: '',
        };

        isSubmitted.value = false;
        $validate.value.form.$reset();
    };

</script>