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

upd: profile

Browse Source 
Deskripsi:
- edit profile
- api image
- folder image user

No Issues
This commit is contained in:
amel
2024-08-29 15:50:04 +08:00
parent 9eb2b1e4af
commit 44ea8c6510
14 changed files with 181 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/module/_global/fun/upload-file.ts
View File

@@ -1,6 +0,0 @@
'use server'
import fs from 'fs'
export async function funUploadFile(fName: any, f: any) {
const filenya = Buffer.from(await f.arrayBuffer())
fs.writeFileSync(`./public/assets/file/${fName}`, filenya)
}

4
src/module/_global/index.ts
View File

@@ -5,7 +5,6 @@ import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discuss
import SkeletonDetailListTugasTask from "./components/skeleton_detail_list_tugas_task";
import SkeletonDetailProfile from "./components/skeleton_detail_profile";
import SkeletonSingle from "./components/skeleton_single";
import { funUploadFile } from "./fun/upload-file";
import { WARNA } from "./fun/WARNA";
import LayoutDrawer from "./layout/layout_drawer";
import LayoutIconBack from "./layout/layout_icon_back";
@@ -28,6 +27,5 @@ export { pwd_key_config };
export { SkeletonSingle }
export { SkeletonDetailDiscussionComment }
export { SkeletonDetailDiscussionMember }
export { funUploadFile }
export { SkeletonDetailProfile }
export {SkeletonDetailListTugasTask}
export { SkeletonDetailListTugasTask }

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

@@ -343,7 +343,7 @@ export default function CreateMember() {
size="md"
type="number"
radius={30}
placeholder="xxx xxxx xxxx"
placeholder="8xx xxxx xxxx"
leftSection={<Text>+62</Text>}
withAsterisk
label="Nomor Telepon"

7
src/module/user/profile/lib/api_profile.ts
View File

@@ -5,13 +5,10 @@ export const funGetProfileByCookies = async (path?: string) => {
return await response.json().catch(() => null);
}
export const funEditProfileByCookies = async ( data: IEditDataProfile) => {
export const funEditProfileByCookies = async (data: FormData) => {
const response = await fetch(`/api/user/profile/`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
body: data,
});
return await response.json().catch(() => null);
}

41
src/module/user/profile/lib/type_profile.ts
View File

@@ -1,21 +1,22 @@
export interface IProfileById {
id: string
name: string
email: string
phone: string
nik: string
gender: string
idGroup: string
idPosition: string
group: string
position: string
}
export interface IEditDataProfile {
id: string;
nik: string;
name: string;
phone: string;
email: string;
gender: string;
}
id: string
name: string
email: string
phone: string
nik: string
gender: string
idGroup: string
idPosition: string
group: string
position: string
}
export interface IEditDataProfile {
id: string;
nik: string;
name: string;
phone: string;
email: string;
gender: string;
img: string;
}

69
src/module/user/profile/ui/edit_profile.tsx
View File

