127 lines
3.7 KiB
TypeScript
127 lines
3.7 KiB
TypeScript
import {
|
|
Dialog,
|
|
DialogBackdrop,
|
|
DialogPanel,
|
|
DialogTitle,
|
|
} from '@headlessui/react'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { useEffect } from 'react'
|
|
import toast from 'react-hot-toast'
|
|
import { useFetcher, useRouteLoaderData } from 'react-router'
|
|
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
|
|
import { z } from 'zod'
|
|
|
|
import { Button } from '~/components/ui/button'
|
|
import { Input } from '~/components/ui/input'
|
|
import { InputFile } from '~/components/ui/input-file'
|
|
import { useAdminContext } from '~/contexts/admin'
|
|
import type { loader } from '~/routes/_admin.lg-admin'
|
|
|
|
export const profileSchema = z.object({
|
|
name: z.string().min(1, 'Wajib diisi'),
|
|
email: z.string().email('Email tidak valid'),
|
|
profile_picture: z.string().url({
|
|
message: 'URL tidak valid',
|
|
}),
|
|
})
|
|
|
|
export type TProfileSchema = z.infer<typeof profileSchema>
|
|
|
|
export const DialogProfile = () => {
|
|
const { editProfile, setEditProfile } = useAdminContext()
|
|
const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
|
|
const { staffData } = loaderData || {}
|
|
const fetcher = useFetcher()
|
|
|
|
const formMethods = useRemixForm<TProfileSchema>({
|
|
mode: 'onSubmit',
|
|
fetcher,
|
|
resolver: zodResolver(profileSchema),
|
|
values: {
|
|
name: staffData?.name || '',
|
|
email: staffData?.email || '',
|
|
profile_picture: staffData?.profile_picture || '',
|
|
},
|
|
})
|
|
|
|
const { handleSubmit } = formMethods
|
|
|
|
useEffect(() => {
|
|
if (!fetcher.data?.success && fetcher.data?.message) {
|
|
toast.error(fetcher.data.message)
|
|
}
|
|
|
|
if (fetcher.data?.success) {
|
|
setEditProfile(false)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [fetcher.data])
|
|
|
|
return (
|
|
<Dialog
|
|
open={editProfile}
|
|
onClose={() => {
|
|
if (fetcher.state === 'idle') {
|
|
setEditProfile(false)
|
|
}
|
|
}}
|
|
className="relative z-50"
|
|
transition
|
|
>
|
|
<DialogBackdrop
|
|
className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
|
|
transition
|
|
/>
|
|
<div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
|
|
<DialogPanel
|
|
transition
|
|
className="w-full max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
|
|
>
|
|
<DialogTitle
|
|
as="h3"
|
|
className="text-xl font-bold"
|
|
>
|
|
Update Profile
|
|
</DialogTitle>
|
|
<RemixFormProvider {...formMethods}>
|
|
<fetcher.Form
|
|
method="post"
|
|
onSubmit={handleSubmit}
|
|
className="space-y-4"
|
|
action="/actions/admin/profile"
|
|
>
|
|
<Input
|
|
name="name"
|
|
id="name"
|
|
label="Nama"
|
|
placeholder="Enter your name"
|
|
/>
|
|
<Input
|
|
id="email"
|
|
label="Email"
|
|
placeholder="Contoh: legal@legalgo.id"
|
|
name="email"
|
|
/>
|
|
<InputFile
|
|
name="profile_picture"
|
|
id="profile_picture"
|
|
label="Gambar Profil"
|
|
placeholder="Unggah gambar profil Anda"
|
|
category="profile_picture"
|
|
/>
|
|
<Button
|
|
disabled={fetcher.state !== 'idle'}
|
|
isLoading={fetcher.state !== 'idle'}
|
|
type="submit"
|
|
className="w-full rounded-md py-2"
|
|
>
|
|
Simpan
|
|
</Button>
|
|
</fetcher.Form>
|
|
</RemixFormProvider>
|
|
</DialogPanel>
|
|
</div>
|
|
</Dialog>
|
|
)
|
|
}
|