From 40471f5ebc4746c55b9e284802e58d3c935d8d52 Mon Sep 17 00:00:00 2001 From: lukman Date: Sat, 21 Sep 2024 15:50:21 +0800 Subject: [PATCH] style : update style --- src/app/(application)/profile/edit/page.tsx | 4 +- src/module/home/ui/features.tsx | 2 +- src/module/home/ui/list_notification.tsx | 3 + src/module/home/ui/view_detail_feature.tsx | 14 +- src/module/home/ui/view_search.tsx | 440 ++++++++++++------ .../user/profile/ui/edit_profile copy.tsx | 311 +++++++++++++ src/module/user/profile/ui/edit_profile.tsx | 286 +++++++----- src/module/user/profile/ui/profile.tsx | 2 +- 8 files changed, 786 insertions(+), 276 deletions(-) create mode 100644 src/module/user/profile/ui/edit_profile copy.tsx diff --git a/src/app/(application)/profile/edit/page.tsx b/src/app/(application)/profile/edit/page.tsx index da3e588..e87a120 100644 --- a/src/app/(application)/profile/edit/page.tsx +++ b/src/app/(application)/profile/edit/page.tsx @@ -1,8 +1,10 @@ import { EditProfile } from "@/module/user" +import EditProfileCopy from "@/module/user/profile/ui/edit_profile copy" function Page() { return ( - + // + ) } diff --git a/src/module/home/ui/features.tsx b/src/module/home/ui/features.tsx index 1ec6434..b0503bf 100644 --- a/src/module/home/ui/features.tsx +++ b/src/module/home/ui/features.tsx @@ -14,7 +14,7 @@ export default function Features() { return ( <> - Features + Fitur diff --git a/src/module/home/ui/list_notification.tsx b/src/module/home/ui/list_notification.tsx index 29a4c3e..f46fe2f 100644 --- a/src/module/home/ui/list_notification.tsx +++ b/src/module/home/ui/list_notification.tsx @@ -220,6 +220,9 @@ export default function ListNotification() { mt={10} fz={15} c={v.isRead == false ? tema.get().utama : "gray"} + onClick={() => { + onReadNotif(v.category, v.idContent, v.id); + }} > {v.desc} diff --git a/src/module/home/ui/view_detail_feature.tsx b/src/module/home/ui/view_detail_feature.tsx index 9bfb294..49ad609 100644 --- a/src/module/home/ui/view_detail_feature.tsx +++ b/src/module/home/ui/view_detail_feature.tsx @@ -36,7 +36,7 @@ export default function ViewDetailFeature() {
- Divisi + Divisi
router.push('/project?status=0&group=null')}> @@ -52,7 +52,7 @@ export default function ViewDetailFeature() {
- Kegiatan + Kegiatan
router.push('/announcement')}> @@ -68,7 +68,7 @@ export default function ViewDetailFeature() {
- Pengumuman + Pengumuman
router.push('/member')}> @@ -84,7 +84,7 @@ export default function ViewDetailFeature() {
- Anggota + Anggota
router.push('/position')}> @@ -100,7 +100,7 @@ export default function ViewDetailFeature() {
- Jabatan + Jabatan
{ @@ -119,7 +119,7 @@ export default function ViewDetailFeature() {
- Grup + Grup
router.push('/color-palette')}> @@ -135,7 +135,7 @@ export default function ViewDetailFeature() {
- Tema + Tema
diff --git a/src/module/home/ui/view_search.tsx b/src/module/home/ui/view_search.tsx index f69d247..263298c 100644 --- a/src/module/home/ui/view_search.tsx +++ b/src/module/home/ui/view_search.tsx @@ -1,48 +1,66 @@ -"use client" -import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global'; -import { ActionIcon, Avatar, Box, Divider, Grid, Group, Text, TextInput } from '@mantine/core'; -import React, { useState } from 'react'; -import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiMiniUserGroup } from 'react-icons/hi2'; -import { funGetSearchAll } from '../lib/api_search'; -import { useShallowEffect } from '@mantine/hooks'; -import { IDataDivisionSearch, IDataProjectSearch, IDataUserSearch } from '../lib/type_search'; -import { useRouter } from 'next/navigation'; -import _ from 'lodash'; -import { useHookstate } from '@hookstate/core'; +"use client"; +import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global"; +import { + ActionIcon, + Avatar, + Box, + Divider, + Grid, + Group, + Text, + TextInput, +} from "@mantine/core"; +import React, { useState } from "react"; +import { + HiMagnifyingGlass, + HiMiniPresentationChartBar, + HiMiniUserGroup, +} from "react-icons/hi2"; +import { funGetSearchAll } from "../lib/api_search"; +import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; +import { + IDataDivisionSearch, + IDataProjectSearch, + IDataUserSearch, +} from "../lib/type_search"; +import { useRouter } from "next/navigation"; +import _ from "lodash"; +import { useHookstate } from "@hookstate/core"; export default function ViewSearch() { - const [search, setSearch] = useState(''); + const [search, setSearch] = useState(""); const [dataUser, setDataUser] = useState([]); const [dataProject, setDataProject] = useState([]); const [dataDivision, setDataDivision] = useState([]); - const router = useRouter() - const tema = useHookstate(TEMA) + const router = useRouter(); + const tema = useHookstate(TEMA); async function featchSearch() { try { - const res = await funGetSearchAll('?search=' + search); + const res = await funGetSearchAll("?search=" + search); setDataUser(res.data.user); setDataProject(res.data.project); setDataDivision(res.data.division); } catch (error) { - console.error(error) - throw new Error("Error") + console.error(error); + throw new Error("Error"); } } useShallowEffect(() => { - if (search != '') { - featchSearch() + if (search != "") { + featchSearch(); } else { setDataUser([]); setDataProject([]); setDataDivision([]); } - }, [search]) + }, [search]); + const isMobile2 = useMediaQuery("(max-width: 460px)"); return ( <> - } /> + } /> setSearch(e.target.value)} /> {dataUser.length || dataProject.length || dataDivision.length > 0 ? ( - - - ANGGOTA - - {dataUser.length > 0 ? ( - - {dataUser.map((v, i) => { - return ( - - { - router.push(`/member/${v.id}`) - }}> - - - - - - {_.startCase(v.name)} - {v.group + ' - ' + v.position} - - - - - - ) - })} - - ) : - Tidak Ada Anggota - } - - - - DIVISI - - {dataDivision.length > 0 ? ( - - {dataDivision.map((v, i) => { - return ( - router.push(`/division/${v.id}`)}> - - - - - - - - - {v.name.toUpperCase()} - - {v.group} - - - {v.desc} - - - ) - })} - - ) : - Tidak Ada Divisi - } - - - - KEGIATAN - - {dataProject.length > 0 ? ( - - {dataProject.map((v, i) => { - return ( - router.push(`/project/${v.id}`)}> - - - - - - - + + {dataUser.length > 0 ? ( + + ANGGOTA + + {dataUser.length > 0 ? ( + + {dataUser.map((v, i) => { + return ( + { + router.push(`/member/${v.id}`); + }} + > + + + + + + + {_.startCase(v.name)} + + + {v.group + " - " + v.position} + + + + + + + ); + })} + + ) : null} + + + ) : null} + + {dataDivision.length > 0 ? ( + + DIVISI + + {dataDivision.length > 0 ? ( + + {dataDivision.map((v, i) => { + return ( + router.push(`/division/${v.id}`)} + > + + - {v.title.toUpperCase()} - - {v.group} - - - - - ) - })} - - ) - : Tidak Ada Kegiatan - } + + + + + + + + {v.name.toUpperCase()} + + + + {v.group} + + + + + {v.desc} + + + + ); + })} + + ) : null} + - + ) : null} + + {dataProject.length > 0 ? ( + + KEGIATAN + + {dataProject.length > 0 ? ( + + {dataProject.map((v, i) => { + return ( + router.push(`/project/${v.id}`)} + > + + + + + + + + + + {v.title.toUpperCase()} + + + + {v.group} + + + + + + ); + })} + + ) : null} + + + ) : null} - ) - : null - } + ) : null} ); } - diff --git a/src/module/user/profile/ui/edit_profile copy.tsx b/src/module/user/profile/ui/edit_profile copy.tsx new file mode 100644 index 0000000..16776f0 --- /dev/null +++ b/src/module/user/profile/ui/edit_profile copy.tsx @@ -0,0 +1,311 @@ +"use client"; +import { LayoutNavbarNew, TEMA } from "@/module/_global"; +import { + Avatar, + Box, + Button, + Flex, + Indicator, + Modal, + rem, + Select, + Skeleton, + Stack, + Text, + TextInput, +} from "@mantine/core"; +import toast from "react-hot-toast"; +import LayoutModal from "@/module/_global/layout/layout_modal"; +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 { FaCamera, FaShare } from "react-icons/fa6"; +import { Dropzone } from "@mantine/dropzone"; +import _ from "lodash"; +import { useRouter } from "next/navigation"; +import { useHookstate } from "@hookstate/core"; +import { useForm } from "@mantine/form"; + +export default function EditProfileCopy() { + const [isValModal, setValModal] = useState(false); + const [isDataEdit, setDataEdit] = useState([]); + const openRef = useRef<() => void>(null); + const [img, setIMG] = useState(); + const [imgForm, setImgForm] = useState(); + const router = useRouter(); + const [loading, setLoading] = useState(true); + const tema = useHookstate(TEMA); + + const [data, setData] = useState({ + id: "", + nik: "", + name: "", + phone: "", + email: "", + gender: "", + img: "", + }); + + async function getAllProfile() { + try { + setLoading(true); + const res = await funGetProfileByCookies(); + setData(res.data); + setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`); + setLoading(false); + } catch (error) { + console.error(error); + } finally { + setLoading(false); + } + } + + useShallowEffect(() => { + getAllProfile(); + }, []); + + async function onEditProfile(val: boolean) { + try { + if (val) { + 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); + } + } + setValModal(false); + } catch (error) { + console.error(error); + toast.error("Gagal edit profil, coba lagi nanti"); + } + } + + return ( + + + + { + 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" + ); + }} + > + + {loading ? ( + + ) : ( + } + size={40} + onClick={() => openRef.current?.()} + > + + + )} + {loading ? ( + <> + + + + + + + ) : ( + <> + { + setData({ ...data, nik: e.target.value }); + }} + value={data.nik} + /> + { + setData({ ...data, name: e.target.value }); + }} + /> + { + setData({ ...data, email: e.target.value }); + }} + value={data.email} + /> + +62} + onChange={(e) => { + setData({ ...data, phone: e.target.value }); + }} + value={data.phone} + /> + { - setData({ ...data, gender: val }) - setTouched({ ...touched, gender: false }) + setData({ ...data, gender: val }); + setTouched({ ...touched, gender: false }); }} value={data.gender} onBlur={() => setTouched({ ...touched, gender: true })} error={ - touched.gender && ( - data.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null - ) + touched.gender && + (data.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null) } /> - } + )} - - {loading ? + + {loading ? ( - : + ) : ( - } + )} - setValModal(false)} + setValModal(false)} description="Apakah Anda yakin ingin melakukan perubahan data?" - onYes={(val) => { onEditProfile(val) }} /> + onYes={(val) => { + onEditProfile(val); + }} + /> - ) + ); } - diff --git a/src/module/user/profile/ui/profile.tsx b/src/module/user/profile/ui/profile.tsx index 3b6f9ea..6a73729 100644 --- a/src/module/user/profile/ui/profile.tsx +++ b/src/module/user/profile/ui/profile.tsx @@ -116,7 +116,7 @@ export default function Profile() { - No Telpon + No Telepon