215 lines
9.9 KiB
Vue
215 lines
9.9 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, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { DatePicker } from '@/components/ui/date-picker';
|
|
import {
|
|
Field,
|
|
FieldError,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldSet,
|
|
} from '@/components/ui/field';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { PhoneNumberInput } from '@/components/ui/phone-number-input';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import { RupiahInput } from '@/components/ui/rupiah-input';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { FIELD_LIMITS } from '@/lib/field-limits';
|
|
import { formErrors } from '@/lib/form';
|
|
import type { EmployeeFormData, EnumOption } from '@/types/employee';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
genders: EnumOption[];
|
|
employmentStatuses: EnumOption[];
|
|
roles: EnumOption[];
|
|
initialData?: Partial<EmployeeFormData>;
|
|
submitUrl: string;
|
|
method?: 'post' | 'put';
|
|
submitLabel?: string;
|
|
employeeId?: number;
|
|
employeeName?: string | null;
|
|
}>(),
|
|
{
|
|
method: 'post',
|
|
submitLabel: 'Simpan',
|
|
},
|
|
);
|
|
|
|
const form = useForm<EmployeeFormData>({
|
|
email: props.initialData?.email ?? '',
|
|
username: props.initialData?.username ?? '',
|
|
full_name: props.initialData?.full_name ?? '',
|
|
phone_number: props.initialData?.phone_number ?? '',
|
|
gender: props.initialData?.gender ?? '',
|
|
birth_date: props.initialData?.birth_date ?? '',
|
|
address: props.initialData?.address ?? '',
|
|
join_date: props.initialData?.join_date ?? '',
|
|
employment_status: props.initialData?.employment_status ?? 'full_time',
|
|
base_salary: props.initialData?.base_salary ?? '',
|
|
role: props.initialData?.role ?? '',
|
|
});
|
|
|
|
function submit() {
|
|
const options = {
|
|
onError: () => {
|
|
toast.error('Gagal menyimpan data. Periksa kembali formulir.');
|
|
},
|
|
};
|
|
|
|
if (props.method === 'put') {
|
|
form.put(props.submitUrl, options);
|
|
} else {
|
|
form.post(props.submitUrl, options);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form @submit.prevent="submit">
|
|
<div class="grid gap-6">
|
|
<Card>
|
|
<CardHeader class="flex flex-row items-start justify-between gap-4">
|
|
<div class="space-y-1">
|
|
<CardTitle>Data Akun</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<FieldSet class="grid gap-4 md:grid-cols-3">
|
|
<Field>
|
|
<FieldLabel for="email" required>Email</FieldLabel>
|
|
<Input id="email" v-model="form.email" type="email" placeholder="nama@perusahaan.com"
|
|
:maxlength="FIELD_LIMITS.email" />
|
|
<FieldError :errors="formErrors(form, 'email')" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel for="username" required>Username</FieldLabel>
|
|
<Input id="username" v-model="form.username" type="text" placeholder="username"
|
|
:maxlength="FIELD_LIMITS.username" />
|
|
<FieldError :errors="formErrors(form, 'username')" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel for="role" required>Role</FieldLabel>
|
|
<Select v-model="form.role">
|
|
<SelectTrigger id="role" class="w-full">
|
|
<SelectValue placeholder="Pilih role" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem v-for="option in roles" :key="option.value" :value="option.value">
|
|
{{ option.label }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<FieldError :errors="formErrors(form, 'role')" />
|
|
</Field>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Data Pribadi</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<FieldSet class="grid gap-4 md:grid-cols-3">
|
|
<Field class="md:col-span-3">
|
|
<FieldLabel for="full_name" required>Nama Lengkap</FieldLabel>
|
|
<Input id="full_name" v-model="form.full_name" type="text"
|
|
placeholder="Nama lengkap pegawai" :maxlength="FIELD_LIMITS.fullName" />
|
|
<FieldError :errors="formErrors(form, 'full_name')" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel for="phone_number">Nomor Telepon</FieldLabel>
|
|
<PhoneNumberInput id="phone_number" v-model="form.phone_number" />
|
|
<FieldError :errors="formErrors(form, 'phone_number')" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel for="birth_date">Tanggal Lahir</FieldLabel>
|
|
<DatePicker id="birth_date" v-model="form.birth_date"
|
|
placeholder="Pilih tanggal lahir" />
|
|
<FieldError :errors="formErrors(form, 'birth_date')" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Jenis Kelamin</FieldLabel>
|
|
<RadioGroup v-model="form.gender" class="flex flex-wrap gap-4 pt-1">
|
|
<div v-for="option in genders" :key="option.value" class="flex items-center gap-2">
|
|
<RadioGroupItem :id="`gender-${option.value}`" :value="option.value" />
|
|
<Label :for="`gender-${option.value}`" class="font-normal">
|
|
{{ option.label }}
|
|
</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
<FieldError :errors="formErrors(form, 'gender')" />
|
|
</Field>
|
|
<Field class="md:col-span-3">
|
|
<FieldLabel for="address">Alamat</FieldLabel>
|
|
<Textarea id="address" v-model="form.address" placeholder="Alamat lengkap" rows="3" />
|
|
<FieldError :errors="formErrors(form, 'address')" />
|
|
</Field>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Data Kepegawaian</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FieldGroup>
|
|
<FieldSet class="grid gap-4 md:grid-cols-3">
|
|
<Field>
|
|
<FieldLabel for="join_date" required>Tanggal Bergabung</FieldLabel>
|
|
<DatePicker id="join_date" v-model="form.join_date"
|
|
placeholder="Pilih tanggal bergabung" />
|
|
<FieldError :errors="formErrors(form, 'join_date')" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel for="base_salary" required>Gaji Pokok</FieldLabel>
|
|
<RupiahInput id="base_salary" v-model="form.base_salary" />
|
|
<FieldError :errors="formErrors(form, 'base_salary')" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel for="employment_status" required>Status Kepegawaian</FieldLabel>
|
|
<Select v-model="form.employment_status">
|
|
<SelectTrigger id="employment_status" class="w-full">
|
|
<SelectValue placeholder="Pilih status kepegawaian" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem v-for="option in employmentStatuses" :key="option.value"
|
|
:value="option.value">
|
|
{{ option.label }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<FieldError :errors="formErrors(form, 'employment_status')" />
|
|
</Field>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div class="flex items-center justify-end gap-2">
|
|
<Button type="submit" :disabled="form.processing">
|
|
<Save class="size-4" />
|
|
{{ form.processing ? 'Menyimpan...' : submitLabel }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|