character

components/layout/Sidebar.vue

@@ -83,13 +83,33 @@
                                 <vue-collapsible :isOpen="activeDropdown === 'content'">
                                     <ul class="sub-menu text-gray-500">
                                         <li>
-                                            <NuxtLink to="/content/themes/list" @click="toggleMobileMenu">Tema</NuxtLink>
+                                            <NuxtLink to="/content/contents/list" @click="toggleMobileMenu">Materi</NuxtLink>
                                         </li>
+                                        
+                                    </ul>
+                                </vue-collapsible>
+                            </li>
+
+                            <li class="menu nav-item">
+                                <button
+                                    type="button"
+                                    class="nav-link group w-full"
+                                    :class="{ active: activeDropdown === 'character' }"
+                                    @click="activeDropdown === 'character' ? (activeDropdown = null) : (activeDropdown = 'character')"
+                                >
+                                    <div class="flex items-center">
+                                        <icon-menu-chat class="shrink-0 group-hover:!text-primary" />
+
+                                        <span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Karakter</span>
+                                    </div>
+                                    <div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'character' }">
+                                        <icon-caret-down />
+                                    </div>
+                                </button>
+                                <vue-collapsible :isOpen="activeDropdown === 'character'">
+                                    <ul class="sub-menu text-gray-500">
                                         <li>
-                                            <NuxtLink to="/content/topics/list" @click="toggleMobileMenu">Topik</NuxtLink>
+                                            <NuxtLink to="/character/characters/list" @click="toggleMobileMenu">Karakter</NuxtLink>
-                                        </li>
-                                        <li>
-                                            <NuxtLink to="/content/contents/list" @click="toggleMobileMenu">Konten</NuxtLink>
                                         </li>
                                         
                                     </ul>

pages/character/characters/[id].vue

@@ -2,21 +2,21 @@
     <div>
         <ul class="flex space-x-2 rtl:space-x-reverse">
             <li>
-                <a href="javascript:;" class="text-primary hover:underline">Konten</a>
+                <a href="javascript:;" class="text-primary hover:underline">Karakter</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>
+                <NuxtLink to="/character/characters/list" class="text-primary hover:underline">Daftar Karakter</NuxtLink>
             </li>
             <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
-                <span>Edit Topik Konten</span>
+                <span>Edit Karakter</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>
+                    <h5 class="text-lg font-semibold dark:text-white-light">Edit Karakter</h5>
-                    <NuxtLink to="/content/topics/list" class="dark:text-white-light btn btn-dark !py-1">
+                    <NuxtLink to="/character/characters/list" class="dark:text-white-light btn btn-dark !py-1">
                         <icon-arrow-backward class="me-1" />
                         Daftar
                     </NuxtLink>
@@ -24,42 +24,58 @@
                 <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 }">
+                            <div :class="{ 'has-error': $validate.form.name.$error, 'has-success': isSubmitted && !$validate.form.name.$error }">
-                                <label for="topic">Topik</label>
+                                <label for="name">Nama Karakter</label>
-                                <input id="topic" type="text" class="form-input" v-model="form.topic" />
+                                <input id="name" type="text" class="form-input" v-model="form.name" />
-                                <template v-if="isSubmitted && $validate.form.topic.$error">
+                                <template v-if="isSubmitted && $validate.form.name.$error">
-                                    <p class="text-danger mt-1">Topik konten harus diisi</p>
+                                    <p class="text-danger mt-1">Nama Karakter harus diisi</p>
                                 </template>
                             </div>
-                            <div :class="{ 'has-error': $validate.form.theme.$error, 'has-success': isSubmitted && !$validate.form.theme.$error }">
+                            <div :class="{ 'has-error': $validate.form.type.$error, 'has-success': isSubmitted && !$validate.form.type.$error }">
-                                <label for="theme">Tema</label>
+                                <label for="type">Jenis</label>
-                                <multiselect id="province"
+                                <multiselect id="format"
-                                    v-model="form.theme"
+                                    v-model="form.type"
-                                    :options="themes?.results"
+                                    :options="typeOptions"
                                     class="custom-multiselect"
                                     :searchable="true"
-                                    placeholder="Pilih tema konten"
+                                    placeholder="Pilih jenis karakter"
                                     selected-label=""
                                     select-label=""
                                     deselect-label=""
-                                    label="theme"
+                                    label="label"
-                                    track-by="id"
+                                    track-by="value"
                                 ></multiselect>
