Update Manga, Chapter & Pages
This commit is contained in:
parent
4f266bcdd8
commit
96328ff6ae
@ -109,6 +109,31 @@
|
|||||||
</vue-collapsible>
|
</vue-collapsible>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<li class="menu nav-item">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="nav-link group w-full"
|
||||||
|
:class="{ active: activeDropdown === 'entertainment' }"
|
||||||
|
@click="activeDropdown === 'entertainment' ? (activeDropdown = null) : (activeDropdown = 'entertainment')"
|
||||||
|
>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<icon-menu-pages class="shrink-0 group-hover:!text-primary" />
|
||||||
|
|
||||||
|
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Entertainment</span>
|
||||||
|
</div>
|
||||||
|
<div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'entertainment' }">
|
||||||
|
<icon-caret-down />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<vue-collapsible :isOpen="activeDropdown === 'entertainment'">
|
||||||
|
<ul class="sub-menu text-gray-500">
|
||||||
|
<li>
|
||||||
|
<NuxtLink to="/entertainment/manga/list" @click="toggleMobileMenu">Manga</NuxtLink>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-collapsible>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
|
<h2 class="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
|
||||||
<icon-minus class="hidden h-5 w-4 flex-none" />
|
<icon-minus class="hidden h-5 w-4 flex-none" />
|
||||||
|
|||||||
@ -0,0 +1,197 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul class="flex space-x-2 rtl:space-x-reverse">
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;" class="text-primary hover:underline">Entertainment</a>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink to="/entertainment/manga/list" class="text-primary hover:underline">
|
||||||
|
Manga
|
||||||
|
</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="text-primary hover:underline">Daftar Chapter</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/list`" class="text-primary hover:underline">Daftar Pages</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<span>Edit Pages</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 Pages</h5>
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/list`" class="dark:text-white-light btn btn-dark !py-1">
|
||||||
|
<icon-arrow-backward class="me-1" />
|
||||||
|
Daftar
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
<div class="mb-5">
|
||||||
|
<form v-if="form" class="space-y-5" @submit.prevent="submitForm()">
|
||||||
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
|
||||||
|
<div :class="{ 'has-error': $validate.form.order.$error, 'has-success': isSubmitted && !$validate.form.order.$error }">
|
||||||
|
<label for="order">Order</label>
|
||||||
|
<input id="order" type="number" class="form-input" v-model="form.order" />
|
||||||
|
<template v-if="isSubmitted && $validate.form.order.$error">
|
||||||
|
<p class="text-danger mt-1">Order harus diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="custom-file-container" data-upload-id="media"
|
||||||
|
:class="{ 'has-error': $validate.form.media.$error, 'has-success': isSubmitted && !$validate.form.media.$error }">
|
||||||
|
<div class="label-container">
|
||||||
|
<label for="media">Media </label> <a href="javascript:;" class="custom-file-container__image-clear" title="Clear Image">×</a>
|
||||||
|
</div>
|
||||||
|
<label class="custom-file-container__custom-file" >
|
||||||
|
<input id="media" type="file" class="custom-file-container__custom-file__custom-file-input"
|
||||||
|
accept="image/png" @change="handleMediaChange" />
|
||||||
|
<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.media.$error">
|
||||||
|
<p class="text-danger mt-1">Gambar karakter harus diupload dengan file berjenis PNG atau JPEG dengan ukuran maksimal 1 MB</p>
|
||||||
|
</template>
|
||||||
|
<div class="custom-file-container__image-preview"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center ltr:ml-auto mt-8">
|
||||||
|
<button type="submit" class="btn btn-success !py-1" :disabled="isLoading"><icon-save class="me-1" /> Simpan</button>
|
||||||
|
<button type="reset" class="btn btn-dark !py-1 ml-1" @click="resetForm"><icon-restore class="me-1" />Reset</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useVuelidate } from '@vuelidate/core';
|
||||||
|
import { required, helpers } 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: 'Edit Pages' });
|
||||||
|
|
||||||
|
const isSubmitted = ref(false);
|
||||||
|
|
||||||
|
const imageType = helpers.withMessage('Format gambar harus PNG atau JPG', (value) => {
|
||||||
|
if (!value) return true;
|
||||||
|
if (typeof value === 'string') return true;
|
||||||
|
return ['image/png', 'image/jpeg', 'image/jpg'].includes(value.type);
|
||||||
|
});
|
||||||
|
const maxFileSize = helpers.withMessage('Ukuran gambar tidak boleh lebih dari 1MB', (value) => {
|
||||||
|
if (!value) return true;
|
||||||
|
if (typeof value === 'string') return true;
|
||||||
|
return value.size <= 1048576; // 1MB dalam byte
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
form: {
|
||||||
|
order: { required },
|
||||||
|
media: { imageType, maxFileSize },
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
const { $api } = useNuxtApp();
|
||||||
|
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
|
const featuredImageUploader = ref(null);
|
||||||
|
|
||||||
|
const { data: form, refresh } = await useAsyncData('page-get',
|
||||||
|
() => $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/${route.params.id}`, {}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const $validate = useVuelidate(rules, { form });
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
if (!form.value) return;
|
||||||
|
|
||||||
|
const fileupload = await import('file-upload-with-preview');
|
||||||
|
let FileUploadWithPreview = fileupload.default;
|
||||||
|
|
||||||
|
mediaUploader.value =new FileUploadWithPreview('media', {
|
||||||
|
images: {
|
||||||
|
baseImage: form.value.media || '/assets/images/file-preview.svg',
|
||||||
|
backgroundImage: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const submitForm = async () => {
|
||||||
|
isSubmitted.value = true;
|
||||||
|
$validate.value.form.$touch();
|
||||||
|
if ($validate.value.form.$invalid) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
|
||||||
|
formData.append('order', form.value.order);
|
||||||
|
|
||||||
|
if (form.value.media && typeof form.value.media !== 'string') {
|
||||||
|
formData.append('media', form.value.media);
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoading.value = true;
|
||||||
|
await $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/${route.params.id}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
body: formData
|
||||||
|
}).then(() => {
|
||||||
|
router.push({ path: "/entertainment/manga/" + route.params.mangaid + "/chapters/" + route.params.chapterid + "/pages/list"});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
isLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleImageChange(event: { target: { files: any[]; }; }) {
|
||||||
|
const file = event.target.files[0]
|
||||||
|
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
const allowed = ['image/png', 'image/jpeg', 'image/jpg']
|
||||||
|
if (!allowed.includes(file.type)) {
|
||||||
|
alert('Hanya PNG atau JPG yang diizinkan')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
form.value.media = file
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMediaChange(event: { target: { files: any[]; }; }) {
|
||||||
|
const file = event.target.files[0]
|
||||||
|
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
const allowed = ['image/png', 'image/jpeg', 'image/jpg']
|
||||||
|
if (!allowed.includes(file.type)) {
|
||||||
|
alert('Hanya PNG atau JPG yang diizinkan')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
form.value.media = file
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
refresh()
|
||||||
|
|
||||||
|
isSubmitted.value = false;
|
||||||
|
$validate.value.form.$reset();
|
||||||
|
|
||||||
|
mediaUploader?.value?.clearPreviewPanel();
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,180 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul class="flex space-x-2 rtl:space-x-reverse">
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;" class="text-primary hover:underline">Intertainment</a>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink :to="`/entertainment/manga/list`" class="text-primary hover:underline">Manga</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="text-primary hover:underline">Chapter</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.mangaid}/pages/list`" class="text-primary hover:underline">Daftar Pages</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<span>Tambah Pages</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 Pages</h5>
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.mangaid}/pages/list`" class="dark:text-white-light btn btn-dark !py-1">
|
||||||
|
<icon-arrow-backward class="me-1" />
|
||||||
|
Daftar
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
<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.order.$error, 'has-success': isSubmitted && !$validate.order.slug.$error }">
|
||||||
|
<label for="order">Order</label>
|
||||||
|
<input id="order" type="order" class="form-input" v-model="form.order" />
|
||||||
|
<template v-if="isSubmitted && $validate.form.order.$error">
|
||||||
|
<p class="text-danger mt-1">Order harus diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="custom-file-container" data-upload-id="media"
|
||||||
|
:class="{ 'has-error': $validate.form.media.$error, 'has-success': isSubmitted && !$validate.form.media.$error }">
|
||||||
|
<div class="label-container">
|
||||||
|
<label for="media">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="media" 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 pages harus diupload dengan file berjenis PNG atau JPEG dengan ukuran maksimal 1 MB</p>
|
||||||
|
</template>
|
||||||
|
<div class="custom-file-container__image-preview"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center ltr:ml-auto mt-8">
|
||||||
|
<button type="submit" class="btn btn-success !py-1" :disabled="isLoading"><icon-save class="me-1" /> {{ isLoading ? 'Menyimpan...' : 'Simpan' }}</button>
|
||||||
|
<button type="button" class="btn btn-dark !py-1 ml-1" @click="resetForm"><icon-restore class="me-1" />Reset</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive } from 'vue'
|
||||||
|
import { useVuelidate } from '@vuelidate/core';
|
||||||
|
import { required, helpers } 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: 'Tambah Pages' });
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
order: '',
|
||||||
|
media: '',
|
||||||
|
});
|
||||||
|
const isSubmitted = ref(false);
|
||||||
|
|
||||||
|
const imageType = helpers.withMessage('Format gambar harus PNG atau JPG', (value) => {
|
||||||
|
if (!value) return false;
|
||||||
|
return ['image/png', 'image/jpeg', 'image/jpg'].includes(value.type);
|
||||||
|
});
|
||||||
|
const maxFileSize = helpers.withMessage('Ukuran gambar tidak boleh lebih dari 1MB', (value) => {
|
||||||
|
if (!value) return false;
|
||||||
|
return value.size <= 1048576;
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
form: {
|
||||||
|
order: { required },
|
||||||
|
media: { required, imageType, maxFileSize },
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const $validate = useVuelidate(rules, { form });
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
const { $api } = useNuxtApp();
|
||||||
|
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
|
const mediaUploader = ref(null);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const fileupload = await import('file-upload-with-preview');
|
||||||
|
let FileUploadWithPreview = fileupload.default;
|
||||||
|
|
||||||
|
mediaUploader.value = new FileUploadWithPreview('media', {
|
||||||
|
images: {
|
||||||
|
baseImage: '/assets/images/file-preview.svg',
|
||||||
|
backgroundImage: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const submitForm = async () => {
|
||||||
|
isSubmitted.value = true;
|
||||||
|
$validate.value.form.$touch();
|
||||||
|
if ($validate.value.form.$invalid) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
|
||||||
|
formData.append('order', form.value.order);
|
||||||
|
formData.append('chapter', parseInt(route.params.chapterid));
|
||||||
|
if (form.value.media) {
|
||||||
|
formData.append('media', form.value.media);
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoading.value = true;
|
||||||
|
await $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
}).then(() => {
|
||||||
|
router.push({ path: `/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/list` });
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
isLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleImageChange(event: { target: { files: any[]; }; }) {
|
||||||
|
const file = event.target.files[0]
|
||||||
|
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
const allowed = ['image/png', 'image/jpeg', 'image/jpg']
|
||||||
|
if (!allowed.includes(file.type)) {
|
||||||
|
alert('Hanya PNG atau JPG yang diizinkan')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
form.value.media = file
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
form.value = {
|
||||||
|
order: '',
|
||||||
|
media: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
isSubmitted.value = false;
|
||||||
|
$validate.value.form.$reset();
|
||||||
|
|
||||||
|
mediaUploader?.value?.clearPreviewPanel();
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,178 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul class="flex space-x-2 rtl:space-x-reverse">
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;" class="text-primary hover:underline">Intertainment</a>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink to="/entertainment/manga/list" class="text-primary hover:underline">
|
||||||
|
Manga
|
||||||
|
</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="text-primary hover:underline">
|
||||||
|
Chapter
|
||||||
|
</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<span>
|
||||||
|
Pages
|
||||||
|
</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">Daftar Page</h5>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="dark:text-white-light btn btn-secondary !py-1">
|
||||||
|
<icon-arrow-backward class="me-1" />
|
||||||
|
Daftar Chapters
|
||||||
|
</NuxtLink>
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/add`" class="dark:text-white-light btn btn-primary !py-1">
|
||||||
|
<icon-plus class="me-1" />
|
||||||
|
Tambah
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-5 flex items-center justify-between">
|
||||||
|
<input v-model.lazy="params.search" type="text" class="form-input max-w-xs" placeholder="Cari... (tombol Enter untuk mencari)" @change="changeSearch"/>
|
||||||
|
</div>
|
||||||
|
<div class="mb-5">
|
||||||
|
<div class="datatable">
|
||||||
|
<vue3-datatable
|
||||||
|
:rows="rows"
|
||||||
|
:columns="cols"
|
||||||
|
:totalRows="totalRows"
|
||||||
|
:isServerMode=true
|
||||||
|
:page="params.current_page"
|
||||||
|
:pageSize="params.pagesize"
|
||||||
|
:sortable="true"
|
||||||
|
:sortColumn="params.sort_column"
|
||||||
|
:sortDirection="params.sort_direction"
|
||||||
|
@change="changeServer"
|
||||||
|
skin="whitespace-nowrap bh-table-hover"
|
||||||
|
firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
|
||||||
|
lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
|
||||||
|
previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
|
||||||
|
nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
|
||||||
|
>
|
||||||
|
<template #actions="data">
|
||||||
|
<div class="flex justify-end gap-1">
|
||||||
|
<button type="button" class="btn btn-success !py-1" @click="viewData(data.value)">
|
||||||
|
<icon-edit class="me-1" />
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-danger !py-1" @click="deleteData(data.value)">
|
||||||
|
<icon-trash class="me-1" />
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</vue3-datatable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, onMounted } from 'vue';
|
||||||
|
import Vue3Datatable from '@bhplugin/vue3-datatable';
|
||||||
|
import { useDebounceFn } from '@vueuse/core';
|
||||||
|
useHead({ title: 'Daftar Pages' });
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
const { $api } = useNuxtApp();
|
||||||
|
|
||||||
|
const cols =
|
||||||
|
ref([
|
||||||
|
{ field: 'order', title: 'Order' },
|
||||||
|
{ field: 'media', title: 'Media', render: (row: any) => `<img src="${config.public.apiBase + row.media}" class="h-20 object-contain" />` },
|
||||||
|
{
|
||||||
|
field: 'actions',
|
||||||
|
title: 'Aksi',
|
||||||
|
headerClass: 'text-right',
|
||||||
|
cellClass: 'text-right',
|
||||||
|
sort: false,
|
||||||
|
width: '150px'
|
||||||
|
}
|
||||||
|
]) || [];
|
||||||
|
|
||||||
|
const params = reactive({
|
||||||
|
search: null,
|
||||||
|
current_page: 1,
|
||||||
|
pagesize: 10,
|
||||||
|
sort_column: 'order',
|
||||||
|
sort_direction: 'asc',
|
||||||
|
});
|
||||||
|
|
||||||
|
const rows = computed(() => pages.value?.results ?? []);
|
||||||
|
const totalRows = computed(() => pages.value?.count ?? 0);
|
||||||
|
const { data: pages } = await useAsyncData('pages',
|
||||||
|
() => {
|
||||||
|
return $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/`, {
|
||||||
|
params: {
|
||||||
|
page: params.current_page,
|
||||||
|
page_size: params.pagesize,
|
||||||
|
ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
|
||||||
|
search: params.search
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${useAuthStore().accessToken}`
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
watch: [params],
|
||||||
|
default: () => ({
|
||||||
|
results: [],
|
||||||
|
count: 0,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const debouncedSearch = useDebounceFn(() => {
|
||||||
|
params.current_page = 1;
|
||||||
|
refreshNuxtData('pages');
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
watch(() => params.search, debouncedSearch);
|
||||||
|
|
||||||
|
const changeServer = (data: any) => {
|
||||||
|
params.pagesize = data.pagesize;
|
||||||
|
params.sort_column = data.sort_column;
|
||||||
|
params.sort_direction = data.sort_direction;
|
||||||
|
params.current_page = data.current_page;
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeSearch = (data: any) => {
|
||||||
|
params.current_page = 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
const viewData = (data: any) => {
|
||||||
|
router.push({
|
||||||
|
path: `/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/${data.id}`,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteData = async (data: any) => {
|
||||||
|
try {
|
||||||
|
await $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/${data.id}/`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${useAuthStore().accessToken}`
|
||||||
|
},
|
||||||
|
});
|
||||||
|
refreshNuxtData('pages');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Gagal menghapus data', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
186
pages/entertainment/manga/[mangaid]/chapters/[id].vue
Normal file
186
pages/entertainment/manga/[mangaid]/chapters/[id].vue
Normal file
@ -0,0 +1,186 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul class="flex space-x-2 rtl:space-x-reverse">
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;" class="text-primary hover:underline">Entertainment</a>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink to="/entertainment/manga/list" class="text-primary hover:underline">
|
||||||
|
Manga
|
||||||
|
</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="text-primary hover:underline">Daftar Chapter</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<span>Edit Chapter</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 Karakter</h5>
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="dark:text-white-light btn btn-dark !py-1">
|
||||||
|
<icon-arrow-backward class="me-1" />
|
||||||
|
Daftar
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
<div class="mb-5">
|
||||||
|
<form v-if="form" class="space-y-5" @submit.prevent="submitForm()">
|
||||||
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
|
||||||
|
<div :class="{ 'has-error': $validate.form.chapter.$error, 'has-success': isSubmitted && !$validate.form.chapter.$error }">
|
||||||
|
<label for="chapter">Chapter</label>
|
||||||
|
<input id="chapter" type="number" class="form-input" v-model="form.chapter" />
|
||||||
|
<template v-if="isSubmitted && $validate.form.title.$error">
|
||||||
|
<p class="text-danger mt-1">Judul chapter harus diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div :class="{ 'has-error': $validate.form.status.$error, 'has-success': isSubmitted && !$validate.form.status.$error }">
|
||||||
|
<label for="status">Status</label>
|
||||||
|
<multiselect id="status"
|
||||||
|
v-model="form.status"
|
||||||
|
:options="statusOptions"
|
||||||
|
class="custom-multiselect"
|
||||||
|
:searchable="true"
|
||||||
|
placeholder="Pilih genre status"
|
||||||
|
selected-label=""
|
||||||
|
select-label=""
|
||||||
|
deselect-label=""
|
||||||
|
label="label"
|
||||||
|
track-by="value"
|
||||||
|
></multiselect>
|
||||||
|
<template v-if="isSubmitted && $validate.form.status.$error">
|
||||||
|
<p class="text-danger mt-1">Genre status harus diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
|
||||||
|
<div :class="{ 'has-error': $validate.form.posted_at.$error, 'has-success': isSubmitted && !$validate.form.posted_at.$error }">
|
||||||
|
<label for="posted_at">Tanggal Unggah</label>
|
||||||
|
<input id="posted_at" type="datetime-local" class="form-input" v-model="form.posted_at" />
|
||||||
|
<template v-if="isSubmitted && $validate.form.posted_at.$error">
|
||||||
|
<p class="text-danger mt-1">Tanggal unggah chapter harus diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div :class="{ 'has-error': $validate.form.archived_at.$error, 'has-success': isSubmitted && !$validate.form.archived_at.$error }">
|
||||||
|
<label for="archived_at">Tanggal Arsip</label>
|
||||||
|
<input id="archived_at" type="datetime-local" class="form-input" v-model="form.archived_at" />
|
||||||
|
<template v-if="isSubmitted && $validate.form.archived_at.$error">
|
||||||
|
<p class="text-danger mt-1">Tanggal arsip chapter harus diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center ltr:ml-auto mt-8">
|
||||||
|
<button type="submit" class="btn btn-success !py-1" :disabled="isLoading"><icon-save class="me-1" /> Simpan</button>
|
||||||
|
<button type="reset" class="btn btn-dark !py-1 ml-1" @click="resetForm"><icon-restore class="me-1" />Reset</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useVuelidate } from '@vuelidate/core';
|
||||||
|
import { required, helpers } 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: 'Edit Chapter' });
|
||||||
|
|
||||||
|
const isSubmitted = ref(false);
|
||||||
|
|
||||||
|
const imageType = helpers.withMessage('Format gambar harus PNG atau JPG', (value) => {
|
||||||
|
if (!value) return true;
|
||||||
|
if (typeof value === 'string') return true;
|
||||||
|
return ['image/png', 'image/jpeg', 'image/jpg'].includes(value.type);
|
||||||
|
});
|
||||||
|
const maxFileSize = helpers.withMessage('Ukuran gambar tidak boleh lebih dari 1MB', (value) => {
|
||||||
|
if (!value) return true;
|
||||||
|
if (typeof value === 'string') return true;
|
||||||
|
return value.size <= 1048576; // 1MB dalam byte
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
form: {
|
||||||
|
chapter: { required },
|
||||||
|
status: { required },
|
||||||
|
posted_at: { required },
|
||||||
|
archived_at: { required },
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
const { $api } = useNuxtApp();
|
||||||
|
|
||||||
|
const statusOptions = [{ "value": "draft", "label": "Draft" }, { "value": "published", "label": "Dipublikasikan" }, { "value": "archived", "label": "Diarsipkan" } ]
|
||||||
|
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
|
const featuredImageUploader = ref(null);
|
||||||
|
|
||||||
|
const { data: form, refresh } = await useAsyncData('chapter-get',
|
||||||
|
() => $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.id}`, {}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const $validate = useVuelidate(rules, { form });
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
if (form.value.status) {
|
||||||
|
const foundStatus = statusOptions.find(opt => opt.value === form.value.status);
|
||||||
|
if (foundStatus) form.value.status = foundStatus;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (form.value.posted_at) {
|
||||||
|
form.value.posted_at = form.value.posted_at.replace('Z', '').slice(0, 16);
|
||||||
|
}
|
||||||
|
if (form.value.archived_at) {
|
||||||
|
form.value.archived_at = form.value.archived_at.replace('Z', '').slice(0, 16);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const submitForm = async () => {
|
||||||
|
isSubmitted.value = true;
|
||||||
|
$validate.value.form.$touch();
|
||||||
|
if ($validate.value.form.$invalid) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
|
||||||
|
formData.append('chapter', form.value.chapter);
|
||||||
|
formData.append('status', form.value.status.value);
|
||||||
|
formData.append('posted_at', new Date(form.value.posted_at).toISOString());
|
||||||
|
formData.append('archived_at', new Date(form.value.archived_at).toISOString());
|
||||||
|
|
||||||
|
isLoading.value = true;
|
||||||
|
await $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.id}/`, {
|
||||||
|
method: 'PUT',
|
||||||
|
body: formData
|
||||||
|
}).then(() => {
|
||||||
|
router.push({ path: '/entertainment/manga/' + route.params.mangaid + '/chapters/' + route.params.id + '/list'});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
isLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
refresh()
|
||||||
|
|
||||||
|
isSubmitted.value = false;
|
||||||
|
$validate.value.form.$reset();
|
||||||
|
|
||||||
|
featuredImageUploader?.value?.clearPreviewPanel();
|
||||||
|
featuredIconUploader?.value?.clearPreviewPanel();
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
166
pages/entertainment/manga/[mangaid]/chapters/add.vue
Normal file
166
pages/entertainment/manga/[mangaid]/chapters/add.vue
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul class="flex space-x-2 rtl:space-x-reverse">
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;" class="text-primary hover:underline">Intertainment</a>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="text-primary hover:underline">Daftar Chapter</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<span>Tambah Chapter</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 Chapter</h5>
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="dark:text-white-light btn btn-dark !py-1">
|
||||||
|
<icon-arrow-backward class="me-1" />
|
||||||
|
Daftar
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
<div class="mb-5">
|
||||||
|
<form class="space-y-5" @submit.prevent="submitForm()">
|
||||||
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
|
||||||
|
<div :class="{ 'has-error': $validate.form.chapter.$error, 'has-success': isSubmitted && !$validate.chapter.slug.$error }">
|
||||||
|
<label for="chapter">Chapter</label>
|
||||||
|
<input id="chapter" type="number" class="form-input" v-model="form.chapter" />
|
||||||
|
<template v-if="isSubmitted && $validate.form.chapter.$error">
|
||||||
|
<p class="text-danger mt-1">Chapter harus diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div :class="{ 'has-error': $validate.form.status.$error, 'has-success': isSubmitted && !$validate.form.status.$error }">
|
||||||
|
<label for="status">Status</label>
|
||||||
|
<multiselect id="format"
|
||||||
|
v-model="form.status"
|
||||||
|
:options="statusOptions"
|
||||||
|
class="custom-multiselect"
|
||||||
|
:searchable="true"
|
||||||
|
placeholder="Pilih status chapter"
|
||||||
|
selected-label=""
|
||||||
|
select-label=""
|
||||||
|
deselect-label=""
|
||||||
|
label="label"
|
||||||
|
track-by="value"
|
||||||
|
></multiselect>
|
||||||
|
<template v-if="isSubmitted && $validate.form.status.$error">
|
||||||
|
<p class="text-danger mt-1">Stastus Chapter harus diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
|
||||||
|
<div :class="{ 'has-error': $validate.form.posted_at.$error, 'has-success': isSubmitted && !$validate.form.posted_at.$error }">
|
||||||
|
<label for="posted_at">Tanggal Unggah</label>
|
||||||
|
<input id="posted_at" type="datetime-local" class="form-input" v-model="form.posted_at" />
|
||||||
|
<template v-if="isSubmitted && $validate.form.posted_at.$error">
|
||||||
|
<p class="text-danger mt-1">Tanggal Harus Diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div :class="{ 'has-error': $validate.form.archived_at.$error, 'has-success': isSubmitted && !$validate.form.archived_at.$error }">
|
||||||
|
<label for="archived_at">Tanggal Arsip</label>
|
||||||
|
<input id="archived_at" type="datetime-local" class="form-input" v-model="form.archived_at" />
|
||||||
|
<template v-if="isSubmitted && $validate.form.archived_at.$error">
|
||||||
|
<p class="text-danger mt-1">Tanggal Harus Diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center ltr:ml-auto mt-8">
|
||||||
|
<button type="submit" class="btn btn-success !py-1" :disabled="isLoading"><icon-save class="me-1" /> {{ isLoading ? 'Menyimpan...' : 'Simpan' }}</button>
|
||||||
|
<button type="button" class="btn btn-dark !py-1 ml-1" @click="resetForm"><icon-restore class="me-1" />Reset</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive } from 'vue'
|
||||||
|
import { useVuelidate } from '@vuelidate/core';
|
||||||
|
import { required, helpers } 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: 'Tambah Chapter' });
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
chapter: '',
|
||||||
|
status: '',
|
||||||
|
posted_at: '',
|
||||||
|
archived_at: '',
|
||||||
|
});
|
||||||
|
const isSubmitted = ref(false);
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
form: {
|
||||||
|
chapter: { required },
|
||||||
|
status: { required },
|
||||||
|
posted_at: { required },
|
||||||
|
archived_at: { required },
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const $validate = useVuelidate(rules, { form });
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const { $api } = useNuxtApp();
|
||||||
|
|
||||||
|
const statusOptions = [{ "value": "draft", "label": "Draft" }, { "value": "published", "label": "Dipublikasikan" }, { "value": "archived", "label": "Diarsipkan" } ]
|
||||||
|
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
|
const submitForm = async () => {
|
||||||
|
isSubmitted.value = true;
|
||||||
|
$validate.value.form.$touch();
|
||||||
|
if ($validate.value.form.$invalid) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
|
||||||
|
formData.append('chapter', form.value.chapter);
|
||||||
|
formData.append('status', form.value.status?.value ?? '');
|
||||||
|
formData.append('manga', parseInt(route.params.mangaid));
|
||||||
|
if (form.value.posted_at) {
|
||||||
|
formData.append('posted_at', new Date(form.value.posted_at).toISOString());
|
||||||
|
} else {
|
||||||
|
formData.append('posted_at', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (form.value.archived_at) {
|
||||||
|
formData.append('archived_at', new Date(form.value.archived_at).toISOString());
|
||||||
|
} else {
|
||||||
|
formData.append('archived_at', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoading.value = true;
|
||||||
|
await $api(`/entertainment/manga/${route.params.mangaid}/chapters/`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
}).then(() => {
|
||||||
|
router.push({ path: `/entertainment/manga/${route.params.mangaid}/chapters/list` });
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
isLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
form.value = {
|
||||||
|
chapter: '',
|
||||||
|
status: '',
|
||||||
|
posted_at: '',
|
||||||
|
archived_at: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
isSubmitted.value = false;
|
||||||
|
$validate.value.form.$reset();
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
179
pages/entertainment/manga/[mangaid]/chapters/list.vue
Normal file
179
pages/entertainment/manga/[mangaid]/chapters/list.vue
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul class="flex space-x-2 rtl:space-x-reverse">
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;" class="text-primary hover:underline">Intertainment</a>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<NuxtLink to="/entertainment/manga/list" class="text-primary hover:underline">
|
||||||
|
Manga
|
||||||
|
</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<span>
|
||||||
|
Chapter
|
||||||
|
</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">Daftar Chapter</h5>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<NuxtLink to="/entertainment/manga/list" class="dark:text-white-light btn btn-secondary !py-1">
|
||||||
|
<icon-arrow-backward class="me-1" />
|
||||||
|
Daftar Manga
|
||||||
|
</NuxtLink>
|
||||||
|
<NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/add`" class="dark:text-white-light btn btn-primary !py-1">
|
||||||
|
<icon-plus class="me-1" />
|
||||||
|
Tambah
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-5 flex items-center justify-between">
|
||||||
|
<input v-model.lazy="params.search" type="text" class="form-input max-w-xs" placeholder="Cari... (tombol Enter untuk mencari)" @change="changeSearch"/>
|
||||||
|
</div>
|
||||||
|
<div class="mb-5">
|
||||||
|
<div class="datatable">
|
||||||
|
<vue3-datatable
|
||||||
|
:rows="rows"
|
||||||
|
:columns="cols"
|
||||||
|
:totalRows="totalRows"
|
||||||
|
:isServerMode=true
|
||||||
|
:page="params.current_page"
|
||||||
|
:pageSize="params.pagesize"
|
||||||
|
:sortable="true"
|
||||||
|
:sortColumn="params.sort_column"
|
||||||
|
:sortDirection="params.sort_direction"
|
||||||
|
@change="changeServer"
|
||||||
|
skin="whitespace-nowrap bh-table-hover"
|
||||||
|
firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
|
||||||
|
lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
|
||||||
|
previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
|
||||||
|
nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
|
||||||
|
>
|
||||||
|
<template #actions="data">
|
||||||
|
<div class="flex justify-end gap-1">
|
||||||
|
<button type="button" class="btn btn-info !py-1" @click="viewPages(data.value)">
|
||||||
|
<icon-book-open class="me-1" />
|
||||||
|
Page
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-success !py-1" @click="viewData(data.value)">
|
||||||
|
<icon-edit class="me-1" />
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-danger !py-1" @click="deleteData(data.value)">
|
||||||
|
<icon-trash class="me-1" />
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</vue3-datatable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, onMounted } from 'vue';
|
||||||
|
import Vue3Datatable from '@bhplugin/vue3-datatable';
|
||||||
|
import { useDebounceFn } from '@vueuse/core';
|
||||||
|
import IconMenuDragAndDrop from '~/components/icon/menu/icon-menu-drag-and-drop.vue';
|
||||||
|
useHead({ title: 'Daftar Karakter' });
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
const { $api } = useNuxtApp();
|
||||||
|
|
||||||
|
const cols =
|
||||||
|
ref([
|
||||||
|
{ field: 'chapter', title: 'Chapter' },
|
||||||
|
{ field: 'status', title: 'Status' },
|
||||||
|
{
|
||||||
|
field: 'actions',
|
||||||
|
title: 'Aksi',
|
||||||
|
headerClass: 'text-right',
|
||||||
|
cellClass: 'text-right',
|
||||||
|
sort: false,
|
||||||
|
width: '150px'
|
||||||
|
}
|
||||||
|
]) || [];
|
||||||
|
|
||||||
|
const params = reactive({
|
||||||
|
search: null,
|
||||||
|
current_page: 1,
|
||||||
|
pagesize: 10,
|
||||||
|
sort_column: 'chapter',
|
||||||
|
sort_direction: 'asc',
|
||||||
|
});
|
||||||
|
|
||||||
|
const rows = computed(() => chapters.value?.results ?? []);
|
||||||
|
const totalRows = computed(() => chapters.value?.count ?? 0);
|
||||||
|
const { data: chapters } = await useAsyncData('chapters',
|
||||||
|
() => {
|
||||||
|
return $api(`/entertainment/manga/${route.params.mangaid}/chapters/`, {
|
||||||
|
params: {
|
||||||
|
page: params.current_page,
|
||||||
|
page_size: params.pagesize,
|
||||||
|
ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
|
||||||
|
search: params.search
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${useAuthStore().accessToken}`
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
watch: [params],
|
||||||
|
default: () => ({
|
||||||
|
results: [],
|
||||||
|
count: 0,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const debouncedSearch = useDebounceFn(() => {
|
||||||
|
params.current_page = 1;
|
||||||
|
refreshNuxtData('chapters');
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
watch(() => params.search, debouncedSearch);
|
||||||
|
|
||||||
|
const changeServer = (data: any) => {
|
||||||
|
params.pagesize = data.pagesize;
|
||||||
|
params.sort_column = data.sort_column;
|
||||||
|
params.sort_direction = data.sort_direction;
|
||||||
|
params.current_page = data.current_page;
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeSearch = (data: any) => {
|
||||||
|
params.current_page = 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
const viewPages = (data: any) => {
|
||||||
|
router.push({ path: `/entertainment/manga/${route.params.mangaid}/chapters/${data.id}/pages/list` });
|
||||||
|
};
|
||||||
|
|
||||||
|
const viewData = (data: any) => {
|
||||||
|
router.push({ path: `/entertainment/manga/${route.params.mangaid}/chapters/` + data.id });
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteData = async (data: any) => {
|
||||||
|
try {
|
||||||
|
await $api(`/entertainment/manga/${route.params.mangaid}/chapters/${data.id}/`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${useAuthStore().accessToken}`
|
||||||
|
},
|
||||||
|
});
|
||||||
|
refreshNuxtData('chapters');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Gagal menghapus data', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -103,14 +103,14 @@
|
|||||||
<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.posted_at.$error, 'has-success': isSubmitted && !$validate.form.posted_at.$error }">
|
<div :class="{ 'has-error': $validate.form.posted_at.$error, 'has-success': isSubmitted && !$validate.form.posted_at.$error }">
|
||||||
<label for="posted_at">Tanggal Unggah</label>
|
<label for="posted_at">Tanggal Unggah</label>
|
||||||
<input id="posted_at" type="date" class="form-input" v-model="form.posted_at" />
|
<input id="posted_at" type="datetime-local" class="form-input" v-model="form.posted_at" />
|
||||||
<template v-if="isSubmitted && $validate.form.posted_at.$error">
|
<template v-if="isSubmitted && $validate.form.posted_at.$error">
|
||||||
<p class="text-danger mt-1">Tanggal Harus Diisi</p>
|
<p class="text-danger mt-1">Tanggal Harus Diisi</p>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div :class="{ 'has-error': $validate.form.archived_at.$error, 'has-success': isSubmitted && !$validate.form.archived_at.$error }">
|
<div :class="{ 'has-error': $validate.form.archived_at.$error, 'has-success': isSubmitted && !$validate.form.archived_at.$error }">
|
||||||
<label for="archived_at">Tanggal Arsip</label>
|
<label for="archived_at">Tanggal Arsip</label>
|
||||||
<input id="archived_at" type="date" class="form-input" v-model="form.archived_at" />
|
<input id="archived_at" type="datetime-local" class="form-input" v-model="form.archived_at" />
|
||||||
<template v-if="isSubmitted && $validate.form.archived_at.$error">
|
<template v-if="isSubmitted && $validate.form.archived_at.$error">
|
||||||
<p class="text-danger mt-1">Tanggal Harus Diisi</p>
|
<p class="text-danger mt-1">Tanggal Harus Diisi</p>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<a href="javascript:;" class="text-primary hover:underline">Intertainment</a>
|
<a href="javascript:;" class="text-primary hover:underline">Intertainment</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 Manga</span>
|
<span>Manga</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
@ -42,6 +42,10 @@
|
|||||||
>
|
>
|
||||||
<template #actions="data">
|
<template #actions="data">
|
||||||
<div class="flex justify-end gap-1">
|
<div class="flex justify-end gap-1">
|
||||||
|
<button type="button" class="btn btn-info !py-1" @click="viewChapters(data.value)">
|
||||||
|
<icon-book-open class="me-1" />
|
||||||
|
Chapter
|
||||||
|
</button>
|
||||||
<button type="button" class="btn btn-success !py-1" @click="viewData(data.value)">
|
<button type="button" class="btn btn-success !py-1" @click="viewData(data.value)">
|
||||||
<icon-edit class="me-1" />
|
<icon-edit class="me-1" />
|
||||||
Edit
|
Edit
|
||||||
@ -135,6 +139,10 @@
|
|||||||
params.current_page = 1;
|
params.current_page = 1;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const viewChapters = (data: any) => {
|
||||||
|
router.push({ path: `/entertainment/manga/${data.id}/chapters/list` });
|
||||||
|
};
|
||||||
|
|
||||||
const viewData = (data: any) => {
|
const viewData = (data: any) => {
|
||||||
router.push({ path: "/entertainment/manga/" + data.id });
|
router.push({ path: "/entertainment/manga/" + data.id });
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user