fix event button and list peserta

This commit is contained in:
2025-02-27 16:58:17 +08:00
parent 6414e766bb
commit 7651f786f9
19 changed files with 568 additions and 561 deletions

View File

@@ -1,25 +1,10 @@
import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
import {
ComponentGlobal_AvatarAndUsername,
ComponentGlobal_CardStyles,
ComponentGlobal_LoaderAvatar,
} from "@/app_modules/_global/component";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import { funGlobal_CheckProfile } from "@/app_modules/_global/fun/get";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import {
Grid,
ActionIcon,
Avatar,
Stack,
Group,
Badge,
Text,
} from "@mantine/core";
import { Badge, Group, Stack, Text } from "@mantine/core";
import { Prisma } from "@prisma/client";
import moment from "moment";
import { useRouter } from "next/navigation";
import { useState } from "react";
type IFontSize = "xs" | "sm" | "md" | "lg" | "xl";
@@ -40,20 +25,6 @@ function ComponentEvent_AvatarAndUsername({
tanggalSelesai?: Date;
isPresent?: boolean;
}) {
const router = useRouter();
const [visible, setVisible] = useState(false);
async function onCheckProfile() {
const res = await funGlobal_CheckProfile({ profileId: profile.id as any });
if (res !== null) {
setVisible(true);
router.push(RouterProfile.katalog({ id: profile.id as any }));
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
}
const tglMulai = moment(tanggalMulai).diff(moment(), "minutes") < 0;
return (

View File

@@ -1,91 +1,150 @@
"use client";
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import { Grid, Stack, Text, Title } from "@mantine/core";
import { MODEL_EVENT } from "../../_lib/interface";
import { MainColor } from "@/app_modules/_global/color";
import { Event_ComponentSkeletonDetailData } from "../skeleton/comp_skeleton_detail_data";
import {
ComponentGlobal_BoxInformation,
ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";
import { Grid, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import { MODEL_EVENT } from "../../_lib/interface";
import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail";
import Event_ComponentBoxDaftarPeserta from "./comp_box_daftar_peserta";
import Event_ComponentBoxDaftarSponsor from "./comp_box_sponsor";
export default function ComponentEvent_DetailData({
data,
isDaftarPeserta,
isReport,
data
}: {
data: MODEL_EVENT;
isDaftarPeserta?: boolean;
isReport?: boolean;
data: MODEL_EVENT | null
}) {
return (
<>
<ComponentGlobal_CardStyles marginBottom={"16px"}>
<Stack px={"sm"} spacing={"xl"}>
<Title color={MainColor.white} lineClamp={2} align="center" w={"100%"} order={4}>
{data ? data?.title : null}
</Title>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>Lokasi</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>{data ? data?.lokasi : null}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>Tipe Acara</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>{data ? data.EventMaster_TipeAcara?.name : null}</Text>
</Grid.Col>
</Grid>
<Stack spacing={"xs"}>
<Text c={MainColor.white} fw={"bold"}>Tanggal & Waktu</Text>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>Mulai</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{" "}
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "full",
}).format(data?.tanggal)}
,{" "}
<Text span inherit c={MainColor.white}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "short",
}).format(data?.tanggal)}
</Text>
</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>Selesai</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{" "}
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "full",
}).format(data?.tanggalSelesai)}
,{" "}
<Text span inherit c={MainColor.white}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "short",
}).format(data?.tanggalSelesai)}
</Text>
</Text>
</Grid.Col>
</Grid>
</Stack>
{!data ? (
<Event_ComponentSkeletonDetail />
) : (
<Stack>
{isReport && (
<ComponentGlobal_BoxInformation isReport informasi={data?.catatan} />
)}
<Stack spacing={2}>
<Text c={MainColor.white} fw={"bold"}>Deskripsi</Text>
<Text c={MainColor.white}>{data ? data?.deskripsi : null}</Text>
</Stack>
<ComponentGlobal_CardStyles marginBottom={"16px"}>
<Stack>
<Stack px={"sm"} spacing={"xl"}>
<Title
color={MainColor.white}
lineClamp={2}
align="center"
w={"100%"}
order={4}
>
{data ? data?.title : null}
</Title>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Lokasi
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{data ? data?.lokasi : null}
</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Tipe Acara
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{data ? data.EventMaster_TipeAcara?.name : null}
</Text>
</Grid.Col>
</Grid>
<Stack spacing={"xs"}>
<Text c={MainColor.white} fw={"bold"}>
Tanggal & Waktu
</Text>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Mulai
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{" "}
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "full",
}).format(new Date(data?.tanggal))}
,{" "}
<Text span inherit c={MainColor.white}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "short",
}).format(new Date(data?.tanggal))}
</Text>
</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Selesai
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{" "}
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "full",
}).format(new Date(data?.tanggalSelesai))}
,{" "}
<Text span inherit c={MainColor.white}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "short",
}).format(new Date(data?.tanggalSelesai))}
</Text>
</Text>
</Grid.Col>
</Grid>
</Stack>
<Stack spacing={2}>
<Text c={MainColor.white} fw={"bold"}>
Deskripsi
</Text>
<Text c={MainColor.white}>
{data ? data?.deskripsi : null}
</Text>
</Stack>
</Stack>
{isDaftarPeserta && (
<SimpleGrid
cols={2}
breakpoints={[
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
<Event_ComponentBoxDaftarPeserta />
<Event_ComponentBoxDaftarSponsor />
</SimpleGrid>
)}
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</ComponentGlobal_CardStyles >
)}
</>
);
}