-                                <template v-if="isSubmitted && $validate.form.theme.$error">
+                                <template v-if="isSubmitted && $validate.form.type.$error">
-                                    <p class="text-danger mt-1">Tema konten harus diisi</p>
+                                    <p class="text-danger mt-1">Jenis karakter harus diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.sex.$error, 'has-success': isSubmitted && !$validate.form.sex.$error }">
+                                <label for="grade">Jenis Kelamin</label>
+                                <div class="grid grid-cols-1 gap-2">
+                                    <label class="inline-flex">
+                                        <input type="radio" v-model="form.sex" class="form-radio" value="true" />
+                                        <span>Laki-laki</span>
+                                    </label>
+                                    <label class="inline-flex">
+                                        <input type="radio" v-model="form.sex" class="form-radio" value="false" />
+                                        <span>Perempuan</span>
+                                    </label>
+                                </div>
+                                <template v-if="isSubmitted && $validate.form.sex.$error">
+                                    <p class="text-danger mt-1">Jenis kelamin karakter harus diisi</p>
                                 </template>
                             </div>
                         </div>
-                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-1 gap-2">
-                            <div class="md:col-span-2" :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
+                            <div :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
-                                <label for="description">Deskripsi/Keterangan</label>
+                                <label for="description">Deskripsi Karakter</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>
+                                    <p class="text-danger mt-1">Deskripsi karakter harus diisi</p>
                                 </template>
                             </div>
                         </div>
-                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2 ">
+                        <div class="grid grid-cols-2 gap-4">
                             <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">
@@ -72,7 +88,23 @@
                                     <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>
+                                    <p class="text-danger mt-1">Gambar karakter harus diisi</p>
+                                </template>
+                                <div class="custom-file-container__image-preview"></div>
+                            </div>
+                            <div class="custom-file-container" data-upload-id="featuredIcon"
+                                :class="{ 'has-error': $validate.form.featured_icon.$error, 'has-success': isSubmitted && !$validate.form.featured_icon.$error }">
+                                <div class="label-container">
+                                    <label for="featured_icon">Ikon </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_icon" type="file" class="custom-file-container__custom-file__custom-file-input" 
+                                        accept="image/png" @change="handleIconChange" />
+                                    <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_icon.$error">
+                                    <p class="text-danger mt-1">Gambar ikon karakter harus diisi</p>
                                 </template>
                                 <div class="custom-file-container__image-preview"></div>
                             </div>
@@ -90,47 +122,35 @@
 
 <script lang="ts" setup>
     import { useVuelidate } from '@vuelidate/core';
-    import { required } from '@vuelidate/validators';
+    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 Topik Konten' });
+    useHead({ title: 'Edit Konten' });
 
     const isSubmitted = ref(false);
     const rules = {
         form: {
-            theme: { required },
+            name: { required },
             description: { required },
+            sex: { required },
+            type: { required },
             featured_image: { required },
+            featured_icon: { required },
         }
     };
     const router = useRouter();
     const route = useRoute();
     const config = useRuntimeConfig();
+    const typeOptions = [{ "value": "manusia", "label": "Manusia" }, { "value": "hewan", "label": "Hewan" } ]
 
