Probindo/freekake_webapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update tema dan topik

Browse Source
This commit is contained in:
Irwan Cahyono 2025-06-29 23:17:13 +07:00
parent 753688e56d
commit c17c54d6ce
6 changed files with 171 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages/content/themes/[id].vue
View File

@ -2,20 +2,20 @@
<div> <div>
<ul class="flex space-x-2 rtl:space-x-reverse"> <ul class="flex space-x-2 rtl:space-x-reverse">
<li> <li>
<a href="javascript:;" class="text-primary hover:underline">Core</a> <a href="javascript:;" class="text-primary hover:underline">Konten</a>
</li> </li>
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2"> <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/themes/list" class="text-primary hover:underline">Daftar Tema Konten</NuxtLink>
</li> </li>
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2"> <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
<span>Tambah Tema Konten</span> <span>Edit Tema Konten</span>
</li> </li>
</ul> </ul>
<div class="grid grid-cols-1 gap-6 pt-5"> <div class="grid grid-cols-1 gap-6 pt-5">
<div class="panel"> <div class="panel">
<div class="mb-5 flex items-center justify-between"> <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"> <NuxtLink to="/content/themes/list" class="dark:text-white-light btn btn-dark !py-1">
<icon-arrow-backward class="me-1" /> <icon-arrow-backward class="me-1" />
Daftar Daftar
@ -71,7 +71,6 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive } from 'vue'
import { useVuelidate } from '@vuelidate/core'; import { useVuelidate } from '@vuelidate/core';
import { required } from '@vuelidate/validators'; import { required } from '@vuelidate/validators';
import '@/assets/css/file-upload-preview.css'; import '@/assets/css/file-upload-preview.css';

7
pages/content/themes/add.vue
View File

