update tema dan topik

pages/content/themes/[id].vue

@@ -2,20 +2,20 @@
     <div>
         <ul class="flex space-x-2 rtl:space-x-reverse">
             <li>
-                <a href="javascript:;" class="text-primary hover:underline">Core</a>
+                <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>
+                <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">Tambah Tema Konten</h5>
+                    <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
@@ -71,7 +71,6 @@
 </template>
 
 <script lang="ts" setup>
-    import { reactive } from 'vue'
     import { useVuelidate } from '@vuelidate/core';
     import { required } from '@vuelidate/validators';
     import '@/assets/css/file-upload-preview.css';

pages/content/themes/add.vue

@@ -2,7 +2,7 @@
     <div>
         <ul class="flex space-x-2 rtl:space-x-reverse">
             <li>
-                <a href="javascript:;" class="text-primary hover:underline">Core</a>
+                <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>
@@ -15,7 +15,7 @@
         <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>
+                    <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
@@ -71,7 +71,6 @@
 </template>
 
 <script lang="ts" setup>
-    import { reactive } from 'vue'
     import { useVuelidate } from '@vuelidate/core';
     import { required } from '@vuelidate/validators';
     import '@/assets/css/file-upload-preview.css';
@@ -123,7 +122,7 @@
             formData.append('featured_image', form.value.featured_image);
         }
 
