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

upd: announcement

Browse Source 
Deskripsi:
- tambah
- edit
- detail

No Issues
This commit is contained in:
amel
2024-08-14 15:40:19 +08:00
parent fcf54d1924
commit e2d49fdd7e
29 changed files with 784 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/(application)/announcement/[id]/page.tsx
View File

@@ -1,8 +1,12 @@
import { ViewDetailAnnouncement } from "@/module/announcement";
import { DetailAnnouncement, NavbarDetailAnnouncement } from "@/module/announcement";
import { Box } from "@mantine/core";
function Page({ params }: { params: { id: string } }) {
return (
<ViewDetailAnnouncement data={params.id} />
<Box>
<NavbarDetailAnnouncement />
<DetailAnnouncement id={params.id} />
</Box>
)
}

8
src/app/(application)/announcement/edit/[id]/page.tsx
View File

@@ -1,9 +1,11 @@
// import { ViewEditAnnouncement } from "@/module/announcement";
import { EditAnnouncement } from "@/module/announcement";
import { Box } from "@mantine/core";
function Page({ params }: { params: { id: any } }) {
return (
// <ViewEditAnnouncement data={params.id} />
""
<Box>
<EditAnnouncement />
</Box>
)
}

156
src/app/api/announcement/[id]/route.ts
View File

@@ -3,15 +3,19 @@ import { funGetUserByCookies } from "@/module/auth";
import _ from "lodash";
import { NextResponse } from "next/server";
// GET ONE PENGUMUMAN, UNTUK TAMPIL DETAIL PENGUMUMAN
export async function GET(request: Request, context: { params: { id: string } }) {
try {
const { id } = context.params;
const { searchParams } = new URL(request.url);
const kategori = searchParams.get('category');
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 announcementId = searchParams.get("announcement");
const announcement = await prisma.announcement.findUnique({
where: {
id: id,
@@ -22,12 +26,12 @@ export async function GET(request: Request, context: { params: { id: string } })
desc: true,
},
});
const announcementMember = await prisma.announcementMember.findMany({
where: {
idAnnouncement: id,
},
select: {
idAnnouncement: true,
idGroup: true,
idDivision: true,
Group: {
@@ -35,24 +39,162 @@ export async function GET(request: Request, context: { params: { id: string } })
name: true,
},
},
Division: {
select: {
name: true,
},
},
},
});
const allAnnouncementMember = announcementMember.map((v: any) => ({
..._.omit(v, ["Group"]),
const formatMember = announcementMember.map((v: any) => ({
..._.omit(v, ["Group", "Division"]),
idGroup: v.idGroup,
idDivision: v.idDivision,
group: v.Group.name,
division: v.Division.name
}))
const fixMember = Object.groupBy(formatMember, ({ group }) => group);
return NextResponse.json(
{
success: true,
message: "Berhasil mendapatkan announcement",
announcement, allAnnouncementMember
data: announcement,
member: fixMember
},
{ status: 200 }
);
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan announcement, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}
}
// HAPUS PENGUMUMAN
export async function DELETE(request: Request, context: { params: { id: string } }) {
try {
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const { id } = context.params;
const data = await prisma.announcement.count({
where: {
id: id,
},
});
if (data == 0) {
return NextResponse.json(
{
success: false,
message: "Hapus pengumuman gagal, data tidak ditemukan",
},
{ status: 404 }
);
}
const update = await prisma.announcement.update({
where: {
id: id,
},
data: {
isActive: false,
},
});
return NextResponse.json(
{
success: true,
message: "Pengumuman berhasil dihapus",
data,
},
{ status: 200 }
);
} catch (error) {
console.log(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan pengumuman, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}
// EDIT PENGUMUMAN
export async function PUT(request: Request, context: { params: { id: string } }) {
try {
const user = await funGetUserByCookies();
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const { title, desc, groups } = (await request.json());
const { id } = context.params;
const data = await prisma.announcement.count({
where: {
id: id,
},
});
if (data == 0) {
return NextResponse.json(
{
success: false,
message: "Hapus pengumuman gagal, data tidak ditemukan",
},
{ status: 404 }
);
}
const update = await prisma.announcement.update({
where: {
id: id
},
data: {
title,
desc,
},
});
// hapus semua member divisi pengumuman
const hapus = await prisma.announcementMember.deleteMany({
where: {
idAnnouncement: id
}
})
let memberDivision = []
for (var i = 0, l = groups.length; i < l; i++) {
var obj = groups[i].Division;
for (let index = 0; index < obj.length; index++) {
const element = obj[index];
const fix = {
idAnnouncement: id,
idGroup: groups[i].id,
idDivision: element.id
}
memberDivision.push(fix)
}
}
const announcementMember = await prisma.announcementMember.createMany({
data: memberDivision,
});
return NextResponse.json({ success: true, message: "Berhasil mengedit pengumuman" }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mengedit pengumuman, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}

6
src/app/api/announcement/get/route.ts
View File

@@ -1,6 +0,0 @@
import { apiAnnouncement } from "@/module/announcement";
import { NextRequest } from "next/server";
export async function GET(req: NextRequest) {
return apiAnnouncement(req, "GET")
}

6
src/app/api/announcement/post/route.ts
View File

@@ -1,6 +0,0 @@
import { apiAnnouncement } from "@/module/announcement";
import { NextRequest } from "next/server";
export async function POST(req: NextRequest) {
return apiAnnouncement(req, "POST");
}

44
src/app/api/announcement/route.ts
View File

@@ -7,6 +7,10 @@ import "moment/locale/id";
import { NextResponse } from "next/server";
export const dynamic = 'force-dynamic'
// GET ALL PENGUMUMAN
export async function GET(request: Request) {
try {
const user = await funGetUserByCookies();
@@ -32,6 +36,9 @@ export async function GET(request: Request) {
desc: true,
createdAt: true,
},
orderBy: {
createdAt: 'desc'
}
});
const allData = announcements.map((v: any) => ({
@@ -47,6 +54,8 @@ export async function GET(request: Request) {
}
// CREATE PENGUMUMAN
export async function POST(request: Request) {
try {
const user = await funGetUserByCookies();
@@ -54,40 +63,45 @@ export async function POST(request: Request) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const { title, desc, createBy, groups } = (await request.json());
const { title, desc, groups } = (await request.json());
const villaId = user.idVillage
const roleId = user.idUserRole
const userId = user.id
const data = await prisma.announcement.create({
data: {
title,
desc,
idVillage: String(villaId),
createdBy: String(roleId),
createdBy: String(userId),
},
select: {
id: true,
title: true,
desc: true,
createdAt: true,
}
});
const dataMember = groups.map((group: any) => ({
idAnnouncement: data.id,
idGroup: group.idGroup,
idDivision: group.idDivision,
isActive: true,
}));
let memberDivision = []
for (var i = 0, l = groups.length; i < l; i++) {
var obj = groups[i].Division;
for (let index = 0; index < obj.length; index++) {
const element = obj[index];
const fix = {
idAnnouncement: data.id,
idGroup: groups[i].id,
idDivision: element.id
}
memberDivision.push(fix)
}
}
const announcementMember = await prisma.announcementMember.createMany({
data: dataMember,
data: memberDivision,
});
return NextResponse.json({data, groups: announcementMember, success: true, message: "Berhasil mendapatkan pengumuman"}, { status: 200 });
return NextResponse.json({ success: true, message: "Berhasil membuat pengumuman" }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan pengumuman, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
return NextResponse.json({ success: false, message: "Gagal membuat pengumuman, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}

2
src/app/api/user/route.ts
View File

@@ -25,7 +25,7 @@ export async function GET(request: Request) {
const users = await prisma.user.findMany({
where: {
isActive: active == "true" ? true : false,
isActive: active == 'false' ? false : true,
idGroup: String(fixGroup),
name: {
contains: (name == undefined || name == null) ? "" : name,

16
src/module/announcement/api/api_announcement.ts
View File

@@ -1,16 +0,0 @@
import { NextRequest } from "next/server";
import { API_INDEX_ANNOUNCEMENT } from "./api_index";
type Method = "GET" | "POST";
export async function apiAnnouncement(req: NextRequest, method: Method) {
const { searchParams } = new URL(req.url);
const path = searchParams.get("path");
const act = API_INDEX_ANNOUNCEMENT.find(
(v) => v.path === path && v.method === method
);
if (!path)
return Response.json({ message: "page not found" }, { status: 404 });
if (act) return act.bin(req);
return Response.json({ message: "404" });
}

40
src/module/announcement/api/api_index.ts
View File

@@ -1,40 +0,0 @@
import { getAllAnnouncement } from "./get/getAllAnnouncement";
import { getOneAnnouncement } from "./get/getOneAnnouncement";
import { getUserAnnouncement } from "./get/getUserAnnouncement";
import { createAnnouncement } from "./post/createAnnouncement";
import { deleteAnnouncement } from "./post/deleteAnnouncement";
import { updateAnnouncement } from "./post/updateAnnouncement";
export const API_INDEX_ANNOUNCEMENT = [
{
path: "get-all-announcement",
method: "GET",
bin: getAllAnnouncement,
},
{
path: "get-one-announcement",
method: "GET",
bin: getOneAnnouncement,
},
{
path: "get-user-announcement",
method: "GET",
bin: getUserAnnouncement,
},
{
path: "create-announcement",
method: "POST",
bin: createAnnouncement,
},
{
path: "update-announcement",
method: "POST",
bin: updateAnnouncement,
},
{
path: "delete-announcement",
method: "POST",
bin: deleteAnnouncement,
},
];

38
src/module/announcement/api/get/getAllAnnouncement.ts
View File

@@ -1,38 +0,0 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import _ from "lodash";
import moment from "moment";
import "moment/locale/id";
import { NextRequest } from "next/server";
export async function getAllAnnouncement(req: NextRequest) {
try {
const user = await funGetUserByCookies();
const villageId = user.idVillage
const announcements = await prisma.announcement.findMany({
where: {
idVillage: String(villageId),
isActive: true,
},
select: {
id: true,
title: true,
desc: true,
createdAt: true,
},
});
const allData = announcements.map((v: any) => ({
..._.omit(v, ["createdAt"]),
createdAt: moment(v.createdAt).format("LL")
}))
return Response.json(allData);
} catch (error) {
console.error(error);
return Response.json(
{ message: "Internal Server Error", success: false },
{ status: 500 }
);
}
}

49
src/module/announcement/api/get/getOneAnnouncement.ts
View File

@@ -1,49 +0,0 @@
import { prisma } from "@/module/_global";
import _ from "lodash";
import { NextRequest } from "next/server";
export async function getOneAnnouncement(req: NextRequest) {
try {
const searchParams = req.nextUrl.searchParams;
const announcementId = searchParams.get("announcementId");
const announcement = await prisma.announcement.findUnique({
where: {
id: String(announcementId),
},
select: {
id: true,
title: true,
desc: true,
},
});
const announcementMember = await prisma.announcementMember.findMany({
where: {
idAnnouncement: String(announcementId),
},
select: {
idAnnouncement: true,
idGroup: true,
idDivision: true,
Group: {
select: {
name: true,
},
},
},
});
const allAnnouncementMember = announcementMember.map((v: any) => ({
..._.omit(v, ["Group"]),
group: v.Group.name,
}))
return Response.json({ announcement, allAnnouncementMember });
} catch (error) {
console.error(error);
return Response.json(
{ message: "Internal Server Error", success: false },
{ status: 500 }
);
}
}

39
src/module/announcement/api/get/getUserAnnouncement.ts
View File

@@ -1,39 +0,0 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import { revalidatePath, revalidateTag } from "next/cache";
import { NextRequest, NextResponse } from "next/server";
export const dynamic = 'force-dynamic'
export const revalidate = true
export async function getUserAnnouncement(req: NextRequest) {
try {
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const villaId = user.idVillage
const data = await prisma.group.findMany({
where: {
isActive: true,
idVillage: String(villaId)
},
select: {
id: true,
name: true,
Division: {
select: {
id: true,
name: true
}
}
}
});
return NextResponse.json({ success: true, message: "Berhasil mendapatkan grup", data, }, { status: 200 });
} catch (error) {
console.log(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan grup, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}

44
src/module/announcement/api/post/createAnnouncement.ts
View File

@@ -1,44 +0,0 @@
import { prisma } from "@/module/_global";
import { NextRequest } from "next/server";
export async function createAnnouncement(req: NextRequest) {
try {
const data = await req.json();
const announcement = await prisma.announcement.create({
data: {
title: data.title,
desc: data.desc,
idVillage: data.idVillage,
createdBy: data.createBy,
isActive: true,
},
select: {
id: true,
title: true,
desc: true,
},
});
const dataMember = data.groups.map((group: any) => ({
idAnnoucement: announcement.id,
idGroup: group.idGroup,
idDivision: group.idDivision,
isActive: true,
}));
const announcementMember = await prisma.announcementMember.createMany({
data: dataMember,
});
return Response.json({
announcement: announcement,
announcementMember: announcementMember,
});
} catch (error) {
console.error(error);
return Response.json(
{ message: "Internal Server Error", success: false },
{ status: 500 }
);
}
}

27
src/module/announcement/api/post/deleteAnnouncement.ts
View File

@@ -1,27 +0,0 @@
import { prisma } from "@/module/_global";
import { NextRequest } from "next/server";
export async function deleteAnnouncement(req: NextRequest) {
try {
const data = await req.json();
const update = await prisma.announcement.update({
where: {
id: data.id,
},
data: {
isActive: false,
},
});
return Response.json(
{ success: true, message: "Sukses Delete Announcement" },
{ status: 200 }
);
} catch (error) {
console.error(error);
return Response.json(
{ message: "Internal Server Error", success: false },
{ status: 500 }
);
}
}

48
src/module/announcement/api/post/updateAnnouncement.ts
View File

@@ -1,48 +0,0 @@
import { prisma } from "@/module/_global";
import { NextRequest } from "next/server";
export async function updateAnnouncement(req: NextRequest) {
try {
const data = await req.json();
const udpate = await prisma.announcement.update({
where: {
id: data.id,
},
data: {
title: data.title,
desc: data.desc,
idVillage: data.idVillage,
createdBy: data.createBy,
isActive: true,
},
});
const deleteAnnouncement = await prisma.announcementMember.deleteMany({
where: {
idAnnouncement: data.id,
},
});
const dataMember = data.groups.map((group: any) => ({
idAnnoucement: data.id,
idGroup: group.idGroup,
idDivision: group.idDivision,
isActive: true,
}));
const announcementMember = await prisma.announcementMember.createMany({
data: dataMember,
});
return Response.json({
success: true,
message: "Sukses Update Announcement",
});
} catch (error) {
console.error(error);
return Response.json(
{ message: "Internal Server Error", success: false },
{ status: 500 }
);
}
}

12
src/module/announcement/index.ts
View File

@@ -1,12 +1,14 @@
import { apiAnnouncement } from "./api/api_announcement";
import CreateAnnouncement from "./ui/create_announcement";
import DetailAnnouncement from "./ui/detail_announcement";
import EditAnnouncement from "./ui/edit_announcement";
import ListAnnouncement from "./ui/list_announcement";
import NavbarAnnouncement from "./ui/navbar_announcement";
import ViewDetailAnnouncement from "./ui/view_detail_anouncement"
import NavbarDetailAnnouncement from "./ui/navbar_detail_announcement";
export { ViewDetailAnnouncement };
export { apiAnnouncement };
export { ListAnnouncement }
export { NavbarAnnouncement }
export { CreateAnnouncement }
export { CreateAnnouncement }
export { NavbarDetailAnnouncement }
export { DetailAnnouncement }
export { EditAnnouncement }

39
src/module/announcement/lib/api_announcement.ts
View File

@@ -1,16 +1,22 @@
import { ICreateData } from "./type_announcement";
import { ICreateData, IFormCreateAnnouncement } from "./type_announcement";
export const funGetAllAnnouncement = async (path?: string) => {
const response = await fetch(`/api/announcement${(path) ? path : ''}`, { next: { tags: ['announcement'] } });
return await response.json().catch(() => null);
}
}
export const funGetAnnouncementById = async (path: string) => {
const response = await fetch(`/api/announcement/${path}`);
return await response.json().catch(() => null);
}
export const funCreateAnnouncement = async (data: ICreateData) => {
export const funCreateAnnouncement = async (data: IFormCreateAnnouncement) => {
if (data.title == "" || data.desc == "")
return { success: false, message: 'Silahkan lengkapi form tambah pengumuman' }
if (data.groups.length == 0)
return { success: false, message: 'Silahkan pilih divisi penerima pengumuman' }
const response = await fetch("/api/announcement", {
method: "POST",
headers: {
@@ -19,4 +25,31 @@ export const funCreateAnnouncement = async (data: ICreateData) => {
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
}
export const funDeleteAnnouncement = async (path: string) => {
const response = await fetch(`/api/announcement/${path}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
return await response.json().catch(() => null);
};
export const funEditAnnouncement = async (path: string, data: IFormCreateAnnouncement) => {
if (data.title == "" || data.desc == "")
return { success: false, message: 'Silahkan lengkapi form edit pengumuman' }
if (data.groups.length == 0)
return { success: false, message: 'Silahkan pilih divisi penerima pengumuman' }
const response = await fetch(`/api/announcement/${path}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
}

30
src/module/announcement/lib/type_announcement.ts
View File

@@ -6,8 +6,8 @@ export interface IListDataAnnouncement {
}
export interface IRootAllAnnouncement {
announcement: IAnnouncement
allAnnouncementMember: IAllAnnouncementMember[]
data: IAnnouncement
member: IAllAnnouncementMember
}
export interface IAnnouncement {
@@ -17,10 +17,12 @@ export interface IAnnouncement {
}
export interface IAllAnnouncementMember {
idAnnouncement: string
idGroup: string
idDivision: string
group: string
group: {
idGroup: string
idDivision: string
group: string
division: string
}[]
}
export interface GroupData {
@@ -32,10 +34,26 @@ export interface GroupData {
}[];
}
export interface GroupDataEditAnnouncement {
id: string;
name: string;
Division: {
idGroup: string;
idDivision: string;
group: string;
division: string;
}[];
}
export interface ICreateData {
title: string
desc: string
}
export interface IFormCreateAnnouncement {
title: string
desc: string
groups: GroupData[]
}
export interface IGroupData {

5
src/module/announcement/lib/val_announcement.ts
View File

@@ -1,5 +1,6 @@
import { hookstate } from "@hookstate/core";
import { GroupData } from "./type_announcement";
import { GroupData, GroupDataEditAnnouncement } from "./type_announcement";
export const globalMemberAnnouncement = hookstate<GroupData[]>([])
export const globalMemberAnnouncement = hookstate<GroupData[]>([])
export const globalMemberEditAnnouncement = hookstate<GroupData[]>([])

102
src/module/announcement/ui/create_announcement.tsx
View File

@@ -1,40 +1,25 @@
'use client'
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { globalMemberDivision } from "@/module/division_new/lib/val_division";
import { useHookstate } from "@hookstate/core";
import { Avatar, Box, Button, Flex, Group, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiOutlineChevronRight } from "react-icons/hi2";
import { IoIosArrowForward } from "react-icons/io";
import CreateUsersAnnouncement from "./create_users_announcement";
import { globalMemberAnnouncement } from "../lib/val_announcement";
import { funCreateAnnouncement } from "../lib/api_announcement";
import { group } from "console";
import { GroupData, ICreateData, IGroupData } from "../lib/type_announcement";
export type DataMember = DataGroup[]
export interface DataGroup {
id: string
name: string
Division: Division[]
}
export interface Division {
id: string
name: string
}
export default function CreateAnnouncement() {
const [isOpen, setOpen] = useState(false)
const memberGroup = useHookstate(globalMemberAnnouncement)
const memberValue = memberGroup.get() as GroupData[]
const [selectedFiles, setSelectedFiles] = useState<any>([]);
const [selectedFiles, setSelectedFiles] = useState<any>([])
const [isChooseMember, setIsChooseMember] = useState(false)
const [isData, setisData] = useState({
@@ -43,27 +28,31 @@ export default function CreateAnnouncement() {
})
async function onSubmit() {
try {
const response = await funCreateAnnouncement({
title: isData.title,
desc: isData.desc,
groups: memberValue
})
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
if (response.success) {
toast.success(response.message)
setisData({
...isData,
title: "",
desc: "",
})
memberGroup.set([])
} else {
toast.error(response.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal menambahkan pengumuman, coba lagi nanti");
}
setOpen(false)
}
async function onSubmit(val: boolean) {
// const response = await funCreateAnnouncement(
// {
// title: isData.title,
// desc: isData.desc,
// groups: memberValue
// },
// )
setOpen(false)
console.log(isData)
console.log(memberValue)
}
async function loadData() {
@@ -78,7 +67,7 @@ export default function CreateAnnouncement() {
setIsChooseMember(true)
}
if (isChooseMember) return <CreateUsersAnnouncement onClose={() => { setIsChooseMember(false) }} />
if (isChooseMember) return <CreateUsersAnnouncement onClose={() => { setIsChooseMember(false) }} />
return (
<Box>
@@ -95,6 +84,7 @@ export default function CreateAnnouncement() {
borderColor: WARNA.biruTua,
},
}}
value={isData.title}
onChange={(e) => { setisData({ ...isData, title: e.target.value }) }}
/>
<Textarea
@@ -111,6 +101,7 @@ export default function CreateAnnouncement() {
borderColor: WARNA.biruTua,
},
}}
value={isData.desc}
onChange={(e) => { setisData({ ...isData, desc: e.target.value }) }}
/>
<Box pt={10}>
@@ -122,29 +113,29 @@ export default function CreateAnnouncement() {
onClick={() => { onToChooseMember() }}
>
<Text size="sm">
Tambah Anggota
Tambah divisi penerima pengumuman
</Text>
<IoIosArrowForward />
</Group>
</Box>
<Box pt={20}>
<Text c={WARNA.biruTua} mb={10}>Anggota Terpilih</Text>
{(memberGroup.length === 0) ? (
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
) : memberGroup.get().map((v: any, i: any) => {
return (
<Box key={i} mt={10}>
<Text fw={"bold"}>{v.name}</Text>
<Box pl={20}>
<Flex direction={"column"} gap={"md"}>
{v.Division.map((division: any) => (
<li key={division.id}>{division.name}</li>
))}
</Flex>
<Text c={WARNA.biruTua} mb={10}>Divisi Terpilih</Text>
{(memberGroup.length === 0) ? (
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
) : memberGroup.get().map((v: any, i: any) => {
return (
<Box key={i} mt={10}>
<Text fw={"bold"}>{v.name}</Text>
<Box pl={20}>
<Flex direction={"column"} gap={"md"}>
{v.Division.map((division: any) => (
<li key={division.id}>{division.name}</li>
))}
</Flex>
</Box>
</Box>
</Box>
);
})}
);
})}
</Box>
</Stack>
<Box mt={30} mx={20}>
@@ -161,7 +152,12 @@ export default function CreateAnnouncement() {
</Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin menambahkan data?"
onYes={(val) => { onSubmit(val) }} />
onYes={(val) => {
if (val) {
onSubmit()
}
setOpen(false)
}} />
</Box>
)

35
src/module/announcement/ui/create_users_announcement.tsx
View File

@@ -8,6 +8,8 @@ import { FaCheck } from 'react-icons/fa';
import { GroupData } from '../lib/type_announcement';
import { useHookstate } from '@hookstate/core';
import { globalMemberAnnouncement } from '../lib/val_announcement';
import { FaMinus } from 'react-icons/fa6';
import toast from 'react-hot-toast';
@@ -15,7 +17,7 @@ interface CheckedState {
[key: string]: string[];
}
export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any) => void }) {
export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: any) => void }) {
const [checked, setChecked] = useState<CheckedState>({});
const [selectAll, setSelectAll] = useState(false);
const [isData, setIsData] = useState<GroupData[]>([])
@@ -26,6 +28,9 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
if (newChecked[groupId]) {
if (newChecked[groupId].includes(divisionId)) {
newChecked[groupId] = newChecked[groupId].filter(item => item !== divisionId);
if (newChecked[groupId].length === 0) {
delete newChecked[groupId];
}
} else {
newChecked[groupId].push(divisionId);
}
@@ -33,18 +38,20 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
newChecked[groupId] = [divisionId];
}
setChecked(newChecked);
console.log(newChecked)
};
const handleGroupCheck = (groupId: string) => {
const newChecked = { ...checked };
if (newChecked[groupId]) {
delete newChecked[groupId];
} else {
if (isData.find(item => item.id === groupId)?.Division.length == 0) {
return toast.error("Tidak ada divisi pada grup ini")
}
newChecked[groupId] = isData.find(item => item.id === groupId)?.Division.map(item => item.id) || [];
}
setChecked(newChecked);
console.log(newChecked)
};
const handleSelectAll = () => {
@@ -52,10 +59,11 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
if (!selectAll) {
const newChecked: CheckedState = {};
isData.forEach(item => {
newChecked[item.id] = item.Division.map(division => division.id);
if (item.Division.length > 0) {
newChecked[item.id] = item.Division.map(division => division.id);
}
});
setChecked(newChecked);
console.log(newChecked)
} else {
setChecked({});
}
@@ -63,9 +71,18 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
async function getData() {
const response = await funGetGroupDivision()
console.log(response)
setIsData(response.data)
if (memberGroup.length > 0) {
const formatArray = memberGroup.get().reduce((result: any, obj: any) => {
result[obj.id] = obj.Division.map((item: any) => item.id);
return result;
}, {})
setChecked(formatArray)
}
}
const handleSubmit = () => {
const selectedGroups: GroupData[] = [];
Object.keys(checked).forEach((groupId) => {
@@ -78,6 +95,7 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
});
}
});
memberGroup.set(selectedGroups);
onClose(true);
};
@@ -88,7 +106,7 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
return (
<div>
<LayoutNavbarNew back="" title="Tambah Anggota" menu={<></>} />
<LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
<Box p={20}>
<Group justify='flex-end' mb={20}>
<Text
@@ -118,7 +136,8 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
</Text>
<Text
>
{checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} /> : ""}
{checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
: (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
</Text>
</Group>
<Divider />

75
src/module/announcement/ui/detail_announcement.tsx
View File

@@ -1,34 +1,39 @@
"use client"
import { Box, Flex, Grid, Group, Spoiler, Stack, Text } from "@mantine/core";
import { Box, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import { BsCardText } from "react-icons/bs";
import { TfiAnnouncement } from "react-icons/tfi";
import { IRootAllAnnouncement } from "../lib/type_announcement";
import { IAnnouncement } from "../lib/type_announcement";
import { funGetAnnouncementById } from "../lib/api_announcement";
import toast from "react-hot-toast";
export default function DetailAnnouncement({ id }: { id: string }) {
const [isData, setIsData] = useState<IRootAllAnnouncement>()
const [isData, setIsData] = useState<IAnnouncement>()
const [isMember, setIsMember] = useState<any>({})
const [loading, setLoading] = useState(false)
async function fetchOneAnnouncement() {
try {
setLoading(true)
const res = await funGetAnnouncementById(id)
if (res.success) {
setIsData(res)
setIsData(res.data)
setIsMember(res.member)
} else {
toast.error(res.message)
}
} catch (error) {
console.error(error)
toast.error("Gagal mendapatkan announcement, coba lagi nanti")
toast.error("Gagal mendapatkan pengumuman, coba lagi nanti")
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
fetchOneAnnouncement()
}, [])
@@ -39,31 +44,59 @@ export default function DetailAnnouncement({ id }: { id: string }) {
<Stack>
<Group>
<TfiAnnouncement size={25} />
<Text fw={'bold'}>{isData?.announcement.title}</Text>
{
loading ?
<Skeleton height={10} radius="md" m={0} width={200} />
: <Text fw={'bold'}>{isData?.title}</Text>
}
</Group>
<Grid gutter={'md'}>
<Grid.Col span={1}>
<BsCardText size={25} />
</Grid.Col>
<Grid.Col span={11}>
<Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text>{isData?.announcement.desc}</Text>
</Spoiler>
{
loading ? Array(3)
.fill(null)
.map((_, i) => (
<Skeleton key={i} height={10} radius="md" mb={5} width={"100%"} />
))
: <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text>{isData?.desc}</Text>
</Spoiler>
}
</Grid.Col>
</Grid>
</Stack>
</Box>
<Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
{isData?.allAnnouncementMember.map((v, i) => {
return (
<Stack key={i}>
<Text fw={'bold'}>Anggota</Text>
<Flex direction={"column"} gap={10}>
<Text>{v.group}</Text>
</Flex>
</Stack>
)
})}
{
loading ? Array(6)
.fill(null)
.map((_, i) => (
<Skeleton key={i} height={10} radius="md" mb={5} width={"100%"} />
))
: Object.keys(isMember).map((v: any, i: any) => {
return (
<Box key={i} mb={10}>
<Text>{isMember[v]?.[0].group}</Text>
<List>
{
isMember[v].map((item: any, x: any) => {
return <List.Item key={x}>{item.division}</List.Item>
})
}
</List>
</Box>
)
})
}
</Box>
</Box>
)

21
src/module/announcement/ui/drawer_detail_announcement.tsx
View File

@@ -1,20 +1,31 @@
import { WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { Box, Flex, SimpleGrid, Stack, Text, } from '@mantine/core';
import { useRouter } from 'next/navigation';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { FaPencil, FaTrash } from 'react-icons/fa6';
import { funDeleteAnnouncement } from '../lib/api_announcement';
export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (val: boolean) => void }) {
const router = useRouter()
const [isOpen, setOpen] = useState(false)
const param = useParams<{ id: string }>()
function onTrue(val: boolean) {
async function onTrue(val: boolean) {
if (val) {
toast.success('Sukses! Data terhapus')
onDeleted(true)
const response = await funDeleteAnnouncement(param.id)
if (response.success) {
toast.success(response.message)
onDeleted(true)
} else {
toast.error(response.message)
onDeleted(false)
}
} else {
onDeleted(false)
}
setOpen(false)
}
return (
@@ -33,7 +44,7 @@ export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (va
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => {
router.push('edit/123')
router.push('edit/' + param.id)
}} style={{ cursor: 'pointer' }}>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />

126
src/module/announcement/ui/edit_announcement.tsx
View File

@@ -1,20 +1,101 @@
'use client'
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
import { Box, Button, Flex, List, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiOutlineChevronRight } from "react-icons/hi2";
import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement";
import { useParams } from "next/navigation";
import { useHookstate } from "@hookstate/core";
import { globalMemberEditAnnouncement } from "../lib/val_announcement";
import { GroupData, GroupDataEditAnnouncement } from "../lib/type_announcement";
import EditChooseMember from "./edit_choose_member";
export default function EditAnnouncement() {
const [isOpen, setOpen] = useState(false)
const [isChooseDivisi, setChooseDivisi] = useState(false)
const param = useParams<{ id: string }>()
const [body, setBody] = useState({
title: "",
desc: "",
})
const memberGroup = useHookstate(globalMemberEditAnnouncement)
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
async function fetchOneAnnouncement() {
try {
memberGroup.set([])
const res = await funGetAnnouncementById(param.id)
if (res.success) {
setBody({
title: res.data.title,
desc: res.data.desc
})
const arrNew: GroupData[] = []
const coba = Object.keys(res.member).map((v: any, i: any) => {
const newObject = {
"id": res.member[v][0].idGroup,
"name": v,
"Division": res.member[v]
}
res.member[v].map((v: any, i: any) => {
newObject["Division"][i] = {
"id": v.idDivision,
"name": v.division
}
})
arrNew.push(newObject)
})
memberGroup.set(arrNew)
} else {
toast.error(res.message)
}
} catch (error) {
console.error(error)
toast.error("Gagal mendapatkan pengumuman, coba lagi nanti")
}
}
useShallowEffect(() => {
fetchOneAnnouncement()
}, [])
async function onSubmit() {
try {
const response = await funEditAnnouncement(param.id, {
title: body.title,
desc: body.desc,
groups: memberGroup.get() as GroupData[]
})
if (response.success) {
toast.success(response.message)
} else {
toast.error(response.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal mengedit pengumuman, coba lagi nanti");
}
setOpen(false)
}
if (isChooseDivisi) return <EditChooseMember onClose={() => { setChooseDivisi(false) }} />
return (
<>
<LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
@@ -34,6 +115,8 @@ export default function EditAnnouncement() {
borderColor: WARNA.biruTua,
},
}}
value={body.title}
onChange={(val) => setBody({ ...body, title: val.target.value })}
/>
<Textarea
size="md"
@@ -49,12 +132,36 @@ export default function EditAnnouncement() {
borderColor: WARNA.biruTua,
},
}}
value={body.desc}
onChange={(val) => setBody({ ...body, desc: val.target.value })}
/>
<Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
Pilih Anggota
<Button onClick={() => { setChooseDivisi(true) }} rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
Pilih Divisi
</Button>
</Stack>
<Box mt={20} mx={20}>
{
memberGroup.get().map((v: any, i: any) => {
return (
<Box key={i} mt={10}>
<Text fw={"bold"}>{v.name}</Text>
<Box pl={20}>
<Flex direction={"column"} gap={"md"}>
{v.Division.map((division: any) => (
<li key={division.id}>{division.name}</li>
))}
</Flex>
</Box>
</Box>
);
}
)
}
</Box>
<Box mt={30} mx={20}>
<Button
c={"white"}
@@ -69,7 +176,12 @@ export default function EditAnnouncement() {
</Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => { onTrue(val) }} />
onYes={(val) => {
if (val) {
onSubmit()
}
setOpen(false)
}} />
</>
)
}

196
src/module/announcement/ui/edit_choose_member.tsx Normal file
View File

@@ -0,0 +1,196 @@
"use client";
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { funGetGroupDivision } from '@/module/group/lib/api_group';
import { Box, Button, Divider, Flex, Group, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react';
import { FaCheck } from 'react-icons/fa';
import { GroupData, GroupDataEditAnnouncement } from '../lib/type_announcement';
import { useHookstate } from '@hookstate/core';
import { globalMemberEditAnnouncement } from '../lib/val_announcement';
import { FaMinus } from 'react-icons/fa6';
import toast from 'react-hot-toast';
interface CheckedState {
[key: string]: string[];
}
export default function EditChooseMember({ onClose }: { onClose: (val: any) => void }) {
const [checked, setChecked] = useState<CheckedState>({});
const [selectAll, setSelectAll] = useState(false);
const [isData, setIsData] = useState<GroupData[]>([])
const memberGroup = useHookstate(globalMemberEditAnnouncement)
const handleCheck = (groupId: string, divisionId: string) => {
const newChecked = { ...checked };
if (newChecked[groupId]) {
if (newChecked[groupId].includes(divisionId)) {
newChecked[groupId] = newChecked[groupId].filter(item => item !== divisionId);
if (newChecked[groupId].length === 0) {
delete newChecked[groupId];
}
} else {
newChecked[groupId].push(divisionId);
}
} else {
newChecked[groupId] = [divisionId];
}
setChecked(newChecked);
};
const handleGroupCheck = (groupId: string) => {
const newChecked = { ...checked };
if (newChecked[groupId]) {
delete newChecked[groupId];
} else {
if (isData.find(item => item.id === groupId)?.Division.length == 0) {
return toast.error("Tidak ada divisi pada grup ini")
}
newChecked[groupId] = isData.find(item => item.id === groupId)?.Division.map(item => item.id) || [];
}
setChecked(newChecked);
};
const handleSelectAll = () => {
setSelectAll(!selectAll);
if (!selectAll) {
const newChecked: CheckedState = {};
isData.forEach(item => {
if (item.Division.length > 0) {
newChecked[item.id] = item.Division.map(division => division.id);
}
});
setChecked(newChecked);
} else {
setChecked({});
}
};
async function getData() {
const response = await funGetGroupDivision()
setIsData(response.data)
if (memberGroup.length > 0) {
const formatArray = memberGroup.get().reduce((result: any, obj: any) => {
result[obj.id] = obj.Division.map((item: any) => item.id);
return result;
}, {})
setChecked(formatArray)
}
}
const handleSubmit = () => {
const selectedGroups: GroupData[] = [];
Object.keys(checked).forEach((groupId) => {
const group = isData.find((item) => item.id === groupId);
if (group) {
selectedGroups.push({
id: group.id,
name: group.name,
Division: group.Division.filter((division) => checked[groupId].includes(division.id)),
});
}
});
memberGroup.set(selectedGroups);
onClose(true);
};
useShallowEffect(() => {
getData()
}, [])
return (
<div>
<LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
<Box p={20}>
<Group justify='flex-end' mb={20}>
<Text
onClick={handleSelectAll}
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}
fw={selectAll ? 'bold' : 'normal'}
>
Pilih Semua
</Text>
</Group>
{isData.map((item) => (
<Stack mb={30} key={item.id}>
<Group onClick={() => handleGroupCheck(item.id)} justify='space-between' align='center'>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}
fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
>
{item.name}
</Text>
<Text
>
{checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
: (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
</Text>
</Group>
<Divider />
{item.Division.map((division) => (
<Box key={division.id}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{division.name}
</Text>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{checked[item.id] && checked[item.id].includes(division.id) ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Group>
<Box pt={15}>
<Divider />
</Box>
</Box>
))}
</Stack>
))}
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
handleSubmit()
}}
>
Simpan
</Button>
</Box>
</Box>
</div>
);
}

87
src/module/announcement/ui/list_announcement.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Text, TextInput } from '@mantine/core';
import { SkeletonSingle, WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import { TfiAnnouncement } from "react-icons/tfi";
import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -15,9 +15,11 @@ export default function ListAnnouncement() {
const [isData, setIsData] = useState<IListDataAnnouncement[]>([])
const [searchQuery, setSearchQuery] = useState('')
const router = useRouter()
const [loading, setLoading] = useState(true);
const fetchData = async () => {
try {
setLoading(true);
const response = await funGetAllAnnouncement('?search=' + searchQuery)
if (response.success) {
@@ -25,10 +27,12 @@ export default function ListAnnouncement() {
} else {
toast.error(response.message);
}
setLoading(false);
} catch (error) {
toast.error("Gagal mendapatkan announcement, coba lagi nanti");
console.error(error);
} finally {
setLoading(false);
}
}
@@ -51,39 +55,52 @@ export default function ListAnnouncement() {
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
onChange={(e) => setSearchQuery(e.target.value)}
/>
{isData.map((v, i) => {
return (
<Box key={i} mt={15}>
<Box >
<Grid>
<Grid.Col span={2}>
<Center>
<ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
<TfiAnnouncement color={WARNA.biruTua} size={25} />
</ActionIcon>
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Group justify='space-between' mb={5} onClick={() => {
router.push(`/announcement/${v.id}`)
}}>
<Text fw={'bold'} c={WARNA.biruTua}>{v.title}</Text>
<Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
</Group>
{/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */}
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text c={WARNA.biruTua} onClick={() => {
router.push(`/announcement/${v.id}`)
}} >{v.desc}</Text>
</Spoiler>
</Grid.Col>
</Grid>
/>
{loading
? Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
<Divider my={15} />
</Box>
)
})}
))
: (isData.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={200}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada pengumuman</Text>
</Stack>
:
isData.map((v, i) => {
return (
<Box key={i} mt={15}>
<Box >
<Grid>
<Grid.Col span={2}>
<Center>
<ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
<TfiAnnouncement color={WARNA.biruTua} size={25} />
</ActionIcon>
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Group justify='space-between' mb={5} onClick={() => {
router.push(`/announcement/${v.id}`)
}}>
<Text fw={'bold'} c={WARNA.biruTua}>{v.title}</Text>
<Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
</Group>
{/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */}
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text c={WARNA.biruTua} onClick={() => {
router.push(`/announcement/${v.id}`)
}} >{v.desc}</Text>
</Spoiler>
</Grid.Col>
</Grid>
</Box>
<Divider my={15} />
</Box>
)
})}
</Box>
);
}

9
src/module/announcement/ui/navbar_detail_announcement.tsx
View File

@@ -4,9 +4,11 @@ import { ActionIcon, Box } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerDetailAnnouncement from "./drawer_detail_announcement";
import { useState } from "react";
import { useRouter } from "next/navigation";
export default function NavbarDetailAnnouncement() {
const [isOpenDrawer, setOpenDrawer] = useState(false)
const router = useRouter()
return (
<Box>
<LayoutNavbarNew back="" title="Pengumuman"
@@ -16,7 +18,12 @@ export default function NavbarDetailAnnouncement() {
</ActionIcon>}
/>
<LayoutDrawer opened={isOpenDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<DrawerDetailAnnouncement onDeleted={() => setOpenDrawer(false)} />
<DrawerDetailAnnouncement onDeleted={(val) => {
if (val) {
router.replace('/announcement')
setOpenDrawer(false)
}
}} />
</LayoutDrawer>
</Box>
)

12
src/module/announcement/ui/view_detail_anouncement.tsx
View File

@@ -1,12 +0,0 @@
import { Box } from "@mantine/core";
import DetailAnnouncement from "./detail_announcement";
import NavbarDetailAnnouncement from "./navbar_detail_announcement";
export default function ViewDetailAnnouncement({ data }: { data: string }) {
return (
<Box>
<NavbarDetailAnnouncement />
<DetailAnnouncement id={data} />
</Box>
)
}

5
src/module/user/member/ui/list_member.tsx
View File

@@ -13,6 +13,7 @@ export default function ListMember() {
const router = useRouter();
const searchParams = useSearchParams();
const status = searchParams.get("active");
const group = searchParams.get("group");
return (
<Box p={20}>
@@ -35,7 +36,7 @@ export default function ListMember() {
w={"45%"}
leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
onClick={() => {
router.push("/member?active=true");
router.push("/member?active=true&group=" + group);
}}
>
Aktif
@@ -45,7 +46,7 @@ export default function ListMember() {
w={"53%"}
leftSection={<IoCloseCircleOutline style={iconStyle} />}
onClick={() => {
router.push("/member?active=false");
router.push("/member?active=false&group=" + group);
}}
>
Tidak Aktif