439 lines
22 KiB
Vue
439 lines
22 KiB
Vue
<template>
|
||
<div>
|
||
<ul class="flex space-x-2 rtl:space-x-reverse">
|
||
<li>
|
||
<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/contents/list" class="text-primary hover:underline">Daftar Konten</NuxtLink>
|
||
</li>
|
||
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||
<span>Tambah 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 Konten</h5>
|
||
<NuxtLink to="/content/contents/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.title.$error, 'has-success': isSubmitted && !$validate.form.title.$error }">
|
||
<label for="title">Judul</label>
|
||
<input id="title" type="text" class="form-input" v-model="form.title" />
|
||
<template v-if="isSubmitted && $validate.form.title.$error">
|
||
<p class="text-danger mt-1">Judul konten harus diisi</p>
|
||
</template>
|
||
</div>
|
||
<div :class="{ 'has-error': $validate.form.slug.$error, 'has-success': isSubmitted && !$validate.form.slug.$error }">
|
||
<label for="slug">Slug</label>
|
||
<input id="slug" type="text" class="form-input" v-model="form.slug" />
|
||
<template v-if="isSubmitted && $validate.form.slug.$error">
|
||
<p class="text-danger mt-1">Slug konten 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="statuses?.results"
|
||
class="custom-multiselect"
|
||
:searchable="true"
|
||
placeholder="Pilih status konten"
|
||
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">Jenis status harus diisi</p>
|
||
</template>
|
||
</div>
|
||
<div v-if="form.status?.value === 'published'" :class="{ 'has-error': $validate.form.posted_at.$error, 'has-success': isSubmitted && !$validate.form.posted_at.$error }">
|
||
<label for="posted_at">Tanggal Publikasi</label>
|
||
<flat-pickr id="posted_at" v-model="form.posted_at" class="form-input" :config="basic"></flat-pickr>
|
||
</div>
|
||
</div>
|
||
<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.theme.$error }">
|
||
<label for="theme">Tema</label>
|
||
<multiselect id="theme"
|
||
v-model="form.theme"
|
||
:options="themes?.results"
|
||
class="custom-multiselect"
|
||
:searchable="true"
|
||
placeholder="Pilih tema konten"
|
||
selected-label=""
|
||
select-label=""
|
||
deselect-label=""
|
||
label="label"
|
||
track-by="value"
|
||
></multiselect>
|
||
<template v-if="isSubmitted && $validate.form.theme.$error">
|
||
<p class="text-danger mt-1">Tema konten harus diisi</p>
|
||
</template>
|
||
</div>
|
||
<div :class="{ 'has-error': $validate.form.topic.$error, 'has-success': isSubmitted && !$validate.form.topic.$error }">
|
||
<label for="topic">Topik</label>
|
||
<multiselect id="topic"
|
||
v-model="form.topic"
|
||
:options="topics?.results"
|
||
class="custom-multiselect"
|
||
:searchable="true"
|
||
placeholder="Pilih topik konten"
|
||
selected-label=""
|
||
select-label=""
|
||
deselect-label=""
|
||
label="label"
|
||
track-by="value"
|
||
></multiselect>
|
||
<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.format.$error, 'has-success': isSubmitted && !$validate.form.format.$error }">
|
||
<label for="format">Format</label>
|
||
<multiselect id="format"
|
||
v-model="form.format"
|
||
:options="formats?.results"
|
||
class="custom-multiselect"
|
||
:searchable="true"
|
||
placeholder="Pilih format konten"
|
||
selected-label=""
|
||
select-label=""
|
||
deselect-label=""
|
||
label="label"
|
||
track-by="value"
|
||
></multiselect>
|
||
<template v-if="isSubmitted && $validate.form.format.$error">
|
||
<p class="text-danger mt-1">Format konten harus diisi</p>
|
||
</template>
|
||
</div>
|
||
<div :class="{ 'has-error': $validate.form.type.$error, 'has-success': isSubmitted && !$validate.form.type.$error }">
|
||
<label for="type">Jenis Konten</label>
|
||
<multiselect id="theme"
|
||
v-model="form.type"
|
||
:options="types?.results"
|
||
class="custom-multiselect"
|
||
:searchable="true"
|
||
placeholder="Pilih jenis konten"
|
||
selected-label=""
|
||
select-label=""
|
||
deselect-label=""
|
||
label="label"
|
||
track-by="value"
|
||
></multiselect>
|
||
<template v-if="isSubmitted && $validate.form.type.$error">
|
||
<p class="text-danger mt-1">Jenis konten harus diisi</p>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 gap-4 md:grid-cols-1 gap-2">
|
||
<div :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
|
||
<label for="description">Deskripsi Singkat Konten</label>
|
||
<textarea id="description" rows="3" class="form-textarea" v-model="form.description"></textarea>
|
||
<template v-if="isSubmitted && $validate.form.description.$error">
|
||
<p class="text-danger mt-1">Deskripsi konten harus diisi</p>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 gap-4 md:grid-cols-1 gap-2">
|
||
<div :class="{ 'has-error': $validate.form.content.$error, 'has-success': isSubmitted && !$validate.form.content.$error }">
|
||
<label for="content">Detail Konten</label>
|
||
<div style="min-height: 300px">
|
||
<quillEditor id="content" ref="content" v-model:value="form.content" :options="quilloptions" style="min-height: 200px; height: 100%;"></quillEditor>
|
||
</div>
|
||
<template v-if="isSubmitted && $validate.form.content.$error">
|
||
<p class="text-danger mt-1">Detail konten harus diisi</p>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
|
||
<div>
|
||
<label for="data">Data Konten (ditulis dalam format JSON)</label>
|
||
<textarea id="data" rows="3" class="form-textarea" v-model="form.data"></textarea>
|
||
</div>
|
||
<div>
|
||
<label for="grade">Kelas</label>
|
||
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 gap-2">
|
||
<label class="inline-flex cursor-pointer" v-for="n in 6" :key="n">
|
||
<input type="checkbox" class="form-checkbox" v-model="form.grades" :value="n"/>
|
||
<span class="text-white-dark">Kelas {{ n }}</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 gap-4 md:grid-cols-4 gap-2">
|
||
<div :class="{ 'has-error': $validate.form.point.$error, 'has-success': isSubmitted && !$validate.form.point.$error }">
|
||
<label for="point">Poin</label>
|
||
<input id="point" type="number" class="form-input" v-model="form.point" />
|
||
<template v-if="isSubmitted && $validate.form.point.$error">
|
||
<p class="text-danger mt-1">Poin konten harus diisi dan lebih dari 0</p>
|
||
</template>
|
||
</div>
|
||
<div :class="{ 'has-error': $validate.form.coin.$error, 'has-success': isSubmitted && !$validate.form.coin.$error }">
|
||
<label for="coin">Koin</label>
|
||
<input id="coin" type="number" class="form-input" v-model="form.coin" />
|
||
<template v-if="isSubmitted && $validate.form.coin.$error">
|
||
<p class="text-danger mt-1">Koin konten harus diisi dan lebih dari 0</p>
|
||
</template>
|
||
</div>
|
||
<div>
|
||
<label for="color">Warna Latar Belakang</label>
|
||
<input id="color" class="form-input" v-model="form.color" />
|
||
</div>
|
||
</div>
|
||
<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">
|
||
<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 { integer, minValue, required, requiredIf } from '@vuelidate/validators';
|
||
import Multiselect from '@suadelabs/vue3-multiselect';
|
||
import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
|
||
import '@/assets/css/file-upload-preview.css';
|
||
import 'flatpickr/dist/flatpickr.css';
|
||
import flatPickr from 'vue-flatpickr-component';
|
||
import 'vue3-quill/lib/vue3-quill.css';
|
||
|
||
useHead({ title: 'Tambah Konten' });
|
||
|
||
const form = ref({
|
||
title: '',
|
||
slug: '',
|
||
theme: null,
|
||
topic: null,
|
||
format: '',
|
||
description: '',
|
||
content: '',
|
||
data: '',
|
||
grades: [],
|
||
point: 0,
|
||
coin: 0,
|
||
featured_image: '',
|
||
color: '',
|
||
type: '',
|
||
status: '',
|
||
posted_at: null,
|
||
});
|
||
const isSubmitted = ref(false);
|
||
const rules = {
|
||
form: {
|
||
title: { required },
|
||
slug: { required },
|
||
theme: { required },
|
||
topic: { required },
|
||
format: { required },
|
||
description: { required },
|
||
content: { required },
|
||
grades: { required },
|
||
point: { required, integer, minValue: minValue(0) },
|
||
coin: { required, integer, minValue: minValue(0) },
|
||
featured_image: { required },
|
||
status: { required },
|
||
type: { required },
|
||
posted_at: {
|
||
required: requiredIf(() => form.value.status?.value === 'published'),
|
||
},
|
||
}
|
||
};
|
||
const $validate = useVuelidate(rules, { form });
|
||
const router = useRouter();
|
||
const config = useRuntimeConfig();
|
||
const { $api } = useNuxtApp();
|
||
|
||
const quilloptions = ref({});
|
||
|
||
const basic: any = ref({
|
||
dateFormat: 'Y-m-d',
|
||
position: 'auto left',
|
||
minDate: "today",
|
||
});
|
||
|
||
const { data: themes } = await useAsyncData('themes',
|
||
() => $api(`/content/themes/`)
|
||
);
|
||
|
||
const { data: topics } = await useAsyncData('topics',
|
||
() => $api(`/content/topics/${form.value.theme?.value}/`), {
|
||
watch: [() => form.value.theme?.value]
|
||
}
|
||
);
|
||
|
||
watch(() => form.value.theme, () => {
|
||
form.value.topic = null;
|
||
});
|
||
|
||
const { data: formats } = await useAsyncData('formats',
|
||
() => $api(`/content/formats/`)
|
||
);
|
||
|
||
const { data: types } = await useAsyncData('types',
|
||
() => $api(`/content/types/`)
|
||
);
|
||
|
||
const { data: statuses } = await useAsyncData('statuses',
|
||
() => $api(`/content/statuses/`)
|
||
);
|
||
|
||
const isLoading = ref(false);
|
||
|
||
const featuredImageUploader = ref(null);
|
||
|
||
onMounted(async () => {
|
||
const fileupload = await import('file-upload-with-preview');
|
||
let FileUploadWithPreview = fileupload.default;
|
||
|
||
featuredImageUploader.value = new FileUploadWithPreview('featuredImage', {
|
||
images: {
|
||
baseImage: '/assets/images/file-preview.svg',
|
||
backgroundImage: '',
|
||
},
|
||
});
|
||
|
||
if (!form.value.status && statuses?.value?.results?.length) {
|
||
form.value.status = statuses.value.results.find(s => s.value === 'draft');
|
||
}
|
||
if (!form.value.type && types?.value?.results?.length) {
|
||
form.value.type = types.value.results.find(t => t.value === 'content');
|
||
}
|
||
});
|
||
|
||
const submitForm = async () => {
|
||
isSubmitted.value = true;
|
||
$validate.value.form.$touch();
|
||
if ($validate.value.form.$invalid) {
|
||
return false;
|
||
}
|
||
|
||
const formData = new FormData();
|
||
|
||
formData.append('title', form.value.title);
|
||
formData.append('slug', form.value.slug);
|
||
formData.append('format', form.value.format.value);
|
||
formData.append('topic', form.value.topic.value);
|
||
formData.append('theme', form.value.theme.value);
|
||
formData.append('description', form.value.description);
|
||
formData.append('content', form.value.content);
|
||
formData.append('data', form.value.data);
|
||
if (!form.value.data) {
|
||
formData.append('data', '{}');
|
||
} else {
|
||
formData.append('data', form.value.data);
|
||
}
|
||
formData.append('grades', JSON.stringify(form.value.grades));
|
||
formData.append('point', form.value.point);
|
||
formData.append('coin', form.value.coin);
|
||
formData.append('color', form.value.color);
|
||
|
||
formData.append('type', form.value.type.value);
|
||
formData.append('status', form.value.status.value);
|
||
if (form.value.status?.value === 'published' && form.value.posted_at) {
|
||
formData.append('posted_at', form.value.posted_at);
|
||
}
|
||
if (form.value.status?.value === 'archived') {
|
||
const today = new Date().toISOString().slice(0, 10);
|
||
formData.append('archived_at', today);
|
||
}
|
||
|
||
if (form.value.featured_image) {
|
||
formData.append('featured_image', form.value.featured_image);
|
||
}
|
||
|
||
isLoading.value = true;
|
||
await $api(`/content/contents/`, {
|
||
method: 'POST',
|
||
body: formData
|
||
}).then(() => {
|
||
router.push({ path: "/content/contents/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.featured_image = file
|
||
}
|
||
|
||
const resetForm = () => {
|
||
form.value = {
|
||
title: '',
|
||
slug: '',
|
||
theme: null,
|
||
topic: null,
|
||
format: '',
|
||
description: '',
|
||
content: '',
|
||
data: '',
|
||
grades: [],
|
||
point: 0,
|
||
coin: 0,
|
||
featured_image: '',
|
||
color: '',
|
||
type: '',
|
||
status: '',
|
||
posted_at: null,
|
||
};
|
||
|
||
if (!form.value.status && statuses?.value?.results?.length) {
|
||
form.value.status = statuses.value.results.find(s => s.value === 'draft');
|
||
}
|
||
if (!form.value.type && types?.value?.results?.length) {
|
||
form.value.type = types.value.results.find(t => t.value === 'content');
|
||
}
|
||
|
||
isSubmitted.value = false;
|
||
$validate.value.form.$reset();
|
||
|
||
featuredImageUploader?.value?.clearPreviewPanel();
|
||
|
||
}
|
||
</script> |