338 lines
12 KiB
TypeScript
338 lines
12 KiB
TypeScript
"use client";
|
|
import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
|
|
import {
|
|
ActionIcon,
|
|
Avatar,
|
|
Box,
|
|
Divider,
|
|
Grid,
|
|
Group,
|
|
Text,
|
|
TextInput,
|
|
} from "@mantine/core";
|
|
import React, { useState } from "react";
|
|
import {
|
|
HiMagnifyingGlass,
|
|
HiMiniPresentationChartBar,
|
|
HiMiniUserGroup,
|
|
} from "react-icons/hi2";
|
|
import { funGetSearchAll } from "../lib/api_search";
|
|
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
|
|
import {
|
|
IDataDivisionSearch,
|
|
IDataProjectSearch,
|
|
IDataUserSearch,
|
|
} from "../lib/type_search";
|
|
import { useRouter } from "next/navigation";
|
|
import _ from "lodash";
|
|
import { useHookstate } from "@hookstate/core";
|
|
|
|
export default function ViewSearch() {
|
|
const [search, setSearch] = useState("");
|
|
const [dataUser, setDataUser] = useState<IDataUserSearch[]>([]);
|
|
const [dataProject, setDataProject] = useState<IDataProjectSearch[]>([]);
|
|
const [dataDivision, setDataDivision] = useState<IDataDivisionSearch[]>([]);
|
|
const router = useRouter();
|
|
const tema = useHookstate(TEMA);
|
|
|
|
async function featchSearch() {
|
|
try {
|
|
const res = await funGetSearchAll("?search=" + search);
|
|
setDataUser(res.data.user);
|
|
setDataProject(res.data.project);
|
|
setDataDivision(res.data.division);
|
|
} catch (error) {
|
|
console.error(error);
|
|
throw new Error("Error");
|
|
}
|
|
}
|
|
|
|
useShallowEffect(() => {
|
|
if (search != "") {
|
|
featchSearch();
|
|
} else {
|
|
setDataUser([]);
|
|
setDataProject([]);
|
|
setDataDivision([]);
|
|
}
|
|
}, [search]);
|
|
const isMobile2 = useMediaQuery("(max-width: 460px)");
|
|
|
|
return (
|
|
<>
|
|
<LayoutNavbarNew back="/home" title="Pencarian" menu={<></>} />
|
|
<Box p={20}>
|
|
<TextInput
|
|
styles={{
|
|
input: {
|
|
color: tema.get().utama,
|
|
borderRadius: tema.get().utama,
|
|
borderColor: tema.get().utama,
|
|
},
|
|
}}
|
|
size="md"
|
|
radius={30}
|
|
leftSection={<HiMagnifyingGlass size={20} />}
|
|
placeholder="Pencarian"
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
{dataUser.length || dataProject.length || dataDivision.length > 0 ? (
|
|
<Box pt={20}>
|
|
<Box
|
|
style={{
|
|
border: `1px solid ${WARNA.borderBiruMuda}`,
|
|
padding: 10,
|
|
borderRadius: 10,
|
|
}}
|
|
>
|
|
{dataUser.length > 0 ? (
|
|
<Box>
|
|
<Text>ANGGOTA</Text>
|
|
<Box
|
|
style={{
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
paddingTop: 10,
|
|
paddingBottom: 10,
|
|
backgroundColor: `#E7EBF1`,
|
|
borderRadius: 5,
|
|
}}
|
|
>
|
|
{dataUser.length > 0 ? (
|
|
<Box mt={5}>
|
|
{dataUser.map((v, i) => {
|
|
return (
|
|
<Box key={i}>
|
|
<Box
|
|
onClick={() => {
|
|
router.push(`/member/${v.id}`);
|
|
}}
|
|
>
|
|
<Grid align="center">
|
|
<Grid.Col
|
|
span={{
|
|
base: 1.5,
|
|
xs: 1.5,
|
|
sm: 1.5,
|
|
md: 1.5,
|
|
lg: 1.5,
|
|
xl: 1.5,
|
|
}}
|
|
>
|
|
<Avatar
|
|
src={`https://wibu-storage.wibudev.com/api/files/${v.img}`}
|
|
size={50}
|
|
alt="image"
|
|
/>
|
|
</Grid.Col>
|
|
<Grid.Col
|
|
span={{
|
|
base: 10,
|
|
xs: 10.5,
|
|
sm: 10.5,
|
|
md: 10.5,
|
|
lg: 10.5,
|
|
xl: 10.5,
|
|
}}
|
|
pl={isMobile2 ? 30 : 20}
|
|
>
|
|
<Text
|
|
fw={"bold"}
|
|
c={tema.get().utama}
|
|
truncate="end"
|
|
>
|
|
{_.startCase(v.name)}
|
|
</Text>
|
|
<Text fw={"lighter"} fz={12} truncate="end">
|
|
{v.group + " - " + v.position}
|
|
</Text>
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Box>
|
|
<Divider my={10} />
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
) : null}
|
|
</Box>
|
|
</Box>
|
|
) : null}
|
|
|
|
{dataDivision.length > 0 ? (
|
|
<Box mt={10}>
|
|
<Text>DIVISI</Text>
|
|
<Box
|
|
style={{
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
paddingTop: 10,
|
|
paddingBottom: 10,
|
|
backgroundColor: `#E7EBF1`,
|
|
borderRadius: 5,
|
|
}}
|
|
>
|
|
{dataDivision.length > 0 ? (
|
|
<Box>
|
|
{dataDivision.map((v, i) => {
|
|
return (
|
|
<Box
|
|
key={i}
|
|
onClick={() => router.push(`/division/${v.id}`)}
|
|
>
|
|
<Grid align="center" mt={15}>
|
|
<Grid.Col
|
|
span={{
|
|
base: 1.5,
|
|
xs: 1.5,
|
|
sm: 1.5,
|
|
md: 1.5,
|
|
lg: 1.5,
|
|
xl: 1.5,
|
|
}}
|
|
>
|
|
<ActionIcon
|
|
variant="light"
|
|
bg={tema.get().utama}
|
|
size={50}
|
|
radius={100}
|
|
aria-label="icon"
|
|
>
|
|
<HiMiniUserGroup
|
|
color={"white"}
|
|
size={25}
|
|
/>
|
|
</ActionIcon>
|
|
</Grid.Col>
|
|
<Grid.Col
|
|
span={{
|
|
base: 10,
|
|
xs: 10.5,
|
|
sm: 10.5,
|
|
md: 10.5,
|
|
lg: 10.5,
|
|
xl: 10.5,
|
|
}}
|
|
pl={isMobile2 ? 30 : 20}
|
|
>
|
|
<Box
|
|
>
|
|
<Text
|
|
fw={"bold"}
|
|
c={tema.get().utama}
|
|
truncate="end"
|
|
>
|
|
{v.name.toUpperCase()}
|
|
</Text>
|
|
</Box>
|
|
<Text fw={"lighter"} fz={12} truncate="end">
|
|
{v.group}
|
|
</Text>
|
|
</Grid.Col>
|
|
</Grid>
|
|
<Text
|
|
fw={"lighter"}
|
|
mt={10}
|
|
mb={10}
|
|
lineClamp={2}
|
|
>
|
|
{v.desc}
|
|
</Text>
|
|
<Divider my={5} />
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
) : null}
|
|
</Box>
|
|
</Box>
|
|
) : null}
|
|
|
|
{dataProject.length > 0 ? (
|
|
<Box mt={10}>
|
|
<Text>KEGIATAN</Text>
|
|
<Box
|
|
style={{
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
paddingTop: 10,
|
|
paddingBottom: 10,
|
|
backgroundColor: `#E7EBF1`,
|
|
borderRadius: 5,
|
|
}}
|
|
>
|
|
{dataProject.length > 0 ? (
|
|
<Box>
|
|
{dataProject.map((v, i) => {
|
|
return (
|
|
<Box
|
|
key={i}
|
|
onClick={() => router.push(`/project/${v.id}`)}
|
|
>
|
|
<Grid justify="center" align="center" mt={10}>
|
|
<Grid.Col
|
|
span={{
|
|
base: 1.5,
|
|
xs: 1.5,
|
|
sm: 1.5,
|
|
md: 1.5,
|
|
lg: 1.5,
|
|
xl: 1.5,
|
|
}}
|
|
>
|
|
<ActionIcon
|
|
variant="light"
|
|
bg={tema.get().utama}
|
|
size={50}
|
|
radius={100}
|
|
aria-label="icon"
|
|
>
|
|
<HiMiniPresentationChartBar
|
|
color={"white"}
|
|
size={25}
|
|
/>
|
|
</ActionIcon>
|
|
</Grid.Col>
|
|
<Grid.Col
|
|
span={{
|
|
base: 10,
|
|
xs: 10.5,
|
|
sm: 10.5,
|
|
md: 10.5,
|
|
lg: 10.5,
|
|
xl: 10.5,
|
|
}}
|
|
pl={isMobile2 ? 30 : 20}
|
|
>
|
|
<Box
|
|
>
|
|
<Text
|
|
fw={"bold"}
|
|
c={tema.get().utama}
|
|
truncate="end"
|
|
>
|
|
{v.title.toUpperCase()}
|
|
</Text>
|
|
</Box>
|
|
<Text fw={"lighter"} fz={12} truncate="end">
|
|
{v.group}
|
|
</Text>
|
|
</Grid.Col>
|
|
</Grid>
|
|
<Divider mt={10} />
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
) : null}
|
|
</Box>
|
|
</Box>
|
|
) : null}
|
|
</Box>
|
|
</Box>
|
|
) : null}
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|