@@ -1,18 +1,25 @@
"use client"
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { Box, Button, Flex, Modal, Select, Stack, Text, TextInput } from "@mantine/core";
import { HiUser } from "react-icons/hi2";
import { Avatar, Box, Button, Flex, Indicator, Modal, Select, Stack, Text, TextInput } from "@mantine/core";
import toast from "react-hot-toast";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useState } from "react";
import { useRef, useState } from "react";
import { IEditDataProfile, IProfileById } from "../lib/type_profile";
import { funEditProfileByCookies, funGetProfileByCookies } from "../lib/api_profile";
import { useShallowEffect } from "@mantine/hooks";
import { funGetUserByCookies } from "@/module/auth";
import { FaCamera, FaShare } from "react-icons/fa6";
import { Dropzone } from "@mantine/dropzone";
import _ from "lodash";
import { useRouter } from "next/navigation";
export default function EditProfile() {
const [isValModal, setValModal] = useState(false)
const [isDataEdit, setDataEdit] = useState<IProfileById[]>([])
const openRef = useRef<() => void>(null)
const [img, setIMG] = useState<any | null>()
const [imgForm, setImgForm] = useState<any>()
const router = useRouter()
const [touched, setTouched] = useState({
nik: false,
name: false,
@@ -20,6 +27,7 @@ export default function EditProfile() {
email: false,
gender: false,
});
const [data, setData] = useState<IEditDataProfile>({
id: "",
nik: "",
@@ -27,12 +35,15 @@ export default function EditProfile() {
phone: "",
email: "",
gender: "",
img: "",
})
async function getAllProfile() {
try {
const res = await funGetProfileByCookies()
setData(res.data)
setIMG(`/api/file/img?cat=user&file=${res.data.img}`)
} catch (error) {
console.error(error);
}
@@ -45,17 +56,15 @@ export default function EditProfile() {
async function onEditProfile(val: boolean) {
try {
if (val) {
const res = await funEditProfileByCookies({
id: data.id,
nik: data.nik,
name: data.name,
phone: data.phone,
email: data.email,
gender: data.gender,
})
const fd = new FormData();
fd.append("file", imgForm)
fd.append("data", JSON.stringify(data))
const res = await funEditProfileByCookies(fd)
if (res.success) {
setValModal(false)
toast.success(res.message)
router.push('/profile')
} else {
toast.error(res.message)
}
@@ -77,12 +86,31 @@ export default function EditProfile() {
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>
<TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
styles={{
@@ -149,7 +177,7 @@ export default function EditProfile() {
}
/>
<TextInput
size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
size="md" type="number" radius={30} placeholder="8xx xxxx xxxx" withAsterisk label="Nomor Telepon" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
@@ -157,6 +185,7 @@ export default function EditProfile() {
borderColor: WARNA.biruTua,
},
}}
leftSection={<Text>+62</Text>}
onChange={(e) => {
setData({ ...data, phone: e.target.value })
setTouched({ ...touched, phone: false })
@@ -198,7 +227,7 @@ export default function EditProfile() {
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
data.gender == "" ? "Gender Tidak Boleh Kosong" : null
data.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null
)
}
/>

13
src/module/user/profile/ui/profile.tsx
View File

@@ -1,12 +1,10 @@
"use client"
import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, WARNA } from "@/module/_global";
import { ActionIcon, Anchor, Box, Button, Flex, Group, Skeleton, Stack, Text } from "@mantine/core";
import { BsInfo } from "react-icons/bs";
import { ActionIcon, Anchor, Avatar, Box, Button, Flex, Group, Skeleton, Stack, Text } from "@mantine/core";
import { HiUser } from "react-icons/hi2";
import { RiIdCardFill } from "react-icons/ri";
import { FaSquarePhone } from "react-icons/fa6";
import { MdEmail } from "react-icons/md";
import { InfoTitleProfile } from "../component/ui/ui_profile";
import { IoMaleFemale } from "react-icons/io5";
import toast from "react-hot-toast";
import { LuLogOut } from "react-icons/lu";
@@ -22,12 +20,14 @@ export default function Profile() {
const [isData, setData] = useState<IProfileById>()
const router = useRouter()
const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>()
async function getData() {
try {
setLoading(true)
const res = await funGetProfileByCookies()
setData(res.data)
setIMG(`/api/file/img?cat=user&file=${res.data.img}`)
setLoading(false)
} catch (error) {
console.error(error);
@@ -62,7 +62,6 @@ export default function Profile() {
<LayoutNavbarHome>
<Group justify="space-between">
<LayoutIconBack />
<ActionIcon onClick={() => { setOpenModal(true) }} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<LuLogOut size={20} color='white' />
</ActionIcon>
@@ -72,7 +71,11 @@ export default function Profile() {
justify="center"
gap="xs"
>
<HiUser size={100} color='white' />
<Avatar
size="150"
radius={"100"}
src={img}
/>
{loading ?
<Skeleton height={62} mt={10} width={"40%"} />
: