contents
This commit is contained in:
parent
b152b19def
commit
63219c8215
@ -5,18 +5,18 @@
|
||||
<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/topics/list" class="text-primary hover:underline">Daftar Topik Konten</NuxtLink>
|
||||
<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>Edit Topik Konten</span>
|
||||
<span>Edit 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">Edit Topik Konten</h5>
|
||||
<NuxtLink to="/content/topics/list" class="dark:text-white-light btn btn-dark !py-1">
|
||||
<h5 class="text-lg font-semibold dark:text-white-light">Edit 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>
|
||||
@ -24,16 +24,25 @@
|
||||
<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>
|
||||
<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>
|
||||
<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="province"
|
||||
<multiselect id="theme"
|
||||
v-model="form.theme"
|
||||
:options="themes?.results"
|
||||
class="custom-multiselect"
|
||||
@ -49,16 +58,96 @@
|
||||
<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="topic"
|
||||
track-by="id"
|
||||
></multiselect>
|
||||
<template v-if="isSubmitted && $validate.form.topic.$error">
|
||||
<p class="text-danger mt-1">Topik konten harus diisi</p>
|
||||
</template>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
|
||||
<div class="md:col-span-2" :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
|
||||
<label for="description">Deskripsi/Keterangan</label>
|
||||
<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>
|
||||
<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/ketarangan tema konten harus diisi</p>
|
||||
<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>
|
||||
<textarea id="content" rows="3" class="form-textarea" v-model="form.content"></textarea>
|
||||
<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 }">
|
||||
@ -90,18 +179,26 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required } from '@vuelidate/validators';
|
||||
import { integer, minValue,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' });
|
||||
useHead({ title: 'Edit Konten' });
|
||||
|
||||
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 },
|
||||
}
|
||||
};
|
||||
@ -109,9 +206,30 @@
|
||||
const route = useRoute();
|
||||
const config = useRuntimeConfig();
|
||||
|
||||
const { data: form } = await useAsyncData('provinces',
|
||||
() => $fetch(`${config.public.apiBase}content/topics/${route.params.id}`, {}), {}
|
||||
const { data: formats } = await useAsyncData('formats',
|
||||
() => $fetch(`${config.public.apiBase}content/formats/`)
|
||||
);
|
||||
|
||||
const { data: form } = await useAsyncData('contents',
|
||||
async () => {
|
||||
const content = await $fetch(`${config.public.apiBase}content/contents/${route.params.id}`, {});
|
||||
|
||||
return {
|
||||
...content,
|
||||
data: JSON.stringify(content.data),
|
||||
};
|
||||
});
|
||||
|
||||
watchEffect(async () => {
|
||||
if (formats.value?.results?.length && typeof form.value.format === 'string') {
|
||||
const found = formats.value.results.find(f => f.value === form.value.format)
|
||||
if (found) {
|
||||
await nextTick();
|
||||
form.value.format = found;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const $validate = useVuelidate(rules, { form });
|
||||
|
||||
const params = reactive({
|
||||
@ -132,6 +250,27 @@
|
||||
}
|
||||
);
|
||||
|
||||
const { data: topics, refresh: refreshTopics } = await useAsyncData('topics',
|
||||
() => $fetch(`${config.public.apiBase}content/topics/`, {
|
||||
params: {
|
||||
page: params.current_page,
|
||||
page_size: 50,
|
||||
theme: form.value.theme ? form.value.theme.id : ''
|
||||
}
|
||||
}), {
|
||||
watch: [params, () => form.value?.theme]
|
||||
}
|
||||
);
|
||||
|
||||
watch(() => form.value?.theme, async (val) => {
|
||||
form.value.topic = null;
|
||||
if (val && formats.value) {
|
||||
await refreshTopics();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
const fileupload = await import('file-upload-with-preview');
|
||||
let FileUploadWithPreview = fileupload.default;
|
||||
@ -153,24 +292,33 @@
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('topic', form.value.topic);
|
||||
|
||||
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.id);
|
||||
formData.append('theme', form.value.theme.id);
|
||||
formData.append('description', form.value.description);
|
||||
formData.append('content', form.value.content);
|
||||
formData.append('data', JSON.stringify(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);
|
||||
|
||||
if (form.value.featured_image) {
|
||||
formData.append('featured_image', form.value.featured_image);
|
||||
}
|
||||
|
||||
await $fetch(`${config.public.apiBase}content/topics/${route.params.id}/`, {
|
||||
await $fetch(`${config.public.apiBase}content/contents/${route.params.id}/`, {
|
||||
method: 'PUT',
|
||||
body: formData
|
||||
}).then(() => {
|
||||
//redirect
|
||||
router.push({ path: "/content/topics/list" });
|
||||
router.push({ path: "/content/contents/list" });
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
//assign response error data to state "errors"
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
@ -95,6 +95,15 @@
|
||||
</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>
|
||||
@ -134,6 +143,10 @@
|
||||
<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"
|
||||
@ -172,7 +185,7 @@
|
||||
import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
|
||||
import '@/assets/css/file-upload-preview.css';
|
||||
|
||||
useHead({ title: 'Daftar Konten' });
|
||||
useHead({ title: 'Tambah Konten' });
|
||||
|
||||
const form = ref({
|
||||
title: '',
|
||||
@ -180,12 +193,14 @@
|
||||
theme: null,
|
||||
topic: null,
|
||||
format: '',
|
||||
decription: '',
|
||||
content: '',
|
||||
data: '',
|
||||
grades: [],
|
||||
point: 0,
|
||||
coin: 0,
|
||||
featured_image: '',
|
||||
color: '',
|
||||
});
|
||||
const isSubmitted = ref(false);
|
||||
const rules = {
|
||||
@ -195,6 +210,7 @@
|
||||
theme: { required },
|
||||
topic: { required },
|
||||
format: { required },
|
||||
description: { required },
|
||||
content: { required },
|
||||
grades: { required },
|
||||
point: { required, integer, minValue: minValue(0) },
|
||||
@ -270,20 +286,31 @@
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('topic', form.value.topic);
|
||||
|
||||
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.id);
|
||||
formData.append('theme', form.value.theme.id);
|
||||
formData.append('description', form.value.description);
|
||||
formData.append('content', form.value.content);
|
||||
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);
|
||||
|
||||
if (form.value.featured_image) {
|
||||
formData.append('featured_image', form.value.featured_image);
|
||||
}
|
||||
|
||||
await $fetch(`${config.public.apiBase}content/topics/`, {
|
||||
console.log(formData);
|
||||
await $fetch(`${config.public.apiBase}content/contents/`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then(() => {
|
||||
//redirect
|
||||
router.push({ path: "/content/topics/list" });
|
||||
router.push({ path: "/content/contents/list" });
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
|
||||
@ -71,8 +71,8 @@
|
||||
const cols =
|
||||
ref([
|
||||
{ field: 'title', title: 'Judul' },
|
||||
{ field: 'topic.topic', title: 'Topik' },
|
||||
{ field: 'theme.theme', title: 'Tema' },
|
||||
{ field: 'topic.topic', title: 'Topik' },
|
||||
{ field: 'format', title: 'Format' },
|
||||
{ field: 'id', title: 'Aksi' },
|
||||
|
||||
|
||||
@ -26,11 +26,15 @@
|
||||
<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>
|
||||
<input id="code" type="text" class="form-input" v-model="form.theme" />
|
||||
<template v-if="isSubmitted && $validate.form.code.$error">
|
||||
<input id="theme" type="text" class="form-input" v-model="form.theme" />
|
||||
<template v-if="isSubmitted && $validate.form.theme.$error">
|
||||
<p class="text-danger mt-1">Tema konten harus diisi</p>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<label for="color">Warna Latar Belakang</label>
|
||||
<input id="color" type="text" 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="md:col-span-2" :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
|
||||
@ -117,6 +121,7 @@
|
||||
const formData = new FormData();
|
||||
formData.append('theme', form.value.theme);
|
||||
formData.append('description', form.value.description);
|
||||
formData.append('color', form.value.color);
|
||||
|
||||
if (form.value.featured_image) {
|
||||
formData.append('featured_image', form.value.featured_image);
|
||||
|
||||
@ -26,11 +26,15 @@
|
||||
<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>
|
||||
<input id="code" type="text" class="form-input" v-model="form.theme" />
|
||||
<template v-if="isSubmitted && $validate.form.code.$error">
|
||||
<input id="theme" type="text" class="form-input" v-model="form.theme" />
|
||||
<template v-if="isSubmitted && $validate.form.theme.$error">
|
||||
<p class="text-danger mt-1">Tema konten harus diisi</p>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<label for="color">Warna Latar Belakang</label>
|
||||
<input id="color" type="text" 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="md:col-span-2" :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
|
||||
@ -81,6 +85,7 @@
|
||||
theme: '',
|
||||
description: '',
|
||||
featured_image: '',
|
||||
color: '',
|
||||
});
|
||||
const isSubmitted = ref(false);
|
||||
const rules = {
|
||||
@ -117,6 +122,7 @@
|
||||
const formData = new FormData();
|
||||
formData.append('theme', form.value.theme);
|
||||
formData.append('description', form.value.description);
|
||||
formData.append('color', form.value.color);
|
||||
|
||||
if (form.value.featured_image) {
|
||||
formData.append('featured_image', form.value.featured_image);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user