style : update skeleton
Deskripsi: - update announcement - update celender - update division - update task - update project - update user No Issue
This commit is contained in:
lukman
@@ -2,7 +2,7 @@
|
||||
import { WARNA } from "@/module/_global";
|
||||
import LayoutModal from "@/module/_global/layout/layout_modal";
|
||||
import { funGetAllGroup, IDataGroup } from "@/module/group";
|
||||
import { Box, Button, Select, Stack, Text, TextInput } from "@mantine/core";
|
||||
import { Box, Button, rem, Select, Stack, Text, TextInput } from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
@@ -129,7 +129,7 @@ export default function CreateMember() {
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack align="center" justify="center" gap="xs" pt={30} px={20}>
|
||||
<Stack align="center" justify="center" gap="xs" pt={30} px={20} pb={100}>
|
||||
<Box
|
||||
bg={WARNA.biruTua}
|
||||
py={30}
|
||||
@@ -406,7 +406,11 @@ export default function CreateMember() {
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Box mt={30} mx={20} pb={20}>
|
||||
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
|
||||
maxWidth: rem(550),
|
||||
zIndex: 999,
|
||||
backgroundColor: `${WARNA.bgWhite}`,
|
||||
}}>
|
||||
<Button
|
||||
c={"white"}
|
||||
bg={WARNA.biruTua}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { WARNA } 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 { Avatar, Box, Button, Indicator, Select, Stack, Text, TextInput } from "@mantine/core";
|
||||
import { Avatar, Box, Button, Indicator, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useRef, useState } from "react";
|
||||
@@ -25,6 +25,7 @@ export default function EditMember({ id }: { id: string }) {
|
||||
const [imgForm, setImgForm] = useState<any>()
|
||||
const openRef = useRef<() => void>(null)
|
||||
const [img, setIMG] = useState<any | null>()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [touched, setTouched] = useState({
|
||||
nik: false,
|
||||
name: false,
|
||||
@@ -63,12 +64,16 @@ export default function EditMember({ id }: { id: string }) {
|
||||
|
||||
async function getOneData() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const res = await funGetOneMember(id)
|
||||
setData(res.data)
|
||||
getAllPosition(res.data?.idGroup)
|
||||
setIMG(`/api/file/img?cat=user&file=${res.data.img}`)
|
||||
setLoading(false)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,6 +148,7 @@ export default function EditMember({ id }: { id: string }) {
|
||||
gap="xs"
|
||||
pt={30}
|
||||
px={20}
|
||||
pb={100}
|
||||
>
|
||||
<Dropzone
|
||||
openRef={openRef}
|
||||
@@ -161,249 +167,276 @@ export default function EditMember({ id }: { id: string }) {
|
||||
}}
|
||||
>
|
||||
</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>
|
||||
<Select
|
||||
placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
data={
|
||||
listGroup
|
||||
? listGroup.map((data) => ({
|
||||
value: data.id,
|
||||
label: data.name,
|
||||
}))
|
||||
: []
|
||||
}
|
||||
onChange={(val: any) => {
|
||||
changeGrup(val)
|
||||
setTouched({ ...touched, idGroup: false })
|
||||
}}
|
||||
value={data?.idGroup}
|
||||
onBlur={() => setTouched({ ...touched, idGroup: true })}
|
||||
error={
|
||||
touched.idGroup && (
|
||||
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
data={
|
||||
listPosition
|
||||
? listPosition.map((data) => ({
|
||||
value: data.id,
|
||||
label: data.name,
|
||||
}))
|
||||
: []
|
||||
}
|
||||
onChange={(val: any) => {
|
||||
setData({ ...data, idPosition: val })
|
||||
setTouched({ ...touched, idPosition: false })
|
||||
}}
|
||||
value={(data?.idPosition == "") ? null : data.idPosition}
|
||||
onBlur={() => setTouched({ ...touched, idPosition: true })}
|
||||
error={
|
||||
touched.idPosition && (
|
||||
data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
data={
|
||||
listUserRole
|
||||
? listUserRole.map((data) => ({
|
||||
value: data.id,
|
||||
label: data.name,
|
||||
}))
|
||||
: []
|
||||
}
|
||||
onChange={(val: any) => {
|
||||
setData({ ...data, idUserRole: val })
|
||||
setTouched({ ...touched, idUserRole: false })
|
||||
}}
|
||||
value={data?.idUserRole}
|
||||
onBlur={() => setTouched({ ...touched, idUserRole: true })}
|
||||
error={
|
||||
touched.idUserRole && (
|
||||
data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<TextInput
|
||||
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
onChange={(e) => {
|
||||
setData({ ...data, nik: e.target.value })
|
||||
setTouched({ ...touched, nik: false })
|
||||
}}
|
||||
value={data.nik}
|
||||
onBlur={() => setTouched({ ...touched, nik: true })}
|
||||
error={
|
||||
touched.nik && (
|
||||
data.nik === "" ? "NIK Tidak Boleh Kosong" :
|
||||
data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<TextInput
|
||||
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
onChange={(e) => {
|
||||
setData({ ...data, name: e.target.value })
|
||||
setTouched({ ...touched, name: false })
|
||||
}}
|
||||
value={data.name}
|
||||
onBlur={() => setTouched({ ...touched, name: true })}
|
||||
error={
|
||||
touched.name && (
|
||||
data.name == "" ? "Nama Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<TextInput
|
||||
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
onChange={(e) => {
|
||||
setData({ ...data, email: e.target.value })
|
||||
setTouched({ ...touched, email: false })
|
||||
}}
|
||||
value={data.email}
|
||||
onBlur={() => setTouched({ ...touched, email: true })}
|
||||
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={30} withAsterisk label="Nomor Telepon" w={"100%"}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
placeholder="8xxx xxxx xxxx"
|
||||
leftSection={<Text>+62</Text>}
|
||||
onChange={(e) => {
|
||||
setData({ ...data, phone: e.target.value })
|
||||
setTouched({ ...touched, phone: false })
|
||||
}}
|
||||
value={data.phone}
|
||||
onBlur={() => setTouched({ ...touched, phone: true })}
|
||||
error={
|
||||
touched.phone && (
|
||||
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
|
||||
data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
data={
|
||||
[
|
||||
{
|
||||
value: "M",
|
||||
label: "Laki-laki"
|
||||
},
|
||||
{
|
||||
value: "F",
|
||||
label: "Perempuan"
|
||||
{loading ?
|
||||
<Skeleton height={150} width={150} radius={"100"} />
|
||||
:
|
||||
<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>
|
||||
}
|
||||
{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} />
|
||||
</>
|
||||
:
|
||||
<>
|
||||
|
||||
<Select
|
||||
placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
data={
|
||||
listGroup
|
||||
? listGroup.map((data) => ({
|
||||
value: data.id,
|
||||
label: data.name,
|
||||
}))
|
||||
: []
|
||||
}
|
||||
]
|
||||
}
|
||||
onChange={(val: any) => {
|
||||
setData({ ...data, gender: val })
|
||||
setTouched({ ...touched, gender: false })
|
||||
}}
|
||||
value={data.gender}
|
||||
onBlur={() => setTouched({ ...touched, gender: true })}
|
||||
error={
|
||||
touched.gender && (
|
||||
data.gender == "" ? "Gender Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
onChange={(val: any) => {
|
||||
changeGrup(val)
|
||||
setTouched({ ...touched, idGroup: false })
|
||||
}}
|
||||
value={data?.idGroup}
|
||||
onBlur={() => setTouched({ ...touched, idGroup: true })}
|
||||
error={
|
||||
touched.idGroup && (
|
||||
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
data={
|
||||
listPosition
|
||||
? listPosition.map((data) => ({
|
||||
value: data.id,
|
||||
label: data.name,
|
||||
}))
|
||||
: []
|
||||
}
|
||||
onChange={(val: any) => {
|
||||
setData({ ...data, idPosition: val })
|
||||
setTouched({ ...touched, idPosition: false })
|
||||
}}
|
||||
value={(data?.idPosition == "") ? null : data.idPosition}
|
||||
onBlur={() => setTouched({ ...touched, idPosition: true })}
|
||||
error={
|
||||
touched.idPosition && (
|
||||
data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
data={
|
||||
listUserRole
|
||||
? listUserRole.map((data) => ({
|
||||
value: data.id,
|
||||
label: data.name,
|
||||
}))
|
||||
: []
|
||||
}
|
||||
onChange={(val: any) => {
|
||||
setData({ ...data, idUserRole: val })
|
||||
setTouched({ ...touched, idUserRole: false })
|
||||
}}
|
||||
value={data?.idUserRole}
|
||||
onBlur={() => setTouched({ ...touched, idUserRole: true })}
|
||||
error={
|
||||
touched.idUserRole && (
|
||||
data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<TextInput
|
||||
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
onChange={(e) => {
|
||||
setData({ ...data, nik: e.target.value })
|
||||
setTouched({ ...touched, nik: false })
|
||||
}}
|
||||
value={data.nik}
|
||||
onBlur={() => setTouched({ ...touched, nik: true })}
|
||||
error={
|
||||
touched.nik && (
|
||||
data.nik === "" ? "NIK Tidak Boleh Kosong" :
|
||||
data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<TextInput
|
||||
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
onChange={(e) => {
|
||||
setData({ ...data, name: e.target.value })
|
||||
setTouched({ ...touched, name: false })
|
||||
}}
|
||||
value={data.name}
|
||||
onBlur={() => setTouched({ ...touched, name: true })}
|
||||
error={
|
||||
touched.name && (
|
||||
data.name == "" ? "Nama Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<TextInput
|
||||
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
onChange={(e) => {
|
||||
setData({ ...data, email: e.target.value })
|
||||
setTouched({ ...touched, email: false })
|
||||
}}
|
||||
value={data.email}
|
||||
onBlur={() => setTouched({ ...touched, email: true })}
|
||||
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={30} withAsterisk label="Nomor Telepon" w={"100%"}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
placeholder="8xxx xxxx xxxx"
|
||||
leftSection={<Text>+62</Text>}
|
||||
onChange={(e) => {
|
||||
setData({ ...data, phone: e.target.value })
|
||||
setTouched({ ...touched, phone: false })
|
||||
}}
|
||||
value={data.phone}
|
||||
onBlur={() => setTouched({ ...touched, phone: true })}
|
||||
error={
|
||||
touched.phone && (
|
||||
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
|
||||
data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
data={
|
||||
[
|
||||
{
|
||||
value: "M",
|
||||
label: "Laki-laki"
|
||||
},
|
||||
{
|
||||
value: "F",
|
||||
label: "Perempuan"
|
||||
}
|
||||
]
|
||||
}
|
||||
onChange={(val: any) => {
|
||||
setData({ ...data, gender: val })
|
||||
setTouched({ ...touched, gender: false })
|
||||
}}
|
||||
value={data.gender}
|
||||
onBlur={() => setTouched({ ...touched, gender: true })}
|
||||
error={
|
||||
touched.gender && (
|
||||
data.gender == "" ? "Gender Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</Stack>
|
||||
<Box mt={30} mx={20} pb={20}>
|
||||
<Button
|
||||
c={"white"}
|
||||
bg={WARNA.biruTua}
|
||||
size="md"
|
||||
radius={30}
|
||||
fullWidth
|
||||
onClick={() => {
|
||||
if (
|
||||
data.nik !== "" &&
|
||||
data.name !== "" &&
|
||||
data.email !== "" &&
|
||||
data.phone !== "" &&
|
||||
data.gender !== "" &&
|
||||
data.idGroup !== "" &&
|
||||
data.idPosition !== "" &&
|
||||
data.idUserRole !== ""
|
||||
) {
|
||||
setModal(true);
|
||||
} else {
|
||||
toast.error("Mohon lengkapi semua form");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
|
||||
maxWidth: rem(550),
|
||||
zIndex: 999,
|
||||
backgroundColor: `${WARNA.bgWhite}`,
|
||||
}}>
|
||||
{loading ?
|
||||
<Skeleton height={50} radius={30} />
|
||||
:
|
||||
<Button
|
||||
c={"white"}
|
||||
bg={WARNA.biruTua}
|
||||
size="md"
|
||||
radius={30}
|
||||
fullWidth
|
||||
onClick={() => {
|
||||
if (
|
||||
data.nik !== "" &&
|
||||
data.name !== "" &&
|
||||
data.email !== "" &&
|
||||
data.phone !== "" &&
|
||||
data.gender !== "" &&
|
||||
data.idGroup !== "" &&
|
||||
data.idPosition !== "" &&
|
||||
data.idUserRole !== ""
|
||||
) {
|
||||
setModal(true);
|
||||
} else {
|
||||
toast.error("Mohon lengkapi semua form");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
}
|
||||
</Box>
|
||||
<LayoutModal opened={isModal} onClose={() => setModal(false)}
|
||||
description="Apakah Anda yakin ingin mengubah data?"
|
||||
|
||||
Reference in New Issue
Block a user