From 33fc02acfb73d870451f15d76537294c0545cbde Mon Sep 17 00:00:00 2001
From: Irwan Cahyono <irwan.l.cahyono@gmail.com>
Date: Tue, 1 Jul 2025 09:29:50 +0700
Subject: [PATCH] contents

---
 components/layout/Sidebar.vue   |   3 +
 pages/content/contents/[id].vue | 191 ++++++++++++++++++++
 pages/content/contents/add.vue  | 308 ++++++++++++++++++++++++++++++++
 pages/content/contents/list.vue | 130 ++++++++++++++
 4 files changed, 632 insertions(+)
 create mode 100644 pages/content/contents/[id].vue
 create mode 100644 pages/content/contents/add.vue
 create mode 100644 pages/content/contents/list.vue

diff --git a/components/layout/Sidebar.vue b/components/layout/Sidebar.vue
index b6c7280..070426e 100644
--- a/components/layout/Sidebar.vue
+++ b/components/layout/Sidebar.vue
@@ -88,6 +88,9 @@
                                         <li>
                                             <NuxtLink to="/content/topics/list" @click="toggleMobileMenu">Topik</NuxtLink>
                                         </li>
+                                        <li>
+                                            <NuxtLink to="/content/contents/list" @click="toggleMobileMenu">Konten</NuxtLink>
+                                        </li>
                                         
                                     </ul>
                                 </vue-collapsible>
