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

48
src/module/announcement/ui/create_announcement.tsx
View File

@@ -77,6 +77,31 @@ export default function CreateAnnouncement() {
if (isChooseMember) return <CreateUsersAnnouncement onClose={() => { setIsChooseMember(false) }} />
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
setOpen(true)
}
function onValidation(kategori: string, val: string) {
if (kategori == 'title') {
setisData({ ...isData, title: val })
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'desc') {
setisData({ ...isData, desc: val })
if (val === "") {
setTouched({ ...touched, desc: true })
} else {
setTouched({ ...touched, desc: false })
}
}
}
return (
<Box>
<LayoutNavbarNew back="/announcement/" title="Tambah Pengumuman" menu={<></>} />
@@ -93,11 +118,7 @@ export default function CreateAnnouncement() {
},
}}
value={isData.title}
onChange={(e) => {
setisData({ ...isData, title: e.target.value })
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
onChange={(e) => { onValidation('title', e.target.value) }}
error={
touched.title && (
isData.title == "" ? "Judul Tidak Boleh Kosong" : null
@@ -119,11 +140,7 @@ export default function CreateAnnouncement() {
},
}}
value={isData.desc}
onChange={(e) => {
setisData({ ...isData, desc: e.target.value })
setTouched({ ...touched, desc: false })
}}
onBlur={() => setTouched({ ...touched, desc: true })}
onChange={(e) => { onValidation('desc', e.target.value) }}
error={
touched.desc && (
isData.desc == "" ? "Pengumuman Tidak Boleh Kosong" : null
@@ -175,16 +192,7 @@ export default function CreateAnnouncement() {
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
isData.title !== "" &&
isData.desc !== ""
) {
setOpen(true)
} else {
toast.error("Isi data dengan lengkap")
}
}}
onClick={() => { onCheck() }}
>
Simpan
</Button>

70
src/module/announcement/ui/edit_announcement.tsx
View File

@@ -19,6 +19,7 @@ export default function EditAnnouncement() {
const [isChooseDivisi, setChooseDivisi] = useState(false)
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const [loadingSubmit, setLoadingSubmit] = useState(false)
const router = useRouter()
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
@@ -84,6 +85,7 @@ export default function EditAnnouncement() {
async function onSubmit() {
try {
setLoadingSubmit(true)
const response = await funEditAnnouncement(param.id, {
title: body.title,
desc: body.desc,
@@ -92,15 +94,18 @@ export default function EditAnnouncement() {
if (response.success) {
toast.success(response.message)
setLoadingSubmit(false)
router.push(`/announcement/${param.id}`)
} else {
toast.error(response.message)
}
setLoadingSubmit(false)
} catch (error) {
console.error(error)
toast.error("Gagal mengedit pengumuman, coba lagi nanti");
} finally {
setLoadingSubmit(false)
}
setOpen(false)
}
@@ -110,6 +115,31 @@ export default function EditAnnouncement() {
if (isChooseDivisi) return <EditChooseMember onClose={() => { setChooseDivisi(false) }} />
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
setOpen(true)
}
function onValidation(kategori: string, val: string) {
if (kategori == 'title') {
setBody({ ...body, title: val })
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'desc') {
setBody({ ...body, desc: val })
if (val === "") {
setTouched({ ...touched, desc: true })
} else {
setTouched({ ...touched, desc: false })
}
}
}
return (
<>
<LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
@@ -139,11 +169,7 @@ export default function EditAnnouncement() {
},
}}
value={body.title}
onChange={(val) => {
setBody({ ...body, title: val.target.value })
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
onChange={(e) => { onValidation('title', e.target.value) }}
error={
touched.title && (
body.title == "" ? "Judul Tidak Boleh Kosong" : null
@@ -165,27 +191,22 @@ export default function EditAnnouncement() {
},
}}
value={body.desc}
onChange={(val) => {
setBody({ ...body, desc: val.target.value })
setTouched({ ...touched, desc: false })
}}
onBlur={() => setTouched({ ...touched, desc: true })}
onChange={(e) => { onValidation('desc', e.target.value) }}
error={
touched.desc && (
body.desc == "" ? "Pengumuman Tidak Boleh Kosong" : null
)
}
/>
<Box pt={10} w={"100%"}>
<Box pt={10} w={"100%"}>
<Group justify="space-between" style={{
border: `1px solid ${tema.get().utama}`,
maxWidth: rem(550),
border: `1px solid ${tema.get().utama}`,
maxWidth: rem(550),
padding: 10,
borderRadius: 10
}}
onClick={() => { setChooseDivisi(true) }}
}}
onClick={() => { setChooseDivisi(true) }}
>
<Text size="sm">
Tambah divisi penerima pengumuman
@@ -250,22 +271,13 @@ export default function EditAnnouncement() {
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
body.title !== "" &&
body.desc !== ""
) {
setOpen(true)
} else {
toast.error("Isi data dengan lengkap")
}
}}
onClick={() => { onCheck() }}
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
<LayoutModal opened={isOpen} loading={loadingSubmit} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => {
if (val) {

4
src/module/calender/ui/detail_event_division.tsx
View File

@@ -116,7 +116,9 @@ export default function DetailEventDivision() {
xl: 10.5,
}}
>
<Text lineClamp={1} pl={isMobile2 ? 5 : 0}>{isDataCalender?.title}</Text>
<Text style={{
overflowWrap: "break-word"
}} pl={isMobile2 ? 5 : 0}>{isDataCalender?.title}</Text>
</Grid.Col>
</Grid>
<Grid>

20
src/module/calender/ui/navbar_create_division_calender.tsx
View File

@@ -25,6 +25,7 @@ export default function NavbarCreateDivisionCalender() {
const param = useParams<{ id: string, detail: string }>()
const tema = useHookstate(TEMA)
const isMobile = useMediaQuery('(max-width: 369px)');
const isMobile2 = useMediaQuery("(max-width: 438px)");
const [touched, setTouched] = useState({
title: false,
dateStart: false,
@@ -331,18 +332,13 @@ export default function NavbarCreateDivisionCalender() {
<Box key={i}>
<Grid align='center' mt={10}
>
<Grid.Col span={9}>
<Group>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16} >
{v.name}
</Text>
</Box>
</Group>
<Grid.Col span={1}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
</Grid.Col>
<Grid.Col span={8}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16} >
{v.name}
</Text>
</Grid.Col>
<Grid.Col span={3}>
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>

31
src/module/task/ui/edit_detail_task.tsx
View File

@@ -34,6 +34,9 @@ export default function EditDetailTask() {
const [loading, setLoading] = useState(true)
const [idTugas, setIdTugas] = useState("")
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
});
async function onSubmit() {
if (value[0] == null || value[1] == null)
@@ -89,6 +92,23 @@ export default function EditDetailTask() {
getOneData();
}, [param.detail])
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
setOpenModal(true)
}
function onValidation(kategori: string, val: string) {
if (kategori == 'title') {
setTitle(val)
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
}
}
return (
<Box>
@@ -161,7 +181,14 @@ export default function EditDetailTask() {
placeholder="Input Judul Tahapan"
size="md"
value={title}
onChange={(e) => { setTitle(e.target.value) }}
error={
touched.title &&
(title == "" ? "Error! harus memasukkan Judul Tahapan" : ""
)
}
onChange={(e) => {
onValidation('title', e.target.value)
}}
/>
}
</Stack>
@@ -180,7 +207,7 @@ export default function EditDetailTask() {
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
onClick={() => { onCheck() }}
>
Simpan
</Button>

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>