wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #129 from bipproduction/lukman/19-agustus-2024

Browse Source 
feat : update history
This commit is contained in:
Amalia
2024-08-19 17:44:27 +08:00
committed by GitHub
parent 1556b7fd7c d1f9561d9b
commit f090af8f7d
14 changed files with 385 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/module/calender/index.ts
View File

@@ -1,5 +1,6 @@
import CreateCalenderDivisionCaleder from "./ui/create_calender_division_caleder";
import DetailEventDivision from "./ui/detail_event_division";
import HistoryDivisionCalender from "./ui/history_division_calender";
import NavbarCreateDivisionCalender from "./ui/navbar_create_division_calender";
import NavbarDivisionCalender from "./ui/navbar_division_calender";
import UpdateDivisionCalender from "./ui/update_division_calender";
@@ -8,4 +9,5 @@ export { NavbarDivisionCalender }
export { NavbarCreateDivisionCalender }
export { CreateCalenderDivisionCaleder }
export { DetailEventDivision }
export { UpdateDivisionCalender }
export { UpdateDivisionCalender }
export { HistoryDivisionCalender }

4
src/module/calender/lib/api_calender.ts
View File

@@ -4,6 +4,10 @@ export const funGetAllCalender = async (path?: string) => {
const response = await fetch(`/api/calender${(path) ? path : ''}`, { next: { tags: ['calender'] } });
return await response.json().catch(() => null);
}
export const funGetHostory = async (path?: string) => {
const response = await fetch(`/api/calender/history${(path) ? path : ''}`, { next: { tags: ['hostory'] } });
return await response.json().catch(() => null);
}
export const funGetOneCalender = async (path: string) => {
const response = await fetch(`/api/calender/${path}`);

12
src/module/calender/lib/type_calender.ts
View File

@@ -11,6 +11,16 @@ export interface IDataCalender {
user_name: string
}
export interface IHistoryCalender {
dateStart: string;
data: {
id: number;
title: string;
timeEnd: string;
timeStart: string;
}[];
}[];
export interface IDataDetailByIdCalender {
id: string
title: string
@@ -61,7 +71,7 @@ export interface IEditCalender {
linkMeet?: string
repeatEventTyper?: string
desc?: string,
member?: IEditMemberCalender[]
member?: IFormMemberCalender[]
}
export interface IEditMemberCalender {

2
src/module/calender/ui/detail_event_division.tsx
View File

@@ -62,7 +62,7 @@ export default function DetailEventDivision() {
</Group>
<Group mb={10} gap={30}>
<LuClock size={25} color={WARNA.biruTua} />
<Text>{moment.utc(isDataCalender?.timeStart).format('HH:mm')} | {moment.utc(isDataCalender?.timeEnd).format('HH:mm')} </Text>
<Text>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text>
</Group>
<Group mb={10} gap={30}>
<BsCalendarDate size={25} color={WARNA.biruTua} />

123
src/module/calender/ui/history_division_calender.tsx Normal file
View File

@@ -0,0 +1,123 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Box, Center, Flex, Grid, Group, Text, TextInput } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { IDataCalender, IHistoryCalender } from '../lib/type_calender';
import { funGetAllCalender, funGetHostory } from '../lib/api_calender';
import { useShallowEffect } from '@mantine/hooks';
import moment from 'moment';
import "moment/locale/id";
const history = [
{
dateStart: "21",
data: [
{
id: 1,
title: "Pembahasan Mengenai Darmasaba",
timeEnd: "10:00",
timeStart: "10.00",
status: "Selesai",
},
{
id: 2,
title: "Pembahasan Mengenai Darmasaba",
timeEnd: "10:00",
timeStart: "13.00 - 14.00",
},
]
},
{
dateStart: "21",
data: [
{
id: 1,
title: "Pembahasan Mengenai Darmasaba",
timeEnd: "10:00",
timeStart: "10.00",
},
{
id: 1,
title: "Pembahasan Mengenai Darmasaba",
timeEnd: "10:00",
timeStart: "13.00",
},
{
id: 1,
title: "Pembahasan Mengenai Darmasaba",
timeEnd: "10:00",
timeStart: "15.00",
},
]
},
]
export default function HistoryDivisionCalender() {
const [isData, setData] = useState<IHistoryCalender[]>([])
const router = useRouter()
const param = useParams<{ id: string, detail: string }>()
const getData = async () => {
try {
const response = await funGetHostory('?division=' + param.id)
setData(response.data)
} catch (error) {
console.log(error)
}
}
useShallowEffect(() => {
getData()
}, [])
return (
<Box>
<LayoutNavbarNew back="/calender" title="History kalender" menu />
<pre>{JSON.stringify(isData, null, 1)}</pre>
<Box p={20}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
<Box mt={30}>
<Box bg={"#DBE9D8"} style={{
borderRadius: 10
}}>
{isData.map((v, i) => {
return (
<Grid key={i}>
<Grid.Col span={2}>
<Flex justify={"center"} direction={'column'}>
<Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text>
<Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text>
</Flex>
</Grid.Col>
<Grid.Col span={'auto'}>
{v.data.map((d, x) => {
return (
<Box mb={10} key={x} >
<Text fw={"bold"}>{d.title}</Text>
<Text>{d.timeStart} | {d.timeEnd}</Text>
</Box>
)
})}
</Grid.Col>
</Grid>
)
})}
</Box>
</Box>
</Box>
</Box>
);
}

53
src/module/calender/ui/update_division_calender.tsx
View File

@@ -14,6 +14,7 @@ import moment from 'moment';
import "moment/locale/id";
import { useHookstate } from '@hookstate/core';
import { globalCalender } from '../lib/val_calender';
import UpdateListUsers from './update_list_users';
export default function UpdateDivisionCalender() {
const [isModal, setModal] = useState(false)
@@ -21,15 +22,13 @@ export default function UpdateDivisionCalender() {
const memberUser = useHookstate(globalCalender)
const memberValue = memberUser.get() as IFormMemberCalender[]
const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
const [isDataAnggota, setDataAnggota] = useState<IEditMemberCalender[]>([])
const [isLengthMember, setLengthMember] = useState()
const [openMember, setOpenMember] = useState(false)
const fetchGetOne = async () => {
try {
const response = await funGetOneCalender(param.detail)
setDataCalender(response.data.calender)
setDataAnggota(response.data.member)
setLengthMember(response.data.member.length)
memberUser.set(response.data.member)
} catch (error) {
console.log(error)
}
@@ -39,12 +38,6 @@ export default function UpdateDivisionCalender() {
fetchGetOne()
}, [])
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
}
setModal(false)
}
const [value, setValue] = useState<Date | null>(null);
const router = useRouter()
@@ -59,12 +52,13 @@ export default function UpdateDivisionCalender() {
linkMeet: isDataCalender?.linkMeet,
repeatEventTyper: isDataCalender?.repeatEventTyper,
desc: isDataCalender?.desc,
member: isDataAnggota
member: memberValue
})
if (response.success) {
setModal(false)
router.push(`/division/${param.id}/calender`)
toast.success(response.message)
} else {
toast.error(response.message)
}
@@ -77,22 +71,10 @@ export default function UpdateDivisionCalender() {
} finally {
setModal(false)
}
if (val) {
console.log(
{
title: isDataCalender?.title,
dateStart: isDataCalender?.dateStart,
timeStart: isDataCalender?.timeStart,
timeEnd: isDataCalender?.timeEnd,
linkMeet: isDataCalender?.linkMeet,
repeatEventTyper: isDataCalender?.repeatEventTyper,
desc: isDataCalender?.desc,
member: isDataAnggota
}
)
}
}
if (openMember) return <UpdateListUsers onClose={() => setOpenMember(false)} />
return (
<Box>
<LayoutNavbarNew back={`/division/${param.id}/calender`} title="Edit kalender" menu />
@@ -108,7 +90,7 @@ export default function UpdateDivisionCalender() {
size="md"
placeholder="Event Nama"
label="Event Nama"
value={isDataCalender?.title}
defaultValue={isDataCalender?.title}
onChange={
(event) => {
setDataCalender({
@@ -153,7 +135,8 @@ export default function UpdateDivisionCalender() {
}}
size="md"
label="Waktu Awal"
value={isDataCalender?.timeStart}
// value={isDataCalender?.timeStart}
defaultValue={isDataCalender?.timeStart}
onChange={
(event) => {
setDataCalender({
@@ -172,7 +155,8 @@ export default function UpdateDivisionCalender() {
}}
size="md"
label="Waktu Akhir"
value={isDataCalender?.timeEnd}
// value={isDataCalender?.timeEnd}
defaultValue={isDataCalender?.timeEnd}
onChange={
(event) => {
setDataCalender({
@@ -193,7 +177,8 @@ export default function UpdateDivisionCalender() {
size="md"
placeholder="Link Meet"
label="Link Meet"
value={isDataCalender?.linkMeet}
// value={isDataCalender?.linkMeet}
defaultValue={isDataCalender?.linkMeet}
onChange={
(event) => {
setDataCalender({
@@ -221,6 +206,7 @@ export default function UpdateDivisionCalender() {
{ value: '5', label: 'Tahunan' },
]}
value={isDataCalender?.repeatEventTyper}
defaultValue={isDataCalender?.repeatEventTyper}
onChange={
(val: any) => {
setDataCalender({
@@ -230,7 +216,7 @@ export default function UpdateDivisionCalender() {
}
}
/>
<Box mt={5} onClick={() => router.push('/calender/update?page=update-user-calender')}>
<Box mt={5} onClick={() => setOpenMember(true)}>
<Group
justify="space-between"
p={10}
@@ -250,7 +236,8 @@ export default function UpdateDivisionCalender() {
},
}}
size="md" placeholder='Deskripsi' label="Deskripsi"
value={isDataCalender?.desc}
// value={isDataCalender?.desc}
defaultValue={isDataCalender?.desc}
onChange={
(event) => {
setDataCalender({
@@ -263,7 +250,7 @@ export default function UpdateDivisionCalender() {
<Box pt={30}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {isLengthMember} Anggota</Text>
<Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
@@ -275,7 +262,7 @@ export default function UpdateDivisionCalender() {
px={20}
py={10}
>
{isDataAnggota.map((v: any, i: any) => {
{memberUser.get().map((v: any, i: any) => {
return (
<Flex
justify={"space-between"}

177
src/module/calender/ui/update_list_users.tsx
View File

@@ -1,9 +1,15 @@
"use client"
import { WARNA } from '@/module/_global';
import { Avatar, Box, Button, Center, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { useRouter } from 'next/navigation';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Center, Divider, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { globalCalender } from '../lib/val_calender';
import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks';
import { FaCheck } from 'react-icons/fa6';
const dataUser = [
{
@@ -38,77 +44,132 @@ const dataUser = [
},
];
export default function UpdateListUsers() {
export default function UpdateListUsers({ onClose }: { onClose: (val: any) => void }) {
const router = useRouter()
const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
const param = useParams<{ id: string }>()
const [selectedFiles, setSelectedFiles] = useState<any>([])
const [isData, setData] = useState<IDataMemberDivision[]>([])
const member = useHookstate(globalCalender)
const [selectAll, setSelectAll] = useState(false)
async function getData() {
try {
const response = await funGetDivisionById(param.id)
if (response.success) {
setData(response.data.member)
if (member.length > 0) {
setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
}
} else {
toast.error(response.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti");
}
}
useShallowEffect(() => {
getData()
}, []);
const handleFileClick = (index: number) => {
setSelectedFiles((prevSelectedFiles) => ({
...prevSelectedFiles,
[index]: !prevSelectedFiles[index],
}));
if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
} else {
setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name }])
}
};
const handleSelectAll = () => {
setSelectAll(!selectAll);
if (!selectAll) {
for (let index = 0; index < isData.length; index++) {
if (!selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
const newArr = {
idUser: isData[index].idUser, name: isData[index].name
}
setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr])
}
}
} else {
setSelectedFiles([]);
}
};
function onSubmit() {
if (selectedFiles.length == 0) {
return toast.error("Error! silahkan pilih anggota")
}
member.set(selectedFiles)
onClose(true)
}
return (
<Box>
<Stack>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
<Box pt={10}>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{dataUser.map((v, index) => {
const isSelected = selectedFiles[index];
return (
<Box key={index} mb={10}>
<Box
bg={isSelected ? WARNA.bgHijauMuda : "white"}
style={{
border: `1px solid ${WARNA.biruTua}`,
borderRadius: 20,
}}
py={10}
onClick={() => handleFileClick(index)}
>
<Center>
<Avatar src={v.img} alt="it's me" size="xl" />
</Center>
<Text mt={20} ta="center">
{v.name}
</Text>
</Box>
</Box>
);
})}
</SimpleGrid>
</Box>
</Stack>
<Box mt="xl">
<LayoutNavbarNew
// back=""
title="Pilih Anggota"
menu
/>
<Box p={20}>
<Group justify="space-between" mt={20} onClick={handleSelectAll}>
<Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Anggota
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
<Box mt={15}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Avatar src={"v.image"} alt="it's me" size="lg" />
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{v.name}
</Text>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})}
</Box>
<Box mt={"xl"}>
<Button
color="white"
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => router.push("/calender/update")}
onClick={() => {onSubmit()}}
>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

16
src/module/calender/ui/update_user_division_calender.tsx
View File

@@ -1,16 +0,0 @@
import { LayoutNavbarNew } from '@/module/_global';
import { Box } from '@mantine/core';
import React from 'react';
import UpdateListUsers from './update_list_users';
export default function UpdateUserDivisionCalender() {
return (
<Box>
<LayoutNavbarNew back="/calender/update" title="Tambah Anggota" menu />
<Box p={20}>
<UpdateListUsers />
</Box>
</Box>
);
}

101
src/module/division_new/_division_fitur/calender/components/history_division_calender.tsx
View File

@@ -1,101 +0,0 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Box, Center, Flex, Grid, Group, Text, TextInput } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2';
const history = [
{
id: 1,
tangal: 1,
hari: "Sab",
data: [
{
id: 1,
judul: "Pembahasan Mengenai Darmasaba",
waktu: "10.00 - 12.00",
status: "Selesai",
},
{
id: 2,
judul: "Pembahasan Mengenai Darmasaba",
waktu: "13.00 - 14.00",
},
]
},
{
id: 2,
tangal: 2,
hari: "Min",
data: [
{
id: 1,
judul: "Pembahasan Mengenai Darmasaba",
waktu: "10.00 - 12.00",
},
{
id: 1,
judul: "Pembahasan Mengenai Darmasaba",
waktu: "13.00 - 14.00",
},
{
id: 1,
judul: "Pembahasan Mengenai Darmasaba",
waktu: "15.00 - 16.00",
},
]
},
]
export default function HistoryDivisionCalender() {
const router = useRouter()
return (
<Box>
<LayoutNavbarNew back="/calender" title="History kalender" menu />
<Box p={20}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
<Box mt={30}>
<Box bg={"#DBE9D8"} style={{
borderRadius: 10
}}>
{history.map((v, i) => {
return (
<Grid key={i}>
<Grid.Col span={2}>
<Flex justify={"center"} direction={'column'}>
<Text ta={"center"} fz={20} fw={'bold'}>{v.tangal}</Text>
<Text ta={"center"} fz={15}>{v.hari}</Text>
</Flex>
</Grid.Col>
<Grid.Col span={'auto'}>
{v.data.map((value) => {
return (
<Box mb={10} key={value.id} onClick={() => router.push('/calender?page=detail-event')}>
<Text fw={"bold"}>{value.judul}</Text>
<Text>{value.waktu}</Text>
</Box>
)
})}
</Grid.Col>
</Grid>
)
})}
</Box>
</Box>
</Box>
</Box>
);
}

2
src/module/division_new/_division_fitur/calender/view/view_history_division_calender.tsx
View File

@@ -1,6 +1,6 @@
import { Box } from '@mantine/core';
import React from 'react';
import HistoryDivisionCalender from '../components/history_division_calender';
import HistoryDivisionCalender from '../../../../calender/ui/history_division_calender';
export default function ViewHistoryDivisionCalender() {
return (

2
src/module/division_new/index.ts
View File

@@ -2,7 +2,6 @@ import { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDa
import CreateUserDivisionCalender from "./_division_fitur/calender/components/create_user_division_calender";
import UlangiEvent from "./_division_fitur/calender/components/ulangi_event";
import UpdateUlangiEvent from "./_division_fitur/calender/components/update_calander/update_ulangi_event";
import UpdateUserDivisionCalender from "../calender/ui/update_user_division_calender";
import ViewCreateDivisionCalender from "./_division_fitur/calender/view/view_create_division_calender";
import ViewDetailEventDivision from "./_division_fitur/calender/view/view_detail_event_division";
import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
@@ -35,7 +34,6 @@ export { CreateUserDivisionCalender };
export { ViewHistoryDivisionCalender };
export { ViewDetailEventDivision };
export { ViewUpdateDivisionCalender };
export { UpdateUserDivisionCalender };
export { UpdateUlangiEvent };
export { ViewDocumentDivision };
export type { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDataMemberDivision }