From 63219c82154b46bf7ad634a9ff97bb2624704bcd Mon Sep 17 00:00:00 2001
From: Irwan Cahyono <irwan.l.cahyono@gmail.com>
Date: Mon, 7 Jul 2025 01:38:43 +0700
Subject: [PATCH] contents

---
 pages/content/contents/[id].vue | 192 ++++++++++++++++++++++++++++----
 pages/content/contents/add.vue  |  35 +++++-
 pages/content/contents/list.vue |   2 +-
 pages/content/themes/[id].vue   |   9 +-
 pages/content/themes/add.vue    |  10 +-
 5 files changed, 217 insertions(+), 31 deletions(-)

diff --git a/pages/content/contents/[id].vue b/pages/content/contents/[id].vue
index dfe14bd..49f9c3d 100644
--- a/pages/content/contents/[id].vue
+++ b/pages/content/contents/[id].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="/content/contents/list" class="text-primary hover:underline">Daftar Konten</NuxtLink>
             </li>
             <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
-                <span>Edit Topik Konten</span>
+                <span>Edit 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">
+                    <h5 class="text-lg font-semibold dark:text-white-light">Edit 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>
@@ -24,16 +24,25 @@
                 <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>
+                            <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="province"
+                                <multiselect id="theme"
                                     v-model="form.theme"
                                     :options="themes?.results"
                                     class="custom-multiselect"
@@ -49,16 +58,96 @@
                                     <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-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>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-1 gap-2">
+                            <div :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
+                                <label for="description">Deskripsi Singkat Konten</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 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>
+                                <label for="color">Warna Latar Belakang</label>
+                                <input id="color" 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="custom-file-container" data-upload-id="featuredImage"
                                 :class="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
@@ -90,18 +179,26 @@
 
 <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: {
+            title: { required },
+            slug: { required },
             theme: { required },
+            topic: { required },
+            format: { required },
             description: { required },
+            content: { required },
+            grades: { required },
+            point: { required, integer, minValue: minValue(0) },
+            coin: { required, integer, minValue: minValue(0) },
             featured_image: { required },
         }
     };
@@ -109,9 +206,30 @@
     const route = useRoute();
     const config = useRuntimeConfig();
 
