82 lines
3.2 KiB
Vue
82 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import { Save } from '@lucide/vue';
|
|
import { toast } from 'vue-sonner';
|
|
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 type { SocialMediaSettingsData } from '@/types/setting';
|
|
|
|
const props = defineProps<{
|
|
data: SocialMediaSettingsData;
|
|
}>();
|
|
|
|
const form = useForm({
|
|
instagram_url: props.data.instagram_url ?? '',
|
|
facebook_url: props.data.facebook_url ?? '',
|
|
tiktok_url: props.data.tiktok_url ?? '',
|
|
});
|
|
|
|
function submit() {
|
|
form.put('/admin/system/setting/social-media', {
|
|
preserveScroll: true,
|
|
onError: () => {
|
|
toast.error('Gagal menyimpan pengaturan media sosial.');
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form @submit.prevent="submit">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Media Sosial</CardTitle>
|
|
<CardDescription>
|
|
Tautan profil media sosial yang ditampilkan di website atau aplikasi.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldSet>
|
|
<FieldGroup class="grid gap-4">
|
|
<Field>
|
|
<FieldLabel for="instagram_url">
|
|
Instagram
|
|
</FieldLabel>
|
|
<Input id="instagram_url" v-model="form.instagram_url" type="url"
|
|
placeholder="https://instagram.com/username" />
|
|
<FieldError :errors="form.errors.instagram_url ? [form.errors.instagram_url] : []" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="facebook_url">
|
|
Facebook
|
|
</FieldLabel>
|
|
<Input id="facebook_url" v-model="form.facebook_url" type="url"
|
|
placeholder="https://facebook.com/pagename" />
|
|
<FieldError :errors="form.errors.facebook_url ? [form.errors.facebook_url] : []" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="tiktok_url">
|
|
TikTok
|
|
</FieldLabel>
|
|
<Input id="tiktok_url" v-model="form.tiktok_url" type="url"
|
|
placeholder="https://tiktok.com/@username" />
|
|
<FieldError :errors="form.errors.tiktok_url ? [form.errors.tiktok_url] : []" />
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div class="mt-6 flex justify-end">
|
|
<Button type="submit" :disabled="form.processing">
|
|
<Save class="size-4" />
|
|
{{ form.processing ? 'Menyimpan...' : 'Simpan' }}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</template>
|