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

style : update ui

Browse Source 
Deskripsi:
- update announcement
- update division
- update home
- update project
- update home

No Issue
This commit is contained in:
lukman
2024-09-03 14:28:17 +08:00
parent 21cfa509f4
commit bc9eb2fc1d
14 changed files with 338 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/module/announcement/ui/create_announcement.tsx
View File

@@ -75,7 +75,7 @@ export default function CreateAnnouncement() {
return (
<Box>
<LayoutNavbarNew back="" title="Tambah Pengumuman" menu={<></>} />
<LayoutNavbarNew back="/announcement/" title="Tambah Pengumuman" menu={<></>} />
<Stack
p={20}
>

152
src/module/announcement/ui/create_users_announcement.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { funGetGroupDivision } from '@/module/group/lib/api_group';
import { Box, Button, Divider, Flex, Group, Stack, Text } from '@mantine/core';
import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react';
import { FaCheck } from 'react-icons/fa';
@@ -22,6 +22,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
const [selectAll, setSelectAll] = useState(false);
const [isData, setIsData] = useState<GroupData[]>([])
const memberGroup = useHookstate(globalMemberAnnouncement)
const [loading, setLoading] = useState(false)
const handleCheck = (groupId: string, divisionId: string) => {
const newChecked = { ...checked };
@@ -70,6 +71,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
};
async function getData() {
setLoading(true)
const response = await funGetGroupDivision()
setIsData(response.data)
@@ -81,6 +83,8 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
setChecked(formatArray)
}
setLoading(false)
}
const handleSubmit = () => {
@@ -121,75 +125,89 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
Pilih Semua
</Text>
</Group>
{isData.map((item) => (
<Stack mb={30} key={item.id}>
<Group onClick={() => handleGroupCheck(item.id)} justify='space-between' align='center'>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}
fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
>
{item.name}
</Text>
<Text
>
{checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
: (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
</Text>
</Group>
<Divider />
{item.Division.map((division) => (
<Box key={division.id}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{division.name}
</Text>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{checked[item.id] && checked[item.id].includes(division.id) ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Group>
<Box pt={15}>
<Divider />
{loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<Skeleton mt={20} h={20}/>
<Skeleton mt={20} h={20} ml={20}/>
<Skeleton mt={20} h={20} ml={20}/>
<Skeleton mt={20} h={20} ml={20}/>
</Box>
))
:
isData.map((item) => (
<Stack mb={30} key={item.id}>
<Group onClick={() => handleGroupCheck(item.id)} justify='space-between' align='center'>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}
fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
lineClamp={1}
>
{item.name}
</Text>
<Text
>
{checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
: (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
</Text>
</Group>
<Divider />
{item.Division.map((division) => (
<Box key={division.id}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Box w={{
base: 280,
xl: 430
}}>
<Text truncate="end" pl={20}>
{division.name}
</Text>
</Box>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{checked[item.id] && checked[item.id].includes(division.id) ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Group>
<Box pt={15}>
<Divider />
</Box>
</Box>
</Box>
))}
</Stack>
))}
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
handleSubmit()
}}
>
Simpan
</Button>
</Box>
))}
</Stack>
))
}
</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={() => {
handleSubmit()
}}
>
Simpan
</Button>
</Box>
</div>
);

32
src/module/announcement/ui/detail_announcement.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { ActionIcon, Box, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core";
import { ActionIcon, Box, Center, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import { BsCardText } from "react-icons/bs";
@@ -78,15 +78,25 @@ export default function DetailAnnouncement({ id }: { id: string }) {
</Stack>
:
<Stack>
<Group>
<TfiAnnouncement size={25} />
<Text fw={'bold'}>{isData?.title}</Text>
</Group>
<Grid gutter={'md'}>
<Grid.Col span={1}>
<BsCardText size={25} />
<Grid.Col span={2}>
<Center>
<TfiAnnouncement size={30} />
</Center>
</Grid.Col>
<Grid.Col span={11}>
<Grid.Col span={10}>
<Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text fw={'bold'}>{isData?.title}</Text>
</Spoiler>
</Grid.Col>
</Grid>
<Grid gutter={'md'}>
<Grid.Col span={2}>
<Center>
<BsCardText size={30} />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text>{isData?.desc}</Text>
</Spoiler>
@@ -108,10 +118,12 @@ export default function DetailAnnouncement({ id }: { id: string }) {
return (
<Box key={i} mb={10}>
<Text>{isMember[v]?.[0].group}</Text>
<List>
<List ml={10}>
{
isMember[v].map((item: any, x: any) => {
return <List.Item key={x}>{item.division}</List.Item>
return <List.Item key={x}>
<Text lineClamp={1}>{item.division}</Text>
</List.Item>
})
}
</List>

42
src/module/announcement/ui/edit_announcement.tsx
View File

@@ -1,23 +1,25 @@
'use client'
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Button, Flex, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { Box, Button, Flex, Group, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiOutlineChevronRight } from "react-icons/hi2";
import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement";
import { useParams } from "next/navigation";
import { useParams, useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core";
import { globalMemberEditAnnouncement } from "../lib/val_announcement";
import { GroupData, GroupDataEditAnnouncement } from "../lib/type_announcement";
import EditChooseMember from "./edit_choose_member";
import { IoIosArrowForward } from "react-icons/io";
export default function EditAnnouncement() {
const [isOpen, setOpen] = useState(false)
const [isChooseDivisi, setChooseDivisi] = useState(false)
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const router = useRouter()
const [touched, setTouched] = useState({
title: false,
desc: false
@@ -89,6 +91,7 @@ export default function EditAnnouncement() {
if (response.success) {
toast.success(response.message)
router.push(`/announcement/${param.id}`)
} else {
toast.error(response.message)
}
@@ -121,7 +124,7 @@ export default function EditAnnouncement() {
<>
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={75} mt={20} radius={10} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={10} />
</>
:
<>
@@ -173,9 +176,22 @@ export default function EditAnnouncement() {
}
/>
<Button onClick={() => { setChooseDivisi(true) }} rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
Pilih Divisi
</Button>
<Box pt={10} w={"100%"}>
<Group justify="space-between" style={{
border: `1px solid ${WARNA.biruTua}`,
maxWidth: rem(550),
padding: 10,
borderRadius: 10
}}
onClick={() => { setChooseDivisi(true) }}
>
<Text size="sm">
Tambah divisi penerima pengumuman
</Text>
<IoIosArrowForward />
</Group>
</Box>
</>
}
@@ -197,11 +213,17 @@ export default function EditAnnouncement() {
return (
<Box key={i} mt={10}>
<Text fw={"bold"}>{v.name}</Text>
<Box pl={20}>
<Box pl={20} pr={10}>
<Flex direction={"column"} gap={"md"}>
{v.Division.map((division: any) => (
<li key={division.id}>{division.name}</li>
))}
<List>
{
v.Division.map((division: any) => {
return <List.Item key={division.id}>
<Text lineClamp={1}>{division.name}</Text>
</List.Item>
})
}
</List>
</Flex>
</Box>
</Box>

19
src/module/announcement/ui/edit_choose_member.tsx
View File

@@ -145,6 +145,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
alignItems: 'center',
}}
fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
lineClamp={1}
>
{item.name}
</Text>
@@ -158,16 +159,14 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
{item.Division.map((division) => (
<Box key={division.id}>
<Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{division.name}
</Text>
<Box w={{
base: 280,
xl: 430
}}>
<Text truncate="end" pl={20}>
{division.name}
</Text>
</Box>
<Text
style={{
cursor: 'pointer',

20
src/module/announcement/ui/list_announcement.tsx
View File

@@ -83,12 +83,22 @@ export default function ListAnnouncement() {
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Group justify='space-between' mb={5} onClick={() => {
<Grid onClick={() => {
router.push(`/announcement/${v.id}`)
}}>
<Text fw={'bold'} c={WARNA.biruTua}>{v.title}</Text>
<Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
</Group>
}} mb={10}>
<Grid.Col span={{
base: 7,
xl: 8
}}>
<Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{v.title}</Text>
</Grid.Col>
<Grid.Col span={{
base: 5,
xl: 4
}}>
<Text ta={"end"} fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
</Grid.Col>
</Grid>
{/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */}
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text c={WARNA.biruTua} onClick={() => {

2
src/module/announcement/ui/navbar_detail_announcement.tsx
View File

@@ -11,7 +11,7 @@ export default function NavbarDetailAnnouncement() {
const router = useRouter()
return (
<Box>
<LayoutNavbarNew back="" title="Pengumuman"
<LayoutNavbarNew back="/announcement/" title="Pengumuman"
menu={
<ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />