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

feat : update filter dll

Browse Source 
Deskripsi
- position
- project
- announcement
- calneder
- division
- document
- home

No Issue
This commit is contained in:
lukman
2024-08-29 15:52:54 +08:00
parent 390c46e2da
commit e2df0beb9f
16 changed files with 444 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/module/home/lib/type_search.ts
View File

@@ -0,0 +1,16 @@
export interface IDataUserSearch {
id: string
name: string
email: string
}
export interface IDataDivisionSearch {
id: string
title: string
}
export interface IDataProjectSearch {
id: string
name: string
desc: string
}

130
src/module/home/ui/view_search.tsx
View File

@@ -1,16 +1,17 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Box, TextInput } from '@mantine/core';
import { ActionIcon, Box, Divider, Grid, Group, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { HiMagnifyingGlass, HiMiniUser } from 'react-icons/hi2';
import { funGetSearchAll } from '../lib/api_search';
import { useShallowEffect } from '@mantine/hooks';
import { IDataDivisionSearch, IDataProjectSearch, IDataUserSearch } from '../lib/type_search';
export default function ViewSearch() {
const [search, setSearch] = useState('');
const [dataUser, setDataUser] = useState([]);
const [dataProject, setDataProject] = useState([]);
const [dataDivision, setDataDivision] = useState([]);
const [dataUser, setDataUser] = useState<IDataUserSearch[]>([]);
const [dataProject, setDataProject] = useState<IDataDivisionSearch[]>([]);
const [dataDivision, setDataDivision] = useState<IDataProjectSearch[]>([]);
async function featchSearch() {
try {
@@ -25,7 +26,9 @@ export default function ViewSearch() {
}
useShallowEffect(() => {
featchSearch()
if (search !== '') {
featchSearch()
}
}, [search])
return (
@@ -46,10 +49,117 @@ export default function ViewSearch() {
placeholder="Pencarian"
onChange={(e) => setSearch(e.target.value)}
/>
{/* <pre>{JSON.stringify(dataUser, null, 1)}</pre>
<pre>{JSON.stringify(dataProject, null, 1)}</pre>
<pre>{JSON.stringify(dataDivision, null, 1)}</pre> */}
{dataUser.length || dataProject.length || dataDivision.length > 0 ? (
<Box pt={20}>
<Box style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
padding: 10,
borderRadius: 10,
}}>
<Text>ANGGOTA</Text>
{dataUser.length > 0 ? (
<Box>
{dataUser.map((v, i) => {
return (
<Box key={i}>
<Group align='center' style={{
padding: 10,
}} >
<Box>
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
<HiMiniUser color={'white'} size={25} />
</ActionIcon>
</Box>
<Box>
<Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
<Text fw={'lighter'} fz={12}>{v.email}</Text>
</Box>
</Group>
<Divider my={5} />
</Box>
)
})}
</Box>
) :
<Text>Tidak Ada Anggota</Text>
}
<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}>
<Grid justify='center' align='center' mt={15}>
<Grid.Col span={"auto"}>
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
<HiMiniUser color={'white'} size={25} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={10}>
<Text fw={'bold'} c={WARNA.biruTua}>{v.name.toUpperCase()}</Text>
</Grid.Col>
</Grid>
<Text fw={'lighter'} mt={5} 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}>
<Grid justify='center' align='center' mt={10}>
<Grid.Col span={"auto"}>
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
<HiMiniUser color={'white'} size={25} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={10}>
<Text fw={'bold'} c={WARNA.biruTua}>{v.title.toUpperCase()}</Text>
</Grid.Col>
</Grid>
<Divider mt={10} />
</Box>
)
})}
</Box>
)
: <Text>Tidak Ada Kegiatan</Text>
}
</Box>
</Box>
</Box>
</Box>
)
: null
}
</Box>
</>
);