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

style : update style

Browse Source
This commit is contained in:
lukman
2024-09-30 15:29:03 +08:00
parent dd4a63d9b5
commit 9a4ade3e2d
7 changed files with 258 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/module/user/member/ui/create_member.tsx
View File

@@ -97,16 +97,6 @@ export default function CreateMember() {
}
}
async function changeGrup(val: any) {
setListPosition([]);
setListData({
...listData,
idGroup: val,
idPosition: "",
});
getAllPosition(val);
}
async function onSubmit(val: boolean) {
try {
@@ -151,6 +141,78 @@ export default function CreateMember() {
getLogin()
}, []);
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
setModal(true)
}
function onValidation(kategori: string, val: string) {
if (kategori == 'nik') {
setListData({ ...listData, nik: val })
if (val === "" || val.length !== 16) {
setTouched({ ...touched, nik: true })
} else {
setTouched({ ...touched, nik: false })
}
} else if (kategori == 'name') {
setListData({ ...listData, name: val })
if (val === "") {
setTouched({ ...touched, name: true })
} else {
setTouched({ ...touched, name: false })
}
} else if (kategori == 'phone') {
setListData({ ...listData, phone: val })
if (val == "" || !(val.length >= 10 && val.length <= 15)) {
setTouched({ ...touched, phone: true })
} else {
setTouched({ ...touched, phone: false })
}
} else if (kategori == 'email') {
setListData({ ...listData, email: val })
if (val == "" || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val)) {
setTouched({ ...touched, email: true })
} else {
setTouched({ ...touched, email: false })
}
} else if (kategori == 'gender') {
setListData({ ...listData, gender: val })
if (val == "" || 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 })
} else {
setTouched({ ...touched, idGroup: false })
}
} else if (kategori == 'idPosition') {
setListData({ ...listData, idPosition: val })
if (val === "") {
setTouched({ ...touched, idPosition: true })
} else {
setTouched({ ...touched, idPosition: false })
}
} else if (kategori == 'idUserRole') {
setListData({ ...listData, idUserRole: val })
if (val === "") {
setTouched({ ...touched, idUserRole: true })
} else {
setTouched({ ...touched, idUserRole: false })
}
}
}
async function changeGrup(val: any) {
setListPosition([]);
onValidation('idGroup', val)
getAllPosition(val);
}
return (
<Box>
@@ -204,11 +266,7 @@ export default function CreateMember() {
}))
: []
}
onChange={(val: any) => {
changeGrup(val);
setTouched({ ...touched, idGroup: false })
}}
onBlur={() => setTouched({ ...touched, idGroup: true })}
onChange={(val: any) => { changeGrup(val) }}
error={
touched.idGroup && (
listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
@@ -239,16 +297,8 @@ export default function CreateMember() {
}))
: []
}
onChange={(val: any) => {
setListData({
...listData,
idPosition: val,
})
setTouched({ ...touched, idPosition: false })
}
}
onChange={(val: any) => { onValidation('idPosition', val) }}
value={listData.idPosition == "" ? null : listData.idPosition}
onBlur={() => setTouched({ ...touched, idPosition: true })}
error={
touched.idPosition && (
listData.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
@@ -278,15 +328,7 @@ export default function CreateMember() {
}))
: []
}
onChange={(val: any) => {
setListData({
...listData,
idUserRole: val,
})
setTouched({ ...touched, idUserRole: false })
}
}
onBlur={() => setTouched({ ...touched, idUserRole: true })}
onChange={(val: any) => { onValidation('idUserRole', val) }}
error={
touched.idUserRole && (
listData.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
@@ -308,11 +350,7 @@ export default function CreateMember() {
borderColor: tema.get().utama,
},
}}
onChange={(event: any) => {
setListData({ ...listData, nik: event.target.value });
setTouched({ ...touched, nik: false });
}}
onBlur={() => setTouched({ ...touched, nik: true })}
onChange={(e) => { onValidation('nik', e.target.value) }}
error={
touched.nik && (
listData.nik === "" ? "NIK Tidak Boleh Kosong" :
@@ -335,15 +373,7 @@ export default function CreateMember() {
borderColor: tema.get().utama,
},
}}
onChange={(event: any) => {
setListData({
...listData,
name: event.target.value,
})
setTouched({ ...touched, name: false })
}
}
onBlur={() => setTouched({ ...touched, name: true })}
onChange={(e) => { onValidation('name', e.target.value) }}
error={
touched.name && (
listData.name == "" ? "Nama Tidak Boleh Kosong" : null
@@ -365,15 +395,7 @@ export default function CreateMember() {
borderColor: tema.get().utama,
},
}}
onChange={(event: any) => {
setListData({
...listData,
email: event.target.value,
})
setTouched({ ...touched, email: false })
}
}
onBlur={() => setTouched({ ...touched, email: true })}
onChange={(e) => { onValidation('email', e.target.value) }}
error={
touched.email && (
listData.email == "" ? "Email Tidak Boleh Kosong" :
@@ -397,15 +419,7 @@ export default function CreateMember() {
borderColor: tema.get().utama,
},
}}
onChange={(event: any) => {
setListData({
...listData,
phone: "62" + event.target.value,
})
setTouched({ ...touched, phone: false })
}
}
onBlur={() => setTouched({ ...touched, phone: true })}
onChange={(e) => { onValidation('phone', e.target.value); }}
error={
touched.phone && (
listData.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
@@ -432,15 +446,7 @@ export default function CreateMember() {
{ value: "M", label: "Laki-laki" },
{ value: "F", label: "Perempuan" },
]}
onChange={(val: any) => {
setListData({
...listData,
gender: val,
})
setTouched({ ...touched, gender: false })
}
}
onBlur={() => setTouched({ ...touched, gender: true })}
onChange={(val: any) => { onValidation('gender', val) }}
error={
touched.gender && (
listData.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null
@@ -459,22 +465,7 @@ export default function CreateMember() {
size="md"
radius={30}
fullWidth
onClick={() => {
if (
listData.nik !== "" &&
listData.name !== "" &&
listData.email !== "" &&
listData.phone !== "" &&
listData.gender !== "" &&
listData.idGroup !== "" &&
listData.idPosition !== "" &&
listData.idUserRole !== ""
) {
setModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
}}
onClick={() => { onCheck() }}
>
Simpan
</Button>

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

@@ -101,15 +101,6 @@ export default function EditMember({ id }: { id: string }) {
}
}
async function changeGrup(val: any) {
setListPosition([])
setData({
...data,
idGroup: val,
idPosition: ""
})
getAllPosition(val)
}
useShallowEffect(() => {
getAllGroup()
@@ -143,6 +134,65 @@ export default function EditMember({ id }: { id: string }) {
}
}
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
setModal(true)
}
function onValidation(kategori: string, val: string) {
if (kategori == 'nik') {
setData({ ...data, nik: val })
if (val === "" || val.length !== 16) {
setTouched({ ...touched, nik: true })
} else {
setTouched({ ...touched, nik: false })
}
} else if (kategori == 'name') {
setData({ ...data, name: val })
if (val === "") {
setTouched({ ...touched, name: true })
} else {
setTouched({ ...touched, name: false })
}
} else if (kategori == 'phone') {
setData({ ...data, phone: val })
if (val == "" || !(val.length >= 10 && val.length <= 15)) {
setTouched({ ...touched, phone: true })
} else {
setTouched({ ...touched, phone: false })
}
} else if (kategori == 'email') {
setData({ ...data, email: val })
if (val == "" || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val)) {
setTouched({ ...touched, email: true })
} else {
setTouched({ ...touched, email: false })
}
} else if (kategori == 'gender') {
setData({ ...data, gender: val })
if (val == "" || val == "null") {
setTouched({ ...touched, gender: true })
} else {
setTouched({ ...touched, gender: false })
}
} else if (kategori == 'idPosition') {
setData({ ...data, idPosition: val })
if (val === "") {
setTouched({ ...touched, idPosition: true })
} else {
setTouched({ ...touched, idPosition: false })
}
} else if (kategori == 'idUserRole') {
setData({ ...data, idUserRole: val })
if (val === "") {
setTouched({ ...touched, idUserRole: true })
} else {
setTouched({ ...touched, idUserRole: false })
}
}
}
return (
<Box>
<Stack
@@ -180,7 +230,7 @@ export default function EditMember({ id }: { id: string }) {
src={img}
style={{
border: `1px solid ${"#C1BFBFFF"}`
}}
}}
/>
</Indicator>
}
@@ -196,36 +246,6 @@ export default function EditMember({ id }: { id: string }) {
</>
:
<>
{/* <Select
placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
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={{
@@ -243,12 +263,8 @@ export default function EditMember({ id }: { id: string }) {
}))
: []
}
onChange={(val: any) => {
setData({ ...data, idPosition: val })
setTouched({ ...touched, idPosition: false })
}}
onChange={(val: any) => { onValidation('idPosition', val) }}
value={(data?.idPosition == "") ? null : data.idPosition}
onBlur={() => setTouched({ ...touched, idPosition: true })}
error={
touched.idPosition && (
data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
@@ -272,12 +288,8 @@ export default function EditMember({ id }: { id: string }) {
}))
: []
}
onChange={(val: any) => {
setData({ ...data, idUserRole: val })
setTouched({ ...touched, idUserRole: false })
}}
onChange={(val: any) => { onValidation('idUserRole', val) }}
value={data?.idUserRole}
onBlur={() => setTouched({ ...touched, idUserRole: true })}
error={
touched.idUserRole && (
data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
@@ -293,12 +305,8 @@ export default function EditMember({ id }: { id: string }) {
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
setData({ ...data, nik: e.target.value })
setTouched({ ...touched, nik: false })
}}
onChange={(e) => { onValidation('nik', e.target.value) }}
value={data.nik}
onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
data.nik === "" ? "NIK Tidak Boleh Kosong" :
@@ -315,10 +323,7 @@ export default function EditMember({ id }: { id: string }) {
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
setData({ ...data, name: e.target.value })
setTouched({ ...touched, name: false })
}}
onChange={(e) => { onValidation('name', e.target.value) }}
value={data.name}
onBlur={() => setTouched({ ...touched, name: true })}
error={
@@ -336,12 +341,8 @@ export default function EditMember({ id }: { id: string }) {
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
setData({ ...data, email: e.target.value })
setTouched({ ...touched, email: false })
}}
onChange={(e) => { onValidation('email', e.target.value) }}
value={data.email}
onBlur={() => setTouched({ ...touched, email: true })}
error={
touched.email && (
data.email == "" ? "Email Tidak Boleh Kosong" :
@@ -360,12 +361,8 @@ export default function EditMember({ id }: { id: string }) {
}}
placeholder="8xxx xxxx xxxx"
leftSection={<Text>+62</Text>}
onChange={(e) => {
setData({ ...data, phone: e.target.value })
setTouched({ ...touched, phone: false })
}}
onChange={(e) => { onValidation('phone', e.target.value); }}
value={data.phone}
onBlur={() => setTouched({ ...touched, phone: true })}
error={
touched.phone && (
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
@@ -394,12 +391,8 @@ export default function EditMember({ id }: { id: string }) {
}
]
}
onChange={(val: any) => {
setData({ ...data, gender: val })
setTouched({ ...touched, gender: false })
}}
onChange={(val: any) => { onValidation('gender', val) }}
value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
data.gender == "" ? "Gender Tidak Boleh Kosong" : null
@@ -423,22 +416,7 @@ export default function EditMember({ id }: { id: string }) {
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");
}
}}
onClick={() => { onCheck() }}
>
Simpan
</Button>