From b8de0beccf160b7dc094b60251e3623d18370f1b Mon Sep 17 00:00:00 2001 From: amel Date: Fri, 4 Oct 2024 12:00:03 +0800 Subject: [PATCH 1/4] upd: grup Deskripsi; - validasi tambah grup - text error validasi tambah grup - text error validasi edit grup No Issues --- src/module/group/ui/drawer_group.tsx | 16 +++++++++++++--- src/module/group/ui/edit_drawer_group.tsx | 2 +- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/module/group/ui/drawer_group.tsx b/src/module/group/ui/drawer_group.tsx index f09415b..abba7e1 100644 --- a/src/module/group/ui/drawer_group.tsx +++ b/src/module/group/ui/drawer_group.tsx @@ -45,8 +45,10 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean) } function onCheck() { - if (Object.values(touched).some((v) => v == true)) + const cek = checkAll() + if (!cek) { return false + } createData() } @@ -58,7 +60,15 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean) } else { setTouched({ ...touched, name: false }) } - } + } + } + + function checkAll() { + if (namaGroup == "" || namaGroup.length < 3) { + setTouched({ ...touched, name: true }) + return false + } + return true } return ( @@ -102,7 +112,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean) }} error={ touched.name && - (namaGroup == "" ? "Error! harus memasukkan grup" : + (namaGroup == "" ? "Grup Tidak Boleh Kosong" : namaGroup.length < 3 ? "Masukkan Minimal 3 karakter" : "" ) } diff --git a/src/module/group/ui/edit_drawer_group.tsx b/src/module/group/ui/edit_drawer_group.tsx index 238928e..cc34ea3 100644 --- a/src/module/group/ui/edit_drawer_group.tsx +++ b/src/module/group/ui/edit_drawer_group.tsx @@ -162,7 +162,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate }} error={ touched.name && - (name == "" ? "Error! harus memasukkan grup" : + (name == "" ? "Grup Tidak Boleh Kosong" : name.length < 3 ? "Masukkan Minimal 3 karakter" : "" ) } From 73ff71d34e0fe064d8d8ce825cfbc8688e576826 Mon Sep 17 00:00:00 2001 From: amel Date: Fri, 4 Oct 2024 14:24:22 +0800 Subject: [PATCH 2/4] upd: tema apk Deskripsi: - validasi cek pada tambah tema - loading button pada edit tema No Issues --- .../color_palette/ui/create_palette_color.tsx | 54 +++++++++++++++---- .../color_palette/ui/edit_palette_color.tsx | 25 +++++---- 2 files changed, 60 insertions(+), 19 deletions(-) diff --git a/src/module/color_palette/ui/create_palette_color.tsx b/src/module/color_palette/ui/create_palette_color.tsx index 0842d0d..2c10d8b 100644 --- a/src/module/color_palette/ui/create_palette_color.tsx +++ b/src/module/color_palette/ui/create_palette_color.tsx @@ -1,13 +1,12 @@ "use client" import { LayoutNavbarNew, TEMA } from '@/module/_global'; -import { useHookstate } from '@hookstate/core'; -import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core'; -import React, { useState } from 'react'; -import { funCreateTheme } from '../lib/api_theme'; -import toast from 'react-hot-toast'; -import { useRouter } from 'next/navigation'; import LayoutModal from '@/module/_global/layout/layout_modal'; -import _ from 'lodash'; +import { useHookstate } from '@hookstate/core'; +import { Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, TextInput } from '@mantine/core'; +import { useRouter } from 'next/navigation'; +import { useState } from 'react'; +import toast from 'react-hot-toast'; +import { funCreateTheme } from '../lib/api_theme'; export default function CreatePaletteColor() { const [isValModal, setValModal] = useState(false); @@ -56,11 +55,46 @@ export default function CreatePaletteColor() { } function onCheck() { - if (Object.values(touched).some((v) => v == true)) + const cek = checkAll() + if (!cek) return false setValModal(true) } + function checkAll() { + let nilai = true + if (isWarna.name === "") { + setTouched(touched => ({ ...touched, name: true })) + nilai = false + } + if (isWarna.utama === "" || isWarna.utama.substring(0, 1) !== '#') { + setTouched(touched => ({ ...touched, utama: true })) + nilai = false + } + if (isWarna.bgUtama === "" || isWarna.bgUtama.substring(0, 1) !== '#') { + setTouched(touched => ({ ...touched, bgUtama: true })) + nilai = false + } + if (isWarna.bgIcon === "" || isWarna.bgIcon.substring(0, 1) !== '#') { + setTouched(touched => ({ ...touched, bgIcon: true })) + nilai = false + } + if (isWarna.bgFiturHome === "" || isWarna.bgFiturHome.substring(0, 1) !== '#') { + setTouched(touched => ({ ...touched, bgFiturHome: true })) + nilai = false + } + if (isWarna.bgFiturDivision === "" || isWarna.bgFiturDivision.substring(0, 1) !== '#') { + setTouched(touched => ({ ...touched, bgFiturDivision: true })) + nilai = false + } + if (isWarna.bgTotalKegiatan === "" || isWarna.bgTotalKegiatan.substring(0, 1) !== '#') { + setTouched(touched => ({ ...touched, bgTotalKegiatan: true })) + nilai = false + } + + return nilai + } + function onValidation(kategori: string, val: string) { if (kategori == 'name') { setWarna({ ...isWarna, name: val }) @@ -239,8 +273,8 @@ export default function CreatePaletteColor() { } error={ touched.bgTotalKegiatan && ( - isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : - isWarna.bgTotalKegiatan.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null + isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : + isWarna.bgTotalKegiatan.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null ) } /> diff --git a/src/module/color_palette/ui/edit_palette_color.tsx b/src/module/color_palette/ui/edit_palette_color.tsx index 087f620..5f6da1b 100644 --- a/src/module/color_palette/ui/edit_palette_color.tsx +++ b/src/module/color_palette/ui/edit_palette_color.tsx @@ -1,14 +1,14 @@ "use client" import { LayoutNavbarNew, TEMA } from '@/module/_global'; +import LayoutModal from "@/module/_global/layout/layout_modal"; import { useHookstate } from '@hookstate/core'; -import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core'; -import React, { useState } from 'react'; -import { IEditTheme } from '../lib/type_theme'; +import { Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Skeleton, Stack, TextInput } from '@mantine/core'; +import { useShallowEffect } from '@mantine/hooks'; +import { useParams, useRouter } from 'next/navigation'; +import { useState } from 'react'; import toast from 'react-hot-toast'; import { funEditTheme, funGetThemeById } from '../lib/api_theme'; -import { useParams, useRouter } from 'next/navigation'; -import { useShallowEffect } from '@mantine/hooks'; -import LayoutModal from "@/module/_global/layout/layout_modal"; +import { IEditTheme } from '../lib/type_theme'; export default function EditPaletteColor() { const tema = useHookstate(TEMA) @@ -16,6 +16,7 @@ export default function EditPaletteColor() { const [isModal, setModal] = useState(false) const param = useParams<{ id: string }>() const [loading, setLoading] = useState(true) + const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false); const [touched, setTouched] = useState({ name: false, utama: false, @@ -62,6 +63,7 @@ export default function EditPaletteColor() { async function onSubmit() { try { + setLoadingKonfirmasi(true) const res = await funEditTheme(param.id, isWarna) if (res.success) { toast.success(res.message); @@ -72,6 +74,9 @@ export default function EditPaletteColor() { } catch (error) { console.error(error) toast.error("Gagal mengedit tema, coba lagi nanti"); + } finally { + setLoadingKonfirmasi(false) + setModal(false) } } @@ -381,11 +386,13 @@ export default function EditPaletteColor() { - setModal(false)} description="Apakah Anda yakin ingin mengubah data?" + setModal(false)} description="Apakah Anda yakin ingin mengubah data?" onYes={(val) => { - if (val) + if (val) { onSubmit() - setModal(false) + } else { + setModal(false) + } } } /> From 415b69d0f4d92f2245ac1d6213e6a2621236ce0f Mon Sep 17 00:00:00 2001 From: amel Date: Fri, 4 Oct 2024 15:13:36 +0800 Subject: [PATCH 3/4] upd: position Deskripsi: - update validasi tambah positiion - update validasi edit position - loading button tambah position - loading button edit position No Issues --- .../position/ui/drawer_detail_position.tsx | 27 ++++++----- .../position/ui/drawer_list_position.tsx | 48 +++++++++++++------ 2 files changed, 49 insertions(+), 26 deletions(-) diff --git a/src/module/position/ui/drawer_detail_position.tsx b/src/module/position/ui/drawer_detail_position.tsx index b68dc3a..7ed430e 100644 --- a/src/module/position/ui/drawer_detail_position.tsx +++ b/src/module/position/ui/drawer_detail_position.tsx @@ -18,6 +18,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: { const [isModal, setModal] = useState(false) const refresh = useHookstate(globalRefreshPosition) const [loading, setLoading] = useState(true) + const [loadingEdit, setLoadingEdit] = useState(false) const tema = useHookstate(TEMA) const [data, setData] = useState({ id: id, @@ -27,7 +28,6 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: { const [listGroup, setListGorup] = useState([]) const [touched, setTouched] = useState({ name: false, - idGroup: false }); function onCLose() { @@ -70,6 +70,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: { async function onSubmit() { try { + setLoadingEdit(true) const res = await funEditPosition(id, { name: data.name, idGroup: data.idGroup @@ -88,6 +89,8 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: { } catch (error) { toast.error('Error'); toast.error("Edit jabatan gagal, coba lagi nanti"); + } finally { + setLoadingEdit(false) } } @@ -98,20 +101,20 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: { function onCheck() { if (Object.values(touched).some((v) => v == true)) - return false + return false onSubmit() } function onValidation(kategori: string, val: string) { if (kategori == 'name') { - setData({...data, name: val}) - if (val == "" || val.length < 3) { - setTouched({ ...touched, name: true }) - } else { - setTouched({ ...touched, name: false }) - } + setData({ ...data, name: val }) + if (val == "" || val.length < 3) { + setTouched({ ...touched, name: true }) + } else { + setTouched({ ...touched, name: false }) + } } - } + } async function nonActive(val: boolean) { try { @@ -189,13 +192,12 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: { size="md" value={String(data.name)} onChange={(e) => { onValidation('name', e.target.value) }} - onBlur={() => setTouched({ ...touched, name: true })} error={ touched.name && (data.name == "" ? "Error! harus memasukkan Nama Jabatan" : data.name.length < 3 ? "Masukkan Minimal 3 karakter" : "" ) - } + } radius={10} placeholder="Nama Jabatan" /> @@ -208,7 +210,8 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: { size="lg" radius={30} fullWidth - onClick={onSubmit} + onClick={() => { onCheck() }} + loading={loadingEdit} > EDIT diff --git a/src/module/position/ui/drawer_list_position.tsx b/src/module/position/ui/drawer_list_position.tsx index fdb4485..83d8ed2 100644 --- a/src/module/position/ui/drawer_list_position.tsx +++ b/src/module/position/ui/drawer_list_position.tsx @@ -15,6 +15,7 @@ import { globalRefreshPosition } from "../lib/val_posisition"; export default function DrawerListPosition({ onCreated }: { onCreated: (val: boolean) => void }) { const roleLogin = useHookstate(globalRole) const [openDrawerGroup, setOpenDrawerGroup] = useState(false) + const [loadingSave, setLoadingSave] = useState(false) const router = useRouter() const [listGroup, setListGorup] = useState([]) const refresh = useHookstate(globalRefreshPosition) @@ -52,6 +53,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo async function onSubmit() { try { + setLoadingSave(true) const res = await funCreatePosition({ name: listData.name, idGroup: listData.idGroup @@ -70,23 +72,41 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo } catch (error) { toast.error('Error') + } finally { + setLoadingSave(false) } } function onCheck() { - if (Object.values(touched).some((v) => v == true)) - return false + const check = checkAll() + if (!check) + return false onSubmit() } - + + function checkAll() { + let nilai = true + if (listData.name == "" || listData.name.length < 3) { + setTouched(touched => ({ ...touched, name: true })) + nilai = false + } + + if (roleLogin.get() == "supadmin" && listData.idGroup == "") { + setTouched(touched => ({ ...touched, idGroup: true })) + nilai = false + } + + return nilai + } + function onValidation(kategori: string, val: string) { if (kategori == 'name') { - setListData({...listData, name: val}) - if (val == "" || val.length < 3) { - setTouched({ ...touched, name: true }) - } else { - setTouched({ ...touched, name: false }) - } + setListData({ ...listData, name: val }) + if (val == "" || val.length < 3) { + setTouched({ ...touched, name: true }) + } else { + setTouched({ ...touched, name: false }) + } } else if (kategori == 'idGroup') { setListData({ ...listData, idGroup: val }) if (val == "") { @@ -95,7 +115,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo setTouched({ ...touched, idGroup: false }) } } - } + } return ( @@ -130,7 +150,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo sm: "67vh", lg: "67vh", xl: "70vh" - + }}> { roleLogin.get() == "supadmin" && @@ -149,8 +169,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo radius={10} mb={5} withAsterisk - onChange={(e: any) => - { onValidation('idGroup', e) } + onChange={(e: any) => { onValidation('idGroup', e) } } styles={{ input: { @@ -185,7 +204,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo (listData.name == "" ? "Error! harus memasukkan Nama Jabatan" : listData.name.length < 3 ? "Masukkan Minimal 3 karakter" : "" ) - } + } required /> @@ -196,6 +215,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo radius={30} fullWidth onClick={() => { onCheck() }} + loading={loadingSave} > SIMPAN From a9fb28757c732ff7af04c30dc2c3892ee9941fd6 Mon Sep 17 00:00:00 2001 From: amel Date: Fri, 4 Oct 2024 17:20:21 +0800 Subject: [PATCH 4/4] upd: user Deskripsi: - update validasi tambah anggota - loading buttom save tambah anggota - update validasi edit anggota - loading buttom save edit anggota No Issues --- src/module/user/member/ui/create_member.tsx | 152 +++++++++++++------- src/module/user/member/ui/edit_member.tsx | 69 +++++---- 2 files changed, 136 insertions(+), 85 deletions(-) diff --git a/src/module/user/member/ui/create_member.tsx b/src/module/user/member/ui/create_member.tsx index 9f8ceca..060b197 100644 --- a/src/module/user/member/ui/create_member.tsx +++ b/src/module/user/member/ui/create_member.tsx @@ -1,25 +1,26 @@ "use client"; -import { globalRole, TEMA, WARNA } from "@/module/_global"; +import { globalRole, TEMA } from "@/module/_global"; import LayoutModal from "@/module/_global/layout/layout_modal"; +import { funGetUserByCookies } from "@/module/auth"; import { funGetAllGroup, IDataGroup } from "@/module/group"; +import { funGetAllPosition } from "@/module/position/lib/api_position"; +import { useHookstate } from "@hookstate/core"; import { Avatar, Box, Button, Indicator, rem, Select, Stack, Text, TextInput } from "@mantine/core"; +import { Dropzone } from "@mantine/dropzone"; +import { useShallowEffect } from "@mantine/hooks"; +import _ from "lodash"; import { useRouter } from "next/navigation"; import { useRef, useState } from "react"; import toast from "react-hot-toast"; -import { IDataPositionMember, IDataROleMember } from "../lib/type_member"; -import { funGetAllPosition } from "@/module/position/lib/api_position"; -import { funCreateMember } from "../lib/api_member"; -import _ from "lodash"; -import { useHookstate } from "@hookstate/core"; -import { useShallowEffect } from "@mantine/hooks"; -import { funGetUserByCookies } from "@/module/auth"; -import { valueRoleUser } from "../../lib/val_user"; import { FaCamera } from "react-icons/fa6"; -import { Dropzone } from "@mantine/dropzone"; +import { valueRoleUser } from "../../lib/val_user"; +import { funCreateMember } from "../lib/api_member"; +import { IDataPositionMember, IDataROleMember } from "../lib/type_member"; export default function CreateMember() { const router = useRouter(); const [isModal, setModal] = useState(false); + const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false); const [listGroup, setListGorup] = useState([]); const [listPosition, setListPosition] = useState([]); const [listUserRole, setListUserRole] = useState([]); @@ -100,37 +101,33 @@ export default function CreateMember() { async function onSubmit(val: boolean) { try { - if (_.isEmpty(listData)) { - return; - } - if (val) { - const fd = new FormData() - fd.append("file", imgForm) - fd.append("data", JSON.stringify( - { - nik: listData.nik, - name: listData.name, - phone: listData.phone, - email: listData.email, - gender: listData.gender, - idGroup: listData.idGroup, - idPosition: listData.idPosition, - idUserRole: listData.idUserRole, - } - )) - const res = await funCreateMember(fd); - if (res.success) { - toast.success(res.message); - setModal(false); - router.push("/member?active=true"); - } else { - toast.error(res.message); + setLoadingKonfirmasi(true) + const fd = new FormData() + fd.append("file", imgForm) + fd.append("data", JSON.stringify( + { + nik: listData.nik, + name: listData.name, + phone: listData.phone, + email: listData.email, + gender: listData.gender, + idGroup: listData.idGroup, + idPosition: listData.idPosition, + idUserRole: listData.idUserRole, } + )) + const res = await funCreateMember(fd); + if (res.success) { + toast.success(res.message); + router.push("/member?active=true"); + } else { + toast.error(res.message); } setModal(false); } catch (error) { toast.error("Error"); } finally { + setLoadingKonfirmasi(false) setModal(false); } } @@ -142,12 +139,61 @@ export default function CreateMember() { }, []); function onCheck() { - if (Object.values(touched).some((v) => v == true)) + const cek = checkAll() + if (!cek) return false setModal(true) } - function onValidation(kategori: string, val: string) { + function checkAll() { + let nilai = true + + if (listData.nik === "" || listData.nik.length !== 16) { + setTouched(touched => ({ ...touched, nik: true })) + nilai = false + } + + if (listData.name === "") { + setTouched(touched => ({ ...touched, name: true })) + nilai = false + } + + if (listData.phone == "" || !(listData.phone.length >= 10 && listData.phone.length <= 15)) { + setTouched(touched => ({ ...touched, phone: true })) + nilai = false + } + + if (listData.email == "" || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(listData.email)) { + setTouched(touched => ({ ...touched, email: true })) + nilai = false + } + + if (listData.gender == "" || String(listData.gender) == "null") { + setTouched(touched => ({ ...touched, gender: true })) + nilai = false + } + + if (roleLogin.get() == "supadmin" && (listData.idGroup == "" || String(listData.idGroup) == "null")) { + setTouched(touched => ({ ...touched, idGroup: true })) + nilai = false + } + + if (listData.idPosition === "" || String(listData.idPosition) == "null") { + setTouched(touched => ({ ...touched, idPosition: true })) + nilai = false + } + + if (listData.idUserRole === "" || String(listData.idUserRole) == "null") { + setTouched(touched => ({ ...touched, idUserRole: true })) + nilai = false + } + + return nilai + + } + + + function onValidation(kategori: string, val: any) { if (kategori == 'nik') { setListData({ ...listData, nik: val }) if (val === "" || val.length !== 16) { @@ -178,28 +224,28 @@ export default function CreateMember() { } } else if (kategori == 'gender') { setListData({ ...listData, gender: val }) - if (val == "" || val == "null") { + if (val == "" || String(val) == "null") { setTouched({ ...touched, gender: true }) } else { setTouched({ ...touched, gender: false }) } } else if (kategori == 'idGroup') { - setListData({ ...listData, idGroup: val, idPosition: "", }) - if (val === "") { - setTouched({ ...touched, idGroup: true }) + setListData(listData => ({ ...listData, idGroup: val, })) + if (val === "" || String(val) == "null") { + setTouched(touched => ({ ...touched, idGroup: true })) } else { setTouched({ ...touched, idGroup: false }) } } else if (kategori == 'idPosition') { - setListData({ ...listData, idPosition: val }) - if (val === "") { - setTouched({ ...touched, idPosition: true }) + setListData(listData => ({ ...listData, idPosition: val })) + if (val === "" || String(val) == "null") { + setTouched(touched => ({ ...touched, idPosition: true })) } else { setTouched({ ...touched, idPosition: false }) } } else if (kategori == 'idUserRole') { setListData({ ...listData, idUserRole: val }) - if (val === "") { + if (val === "" || String(val) == "null") { setTouched({ ...touched, idUserRole: true }) } else { setTouched({ ...touched, idUserRole: false }) @@ -210,6 +256,7 @@ export default function CreateMember() { async function changeGrup(val: any) { setListPosition([]); onValidation('idGroup', val) + onValidation('idPosition', '') getAllPosition(val); } @@ -269,7 +316,7 @@ export default function CreateMember() { onChange={(val: any) => { changeGrup(val) }} error={ touched.idGroup && ( - listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null + listData.idGroup == "" || String(listData.idGroup) == "null" ? "Grup Tidak Boleh Kosong" : null ) } /> @@ -301,7 +348,7 @@ export default function CreateMember() { value={listData.idPosition == "" ? null : listData.idPosition} error={ touched.idPosition && ( - listData.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null + listData.idPosition == "" || String(listData.idPosition) == "null" ? "Jabatan Tidak Boleh Kosong" : null ) } /> @@ -331,7 +378,7 @@ export default function CreateMember() { onChange={(val: any) => { onValidation('idUserRole', val) }} error={ touched.idUserRole && ( - listData.idUserRole == "" ? "Role Tidak Boleh Kosong" : null + listData.idUserRole == "" || String(listData.idUserRole) == "null" ? "Role Tidak Boleh Kosong" : null ) } /> @@ -449,7 +496,7 @@ export default function CreateMember() { onChange={(val: any) => { onValidation('gender', val) }} error={ touched.gender && ( - listData.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null + listData.gender == "" || String(listData.gender == "null") ? "Jenis Kelamin Tidak Boleh Kosong" : null ) } /> @@ -471,11 +518,16 @@ export default function CreateMember() { setModal(false)} description="Apakah Anda yakin ingin menambahkan data?" onYes={(val) => { - onSubmit(val); + if (val) { + onSubmit(val); + } else { + setModal(false); + } }} /> diff --git a/src/module/user/member/ui/edit_member.tsx b/src/module/user/member/ui/edit_member.tsx index 9033b7a..1d69a5a 100644 --- a/src/module/user/member/ui/edit_member.tsx +++ b/src/module/user/member/ui/edit_member.tsx @@ -1,25 +1,25 @@ 'use client' -import { globalRole, TEMA, WARNA } from "@/module/_global"; +import { globalRole, TEMA } 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 { useHookstate } from "@hookstate/core"; import { Avatar, Box, Button, Indicator, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core"; +import { Dropzone } from "@mantine/dropzone"; import { useShallowEffect } from "@mantine/hooks"; +import _ from "lodash"; import { useRouter } from "next/navigation"; 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"; -import { useHookstate } from "@hookstate/core"; import { valueRoleUser } from "../../lib/val_user"; +import { funEditMember, funGetOneMember } from "../lib/api_member"; +import { IDataPositionMember, IDataROleMember, IEditDataMember } from "../lib/type_member"; export default function EditMember({ id }: { id: string }) { const [isModal, setModal] = useState(false) + const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false) const router = useRouter() const [listGroup, setListGorup] = useState([]) const [listPosition, setListPosition] = useState([]) @@ -111,26 +111,24 @@ export default function EditMember({ id }: { id: string }) { async function onSubmit(val: boolean) { try { - if (_.isEmpty(data)) { - return + setLoadingKonfirmasi(true) + 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) + router.push(`/member?active=true`) + } else { + toast.error(res.message) } - if (val) { - 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) - router.push(`/member?active=true`) - } else { - toast.error(res.message) - } - } - } catch (error) { toast.error('Error'); + } finally { + setLoadingKonfirmasi(false) + setModal(false) } } @@ -171,21 +169,21 @@ export default function EditMember({ id }: { id: string }) { } } else if (kategori == 'gender') { setData({ ...data, gender: val }) - if (val == "" || val == "null") { + if (val == "" || String(val) == "null") { setTouched({ ...touched, gender: true }) } else { setTouched({ ...touched, gender: false }) } } else if (kategori == 'idPosition') { setData({ ...data, idPosition: val }) - if (val === "") { + if (val === "" || String(val) == "null") { setTouched({ ...touched, idPosition: true }) } else { setTouched({ ...touched, idPosition: false }) } } else if (kategori == 'idUserRole') { setData({ ...data, idUserRole: val }) - if (val === "") { + if (val === "" || String(val) == "null") { setTouched({ ...touched, idUserRole: true }) } else { setTouched({ ...touched, idUserRole: false }) @@ -267,7 +265,7 @@ export default function EditMember({ id }: { id: string }) { value={(data?.idPosition == "") ? null : data.idPosition} error={ touched.idPosition && ( - data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null + data.idPosition == "" || String(data.idPosition) == "null" ? "Jabatan Tidak Boleh Kosong" : null ) } /> @@ -292,7 +290,7 @@ export default function EditMember({ id }: { id: string }) { value={data?.idUserRole} error={ touched.idUserRole && ( - data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null + data.idUserRole == "" || String(data.idUserRole) == "null" ? "Role Tidak Boleh Kosong" : null ) } /> @@ -325,7 +323,6 @@ export default function EditMember({ id }: { id: string }) { }} onChange={(e) => { onValidation('name', e.target.value) }} value={data.name} - onBlur={() => setTouched({ ...touched, name: true })} error={ touched.name && ( data.name == "" ? "Nama Tidak Boleh Kosong" : null @@ -366,7 +363,7 @@ export default function EditMember({ id }: { id: string }) { error={ touched.phone && ( data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" : - data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null + data.phone.length < 10 ? "Nomor Telepon Tidak Valid" : null ) } /> @@ -395,7 +392,7 @@ export default function EditMember({ id }: { id: string }) { value={data.gender} error={ touched.gender && ( - data.gender == "" ? "Gender Tidak Boleh Kosong" : null + data.gender == "" || String(data.gender) == "null" ? "Gender Tidak Boleh Kosong" : null ) } /> @@ -422,12 +419,14 @@ export default function EditMember({ id }: { id: string }) { } - setModal(false)} + setModal(false)} description="Apakah Anda yakin ingin mengubah data?" onYes={(val) => { - if (val) + if (val) { onSubmit(val) - setModal(false) + } else { + setModal(false) + } } } />