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

upd: user

Browse Source 
Deskripsi:
- tambah input select jabatan pada edit profile
- tambah loading pada input select jabatan halaman edit profile
- tambah loading pada input select jabatan halaman edit member

No Issues
This commit is contained in:
amel
2024-12-26 15:15:45 +08:00
parent 87c90c94c4
commit 96084b22c0
5 changed files with 214 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/api/user/profile/route.ts
View File

@@ -66,7 +66,7 @@ export async function PUT(request: Request) {
const file = body.get("file") as File; const file = body.get("file") as File;
const data = body.get("data"); const data = body.get("data");
const { name, email, phone, nik, gender } = JSON.parse(data as string) const { name, email, phone, nik, gender, idPosition } = JSON.parse(data as string)
const cekNIK = await prisma.user.count({ const cekNIK = await prisma.user.count({
where: { where: {
@@ -108,7 +108,8 @@ export async function PUT(request: Request) {
email: email, email: email,
phone: "62" + phone, phone: "62" + phone,
nik: nik, nik: nik,
gender: gender gender: gender,
idPosition: idPosition
}, },
select: { select: {
img: true img: true

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

@@ -30,6 +30,7 @@ export default function EditMember({ id }: { id: string }) {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [loadingPosition, setLoadingPosition] = useState(true)
const [touched, setTouched] = useState({ const [touched, setTouched] = useState({
nik: false, nik: false,
name: false, name: false,
@@ -83,6 +84,7 @@ export default function EditMember({ id }: { id: string }) {
async function getAllPosition(val: any) { async function getAllPosition(val: any) {
try { try {
setLoadingPosition(true)
const res = await funGetAllPosition( const res = await funGetAllPosition(
"?active=true" + "&group=" + `${val}` "?active=true" + "&group=" + `${val}`
); );
@@ -90,6 +92,8 @@ export default function EditMember({ id }: { id: string }) {
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} finally {
setLoadingPosition(false)
} }
} }
@@ -233,19 +237,14 @@ export default function EditMember({ id }: { id: string }) {
</Indicator> </Indicator>
} }
{loading ? {loading ?
<> [...Array(6)].map((_, index) => (
<Skeleton height={40} mt={20} radius={30} /> <Skeleton key={index} height={40} mt={20} radius={30} />
<Skeleton height={40} mt={10} radius={30} /> ))
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
<Skeleton height={40} mt={10} radius={30} />
</>
: :
<> <>
<Select <Select
placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30} placeholder={loadingPosition ? "Loading.. " : "Pilih Jabatan"}
label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
styles={{ styles={{
input: { input: {
color: tema.get().utama, color: tema.get().utama,

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

@@ -10,6 +10,7 @@ import { HiMagnifyingGlass } from "react-icons/hi2"
import { useWibuRealtime } from "wibu-realtime" import { useWibuRealtime } from "wibu-realtime"
import { funGetAllmember } from "../lib/api_member" import { funGetAllmember } from "../lib/api_member"
import { IListMember } from "../lib/type_member" import { IListMember } from "../lib/type_member"
import { funGetUserByCookies } from "@/module/auth"
export default function TabListMember() { export default function TabListMember() {
@@ -32,16 +33,18 @@ export default function TabListMember() {
project: "sdm" project: "sdm"
}) })
const [isRefresh, setRefresh] = useState(false) const [isRefresh, setRefresh] = useState(false)
const [userLogin, setUserLogin] = useState<any>('')
async function getAllUser(loading: boolean) { async function getAllUser(loading: boolean) {
try { try {
if (loading) setLoading(loading)
setLoading(true)
const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage) const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage)
const user = await funGetUserByCookies()
if (res.success) { if (res.success) {
setNameGroup(res.filter.name) setNameGroup(res.filter.name)
setIdGroup(res.filter.id) setIdGroup(res.filter.id)
setUserLogin(user.id)
if (isPage == 1) { if (isPage == 1) {
setDataMember(res.data) setDataMember(res.data)
} else { } else {
@@ -148,9 +151,7 @@ export default function TabListMember() {
dataMember.map((v, i) => { dataMember.map((v, i) => {
return ( return (
<Box my={10} key={i}> <Box my={10} key={i}>
<Box onClick={() => { <Box onClick={() => { userLogin == v.id ? router.push(`/profile`) : router.push(`/member/${v.id}`) }}>
router.push(`/member/${v.id}`)
}}>
<Grid p={5} align="center"> <Grid p={5} align="center">
<Grid.Col <Grid.Col
span={{ span={{

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

@@ -18,5 +18,6 @@ export interface IEditDataProfile {
phone: string; phone: string;
email: string; email: string;
gender: string; gender: string;
idPosition: string;
img: string; img: string;
} }

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

@@ -12,10 +12,13 @@ import toast from "react-hot-toast";
import { FaCamera } from "react-icons/fa6"; import { FaCamera } from "react-icons/fa6";
import { funEditProfileByCookies, funGetProfileByCookies, } from "../lib/api_profile"; import { funEditProfileByCookies, funGetProfileByCookies, } from "../lib/api_profile";
import { IEditDataProfile, IProfileById } from "../lib/type_profile"; import { IEditDataProfile, IProfileById } from "../lib/type_profile";
import { IDataPositionMember } from "../../member/lib/type_member";
import { funGetAllPosition } from "@/module/position/lib/api_position";
export default function EditProfile() { export default function EditProfile() {
const [isValModal, setValModal] = useState(false); const [isValModal, setValModal] = useState(false);
const [isDataEdit, setDataEdit] = useState<IProfileById[]>([]); const [isDataEdit, setDataEdit] = useState<IProfileById[]>([]);
const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
const openRef = useRef<() => void>(null); const openRef = useRef<() => void>(null);
const [img, setIMG] = useState<any | null>(); const [img, setIMG] = useState<any | null>();
const [imgForm, setImgForm] = useState<any>(); const [imgForm, setImgForm] = useState<any>();
@@ -23,6 +26,7 @@ export default function EditProfile() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA); const tema = useHookstate(TEMA);
const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false); const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false);
const [loadingPosition, setLoadingPosition] = useState(true)
const [touched, setTouched] = useState({ const [touched, setTouched] = useState({
nik: false, nik: false,
@@ -30,6 +34,7 @@ export default function EditProfile() {
phone: false, phone: false,
email: false, email: false,
gender: false, gender: false,
idPosition: false
}); });
const [data, setData] = useState<IEditDataProfile>({ const [data, setData] = useState<IEditDataProfile>({
@@ -40,13 +45,30 @@ export default function EditProfile() {
email: "", email: "",
gender: "", gender: "",
img: "", img: "",
idPosition: ""
}); });
async function getAllPosition(val: any) {
try {
setLoadingPosition(true)
const res = await funGetAllPosition(
"?active=true" + "&group=" + `${val}`
);
setListPosition(res.data);
} catch (error) {
console.error(error)
} finally {
setLoadingPosition(false)
}
}
async function getAllProfile() { async function getAllProfile() {
try { try {
setLoading(true); setLoading(true);
const res = await funGetProfileByCookies(); const res = await funGetProfileByCookies();
setData(res.data); setData(res.data);
getAllPosition(res.data.idGroup);
setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`); setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`);
setLoading(false); setLoading(false);
} catch (error) { } catch (error) {
@@ -111,7 +133,7 @@ export default function EditProfile() {
} }
} else if (kategori == 'phone') { } else if (kategori == 'phone') {
setData({ ...data, phone: val }) setData({ ...data, phone: val })
if (val == "" || !(val.length >= 10 && val.length <= 15)) { if (val == "" || !(val.length >= 9 && val.length <= 15)) {
setTouched({ ...touched, phone: true }) setTouched({ ...touched, phone: true })
} else { } else {
setTouched({ ...touched, phone: false }) setTouched({ ...touched, phone: false })
@@ -130,6 +152,13 @@ export default function EditProfile() {
} else { } else {
setTouched({ ...touched, gender: false }) setTouched({ ...touched, gender: false })
} }
} else if (kategori == 'idPosition') {
setData({ ...data, idPosition: val })
if (val == "" || String(val) == "null") {
setTouched({ ...touched, idPosition: true })
} else {
setTouched({ ...touched, idPosition: false })
}
} }
} }
@@ -181,150 +210,172 @@ export default function EditProfile() {
/> />
</Indicator> </Indicator>
)} )}
{loading ? ( {loading ?
<> [...Array(6)].map((_, index) => (
<Skeleton height={40} mt={20} radius={10} /> <Skeleton key={index} height={40} mt={20} radius={10} />
<Skeleton height={40} mt={20} radius={10} /> ))
<Skeleton height={40} mt={20} radius={10} /> : (
<Skeleton height={40} mt={20} radius={10} /> <>
<Skeleton height={40} mt={20} radius={10} /> <Select
</> placeholder={loadingPosition ? "Loading.. " : "Pilih Jabatan"}
) : ( label="Jabatan" w={"100%"} size="md" required withAsterisk radius={10}
<> styles={{
<TextInput input: {
size="md" color: tema.get().utama,
type="number" borderRadius: tema.get().utama,
radius={10} borderColor: tema.get().utama,
placeholder="NIK" },
withAsterisk }}
label="NIK" data={
w={"100%"} listPosition
styles={{ ? listPosition.map((data) => ({
input: { value: data.id,
color: tema.get().utama, label: data.name,
borderRadius: tema.get().utama, }))
borderColor: tema.get().utama, : []
}, }
}} onChange={(val: any) => { onValidation('idPosition', val) }}
onChange={(e) => { onValidation('nik', e.target.value) }} value={(data?.idPosition == "") ? null : data.idPosition}
value={data.nik} error={
error={ touched.idPosition && (
touched.nik && data.idPosition == "" || String(data.idPosition) == "null" ? "Jabatan Tidak Boleh Kosong" : null
(data.nik === ""
? "NIK Tidak Boleh Kosong"
: data.nik.length !== 16
? "NIK Harus 16 Karakter"
: null)
}
/>
<TextInput
size="md"
type="text"
radius={10}
placeholder="Nama"
withAsterisk
label="Nama"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => { onValidation('name', e.target.value) }}
value={data.name}
error={
touched.name &&
(data.name == "" ? "Nama Tidak Boleh Kosong" : null)
}
/>
<TextInput
size="md"
type="email"
radius={10}
placeholder="Email"
withAsterisk
label="Email"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => { onValidation('email', e.target.value) }}
value={data.email}
error={
touched.email &&
(data.email == ""
? "Email Tidak Boleh Kosong"
: !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(
data.email
) )
? "Email tidak valid" }
: null) />
} <TextInput
/> size="md"
<TextInput type="number"
size="md" radius={10}
type="number" placeholder="NIK"
radius={10} withAsterisk
placeholder="8xx xxxx xxxx" label="NIK"
withAsterisk w={"100%"}
label="Nomor Telepon" styles={{
w={"100%"} input: {
styles={{ color: tema.get().utama,
input: { borderRadius: tema.get().utama,
color: tema.get().utama, borderColor: tema.get().utama,
borderRadius: tema.get().utama, },
borderColor: tema.get().utama, }}
}, onChange={(e) => { onValidation('nik', e.target.value) }}
}} value={data.nik}
leftSection={<Text>+62</Text>} error={
onChange={(e) => { onValidation('phone', e.target.value); }} touched.nik &&
value={data.phone} (data.nik === ""
error={ ? "NIK Tidak Boleh Kosong"
touched.phone && : data.nik.length !== 16
(data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" ? "NIK Harus 16 Karakter"
: !(data.phone.length >= 10 && data.phone.length <= 15) ? "Nomor Telepon Tidak Valid" : null) : null)
} }
/> />
<Select <TextInput
placeholder="Jenis Kelamin" size="md"
label="Jenis Kelamin" type="text"
w={"100%"} radius={10}
size="md" placeholder="Nama"
required withAsterisk
withAsterisk label="Nama"
radius={10} w={"100%"}
styles={{ styles={{
input: { input: {
color: tema.get().utama, color: tema.get().utama,
borderRadius: tema.get().utama, borderRadius: tema.get().utama,
borderColor: tema.get().utama, borderColor: tema.get().utama,
}, },
}} }}
data={[ onChange={(e) => { onValidation('name', e.target.value) }}
{ value={data.name}
value: "M", error={
label: "Laki-laki", touched.name &&
}, (data.name == "" ? "Nama Tidak Boleh Kosong" : null)
{ }
value: "F", />
label: "Perempuan", <TextInput
}, size="md"
]} type="email"
onChange={(val: any) => { onValidation('gender', val) }} radius={10}
value={data.gender} placeholder="Email"
error={ withAsterisk
touched.gender && label="Email"
(data.gender == "" || data.gender == null ? "Jenis Kelamin Tidak Boleh Kosong" : null) w={"100%"}
} styles={{
/> input: {
</> color: tema.get().utama,
)} borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => { onValidation('email', e.target.value) }}
value={data.email}
error={
touched.email &&
(data.email == ""
? "Email Tidak Boleh Kosong"
: !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(
data.email
)
? "Email tidak valid"
: null)
}
/>
<TextInput
size="md"
type="number"
radius={10}
placeholder="8xx xxxx xxxx"
withAsterisk
label="Nomor Telepon"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
leftSection={<Text>+62</Text>}
onChange={(e) => { onValidation('phone', e.target.value); }}
value={data.phone}
error={
touched.phone &&
(data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong"
: !(data.phone.length >= 9 && data.phone.length <= 15) ? "Nomor Telepon Tidak Valid" : null)
}
/>
<Select
placeholder="Jenis Kelamin"
label="Jenis Kelamin"
w={"100%"}
size="md"
required
withAsterisk
radius={10}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={[
{
value: "M",
label: "Laki-laki",
},
{
value: "F",
label: "Perempuan",
},
]}
onChange={(val: any) => { onValidation('gender', val) }}
value={data.gender}
error={
touched.gender &&
(data.gender == "" || data.gender == null ? "Jenis Kelamin Tidak Boleh Kosong" : null)
}
/>
</>
)}
</Stack> </Stack>
<Box <Box
pos={"fixed"} pos={"fixed"}