117 lines
5.0 KiB
Vue
117 lines
5.0 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import { Save } from '@lucide/vue';
|
|
import { toast } from 'vue-sonner';
|
|
import ImageUploadField from '@/components/admin/setting/ImageUploadField.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Field, FieldError, FieldGroup, FieldLabel, FieldSet } from '@/components/ui/field';
|
|
import { Input } from '@/components/ui/input';
|
|
import { PhoneNumberInput } from '@/components/ui/phone-number-input';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import type { SystemSettingsData } from '@/types/setting';
|
|
|
|
const props = defineProps<{
|
|
data: SystemSettingsData;
|
|
}>();
|
|
|
|
const form = useForm({
|
|
app_name: props.data.app_name,
|
|
about_app: props.data.about_app ?? '',
|
|
email: props.data.email ?? '',
|
|
phone: props.data.phone ?? '',
|
|
logo: null as File | null,
|
|
login_cover: null as File | null,
|
|
});
|
|
|
|
function submit() {
|
|
form.post('/admin/system/setting/system', {
|
|
forceFormData: true,
|
|
preserveScroll: true,
|
|
onError: () => {
|
|
toast.error('Gagal menyimpan pengaturan sistem.');
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form @submit.prevent="submit">
|
|
<div class="grid gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Informasi Aplikasi</CardTitle>
|
|
<CardDescription>
|
|
Nama, deskripsi, dan kontak yang ditampilkan di aplikasi.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldSet>
|
|
<FieldGroup class="grid gap-4 sm:grid-cols-2">
|
|
<Field class="sm:col-span-2">
|
|
<FieldLabel for="app_name" required>
|
|
Nama Aplikasi
|
|
</FieldLabel>
|
|
<Input id="app_name" v-model="form.app_name" placeholder="DST Collection" />
|
|
<FieldError :errors="form.errors.app_name ? [form.errors.app_name] : []" />
|
|
</Field>
|
|
|
|
<Field class="sm:col-span-2">
|
|
<FieldLabel for="about_app">
|
|
Tentang Aplikasi
|
|
</FieldLabel>
|
|
<Textarea id="about_app" v-model="form.about_app" rows="4"
|
|
placeholder="Deskripsi singkat tentang bisnis atau aplikasi Anda." />
|
|
<FieldError :errors="form.errors.about_app ? [form.errors.about_app] : []" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="email">
|
|
Email
|
|
</FieldLabel>
|
|
<Input id="email" v-model="form.email" type="email" placeholder="info@perusahaan.com" />
|
|
<FieldError :errors="form.errors.email ? [form.errors.email] : []" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="phone">
|
|
Nomor Telepon
|
|
</FieldLabel>
|
|
<PhoneNumberInput id="phone" v-model="form.phone" />
|
|
<FieldError :errors="form.errors.phone ? [form.errors.phone] : []" />
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Branding</CardTitle>
|
|
<CardDescription>
|
|
Logo aplikasi dan gambar latar halaman login.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup class="grid gap-6 sm:grid-cols-2">
|
|
<ImageUploadField id="logo" v-model="form.logo" label="Logo" required
|
|
description="Disarankan PNG transparan, maks. 2 MB." :current-url="data.logo_url"
|
|
:errors="form.errors.logo ? [form.errors.logo] : []" />
|
|
|
|
<ImageUploadField id="login_cover" v-model="form.login_cover" label="Cover Login" required
|
|
description="Gambar latar halaman login, maks. 5 MB." :current-url="data.login_cover_url"
|
|
:errors="form.errors.login_cover ? [form.errors.login_cover] : []" />
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div class="flex justify-end">
|
|
<Button type="submit" :disabled="form.processing">
|
|
<Save class="size-4" />
|
|
{{ form.processing ? 'Menyimpan...' : 'Simpan' }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|