-    const { data: form } = await useAsyncData('provinces', 
-        () => $fetch(`${config.public.apiBase}content/topics/${route.params.id}`, {}), {}
+    const { data: formats } = await useAsyncData('formats', 
+        () => $fetch(`${config.public.apiBase}content/formats/`)
     );
+    
+    const { data: form } = await useAsyncData('contents', 
+        async () => {
+            const content = await $fetch(`${config.public.apiBase}content/contents/${route.params.id}`, {});
+
+            return {
+                ...content,
+                data: JSON.stringify(content.data),
+            };
+    });
+
+    watchEffect(async () => {
+        if (formats.value?.results?.length && typeof form.value.format === 'string') {
+            const found = formats.value.results.find(f => f.value === form.value.format)
+            if (found) {
+                await nextTick();
+                form.value.format = found;
+            }
+        }
+    })
+
     const $validate = useVuelidate(rules, { form });
 
     const params = reactive({
@@ -132,6 +250,27 @@
         }
     );
 
+    const { data: topics, refresh: refreshTopics } = 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, () => form.value?.theme]
+        }
+    );
+
+    watch(() => form.value?.theme, async (val) => {
+        form.value.topic = null;
+        if (val && formats.value) {
+            await refreshTopics();
+        }
+    });
+
+    
+
     onMounted(async () => {
         const fileupload = await import('file-upload-with-preview');
         let FileUploadWithPreview = fileupload.default;
@@ -153,24 +292,33 @@
         }
 
         const formData = new FormData();
-        formData.append('topic', form.value.topic);
+
+        formData.append('title', form.value.title);
+        formData.append('slug', form.value.slug);
+        formData.append('format', form.value.format.value);
+        formData.append('topic', form.value.topic.id);
         formData.append('theme', form.value.theme.id);
         formData.append('description', form.value.description);
+        formData.append('content', form.value.content);
+        formData.append('data', JSON.stringify(form.value.data));
+        formData.append('grades', JSON.stringify(form.value.grades));
+        formData.append('point', form.value.point);
+        formData.append('coin', form.value.coin);
+        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/topics/${route.params.id}/`, {
+        await $fetch(`${config.public.apiBase}content/contents/${route.params.id}/`, {
             method: 'PUT',
             body: formData
         }).then(() => {
             //redirect
-            router.push({ path: "/content/topics/list" });
+            router.push({ path: "/content/contents/list" });
         })
         .catch((error) => {
 
-            //assign response error data to state "errors"
             console.log(error);
         });
     }
diff --git a/pages/content/contents/add.vue b/pages/content/contents/add.vue
index b67c203..033343e 100644
--- a/pages/content/contents/add.vue
+++ b/pages/content/contents/add.vue
@@ -95,6 +95,15 @@
                                 </template>
                             </div>
                         </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-1 gap-2">
+                            <div :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
+                                <label for="description">Deskripsi Singkat Konten</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 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>
@@ -134,6 +143,10 @@
                                     <p class="text-danger mt-1">Koin konten harus diisi dan lebih dari 0</p>
                                 </template>
                             </div>
+                            <div>
+                                <label for="color">Warna Latar Belakang</label>
+                                <input id="color" 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="custom-file-container" data-upload-id="featuredImage"
@@ -172,7 +185,7 @@
     import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
     import '@/assets/css/file-upload-preview.css';
 
-    useHead({ title: 'Daftar Konten' });
+    useHead({ title: 'Tambah Konten' });
 
     const form = ref({
         title: '',
@@ -180,12 +193,14 @@
         theme: null,
         topic: null,
         format: '',
+        decription: '',
         content: '',
         data: '',
         grades: [],
         point: 0, 
         coin: 0,
         featured_image: '',
+        color: '',
     });
     const isSubmitted = ref(false);
     const rules = {
@@ -195,6 +210,7 @@
             theme: { required },
             topic: { required },
             format: { required },
+            description: { required },
             content: { required },
             grades: { required },
             point: { required, integer, minValue: minValue(0) },
@@ -270,20 +286,31 @@
         }
 
         const formData = new FormData();
-        formData.append('topic', form.value.topic);
+        
+        formData.append('title', form.value.title);
+        formData.append('slug', form.value.slug);
+        formData.append('format', form.value.format.value);
+        formData.append('topic', form.value.topic.id);
         formData.append('theme', form.value.theme.id);
         formData.append('description', form.value.description);
+        formData.append('content', form.value.content);
+        formData.append('data', form.value.data);
+        formData.append('grades', JSON.stringify(form.value.grades));
+        formData.append('point', form.value.point);
+        formData.append('coin', form.value.coin);
+        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/topics/`, {
+        console.log(formData);
+        await $fetch(`${config.public.apiBase}content/contents/`, {
             method: 'POST',
             body: formData
         }).then(() => {
             //redirect
-            router.push({ path: "/content/topics/list" });
+            router.push({ path: "/content/contents/list" });
         })
         .catch((error) => {
 
diff --git a/pages/content/contents/list.vue b/pages/content/contents/list.vue
index ad2bbec..cdc7523 100644
--- a/pages/content/contents/list.vue
+++ b/pages/content/contents/list.vue
@@ -71,8 +71,8 @@
     const cols =
         ref([
             { field: 'title', title: 'Judul' },
-            { field: 'topic.topic', title: 'Topik' },
             { field: 'theme.theme', title: 'Tema' },
+            { field: 'topic.topic', title: 'Topik' },
             { field: 'format', title: 'Format' },
             { field: 'id', title: 'Aksi' },
             
diff --git a/pages/content/themes/[id].vue b/pages/content/themes/[id].vue
index b190e9c..93fc101 100644
--- a/pages/content/themes/[id].vue
+++ b/pages/content/themes/[id].vue
@@ -26,11 +26,15 @@
                         <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="code" type="text" class="form-input" v-model="form.theme" />
-                                <template v-if="isSubmitted && $validate.form.code.$error">
+                                <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 }">
@@ -117,6 +121,7 @@
         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);
diff --git a/pages/content/themes/add.vue b/pages/content/themes/add.vue
index 3ded343..1454bbb 100644
--- a/pages/content/themes/add.vue
+++ b/pages/content/themes/add.vue
@@ -26,11 +26,15 @@
                         <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="code" type="text" class="form-input" v-model="form.theme" />
-                                <template v-if="isSubmitted && $validate.form.code.$error">
+                                <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 }">
@@ -81,6 +85,7 @@
         theme: '',
         description: '',
         featured_image: '',
+        color: '',
     });
     const isSubmitted = ref(false);
     const rules = {
@@ -117,6 +122,7 @@
         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);