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

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 roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
const [loadingPosition, setLoadingPosition] = useState(true)
const [touched, setTouched] = useState({
nik: false,
name: false,
@@ -83,6 +84,7 @@ export default function EditMember({ id }: { id: string }) {
async function getAllPosition(val: any) {
try {
setLoadingPosition(true)
const res = await funGetAllPosition(
"?active=true" + "&group=" + `${val}`
);
@@ -90,6 +92,8 @@ export default function EditMember({ id }: { id: string }) {
} catch (error) {
console.error(error)
} finally {
setLoadingPosition(false)
}
}
@@ -233,19 +237,14 @@ export default function EditMember({ id }: { id: string }) {
</Indicator>
}
{loading ?
<>
<Skeleton 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} />
</>
[...Array(6)].map((_, index) => (
<Skeleton key={index} height={40} mt={20} radius={30} />
))
:
<>
<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={{
input: {
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 { funGetAllmember } from "../lib/api_member"
import { IListMember } from "../lib/type_member"
import { funGetUserByCookies } from "@/module/auth"
export default function TabListMember() {
@@ -32,16 +33,18 @@ export default function TabListMember() {
project: "sdm"
})
const [isRefresh, setRefresh] = useState(false)
const [userLogin, setUserLogin] = useState<any>('')
async function getAllUser(loading: boolean) {
try {
if (loading)
setLoading(true)
setLoading(loading)
const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage)
const user = await funGetUserByCookies()
if (res.success) {
setNameGroup(res.filter.name)
setIdGroup(res.filter.id)
setUserLogin(user.id)
if (isPage == 1) {
setDataMember(res.data)
} else {
@@ -148,9 +151,7 @@ export default function TabListMember() {
dataMember.map((v, i) => {
return (
<Box my={10} key={i}>
<Box onClick={() => {
router.push(`/member/${v.id}`)
}}>
<Box onClick={() => { userLogin == v.id ? router.push(`/profile`) : router.push(`/member/${v.id}`) }}>
<Grid p={5} align="center">
<Grid.Col
span={{

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

@@ -18,5 +18,6 @@ export interface IEditDataProfile {
phone: string;
email: string;
gender: string;
idPosition: 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 { funEditProfileByCookies, funGetProfileByCookies, } from "../lib/api_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() {
const [isValModal, setValModal] = useState(false);
const [isDataEdit, setDataEdit] = useState<IProfileById[]>([]);
const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
const openRef = useRef<() => void>(null);
const [img, setIMG] = useState<any | null>();
const [imgForm, setImgForm] = useState<any>();
@@ -23,6 +26,7 @@ export default function EditProfile() {
const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA);
const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false);
const [loadingPosition, setLoadingPosition] = useState(true)
const [touched, setTouched] = useState({
nik: false,
@@ -30,6 +34,7 @@ export default function EditProfile() {
phone: false,
email: false,
gender: false,
idPosition: false
});
const [data, setData] = useState<IEditDataProfile>({
@@ -40,13 +45,30 @@ export default function EditProfile() {
email: "",
gender: "",
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() {
try {
setLoading(true);
const res = await funGetProfileByCookies();
setData(res.data);
getAllPosition(res.data.idGroup);
setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`);
setLoading(false);
} catch (error) {
@@ -111,7 +133,7 @@ export default function EditProfile() {
}
} else if (kategori == 'phone') {
setData({ ...data, phone: val })
if (val == "" || !(val.length >= 10 && val.length <= 15)) {
if (val == "" || !(val.length >= 9 && val.length <= 15)) {
setTouched({ ...touched, phone: true })
} else {
setTouched({ ...touched, phone: false })
@@ -130,6 +152,13 @@ export default function EditProfile() {
} else {
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>
)}
{loading ? (
<>
<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} />
<Skeleton height={40} mt={20} radius={10} />
</>
) : (
<>
<TextInput
size="md"
type="number"
radius={10}
placeholder="NIK"
withAsterisk
label="NIK"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => { onValidation('nik', e.target.value) }}
value={data.nik}
error={
touched.nik &&
(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
{loading ?
[...Array(6)].map((_, index) => (
<Skeleton key={index} height={40} mt={20} radius={10} />
))
: (
<>
<Select
placeholder={loadingPosition ? "Loading.. " : "Pilih Jabatan"}
label="Jabatan" w={"100%"} size="md" required withAsterisk radius={10}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
data={
listPosition
? listPosition.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => { onValidation('idPosition', val) }}
value={(data?.idPosition == "") ? null : data.idPosition}
error={
touched.idPosition && (
data.idPosition == "" || String(data.idPosition) == "null" ? "Jabatan Tidak Boleh Kosong" : null
)
? "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 >= 10 && 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)
}
/>
</>
)}
}
/>
<TextInput
size="md"
type="number"
radius={10}
placeholder="NIK"
withAsterisk
label="NIK"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => { onValidation('nik', e.target.value) }}
value={data.nik}
error={
touched.nik &&
(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"
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>
<Box
pos={"fixed"}