auth

pages/content/contents/[id].vue

@@ -266,6 +266,7 @@
     const router = useRouter();
     const route = useRoute();
     const config = useRuntimeConfig();
+    const { $api } = useNuxtApp();
 
     const quilloptions = ref({});
 
@@ -277,8 +278,7 @@
     
     const { data: form, refresh} = await useAsyncData('content-get', 
         async () => {
-            console.log('Fetching content data for ID:', route.params.id);
-            const content = await $fetch(`${config.public.apiBase}/content/contents/${route.params.id}/`, {});
+            const content = await $api(`/content/contents/${route.params.id}/`, {});
 
             return {
                 ...content,
@@ -289,11 +289,11 @@
     const $validate = useVuelidate(rules, { form });
 
     const { data: formats } = await useAsyncData('formats', 
-        () => $fetch(`${config.public.apiBase}/content/formats/`)
+        () => $api(`/content/formats/`)
     );
 
     const { data: themes } = await useAsyncData('themes', 
-        () => $fetch(`${config.public.apiBase}/content/themes/`)
+        () => $api(`/content/themes/`)
     );
 
     // const { data: topics, refresh: refreshTopics } = await useAsyncData('topics', 
@@ -303,18 +303,18 @@
     // );
 
     const { data: types } = await useAsyncData('types', 
-        () => $fetch(`${config.public.apiBase}/content/types/`)
+        () => $api(`/content/types/`)
     );
 
     const { data: statuses } = await useAsyncData('statuses', 
-        () => $fetch(`${config.public.apiBase}/content/statuses/`)
+        () => $api(`/content/statuses/`)
     );
 
     const topics = ref({ results: [] });
     const fetchTopics = async () => {
         if (!form.value.theme?.value) return;
         try {
-            const res = await $fetch(`${config.public.apiBase}/content/topics/${form.value.theme.value}/`);
+            const res = await $api(`/content/topics/${form.value.theme.value}/`);
             topics.value = res;
 
             // mapping kembali topik jika perlu
@@ -361,7 +361,6 @@
         }
     });
 
-
     const isLoading = ref(false);
 
     const featuredImageUploader = ref(null);
@@ -422,7 +421,7 @@
         }
 
         isLoading.value = true;
-        await $fetch(`${config.public.apiBase}/content/contents/${route.params.id}/`, {
+        await $api(`/content/contents/${route.params.id}/`, {
             method: 'PUT',
             body: formData
         }).then(() => {

pages/content/contents/add.vue

@@ -274,6 +274,7 @@
     const $validate = useVuelidate(rules, { form });
     const router = useRouter();
     const config = useRuntimeConfig();
+    const { $api } = useNuxtApp();
 
     const quilloptions = ref({});
 
@@ -284,11 +285,11 @@
     });
 
     const { data: themes } = await useAsyncData('themes', 
-        () => $fetch(`${config.public.apiBase}/content/themes/`)
+        () => $api(`/content/themes/`)
     );
 
     const { data: topics } = await useAsyncData('topics', 
-        () => $fetch(`${config.public.apiBase}/content/topics/${form.value.theme?.value}/`), {
+        () => $api(`/content/topics/${form.value.theme?.value}/`), {
             watch: [() => form.value.theme?.value]
         }
     );
@@ -298,15 +299,15 @@
     });
 
     const { data: formats } = await useAsyncData('formats', 
-        () => $fetch(`${config.public.apiBase}/content/formats/`)
+        () => $api(`/content/formats/`)
     );
 
     const { data: types } = await useAsyncData('types', 
-        () => $fetch(`${config.public.apiBase}/content/types/`)
+        () => $api(`/content/types/`)
     );
 
     const { data: statuses } = await useAsyncData('statuses', 
-        () => $fetch(`${config.public.apiBase}/content/statuses/`)
+        () => $api(`/content/statuses/`)
     );
             
     const isLoading = ref(false);
@@ -374,7 +375,7 @@
         }
 
         isLoading.value = true;
-        await $fetch(`${config.public.apiBase}/content/contents/`, {
+        await $api(`/content/contents/`, {
             method: 'POST',
             body: formData
         }).then(() => {

pages/content/contents/list.vue

@@ -63,10 +63,12 @@
 <script lang="ts" setup>
     import { ref, computed, onMounted } from 'vue';
     import Vue3Datatable from '@bhplugin/vue3-datatable';
+    import { useDebounceFn } from '@vueuse/core';
     useHead({ title: 'Daftar Konten' });
 
     const router = useRouter();
     const config = useRuntimeConfig();
+    const { $api } = useNuxtApp();
 
     const cols =
         ref([
@@ -114,17 +116,25 @@
     const totalRows = computed(() => contents.value?.count ?? 0);
     const { data: contents } = await useAsyncData('contents', 
         () => { 
-            return $fetch(`${config.public.apiBase}/content/contents/`, {
+            return $api(`/content/contents/`, {
                 params: {
                     page: params.current_page,
                     page_size: params.pagesize,
                     ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
                     search: params.search
-                }})
+                },
+            });
         }, {
             watch: [params]
         }
     );
+
+    const debouncedSearch = useDebounceFn(() => {
+        params.current_page = 1;
+        refreshNuxtData('characters');
+    }, 500);
+
+    watch(() => params.search, debouncedSearch);
     
     const changeServer = (data: any) => {
         params.pagesize = data.pagesize;
@@ -142,13 +152,10 @@
     };
 
     const deleteData = async (data: any) => {
-
-        //delete data with API
-        await $fetch(`${config.public.apiBase}content/contents/${data.id}/`, {
+        await $api(`/content/contents/${data.id}/`, {
             method: 'DELETE'
         });
 
-        //refersh data posts
         refreshNuxtData('contents');
     }
 </script>