-    const { data: form } = await useAsyncData('provinces', 
+    const { data: form } = await useAsyncData('characters', 
-        () => $fetch(`${config.public.apiBase}content/topics/${route.params.id}`, {}), {}
+        () => $fetch(`${config.public.apiBase}character/characters/${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');
@@ -139,10 +159,20 @@
         // single image upload
         new FileUploadWithPreview('featuredImage', {
             images: {
-                baseImage: form.value.featured_image ? form.value.featured_image : '/assets/images/file-preview.svg',
+                baseImage: form.value.featured_image || '/assets/images/file-preview.svg',
                 backgroundImage: '',
             },
         });
+
+        // single image upload
+        new FileUploadWithPreview('featuredIcon', {
+            images: {
+                baseImage: form.value.featured_icon || '/assets/images/file-preview.svg',
+                backgroundImage: '',
+            },
+        });
+
+        form.value.type = typeOptions.find(option => option.value === form.value.type);
     });
     
     const submitForm = async () => {
@@ -153,24 +183,28 @@
         }
 
         const formData = new FormData();
-        formData.append('topic', form.value.topic);
+
-        formData.append('theme', form.value.theme.id);
+        formData.append('name', form.value.name);
+        formData.append('sex', form.value.sex);
+        formData.append('type', form.value.type.value);
         formData.append('description', form.value.description);
 
         if (form.value.featured_image) {
             formData.append('featured_image', form.value.featured_image);
         }
+        if (form.value.featured_icon) {
+            formData.append('featured_icon', form.value.featured_icon);
+        }
 
-        await $fetch(`${config.public.apiBase}content/topics/${route.params.id}/`, {
+        await $fetch(`${config.public.apiBase}character/characters/${route.params.id}/`, {
             method: 'PUT',
             body: formData
         }).then(() => {
             //redirect
-            router.push({ path: "/content/topics/list" });
+            router.push({ path: "/character/characters/list" });
         })
         .catch((error) => {
 
-            //assign response error data to state "errors"
             console.log(error);
         });
     }
@@ -180,12 +214,26 @@
 
         if (!file) return
 
-        const allowed = ['image/png']
+        const allowed = ['image/png', 'image/jpeg', 'image/jpg']
         if (!allowed.includes(file.type)) {
-            alert('Hanya PNG yang diizinkan')
+            alert('Hanya PNG atau JPG yang diizinkan')
             return
         }
 
         form.value.featured_image = file
     }
+
+    function handleIconChange(event: { target: { files: any[]; }; }) {
+        const file = event.target.files[0]
+
+        if (!file) return
+
+        const allowed = ['image/png', 'image/jpeg', 'image/jpg']
+        if (!allowed.includes(file.type)) {
+            alert('Hanya PNG yang diizinkan')
+            return
+        }
+
+        form.value.featured_icon = file
+    }
 </script>

pages/character/characters/add.vue

@@ -5,18 +5,18 @@
                 <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>
+                <NuxtLink to="/character/characters/list" class="text-primary hover:underline">Daftar Karakter</NuxtLink>
             </li>
             <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
-                <span>Tambah Topik Konten</span>
+                <span>Tambah Karakter</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 Topik Konten</h5>
+                    <h5 class="text-lg font-semibold dark:text-white-light">Tambah Konten</h5>
-                    <NuxtLink to="/content/topics/list" class="dark:text-white-light btn btn-dark !py-1">
+                    <NuxtLink to="/character/characters/list" class="dark:text-white-light btn btn-dark !py-1">
                         <icon-arrow-backward class="me-1" />
                         Daftar
                     </NuxtLink>
@@ -24,42 +24,58 @@
                 <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 }">
+                            <div :class="{ 'has-error': $validate.form.name.$error, 'has-success': isSubmitted && !$validate.form.name.$error }">
-                                <label for="topic">Topik</label>
+                                <label for="name">Nama Karakter</label>
-                                <input id="topic" type="text" class="form-input" v-model="form.topic" />
+                                <input id="name" type="text" class="form-input" v-model="form.name" />
-                                <template v-if="isSubmitted && $validate.form.topic.$error">
+                                <template v-if="isSubmitted && $validate.form.name.$error">
-                                    <p class="text-danger mt-1">Topik konten harus diisi</p>
+                                    <p class="text-danger mt-1">Nama Karakter harus diisi</p>
                                 </template>
                             </div>
-                            <div :class="{ 'has-error': $validate.form.theme.$error, 'has-success': isSubmitted && !$validate.form.theme.$error }">
+                            <div :class="{ 'has-error': $validate.form.type.$error, 'has-success': isSubmitted && !$validate.form.type.$error }">
-                                <label for="theme">Tema</label>
+                                <label for="type">Jenis</label>
-                                <multiselect id="province"
+                                <multiselect id="format"
-                                    v-model="form.theme"
+                                    v-model="form.type"
-                                    :options="themes?.results"
+                                    :options="typeOptions"
                                     class="custom-multiselect"
                                     :searchable="true"
-                                    placeholder="Pilih tema konten"
+                                    placeholder="Pilih jenis karakter"
                                     selected-label=""
                                     select-label=""
                                     deselect-label=""
-                                    label="theme"
+                                    label="label"
-                                    track-by="id"
+                                    track-by="value"
                                 ></multiselect>
-                                <template v-if="isSubmitted && $validate.form.theme.$error">
+                                <template v-if="isSubmitted && $validate.form.type.$error">
-                                    <p class="text-danger mt-1">Tema konten harus diisi</p>
+                                    <p class="text-danger mt-1">Jenis karakter harus diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.sex.$error, 'has-success': isSubmitted && !$validate.form.sex.$error }">
+                                <label for="grade">Jenis Kelamin</label>
+                                <div class="grid grid-cols-1 gap-2">
+                                    <label class="inline-flex">
+                                        <input type="radio" v-model="form.sex" class="form-radio" value="1" checked />
+                                        <span>Laki-laki</span>
+                                    </label>
+                                    <label class="inline-flex">
+                                        <input type="radio" v-model="form.sex" class="form-radio" value="0" />
+                                        <span>Perempuan</span>
+                                    </label>
+                                </div>
+                                <template v-if="isSubmitted && $validate.form.sex.$error">
+                                    <p class="text-danger mt-1">Jenis kelamin karakter harus diisi</p>
                                 </template>
                             </div>
                         </div>
-                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-1 gap-2">
-                            <div class="md:col-span-2" :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
+                            <div :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
-                                <label for="description">Deskripsi/Keterangan</label>
+                                <label for="description">Deskripsi Karakter</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>
+                                    <p class="text-danger mt-1">Deskripsi karakter harus diisi</p>
                                 </template>
                             </div>
                         </div>
-                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2 ">
+                        <div class="grid grid-cols-2 gap-4">
                             <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">
@@ -72,7 +88,23 @@
                                     <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>
+                                    <p class="text-danger mt-1">Gambar karakter harus diisi</p>
+                                </template>
+                                <div class="custom-file-container__image-preview"></div>
+                            </div>
+                            <div class="custom-file-container" data-upload-id="featuredIcon"
+                                :class="{ 'has-error': $validate.form.featured_icon.$error, 'has-success': isSubmitted && !$validate.form.featured_icon.$error }">
+                                <div class="label-container">
+                                    <label for="featured_icon">Ikon </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_icon" type="file" class="custom-file-container__custom-file__custom-file-input" 
+                                        accept="image/png" @change="handleIconChange" />
+                                    <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_icon.$error">
+                                    <p class="text-danger mt-1">Gambar ikon karakter harus diisi</p>
                                 </template>
                                 <div class="custom-file-container__image-preview"></div>
                             </div>
@@ -96,27 +128,31 @@
     import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
     import '@/assets/css/file-upload-preview.css';
 
-    useHead({ title: 'Daftar Topik Konten' });
+    useHead({ title: 'Tambah Konten' });
 
     const form = ref({
-        theme: '',
+        name: '',
-        topic: '',
+        decription: '',
-        description: '',
+        sex: null,
+        type: '',
         featured_image: '',
+        featured_icon: '',
     });
     const isSubmitted = ref(false);
     const rules = {
         form: {
-            theme: { required },
+            name: { required },
-            topic: { required },
             description: { required },
+            sex: { required },
+            type: { required },
             featured_image: { required },
+            featured_icon: { required },
         }
     };
     const $validate = useVuelidate(rules, { form });
     const router = useRouter();
-
     const config = useRuntimeConfig();
+    const typeOptions = [{ "value": "manusia", "label": "Manusia" }, { "value": "hewan", "label": "Hewan" } ]
 
     const params = reactive({
         current_page: 1,
@@ -125,8 +161,8 @@
         sort_direction: 'asc',
     });
 
-    const { data: themes } = await useAsyncData('themes', 
+    const { data: characters } = await useAsyncData('characters', 
-        () => $fetch(`${config.public.apiBase}content/themes/`, {
+        () => $fetch(`${config.public.apiBase}character/characters/`, {
             params: {
                 page: params.current_page,
                 page_size: 50
@@ -147,6 +183,14 @@
                 backgroundImage: '',
             },
         });
+
+        // single image upload
+        new FileUploadWithPreview('featuredIcon', {
+            images: {
+                baseImage: '/assets/images/file-preview.svg',
+                backgroundImage: '',
+            },
+        });
     });
 
     const submitForm = async () => {
@@ -157,20 +201,25 @@
         }
 
         const formData = new FormData();
-        formData.append('topic', form.value.topic);
+        
-        formData.append('theme', form.value.theme.id);
+        formData.append('name', form.value.name);
+        formData.append('sex', form.value.sex);
+        formData.append('type', form.value.type.value);
         formData.append('description', form.value.description);
 
         if (form.value.featured_image) {
             formData.append('featured_image', form.value.featured_image);
         }
+        if (form.value.featured_icon) {
+            formData.append('featured_icon', form.value.featured_icon);
+        }
 
-        await $fetch(`${config.public.apiBase}content/topics/`, {
+        await $fetch(`${config.public.apiBase}character/characters/`, {
             method: 'POST',
             body: formData
         }).then(() => {
             //redirect
-            router.push({ path: "/content/topics/list" });
+            router.push({ path: "/character/characters/list" });
         })
         .catch((error) => {
 
@@ -184,12 +233,26 @@
 
         if (!file) return
 
-        const allowed = ['image/png']
+        const allowed = ['image/png', 'image/jpeg', 'image/jpg']
         if (!allowed.includes(file.type)) {
-            alert('Hanya PNG yang diizinkan')
+            alert('Hanya PNG atau JPG yang diizinkan')
             return
         }
 
         form.value.featured_image = file
     }
+
+    function handleIconChange(event: { target: { files: any[]; }; }) {
+        const file = event.target.files[0]
+
+        if (!file) return
+
+        const allowed = ['image/png', 'image/jpeg', 'image/jpg']
+        if (!allowed.includes(file.type)) {
+            alert('Hanya PNG atau JPG yang diizinkan')
+            return
+        }
+
+        form.value.featured_icon = file
+    }
 </script>

pages/character/characters/list.vue

@@ -2,18 +2,18 @@
     <div>
         <ul class="flex space-x-2 rtl:space-x-reverse">
             <li>
-                <a href="javascript:;" class="text-primary hover:underline">Konten</a>
+                <a href="javascript:;" class="text-primary hover:underline">Karakter</a>
             </li>
             <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
-                <span>Daftar Tema Konten</span>
+                <span>Daftar Karakter</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 Tema Konten</h5>
+                    <h5 class="text-lg font-semibold dark:text-white-light">Daftar Karakter</h5>
-                    <NuxtLink to="/content/themes/add" class="dark:text-white-light btn btn-primary !py-1">
+                    <NuxtLink to="/character/characters/add" class="dark:text-white-light btn btn-primary !py-1">
                         <icon-plus class="me-1" />
                         Tambah
                     </NuxtLink>
@@ -24,9 +24,9 @@
                 <div class="mb-5">
                     <div class="datatable">
                         <vue3-datatable
-                            :rows="themes?.results"
+                            :rows="characters?.results"
                             :columns="cols"
-                            :totalRows="themes?.count"
+                            :totalRows="characters?.count"
                             :isServerMode=true
                             :page="params.current_page"
                             :pageSize="params.pagesize"
@@ -63,15 +63,14 @@
 <script lang="ts" setup>
     import { ref, computed, onMounted } from 'vue';
     import Vue3Datatable from '@bhplugin/vue3-datatable';
-    useHead({ title: 'Daftar Tema Konten' });
+    useHead({ title: 'Daftar Konten' });
 
     const router = useRouter();
-
     const config = useRuntimeConfig();
 
     const cols =
         ref([
-            { field: 'theme', title: 'Tema' },
+            { field: 'name', title: 'Nama' },
             { field: 'id', title: 'Aksi' },
             
         ]) || [];
@@ -80,15 +79,13 @@
         search: null,
         current_page: 1,
         pagesize: 10,
-        sort_column: 'theme',
+        sort_column: 'name',
         sort_direction: 'asc',
     });
     
-    const { data: themes } = await useAsyncData('themes', 
+    const { data: characters } = await useAsyncData('characters', 
         () => { 
-            console.log('asyncData');
+            return $fetch(`${config.public.apiBase}/character/characters/`, {
-            console.log(params);
-            return $fetch(`${config.public.apiBase}content/themes/`, {
                 params: {
                     page: params.current_page,
                     page_size: params.pagesize,
@@ -114,17 +111,17 @@
     };
 
     const viewData = (data: any) => {
-        router.push({ path: "/content/themes/" + data.id });
+        router.push({ path: "/character/characters/" + data.id });
     };
 
     const deleteData = async (data: any) => {
 
         //delete data with API
-        await $fetch(`${config.public.apiBase}content/themes/${data.id}/`, {
+        await $fetch(`${config.public.apiBase}character/characters/${data.id}/`, {
             method: 'DELETE'
         });
 
         //refersh data posts
-        refreshNuxtData('themes');
+        refreshNuxtData('characters');
     }
 </script>

pages/content/themes/[id].vue

@@ -1,157 +0,0 @@
-<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/themes/list" class="text-primary hover:underline">Daftar Tema Konten</NuxtLink>
-            </li>
-            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
-                <span>Edit Tema 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 Tema Konten</h5>
-                    <NuxtLink to="/content/themes/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.theme.$error }">
-                                <label for="theme">Tema</label>
-                                <input id="theme" type="text" class="form-input" v-model="form.theme" />
-                                <template v-if="isSubmitted && $validate.form.theme.$error">
-                                    <p class="text-danger mt-1">Tema konten harus diisi</p>
-                                </template>
-                            </div>
-                            <div>
-                                <label for="color">Warna Latar Belakang</label>
-                                <input id="color" type="text" class="form-input" v-model="form.color" />
-                            </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 '@/assets/css/file-upload-preview.css';
-
-    useHead({ title: 'Daftar Tema 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/themes/${route.params.id}`, {}), {}
-    );
-    const $validate = useVuelidate(rules, { form });
-    
-    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('theme', form.value.theme);
-        formData.append('description', form.value.description);
-        formData.append('color', form.value.color);
-
-        if (form.value.featured_image) {
-            formData.append('featured_image', form.value.featured_image);
-        }
-
-        await $fetch(`${config.public.apiBase}/content/themes/${route.params.id}/`, {
-            method: 'PUT',
-            body: formData
-        }).then(() => {
-            //redirect
-            router.push({ path: "/content/themes/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>

pages/content/themes/add.vue

@@ -1,155 +0,0 @@
-<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/themes/list" class="text-primary hover:underline">Daftar Tema Konten</NuxtLink>
-            </li>
-            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
-                <span>Tambah Tema 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 Tema Konten</h5>
-                    <NuxtLink to="/content/themes/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.theme.$error }">
-                                <label for="theme">Tema</label>
-                                <input id="theme" type="text" class="form-input" v-model="form.theme" />
-                                <template v-if="isSubmitted && $validate.form.theme.$error">
-                                    <p class="text-danger mt-1">Tema konten harus diisi</p>
-                                </template>
-                            </div>
-                            <div>
-                                <label for="color">Warna Latar Belakang</label>
-                                <input id="color" type="text" class="form-input" v-model="form.color" />
-                            </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 '@/assets/css/file-upload-preview.css';
-    
-    useHead({ title: 'Daftar Tema Konten' });
-
-    const form = ref({
-        theme: '',
-        description: '',
-        featured_image: '',
-        color: '',
-    });
-    const isSubmitted = ref(false);
-    const rules = {
-        form: {
-            theme: { required },
-            description: { required },
-            featured_image: { required },
-        }
-    };
-    const $validate = useVuelidate(rules, { form });
-    const router = useRouter();
-    const config = useRuntimeConfig();
-
-    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('theme', form.value.theme);
-        formData.append('description', form.value.description);
-        formData.append('color', form.value.color);
-
-        if (form.value.featured_image) {
-            formData.append('featured_image', form.value.featured_image);
-        }
-
-        await $fetch(`${config.public.apiBase}content/themes/`, {
-            method: 'POST',
-            body: formData
-        }).then(() => {
-            router.push({ path: "/content/themes/list" });
-        })
-        .catch((error) => {
-            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>

pages/content/topics/list.vue

@@ -1,131 +0,0 @@
-<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 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">Daftar Topik Konten</h5>
-                    <NuxtLink to="/content/topics/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="topics?.results"
-                            :columns="cols"
-                            :totalRows="topics?.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 Topik Konten' });
-
-    const router = useRouter();
-
-    const config = useRuntimeConfig();
-
-    const cols =
-        ref([
-            { field: 'topic', title: 'Topik' },
-            { field: 'theme.theme', title: 'Tema' },
-            { field: 'id', title: 'Aksi' },
-            
-        ]) || [];
-
-    const params = reactive({
-        search: null,
-        current_page: 1,
-        pagesize: 10,
-        sort_column: 'topic',
-        sort_direction: 'asc',
-    });
-    
-    const { data: topics } = await useAsyncData('topics', 
-        () => { 
-            console.log('asyncData');
-            console.log(params);
-            return $fetch(`${config.public.apiBase}/content/topics/`, {
-                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/topics/" + data.id });
-    };
-
-    const deleteData = async (data: any) => {
-
-        //delete data with API
-        await $fetch(`${config.public.apiBase}content/topics/${data.id}/`, {
-            method: 'DELETE'
-        });
-
-        //refersh data posts
-        refreshNuxtData('topics');
-    }
-</script>