fix: edit profile
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
7ddd584159
commit
0bf2fd68c5
|
|
@ -10,7 +10,7 @@ import * as z from "zod";
|
|||
import Swal from "sweetalert2";
|
||||
import { getBlog, postBlog } from "@/service/blog/blog";
|
||||
import { id } from "date-fns/locale";
|
||||
import router from "next/router";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { getInfoProfile, saveUser } from "@/service/auth";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
|
@ -27,7 +27,6 @@ const profileSchema = z.object({
|
|||
phoneNumber: z.string().optional(),
|
||||
});
|
||||
|
||||
|
||||
type Detail = {
|
||||
id: number;
|
||||
userId: any;
|
||||
|
|
@ -39,6 +38,7 @@ type Detail = {
|
|||
address: string;
|
||||
phoneNumber: any;
|
||||
message: string;
|
||||
userKeycloakId: string;
|
||||
};
|
||||
|
||||
const UbahProfile: React.FC = () => {
|
||||
|
|
@ -46,46 +46,75 @@ const UbahProfile: React.FC = () => {
|
|||
const [detail, setDetail] = useState<Detail>();
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const t = useTranslations("LandingPage");
|
||||
const router = useRouter();
|
||||
|
||||
type ProfileSchema = z.infer<typeof profileSchema>;
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<ProfileSchema>({
|
||||
resolver: zodResolver(profileSchema),
|
||||
});
|
||||
|
||||
// useEffect(() => {
|
||||
// async function initState() {
|
||||
// const response = await getInfoProfile();
|
||||
// const details = response?.data?.data;
|
||||
|
||||
// setDetail(details);
|
||||
// // console.log("data", details);
|
||||
// }
|
||||
|
||||
// initState();
|
||||
// }, []);
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
const response = await getInfoProfile();
|
||||
const details = response?.data?.data;
|
||||
|
||||
setDetail(details);
|
||||
// console.log("data", details);
|
||||
|
||||
reset({
|
||||
username: details?.username,
|
||||
fullname: details?.fullname,
|
||||
memberIdentity: details?.memberIdentity,
|
||||
email: details?.email,
|
||||
address: details?.address,
|
||||
phoneNumber: details?.phoneNumber,
|
||||
});
|
||||
}
|
||||
|
||||
initState();
|
||||
}, []);
|
||||
|
||||
const save = async (data: ProfileSchema) => {
|
||||
// const requestData = {
|
||||
// ...data,
|
||||
// // userId: detail?.userKeycloakId,
|
||||
// firstName: detail?.fullname,
|
||||
// username: detail?.username,
|
||||
// memberIdentity: detail?.memberIdentity,
|
||||
// email: detail?.email,
|
||||
// address: detail?.address,
|
||||
// phoneNumber: detail?.phoneNumber,
|
||||
// // message: data.title,
|
||||
// };
|
||||
const requestData = {
|
||||
...data,
|
||||
// userId: detail?.userKeycloakId,
|
||||
firstName: detail?.fullname,
|
||||
username: detail?.username,
|
||||
memberIdentity: detail?.memberIdentity,
|
||||
email: detail?.email,
|
||||
address: detail?.address,
|
||||
phoneNumber: detail?.phoneNumber,
|
||||
// message: data.title,
|
||||
id: detail?.id,
|
||||
userKeycloakId: detail?.userKeycloakId, // 🔥 tambahin ini
|
||||
username: data.username,
|
||||
fullname: data.fullname,
|
||||
email: data.email,
|
||||
memberIdentity: data.memberIdentity,
|
||||
address: data.address,
|
||||
phoneNumber: data.phoneNumber,
|
||||
};
|
||||
|
||||
console.log("FORM DATA:", data);
|
||||
console.log("REQUEST DATA:", requestData);
|
||||
const response = await saveUser(requestData);
|
||||
// console.log("Form Data Submitted:", requestData);
|
||||
// console.log("response", response);
|
||||
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
text: "Data berhasil disimpan.",
|
||||
|
|
@ -93,7 +122,7 @@ const UbahProfile: React.FC = () => {
|
|||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "OK",
|
||||
}).then(() => {
|
||||
router.push("/en/auth");
|
||||
router.refresh();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -118,22 +147,32 @@ const UbahProfile: React.FC = () => {
|
|||
<div className="w-20 h-20 mx-auto rounded-full bg-red-700 flex items-center justify-center">
|
||||
<span className="text-white text-3xl font-bold">👤</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold mt-4">{t("changeProfile", { defaultValue: "Change Profile" })}</h1>
|
||||
<h1 className="text-2xl font-bold mt-4">
|
||||
{t("changeProfile", { defaultValue: "Change Profile" })}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex justify-center gap-4 mb-8">
|
||||
<Link href={"/profile"}>
|
||||
<button className="bg-red-700 text-white px-4 py-2 rounded">{t("userProfile", { defaultValue: "User Profile" })}</button>
|
||||
<button className="bg-red-700 text-white px-4 py-2 rounded">
|
||||
{t("userProfile", { defaultValue: "User Profile" })}
|
||||
</button>
|
||||
</Link>
|
||||
<Link href={"/profile/change-profile"}>
|
||||
<button className="border border-red-700 text-red-700 px-4 py-2 rounded">{t("changePhoto", { defaultValue: "Change Photo" })}</button>
|
||||
<button className="border border-red-700 text-red-700 px-4 py-2 rounded">
|
||||
{t("changePhoto", { defaultValue: "Change Photo" })}
|
||||
</button>
|
||||
</Link>
|
||||
<Link href={"/profile/change-password"}>
|
||||
<button className="border border-red-700 text-red-700 px-4 py-2 rounded">{t("changePass", { defaultValue: "Change Pass" })}</button>
|
||||
<button className="border border-red-700 text-red-700 px-4 py-2 rounded">
|
||||
{t("changePass", { defaultValue: "Change Pass" })}
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="max-w-3xl mx-auto bg-white shadow-sm p-4 rounded">
|
||||
<p className="mb-6 text-gray-600">{t("pleaseChange", { defaultValue: "Please Change" })}</p>
|
||||
<p className="mb-6 text-gray-600">
|
||||
{t("pleaseChange", { defaultValue: "Please Change" })}
|
||||
</p>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{detail !== undefined ? (
|
||||
<div>
|
||||
|
|
@ -141,51 +180,176 @@ const UbahProfile: React.FC = () => {
|
|||
<Label>
|
||||
Username<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Controller control={control} name="username" render={({ field }) => <Input size="md" type="text" defaultValue={detail?.username} onChange={field.onChange} placeholder="Enter Title" />} />
|
||||
{errors.username?.message && <p className="text-red-400 text-sm">{errors.username.message}</p>}
|
||||
{/* <Controller
|
||||
control={control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
size="md"
|
||||
type="text"
|
||||
defaultValue={detail?.username}
|
||||
onChange={field.onChange}
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
)}
|
||||
/> */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="username"
|
||||
render={({ field }) => <Input {...field} type="text" readOnly />}
|
||||
/>
|
||||
{errors.username?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.username.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
{/* <div className="mb-4">
|
||||
<Label>
|
||||
{t("fullName", { defaultValue: "Full Name" })}
|
||||
<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Controller control={control} name="fullname" render={({ field }) => <Input size="md" type="text" defaultValue={detail?.fullname} onChange={field.onChange} placeholder="Enter Title" />} />
|
||||
{errors.fullname?.message && <p className="text-red-400 text-sm">{errors.fullname.message}</p>}
|
||||
</div>
|
||||
</Label> */}
|
||||
{/* <Controller
|
||||
control={control}
|
||||
name="fullname"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
size="md"
|
||||
type="text"
|
||||
defaultValue={detail?.fullname}
|
||||
onChange={field.onChange}
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
)}
|
||||
/> */}
|
||||
{/* <Controller
|
||||
control={control}
|
||||
name="fullname"
|
||||
render={({ field }) => <Input {...field} type="text" />}
|
||||
/>
|
||||
{errors.fullname?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.fullname.message}
|
||||
</p>
|
||||
)}
|
||||
</div> */}
|
||||
<div className="mb-4">
|
||||
<Label>
|
||||
{t("identityNumber", { defaultValue: "Identity Number" })}
|
||||
<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Controller control={control} name="memberIdentity" render={({ field }) => <Input size="md" type="text" defaultValue={detail?.memberIdentity} onChange={field.onChange} placeholder="Enter Title" />} />
|
||||
{errors.memberIdentity?.message && <p className="text-red-400 text-sm">{errors.memberIdentity.message}</p>}
|
||||
{/* <Controller
|
||||
control={control}
|
||||
name="memberIdentity"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
size="md"
|
||||
type="text"
|
||||
defaultValue={detail?.memberIdentity}
|
||||
onChange={field.onChange}
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
)}
|
||||
/> */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="memberIdentity"
|
||||
render={({ field }) => <Input {...field} type="text" />}
|
||||
/>
|
||||
{errors.memberIdentity?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.memberIdentity.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<Label>
|
||||
Email<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Controller control={control} name="email" render={({ field }) => <Input size="md" type="text" defaultValue={detail?.email} onChange={field.onChange} placeholder="Enter Title" />} />
|
||||
{errors.email?.message && <p className="text-red-400 text-sm">{errors.email.message}</p>}
|
||||
{/* <Controller
|
||||
control={control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
size="md"
|
||||
type="text"
|
||||
defaultValue={detail?.email}
|
||||
onChange={field.onChange}
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
)}
|
||||
/> */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
render={({ field }) => <Input {...field} type="text" />}
|
||||
/>
|
||||
{errors.email?.message && (
|
||||
<p className="text-red-400 text-sm">{errors.email.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<Label>
|
||||
{t("number", { defaultValue: "Number" })}
|
||||
<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Controller control={control} name="phoneNumber" render={({ field }) => <Input size="md" type="number" defaultValue={detail?.phoneNumber} onChange={field.onChange} placeholder="Enter Title" />} />
|
||||
{errors.phoneNumber?.message && <p className="text-red-400 text-sm">{errors.phoneNumber.message}</p>}
|
||||
{/* <Controller
|
||||
control={control}
|
||||
name="phoneNumber"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
size="md"
|
||||
type="number"
|
||||
defaultValue={detail?.phoneNumber}
|
||||
onChange={field.onChange}
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
)}
|
||||
/> */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="phoneNumber"
|
||||
render={({ field }) => <Input {...field} type="text" />}
|
||||
/>
|
||||
{errors.phoneNumber?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.phoneNumber.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<Label>
|
||||
{t("address", { defaultValue: "Address" })}
|
||||
<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Controller control={control} name="address" render={({ field }) => <Textarea defaultValue={detail?.address} onChange={field.onChange} placeholder="Enter Title" />} />
|
||||
{errors.address?.message && <p className="text-red-400 text-sm">{errors.address.message}</p>}
|
||||
{/* <Controller
|
||||
control={control}
|
||||
name="address"
|
||||
render={({ field }) => (
|
||||
<Textarea
|
||||
defaultValue={detail?.address}
|
||||
onChange={field.onChange}
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
)}
|
||||
/> */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="address"
|
||||
render={({ field }) => <Textarea {...field} />}
|
||||
/>
|
||||
{errors.address?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.address.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="mt-4">
|
||||
<button type="submit" className="bg-red-700 text-white px-6 py-2 rounded hover:bg-red-800 focus:outline-none focus:ring focus:ring-red-300">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-red-700 text-white px-6 py-2 rounded hover:bg-red-800 focus:outline-none focus:ring focus:ring-red-300"
|
||||
>
|
||||
{t("save", { defaultValue: "Save" })}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -104,9 +104,8 @@ export async function saveUser(data: any) {
|
|||
const headers = {
|
||||
"content-type": "application/json",
|
||||
};
|
||||
return httpPost(url, headers);
|
||||
return httpPost(url, data, headers);
|
||||
}
|
||||
|
||||
export async function saveInstitutes(data: any) {
|
||||
const url = "public/users/save-institutes";
|
||||
const headers = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue