From c6afef08fe92752940593589009419cfce3671c8 Mon Sep 17 00:00:00 2001 From: lukman Date: Mon, 9 Sep 2024 16:35:20 +0800 Subject: [PATCH] style : update style Deskripsi: - update api division - update layout - update global - update auth - update division - update home - update task No Issue --- src/app/api/division/route.ts | 2 +- src/app/layout.tsx | 4 +- src/module/_global/index.ts | 2 + .../_global/layout/layout_modal_view_file.tsx | 67 ++++-- src/module/_global/layout/no_zoom.tsx | 10 + .../varification/view/view_verification.tsx | 1 + .../division_new/ui/create_division.tsx | 56 +++-- .../ui/feature_detail_division.tsx | 2 +- src/module/division_new/ui/list_document.tsx | 2 +- .../division_new/ui/navbar_admin_division.tsx | 75 ++++--- .../division_new/ui/navbar_create_users.tsx | 207 ++++++++++++------ src/module/home/ui/features.tsx | 2 +- src/module/home/ui/view_detail_feature.tsx | 2 +- src/module/project/ui/tab_project.tsx | 8 +- src/module/task/ui/tabs_division_task.tsx | 57 ++++- 15 files changed, 354 insertions(+), 143 deletions(-) create mode 100644 src/module/_global/layout/no_zoom.tsx diff --git a/src/app/api/division/route.ts b/src/app/api/division/route.ts index f52e24d..cc52a2d 100644 --- a/src/app/api/division/route.ts +++ b/src/app/api/division/route.ts @@ -127,7 +127,7 @@ export async function POST(request: Request) { const dataMember = sent.member.map((v: any) => ({ - ..._.omit(v, ["idUser", "name"]), + ..._.omit(v, ["idUser", "name", "img"]), idUser: v.idUser, idDivision: data.id, isAdmin: sent.admin.some((i: any) => i == v.idUser) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5f1665c..fe6ab8c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -30,12 +30,14 @@ export default function RootLayout({ return ( + diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts index bde645d..fc422a0 100644 --- a/src/module/_global/index.ts +++ b/src/module/_global/index.ts @@ -14,6 +14,7 @@ import LayoutLogin from "./layout/layout_login"; import LayoutModalViewFile from "./layout/layout_modal_view_file"; import LayoutNavbarHome from "./layout/layout_navbar_home"; import LayoutNavbarNew from "./layout/layout_navbar_new"; +import NoZoom from "./layout/no_zoom"; import ViewFilter from "./view/view_filter"; export { WARNA }; @@ -34,3 +35,4 @@ export { SkeletonDetailListTugasTask } export { LayoutModalViewFile } export { globalRole } export { WrapLayout } +export { NoZoom } diff --git a/src/module/_global/layout/layout_modal_view_file.tsx b/src/module/_global/layout/layout_modal_view_file.tsx index 0462b15..a895d3c 100644 --- a/src/module/_global/layout/layout_modal_view_file.tsx +++ b/src/module/_global/layout/layout_modal_view_file.tsx @@ -1,12 +1,22 @@ 'use client' -import { Image, Modal } from '@mantine/core'; +import { Box, Button, Flex, Image, Modal, rem } from '@mantine/core'; import dynamic from 'next/dynamic'; import React, { useState } from 'react'; const PdfToImage = dynamic(() => import('./../components/pdf_viewer').then((mod) => mod.default), { ssr: false }); export default function LayoutModal({ opened, onClose, extension, fitur, file }: { opened: boolean, onClose: () => void, extension: string, fitur: string, file: string }) { const [isValModal, setValModal] = useState(opened) + const [zoom, setZoom] = useState(1) const filePdf = '/file/' + fitur + '/' + file + + const handleZoomIn = () => { + setZoom(zoom + 0.1) + } + + const handleZoomOut = () => { + setZoom(zoom - 0.1) + } + return ( + : - {file} - } + style={{ + background: 'white', + zIndex: 999, + }} + > + + + + + + +
+ { + extension === 'pdf' ? : + {file} + } +
+ ); } diff --git a/src/module/_global/layout/no_zoom.tsx b/src/module/_global/layout/no_zoom.tsx new file mode 100644 index 0000000..88fcfd3 --- /dev/null +++ b/src/module/_global/layout/no_zoom.tsx @@ -0,0 +1,10 @@ +// components/NoZoom.js +import Head from 'next/head'; + +export default function NoZoom() { + return ( + + + + ); +} diff --git a/src/module/auth/varification/view/view_verification.tsx b/src/module/auth/varification/view/view_verification.tsx index dea2ef2..374c099 100644 --- a/src/module/auth/varification/view/view_verification.tsx +++ b/src/module/auth/varification/view/view_verification.tsx @@ -74,6 +74,7 @@ JANGAN BERIKAN KODE RAHASIA ini kepada siapa pun TERMASUK PIHAK DARMASABA. Masuk { if (val) { member.set([]) - setBody({ - ...body, - idGroup: "", - name: "", - desc: "", - }) + // setBody({ + // ...body, + // idGroup: "", + // name: "", + // desc: "", + // }) } setChooseAdmin(false) @@ -187,24 +189,32 @@ export default function CreateDivision() { Belum ada anggota ) : member.get().map((v: any, i: any) => { return ( - - - - - - {v.name} + + + + + + + + {v.name} + + + + + + + Anggota - - - - Anggota - - + + + + + + ); })} diff --git a/src/module/division_new/ui/feature_detail_division.tsx b/src/module/division_new/ui/feature_detail_division.tsx index 18a90da..73be8d6 100644 --- a/src/module/division_new/ui/feature_detail_division.tsx +++ b/src/module/division_new/ui/feature_detail_division.tsx @@ -53,7 +53,7 @@ export default function FeatureDetailDivision() { border: `1px solid ${WARNA.bgHijauMuda}`, borderRadius: 10, padding: 10 - }} onClick={() => router.push(param.id + '/task')}> + }} onClick={() => router.push(param.id + '/task?status=0')}> - router.push(`/document`)}> + router.push(`/division/${param.id}/document`)}>
diff --git a/src/module/division_new/ui/navbar_admin_division.tsx b/src/module/division_new/ui/navbar_admin_division.tsx index 345fe11..8395788 100644 --- a/src/module/division_new/ui/navbar_admin_division.tsx +++ b/src/module/division_new/ui/navbar_admin_division.tsx @@ -1,10 +1,10 @@ "use client" import { LayoutNavbarNew, WARNA } from '@/module/_global'; import { useHookstate } from '@hookstate/core'; -import { Avatar, Box, Button, Checkbox, Divider, Flex, Group, Stack, Text, TextInput } from '@mantine/core'; +import { ActionIcon, Avatar, Box, Button, Checkbox, Divider, Flex, Grid, Group, rem, Stack, Text, TextInput } from '@mantine/core'; import { useRouter } from 'next/navigation'; import React, { useState } from 'react'; -import { HiMagnifyingGlass } from 'react-icons/hi2'; +import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2'; import toast from 'react-hot-toast'; import { globalMemberDivision } from '../lib/val_division'; import { funCreateDivision } from '../lib/api_division'; @@ -26,6 +26,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on if (response.success) { toast.success(response.message); + router.push("/division") onSuccess(true) } else { toast.error(response.message) @@ -41,7 +42,10 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on return ( - + + + } /> { return ( - - - - - - {v.name} - - - - - - + + + + + + {v.name} + + + + + + + + + + + + + ); }) } - - - + + + ); diff --git a/src/module/division_new/ui/navbar_create_users.tsx b/src/module/division_new/ui/navbar_create_users.tsx index 550105d..67ff24a 100644 --- a/src/module/division_new/ui/navbar_create_users.tsx +++ b/src/module/division_new/ui/navbar_create_users.tsx @@ -1,15 +1,18 @@ "use client" -import { LayoutNavbarNew, WARNA } from '@/module/_global'; +import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global'; import { useHookstate } from '@hookstate/core'; -import { Avatar, Box, Button, Center, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core'; +import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core'; import { useShallowEffect } from '@mantine/hooks'; import { useRouter } from 'next/navigation'; import React, { useState } from 'react'; -import { HiMagnifyingGlass } from 'react-icons/hi2'; +import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2'; import { funGetAllmember, TypeUser } from '@/module/user'; import { funGetUserByCookies } from '@/module/auth'; import toast from 'react-hot-toast'; import { globalMemberDivision } from '../lib/val_division'; +import { IoArrowBackOutline, IoClose } from 'react-icons/io5'; +import { Carousel } from '@mantine/carousel'; +import { FaCheck } from 'react-icons/fa6'; export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) { @@ -18,12 +21,13 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on const [selectedFiles, setSelectedFiles] = useState([]); const [dataMember, setDataMember] = useState([]) const [loading, setLoading] = useState(true) + const [onClickSearch, setOnClickSearch] = useState(false) const handleFileClick = (index: number) => { if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) { setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != dataMember[index].id)) } else { - setSelectedFiles([...selectedFiles, { idUser: dataMember[index].id, name: dataMember[index].name }]) + setSelectedFiles([...selectedFiles, { idUser: dataMember[index].id, name: dataMember[index].name, img: dataMember[index].img }]) } }; @@ -59,72 +63,147 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on loadData("") }, []); + const handleSearchClick = () => { + setOnClickSearch(true); + }; + + const handleClose = () => { + setOnClickSearch(false); + }; + + function handleXMember(id: number) { + setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != id)) + } + return ( - + + { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> + + + + } title="Pilih Anggota" + menu={ + + } /> + {/* SEARCH */} + {onClickSearch + ? ( + + + + + + + + + loadData(e.target.value)} + /> + + + + ) + : null + } + {/* Close User */} + + {selectedFiles.length > 0 ? ( + + {selectedFiles.map((v: any, i: any) => { + return ( + + { handleXMember(v.idUser) }} + > +
+ }> + + +
+ {v.name} + + + ) + })} + + ) : ( + + + Tidak ada anggota yang dipilih + + + )} + - } - placeholder="Pencarian" - onChange={(e) => loadData(e.target.value)} - /> - + {loading ? - - {Array(6) - .fill(null) - .map((_, i) => ( - - + Array(6) + .fill(null) + .map((_, i) => ( + + + + )) + : dataMember.map((v, index) => { + const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id); + return ( + handleFileClick(index)}> + + + + + + + + {v.name} + + {isSelected ? : null} + + + + + - ))} - - : - - - {dataMember.map((v, index) => { - const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id); - return ( - - handleFileClick(index)} - > -
- -
- - {v.name} - - - - ); - })} - - + + ); + }) } diff --git a/src/module/home/ui/features.tsx b/src/module/home/ui/features.tsx index 5e04cf7..8a489d5 100644 --- a/src/module/home/ui/features.tsx +++ b/src/module/home/ui/features.tsx @@ -28,7 +28,7 @@ export default function Features() { Divisi
- router.push('/project')}> + router.push('/project?status=0&group=null')}>
Divisi
- router.push('/project')}> + router.push('/project?status=0&group=null')}>
}, { id: "1", - title: "Segera", + title: "Dikerjakan", icon: }, { id: "2", - title: "Dikerjakan", + title: "Selesai", icon: }, { id: "3", - title: "Selesai", + title: "Batal", icon: } ] diff --git a/src/module/task/ui/tabs_division_task.tsx b/src/module/task/ui/tabs_division_task.tsx index ac2151c..1519ae6 100644 --- a/src/module/task/ui/tabs_division_task.tsx +++ b/src/module/task/ui/tabs_division_task.tsx @@ -1,11 +1,13 @@ 'use client' -import { Box, rem, Tabs } from "@mantine/core"; +import { Box, Button, rem, Tabs } from "@mantine/core"; import { IoIosCheckmarkCircleOutline } from "react-icons/io"; import { IoCloseCircleOutline } from "react-icons/io5"; import { RiProgress3Line } from "react-icons/ri"; import { TbClockPause } from "react-icons/tb"; import ListDivisionTask from "./list_division_task"; import { useRouter, useSearchParams } from "next/navigation"; +import { Carousel } from "@mantine/carousel"; +import { WARNA } from "@/module/_global"; export default function TabsDivisionTask() { const iconStyle = { width: rem(20), height: rem(20) }; @@ -13,9 +15,32 @@ export default function TabsDivisionTask() { const searchParams = useSearchParams() const status = searchParams.get('status') + const dataStatus = [ + { + id: "0", + title: "Segera", + icon: + }, + { + id: "1", + title: "Dikerjakan", + icon: + }, + { + id: "2", + title: "Selesai", + icon: + }, + { + id: "3", + title: "Batal", + icon: + } + ] + return ( - + {/* - + */} + + {dataStatus.map((item, index) => ( + + + + ))} + + ) } \ No newline at end of file