style : update style

Deskripsi:
- update style home
- update validasi jabatan

No Issue
This commit is contained in:
lukman
2024-09-30 10:47:49 +08:00
parent 01c4c6df7f
commit c67b1b8a37
7 changed files with 65 additions and 39 deletions

View File

@@ -96,6 +96,23 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
getOneData()
}, [refresh.get()])
function onCheck() {
if (Object.values(touched).some((v) => v == true))
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 })
}
}
}
async function nonActive(val: boolean) {
try {
if (val) {
@@ -156,7 +173,6 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
{loading ?
<Box>
<Skeleton height={40} mt={6} radius={10} />
<Skeleton height={40} mt={15} radius={10} />
</Box>
:
<Box>
@@ -172,16 +188,14 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
required
size="md"
value={String(data.name)}
onChange={(e) => {
setData({ ...data, name: e.target.value })
setTouched({ ...touched, name: false })
}}
onChange={(e) => { onValidation('name', e.target.value) }}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
touched.name &&
(data.name == "" ? "Error! harus memasukkan Nama Jabatan" :
data.name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
)
}
}
radius={10}
placeholder="Nama Jabatan"
/>

View File

@@ -73,6 +73,30 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
}
}
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
onSubmit()
}
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 })
}
} else if (kategori == 'idGroup') {
setListData({ ...listData, idGroup: val })
if (val == "") {
setTouched({ ...touched, idGroup: true })
} else {
setTouched({ ...touched, idGroup: false })
}
}
}
return (
<Box>
<Stack pt={10}>
@@ -102,9 +126,9 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
</Stack>
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Jabatan'} size="lg">
<Box pt={10} pos={"relative"} h={{
base: "69vh",
sm: "69vh",
lg: "69vh",
base: "65vh",
sm: "67vh",
lg: "67vh",
xl: "70vh"
}}>
@@ -125,13 +149,9 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
radius={10}
mb={5}
withAsterisk
onChange={(val: any) => {
setListData({
...listData,
idGroup: val
})
setTouched({ ...touched, idGroup: false })
}}
onChange={(e: any) =>
{ onValidation('idGroup', e) }
}
styles={{
input: {
color: tema.get().utama,
@@ -144,8 +164,6 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
onFocus={() => setTouched({ ...touched, idGroup: true })}
onBlur={() => setTouched({ ...touched, idGroup: true })}
/>
}
<TextInput
@@ -159,22 +177,15 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
}}
my={15}
size="md"
onChange={(event: any) => {
setListData({
...listData,
name: event.target.value
})
setTouched({ ...touched, name: false })
}}
onChange={(e) => { onValidation('name', e.target.value) }}
radius={10}
placeholder="Nama Jabatan"
error={
touched.name && (
listData.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
touched.name &&
(listData.name == "" ? "Error! harus memasukkan Nama Jabatan" :
listData.name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
)
}
onFocus={() => setTouched({ ...touched, name: true })}
onBlur={() => setTouched({ ...touched, name: true })}
}
required
/>
<Box pos={"absolute"} bottom={10} left={0} right={0}>
@@ -184,7 +195,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
size="lg"
radius={30}
fullWidth
onClick={onSubmit}
onClick={() => { onCheck() }}
>
SIMPAN
</Button>