merapikan koding
This commit is contained in:
@@ -149,7 +149,7 @@
|
||||
sex: { required },
|
||||
type: { required },
|
||||
featured_image: { imageType, maxFileSize },
|
||||
featured_icon: { imageType, maxFileSize},
|
||||
featured_icon: { imageType, maxFileSize },
|
||||
}
|
||||
};
|
||||
const router = useRouter();
|
||||
@@ -164,7 +164,7 @@
|
||||
const featuredImageUploader = ref(null);
|
||||
const featuredIconUploader = ref(null);
|
||||
|
||||
const { data: form, refresh } = await useAsyncData('characters',
|
||||
const { data: form, refresh } = await useAsyncData('character-get',
|
||||
() => $fetch(`${config.public.apiBase}/character/characters/${route.params.id}/`, {}),
|
||||
);
|
||||
|
||||
@@ -192,10 +192,6 @@
|
||||
});
|
||||
|
||||
form.value.type = typeOptions.find(option => option.value === form.value.type);
|
||||
originalData.value = {
|
||||
...form.value,
|
||||
type: typeOptions.find(option => option.value === form.value.type),
|
||||
};
|
||||
});
|
||||
|
||||
const submitForm = async () => {
|
||||
@@ -219,16 +215,18 @@
|
||||
formData.append('featured_icon', form.value.featured_icon);
|
||||
}
|
||||
|
||||
isLoading.value = true;
|
||||
await $fetch(`${config.public.apiBase}/character/characters/${route.params.id}/`, {
|
||||
method: 'PUT',
|
||||
body: formData
|
||||
}).then(() => {
|
||||
//redirect
|
||||
router.push({ path: "/character/characters/list" });
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
console.log(error);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<input v-model.lazy="params.search" type="text" class="form-input max-w-xs" placeholder="Cari..." @change="changeSearch"/>
|
||||
<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">
|
||||
@@ -80,7 +80,7 @@
|
||||
sort: false,
|
||||
width: '150px'
|
||||
}
|
||||
]);
|
||||
]) || [];
|
||||
|
||||
const params = reactive({
|
||||
search: null,
|
||||
@@ -125,9 +125,7 @@
|
||||
};
|
||||
|
||||
const changeSearch = (data: any) => {
|
||||
console.log(data);
|
||||
params.current_page = 1;
|
||||
console.log(params);
|
||||
};
|
||||
|
||||
const viewData = (data: any) => {
|
||||
|
||||
@@ -94,8 +94,8 @@
|
||||
</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>
|
||||
<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>
|
||||
@@ -106,27 +106,43 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { integer, minValue,required } from '@vuelidate/validators';
|
||||
import { helpers, 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: 'Edit Skin Karakter' });
|
||||
|
||||
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 isSubmitted = ref(false);
|
||||
const rules = {
|
||||
form: {
|
||||
name: { required },
|
||||
description: { required },
|
||||
character: { required },
|
||||
featured_image: { required },
|
||||
featured_icon: { required },
|
||||
featured_image: { imageType, maxFileSize },
|
||||
featured_icon: { imageType, maxFileSize },
|
||||
}
|
||||
};
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const config = useRuntimeConfig();
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
||||
const featuredImageUploader = ref(null);
|
||||
const featuredIconUploader = ref(null);
|
||||
|
||||
const params = reactive({
|
||||
search: null,
|
||||
current_page: 1,
|
||||
@@ -147,29 +163,29 @@
|
||||
}
|
||||
);
|
||||
|
||||
const { data: form } = await useAsyncData('skins',
|
||||
() => $fetch(`${config.public.apiBase}character/character-skins/${route.params.id}`, {})
|
||||
const { data: form, refresh } = await useAsyncData('skin-get',
|
||||
() => $fetch(`${config.public.apiBase}/character/character-skins/${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;
|
||||
|
||||
// single image upload
|
||||
new FileUploadWithPreview('featuredImage', {
|
||||
featuredImageUploader.value = new FileUploadWithPreview('featuredImage', {
|
||||
images: {
|
||||
baseImage: form.value.featured_image || '/assets/images/file-preview.svg',
|
||||
baseImage: form.value?.featured_image || '/assets/images/file-preview.svg',
|
||||
backgroundImage: '',
|
||||
},
|
||||
});
|
||||
|
||||
// single image upload
|
||||
new FileUploadWithPreview('featuredIcon', {
|
||||
featuredIconUploader.value = new FileUploadWithPreview('featuredIcon', {
|
||||
images: {
|
||||
baseImage: form.value.featured_icon || '/assets/images/file-preview.svg',
|
||||
baseImage: form.value?.featured_icon || '/assets/images/file-preview.svg',
|
||||
backgroundImage: '',
|
||||
},
|
||||
});
|
||||
@@ -188,23 +204,25 @@
|
||||
formData.append('character', form.value.character.id);
|
||||
formData.append('description', form.value.description);
|
||||
|
||||
if (form.value.featured_image) {
|
||||
if (form.value.featured_image && typeof form.value.featured_image !== 'string') {
|
||||
formData.append('featured_image', form.value.featured_image);
|
||||
}
|
||||
if (form.value.featured_icon) {
|
||||
if (form.value.featured_icon && typeof form.value.featured_icon !== 'string') {
|
||||
formData.append('featured_icon', form.value.featured_icon);
|
||||
}
|
||||
|
||||
await $fetch(`${config.public.apiBase}character/character-skins/${route.params.id}/`, {
|
||||
isLoading.value = true;
|
||||
await $fetch(`${config.public.apiBase}/character/character-skins/${route.params.id}/`, {
|
||||
method: 'PUT',
|
||||
body: formData
|
||||
}).then(() => {
|
||||
//redirect
|
||||
router.push({ path: "/character/skins/list" });
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
console.log(error);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -219,20 +237,31 @@
|
||||
return
|
||||
}
|
||||
|
||||
form.value.featured_image = file
|
||||
form.value.featured_image = file;
|
||||
}
|
||||
|
||||
function handleIconChange(event: { target: { files: any[]; }; }) {
|
||||
const file = event.target.files[0]
|
||||
const file = event.target.files[0];
|
||||
|
||||
if (!file) return
|
||||
if (!file) return;
|
||||
|
||||
const allowed = ['image/png', 'image/jpeg', 'image/jpg']
|
||||
const allowed = ['image/png', 'image/jpeg', 'image/jpg'];
|
||||
if (!allowed.includes(file.type)) {
|
||||
alert('Hanya PNG yang diizinkan')
|
||||
return
|
||||
alert('Hanya PNG yang diizinkan');
|
||||
return;
|
||||
}
|
||||
|
||||
form.value.featured_icon = file
|
||||
form.value.featured_icon = file;
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
refresh()
|
||||
|
||||
isSubmitted.value = false;
|
||||
$validate.value.form.$reset();
|
||||
|
||||
featuredImageUploader?.value?.clearPreviewPanel();
|
||||
featuredIconUploader?.value?.clearPreviewPanel();
|
||||
|
||||
};
|
||||
</script>
|
||||
@@ -94,8 +94,8 @@
|
||||
</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>
|
||||
<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>
|
||||
@@ -107,7 +107,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required } from '@vuelidate/validators';
|
||||
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';
|
||||
@@ -116,19 +116,29 @@
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
decription: '',
|
||||
character: '',
|
||||
description: '',
|
||||
character: null,
|
||||
featured_image: '',
|
||||
featured_icon: '',
|
||||
});
|
||||
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; // 1MB dalam byte
|
||||
});
|
||||
|
||||
const rules = {
|
||||
form: {
|
||||
name: { required },
|
||||
description: { required },
|
||||
character: { required },
|
||||
featured_image: { required },
|
||||
featured_icon: { required },
|
||||
featured_image: { required, imageType, maxFileSize },
|
||||
featured_icon: { required, imageType, maxFileSize },
|
||||
}
|
||||
};
|
||||
const $validate = useVuelidate(rules, { form });
|
||||
@@ -143,7 +153,7 @@
|
||||
});
|
||||
|
||||
const { data: characters } = await useAsyncData('characters',
|
||||
() => $fetch(`${config.public.apiBase}character/characters/`, {
|
||||
() => $fetch(`${config.public.apiBase}/character/characters/`, {
|
||||
params: {
|
||||
page: params.current_page,
|
||||
page_size: 50
|
||||
@@ -152,21 +162,24 @@
|
||||
watch: [params]
|
||||
}
|
||||
);
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
||||
const featuredImageUploader = ref(null);
|
||||
const featuredIconUploader = ref(null);
|
||||
|
||||
onMounted(async () => {
|
||||
const fileupload = await import('file-upload-with-preview');
|
||||
let FileUploadWithPreview = fileupload.default;
|
||||
|
||||
// single image upload
|
||||
new FileUploadWithPreview('featuredImage', {
|
||||
featuredImageUploader.value = new FileUploadWithPreview('featuredImage', {
|
||||
images: {
|
||||
baseImage: '/assets/images/file-preview.svg',
|
||||
backgroundImage: '',
|
||||
},
|
||||
});
|
||||
|
||||
// single image upload
|
||||
new FileUploadWithPreview('featuredIcon', {
|
||||
featuredIconUploader.value = new FileUploadWithPreview('featuredIcon', {
|
||||
images: {
|
||||
baseImage: '/assets/images/file-preview.svg',
|
||||
backgroundImage: '',
|
||||
@@ -194,17 +207,18 @@
|
||||
formData.append('featured_icon', form.value.featured_icon);
|
||||
}
|
||||
|
||||
await $fetch(`${config.public.apiBase}character/character-skins/`, {
|
||||
isLoading.value = true;
|
||||
await $fetch(`${config.public.apiBase}/character/character-skins/`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then(() => {
|
||||
//redirect
|
||||
router.push({ path: "/character/skins/list" });
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
//assign response error data to state "errors"
|
||||
console.log(error);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -235,4 +249,21 @@
|
||||
|
||||
form.value.featured_icon = file
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.value = {
|
||||
name: '',
|
||||
description: '',
|
||||
character: null,
|
||||
featured_image: '',
|
||||
featured_icon: '',
|
||||
};
|
||||
|
||||
isSubmitted.value = false;
|
||||
$validate.value.form.$reset();
|
||||
|
||||
featuredImageUploader?.value?.clearPreviewPanel();
|
||||
featuredIconUploader?.value?.clearPreviewPanel();
|
||||
|
||||
};
|
||||
</script>
|
||||
@@ -19,14 +19,14 @@
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<input v-model.lazy="params.search" type="text" class="form-input max-w-xs" placeholder="Cari..." @change="changeSearch"/>
|
||||
<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="skins?.results"
|
||||
:rows="rows"
|
||||
:columns="cols"
|
||||
:totalRows="skins?.count"
|
||||
:totalRows="totalRows"
|
||||
:isServerMode=true
|
||||
:page="params.current_page"
|
||||
:pageSize="params.pagesize"
|
||||
@@ -40,8 +40,8 @@
|
||||
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">
|
||||
<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
|
||||
@@ -72,8 +72,14 @@
|
||||
ref([
|
||||
{ field: 'name', title: 'Nama' },
|
||||
{ field: 'character.name', title: 'Karakter' },
|
||||
{ field: 'id', title: 'Aksi' },
|
||||
|
||||
{
|
||||
field: 'actions',
|
||||
title: 'Aksi',
|
||||
headerClass: 'text-right',
|
||||
cellClass: 'text-right',
|
||||
sort: false,
|
||||
width: '150px'
|
||||
}
|
||||
]) || [];
|
||||
|
||||
const params = reactive({
|
||||
@@ -84,6 +90,8 @@
|
||||
sort_direction: 'asc',
|
||||
});
|
||||
|
||||
const rows = computed(() => skins.value?.results ?? []);
|
||||
const totalRows = computed(() => skins.value?.count ?? 0);
|
||||
const { data: skins } = await useAsyncData('skins',
|
||||
() => {
|
||||
return $fetch(`${config.public.apiBase}/character/character-skins/`, {
|
||||
@@ -106,9 +114,7 @@
|
||||
};
|
||||
|
||||
const changeSearch = (data: any) => {
|
||||
console.log(data);
|
||||
params.current_page = 1;
|
||||
console.log(params);
|
||||
};
|
||||
|
||||
const viewData = (data: any) => {
|
||||
|
||||
+199
-69
@@ -38,6 +38,28 @@
|
||||
<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 }">
|
||||
@@ -51,8 +73,8 @@
|
||||
selected-label=""
|
||||
select-label=""
|
||||
deselect-label=""
|
||||
label="theme"
|
||||
track-by="id"
|
||||
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>
|
||||
@@ -60,7 +82,7 @@
|
||||
</div>
|
||||
<div :class="{ 'has-error': $validate.form.topic.$error, 'has-success': isSubmitted && !$validate.form.topic.$error }">
|
||||
<label for="topic">Topik</label>
|
||||
<multiselect id="topic"
|
||||
<multiselect v-if="topics" id="topic"
|
||||
v-model="form.topic"
|
||||
:options="topics?.results"
|
||||
class="custom-multiselect"
|
||||
@@ -69,8 +91,8 @@
|
||||
selected-label=""
|
||||
select-label=""
|
||||
deselect-label=""
|
||||
label="topic"
|
||||
track-by="id"
|
||||
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>
|
||||
@@ -94,6 +116,24 @@
|
||||
<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 }">
|
||||
@@ -107,7 +147,9 @@
|
||||
<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>
|
||||
<div style="min-height: 300px">
|
||||
<quillEditor v-if="form.content" id="content" ref="content" v-model:value="form.content" :options="quilloptions" style="min-height: 200px; height: 100%;" contentType="html"></quillEditor>
|
||||
</div>
|
||||
<template v-if="isSubmitted && $validate.form.content.$error">
|
||||
<p class="text-danger mt-1">Detail konten harus diisi</p>
|
||||
</template>
|
||||
@@ -167,8 +209,8 @@
|
||||
</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>
|
||||
<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>
|
||||
@@ -179,13 +221,27 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { integer, minValue,required } from '@vuelidate/validators';
|
||||
import { helpers, 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: 'Edit Konten' });
|
||||
|
||||
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 isSubmitted = ref(false);
|
||||
const rules = {
|
||||
form: {
|
||||
@@ -199,20 +255,30 @@
|
||||
grades: { required },
|
||||
point: { required, integer, minValue: minValue(0) },
|
||||
coin: { required, integer, minValue: minValue(0) },
|
||||
featured_image: { required },
|
||||
featured_image: { imageType, maxFileSize },
|
||||
status: { required },
|
||||
type: { required },
|
||||
posted_at: {
|
||||
required: requiredIf(() => form.value.status?.value === 'published'),
|
||||
},
|
||||
}
|
||||
};
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const config = useRuntimeConfig();
|
||||
|
||||
const { data: formats } = await useAsyncData('formats',
|
||||
() => $fetch(`${config.public.apiBase}/content/formats/`)
|
||||
);
|
||||
const quilloptions = ref({});
|
||||
|
||||
const basic: any = ref({
|
||||
dateFormat: 'Y-m-d',
|
||||
position: 'auto left',
|
||||
minDate: "today",
|
||||
});
|
||||
|
||||
const { data: form } = await useAsyncData('contents',
|
||||
const { data: form, refresh} = await useAsyncData('content-get',
|
||||
async () => {
|
||||
const content = await $fetch(`${config.public.apiBase}content/contents/${route.params.id}`, {});
|
||||
console.log('Fetching content data for ID:', route.params.id);
|
||||
const content = await $fetch(`${config.public.apiBase}/content/contents/${route.params.id}/`, {});
|
||||
|
||||
return {
|
||||
...content,
|
||||
@@ -220,68 +286,103 @@
|
||||
};
|
||||
});
|
||||
|
||||
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({
|
||||
current_page: 1,
|
||||
pagesize: 10,
|
||||
sort_column: 'id',
|
||||
sort_direction: 'asc',
|
||||
});
|
||||
|
||||
const { data: formats } = await useAsyncData('formats',
|
||||
() => $fetch(`${config.public.apiBase}/content/formats/`)
|
||||
);
|
||||
|
||||
const { data: themes } = await useAsyncData('themes',
|
||||
() => $fetch(`${config.public.apiBase}content/themes/`, {
|
||||
params: {
|
||||
page: params.current_page,
|
||||
page_size: 50
|
||||
}
|
||||
}), {
|
||||
watch: [params]
|
||||
}
|
||||
() => $fetch(`${config.public.apiBase}/content/themes/`)
|
||||
);
|
||||
|
||||
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]
|
||||
}
|
||||
// const { data: topics, refresh: refreshTopics } = await useAsyncData('topics',
|
||||
// () => $fetch(`${config.public.apiBase}/content/topics/${form.value.theme?.value}/`), {
|
||||
// watch: [() => form.value.theme?.value],
|
||||
// }
|
||||
// );
|
||||
|
||||
const { data: types } = await useAsyncData('types',
|
||||
() => $fetch(`${config.public.apiBase}/content/types/`)
|
||||
);
|
||||
|
||||
watch(() => form.value?.theme, async (val) => {
|
||||
form.value.topic = null;
|
||||
if (val && formats.value) {
|
||||
await refreshTopics();
|
||||
const { data: statuses } = await useAsyncData('statuses',
|
||||
() => $fetch(`${config.public.apiBase}/content/statuses/`)
|
||||
);
|
||||
|
||||
const topics = ref({ results: [] });
|
||||
const fetchTopics = async () => {
|
||||
if (!form.value.theme?.value) return;
|
||||
try {
|
||||
const res = await $fetch(`${config.public.apiBase}/content/topics/${form.value.theme.value}/`);
|
||||
topics.value = res;
|
||||
|
||||
// mapping kembali topik jika perlu
|
||||
if (typeof form.value.topic === 'string') {
|
||||
form.value.topic = res.results.find(t => t.value === form.value.topic) ?? null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Gagal mengambil topik:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
watchEffect(() => {
|
||||
if (form.value && formats.value?.results?.length && typeof form.value.format === 'string') {
|
||||
form.value.format = formats.value.results.find(f => f.value === form.value.format) ?? null;
|
||||
}
|
||||
|
||||
if (form.value && themes.value?.results?.length && typeof form.value.theme === 'string') {
|
||||
form.value.theme = themes.value.results.find(t => t.value === form.value.theme) ?? null;
|
||||
}
|
||||
|
||||
if (form.value && topics.value?.results?.length && typeof form.value.topic === 'string') {
|
||||
form.value.topic = topics.value.results.find(t => t.value === form.value.topic) ?? null;
|
||||
}
|
||||
|
||||
if (form.value && types.value?.results?.length && typeof form.value.type === 'string') {
|
||||
form.value.type = types.value.results.find(t => t.value === form.value.type) ?? null;
|
||||
}
|
||||
|
||||
if (form.value && statuses.value?.results?.length && typeof form.value.status === 'string') {
|
||||
form.value.status = statuses.value.results.find(s => s.value === form.value.status) ?? null;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
watchEffect(async () => {
|
||||
if (!form.value.theme || typeof form.value.theme === 'string') {
|
||||
if (themes.value?.results?.length && typeof form.value.theme === 'string') {
|
||||
form.value.theme = themes.value.results.find(t => t.value === form.value.theme) ?? null;
|
||||
}
|
||||
}
|
||||
|
||||
if (form.value.theme?.value) {
|
||||
await fetchTopics();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
||||
const featuredImageUploader = ref(null);
|
||||
|
||||
onMounted(async () => {
|
||||
const fileupload = await import('file-upload-with-preview');
|
||||
let FileUploadWithPreview = fileupload.default;
|
||||
|
||||
// single image upload
|
||||
new FileUploadWithPreview('featuredImage', {
|
||||
featuredImageUploader.value = new FileUploadWithPreview('featuredImage', {
|
||||
images: {
|
||||
baseImage: form.value.featured_image ? form.value.featured_image : '/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 () => {
|
||||
@@ -296,8 +397,8 @@
|
||||
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('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', JSON.stringify(form.value.data));
|
||||
@@ -306,34 +407,63 @@
|
||||
formData.append('coin', form.value.coin);
|
||||
formData.append('color', form.value.color);
|
||||
|
||||
if (form.value.featured_image) {
|
||||
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 && typeof form.value.featured_image !== 'string') {
|
||||
formData.append('featured_image', form.value.featured_image);
|
||||
}
|
||||
|
||||
await $fetch(`${config.public.apiBase}content/contents/${route.params.id}/`, {
|
||||
isLoading.value = true;
|
||||
await $fetch(`${config.public.apiBase}/content/contents/${route.params.id}/`, {
|
||||
method: 'PUT',
|
||||
body: formData
|
||||
}).then(() => {
|
||||
//redirect
|
||||
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]
|
||||
const file = event.target.files[0];
|
||||
|
||||
if (!file) return
|
||||
if (!file) return;
|
||||
|
||||
const allowed = ['image/png']
|
||||
const allowed = ['image/png', 'image/jpeg', 'image/jpg'];
|
||||
if (!allowed.includes(file.type)) {
|
||||
alert('Hanya PNG yang diizinkan')
|
||||
return
|
||||
alert('Hanya PNG atau JPG yang diizinkan');
|
||||
return;
|
||||
}
|
||||
|
||||
form.value.featured_image = file
|
||||
form.value.featured_image = file;
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
refresh();
|
||||
|
||||
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>
|
||||
+153
-50
@@ -38,6 +38,28 @@
|
||||
<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 }">
|
||||
@@ -51,8 +73,8 @@
|
||||
selected-label=""
|
||||
select-label=""
|
||||
deselect-label=""
|
||||
label="theme"
|
||||
track-by="id"
|
||||
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>
|
||||
@@ -69,8 +91,8 @@
|
||||
selected-label=""
|
||||
select-label=""
|
||||
deselect-label=""
|
||||
label="topic"
|
||||
track-by="id"
|
||||
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>
|
||||
@@ -94,6 +116,24 @@
|
||||
<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 }">
|
||||
@@ -107,7 +147,9 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -167,8 +209,8 @@
|
||||
</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>
|
||||
<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>
|
||||
@@ -180,11 +222,14 @@
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { integer, minValue, required } from '@vuelidate/validators';
|
||||
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({
|
||||
@@ -193,7 +238,7 @@
|
||||
theme: null,
|
||||
topic: null,
|
||||
format: '',
|
||||
decription: '',
|
||||
description: '',
|
||||
content: '',
|
||||
data: '',
|
||||
grades: [],
|
||||
@@ -201,6 +246,9 @@
|
||||
coin: 0,
|
||||
featured_image: '',
|
||||
color: '',
|
||||
type: '',
|
||||
status: '',
|
||||
posted_at: null,
|
||||
});
|
||||
const isSubmitted = ref(false);
|
||||
const rules = {
|
||||
@@ -216,66 +264,72 @@
|
||||
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 params = reactive({
|
||||
current_page: 1,
|
||||
pagesize: 10,
|
||||
sort_column: 'id',
|
||||
sort_direction: 'asc',
|
||||
const quilloptions = ref({});
|
||||
|
||||
const basic: any = ref({
|
||||
dateFormat: 'Y-m-d',
|
||||
position: 'auto left',
|
||||
minDate: "today",
|
||||
});
|
||||
|
||||
const { data: themes } = await useAsyncData('themes',
|
||||
() => $fetch(`${config.public.apiBase}content/themes/`, {
|
||||
params: {
|
||||
page: params.current_page,
|
||||
page_size: 50
|
||||
}
|
||||
}), {
|
||||
watch: [params]
|
||||
}
|
||||
() => $fetch(`${config.public.apiBase}/content/themes/`)
|
||||
);
|
||||
|
||||
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]
|
||||
() => $fetch(`${config.public.apiBase}/content/topics/${form.value.theme?.value}/`), {
|
||||
watch: [() => form.value.theme?.value]
|
||||
}
|
||||
);
|
||||
|
||||
watch(() => form.value.theme, async (val) => {
|
||||
form.value.topic = null
|
||||
if (val) {
|
||||
refreshNuxtData('topics');
|
||||
} else {
|
||||
|
||||
}
|
||||
watch(() => form.value.theme, () => {
|
||||
form.value.topic = null;
|
||||
});
|
||||
|
||||
const { data: formats } = await useAsyncData('formats',
|
||||
() => $fetch(`${config.public.apiBase}content/formats/`)
|
||||
() => $fetch(`${config.public.apiBase}/content/formats/`)
|
||||
);
|
||||
|
||||
const { data: types } = await useAsyncData('types',
|
||||
() => $fetch(`${config.public.apiBase}/content/types/`)
|
||||
);
|
||||
|
||||
const { data: statuses } = await useAsyncData('statuses',
|
||||
() => $fetch(`${config.public.apiBase}/content/statuses/`)
|
||||
);
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
||||
const featuredImageUploader = ref(null);
|
||||
|
||||
onMounted(async () => {
|
||||
const fileupload = await import('file-upload-with-preview');
|
||||
let FileUploadWithPreview = fileupload.default;
|
||||
|
||||
// single image upload
|
||||
new FileUploadWithPreview('featuredImage', {
|
||||
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 () => {
|
||||
@@ -290,32 +344,47 @@
|
||||
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('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);
|
||||
}
|
||||
|
||||
console.log(formData);
|
||||
await $fetch(`${config.public.apiBase}content/contents/`, {
|
||||
isLoading.value = true;
|
||||
await $fetch(`${config.public.apiBase}/content/contents/`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then(() => {
|
||||
//redirect
|
||||
router.push({ path: "/content/contents/list" });
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
//assign response error data to state "errors"
|
||||
console.log(error);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -324,12 +393,46 @@
|
||||
|
||||
if (!file) return
|
||||
|
||||
const allowed = ['image/png']
|
||||
const allowed = ['image/png', 'image/jpeg', 'image/jpg']
|
||||
if (!allowed.includes(file.type)) {
|
||||
alert('Hanya PNG yang diizinkan')
|
||||
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>
|
||||
@@ -19,14 +19,14 @@
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<input v-model.lazy="params.search" type="text" class="form-input max-w-xs" placeholder="Cari..." @change="changeSearch"/>
|
||||
<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="contents?.results"
|
||||
:rows="rows"
|
||||
:columns="cols"
|
||||
:totalRows="contents?.count"
|
||||
:totalRows="totalRows"
|
||||
:isServerMode=true
|
||||
:page="params.current_page"
|
||||
:pageSize="params.pagesize"
|
||||
@@ -40,8 +40,8 @@
|
||||
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">
|
||||
<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
|
||||
@@ -71,11 +71,35 @@
|
||||
const cols =
|
||||
ref([
|
||||
{ field: 'title', title: 'Judul' },
|
||||
{ field: 'theme.theme', title: 'Tema' },
|
||||
{ field: 'topic.topic', title: 'Topik' },
|
||||
{ field: 'format', title: 'Format' },
|
||||
{ field: 'id', title: 'Aksi' },
|
||||
|
||||
{
|
||||
field: 'theme',
|
||||
title: 'Tema',
|
||||
cellRenderer: (row: any) => row.theme_display
|
||||
},
|
||||
{
|
||||
field: 'topic',
|
||||
title: 'Topik',
|
||||
cellRenderer: (row: any) => row.topic_display
|
||||
},
|
||||
{ field: 'format_display', title: 'Format' },
|
||||
{
|
||||
field: 'type',
|
||||
title: 'Jenis',
|
||||
cellRenderer: (row: any) => row.type_display
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: 'Status',
|
||||
cellRenderer: (row: any) => row.status_display
|
||||
},
|
||||
{
|
||||
field: 'actions',
|
||||
title: 'Aksi',
|
||||
headerClass: 'text-right',
|
||||
cellClass: 'text-right',
|
||||
sort: false,
|
||||
width: '150px'
|
||||
}
|
||||
]) || [];
|
||||
|
||||
const params = reactive({
|
||||
@@ -86,6 +110,8 @@
|
||||
sort_direction: 'asc',
|
||||
});
|
||||
|
||||
const rows = computed(() => contents.value?.results ?? []);
|
||||
const totalRows = computed(() => contents.value?.count ?? 0);
|
||||
const { data: contents } = await useAsyncData('contents',
|
||||
() => {
|
||||
return $fetch(`${config.public.apiBase}/content/contents/`, {
|
||||
@@ -108,9 +134,7 @@
|
||||
};
|
||||
|
||||
const changeSearch = (data: any) => {
|
||||
console.log(data);
|
||||
params.current_page = 1;
|
||||
console.log(params);
|
||||
};
|
||||
|
||||
const viewData = (data: any) => {
|
||||
|
||||
Reference in New Issue
Block a user