freekake_webapp/pages/core/regencies-cities/add.vue

<template>
    <div>
        <ul class="flex space-x-2 rtl:space-x-reverse">
            <li>
                <a href="javascript:;" class="text-primary hover:underline">Core</a>
            </li>
            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
                <NuxtLink to="/core/regencies-cities/list" class="text-primary hover:underline">Daftar Kabupaten/Kota</NuxtLink>
            </li>
            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
                <span>Tambah Provinsi</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 Kabupaten/Kota</h5>
                    <NuxtLink to="/core/regencies-cities/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-4 gap-2">
                            <div :class="{ 'has-error': $validate.form.code.$error, 'has-success': isSubmitted && !$validate.form.code.$error }">
                                <label for="code">Kode Kabupaten/Kota</label>
                                <input id="code" type="text" class="form-input" v-model="form.code" />
                                <template v-if="isSubmitted && $validate.form.code.$error">
                                    <p class="text-danger mt-1">Kode kabupaten/kota harus diisi</p>
                                </template>
                            </div>
                            <div :class="{ 'has-error': $validate.form.name.$error, 'has-success': isSubmitted && !$validate.form.name.$error }">
                                <label for="name">Nama Kabupaten/Kota</label>
                                <input id="name" type="text" class="form-input" v-model="form.name" />
                                <template v-if="isSubmitted && $validate.form.name.$error">
                                    <p class="text-danger mt-1">Nama kabupaten/kota harus diisi</p>
                                </template>
                            </div>
                            <div :class="{ 'has-error': $validate.form.province.$error, 'has-success': isSubmitted && !$validate.form.province.$error }">
                                <label for="province">Nama Provinsi</label>
                                <multiselect id="province"
                                    v-model="form.province"
                                    :options="provinces?.results"
                                    class="custom-multiselect"
                                    :searchable="true"
                                    placeholder="Select an option"
                                    selected-label=""
                                    select-label=""
                                    deselect-label=""
                                    label="name"
                                    track-by="id"
                                ></multiselect>
                                <template v-if="isSubmitted && $validate.form.province.$error">
                                    <p class="text-danger mt-1">Nama provinsi 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"><icon-save class="me-1" /> Simpan</button>
                            <button type="reset" class="btn btn-dark !py-1 ml-1"><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 } from '@vuelidate/validators';
    import Multiselect from '@suadelabs/vue3-multiselect';
    import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';

    useHead({ title: 'Tambah Kabupaten/Kota' });

    const form = ref({
        code: '',
        name: '',
        province: '',
    });
    const isSubmitted = ref(false);
    const rules = {
        form: {
            code: { required },
            name: { required },
            province: { required },
        }
    };
    const $validate = useVuelidate(rules, { form });
    const router = useRouter();

    const params = reactive({
        current_page: 1,
        pagesize: 10,
        sort_column: 'id',
        sort_direction: 'asc',
    });

    const { data: provinces } = await useAsyncData('provinces', 
        () => $fetch('http://localhost:8000/core/provinces/', {
            params: {
                page: params.current_page,
                page_size: 50
            }
        }), {
            watch: [params]
        }
    );
    
    const submitForm = async () => {
        isSubmitted.value = true;
        $validate.value.form.$touch();
        if ($validate.value.form.$invalid) {
            return false;
        }

        await $fetch('http://localhost:8000/core/regencies_cities/', {
            method: 'POST',
            body: { 
                "code": form.value.code,
                "name": form.value.name,
                "province": form.value.province.id
            }
        }).then(() => {
            //redirect
            router.push({ path: "/core/regencies-cities/list" });
        })
        .catch((error) => {

            //assign response error data to state "errors"
            console.log(error);
        });
    }
</script>