update tema dan topik
This commit is contained in:
parent
753688e56d
commit
c17c54d6ce
@ -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';
|
||||
|
||||
@ -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(() => {
|
||||
|
||||
@ -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'
|
||||
});
|
||||
|
||||
|
||||
@ -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>
|
||||
<NuxtLink to="/content/themes/list" class="dark:text-white-light btn btn-dark !py-1">
|
||||
<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">
|
||||
<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" />
|
||||
<template v-if="isSubmitted && $validate.form.code.$error">
|
||||
<multiselect id="province"
|
||||
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="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
|
||||
<label for="featured_image">Gambar</label>
|
||||
<input id="featured_image" type="text" class="form-input" v-model="form.featured_image" />
|
||||
<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">
|
||||
@ -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: {
|
||||
"theme": form.value.theme,
|
||||
"description": form.value.description,
|
||||
"featured_image": form.value.featured_image
|
||||
}
|
||||
body: formData
|
||||
}).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>
|
||||
@ -59,13 +59,22 @@
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-4 gap-2">
|
||||
<div :class="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
|
||||
<label for="featured_image">Gambar</label>
|
||||
<input id="featured_image" type="text" class="form-input" v-model="form.featured_image" />
|
||||
<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">
|
||||
@ -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: {
|
||||
"theme": form.value.theme.id,
|
||||
"topic": form.value.topic,
|
||||
"description": form.value.description,
|
||||
"featured_image": form.value.featured_image
|
||||
}
|
||||
body: formData
|
||||
}).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>
|
||||
@ -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'
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user