View File

@@ -6,13 +6,7 @@ import {
ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";
import { clientLogger } from "@/util/clientLogger";
import {
Grid,
SimpleGrid,
Stack,
Text,
Title
} from "@mantine/core";
import { Grid, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import moment from "moment";
import "moment/locale/id";

View File

@@ -8,33 +8,31 @@ import {
Grid,
Group,
Loader,
Skeleton,
Stack,
Text,
Title,
Title
} from "@mantine/core";
import _ from "lodash";
import {
ComponentGlobal_AvatarAndUsername,
ComponentGlobal_CardStyles,
ComponentGlobal_LoaderAvatar,
} from "@/app_modules/_global/component";
import { useRouter } from "next/navigation";
import { MODEL_EVENT_PESERTA } from "../../_lib/interface";
import { Prisma } from "@prisma/client";
import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import { funGlobal_CheckProfile } from "@/app_modules/_global/fun/get";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { useState } from "react";
import moment from "moment";
import { useShallowEffect } from "@mantine/hooks";
import { API_RouteEvent } from "@/lib/api_user_router/route_api_event";
import Event_ComponentSkeletonListPeserta from "../skeleton/comp_skeleton_list_peserta";
import { ScrollOnly } from "next-scroll-loader";
import { event_newGetListPesertaById } from "../../fun";
import { MainColor } from "@/app_modules/_global/color";
import {
ComponentGlobal_CardStyles,
ComponentGlobal_LoaderAvatar
} from "@/app_modules/_global/component";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { apiGetOneProfileById } from "@/app_modules/katalog/profile/lib/api_fetch_profile";
import { API_RouteEvent } from "@/lib/api_user_router/route_api_event";
import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
import { useShallowEffect } from "@mantine/hooks";
import { Prisma } from "@prisma/client";
import moment from "moment";
import { ScrollOnly } from "next-scroll-loader";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_EVENT_PESERTA } from "../../_lib/interface";
import { event_newGetListPesertaById } from "../../fun";
import Event_ComponentSkeletonListPeserta from "../skeleton/comp_skeleton_list_peserta";
export default function ComponentEvent_ListPeserta({
total,
@@ -75,7 +73,9 @@ export default function ComponentEvent_ListPeserta({
<ComponentGlobal_CardStyles>
<Stack spacing={"md"} px={"sm"}>
<Center>
<Title color={MainColor.white} order={5}>Daftar Peserta ({total})</Title>
<Title color={MainColor.white} order={5}>
Daftar Peserta ({total})
</Title>
</Center>
{_.isEmpty(data) ? (
@@ -163,13 +163,17 @@ function ComponentEvent_AvatarAndUsername({
const [visible, setVisible] = useState(false);
async function onCheckProfile() {
const res = await funGlobal_CheckProfile({ profileId: profile.id as any });
try {
const res = await apiGetOneProfileById({ id: profile.id as any });
if (res !== null) {
setVisible(true);
router.push(RouterProfile.katalog({ id: profile.id as any }));
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
if (res && res.success) {
setVisible(true);
router.push(RouterProfile.katalog({ id: profile.id as any }));
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
} catch (error) {
console.log("Error >>r", error);
}
}

View File

@@ -30,7 +30,7 @@ export function Event_ComponentSkeletonDetail() {
<CustomSkeleton h={20} w={"100%"} />
<CustomSkeleton h={20} w={"100%"} />
</Stack>
<SimpleGrid
{/* <SimpleGrid
cols={2}
breakpoints={[
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
@@ -39,7 +39,7 @@ export function Event_ComponentSkeletonDetail() {
>
<CustomSkeleton h={100} w={"100%"} />
<CustomSkeleton h={100} w={"100%"} />
</SimpleGrid>
</SimpleGrid> */}
</Stack>
</ComponentGlobal_CardStyles>
</>

View File

@@ -24,10 +24,10 @@ export function Event_ComponentSkeletonDetailData() {
</Grid>
))}
<Stack spacing={"xs"}>
{/* <Stack spacing={"xs"}>
<Skeleton radius={"xl"} h={20} w={200} />
<Skeleton radius={"xl"} h={20} />
</Stack>
</Stack> */}
</Stack>
</ComponentGlobal_CardStyles>
</>