115 lines
4.7 KiB
TypeScript
115 lines
4.7 KiB
TypeScript
import InputError from '@/components/input-error';
|
|
import LoadingButton from '@/components/loading-button';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import DashboardLayout from '@/layouts/dashboard/layout';
|
|
import { SharedData } from '@/types/global';
|
|
import { useForm, usePage } from '@inertiajs/react';
|
|
import { ReactNode } from 'react';
|
|
|
|
type StorageFormData = StorageFields & Record<string, string>;
|
|
|
|
interface Props extends SharedData {
|
|
storage: Settings<StorageFormData>;
|
|
}
|
|
|
|
const Storage = ({ storage }: Props) => {
|
|
const { props } = usePage<SharedData>();
|
|
const { translate } = props;
|
|
const { settings, input, button } = translate;
|
|
const { data, setData, post, errors, processing } = useForm<StorageFormData>({
|
|
...storage.fields,
|
|
});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
post(route('settings.storage.update', { id: storage.id }));
|
|
};
|
|
|
|
return (
|
|
<div className="md:px-3">
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold">{settings.storage_settings}</h1>
|
|
<p className="text-gray-500">{settings.storage_settings_description}</p>
|
|
</div>
|
|
<Card className="p-4 sm:p-6">
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<h2 className="mb-4 text-xl font-semibold">{settings.storage_settings}</h2>
|
|
|
|
<div>
|
|
<Label>{input.storage_driver} *</Label>
|
|
<Select value={data.storage_driver} onValueChange={(value) => setData('storage_driver', value as 'local' | 's3')}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={input.select_option} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="local">Local</SelectItem>
|
|
<SelectItem value="s3">AWS S3</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<InputError message={errors.storage_driver} />
|
|
</div>
|
|
|
|
{data.storage_driver === 's3' && (
|
|
<>
|
|
<div>
|
|
<Label>{input.aws_access_key_id} *</Label>
|
|
<Input
|
|
name="aws_access_key_id"
|
|
value={data.aws_access_key_id || ''}
|
|
onChange={(e) => setData(e.target.name, e.target.value)}
|
|
placeholder={input.aws_access_key_id_placeholder}
|
|
/>
|
|
<InputError message={errors.aws_access_key_id} />
|
|
</div>
|
|
|
|
<div>
|
|
<Label>{input.secret_access_key}</Label>
|
|
<Input
|
|
type="password"
|
|
name="aws_secret_access_key"
|
|
value={data.aws_secret_access_key || ''}
|
|
onChange={(e) => setData(e.target.name, e.target.value)}
|
|
placeholder={input.secret_access_key_placeholder}
|
|
/>
|
|
<InputError message={errors.aws_secret_access_key} />
|
|
</div>
|
|
<div>
|
|
<Label>{input.aws_default_region} *</Label>
|
|
<Input
|
|
name="aws_default_region"
|
|
value={data.aws_default_region || ''}
|
|
onChange={(e) => setData(e.target.name, e.target.value)}
|
|
placeholder={input.aws_default_region_placeholder}
|
|
/>
|
|
<InputError message={errors.aws_default_region} />
|
|
</div>
|
|
<div>
|
|
<Label>{input.bucket_name}</Label>
|
|
<Input
|
|
name="aws_bucket"
|
|
value={data.aws_bucket || ''}
|
|
onChange={(e) => setData(e.target.name, e.target.value)}
|
|
placeholder={input.bucket_name_placeholder}
|
|
/>
|
|
<InputError message={errors.aws_bucket} />
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between">
|
|
<LoadingButton loading={processing}>{button.save_changes}</LoadingButton>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Storage.layout = (page: ReactNode) => <DashboardLayout children={page} />;
|
|
|
|
export default Storage;
|