refactor: reorder settings form fields and improve code formatting
This commit is contained in:
parent
d0ee05a148
commit
abeff9963a
@ -1,15 +1,15 @@
|
|||||||
import { Head, useForm } from '@inertiajs/react';
|
|
||||||
import { ImagePlus, X, Save, Loader } from 'lucide-react';
|
|
||||||
import React, { useRef, useState } from 'react';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Field, FieldError } from "@/components/ui/field"
|
import { Field, FieldError } from "@/components/ui/field";
|
||||||
import { Input } from "@/components/ui/input"
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label"
|
import { Label } from "@/components/ui/label";
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
import systemRoutes from '@/routes/system';
|
import systemRoutes from '@/routes/system';
|
||||||
import type { GeneralSetting } from '@/types';
|
import type { GeneralSetting } from '@/types';
|
||||||
|
import { Head, useForm } from '@inertiajs/react';
|
||||||
|
import { ImagePlus, Loader, Save, X } from 'lucide-react';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
export default function SettingIndex({ setting }: { setting: GeneralSetting | null }) {
|
export default function SettingIndex({ setting }: { setting: GeneralSetting | null }) {
|
||||||
const { data, setData, post, processing, errors } = useForm({
|
const { data, setData, post, processing, errors } = useForm({
|
||||||
@ -31,8 +31,8 @@ export default function SettingIndex({ setting }: { setting: GeneralSetting | nu
|
|||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
|
|
||||||
if (!file) {
|
if (!file) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setData('logo', file);
|
setData('logo', file);
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
@ -45,16 +45,16 @@ return;
|
|||||||
setLogoPreview(null);
|
setLogoPreview(null);
|
||||||
|
|
||||||
if (logoInputRef.current) {
|
if (logoInputRef.current) {
|
||||||
logoInputRef.current.value = '';
|
logoInputRef.current.value = '';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleIconChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleIconChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
|
|
||||||
if (!file) {
|
if (!file) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setData('icon', file);
|
setData('icon', file);
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
@ -67,8 +67,8 @@ return;
|
|||||||
setIconPreview(null);
|
setIconPreview(null);
|
||||||
|
|
||||||
if (iconInputRef.current) {
|
if (iconInputRef.current) {
|
||||||
iconInputRef.current.value = '';
|
iconInputRef.current.value = '';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onSubmit = (e: React.FormEvent) => {
|
const onSubmit = (e: React.FormEvent) => {
|
||||||
@ -99,19 +99,32 @@ iconInputRef.current.value = '';
|
|||||||
<CardTitle>Informasi Aplikasi</CardTitle>
|
<CardTitle>Informasi Aplikasi</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-6">
|
<CardContent className="space-y-6">
|
||||||
<Field>
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
<Label htmlFor="name" required>Nama Aplikasi</Label>
|
<Field>
|
||||||
<Input
|
<Label htmlFor="phone" required>No. Telepon</Label>
|
||||||
id="name"
|
<Input
|
||||||
name="name"
|
id="phone"
|
||||||
value={data.name}
|
value={data.phone || ''}
|
||||||
onChange={e => setData('name', e.target.value)}
|
onChange={(e) => setData('phone', e.target.value)}
|
||||||
autoComplete='off'
|
placeholder="0812xxxx"
|
||||||
placeholder='Contoh: VN Grup Dress'
|
/>
|
||||||
maxLength={100}
|
<FieldError error={errors.phone} label="No. Telepon" className="text-xs" />
|
||||||
/>
|
</Field>
|
||||||
<FieldError error={errors.name} label="Nama Aplikasi" className="text-xs" />
|
|
||||||
</Field>
|
<Field>
|
||||||
|
<Label htmlFor="name" required>Nama Aplikasi</Label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
value={data.name}
|
||||||
|
onChange={e => setData('name', e.target.value)}
|
||||||
|
autoComplete='off'
|
||||||
|
placeholder='Contoh: VN Grup Dress'
|
||||||
|
maxLength={100}
|
||||||
|
/>
|
||||||
|
<FieldError error={errors.name} label="Nama Aplikasi" className="text-xs" />
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Field>
|
<Field>
|
||||||
<Label htmlFor="description" required>Deskripsi</Label>
|
<Label htmlFor="description" required>Deskripsi</Label>
|
||||||
@ -125,19 +138,6 @@ iconInputRef.current.value = '';
|
|||||||
<FieldError error={errors.description} label="Deskripsi" className="text-xs mt-1" />
|
<FieldError error={errors.description} label="Deskripsi" className="text-xs mt-1" />
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
<Field>
|
|
||||||
<Label htmlFor="phone" required>No. Telepon</Label>
|
|
||||||
<Input
|
|
||||||
id="phone"
|
|
||||||
value={data.phone || ''}
|
|
||||||
onChange={(e) => setData('phone', e.target.value)}
|
|
||||||
placeholder="0812xxxx"
|
|
||||||
/>
|
|
||||||
<FieldError error={errors.phone} label="No. Telepon" className="text-xs" />
|
|
||||||
</Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Field>
|
<Field>
|
||||||
<Label htmlFor="address" required>Alamat</Label>
|
<Label htmlFor="address" required>Alamat</Label>
|
||||||
<Textarea
|
<Textarea
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user