contents
This commit is contained in:
parent
c17c54d6ce
commit
33fc02acfb
@ -88,6 +88,9 @@
|
|||||||
<li>
|
<li>
|
||||||
<NuxtLink to="/content/topics/list" @click="toggleMobileMenu">Topik</NuxtLink>
|
<NuxtLink to="/content/topics/list" @click="toggleMobileMenu">Topik</NuxtLink>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<NuxtLink to="/content/contents/list" @click="toggleMobileMenu">Konten</NuxtLink>
|
||||||
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</vue-collapsible>
|
</vue-collapsible>
|
||||||
|
|||||||
191
pages/content/contents/[id].vue
Normal file
191
pages/content/contents/[id].vue
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
<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/topics/list" class="text-primary hover:underline">Daftar Topik Konten</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
||||||
|
<span>Edit Topik Konten</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 gap-6 pt-5">
|
||||||
|
<div class="panel">
|
||||||
|
<div class="mb-5 flex items-center justify-between">
|
||||||
|
<h5 class="text-lg font-semibold dark:text-white-light">Edit Topik Konten</h5>
|
||||||
|
<NuxtLink to="/content/topics/list" class="dark:text-white-light btn btn-dark !py-1">
|
||||||
|
<icon-arrow-backward class="me-1" />
|
||||||
|
Daftar
|
||||||
|
</NuxtLink>
|
||||||
|
</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.theme.$error, 'has-success': isSubmitted && !$validate.form.topic.$error }">
|
||||||
|
<label for="topic">Topik</label>
|
||||||
|
<input id="topic" type="text" class="form-input" v-model="form.topic" />
|
||||||
|
<template v-if="isSubmitted && $validate.form.topic.$error">
|
||||||
|
<p class="text-danger mt-1">Topik konten harus diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div :class="{ 'has-error': $validate.form.theme.$error, 'has-success': isSubmitted && !$validate.form.theme.$error }">
|
||||||
|
<label for="theme">Tema</label>
|
||||||
|
<multiselect id="province"
|
||||||
|
v-model="form.theme"
|
||||||
|
:options="themes?.results"
|
||||||
|
class="custom-multiselect"
|
||||||
|
:searchable="true"
|
||||||
|
placeholder="Pilih tema konten"
|
||||||
|
selected-label=""
|
||||||
|
select-label=""
|
||||||
|
deselect-label=""
|
||||||
|
label="theme"
|
||||||
|
track-by="id"
|
||||||
|
></multiselect>
|
||||||
|
<template v-if="isSubmitted && $validate.form.theme.$error">
|
||||||
|
<p class="text-danger mt-1">Tema konten harus diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
</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"><icon-save class="me-1" /> Simpan</button>
|
||||||
|
<button type="reset" class="btn btn-dark !py-1 ml-1"><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 } 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' });
|
||||||
|
|
||||||
|
const isSubmitted = ref(false);
|
||||||
|
const rules = {
|
||||||
|
form: {
|
||||||
|
theme: { required },
|
||||||
|
description: { required },
|
||||||
|
featured_image: { required },
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
|
||||||
|
const { data: form } = await useAsyncData('provinces',
|
||||||
|
() => $fetch(`${config.public.apiBase}content/topics/${route.params.id}`, {}), {}
|
||||||
|
);
|
||||||
|
const $validate = useVuelidate(rules, { form });
|
||||||
|
|
||||||
|
const params = reactive({
|
||||||
|
current_page: 1,
|
||||||
|
pagesize: 10,
|
||||||
|
sort_column: 'id',
|
||||||
|
sort_direction: 'asc',
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: themes } = await useAsyncData('themes',
|
||||||
|
() => $fetch(`${config.public.apiBase}content/themes/`, {
|
||||||
|
params: {
|
||||||
|
page: params.current_page,
|
||||||
|
page_size: 50
|
||||||
|
}
|
||||||
|
}), {
|
||||||
|
watch: [params]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const fileupload = await import('file-upload-with-preview');
|
||||||
|
let FileUploadWithPreview = fileupload.default;
|
||||||
|
|
||||||
|
// single image upload
|
||||||
|
new FileUploadWithPreview('featuredImage', {
|
||||||
|
images: {
|
||||||
|
baseImage: form.value.featured_image ? form.value.featured_image : '/assets/images/file-preview.svg',
|
||||||
|
backgroundImage: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const submitForm = async () => {
|
||||||
|
isSubmitted.value = true;
|
||||||
|
$validate.value.form.$touch();
|
||||||
|
if ($validate.value.form.$invalid) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('topic', form.value.topic);
|
||||||
|
formData.append('theme', form.value.theme.id);
|
||||||
|
formData.append('description', form.value.description);
|
||||||
|
|
||||||
|
if (form.value.featured_image) {
|
||||||
|
formData.append('featured_image', form.value.featured_image);
|
||||||
|
}
|
||||||
|
|
||||||
|
await $fetch(`${config.public.apiBase}content/topics/${route.params.id}/`, {
|
||||||
|
method: 'PUT',
|
||||||
|
body: formData
|
||||||
|
}).then(() => {
|
||||||
|
//redirect
|
||||||
|
router.push({ path: "/content/topics/list" });
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
|
||||||
|
//assign response error data to state "errors"
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleImageChange(event: { target: { files: any[]; }; }) {
|
||||||
|
const file = event.target.files[0]
|
||||||
|
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
const allowed = ['image/png']
|
||||||
|
if (!allowed.includes(file.type)) {
|
||||||
|
alert('Hanya PNG yang diizinkan')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
form.value.featured_image = file
|
||||||
|
}
|
||||||
|
</script>
|
||||||
308
pages/content/contents/add.vue
Normal file
308
pages/content/contents/add.vue
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
<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>
|
||||||
|
<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="theme"
|
||||||
|
track-by="id"
|
||||||
|
></multiselect>
|
||||||
|
<template v-if="isSubmitted && $validate.form.theme.$error">
|
||||||
|
<p class="text-danger mt-1">Tema konten harus diisi</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<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="{ '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.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>
|
||||||
|
<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"><icon-save class="me-1" /> Simpan</button>
|
||||||
|
<button type="reset" class="btn btn-dark !py-1 ml-1"><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 } 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 Konten' });
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
title: '',
|
||||||
|
slug: '',
|
||||||
|
theme: null,
|
||||||
|
topic: null,
|
||||||
|
format: '',
|
||||||
|
content: '',
|
||||||
|
data: '',
|
||||||
|
grades: [],
|
||||||
|
point: 0,
|
||||||
|
coin: 0,
|
||||||
|
featured_image: '',
|
||||||
|
});
|
||||||
|
const isSubmitted = ref(false);
|
||||||
|
const rules = {
|
||||||
|
form: {
|
||||||
|
title: { required },
|
||||||
|
slug: { required },
|
||||||
|
theme: { required },
|
||||||
|
topic: { required },
|
||||||
|
format: { required },
|
||||||
|
content: { required },
|
||||||
|
grades: { required },
|
||||||
|
point: { required, integer, minValue: minValue(0) },
|
||||||
|
coin: { required, integer, minValue: minValue(0) },
|
||||||
|
featured_image: { required },
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const $validate = useVuelidate(rules, { form });
|
||||||
|
const router = useRouter();
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
|
||||||
|
const params = reactive({
|
||||||
|
current_page: 1,
|
||||||
|
pagesize: 10,
|
||||||
|
sort_column: 'id',
|
||||||
|
sort_direction: 'asc',
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: themes } = await useAsyncData('themes',
|
||||||
|
() => $fetch(`${config.public.apiBase}content/themes/`, {
|
||||||
|
params: {
|
||||||
|
page: params.current_page,
|
||||||
|
page_size: 50
|
||||||
|
}
|
||||||
|
}), {
|
||||||
|
watch: [params]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const { data: topics } = 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]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(() => form.value.theme, async (val) => {
|
||||||
|
form.value.topic = null
|
||||||
|
if (val) {
|
||||||
|
refreshNuxtData('topics');
|
||||||
|
} else {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: formats } = await useAsyncData('formats',
|
||||||
|
() => $fetch(`${config.public.apiBase}content/formats/`)
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const fileupload = await import('file-upload-with-preview');
|
||||||
|
let FileUploadWithPreview = fileupload.default;
|
||||||
|
|
||||||
|
// single image upload
|
||||||
|
new FileUploadWithPreview('featuredImage', {
|
||||||
|
images: {
|
||||||
|
baseImage: '/assets/images/file-preview.svg',
|
||||||
|
backgroundImage: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const submitForm = async () => {
|
||||||
|
isSubmitted.value = true;
|
||||||
|
$validate.value.form.$touch();
|
||||||
|
if ($validate.value.form.$invalid) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('topic', form.value.topic);
|
||||||
|
formData.append('theme', form.value.theme.id);
|
||||||
|
formData.append('description', form.value.description);
|
||||||
|
|
||||||
|
if (form.value.featured_image) {
|
||||||
|
formData.append('featured_image', form.value.featured_image);
|
||||||
|
}
|
||||||
|
|
||||||
|
await $fetch(`${config.public.apiBase}content/topics/`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
}).then(() => {
|
||||||
|
//redirect
|
||||||
|
router.push({ path: "/content/topics/list" });
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
|
||||||
|
//assign response error data to state "errors"
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleImageChange(event: { target: { files: any[]; }; }) {
|
||||||
|
const file = event.target.files[0]
|
||||||
|
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
const allowed = ['image/png']
|
||||||
|
if (!allowed.includes(file.type)) {
|
||||||
|
alert('Hanya PNG yang diizinkan')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
form.value.featured_image = file
|
||||||
|
}
|
||||||
|
</script>
|
||||||
130
pages/content/contents/list.vue
Normal file
130
pages/content/contents/list.vue
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<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">
|
||||||
|
<span>Daftar 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">Daftar Konten</h5>
|
||||||
|
<NuxtLink to="/content/contents/add" class="dark:text-white-light btn btn-primary !py-1">
|
||||||
|
<icon-plus class="me-1" />
|
||||||
|
Tambah
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
<div class="mb-5">
|
||||||
|
<input v-model.lazy="params.search" type="text" class="form-input max-w-xs" placeholder="Cari..." @change="changeSearch"/>
|
||||||
|
</div>
|
||||||
|
<div class="mb-5">
|
||||||
|
<div class="datatable">
|
||||||
|
<vue3-datatable
|
||||||
|
:rows="contents?.results"
|
||||||
|
:columns="cols"
|
||||||
|
:totalRows="contents?.count"
|
||||||
|
: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 #id="data">
|
||||||
|
<div class="flex 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';
|
||||||
|
useHead({ title: 'Daftar Konten' });
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
|
||||||
|
const cols =
|
||||||
|
ref([
|
||||||
|
{ field: 'title', title: 'Judul' },
|
||||||
|
{ field: 'topic.topic', title: 'Topik' },
|
||||||
|
{ field: 'theme.theme', title: 'Tema' },
|
||||||
|
{ field: 'format', title: 'Format' },
|
||||||
|
{ field: 'id', title: 'Aksi' },
|
||||||
|
|
||||||
|
]) || [];
|
||||||
|
|
||||||
|
const params = reactive({
|
||||||
|
search: null,
|
||||||
|
current_page: 1,
|
||||||
|
pagesize: 10,
|
||||||
|
sort_column: 'title',
|
||||||
|
sort_direction: 'asc',
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: contents } = await useAsyncData('contents',
|
||||||
|
() => {
|
||||||
|
return $fetch(`${config.public.apiBase}/content/contents/`, {
|
||||||
|
params: {
|
||||||
|
page: params.current_page,
|
||||||
|
page_size: params.pagesize,
|
||||||
|
ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
|
||||||
|
search: params.search
|
||||||
|
}})
|
||||||
|
}, {
|
||||||
|
watch: [params]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
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) => {
|
||||||
|
console.log(data);
|
||||||
|
params.current_page = 1;
|
||||||
|
console.log(params);
|
||||||
|
};
|
||||||
|
|
||||||
|
const viewData = (data: any) => {
|
||||||
|
router.push({ path: "/content/contents/" + data.id });
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteData = async (data: any) => {
|
||||||
|
|
||||||
|
//delete data with API
|
||||||
|
await $fetch(`${config.public.apiBase}content/contents/${data.id}/`, {
|
||||||
|
method: 'DELETE'
|
||||||
|
});
|
||||||
|
|
||||||
|
//refersh data posts
|
||||||
|
refreshNuxtData('contents');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user