style : update style
This commit is contained in:
lukman
@@ -1,48 +1,66 @@
|
||||
"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 { 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';
|
||||
"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 [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)
|
||||
const router = useRouter();
|
||||
const tema = useHookstate(TEMA);
|
||||
|
||||
async function featchSearch() {
|
||||
try {
|
||||
const res = await funGetSearchAll('?search=' + search);
|
||||
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")
|
||||
console.error(error);
|
||||
throw new Error("Error");
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
if (search != '') {
|
||||
featchSearch()
|
||||
if (search != "") {
|
||||
featchSearch();
|
||||
} else {
|
||||
setDataUser([]);
|
||||
setDataProject([]);
|
||||
setDataDivision([]);
|
||||
}
|
||||
}, [search])
|
||||
}, [search]);
|
||||
const isMobile2 = useMediaQuery("(max-width: 460px)");
|
||||
|
||||
return (
|
||||
<>
|
||||
<LayoutNavbarNew back='/home' title='Pencarian' menu={<></>} />
|
||||
<LayoutNavbarNew back="/home" title="Pencarian" menu={<></>} />
|
||||
<Box p={20}>
|
||||
<TextInput
|
||||
styles={{
|
||||
@@ -59,147 +77,261 @@ export default function ViewSearch() {
|
||||
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,
|
||||
}}>
|
||||
<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 gutter={{
|
||||
base: 60,
|
||||
xl: "xs"
|
||||
}} align="center">
|
||||
<Grid.Col span={2}>
|
||||
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} size={50} alt="image" />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={9}>
|
||||
<Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text>
|
||||
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Divider my={10} />
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
) :
|
||||
<Text>Tidak Ada Anggota</Text>
|
||||
}
|
||||
</Box>
|
||||
|
||||
<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 justify='center' align='center' mt={15} >
|
||||
<Grid.Col span={2}>
|
||||
<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={10}>
|
||||
<Box
|
||||
w={{
|
||||
base: 220,
|
||||
xl: 380
|
||||
}}
|
||||
>
|
||||
<Text pl={{base: 10, xl:0}} fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.name.toUpperCase()}</Text>
|
||||
</Box>
|
||||
<Text pl={{base: 10, xl:0}} fw={'lighter'} fz={12} lineClamp={1}>{v.group}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Text fw={'lighter'} mt={10} mb={10} lineClamp={2}>{v.desc}</Text>
|
||||
<Divider my={5} />
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
) :
|
||||
<Text>Tidak Ada Divisi</Text>
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
<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={2}>
|
||||
<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={10}>
|
||||
<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
|
||||
w={{
|
||||
base: 220,
|
||||
xl: 380
|
||||
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,
|
||||
}}
|
||||
>
|
||||
<Text pl={{base: 10, xl:0}} fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.title.toUpperCase()}</Text>
|
||||
</Box>
|
||||
<Text pl={{base: 10, xl:0}} fw={'lighter'} fz={12} lineClamp={1}>{v.group}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Divider mt={10} />
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
)
|
||||
: <Text>Tidak Ada Kegiatan</Text>
|
||||
}
|
||||
<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>
|
||||
</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
|
||||
}
|
||||
) : null}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user