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

#style:

Browse Source 
Deskripsi:
- UI Voting bagian beranda dan status
## Noissue
This commit is contained in:
Bagasbanuna02
2024-07-12 16:02:28 +08:00
parent e744bb95fa
commit 7e21694324
50 changed files with 1222 additions and 812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/app_modules/vote/detail/draft/index.tsx
View File

@@ -13,6 +13,13 @@ import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_glo
import { Vote_funDeleteById } from "../../fun/delete/fun_delete_by_id";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import moment from "moment";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { useState } from "react";
import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
export default function Vote_DetailDraft({
dataVote,
@@ -21,7 +28,15 @@ export default function Vote_DetailDraft({
}) {
return (
<>
<Stack>
<Stack spacing={"xl"}>
{dataVote?.catatan ? (
<ComponentGlobal_BoxInformation
isReport
informasi={dataVote?.catatan}
/>
) : (
""
)}
<ComponentVote_DetailDataSebelumPublish data={dataVote} />
<ButtonAction voteId={dataVote.id} awalVote={dataVote.awalVote} />
</Stack>
@@ -38,7 +53,9 @@ function ButtonAction({
}) {
const router = useRouter();
const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
const [opened, { open, close }] = useDisclosure(false);
const [openModal1, setOpenModal1] = useState(false);
const [openModal2, setOpenModal2] = useState(false);
const [isLoading, setIsLoading] = useState(false);
async function onUpdate() {
const hariIni = new Date();
@@ -51,6 +68,7 @@ function ButtonAction({
if (res.status === 200) {
setTabsStatus("Review");
ComponentGlobal_NotifikasiBerhasil("Berhasil Ajukan Review", 2000);
setIsLoading(true);
router.back();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
@@ -75,9 +93,10 @@ function ButtonAction({
<SimpleGrid cols={2}>
<Button
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
onClick={() => {
onUpdate();
setOpenModal1(true);
}}
>
Ajukan Review
@@ -86,37 +105,71 @@ function ButtonAction({
radius={"xl"}
color="red"
onClick={() => {
open();
setOpenModal2(true);
}}
>
Hapus
</Button>
</SimpleGrid>
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
<Stack>
<Title order={6}>Yakin menghapus vote ini ?</Title>
<Group position="center">
<Button
radius={"xl"}
onClick={() => {
close();
}}
>
Kembali
</Button>
<Button
radius={"xl"}
onClick={() => {
onDelete();
}}
color="red"
>
Hapus
</Button>
</Group>
</Stack>
</Modal>
{/* MODAL AJUKAN */}
<UIGlobal_Modal
title={"Anda yakin akan melakukan pengajuan review kembali ?"}
opened={openModal1}
close={() => setOpenModal1(false)}
buttonKiri={
<Button
radius={"xl"}
onClick={() => {
setOpenModal1(false);
}}
>
Batal
</Button>
}
buttonKanan={
<Button
loaderPosition="center"
loading={isLoading ? true : false}
radius={"xl"}
onClick={() => {
onUpdate();
}}
color="yellow"
bg={MainColor.yellow}
>
Ajukan
</Button>
}
/>
{/* MODAL HAPUS */}
<UIGlobal_Modal
title={"Anda yakin menghapus voting ini ?"}
opened={openModal2}
close={() => setOpenModal2(false)}
buttonKiri={
<Button
radius={"xl"}
onClick={() => {
setOpenModal2(false);
}}
>
Batal
</Button>
}
buttonKanan={
<Button
radius={"xl"}
onClick={() => {
onDelete();
}}
color="red"
>
Hapus
</Button>
}
/>
</>
);
}

45
src/app_modules/vote/detail/draft/layout.tsx
View File

@@ -1,32 +1,57 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
import { ActionIcon, AppShell } from "@mantine/core";
import React, { useState } from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
import { IconEdit } from "@tabler/icons-react";
import { IconDotsVertical, IconEdit } from "@tabler/icons-react";
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
export default function LayoutVote_DetailDraft({
children,
voteId
voteId,
}: {
children: React.ReactNode;
voteId: string
voteId: string;
}) {
const [openDrawer, setOpenDrawer] = useState(false);
const listComponent = [
{
id: "1",
name: "Edit Voting",
icon: <IconEdit />,
path: RouterVote.edit + voteId,
},
];
return (
<>
<AppComponentGlobal_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<ComponentVote_HeaderTamplate
<UIGlobal_LayoutHeaderTamplate
title="Detail Draft"
icon={<IconEdit />}
route2={RouterVote.edit + voteId}
customButtonRight={
<ActionIcon
variant="transparent"
onClick={() => setOpenDrawer(true)}
>
<IconDotsVertical color="white" />
</ActionIcon>
}
/>
}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
<UIGlobal_Drawer
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={listComponent}
/>
</>
);
}

129
src/app_modules/vote/detail/main/index.tsx
View File

@@ -1,37 +1,36 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import {
Card,
Stack,
Center,
Title,
Avatar,
Badge,
Group,
Radio,
Grid,
Text,
Box,
Button,
Avatar,
Card,
Center,
Divider,
Grid,
Group,
Radio,
Stack,
Text,
Title,
} from "@mantine/core";
import moment from "moment";
import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
import _ from "lodash";
import { useState } from "react";
import ComponentVote_DaftarKontributorVoter from "../../component/detail/detail_daftar_kontributor";
import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
import { Vote_funCreateHasil } from "../../fun/create/create_hasil";
import { Vote_getOnebyId } from "../../fun/get/get_one_by_id";
import {
MODEL_VOTE_KONTRIBUTOR,
MODEL_VOTING,
MODEL_VOTING_DAFTAR_NAMA_VOTE,
} from "../../model/interface";
import { useState } from "react";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
import _ from "lodash";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { Vote_funCreatePilihanVotingById } from "../../fun/create/create_pilihan_voting";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { Vote_funCreateHasil } from "../../fun/create/create_hasil";
import { Vote_getOnebyId } from "../../fun/get/get_one_by_id";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
export default function Vote_MainDetail({
dataVote,
@@ -79,8 +78,16 @@ function TampilanDataVoting({
const [votingNameId, setVotingNameId] = useState("");
return (
<>
<Card shadow="lg" withBorder p={30}>
<Card.Section>
<Card
p={30}
style={{
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
}}
>
<Card.Section mb={"md"}>
<ComponentGlobal_AuthorNameOnHeader
authorName={dataVote?.Author.Profile.name}
imagesId={dataVote?.Author.Profile.imagesId}
@@ -90,31 +97,43 @@ function TampilanDataVoting({
<Card.Section px={"xs"} py={"sm"}>
<Stack spacing={"lg"}>
<Center>
<Title order={5}>{dataVote?.title}</Title>
<Title order={5} align="center">
{dataVote?.title}
</Title>
</Center>
<Text>{dataVote?.deskripsi}</Text>
<Stack spacing={0}>
<Center>
<Stack align="center" spacing={"xs"}>
<Text fz={10} fw={"bold"}>
Batas Voting
</Text>
</Center>
<Badge>
<Group>
<Text>
{dataVote?.awalVote.toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
<Text>-</Text>
<Text>
{dataVote?.akhirVote.toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
</Group>
</Badge>
<Badge
styles={{
root: {
backgroundColor: AccentColor.blue,
border: `1px solid ${AccentColor.skyblue}`,
color: "white",
width: "80%",
},
}}
>
<Group>
<Text>
{dataVote?.awalVote.toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
<Text>-</Text>
<Text>
{dataVote?.akhirVote.toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
</Group>
</Badge>
</Stack>
</Stack>
</Stack>
</Card.Section>
@@ -122,7 +141,13 @@ function TampilanDataVoting({
{/* Voting View */}
<Card.Section py={"xl"}>
{isKontributor ? (
<Stack align="center" spacing={0}>
<Stack
align="center"
spacing={0}
style={{
color: "white",
}}
>
<Text mb={"sm"} fw={"bold"} fz={"xs"}>
Pilihan anda:
</Text>
@@ -131,8 +156,18 @@ function TampilanDataVoting({
</Badge>
</Stack>
) : (
<Stack spacing={"xl"}>
<Stack
spacing={"xl"}
style={{
color: "white",
}}
>
<Radio.Group
styles={{
label: {
color: "white",
},
}}
value={votingNameId}
onChange={(val) => {
setVotingNameId(val);
@@ -146,7 +181,12 @@ function TampilanDataVoting({
<Stack px={"md"}>
{dataVote?.Voting_DaftarNamaVote.map((v) => (
<Box key={v.id}>
<Radio label={v.value} value={v.id} />
<Radio
color="yellow"
styles={{ label: { color: "white" } }}
label={v.value}
value={v.id}
/>
</Box>
))}
</Stack>
@@ -162,6 +202,9 @@ function TampilanDataVoting({
onClick={() =>
onVote(votingNameId, dataVote?.id as any, setData)
}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Vote
</Button>

8
src/app_modules/vote/detail/main/layout.tsx
View File

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
export default function LayoutVote_MainDetail({
children,
@@ -12,11 +14,11 @@ export default function LayoutVote_MainDetail({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentVote_HeaderTamplate title="Detail Voting" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Voting" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

8
src/app_modules/vote/detail/publish/layout.tsx
View File

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
export default function LayoutVote_DetailPublish({
children,
@@ -12,11 +14,11 @@ export default function LayoutVote_DetailPublish({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentVote_HeaderTamplate title="Detail Publish" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Publish" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

98
src/app_modules/vote/detail/reject/index.tsx
View File

@@ -20,6 +20,10 @@ import { Vote_funDeleteById } from "../../fun/delete/fun_delete_by_id";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { Vote_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_id";
import ComponentVote_NotedBox from "../../component/noted_box";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
import { useState } from "react";
import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
export default function Vote_DetailReject({
dataVote,
@@ -29,7 +33,10 @@ export default function Vote_DetailReject({
return (
<>
<Stack spacing={"xl"}>
<ComponentVote_NotedBox informasi={dataVote?.catatan} />
<ComponentGlobal_BoxInformation
isReport
informasi={dataVote?.catatan}
/>
<ComponentVote_DetailDataSebelumPublish data={dataVote as any} />
<ButtonAction voteId={dataVote.id} />
</Stack>
@@ -40,7 +47,10 @@ export default function Vote_DetailReject({
function ButtonAction({ voteId }: { voteId: string }) {
const router = useRouter();
const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
const [opened, { open, close }] = useDisclosure(false);
const [openModal1, setOpenModal1] = useState(false);
const [openModal2, setOpenModal2] = useState(false);
const [isLoading, setIsLoading] = useState(false);
async function onUpdate() {
await Vote_funEditStatusByStatusId(voteId, "3").then((res) => {
@@ -73,7 +83,7 @@ function ButtonAction({ voteId }: { voteId: string }) {
radius={"xl"}
color="orange"
onClick={() => {
onUpdate();
setOpenModal1(true);
}}
>
Edit Kembali
@@ -82,37 +92,69 @@ function ButtonAction({ voteId }: { voteId: string }) {
radius={"xl"}
color="red"
onClick={() => {
open();
setOpenModal2(true);
}}
>
Hapus
</Button>
</SimpleGrid>
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
<Stack>
<Title order={6}>Yakin menghapus vote ini ?</Title>
<Group position="center">
<Button
radius={"xl"}
onClick={() => {
close();
}}
>
Kembali
</Button>
<Button
radius={"xl"}
onClick={() => {
onDelete();
}}
color="red"
>
Hapus
</Button>
</Group>
</Stack>
</Modal>
<UIGlobal_Modal
title={"Anda akan mengedit kembali voting ini ?"}
opened={openModal1}
close={() => setOpenModal1(false)}
buttonKiri={
<Button
radius={"xl"}
onClick={() => {
setOpenModal1(false);
}}
>
Batal
</Button>
}
buttonKanan={
<Button
loaderPosition="center"
loading={isLoading ? true : false}
radius={"xl"}
onClick={() => {
onUpdate();
}}
color="orange"
>
Simpan
</Button>
}
/>
{/* MODAL HAPUS */}
<UIGlobal_Modal
title={"Anda yakin menghapus voting ini ?"}
opened={openModal2}
close={() => setOpenModal2(false)}
buttonKiri={
<Button
radius={"xl"}
onClick={() => {
setOpenModal2(false);
}}
>
Batal
</Button>
}
buttonKanan={
<Button
radius={"xl"}
onClick={() => {
onDelete();
}}
color="red"
>
Hapus
</Button>
}
/>
</>
);
}

11
src/app_modules/vote/detail/reject/layout.tsx
View File

@@ -1,9 +1,8 @@
"use client";
import { AppShell } from "@mantine/core";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
export default function LayoutVote_DetailReject({
children,
@@ -12,11 +11,11 @@ export default function LayoutVote_DetailReject({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentVote_HeaderTamplate title="Detail Reject" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Reject" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

51
src/app_modules/vote/detail/review/index.tsx
View File

@@ -1,28 +1,16 @@
"use client";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import {
Badge,
Button,
Card,
Center,
Grid,
Group,
Radio,
Stack,
Text,
Title,
} from "@mantine/core";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { Button, Stack } from "@mantine/core";
import { useAtom } from "jotai";
import moment from "moment";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { gs_vote_status } from "../../global_state";
import { useState } from "react";
import ComponentVote_DetailDataSebelumPublish from "../../component/detail/detail_data_sebelum_publish";
import { Vote_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_id";
import { gs_vote_status } from "../../global_state";
import { MODEL_VOTING } from "../../model/interface";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { useState } from "react";
import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
export default function Vote_DetailReview({
dataVote,
@@ -43,6 +31,7 @@ function ButtonAction({ voteId }: { voteId: string }) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
const [openModal, setOpenModal] = useState(false);
async function onUpdate() {
await Vote_funEditStatusByStatusId(voteId, "3").then((res) => {
@@ -59,16 +48,36 @@ function ButtonAction({ voteId }: { voteId: string }) {
return (
<>
<Button
loaderPosition="center"
loading={isLoading ? true : false}
radius={"xl"}
color="orange"
onClick={() => {8
onUpdate();
onClick={() => {
setOpenModal(true);
}}
>
Batalkan Review
</Button>
<UIGlobal_Modal
title={"Anda yakin akan membatalkan review?"}
opened={openModal}
close={() => setOpenModal(false)}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
buttonKanan={
<Button
loaderPosition="center"
loading={isLoading ? true : false}
radius={"xl"}
color="green"
onClick={() => onUpdate()}
>
Simpan
</Button>
}
/>
</>
);
}

11
src/app_modules/vote/detail/review/layout.tsx
View File

@@ -1,9 +1,8 @@
"use client";
import { AppShell } from "@mantine/core";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
export default function LayoutVote_DetailReview({
children,
@@ -12,11 +11,11 @@ export default function LayoutVote_DetailReview({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentVote_HeaderTamplate title="Detail Review" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Review" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}