diff --git a/pages/content/contents/[id].vue b/pages/content/contents/[id].vue
new file mode 100644
index 0000000..dfe14bd
--- /dev/null
+++ b/pages/content/contents/[id].vue
@@ -0,0 +1,191 @@
+<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">
+                <NuxtLink to="/content/topics/list" class="text-primary hover:underline">Daftar Topik Konten</NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <span>Edit Topik 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">Edit Topik Konten</h5>
+                    <NuxtLink to="/content/topics/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.theme.$error, 'has-success': isSubmitted && !$validate.form.topic.$error }">
+                                <label for="topic">Topik</label>
+                                <input id="topic" type="text" class="form-input" v-model="form.topic" />
+                                <template v-if="isSubmitted && $validate.form.topic.$error">
+                                    <p class="text-danger mt-1">Topik konten harus diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.theme.$error, 'has-success': isSubmitted && !$validate.form.theme.$error }">
+                                <label for="theme">Tema</label>
+                                <multiselect id="province"
+                                    v-model="form.theme"
+                                    :options="themes?.results"
+                                    class="custom-multiselect"
+                                    :searchable="true"
+                                    placeholder="Pilih tema konten"
+                                    selected-label=""
+                                    select-label=""
+                                    deselect-label=""
+                                    label="theme"
+                                    track-by="id"
+                                ></multiselect>
+                                <template v-if="isSubmitted && $validate.form.theme.$error">
+                                    <p class="text-danger mt-1">Tema konten harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
+                            <div class="md:col-span-2" :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
+                                <label for="description">Deskripsi/Keterangan</label>
+                                <textarea id="description" rows="3" class="form-textarea" v-model="form.description"></textarea>
+                                <template v-if="isSubmitted && $validate.form.description.$error">
+                                    <p class="text-danger mt-1">Deskripsi/ketarangan tema konten harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2 ">
+                            <div class="custom-file-container" data-upload-id="featuredImage"
+                                :class="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
+                                <div class="label-container">
+                                    <label for="featured_image">Gambar </label> <a href="javascript:;" class="custom-file-container__image-clear" title="Clear Image">×</a>
+                                </div>
+                                <label class="custom-file-container__custom-file" >
+                                    <input id="featured_image" type="file" class="custom-file-container__custom-file__custom-file-input" 
+                                        accept="image/png" @change="handleImageChange" />
+                                    <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
+                                    <span class="custom-file-container__custom-file__custom-file-control ltr:pr-20 rtl:pl-20"></span>
+                                </label>
+                                <template v-if="isSubmitted && $validate.form.featured_image.$error">
+                                    <p class="text-danger mt-1">Gambar tema konten harus diisi</p>
+                                </template>
+                                <div class="custom-file-container__image-preview"></div>
+                            </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 { useVuelidate } from '@vuelidate/core';
+    import { required } 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: 'Daftar Topik Konten' });
+
+    const isSubmitted = ref(false);
+    const rules = {
+        form: {
+            theme: { required },
+            description: { required },
+            featured_image: { required },
+        }
+    };
+    const router = useRouter();
+    const route = useRoute();
+    const config = useRuntimeConfig();
+
+    const { data: form } = await useAsyncData('provinces', 
+        () => $fetch(`${config.public.apiBase}content/topics/${route.params.id}`, {}), {}
+    );
+    const $validate = useVuelidate(rules, { form });
+
+    const params = reactive({
+        current_page: 1,
+        pagesize: 10,
+        sort_column: 'id',
+        sort_direction: 'asc',
+    });
+    
+    const { data: themes } = await useAsyncData('themes', 
+        () => $fetch(`${config.public.apiBase}content/themes/`, {
+            params: {
+                page: params.current_page,
+                page_size: 50
+            }
+        }), {
+            watch: [params]
+        }
+    );
+
+    onMounted(async () => {
+        const fileupload = await import('file-upload-with-preview');
+        let FileUploadWithPreview = fileupload.default;
+
+        // single image upload
+        new FileUploadWithPreview('featuredImage', {
+            images: {
+                baseImage: form.value.featured_image ? form.value.featured_image : '/assets/images/file-preview.svg',
+                backgroundImage: '',
+            },
+        });
+    });
+    
+    const submitForm = async () => {
+        isSubmitted.value = true;
+        $validate.value.form.$touch();
+        if ($validate.value.form.$invalid) {
+            return false;
+        }
+
+        const formData = new FormData();
+        formData.append('topic', form.value.topic);
+        formData.append('theme', form.value.theme.id);
+        formData.append('description', form.value.description);
+
+        if (form.value.featured_image) {
+            formData.append('featured_image', form.value.featured_image);
+        }
+
+        await $fetch(`${config.public.apiBase}content/topics/${route.params.id}/`, {
+            method: 'PUT',
+            body: formData
+        }).then(() => {
+            //redirect
+            router.push({ path: "/content/topics/list" });
+        })
+        .catch((error) => {
+
+            //assign response error data to state "errors"
+            console.log(error);
+        });
+    }
+
+    function handleImageChange(event: { target: { files: any[]; }; }) {
+        const file = event.target.files[0]
+
+        if (!file) return
+
+        const allowed = ['image/png']
+        if (!allowed.includes(file.type)) {
+            alert('Hanya PNG yang diizinkan')
+            return
+        }
+
+        form.value.featured_image = file
+    }
+</script>
\ No newline at end of file
diff --git a/pages/content/contents/add.vue b/pages/content/contents/add.vue
new file mode 100644
index 0000000..b67c203
--- /dev/null
+++ b/pages/content/contents/add.vue
@@ -0,0 +1,308 @@
+<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">
+                <NuxtLink to="/content/contents/list" class="text-primary hover:underline">Daftar Konten</NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <span>Tambah 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">Tambah Konten</h5>
+                    <NuxtLink to="/content/contents/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.title.$error, 'has-success': isSubmitted && !$validate.form.title.$error }">
+                                <label for="title">Judul</label>
+                                <input id="title" type="text" class="form-input" v-model="form.title" />
+                                <template v-if="isSubmitted && $validate.form.title.$error">
+                                    <p class="text-danger mt-1">Judul konten harus diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.slug.$error, 'has-success': isSubmitted && !$validate.form.slug.$error }">
+                                <label for="slug">Slug</label>
+                                <input id="slug" type="text" class="form-input" v-model="form.slug" />
+                                <template v-if="isSubmitted && $validate.form.slug.$error">
+                                    <p class="text-danger mt-1">Slug konten harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-4 gap-2">
+                            <div :class="{ 'has-error': $validate.form.theme.$error, 'has-success': isSubmitted && !$validate.form.theme.$error }">
+                                <label for="theme">Tema</label>
+                                <multiselect id="theme"
+                                    v-model="form.theme"
+                                    :options="themes?.results"
+                                    class="custom-multiselect"
+                                    :searchable="true"
+                                    placeholder="Pilih tema konten"
+                                    selected-label=""
+                                    select-label=""
+                                    deselect-label=""
+                                    label="theme"
+                                    track-by="id"
+                                ></multiselect>
+                                <template v-if="isSubmitted && $validate.form.theme.$error">
+                                    <p class="text-danger mt-1">Tema konten harus diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.topic.$error, 'has-success': isSubmitted && !$validate.form.topic.$error }">
+                                <label for="topic">Topik</label>
+                                <multiselect id="topic"
+                                    v-model="form.topic"
+                                    :options="topics?.results"
+                                    class="custom-multiselect"
+                                    :searchable="true"
+                                    placeholder="Pilih topik konten"
+                                    selected-label=""
+                                    select-label=""
+                                    deselect-label=""
+                                    label="topic"
+                                    track-by="id"
+                                ></multiselect>
+                                <template v-if="isSubmitted && $validate.form.topic.$error">
+                                    <p class="text-danger mt-1">Topik konten harus diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.format.$error, 'has-success': isSubmitted && !$validate.form.format.$error }">
+                                <label for="format">Format</label>
+                                <multiselect id="format"
+                                    v-model="form.format"
+                                    :options="formats?.results"
+                                    class="custom-multiselect"
+                                    :searchable="true"
+                                    placeholder="Pilih format konten"
+                                    selected-label=""
+                                    select-label=""
+                                    deselect-label=""
+                                    label="label"
+                                    track-by="value"
+                                ></multiselect>
+                                <template v-if="isSubmitted && $validate.form.format.$error">
+                                    <p class="text-danger mt-1">Format konten harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-1 gap-2">
+                            <div :class="{ 'has-error': $validate.form.content.$error, 'has-success': isSubmitted && !$validate.form.content.$error }">
+                                <label for="content">Detail Konten</label>
+                                <textarea id="content" rows="3" class="form-textarea" v-model="form.content"></textarea>
+                                <template v-if="isSubmitted && $validate.form.content.$error">
+                                    <p class="text-danger mt-1">Detail konten harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
+                            <div>
+                                <label for="data">Data Konten (ditulis dalam format JSON)</label>
+                                <textarea id="data" rows="3" class="form-textarea" v-model="form.data"></textarea>
+                            </div>
+                            <div>
+                                <label for="grade">Kelas</label>
+                                <div class="grid grid-cols-1 gap-4 md:grid-cols-3 gap-2">
+                                    <label class="inline-flex cursor-pointer" v-for="n in 6" :key="n">
+                                        <input type="checkbox" class="form-checkbox" v-model="form.grades" :value="n"/>
+                                        <span class="text-white-dark">Kelas {{ n }}</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-4 gap-2">
+                            <div :class="{ 'has-error': $validate.form.point.$error, 'has-success': isSubmitted && !$validate.form.point.$error }">
+                                <label for="point">Poin</label>
+                                <input id="point" type="number" class="form-input" v-model="form.point" />
+                                <template v-if="isSubmitted && $validate.form.point.$error">
+                                    <p class="text-danger mt-1">Poin konten harus diisi dan lebih dari 0</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.coin.$error, 'has-success': isSubmitted && !$validate.form.coin.$error }">
+                                <label for="coin">Koin</label>
+                                <input id="coin" type="number" class="form-input" v-model="form.coin" />
+                                <template v-if="isSubmitted && $validate.form.coin.$error">
+                                    <p class="text-danger mt-1">Koin konten harus diisi dan lebih dari 0</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2 ">
+                            <div class="custom-file-container" data-upload-id="featuredImage"
+                                :class="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
+                                <div class="label-container">
+                                    <label for="featured_image">Gambar </label> <a href="javascript:;" class="custom-file-container__image-clear" title="Clear Image">×</a>
+                                </div>
+                                <label class="custom-file-container__custom-file" >
+                                    <input id="featured_image" type="file" class="custom-file-container__custom-file__custom-file-input" 
+                                        accept="image/png" @change="handleImageChange" />
+                                    <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
+                                    <span class="custom-file-container__custom-file__custom-file-control ltr:pr-20 rtl:pl-20"></span>
+                                </label>
+                                <template v-if="isSubmitted && $validate.form.featured_image.$error">
+                                    <p class="text-danger mt-1">Gambar tema konten harus diisi</p>
+                                </template>
+                                <div class="custom-file-container__image-preview"></div>
+                            </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 { integer, minValue, required } 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: 'Daftar Konten' });
+
+    const form = ref({
+        title: '',
+        slug: '',
+        theme: null,
+        topic: null,
+        format: '',
+        content: '',
+        data: '',
+        grades: [],
+        point: 0, 
+        coin: 0,
+        featured_image: '',
+    });
+    const isSubmitted = ref(false);
+    const rules = {
+        form: {
+            title: { required },
+            slug: { required },
+            theme: { required },
+            topic: { required },
+            format: { required },
+            content: { required },
+            grades: { required },
+            point: { required, integer, minValue: minValue(0) },
+            coin: { required, integer, minValue: minValue(0) },
+            featured_image: { required },
+        }
+    };
+    const $validate = useVuelidate(rules, { form });
+    const router = useRouter();
+    const config = useRuntimeConfig();
+
+    const params = reactive({
+        current_page: 1,
+        pagesize: 10,
+        sort_column: 'id',
+        sort_direction: 'asc',
+    });
+
+    const { data: themes } = await useAsyncData('themes', 
+        () => $fetch(`${config.public.apiBase}content/themes/`, {
+            params: {
+                page: params.current_page,
+                page_size: 50
+            }
+        }), {
+            watch: [params]
+        }
+    );
+
+    const { data: topics } = await useAsyncData('topics', 
+        () => $fetch(`${config.public.apiBase}content/topics/`, {
+            params: {
+                page: params.current_page,
+                page_size: 50,
+                theme: form.value.theme ? form.value.theme.id : ''
+            }
+        }), {
+            watch: [params]
+        }
+    );
+
+    watch(() => form.value.theme, async (val) => {
+        form.value.topic = null
+        if (val) {
+            refreshNuxtData('topics');
+        } else {
+            
+        }
+    });
+
+    const { data: formats } = await useAsyncData('formats', 
+        () => $fetch(`${config.public.apiBase}content/formats/`)
+    );
+    
+    onMounted(async () => {
+        const fileupload = await import('file-upload-with-preview');
+        let FileUploadWithPreview = fileupload.default;
+
+        // single image upload
+        new FileUploadWithPreview('featuredImage', {
+            images: {
+                baseImage: '/assets/images/file-preview.svg',
+                backgroundImage: '',
+            },
+        });
+    });
+
+    const submitForm = async () => {
+        isSubmitted.value = true;
+        $validate.value.form.$touch();
+        if ($validate.value.form.$invalid) {
+            return false;
+        }
+
+        const formData = new FormData();
+        formData.append('topic', form.value.topic);
+        formData.append('theme', form.value.theme.id);
+        formData.append('description', form.value.description);
+
+        if (form.value.featured_image) {
+            formData.append('featured_image', form.value.featured_image);
+        }
+
+        await $fetch(`${config.public.apiBase}content/topics/`, {
+            method: 'POST',
+            body: formData
+        }).then(() => {
+            //redirect
+            router.push({ path: "/content/topics/list" });
+        })
+        .catch((error) => {
+
+            //assign response error data to state "errors"
+            console.log(error);
+        });
+    }
+
+    function handleImageChange(event: { target: { files: any[]; }; }) {
+        const file = event.target.files[0]
+
+        if (!file) return
+
+        const allowed = ['image/png']
+        if (!allowed.includes(file.type)) {
+            alert('Hanya PNG yang diizinkan')
+            return
+        }
+
+        form.value.featured_image = file
+    }
+</script>
\ No newline at end of file
diff --git a/pages/content/contents/list.vue b/pages/content/contents/list.vue
new file mode 100644
index 0000000..ad2bbec
--- /dev/null
+++ b/pages/content/contents/list.vue
@@ -0,0 +1,130 @@
+<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..." @change="changeSearch"/>
+                </div>
+                <div class="mb-5">
+                    <div class="datatable">
+                        <vue3-datatable
+                            :rows="contents?.results"
+                            :columns="cols"
+                            :totalRows="contents?.count"
+                            :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 #id="data">
+                                <div class="flex 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';
+    useHead({ title: 'Daftar Konten' });
+
+    const router = useRouter();
+    const config = useRuntimeConfig();
+
+    const cols =
+        ref([
+            { field: 'title', title: 'Judul' },
+            { field: 'topic.topic', title: 'Topik' },
+            { field: 'theme.theme', title: 'Tema' },
+            { field: 'format', title: 'Format' },
+            { field: 'id', title: 'Aksi' },
+            
+        ]) || [];
+
+    const params = reactive({
+        search: null,
+        current_page: 1,
+        pagesize: 10,
+        sort_column: 'title',
+        sort_direction: 'asc',
+    });
+    
+    const { data: contents } = await useAsyncData('contents', 
+        () => { 
+            return $fetch(`${config.public.apiBase}/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 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) => {
+        console.log(data);
+        params.current_page = 1; 
+        console.log(params);
+    };
+
+    const viewData = (data: any) => {
+        router.push({ path: "/content/contents/" + data.id });
+    };
+
+    const deleteData = async (data: any) => {
+
+        //delete data with API
+        await $fetch(`${config.public.apiBase}content/contents/${data.id}/`, {
+            method: 'DELETE'
+        });
+
+        //refersh data posts
+        refreshNuxtData('contents');
+    }
+</script>
\ No newline at end of file