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

Merge pull request #256 from bipproduction/lukman/25-september-2024

Browse Source 
style : update style
This commit is contained in:
Amalia
2024-09-25 17:34:55 +08:00
committed by GitHub
parent 71056fa450 7f072786ba
commit d1d95a370c
5 changed files with 117 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/module/calender/ui/create_user_calender.tsx
View File

@@ -4,9 +4,9 @@ import { useParams, useRouter } from 'next/navigation';
import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new'; import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global'; import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Text, TextInput } from '@mantine/core'; import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
import { FaCheck } from 'react-icons/fa6'; import { FaCheck } from 'react-icons/fa6';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2'; import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5'; import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
@@ -23,6 +23,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
const [onClickSearch, setOnClickSearch] = useState(false) const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function getData() { async function getData() {
try { try {
@@ -168,8 +169,8 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
) )
: null : null
} }
{/* Close User */} {/* Close User */}
<Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{ <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
maxWidth: rem(550), maxWidth: rem(550),
zIndex: 100, zIndex: 100,
backgroundColor: `${tema.get().bgUtama}`, backgroundColor: `${tema.get().bgUtama}`,
@@ -208,50 +209,70 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
)} )}
</Box> </Box>
<Box p={20}> <Box p={20} mt={80}>
<Group justify="space-between" mt={100} onClick={handleSelectAll}> {/* <Group justify="space-between" mt={100} onClick={handleSelectAll}>
<Text c={tema.get().utama} fw={"bold"}> <Text c={tema.get().utama} fw={"bold"}>
Pilih Semua Anggota Pilih Semua Anggota
</Text> </Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""} {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group> </Group> */}
{loading ? {loading ?
Array(8) Array(8)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i}>
<SkeletonSingle /> <SkeletonList />
</Box> </Box>
)) ))
: :
<Box mt={20} mb={100}> (isData.length === 0) ?
{isData.map((v, i) => { <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
return ( </Stack>
<Box mb={15} key={i} onClick={() => handleFileClick(i)}> :
<Grid align='center' gutter={{ <Box mt={20} mb={100}>
base: 60, {isData.map((v, i) => {
xl: "xs" const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
}}> return (
<Grid.Col span={2}> <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" /> <Grid align='center'>
</Grid.Col> <Grid.Col
<Grid.Col span={10}> span={{
<Flex justify='space-between' align={"center"}> base: 1,
<Flex direction={'column'} align="flex-start" justify="flex-start"> xs: 1,
<Text lineClamp={1}>{v.name}</Text> sm: 1,
md: 1,
lg: 1,
xl: 1,
}}
>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col
span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}
>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex> </Flex>
{isSelected ? <FaCheck /> : null} </Grid.Col>
</Flex> </Grid>
</Grid.Col> <Box mt={10}>
</Grid> <Divider size={"xs"} />
<Box mt={10}> </Box>
<Divider size={"xs"} />
</Box> </Box>
</Box> );
); })}
})} </Box>
</Box>
} }
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{

91
src/module/calender/ui/create_user_detail_calender.tsx
View File

@@ -3,9 +3,9 @@ import React, { useState } from 'react';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new'; import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global'; import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Text, TextInput } from '@mantine/core'; import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
import { FaCheck } from 'react-icons/fa6'; import { FaCheck } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2'; import { HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5'; import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
@@ -26,6 +26,7 @@ export default function CreateUserDetailCalender() {
const [onClickSearch, setOnClickSearch] = useState(false) const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function getData() { async function getData() {
try { try {
@@ -215,52 +216,72 @@ export default function CreateUserDetailCalender() {
)} )}
</Box> </Box>
<Box p={20}> <Box p={20} mt={80}>
<Group justify="space-between" mt={100} onClick={handleSelectAll}> {/* <Group justify="space-between" mt={100} onClick={handleSelectAll}>
<Text c={tema.get().utama} fw={"bold"}> <Text c={tema.get().utama} fw={"bold"}>
Pilih Semua Anggota Pilih Semua Anggota
</Text> </Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""} {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group> </Group> */}
{loading ? {loading ?
Array(8) Array(8)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i}>
<SkeletonSingle /> <SkeletonList />
</Box> </Box>
)) ))
: :
<Box mt={20} mb={100}> (isData.length === 0) ?
{isData.map((v, i) => { <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
const found = isDataAnggota.some((i: any) => i.idUser == v.idUser) </Stack>
return ( :
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}> <Box mt={20} mb={100}>
<Grid align='center' gutter={{ {isData.map((v, i) => {
base: 60, const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
xl: "xs" const found = isDataAnggota.some((i: any) => i.idUser == v.idUser)
}}> return (
<Grid.Col span={2}> <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" /> <Grid align='center'>
</Grid.Col> <Grid.Col
<Grid.Col span={10}> span={{
<Flex justify='space-between' align={"center"}> base: 1,
<Flex direction={'column'} align="flex-start" justify="flex-start"> xs: 1,
<Text lineClamp={1}>{v.name}</Text> sm: 1,
<Text c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota" : ""}</Text> md: 1,
lg: 1,
xl: 1,
}}
>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col
span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}
>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
<Text c={"dimmed"} lineClamp={1} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex> </Flex>
{isSelected ? <FaCheck /> : null} </Grid.Col>
</Flex> </Grid>
</Grid.Col> <Box mt={10}>
</Grid> <Divider size={"xs"} />
<Box mt={10}> </Box>
<Divider size={"xs"} />
</Box> </Box>
</Box> );
); })}
})} </Box>
</Box>
} }
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{

4
src/module/calender/ui/history_division_calender.tsx
View File

@@ -62,7 +62,7 @@ export default function HistoryDivisionCalender() {
<Box bg={tema.get().bgTotalKegiatan} style={{ <Box bg={tema.get().bgTotalKegiatan} style={{
borderRadius: 10, borderRadius: 10,
padding: 20 padding: 20
}}> }} h={"100vh"}>
{loading ? {loading ?
Array(6) Array(6)
.fill(null) .fill(null)
@@ -90,7 +90,7 @@ export default function HistoryDivisionCalender() {
_.isEmpty(isData) _.isEmpty(isData)
? ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}> <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada history</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Acara</Text>
</Box> </Box>
: :
isData.map((v, i) => { isData.map((v, i) => {

4
src/module/discussion/ui/form_create_discussion.tsx
View File

@@ -70,7 +70,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
return ( return (
<Box > <Box >
<Box p={20} > <Box p={20} >
<Grid gutter={0} pt={10}> <Grid pt={10}>
<Grid.Col span={2}> <Grid.Col span={2}>
<Avatar src={img} alt="it's me" size="lg" /> <Avatar src={img} alt="it's me" size="lg" />
</Grid.Col> </Grid.Col>
@@ -82,7 +82,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
input: { input: {
border: 'none', border: 'none',
backgroundColor: 'transparent', backgroundColor: 'transparent',
height: "70vh" height: "50vh"
} }
}} }}
value={isData.desc} value={isData.desc}

2
src/module/discussion/ui/form_edit_discussion.tsx
View File

@@ -107,7 +107,7 @@ export default function FormEditDiscussion() {
input: { input: {
border: 'none', border: 'none',
backgroundColor: 'transparent', backgroundColor: 'transparent',
height: "70vh" height: "50vh"
} }
}} }}
value={isDataOne} value={isDataOne}