freekake_webapp/pages/content/contents/list.vue

<template>
    <div>
        <ul class="flex space-x-2 rtl:space-x-reverse">
            <li>
                <a href="javascript:;" class="text-primary hover:underline">Konten</a>
            </li>
            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
                <span>Daftar Konten</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">Daftar Konten</h5>
                    <NuxtLink to="/content/contents/add" class="dark:text-white-light btn btn-primary !py-1">
                        <icon-plus class="me-1" />
                        Tambah
                    </NuxtLink>
                </div>
                <div class="mb-5">
                    <input v-model.lazy="params.search" type="text" class="form-input max-w-xs" placeholder="Cari...(tombol Enter untuk mencari)" @change="changeSearch"/>
                </div>
                <div class="mb-5">
                    <div class="datatable">
                        <vue3-datatable
                            :rows="rows"
                            :columns="cols"
                            :totalRows="totalRows"
                            :isServerMode=true
                            :page="params.current_page"
                            :pageSize="params.pagesize"
                            :sortable="true"
                            :sortColumn="params.sort_column"
                            :sortDirection="params.sort_direction"
                            @change="changeServer"
                            skin="whitespace-nowrap bh-table-hover"
                            firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                            lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
                            previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                            nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                        >
                            <template #actions="data">
                                <div class="flex justify-end gap-1">
                                    <button type="button" class="btn btn-success !py-1" @click="viewData(data.value)">
                                        <icon-edit class="me-1" />
                                        Edit
                                    </button>
                                    <button type="button" class="btn btn-danger !py-1" @click="deleteData(data.value)">
                                        <icon-trash class="me-1" />
                                        Delete
                                    </button>
                                </div>
                            </template>
                        </vue3-datatable>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, computed, onMounted } from 'vue';
    import Vue3Datatable from '@bhplugin/vue3-datatable';
    import { useDebounceFn } from '@vueuse/core';
    useHead({ title: 'Daftar Konten' });

    const router = useRouter();
    const config = useRuntimeConfig();
    const { $api } = useNuxtApp();

    const cols =
        ref([
            { field: 'title', title: 'Judul' },
            { 
                field: 'theme',
                title: 'Tema',
                cellRenderer: (row: any) => row.theme_display
            },
            { 
                field: 'topic', 
                title: 'Topik',
                cellRenderer: (row: any) => row.topic_display
            },
            { field: 'format_display', title: 'Format' },
            { 
                field: 'type', 
                title: 'Jenis',
                cellRenderer: (row: any) => row.type_display
            },
            { 
                field: 'status', 
                title: 'Status',
                cellRenderer: (row: any) => row.status_display
            },
            { 
                field: 'actions', 
                title: 'Aksi', 
                headerClass: 'text-right',
                cellClass: 'text-right',
                sort: false, 
                width: '150px' 
            }            
        ]) || [];

    const params = reactive({
        search: null,
        current_page: 1,
        pagesize: 10,
        sort_column: 'title',
        sort_direction: 'asc',
    });
    
    const rows = computed(() => contents.value?.results ?? []);
    const totalRows = computed(() => contents.value?.count ?? 0);
    const { data: contents } = await useAsyncData('contents', 
        () => { 
            return $api(`/content/contents/`, {
                params: {
                    page: params.current_page,
                    page_size: params.pagesize,
                    ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
                    search: params.search
                },
            });
        }, {
            watch: [params]
        }
    );

    const debouncedSearch = useDebounceFn(() => {
        params.current_page = 1;
        refreshNuxtData('characters');
    }, 500);

    watch(() => params.search, debouncedSearch);
    
    const changeServer = (data: any) => {
        params.pagesize = data.pagesize;
        params.sort_column = data.sort_column;
        params.sort_direction = data.sort_direction;
        params.current_page = data.current_page;
    };

    const changeSearch = (data: any) => {
        params.current_page = 1; 
    };

    const viewData = (data: any) => {
        router.push({ path: "/content/contents/" + data.id });
    };

    const deleteData = async (data: any) => {
        await $api(`/content/contents/${data.id}/`, {
            method: 'DELETE'
        });

        refreshNuxtData('contents');
    }
</script>