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

Merge pull request #182 from bipproduction/lukman/3-september-2024

Browse Source 
style : update ui
This commit is contained in:
Amalia
2024-09-03 14:30:25 +08:00
committed by GitHub
parent b437d9686b bc9eb2fc1d
commit 10d9cd54f9
14 changed files with 338 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/module/division_new/ui/create_anggota_division.tsx
View File

@@ -3,7 +3,7 @@ import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { funGetUserByCookies } from '@/module/auth';
import { funGetAllmember, TypeUser } from '@/module/user';
import { Avatar, Box, Button, Divider, Group, rem, Stack, Text, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Divider, Flex, Grid, Group, rem, Stack, Text, TextInput } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
@@ -103,56 +103,63 @@ export default function CreateAnggotaDivision() {
/>
</Stack>
{loading ?
Array(8)
.fill(null)
.map((_, i) => (
{loading ?
Array(8)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle/>
<SkeletonSingle />
</Box>
))
))
:
<Box mt={20} mb={100}>
{dataMember.map((v: any, index: any) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id)
const found = memberDb.some((i: any) => i.idUser == v.id)
return (
<Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}>
<Group justify='space-between' align='center'>
<Group>
<Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Stack align="flex-start" justify="flex-start">
<Text>{v.name}</Text>
<Text c={"dimmed"}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
</Stack>
</Group>
{isSelected ? <FaCheck /> : null}
</Group>
<Box mt={10}>
<Divider size={"xs"} />
{dataMember.map((v: any, index: any) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id)
const found = memberDb.some((i: any) => i.idUser == v.id)
return (
<Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}>
<Grid align='center' gutter={{
base: 60,
xl: "xs"
}}>
<Grid.Col span={2}>
<Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={10}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
<Text c={"dimmed"}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
</Flex>
{isSelected ? <FaCheck/> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
</Box>
)
})}
</Box>
)
})}
</Box>
}
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpen(true) }}
>
Simpan
</Button>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpen(true) }}
>
Simpan
</Button>
</Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin menambahkan anggota divisi?"
onYes={(val) => {

38
src/module/division_new/ui/information_division.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Divider, Flex, Group, Skeleton, Stack, Text } from '@mantine/core';
import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, Group, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -184,24 +184,28 @@ export default function InformationDivision() {
: member.map((v, i) => {
return (
<Box key={i}>
<Flex
justify={"space-between"}
align={"center"}
mt={10}
<Grid align='center' mt={10}
onClick={() => { onClickMember(v.id, (v.isAdmin) ? true : false), setChooseMemberName(v.name) }}
>
<Group>
<Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
{(v.isAdmin) ? 'Admin' : 'Anggota'}
</Text>
</Flex>
<Grid.Col span={9}>
<Group>
<Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box w={{
base: 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
{(v.isAdmin) ? 'Admin' : 'Anggota'}
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>

63
src/module/division_new/ui/list_division.tsx
View File

@@ -150,26 +150,45 @@ export default function ListDivision() {
data?.map((v: any, i: any) => {
return (
<Box key={i}>
<Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}>
<Group>
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
gradient={{
from: '#DFDA7C',
to: '#F2AF46',
deg: 174
}}
>
<HiMiniUserGroup size={25} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Text>{v.name}</Text>
</Group>
</Group>
<Grid align='center'>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<Group onClick={() => router.push(`/division/${v.id}`)}>
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
gradient={{
from: '#DFDA7C',
to: '#F2AF46',
deg: 174
}}
>
<HiMiniUserGroup size={25} color={WARNA.biruTua} />
</ActionIcon>
</Center>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Box>
<Box w={{
base: 280,
xl: 430
}}>
<Text truncate="end" pl={20}>
{v.name}
</Text>
</Box>
</Box>
</Grid.Col>
</Grid>
<Divider my="sm" />
</Box>
);
@@ -193,8 +212,8 @@ export default function ListDivision() {
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.name}</Title>
<Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.name}</Title>
</Flex>
</Box>
</Card.Section>