Wian Drs
200 lines
9.8 KiB
TypeScript
200 lines
9.8 KiB
TypeScript
import { Form, Head, Link } from '@inertiajs/react';
|
|
import InputError from '@/components/input-error';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
type Device = {
|
|
id: number;
|
|
name: string;
|
|
status: string;
|
|
activation_status: string;
|
|
vendor: { name: string };
|
|
};
|
|
type Assignment = { device_id: number; group_name: string };
|
|
type DeviceUser = {
|
|
id: number;
|
|
display_name: string;
|
|
username: string;
|
|
is_enabled: boolean;
|
|
notes?: string;
|
|
assignments: Assignment[];
|
|
};
|
|
type Props = { deviceUser: DeviceUser | null; devices: Device[] };
|
|
export default function DeviceUserForm({ deviceUser, devices }: Props) {
|
|
const edit = !!deviceUser;
|
|
const selected = deviceUser?.assignments.map((a) => a.device_id) ?? [];
|
|
const group = deviceUser?.assignments[0]?.group_name ?? 'RADIQ-NOC';
|
|
|
|
return (
|
|
<>
|
|
<Head
|
|
title={edit ? 'Edit User Perangkat' : 'Tambah User Perangkat'}
|
|
/>
|
|
<div className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-6 p-4 md:p-6">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold">
|
|
{edit ? 'Edit' : 'Tambah'} User Perangkat
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Perubahan dikirim melalui queue. Perangkat offline akan
|
|
berstatus pending.
|
|
</p>
|
|
</div>
|
|
<Form
|
|
action={
|
|
edit
|
|
? `/device-users/${deviceUser.id}`
|
|
: '/device-users'
|
|
}
|
|
method={edit ? 'put' : 'post'}
|
|
>
|
|
{({ processing, errors }) => (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Identitas dan Target</CardTitle>
|
|
<CardDescription>
|
|
Password tidak pernah ditampilkan kembali
|
|
atau dimasukkan dalam payload queue.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-5 md:grid-cols-2">
|
|
<div className="grid gap-2">
|
|
<Label>Nama</Label>
|
|
<Input
|
|
name="display_name"
|
|
defaultValue={deviceUser?.display_name}
|
|
required
|
|
/>
|
|
<InputError message={errors.display_name} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Username Perangkat</Label>
|
|
<Input
|
|
name="username"
|
|
defaultValue={deviceUser?.username}
|
|
required
|
|
/>
|
|
<InputError message={errors.username} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>
|
|
{edit
|
|
? 'Password Baru (kosongkan jika tetap)'
|
|
: 'Password'}
|
|
</Label>
|
|
<Input
|
|
name="password"
|
|
type="password"
|
|
required={!edit}
|
|
autoComplete="new-password"
|
|
/>
|
|
<InputError message={errors.password} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Konfirmasi Password</Label>
|
|
<Input
|
|
name="password_confirmation"
|
|
type="password"
|
|
required={!edit}
|
|
autoComplete="new-password"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Group</Label>
|
|
<select
|
|
name="group_name"
|
|
defaultValue={group}
|
|
className="h-10 rounded-md border bg-background px-3"
|
|
>
|
|
<option value="RADIQ-READ">
|
|
RADIQ-READ
|
|
</option>
|
|
<option value="RADIQ-WRITE">
|
|
RADIQ-WRITE
|
|
</option>
|
|
<option value="RADIQ-NOC">
|
|
RADIQ-NOC
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<label className="flex items-center gap-2 self-end pb-2">
|
|
<input
|
|
type="hidden"
|
|
name="is_enabled"
|
|
value="0"
|
|
/>
|
|
<input
|
|
type="checkbox"
|
|
name="is_enabled"
|
|
value="1"
|
|
defaultChecked={
|
|
deviceUser?.is_enabled ?? true
|
|
}
|
|
/>
|
|
User aktif di perangkat
|
|
</label>
|
|
<div className="md:col-span-2">
|
|
<Label>Pilih Perangkat</Label>
|
|
<div className="mt-2 grid max-h-80 gap-2 overflow-y-auto rounded-lg border p-3 md:grid-cols-2">
|
|
{devices.map((device) => (
|
|
<label
|
|
key={device.id}
|
|
className="flex items-center gap-3 rounded border p-3"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
name="device_ids[]"
|
|
value={device.id}
|
|
defaultChecked={selected.includes(
|
|
device.id,
|
|
)}
|
|
/>
|
|
<span>
|
|
<span className="block font-medium">
|
|
{device.name}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{device.vendor.name} ·{' '}
|
|
{device.status} ·{' '}
|
|
{
|
|
device.activation_status
|
|
}
|
|
</span>
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<InputError message={errors.device_ids} />
|
|
</div>
|
|
<div className="grid gap-2 md:col-span-2">
|
|
<Label>Catatan</Label>
|
|
<textarea
|
|
name="notes"
|
|
defaultValue={deviceUser?.notes}
|
|
className="min-h-20 rounded-md border bg-background p-3"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-end gap-3 md:col-span-2">
|
|
<Button variant="outline" asChild>
|
|
<Link href="/device-users">Batal</Link>
|
|
</Button>
|
|
<Button disabled={processing}>
|
|
Simpan & Sinkronkan
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</Form>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|