-        await $fetch(config.public.apiBase + 'content/themes/', {
+        await $fetch(`${config.public.apiBase}content/themes/`, {
             method: 'POST',
             body: formData
         }).then(() => {

pages/content/themes/list.vue

@@ -2,7 +2,7 @@
     <div>
         <ul class="flex space-x-2 rtl:space-x-reverse">
             <li>
-                <a href="javascript:;" class="text-primary hover:underline">Core</a>
+                <a href="javascript:;" class="text-primary hover:underline">Konten</a>
             </li>
             <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
                 <span>Daftar Tema Konten</span>
@@ -12,7 +12,7 @@
         <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 Provinsi</h5>
+                    <h5 class="text-lg font-semibold dark:text-white-light">Daftar Tema Konten</h5>
                     <NuxtLink to="/content/themes/add" class="dark:text-white-light btn btn-primary !py-1">
                         <icon-plus class="me-1" />
                         Tambah
@@ -67,6 +67,8 @@
 
     const router = useRouter();
 
+    const config = useRuntimeConfig();
+
     const cols =
         ref([
             { field: 'theme', title: 'Tema' },
@@ -86,7 +88,7 @@
         () => { 
             console.log('asyncData');
             console.log(params);
-            return $fetch('http://localhost:8000/content/themes/', {
+            return $fetch(`${config.public.apiBase}content/themes/`, {
                 params: {
                     page: params.current_page,
                     page_size: params.pagesize,
@@ -118,7 +120,7 @@
     const deleteData = async (data: any) => {
 
         //delete data with API
-        await $fetch(`http://localhost:8000/content/themes/${data.id}/`, {
+        await $fetch(`${config.public.apiBase}content/themes/${data.id}/`, {
             method: 'DELETE'
         });
 

pages/content/topics/[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">Core</a>
+                <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>
+                <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>Tambah Tema Konten</span>
+                <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">Tambah Tema Konten</h5>
+                    <h5 class="text-lg font-semibold dark:text-white-light">Edit Topik Konten</h5>
-                    <NuxtLink to="/content/themes/list" class="dark:text-white-light btn btn-dark !py-1">
+                    <NuxtLink to="/content/topics/list" class="dark:text-white-light btn btn-dark !py-1">
                         <icon-arrow-backward class="me-1" />
                         Daftar
                     </NuxtLink>
@@ -24,10 +24,28 @@
                 <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>
-                                <input id="code" type="text" class="form-input" v-model="form.theme" />
+                                <multiselect id="province"
-                                <template v-if="isSubmitted && $validate.form.code.$error">
+                                    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>
@@ -41,13 +59,22 @@
                                 </template>
                             </div>
                         </div>
-                        <div class="grid grid-cols-1 gap-4 md:grid-cols-4 gap-2">
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2 ">
-                            <div :class="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
+                            <div class="custom-file-container" data-upload-id="featuredImage"
-                                <label for="featured_image">Gambar</label>
+                                :class="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
-                                <input id="featured_image" type="text" class="form-input" v-model="form.featured_image" />
+                                <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">
@@ -62,11 +89,13 @@
 </template>
 
 <script lang="ts" setup>
-    import { reactive } from 'vue'
     import { useVuelidate } from '@vuelidate/core';
     import { required } from '@vuelidate/validators';
+    import Multiselect from '@suadelabs/vue3-multiselect';
+    import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
+    import '@/assets/css/file-upload-preview.css';
 
-    useHead({ title: 'Daftar Tema Konten' });
+    useHead({ title: 'Daftar Topik Konten' });
 
     const isSubmitted = ref(false);
     const rules = {
@@ -78,12 +107,43 @@
     };
     const router = useRouter();
     const route = useRoute();
+    const config = useRuntimeConfig();
 
     const { data: form } = await useAsyncData('provinces', 
-        () => $fetch(`http://localhost:8000/content/themes/${route.params.id}`, {}), {}
+        () => $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;
@@ -92,16 +152,21 @@
             return false;
         }
 
-        await $fetch(`http://localhost:8000/content/themes/${route.params.id}/`, {
+        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: { 
+            body: formData
-                "theme": form.value.theme,
-                "description": form.value.description,
-                "featured_image": form.value.featured_image
-            }
         }).then(() => {
             //redirect
-            router.push({ path: "/content/themes/list" });
+            router.push({ path: "/content/topics/list" });
         })
         .catch((error) => {
 
@@ -109,4 +174,18 @@
             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/add.vue

@@ -59,13 +59,22 @@
                                 </template>
                             </div>
                         </div>
-                        <div class="grid grid-cols-1 gap-4 md:grid-cols-4 gap-2">
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2 ">
-                            <div :class="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
+                            <div class="custom-file-container" data-upload-id="featuredImage"
-                                <label for="featured_image">Gambar</label>
+                                :class="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
-                                <input id="featured_image" type="text" class="form-input" v-model="form.featured_image" />
+                                <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">
@@ -85,6 +94,7 @@
     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' });
 
@@ -106,6 +116,8 @@
     const $validate = useVuelidate(rules, { form });
     const router = useRouter();
 
+    const config = useRuntimeConfig();
+
     const params = reactive({
         current_page: 1,
         pagesize: 10,
@@ -114,7 +126,7 @@
     });
 
     const { data: themes } = await useAsyncData('themes', 
-        () => $fetch('http://localhost:8000/content/themes/', {
+        () => $fetch(`${config.public.apiBase}content/themes/`, {
             params: {
                 page: params.current_page,
                 page_size: 50
@@ -124,6 +136,19 @@
         }
     );
     
+    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();
@@ -131,14 +156,18 @@
             return false;
         }
 
-        await $fetch('http://localhost:8000/content/topics/', {
+        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: { 
+            body: formData
-                "theme": form.value.theme.id,
-                "topic": form.value.topic,
-                "description": form.value.description,
-                "featured_image": form.value.featured_image
-            }
         }).then(() => {
             //redirect
             router.push({ path: "/content/topics/list" });
@@ -149,4 +178,18 @@
             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

@@ -67,6 +67,8 @@
 
     const router = useRouter();
 
+    const config = useRuntimeConfig();
+
     const cols =
         ref([
             { field: 'topic', title: 'Topik' },
@@ -87,7 +89,7 @@
         () => { 
             console.log('asyncData');
             console.log(params);
-            return $fetch('http://localhost:8000/content/topics/', {
+            return $fetch(`${config.public.apiBase}/content/topics/`, {
                 params: {
                     page: params.current_page,
                     page_size: params.pagesize,
@@ -119,7 +121,7 @@
     const deleteData = async (data: any) => {
 
         //delete data with API
-        await $fetch(`http://localhost:8000/content/topics/${data.id}/`, {
+        await $fetch(`${config.public.apiBase}content/topics/${data.id}/`, {
             method: 'DELETE'
         });