feat : update validation

This commit is contained in:
lukman
2024-08-26 17:33:14 +08:00
parent 5f169a7e5f
commit 80c6eb7f9a
27 changed files with 762 additions and 318 deletions

View File

@@ -20,6 +20,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
idGroup: ""
})
const [listGroup, setListGorup] = useState<IDataPosition[]>([])
const [touched, setTouched] = useState({
name: false,
idGroup: false
});
function onCLose() {
onUpdated(true)
@@ -153,7 +157,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
}
value={String(data.idGroup)}
mb={5}
onChange={(val) => setData({ ...data, idGroup: val })}
onChange={(val) => {
setData({ ...data, idGroup: val })
setTouched({ ...touched, idGroup: false })
}}
withAsterisk
styles={{
input: {
@@ -162,6 +169,12 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
borderColor: WARNA.biruTua,
},
}}
error={
touched.idGroup && (
data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
onBlur={() => setTouched({ ...touched, idGroup: true })}
/>
<TextInput
label="Jabatan"
@@ -172,10 +185,20 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
borderColor: WARNA.biruTua,
},
}}
required
my={15}
size="md"
value={String(data.name)}
onChange={(e) => setData({ ...data, name: e.target.value })}
onChange={(e) => {
setData({ ...data, name: e.target.value })
setTouched({ ...touched, name: false })
}}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
)
}
radius={10}
placeholder="Nama Jabatan"
/>

View File

@@ -14,6 +14,10 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
const router = useRouter()
const [listGroup, setListGorup] = useState<IDataGroup[]>([])
const [touched, setTouched] = useState({
name: false,
idGroup: false
});
const [listData, setListData] = useState({
name: "",
@@ -101,10 +105,13 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
radius={10}
mb={5}
withAsterisk
onChange={(val: any) => setListData({
...listData,
idGroup: val
})}
onChange={(val: any) => {
setListData({
...listData,
idGroup: val
})
setTouched({ ...touched, idGroup: false })
}}
styles={{
input: {
color: WARNA.biruTua,
@@ -112,6 +119,13 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
borderColor: WARNA.biruTua,
},
}}
error={
touched.idGroup && (
listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
)
}
onFocus={() => setTouched({ ...touched, idGroup: true })}
onBlur={() => setTouched({ ...touched, idGroup: true })}
/>
<TextInput
label="Jabatan"
@@ -124,12 +138,23 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
}}
my={15}
size="md"
onChange={(event: any) => setListData({
...listData,
name: event.target.value
})}
onChange={(event: any) => {
setListData({
...listData,
name: event.target.value
})
setTouched({ ...touched, name: false })
}}
radius={10}
placeholder="Nama Jabatan"
error={
touched.name && (
listData.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
)
}
onFocus={() => setTouched({ ...touched, name: true })}
onBlur={() => setTouched({ ...touched, name: true })}
required
/>
<Box mt={'xl'}>
<Button