112 lines
5.2 KiB
Vue
112 lines
5.2 KiB
Vue
<template>
|
|
<div>
|
|
<ul class="flex space-x-2 rtl:space-x-reverse">
|
|
<li>
|
|
<a href="javascript:;" class="text-primary hover:underline">Core</a>
|
|
</li>
|
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
|
<NuxtLink to="/content/themes/list" class="text-primary hover:underline">Daftar Tema Konten</NuxtLink>
|
|
</li>
|
|
<li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
|
|
<span>Tambah Tema 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 Tema Konten</h5>
|
|
<NuxtLink to="/content/themes/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.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">
|
|
<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-4 gap-2">
|
|
<div :class="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
|
|
<label for="featured_image">Gambar</label>
|
|
<input id="featured_image" type="text" class="form-input" v-model="form.featured_image" />
|
|
<template v-if="isSubmitted && $validate.form.featured_image.$error">
|
|
<p class="text-danger mt-1">Gambar tema konten harus diisi</p>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center ltr:ml-auto mt-8">
|
|
<button type="submit" class="btn btn-success !py-1"><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 { required } from '@vuelidate/validators';
|
|
|
|
useHead({ title: 'Daftar Tema Konten' });
|
|
|
|
const isSubmitted = ref(false);
|
|
const rules = {
|
|
form: {
|
|
theme: { required },
|
|
description: { required },
|
|
featured_image: { required },
|
|
}
|
|
};
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const { data: form } = await useAsyncData('provinces',
|
|
() => $fetch(`http://localhost:8000/content/themes/${route.params.id}`, {}), {}
|
|
);
|
|
const $validate = useVuelidate(rules, { form });
|
|
|
|
|
|
const submitForm = async () => {
|
|
isSubmitted.value = true;
|
|
$validate.value.form.$touch();
|
|
if ($validate.value.form.$invalid) {
|
|
return false;
|
|
}
|
|
|
|
await $fetch(`http://localhost:8000/content/themes/${route.params.id}/`, {
|
|
method: 'PUT',
|
|
body: {
|
|
"theme": form.value.theme,
|
|
"description": form.value.description,
|
|
"featured_image": form.value.featured_image
|
|
}
|
|
}).then(() => {
|
|
//redirect
|
|
router.push({ path: "/content/themes/list" });
|
|
})
|
|
.catch((error) => {
|
|
|
|
//assign response error data to state "errors"
|
|
console.log(error);
|
|
});
|
|
}
|
|
</script> |