feat : update history
This commit is contained in:
@@ -1,9 +1,9 @@
|
|||||||
import { ViewHistoryDivisionCalender } from '@/module/division_new';
|
import { HistoryDivisionCalender } from '@/module/calender';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
function Page() {
|
function Page() {
|
||||||
return (
|
return (
|
||||||
<ViewHistoryDivisionCalender />
|
<HistoryDivisionCalender />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -151,13 +151,15 @@ export async function DELETE(request: Request, context: { params: { id: string }
|
|||||||
// EDIT CALENDER BY ID
|
// EDIT CALENDER BY ID
|
||||||
export async function PUT(request: Request, context: { params: { id: string } }) {
|
export async function PUT(request: Request, context: { params: { id: string } }) {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
|
console.log('amalai')
|
||||||
const user = await funGetUserByCookies()
|
const user = await funGetUserByCookies()
|
||||||
if (user.id == undefined) {
|
if (user.id == undefined) {
|
||||||
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
|
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
|
||||||
}
|
}
|
||||||
|
|
||||||
const { id } = context.params
|
const { id } = context.params
|
||||||
|
const userId = user.id
|
||||||
const { title, desc, timeStart, dateStart, timeEnd, linkMeet, repeatEventTyper, member } = await request.json()
|
const { title, desc, timeStart, dateStart, timeEnd, linkMeet, repeatEventTyper, member } = await request.json()
|
||||||
|
|
||||||
const cek = await prisma.divisionCalendar.count({
|
const cek = await prisma.divisionCalendar.count({
|
||||||
@@ -166,6 +168,8 @@ export async function PUT(request: Request, context: { params: { id: string } })
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
console.log(id, title, desc, timeStart, dateStart, timeEnd, linkMeet, repeatEventTyper, member)
|
||||||
|
|
||||||
if (cek == 0) {
|
if (cek == 0) {
|
||||||
return NextResponse.json(
|
return NextResponse.json(
|
||||||
{
|
{
|
||||||
@@ -176,6 +180,11 @@ export async function PUT(request: Request, context: { params: { id: string } })
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const y = new Date('1970-01-01 ' + timeStart)
|
||||||
|
const x = new Date('1970-01-01 ' + timeEnd)
|
||||||
|
const timeStartFix = new Date(y.getTime() - (y.getTimezoneOffset() * 60000)).toISOString()
|
||||||
|
const timeEndFix = new Date(x.getTime() - (x.getTimezoneOffset() * 60000)).toISOString()
|
||||||
|
const statusCalender = 0
|
||||||
const data = await prisma.divisionCalendar.update({
|
const data = await prisma.divisionCalendar.update({
|
||||||
where: {
|
where: {
|
||||||
id: id
|
id: id
|
||||||
@@ -183,15 +192,17 @@ export async function PUT(request: Request, context: { params: { id: string } })
|
|||||||
data: {
|
data: {
|
||||||
title: title,
|
title: title,
|
||||||
desc: desc,
|
desc: desc,
|
||||||
timeStart: timeStart,
|
createdBy: String(userId),
|
||||||
dateStart: dateStart,
|
timeStart: timeStartFix,
|
||||||
timeEnd: timeEnd,
|
dateStart: new Date(dateStart),
|
||||||
|
timeEnd: timeEndFix,
|
||||||
linkMeet: linkMeet,
|
linkMeet: linkMeet,
|
||||||
repeatEventTyper: repeatEventTyper
|
repeatEventTyper: repeatEventTyper,
|
||||||
|
status: statusCalender
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
await prisma.divisionCalendarMember.deleteMany({
|
const del = await prisma.divisionCalendarMember.deleteMany({
|
||||||
where: {
|
where: {
|
||||||
idCalendar: id
|
idCalendar: id
|
||||||
}
|
}
|
||||||
@@ -207,6 +218,8 @@ export async function PUT(request: Request, context: { params: { id: string } })
|
|||||||
data: omitMember
|
data: omitMember
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log(omitMember)
|
||||||
|
|
||||||
|
|
||||||
return NextResponse.json({ success: true, message: "Berhasil mengedit calender" }, { status: 200 });
|
return NextResponse.json({ success: true, message: "Berhasil mengedit calender" }, { status: 200 });
|
||||||
|
|
||||||
|
|||||||
82
src/app/api/calender/history/route.ts
Normal file
82
src/app/api/calender/history/route.ts
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
import moment from "moment";
|
||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import "moment/locale/id";
|
||||||
|
import { funGetUserByCookies } from "@/module/auth";
|
||||||
|
import { prisma } from "@/module/_global";
|
||||||
|
import _ from "lodash";
|
||||||
|
|
||||||
|
// GET HSITORY
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
try {
|
||||||
|
const user = await funGetUserByCookies()
|
||||||
|
if (user.id == undefined) {
|
||||||
|
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { searchParams } = new URL(request.url);
|
||||||
|
const idDivision = searchParams.get("division");
|
||||||
|
|
||||||
|
if (idDivision != "null" && idDivision != null && idDivision != undefined) {
|
||||||
|
const cekDivision = await prisma.division.count({
|
||||||
|
where: {
|
||||||
|
id: idDivision,
|
||||||
|
isActive: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (cekDivision == 0) {
|
||||||
|
return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, data tidak ditemukan" }, { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await prisma.divisionCalendar.findMany({
|
||||||
|
where: {
|
||||||
|
isActive: true,
|
||||||
|
idDivision: idDivision,
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
title: true,
|
||||||
|
timeStart: true,
|
||||||
|
dateStart: true,
|
||||||
|
timeEnd: true,
|
||||||
|
},
|
||||||
|
orderBy: [
|
||||||
|
{
|
||||||
|
dateStart: 'asc'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timeStart: 'asc'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timeEnd: 'asc'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
const allOmit = data.map((v: any) => ({
|
||||||
|
..._.omit(v, ["title", "timeStart", "timeEnd", "id", ]),
|
||||||
|
dateStart: v.dateStart,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: v.id,
|
||||||
|
title: v.title,
|
||||||
|
timeEnd: moment.utc(v.timeEnd).format('HH:mm'),
|
||||||
|
timeStart: moment.utc(v.timeStart).format('HH:mm')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return NextResponse.json({ success: true, message: "Berhasil mendapatkan calender", data: allOmit }, { status: 200 });
|
||||||
|
|
||||||
|
} else {
|
||||||
|
return NextResponse.json({ success: false, message: "Gagal mendapatkan calender, data tidak ditemukan" }, { status: 404 });
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
return NextResponse.json({ success: false, message: "Gagal mendapatkan calender, data tidak ditemukan" }, { status: 404 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import CreateCalenderDivisionCaleder from "./ui/create_calender_division_caleder";
|
import CreateCalenderDivisionCaleder from "./ui/create_calender_division_caleder";
|
||||||
import DetailEventDivision from "./ui/detail_event_division";
|
import DetailEventDivision from "./ui/detail_event_division";
|
||||||
|
import HistoryDivisionCalender from "./ui/history_division_calender";
|
||||||
import NavbarCreateDivisionCalender from "./ui/navbar_create_division_calender";
|
import NavbarCreateDivisionCalender from "./ui/navbar_create_division_calender";
|
||||||
import NavbarDivisionCalender from "./ui/navbar_division_calender";
|
import NavbarDivisionCalender from "./ui/navbar_division_calender";
|
||||||
import UpdateDivisionCalender from "./ui/update_division_calender";
|
import UpdateDivisionCalender from "./ui/update_division_calender";
|
||||||
@@ -9,3 +10,4 @@ export { NavbarCreateDivisionCalender }
|
|||||||
export { CreateCalenderDivisionCaleder }
|
export { CreateCalenderDivisionCaleder }
|
||||||
export { DetailEventDivision }
|
export { DetailEventDivision }
|
||||||
export { UpdateDivisionCalender }
|
export { UpdateDivisionCalender }
|
||||||
|
export { HistoryDivisionCalender }
|
||||||
@@ -4,6 +4,10 @@ export const funGetAllCalender = async (path?: string) => {
|
|||||||
const response = await fetch(`/api/calender${(path) ? path : ''}`, { next: { tags: ['calender'] } });
|
const response = await fetch(`/api/calender${(path) ? path : ''}`, { next: { tags: ['calender'] } });
|
||||||
return await response.json().catch(() => null);
|
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) => {
|
export const funGetOneCalender = async (path: string) => {
|
||||||
const response = await fetch(`/api/calender/${path}`);
|
const response = await fetch(`/api/calender/${path}`);
|
||||||
|
|||||||
@@ -11,6 +11,16 @@ export interface IDataCalender {
|
|||||||
user_name: string
|
user_name: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface IHistoryCalender {
|
||||||
|
dateStart: string;
|
||||||
|
data: {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
timeEnd: string;
|
||||||
|
timeStart: string;
|
||||||
|
}[];
|
||||||
|
}[];
|
||||||
|
|
||||||
export interface IDataDetailByIdCalender {
|
export interface IDataDetailByIdCalender {
|
||||||
id: string
|
id: string
|
||||||
title: string
|
title: string
|
||||||
@@ -61,7 +71,7 @@ export interface IEditCalender {
|
|||||||
linkMeet?: string
|
linkMeet?: string
|
||||||
repeatEventTyper?: string
|
repeatEventTyper?: string
|
||||||
desc?: string,
|
desc?: string,
|
||||||
member?: IEditMemberCalender[]
|
member?: IFormMemberCalender[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IEditMemberCalender {
|
export interface IEditMemberCalender {
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ export default function DetailEventDivision() {
|
|||||||
</Group>
|
</Group>
|
||||||
<Group mb={10} gap={30}>
|
<Group mb={10} gap={30}>
|
||||||
<LuClock size={25} color={WARNA.biruTua} />
|
<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>
|
||||||
<Group mb={10} gap={30}>
|
<Group mb={10} gap={30}>
|
||||||
<BsCalendarDate size={25} color={WARNA.biruTua} />
|
<BsCalendarDate size={25} color={WARNA.biruTua} />
|
||||||
|
|||||||
123
src/module/calender/ui/history_division_calender.tsx
Normal file
123
src/module/calender/ui/history_division_calender.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -14,6 +14,7 @@ import moment from 'moment';
|
|||||||
import "moment/locale/id";
|
import "moment/locale/id";
|
||||||
import { useHookstate } from '@hookstate/core';
|
import { useHookstate } from '@hookstate/core';
|
||||||
import { globalCalender } from '../lib/val_calender';
|
import { globalCalender } from '../lib/val_calender';
|
||||||
|
import UpdateListUsers from './update_list_users';
|
||||||
|
|
||||||
export default function UpdateDivisionCalender() {
|
export default function UpdateDivisionCalender() {
|
||||||
const [isModal, setModal] = useState(false)
|
const [isModal, setModal] = useState(false)
|
||||||
@@ -21,15 +22,13 @@ export default function UpdateDivisionCalender() {
|
|||||||
const memberUser = useHookstate(globalCalender)
|
const memberUser = useHookstate(globalCalender)
|
||||||
const memberValue = memberUser.get() as IFormMemberCalender[]
|
const memberValue = memberUser.get() as IFormMemberCalender[]
|
||||||
const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
|
const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
|
||||||
const [isDataAnggota, setDataAnggota] = useState<IEditMemberCalender[]>([])
|
const [openMember, setOpenMember] = useState(false)
|
||||||
const [isLengthMember, setLengthMember] = useState()
|
|
||||||
|
|
||||||
const fetchGetOne = async () => {
|
const fetchGetOne = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await funGetOneCalender(param.detail)
|
const response = await funGetOneCalender(param.detail)
|
||||||
setDataCalender(response.data.calender)
|
setDataCalender(response.data.calender)
|
||||||
setDataAnggota(response.data.member)
|
memberUser.set(response.data.member)
|
||||||
setLengthMember(response.data.member.length)
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
}
|
}
|
||||||
@@ -39,12 +38,6 @@ export default function UpdateDivisionCalender() {
|
|||||||
fetchGetOne()
|
fetchGetOne()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
function onTrue(val: boolean) {
|
|
||||||
if (val) {
|
|
||||||
toast.success("Sukses! Data tersimpan");
|
|
||||||
}
|
|
||||||
setModal(false)
|
|
||||||
}
|
|
||||||
const [value, setValue] = useState<Date | null>(null);
|
const [value, setValue] = useState<Date | null>(null);
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
@@ -59,12 +52,13 @@ export default function UpdateDivisionCalender() {
|
|||||||
linkMeet: isDataCalender?.linkMeet,
|
linkMeet: isDataCalender?.linkMeet,
|
||||||
repeatEventTyper: isDataCalender?.repeatEventTyper,
|
repeatEventTyper: isDataCalender?.repeatEventTyper,
|
||||||
desc: isDataCalender?.desc,
|
desc: isDataCalender?.desc,
|
||||||
member: isDataAnggota
|
member: memberValue
|
||||||
})
|
})
|
||||||
|
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
setModal(false)
|
setModal(false)
|
||||||
router.push(`/division/${param.id}/calender`)
|
router.push(`/division/${param.id}/calender`)
|
||||||
|
toast.success(response.message)
|
||||||
} else {
|
} else {
|
||||||
toast.error(response.message)
|
toast.error(response.message)
|
||||||
}
|
}
|
||||||
@@ -77,22 +71,10 @@ export default function UpdateDivisionCalender() {
|
|||||||
} finally {
|
} finally {
|
||||||
setModal(false)
|
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 (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
<LayoutNavbarNew back={`/division/${param.id}/calender`} title="Edit kalender" menu />
|
<LayoutNavbarNew back={`/division/${param.id}/calender`} title="Edit kalender" menu />
|
||||||
@@ -108,7 +90,7 @@ export default function UpdateDivisionCalender() {
|
|||||||
size="md"
|
size="md"
|
||||||
placeholder="Event Nama"
|
placeholder="Event Nama"
|
||||||
label="Event Nama"
|
label="Event Nama"
|
||||||
value={isDataCalender?.title}
|
defaultValue={isDataCalender?.title}
|
||||||
onChange={
|
onChange={
|
||||||
(event) => {
|
(event) => {
|
||||||
setDataCalender({
|
setDataCalender({
|
||||||
@@ -153,7 +135,8 @@ export default function UpdateDivisionCalender() {
|
|||||||
}}
|
}}
|
||||||
size="md"
|
size="md"
|
||||||
label="Waktu Awal"
|
label="Waktu Awal"
|
||||||
value={isDataCalender?.timeStart}
|
// value={isDataCalender?.timeStart}
|
||||||
|
defaultValue={isDataCalender?.timeStart}
|
||||||
onChange={
|
onChange={
|
||||||
(event) => {
|
(event) => {
|
||||||
setDataCalender({
|
setDataCalender({
|
||||||
@@ -172,7 +155,8 @@ export default function UpdateDivisionCalender() {
|
|||||||
}}
|
}}
|
||||||
size="md"
|
size="md"
|
||||||
label="Waktu Akhir"
|
label="Waktu Akhir"
|
||||||
value={isDataCalender?.timeEnd}
|
// value={isDataCalender?.timeEnd}
|
||||||
|
defaultValue={isDataCalender?.timeEnd}
|
||||||
onChange={
|
onChange={
|
||||||
(event) => {
|
(event) => {
|
||||||
setDataCalender({
|
setDataCalender({
|
||||||
@@ -193,7 +177,8 @@ export default function UpdateDivisionCalender() {
|
|||||||
size="md"
|
size="md"
|
||||||
placeholder="Link Meet"
|
placeholder="Link Meet"
|
||||||
label="Link Meet"
|
label="Link Meet"
|
||||||
value={isDataCalender?.linkMeet}
|
// value={isDataCalender?.linkMeet}
|
||||||
|
defaultValue={isDataCalender?.linkMeet}
|
||||||
onChange={
|
onChange={
|
||||||
(event) => {
|
(event) => {
|
||||||
setDataCalender({
|
setDataCalender({
|
||||||
@@ -221,6 +206,7 @@ export default function UpdateDivisionCalender() {
|
|||||||
{ value: '5', label: 'Tahunan' },
|
{ value: '5', label: 'Tahunan' },
|
||||||
]}
|
]}
|
||||||
value={isDataCalender?.repeatEventTyper}
|
value={isDataCalender?.repeatEventTyper}
|
||||||
|
defaultValue={isDataCalender?.repeatEventTyper}
|
||||||
onChange={
|
onChange={
|
||||||
(val: any) => {
|
(val: any) => {
|
||||||
setDataCalender({
|
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
|
<Group
|
||||||
justify="space-between"
|
justify="space-between"
|
||||||
p={10}
|
p={10}
|
||||||
@@ -250,7 +236,8 @@ export default function UpdateDivisionCalender() {
|
|||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
size="md" placeholder='Deskripsi' label="Deskripsi"
|
size="md" placeholder='Deskripsi' label="Deskripsi"
|
||||||
value={isDataCalender?.desc}
|
// value={isDataCalender?.desc}
|
||||||
|
defaultValue={isDataCalender?.desc}
|
||||||
onChange={
|
onChange={
|
||||||
(event) => {
|
(event) => {
|
||||||
setDataCalender({
|
setDataCalender({
|
||||||
@@ -263,7 +250,7 @@ export default function UpdateDivisionCalender() {
|
|||||||
<Box pt={30}>
|
<Box pt={30}>
|
||||||
<Group justify="space-between">
|
<Group justify="space-between">
|
||||||
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
|
<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>
|
</Group>
|
||||||
<Box pt={10}>
|
<Box pt={10}>
|
||||||
<Box mb={20}>
|
<Box mb={20}>
|
||||||
@@ -275,7 +262,7 @@ export default function UpdateDivisionCalender() {
|
|||||||
px={20}
|
px={20}
|
||||||
py={10}
|
py={10}
|
||||||
>
|
>
|
||||||
{isDataAnggota.map((v: any, i: any) => {
|
{memberUser.get().map((v: any, i: any) => {
|
||||||
return (
|
return (
|
||||||
<Flex
|
<Flex
|
||||||
justify={"space-between"}
|
justify={"space-between"}
|
||||||
|
|||||||
@@ -1,9 +1,15 @@
|
|||||||
"use client"
|
"use client"
|
||||||
import { WARNA } from '@/module/_global';
|
import { LayoutNavbarNew, WARNA } from '@/module/_global';
|
||||||
import { Avatar, Box, Button, Center, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
|
import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
|
||||||
import { useRouter } from 'next/navigation';
|
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 React, { useState } from 'react';
|
||||||
import { HiMagnifyingGlass } from 'react-icons/hi2';
|
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 = [
|
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 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) => {
|
const handleFileClick = (index: number) => {
|
||||||
setSelectedFiles((prevSelectedFiles) => ({
|
if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
|
||||||
...prevSelectedFiles,
|
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
|
||||||
[index]: !prevSelectedFiles[index],
|
} 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 (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
<Stack>
|
<LayoutNavbarNew
|
||||||
<TextInput
|
// back=""
|
||||||
styles={{
|
title="Pilih Anggota"
|
||||||
input: {
|
menu
|
||||||
color: WARNA.biruTua,
|
/>
|
||||||
borderRadius: '#A3A3A3',
|
<Box p={20}>
|
||||||
borderColor: '#A3A3A3',
|
<Group justify="space-between" mt={20} onClick={handleSelectAll}>
|
||||||
},
|
<Text c={WARNA.biruTua} fw={"bold"}>
|
||||||
}}
|
Pilih Semua Anggota
|
||||||
size="md"
|
</Text>
|
||||||
radius={30}
|
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
|
||||||
leftSection={<HiMagnifyingGlass size={20} />}
|
</Group>
|
||||||
placeholder="Pencarian"
|
<Box mt={15}>
|
||||||
/>
|
{isData.map((v, i) => {
|
||||||
<Box pt={10}>
|
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
|
||||||
<SimpleGrid
|
return (
|
||||||
cols={{ base: 2, sm: 2, lg: 2 }}
|
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
|
||||||
spacing={{ base: 20, sm: "xl" }}
|
<Flex justify={"space-between"} align={"center"}>
|
||||||
verticalSpacing={{ base: "md", sm: "xl" }}
|
<Group>
|
||||||
>
|
<Avatar src={"v.image"} alt="it's me" size="lg" />
|
||||||
{dataUser.map((v, index) => {
|
<Text style={{
|
||||||
const isSelected = selectedFiles[index];
|
cursor: 'pointer',
|
||||||
return (
|
display: 'flex',
|
||||||
<Box key={index} mb={10}>
|
alignItems: 'center',
|
||||||
<Box
|
}}>
|
||||||
bg={isSelected ? WARNA.bgHijauMuda : "white"}
|
{v.name}
|
||||||
style={{
|
</Text>
|
||||||
border: `1px solid ${WARNA.biruTua}`,
|
</Group>
|
||||||
borderRadius: 20,
|
<Text
|
||||||
}}
|
style={{
|
||||||
py={10}
|
cursor: 'pointer',
|
||||||
onClick={() => handleFileClick(index)}
|
display: 'flex',
|
||||||
>
|
alignItems: 'center',
|
||||||
<Center>
|
paddingLeft: 20,
|
||||||
<Avatar src={v.img} alt="it's me" size="xl" />
|
}}
|
||||||
</Center>
|
>
|
||||||
<Text mt={20} ta="center">
|
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
|
||||||
{v.name}
|
</Text>
|
||||||
</Text>
|
</Flex>
|
||||||
</Box>
|
<Divider my={"md"} />
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</SimpleGrid>
|
</Box>
|
||||||
</Box>
|
<Box mt={"xl"}>
|
||||||
</Stack>
|
|
||||||
<Box mt="xl">
|
|
||||||
<Button
|
<Button
|
||||||
color="white"
|
c={"white"}
|
||||||
bg={WARNA.biruTua}
|
bg={WARNA.biruTua}
|
||||||
size="lg"
|
size="lg"
|
||||||
radius={30}
|
radius={30}
|
||||||
fullWidth
|
fullWidth
|
||||||
onClick={() => router.push("/calender/update")}
|
onClick={() => {onSubmit()}}
|
||||||
>
|
>
|
||||||
Simpan
|
Simpan
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { Box } from '@mantine/core';
|
import { Box } from '@mantine/core';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import HistoryDivisionCalender from '../components/history_division_calender';
|
import HistoryDivisionCalender from '../../../../calender/ui/history_division_calender';
|
||||||
|
|
||||||
export default function ViewHistoryDivisionCalender() {
|
export default function ViewHistoryDivisionCalender() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDa
|
|||||||
import CreateUserDivisionCalender from "./_division_fitur/calender/components/create_user_division_calender";
|
import CreateUserDivisionCalender from "./_division_fitur/calender/components/create_user_division_calender";
|
||||||
import UlangiEvent from "./_division_fitur/calender/components/ulangi_event";
|
import UlangiEvent from "./_division_fitur/calender/components/ulangi_event";
|
||||||
import UpdateUlangiEvent from "./_division_fitur/calender/components/update_calander/update_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 ViewCreateDivisionCalender from "./_division_fitur/calender/view/view_create_division_calender";
|
||||||
import ViewDetailEventDivision from "./_division_fitur/calender/view/view_detail_event_division";
|
import ViewDetailEventDivision from "./_division_fitur/calender/view/view_detail_event_division";
|
||||||
import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
|
import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
|
||||||
@@ -35,7 +34,6 @@ export { CreateUserDivisionCalender };
|
|||||||
export { ViewHistoryDivisionCalender };
|
export { ViewHistoryDivisionCalender };
|
||||||
export { ViewDetailEventDivision };
|
export { ViewDetailEventDivision };
|
||||||
export { ViewUpdateDivisionCalender };
|
export { ViewUpdateDivisionCalender };
|
||||||
export { UpdateUserDivisionCalender };
|
|
||||||
export { UpdateUlangiEvent };
|
export { UpdateUlangiEvent };
|
||||||
export { ViewDocumentDivision };
|
export { ViewDocumentDivision };
|
||||||
export type { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDataMemberDivision }
|
export type { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDataMemberDivision }
|
||||||
|
|||||||
Reference in New Issue
Block a user