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

Merge pull request #172 from bipproduction/lukman-30-agustus-2024

Browse Source 
feat : update user
This commit is contained in:
Amalia
2024-08-30 17:20:54 +08:00
committed by GitHub
parent 0a7c8392d0 61df9959c1
commit b442e6e599
8 changed files with 258 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/module/calender/ui/date_event_division.tsx
View File

@@ -82,7 +82,7 @@ export default function DateEventDivision() {
const muncul = isListTgl.includes(coba)
return (
<Indicator color="red" offset={-3} disabled={!muncul} position='top-end' inline processing size={10} >
<Indicator color="red" offset={-3} disabled={!muncul} position='top-end' inline size={6} >
<div>{day}</div>
</Indicator>
);

7
src/module/user/member/lib/api_member.ts
View File

@@ -52,13 +52,10 @@ export const funEditStatusMember = async (path: string, data: IStatusmember) =>
}
export const funEditMember = async (path: string, data: IEditDataMember) => {
export const funEditMember = async (path: string, data: FormData) => {
const response = await fetch(`/api/user/${path}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
body: data,
});
return await response.json().catch(() => null);
}

85
src/module/user/member/lib/type_member.ts
View File

@@ -1,53 +1,54 @@
export interface IListMember {
id: string,
name: string,
nik: string,
email: string,
phone: string,
gender: string,
position: string,
group: string,
isActive: boolean
id: string,
name: string,
nik: string,
email: string,
phone: string,
gender: string,
position: string,
group: string,
img: string,
isActive: boolean
}
export interface IFormMember {
nik: string;
name: string;
phone: string;
email: string;
gender: string;
idGroup: string;
idPosition: string;
idUserRole: string;
export interface IFormMember {
nik: string;
name: string;
phone: string;
email: string;
gender: string;
idGroup: string;
idPosition: string;
idUserRole: string;
}
export interface IStatusmember {
isActive: boolean;
}
isActive: boolean;
}
// EDIT MEMBER
export interface IEditDataMember {
id: string;
nik: string;
name: string;
phone: string;
email: string;
gender: string;
idGroup: string;
idPosition: string;
idUserRole: string;
}
export interface IDataPositionMember {
id: string;
name: string;
};
export interface IDataROleMember {
id: string;
name: string;
}
export interface IEditDataMember {
id: string;
nik: string;
name: string;
phone: string;
email: string;
gender: string;
idGroup: string;
idPosition: string;
idUserRole: string;
}
export interface IMember{
export interface IDataPositionMember {
id: string;
name: string;
};
export interface IDataROleMember {
id: string;
name: string;
}
export interface IMember {
id: string
}

59
src/module/user/member/ui/edit_member.tsx
View File

@@ -3,15 +3,17 @@ import { WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { funGetAllPosition } from "@/module/position/lib/api_position";
import { Box, Button, Select, Stack, Text, TextInput } from "@mantine/core";
import { Avatar, Box, Button, Indicator, Select, Stack, Text, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useRef, useState } from "react";
import toast from "react-hot-toast";
import { HiUser } from "react-icons/hi2";
import { IDataPositionMember, IDataROleMember, IEditDataMember, IFormMember } from "../lib/type_member";
import { funEditMember, funGetOneMember, funGetRoleUser } from "../lib/api_member";
import _ from "lodash";
import { Dropzone } from "@mantine/dropzone";
import { FaCamera } from "react-icons/fa6";
export default function EditMember({ id }: { id: string }) {
@@ -20,6 +22,9 @@ export default function EditMember({ id }: { id: string }) {
const [listGroup, setListGorup] = useState<IDataGroup[]>([])
const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([])
const [imgForm, setImgForm] = useState<any>()
const openRef = useRef<() => void>(null)
const [img, setIMG] = useState<any | null>()
const [touched, setTouched] = useState({
nik: false,
name: false,
@@ -61,6 +66,7 @@ export default function EditMember({ id }: { id: string }) {
const res = await funGetOneMember(id)
setData(res.data)
getAllPosition(res.data?.idGroup)
setIMG(`/api/file/img?cat=user&file=${res.data.img}`)
} catch (error) {
console.error(error)
}
@@ -110,17 +116,11 @@ export default function EditMember({ id }: { id: string }) {
return
}
if (val) {
const res = await funEditMember(id, {
id: data.id,
nik: data.nik,
name: data.name,
phone: data.phone,
email: data.email,
gender: data.gender,
idGroup: data.idGroup,
idPosition: data.idPosition,
idUserRole: data.idUserRole
})
const fd = new FormData()
fd.append("file", imgForm)
fd.append("data", JSON.stringify(data))
const res = await funEditMember(id, fd)
if (res.success) {
toast.success(res.message)
@@ -144,12 +144,30 @@ export default function EditMember({ id }: { id: string }) {
pt={30}
px={20}
>
<Box bg={WARNA.biruTua} py={30} px={50}
style={{
borderRadius: 10,
}}>
<HiUser size={100} color={WARNA.bgWhite} />
</Box>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error('Tidak ada gambar yang dipilih')
setImgForm(files[0])
const buffer = URL.createObjectURL(new Blob([new Uint8Array(await files[0].arrayBuffer())]))
setIMG(buffer)
}}
activateOnClick={false}
maxSize={1 * 1024 ** 2}
accept={['image/png', 'image/jpeg', 'image/heic']}
onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, dan .heic dengan ukuran maksimal 1 MB')
}}
>
</Dropzone>
<Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
<Avatar
size="150"
radius={"100"}
src={img}
/>
</Indicator>
<Select
placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
@@ -311,7 +329,8 @@ export default function EditMember({ id }: { id: string }) {
borderColor: WARNA.biruTua,
},
}}
placeholder="62xxx xxxx xxxx"
placeholder="8xxx xxxx xxxx"
leftSection={<Text>+62</Text>}
onChange={(e) => {
setData({ ...data, phone: e.target.value })
setTouched({ ...touched, phone: false })

2
src/module/user/member/ui/navbar_detail_member.tsx
View File

@@ -66,7 +66,7 @@ export default function NavbarDetailMember({ id }: IMember) {
gap="xs"
>
<Center>
<Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
<Avatar src={`/api/file/img?cat=user&file=${dataOne?.img}`} alt="it's me" size="xl" />
</Center>
{loading ?
<>

9
src/module/user/member/ui/tab_list_member.tsx
View File

@@ -1,6 +1,6 @@
import { SkeletonSingle, WARNA } from "@/module/_global"
import { Box, Group, ActionIcon, Text, TextInput, Divider } from "@mantine/core"
import { Box, Group, ActionIcon, Text, TextInput, Divider, Avatar } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks"
import { useRouter, useSearchParams } from "next/navigation"
import { useEffect, useState } from "react"
@@ -9,6 +9,7 @@ import { IListMember } from "../lib/type_member"
import { funGetAllmember } from "../lib/api_member"
import { funGetAllGroup, IDataGroup } from "@/module/group"
import toast from "react-hot-toast"
import _ from "lodash"
export default function TabListMember() {
@@ -107,12 +108,10 @@ export default function TabListMember() {
padding: 10,
}} >
<Box>
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
<HiMiniUser color={'white'} size={25} />
</ActionIcon>
<Avatar src={`/api/file/img?cat=user&file=${v.img}`} size={50} alt="image" />
</Box>
<Box>
<Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
<Text fw={'bold'} c={WARNA.biruTua}>{_.startCase(v.name)}</Text>
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
</Box>
</Group>