humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[QUDO-161] fix: portrait image article, fixing user form

This commit is contained in:
Rama Priyanto 2025-06-12 16:16:05 +07:00
parent a1baedde47
commit 34a78b088e
6 changed files with 185 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/form/article/edit-article-form.tsx
View File

@ -796,16 +796,16 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
))
) : (
<>
<div>
<div className="w-full h-[480px] flex justify-center items-center">
<Image
alt="main"
width={720}
height={480}
src={detailfiles[mainImage]?.file_url}
className="w-[75%] mx-auto"
className={`h-[480px] object-cover w-auto`}
/>
</div>
<div className="flex flex-row gap-2">
<div className="flex flex-row gap-2 mt-2">
{detailfiles?.map((file: any, index: number) => (
<a
key={index}

24
components/form/form-master-user-edit.tsx
View File

@ -42,10 +42,10 @@ const masterUserSchema = z.object({
fullname: z.string().min(1, { message: "Required" }),
username: z.string().min(1, { message: "Required" }),
email: z.string().min(1, { message: "Required" }),
identityNumber: z.string().min(1, { message: "Required" }),
genderType: z.string().min(1, { message: "Required" }),
phoneNumber: z.string().min(1, { message: "Required" }),
address: z.string().min(1, { message: "Required" }),
identityNumber: z.string().optional(),
genderType: z.string().optional(),
phoneNumber: z.string().optional(),
address: z.string().optional(),
userLevelType: userSchema,
userRoleType: userSchema,
});
@ -61,6 +61,7 @@ export default function FormMasterUserEdit() {
const formOptions = {
resolver: zodResolver(masterUserSchema),
defaultValues: { identityNumber: "" },
};
type MicroIssueSchema = z.infer<typeof masterUserSchema>;
const {
@ -139,10 +140,10 @@ export default function FormMasterUserEdit() {
setValue("fullname", profile?.fullname);
setValue("username", profile?.username);
setValue("email", profile?.email);
setValue("address", profile?.address);
setValue("identityNumber", profile?.identityNumber);
setValue("genderType", profile?.genderType);
setValue("phoneNumber", profile?.phoneNumber);
setValue("address", profile?.address || "");
setValue("identityNumber", profile?.identityNumber || "");
setValue("genderType", profile?.genderType || "");
setValue("phoneNumber", profile?.phoneNumber || "");
if (findLevel) {
setValue("userLevelType", findLevel);
}
@ -153,7 +154,12 @@ export default function FormMasterUserEdit() {
};
const fetchUserLevel = async () => {
const res = await getAllUserLevels();
const request = {
limit: 1000,
page: 1,
};
const res = await getAllUserLevels(request);
if (res?.data?.data) {
return setupParent(res?.data?.data, "level");
}

14
components/form/form-master-user.tsx
View File

@ -52,10 +52,10 @@ const masterUserSchema = z.object({
}),
passwordValidate: z.string().min(1, { message: "Required" }),
email: z.string().min(1, { message: "Required" }),
identityNumber: z.string().min(1, { message: "Required" }),
genderType: z.string().min(1, { message: "Required" }),
phoneNumber: z.string().min(1, { message: "Required" }),
address: z.string().min(1, { message: "Required" }),
identityNumber: z.string().optional(),
genderType: z.string().optional(),
phoneNumber: z.string().optional(),
address: z.string().optional(),
userLevelType: userSchema,
userRoleType: userSchema,
});
@ -237,7 +237,11 @@ export default function FormMasterUser() {
return (
<div className="mx-5 my-5 overflow-y-auto">
<form method="POST" onSubmit={handleSubmit(onSubmit)}>
<form
method="POST"
onSubmit={handleSubmit(onSubmit)}
className="w-full lg:w-1/2 lg:ml-4"
>
<Card className="rounded-md p-5 flex flex-col gap-3">
<Controller
control={control}

178
components/form/login.tsx
View File

@ -69,101 +69,101 @@ export default function Login() {
error("Username & Password Wajib Diisi !");
} else {
// login dengan otp
// loading();
// const response: any = await emailValidation(data);
// if (response?.error) {
// console.log("error", response);
// if (response?.message?.messages[0]?.includes("failed to send mail")) {
// error("Gagal Mengirim OTP");
// return false;
// }
loading();
const response: any = await emailValidation(data);
if (response?.error) {
console.log("error", response);
if (response?.message?.messages[0]?.includes("failed to send mail")) {
error("Gagal Mengirim OTP");
return false;
}
// if (response?.message?.messages[0]?.includes("username")) {
// error("Username / Password Tidak Sesuai");
// return false;
// }
// error("Unknown Error");
// return false;
// }
// close();
// if (response?.data?.messages[0] === "Continue to setup email") {
// setFirstLogin(true);
// } else {
// setNeedOtp(true);
// }
if (response?.message?.messages[0]?.includes("username")) {
error("Username / Password Tidak Sesuai");
return false;
}
error("Unknown Error");
return false;
}
close();
if (response?.data?.messages[0] === "Continue to setup email") {
setFirstLogin(true);
} else {
setNeedOtp(true);
}
// login tanpa otp
loading();
const response = await postSignIn(data);
if (response?.error) {
error("Username / Password Tidak Sesuai");
} else {
const profile = await getProfile(response?.data?.data?.access_token);
const dateTime: any = new Date();
// loading();
// const response = await postSignIn(data);
// if (response?.error) {
// error("Username / Password Tidak Sesuai");
// } else {
// const profile = await getProfile(response?.data?.data?.access_token);
// const dateTime: any = new Date();
const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
// const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
Cookies.set("access_token", response?.data?.data?.access_token, {
expires: 1,
});
Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
expires: 1,
});
Cookies.set("time_refresh", newTime, {
expires: 1,
});
Cookies.set("is_first_login", "true", {
secure: true,
sameSite: "strict",
});
const resActivity = await saveActivity(
{
activityTypeId: 1,
url: "https://kontenhumas.com/auth",
userId: profile?.data?.data?.id,
},
accessData?.id_token
);
Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
expires: 1,
});
Cookies.set("uie", profile?.data?.data?.id, {
expires: 1,
});
Cookies.set("ufne", profile?.data?.data?.fullname, {
expires: 1,
});
Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
expires: 1,
});
Cookies.set("username", profile?.data?.data?.username, {
expires: 1,
});
Cookies.set("urie", profile?.data?.data?.roleId, {
expires: 1,
});
Cookies.set("roleName", profile?.data?.data?.roleName, {
expires: 1,
});
Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
expires: 1,
});
Cookies.set("ulne", profile?.data?.data?.userLevelId, {
expires: 1,
});
Cookies.set("urce", profile?.data?.data?.roleCode, {
expires: 1,
});
Cookies.set("email", profile?.data?.data?.email, {
expires: 1,
});
router.push("/admin/dashboard");
Cookies.set("status", "login", {
expires: 1,
});
// Cookies.set("access_token", response?.data?.data?.access_token, {
// expires: 1,
// });
// Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
// expires: 1,
// });
// Cookies.set("time_refresh", newTime, {
// expires: 1,
// });
// Cookies.set("is_first_login", "true", {
// secure: true,
// sameSite: "strict",
// });
// const resActivity = await saveActivity(
// {
// activityTypeId: 1,
// url: "https://kontenhumas.com/auth",
// userId: profile?.data?.data?.id,
// },
// accessData?.id_token
// );
// Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
// expires: 1,
// });
// Cookies.set("uie", profile?.data?.data?.id, {
// expires: 1,
// });
// Cookies.set("ufne", profile?.data?.data?.fullname, {
// expires: 1,
// });
// Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
// expires: 1,
// });
// Cookies.set("username", profile?.data?.data?.username, {
// expires: 1,
// });
// Cookies.set("urie", profile?.data?.data?.roleId, {
// expires: 1,
// });
// Cookies.set("roleName", profile?.data?.data?.roleName, {
// expires: 1,
// });
// Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
// expires: 1,
// });
// Cookies.set("ulne", profile?.data?.data?.userLevelId, {
// expires: 1,
// });
// Cookies.set("urce", profile?.data?.data?.roleCode, {
// expires: 1,
// });
// Cookies.set("email", profile?.data?.data?.email, {
// expires: 1,
// });
// router.push("/admin/dashboard");
// Cookies.set("status", "login", {
// expires: 1,
// });
close();
}
// close();
// }
}
};

97
components/landing/HeaderNews.tsx
View File

@ -79,10 +79,22 @@ export default function HeaderNews() {
setHotNews(response?.data?.data);
}
const [portraitMap, setPortraitMap] = useState<any>({});
const handleImageLoad = (e: any, index: number) => {
const { naturalWidth, naturalHeight } = e.target;
const isPortrait = naturalHeight > naturalWidth;
setPortraitMap((prev: any) => ({
...prev,
[index]: isPortrait,
}));
};
return (
<div className="w-full">
<div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black p-1 lg:p-8 lg:h-[540px] w-full lg:w-[75%] lg:mx-auto">
<div className="lg:hidden w-[90%] h-[300px] md:h-[500px] mx-auto">
<div className="lg:hidden w-[90%] h-[200px] md:h-[400px] mx-auto mt-1">
{hotNews?.length > 0 ? (
<Swiper
centeredSlides={true}
@ -111,25 +123,38 @@ export default function HeaderNews() {
}}
>
{hotNews?.map((newsItem: any, index: number) => (
<SwiperSlide key={newsItem?.id}>
<SwiperSlide
key={newsItem?.id}
className="!w-full h-[200px] md:h-[400px]"
>
<Card
isFooterBlurred
radius="lg"
className="border-none rounded-xl shadow-none"
className="border-none h-[200px] md:h-[400px] shadow-none dark:bg-stone-800 bg-[#f0f0f0]"
>
<Image
alt="headernews"
src={
newsItem?.thumbnailUrl == ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
width={480}
height={480}
className="!w-[90vh] md:!w-[95vh] !h-[200px] md:!h-[400px] object-cover !rounded-b-none"
/>
<div className="relative w-full h-[200px] md:h-[400px]">
<Image
alt="headernews"
width={480}
height={480}
onLoad={(e) => handleImageLoad(e, index)}
src={
newsItem?.thumbnailUrl === ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className={`!object-cover !rounded-none ${
portraitMap[index]
? "!w-auto object-cover mx-auto"
: "!w-[90vw]"
} !h-[200px] md:!h-[400px]`}
/>
<CardFooter className="before:bg-white/10 border-gray-100 border-1 rounded-b-xl shadow-sm bottom-1 w-full">
<div className="text-black dark:text-white">
<div className="absolute inset-0 bg-black/20 flex items-center justify-center text-white text-lg font-semibold"></div>
</div>
<CardFooter className="mb-1 max-h-[50px] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute bottom-0 before:rounded-xl rounded-large w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
<div className="text-white py-1">
<Link
href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
>
@ -141,7 +166,7 @@ export default function HeaderNews() {
{convertDateFormat(newsItem.createdAt)} WIB
</p>
<p className="flex items-center gap-1 text-xs">
<EyeIcon className="text-black dark:text-white" />
<EyeIcon className="text-white" />
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p>
</div>
@ -152,13 +177,12 @@ export default function HeaderNews() {
</Swiper>
) : (
<Skeleton className="rounded-lg">
<div className="h-[200px] rounded-lg bg-default-300" />
<div className="w-full !h-[500px] rounded-lg bg-default-300" />
</Skeleton>
)}
</div>
<div className="w-[90%] lg:w-[25%] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[40vh] lg:h-[500px] mx-auto">
<p className="text-base font-bold text-center dark:text-white text-black">
{/* {t("berita")} */}
Hot Topik
</p>
<ScrollShadow hideScrollBar className="h-[29vh] lg:h-[400px] ">
@ -257,19 +281,28 @@ export default function HeaderNews() {
<Card
isFooterBlurred
radius="lg"
className="border-none h-[50vh] lg:h-[500px] shadow-none"
className="border-none h-[50vh] lg:h-[500px] shadow-none dark:bg-stone-800 bg-[#f0f0f0]"
>
<Image
alt="headernews"
width={480}
height={480}
src={
newsItem?.thumbnailUrl == ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="!w-[90vw] !h-[500px] !object-cover !rounded-none"
/>
<div className="relative w-full h-[50vh] lg:h-[500px]">
<Image
alt="headernews"
width={480}
height={480}
onLoad={(e) => handleImageLoad(e, index)}
src={
newsItem?.thumbnailUrl === ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className={`!object-cover !rounded-none ${
portraitMap[index]
? "!w-auto object-cover mx-auto"
: "!w-[90vw]"
} !h-[500px]`}
/>
<div className="absolute inset-0 bg-black/20 flex items-center justify-center text-white text-lg font-semibold"></div>
</div>
<CardFooter className="mb-1 max-h-[20vh] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
<div className="text-white">
@ -304,8 +337,6 @@ export default function HeaderNews() {
)}
</div>
<div className="w-[90%] lg:w-[25%] h-[50vh] lg:h-[500px] rounded-md text-white dark:text-black mx-auto lg:mx-0">
{/* <GPRKominfo /> */}
{selectedTab === "media" ? (
<div className="lg:h-[500px] p-2 dark:bg-stone-800 bg-[#f0f0f0] text-black dark:text-white rounded-lg">
<div className="text-sm flex flex-row gap-3 mx-2 mb-2">

10
components/page/detail-news.tsx
View File

@ -167,13 +167,13 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
) : (
data?.files?.length > 0 && (
<Image
classNames={{
wrapper: "!w-full !max-w-full",
img: "!w-full",
}}
// classNames={{
// wrapper: "!w-full !max-w-full",
// img: "!w-full",
// }}
alt="Main Image"
src={data?.files[imageNow]?.file_url}
className="object-cover w-[100%] rounded-md"
className="object-cover w-auto h-[360px] md:h-[480px] mx-auto rounded-md"
/>
)
)}