@ -2,7 +2,7 @@
<div> <div>
<ul class="flex space-x-2 rtl:space-x-reverse"> <ul class="flex space-x-2 rtl:space-x-reverse">
<li> <li>
<a href="javascript:;" class="text-primary hover:underline">Core</a> <a href="javascript:;" class="text-primary hover:underline">Konten</a>
</li> </li>
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2"> <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/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="grid grid-cols-1 gap-6 pt-5">
<div class="panel"> <div class="panel">
<div class="mb-5 flex items-center justify-between"> <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"> <NuxtLink to="/content/themes/list" class="dark:text-white-light btn btn-dark !py-1">
<icon-arrow-backward class="me-1" /> <icon-arrow-backward class="me-1" />
Daftar Daftar
@ -71,7 +71,6 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive } from 'vue'
import { useVuelidate } from '@vuelidate/core'; import { useVuelidate } from '@vuelidate/core';
import { required } from '@vuelidate/validators'; import { required } from '@vuelidate/validators';
import '@/assets/css/file-upload-preview.css'; import '@/assets/css/file-upload-preview.css';
@ -123,7 +122,7 @@
formData.append('featured_image', form.value.featured_image); formData.append('featured_image', form.value.featured_image);
} }
await $fetch(config.public.apiBase + 'content/themes/', { await $fetch(`${config.public.apiBase}content/themes/`, {
method: 'POST', method: 'POST',
body: formData body: formData
}).then(() => { }).then(() => {

10
pages/content/themes/list.vue
View File

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

121
pages/content/topics/[id].vue
View File

@ -2,21 +2,21 @@
<div> <div>
<ul class="flex space-x-2 rtl:space-x-reverse"> <ul class="flex space-x-2 rtl:space-x-reverse">
<li> <li>
<a href="javascript:;" class="text-primary hover:underline">Core</a> <a href="javascript:;" class="text-primary hover:underline">Konten</a>
</li> </li>
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2"> <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>
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2"> <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
<span>Tambah Tema Konten</span> <span>Edit Topik Konten</span>
</li> </li>
</ul> </ul>
<div class="grid grid-cols-1 gap-6 pt-5"> <div class="grid grid-cols-1 gap-6 pt-5">
<div class="panel"> <div class="panel">
<div class="mb-5 flex items-center justify-between"> <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" /> <icon-arrow-backward class="me-1" />
Daftar Daftar
</NuxtLink> </NuxtLink>
@ -24,10 +24,28 @@
<div class="mb-5"> <div class="mb-5">
<form class="space-y-5" @submit.prevent="submitForm()"> <form class="space-y-5" @submit.prevent="submitForm()">
<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-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 }"> <div :class="{ 'has-error': $validate.form.theme.$error, 'has-success': isSubmitted && !$validate.form.theme.$error }">
<label for="theme">Tema</label> <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> <p class="text-danger mt-1">Tema konten harus diisi</p>
</template> </template>
</div> </div>
@ -41,13 +59,22 @@
</template> </template>
</div> </div>
</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"> <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 tema konten harus diisi</p>
</template> </template>
<div class="custom-file-container__image-preview"></div>
</div> </div>
</div> </div>
<div class="flex items-center ltr:ml-auto mt-8"> <div class="flex items-center ltr:ml-auto mt-8">
@ -62,11 +89,13 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive } from 'vue'
import { useVuelidate } from '@vuelidate/core'; import { useVuelidate } from '@vuelidate/core';
import { required } from '@vuelidate/validators'; 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 isSubmitted = ref(false);
const rules = { const rules = {
@ -78,12 +107,43 @@
}; };
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const config = useRuntimeConfig();
const { data: form } = await useAsyncData('provinces', 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 $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 () => { const submitForm = async () => {
isSubmitted.value = true; isSubmitted.value = true;
@ -92,16 +152,21 @@
return false; return false;
} }
await $fetch(`http://localhost:8000/content/themes/${route.params.id}/`, { const formData = new FormData();
method: 'PUT', formData.append('topic', form.value.topic);
body: { formData.append('theme', form.value.theme.id);
"theme": form.value.theme, formData.append('description', form.value.description);
"description": form.value.description,
"featured_image": form.value.featured_image if (form.value.featured_image) {
formData.append('featured_image', form.value.featured_image);
} }
await $fetch(`${config.public.apiBase}content/topics/${route.params.id}/`, {
method: 'PUT',
body: formData
}).then(() => { }).then(() => {
//redirect //redirect
router.push({ path: "/content/themes/list" }); router.push({ path: "/content/topics/list" });
}) })
.catch((error) => { .catch((error) => {
@ -109,4 +174,18 @@
console.log(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> </script>

67
pages/content/topics/add.vue
View File

@ -59,13 +59,22 @@
</template> </template>
</div> </div>
</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"> <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 tema konten harus diisi</p>
</template> </template>
<div class="custom-file-container__image-preview"></div>
</div> </div>
</div> </div>
<div class="flex items-center ltr:ml-auto mt-8"> <div class="flex items-center ltr:ml-auto mt-8">
@ -85,6 +94,7 @@
import { required } from '@vuelidate/validators'; import { required } from '@vuelidate/validators';
import Multiselect from '@suadelabs/vue3-multiselect'; import Multiselect from '@suadelabs/vue3-multiselect';
import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css'; import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
import '@/assets/css/file-upload-preview.css';
useHead({ title: 'Daftar Topik Konten' }); useHead({ title: 'Daftar Topik Konten' });
@ -106,6 +116,8 @@
const $validate = useVuelidate(rules, { form }); const $validate = useVuelidate(rules, { form });
const router = useRouter(); const router = useRouter();
const config = useRuntimeConfig();
const params = reactive({ const params = reactive({
current_page: 1, current_page: 1,
pagesize: 10, pagesize: 10,
@ -114,7 +126,7 @@
}); });
const { data: themes } = await useAsyncData('themes', const { data: themes } = await useAsyncData('themes',
() => $fetch('http://localhost:8000/content/themes/', { () => $fetch(`${config.public.apiBase}content/themes/`, {
params: { params: {
page: params.current_page, page: params.current_page,
page_size: 50 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 () => { const submitForm = async () => {
isSubmitted.value = true; isSubmitted.value = true;
$validate.value.form.$touch(); $validate.value.form.$touch();
@ -131,14 +156,18 @@
return false; return false;
} }
await $fetch('http://localhost:8000/content/topics/', { const formData = new FormData();
method: 'POST', formData.append('topic', form.value.topic);
body: { formData.append('theme', form.value.theme.id);
"theme": form.value.theme.id, formData.append('description', form.value.description);
"topic": form.value.topic,
"description": form.value.description, if (form.value.featured_image) {
"featured_image": form.value.featured_image formData.append('featured_image', form.value.featured_image);
} }
await $fetch(`${config.public.apiBase}content/topics/`, {
method: 'POST',
body: formData
}).then(() => { }).then(() => {
//redirect //redirect
router.push({ path: "/content/topics/list" }); router.push({ path: "/content/topics/list" });
@ -149,4 +178,18 @@
console.log(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> </script>

6
pages/content/topics/list.vue
View File

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