186 lines
8.6 KiB
Vue
186 lines
8.6 KiB
Vue
<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> |