117 lines
3.8 KiB
Vue
117 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { router } from '@inertiajs/vue3';
|
|
import { Save } from '@lucide/vue';
|
|
import { ref } from 'vue';
|
|
import { toast } from 'vue-sonner';
|
|
import ImageUploadField from '@/components/form/image-upload-field/ImageUploadField.vue';
|
|
import MultipleImageUploadField from '@/components/form/image-upload-field/MultipleImageUploadField.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { createMediaUploadState } from '@/types/media';
|
|
import type { HomepageSettingsData } from '@/types/setting';
|
|
import type { MediaUploadState } from '@/types/media';
|
|
|
|
const props = defineProps<{
|
|
data: HomepageSettingsData;
|
|
}>();
|
|
|
|
const heroImage = ref<File | null>(null);
|
|
const aboutImage = ref<File | null>(null);
|
|
const galleryState = ref<MediaUploadState>(
|
|
createMediaUploadState(props.data.gallery_images),
|
|
);
|
|
const isSubmitting = ref(false);
|
|
|
|
function submit() {
|
|
isSubmitting.value = true;
|
|
|
|
const formData = new FormData();
|
|
|
|
if (heroImage.value) {
|
|
formData.append('hero_image', heroImage.value);
|
|
}
|
|
|
|
if (aboutImage.value) {
|
|
formData.append('about_image', aboutImage.value);
|
|
}
|
|
|
|
galleryState.value.newFiles.forEach((file) => {
|
|
formData.append('gallery_images[]', file);
|
|
});
|
|
|
|
galleryState.value.removeIds.forEach((id) => {
|
|
formData.append('gallery_images_remove[]', String(id));
|
|
});
|
|
|
|
router.put('/admin/system/setting/homepage', formData, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
toast.success('Pengaturan homepage berhasil disimpan.');
|
|
heroImage.value = null;
|
|
aboutImage.value = null;
|
|
},
|
|
onError: () => {
|
|
toast.error('Gagal menyimpan pengaturan homepage.');
|
|
},
|
|
onFinish: () => {
|
|
isSubmitting.value = false;
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form @submit.prevent="submit">
|
|
<div class="grid gap-4">
|
|
|
|
<!-- Hero Image -->
|
|
<Card>
|
|
<CardContent>
|
|
<ImageUploadField
|
|
id="hero_image"
|
|
label="Foto Hero"
|
|
description="Foto utama yang ditampilkan di bagian hero homepage."
|
|
:current-url="props.data.hero_image_url"
|
|
v-model="heroImage"
|
|
preview-class="aspect-[3/4] max-w-xs"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- Gallery / Lookbook -->
|
|
<Card>
|
|
<CardContent>
|
|
<MultipleImageUploadField
|
|
id="gallery_images"
|
|
label="Koleksi Lookbook"
|
|
description="Foto-foto yang ditampilkan di galeri lookbook."
|
|
:max-files="10"
|
|
v-model="galleryState"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- About Image -->
|
|
<Card>
|
|
<CardContent>
|
|
<ImageUploadField
|
|
id="about_image"
|
|
label="Foto Tentang Kami"
|
|
description="Foto yang ditampilkan di bagian tentang kami."
|
|
:current-url="props.data.about_image_url"
|
|
v-model="aboutImage"
|
|
preview-class="aspect-video max-w-md"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div class="flex justify-end">
|
|
<Button type="submit" :disabled="isSubmitting">
|
|
<Save class="size-4" />
|
|
{{ isSubmitting ? 'Menyimpan...' : 'Simpan' }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|