wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix responsive admin voting

Browse Source 
deskripsi:
- fix detail voting
This commit is contained in:
Bagasbanuna02
2025-04-17 16:45:45 +08:00
parent 1d902a3f2d
commit 35b8281741
8 changed files with 96 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app_modules/admin/_components_v3/comp_detail_data.tsx
View File

@@ -15,7 +15,7 @@ export function Admin_V3_ComponentDetail({
<Grid.Col span={"auto"}>
<Text>
{item.value}
{item.value}
</Text>
</Grid.Col>
</Grid>

1
src/app_modules/admin/vote/child/riwayat/index.tsx
View File

@@ -210,7 +210,6 @@ function TableStatus() {
verticalSpacing={"md"}
horizontalSpacing={"md"}
p={"md"}
w={1500}
>
<thead>
<tr>

49
src/app_modules/admin/vote/component/comp_detail.tsx
View File

@@ -1,8 +1,9 @@
"use client";
import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
import { Badge, Grid, Stack, Text, Title } from "@mantine/core";
import { Badge, ScrollArea, Stack, Text } from "@mantine/core";
import moment from "moment";
import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
interface Props {
data: MODEL_VOTING;
@@ -35,7 +36,11 @@ export function AdminVoting_ComponentDetail({ data }: Props) {
{
title: "Status",
value: (
<Badge variant="light">{data.Voting_Status.name === "Publish" && cekHari < 0 ? "Riwayat" : data.Voting_Status.name}</Badge>
<Badge variant="light">
{data.Voting_Status.name === "Publish" && cekHari < 0
? "Riwayat"
: data.Voting_Status.name}
</Badge>
),
},
];
@@ -44,34 +49,20 @@ export function AdminVoting_ComponentDetail({ data }: Props) {
<>
<Stack>
{listData.map((item, index) => (
<Grid key={index}>
<Grid.Col span={3}>
<Text>{item.title}</Text>
</Grid.Col>
<Grid.Col span={1}>
<Text>:</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{item.value}</Text>
</Grid.Col>
</Grid>
<Admin_V3_ComponentDetail item={item} key={index} />
))}
<Grid>
<Grid.Col span={3}>
<Text>Daftar Pilihan</Text>
</Grid.Col>
<Grid.Col span={1}>
<Text>:</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Stack>
{data.Voting_DaftarNamaVote.map((e, i) => (
<Text key={i}>- {e.value}</Text>
))}
</Stack>
</Grid.Col>
</Grid>
<Admin_V3_ComponentDetail
item={{
label: <Text>Daftar Pilihan</Text>,
value: (
<Stack>
{data.Voting_DaftarNamaVote.map((e, i) => (
<Text key={i}>- {e.value}</Text>
))}
</Stack>
),
}}
/>
</Stack>
</>
);

18
src/app_modules/admin/vote/component/comp_detail_publish.tsx
View File

@@ -1,22 +1,26 @@
"use client";
import { SimpleGrid, Title } from "@mantine/core";
import { ScrollArea, SimpleGrid, Title } from "@mantine/core";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { AdminVoting_ComponentDetail } from "./comp_detail";
import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
import { AdminVoting_ComponentKontributorList } from "./comp_kontributor";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
interface Props {
data: MODEL_VOTING;
}
export function AdminVoting_ComponentDetailPublish({ data }: Props) {
return (
<SimpleGrid cols={2}>
<Admin_ComponentBoxStyle >
<AdminVoting_ComponentDetail data={data} />
<Admin_V3_ComponentBreakpoint>
<Admin_ComponentBoxStyle style={{ maxHeight: 700 }}>
<ScrollArea h={650}>
<AdminVoting_ComponentDetail data={data} />
</ScrollArea>
</Admin_ComponentBoxStyle>
<AdminVoting_ComponentKontributorList dataHasil={data.Voting_DaftarNamaVote}/>
</SimpleGrid>
<AdminVoting_ComponentKontributorList
dataHasil={data.Voting_DaftarNamaVote}
/>
</Admin_V3_ComponentBreakpoint>
);
}

32
src/app_modules/admin/vote/component/comp_detail_reject.tsx
View File

@@ -1,11 +1,14 @@
"use client";
import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
import { Grid, SimpleGrid, Text } from "@mantine/core";
import { Grid, SimpleGrid, Stack, Text } from "@mantine/core";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { AdminVoting_ComponentDetail } from "./comp_detail";
import { AdminVoting_ComponentDetailRejectButton } from "./button/comp_button_detail_reject";
import { useState } from "react";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { MainColor } from "@/app_modules/_global/color";
import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
interface Props {
data: MODEL_VOTING;
@@ -14,10 +17,12 @@ export function AdminVoting_ComponentDetailReject({ data }: Props) {
const [newData, setNewData] = useState<MODEL_VOTING>(data);
return (
<SimpleGrid cols={2}>
<Admin_V3_ComponentBreakpoint>
<Admin_ComponentBoxStyle>
<AdminVoting_ComponentDetail data={newData} />
<ReportNote catatan={newData.catatan} />
<Stack>
<AdminVoting_ComponentDetail data={newData} />
<ReportNote catatan={newData.catatan} />
</Stack>
<AdminVoting_ComponentDetailRejectButton
data={newData}
onUpdateData={(val) => {
@@ -28,24 +33,19 @@ export function AdminVoting_ComponentDetailReject({ data }: Props) {
}}
/>
</Admin_ComponentBoxStyle>
</SimpleGrid>
</Admin_V3_ComponentBreakpoint>
);
}
function ReportNote({ catatan }: { catatan: string }) {
return (
<>
<Grid mt={"md"}>
<Grid.Col span={3}>
<Text>Catatan report</Text>
</Grid.Col>
<Grid.Col span={1}>
<Text>:</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{catatan}</Text>
</Grid.Col>
</Grid>
<Admin_V3_ComponentDetail
item={{
label: <Text>Catatan report</Text>,
value: <Text>{catatan}</Text>,
}}
/>
</>
);
}

10
src/app_modules/admin/vote/component/comp_detail_review.tsx
View File

@@ -1,21 +1,21 @@
"use client";
import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
import { Button, Group, SimpleGrid } from "@mantine/core";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { AdminVoting_ComponentDetail } from "./comp_detail";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { AdminVoting_ComponentDetailReviewButton } from "./button/comp_button_detail_review";
import { AdminVoting_ComponentDetail } from "./comp_detail";
interface Props {
data: MODEL_VOTING;
}
export function AdminVoting_ComponentDetailReview({ data }: Props) {
return (
<SimpleGrid cols={2}>
<Admin_V3_ComponentBreakpoint>
<Admin_ComponentBoxStyle>
<AdminVoting_ComponentDetail data={data} />
<AdminVoting_ComponentDetailReviewButton data={data}/>
<AdminVoting_ComponentDetailReviewButton data={data} />
</Admin_ComponentBoxStyle>
</SimpleGrid>
</Admin_V3_ComponentBreakpoint>
);
}

59
src/app_modules/admin/vote/component/comp_kontributor.tsx
View File

@@ -13,7 +13,7 @@ import {
ScrollArea,
Stack,
Text,
Title
Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
@@ -21,6 +21,8 @@ import { useParams } from "next/navigation";
import { useState } from "react";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { apiGetAdminKontibutorVotingById } from "../lib/api_fetch_admin_voting";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { MainColor } from "@/app_modules/_global/color";
interface Props {
dataHasil: MODEL_VOTING_DAFTAR_NAMA_VOTE[];
@@ -55,20 +57,23 @@ export function AdminVoting_ComponentKontributorList({ dataHasil }: Props) {
Hasil Kontributor
</Title>
<Grid justify="center">
<Admin_V3_ComponentBreakpoint
cols={dataHasil.length}
sm={2}
md={2}
lg={2}
>
{dataHasil?.map((e: MODEL_VOTING_DAFTAR_NAMA_VOTE, i) => (
<Grid.Col span={3} key={i}>
<Stack p={"md"} align="center">
<Paper withBorder p={"xl"}>
<Text fz={30}>{e.jumlah}</Text>
</Paper>
<Text lineClamp={2} fz={"sm"}>
{e.value}
</Text>
</Stack>
</Grid.Col>
<Stack key={i} p={"md"} align="center">
<Paper withBorder p={"xl"}>
<Text fz={30}>{e.jumlah}</Text>
</Paper>
<Text lineClamp={2} fz={"sm"}>
{e.value}
</Text>
</Stack>
))}
</Grid>
</Admin_V3_ComponentBreakpoint>
{!data ? (
<CustomSkeleton height={100} />
@@ -79,19 +84,31 @@ export function AdminVoting_ComponentKontributorList({ dataHasil }: Props) {
</Text>
</Center>
) : (
<Box h={450} px={"sm"}>
<ScrollArea h={430} w={"100%"} p={"sm"}>
<Box h={450}>
<ScrollArea h={430} w={"100%"}>
<Stack p={"sm"}>
{data?.map((e, i) => (
<Stack spacing={"xs"} key={i}>
<Stack
spacing={"xs"}
key={i}
bg={MainColor.soft_darkblue}
p={"sm"}
>
<Grid>
<Grid.Col span={5}>
<Stack justify="center" h={"100%"}>
<Text truncate fz={"sm"} fw={"bold"}>
{e ? e?.Author?.username : "Nama kontributor"}
</Text>
<Stack justify="center" h={"100%"} align="center">
<Box w={100}>
<Text
truncate
fz={"sm"}
fw={"bold"}
>
{e ? e?.Author?.username : "Nama kontributor"}
</Text>
</Box>
</Stack>
</Grid.Col>
<Grid.Col span={5}>
<Center>
<Badge>
@@ -109,7 +126,7 @@ export function AdminVoting_ComponentKontributorList({ dataHasil }: Props) {
</Center>
</Grid.Col>
</Grid>
<Divider />
{/* <Divider /> */}
</Stack>
))}
</Stack>

10
src/app_modules/admin/vote/detail/detail_voting.tsx
View File

@@ -12,10 +12,11 @@ import { AdminVoting_ComponentDetailPublish } from "../component/comp_detail_pub
import { apiGetOneVotingById } from "../lib/api_fetch_admin_voting";
import { AdminVoting_ComponentDetailReview } from "../component/comp_detail_review";
import { AdminVoting_ComponentDetailReject } from "../component/comp_detail_reject";
import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
export function AdminVote_DetailVoting() {
const param = useParams<{ id: string }>();
const [data, setData] = useState<MODEL_VOTING | null>();
const [data, setData] = useState<MODEL_VOTING | null>(null);
useShallowEffect(() => {
handleLoadData();
@@ -43,10 +44,9 @@ export function AdminVote_DetailVoting() {
<ComponentAdminGlobal_HeaderTamplate name="Detail voting" />
<AdminGlobal_ComponentBackButton />
{data === undefined && (
<SimpleGrid cols={2}>
<CustomSkeleton height={500} />
</SimpleGrid>
{data === undefined || !data && (
<Admin_V3_ComponentSkeletonBreakpoint skeletonRequest={2}/>
)}
{data && data.Voting_Status.name === "Publish" ? (