Merge pull request #272 from bipproduction/lukman/30-september-2024

Lukman/30 september 2024
This commit is contained in:
Amalia
2024-09-30 11:30:35 +08:00
committed by GitHub
11 changed files with 112 additions and 88 deletions

View File

@@ -8,7 +8,7 @@ export default function LayoutDrawer({ opened, onClose, title, children, size }:
const tema = useHookstate(TEMA)
return (
<Box>
<Drawer opened={opened} title={<Text c={tema.get().utama} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '40%'}
<Drawer opened={opened} title={<Text c={tema.get().utama} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '40%' }
styles={{
content: {
backgroundColor: "white",

View File

@@ -320,7 +320,7 @@ export default function DetailEventDivision() {
<Box
key={i}
>
<SkeletonList/>
<SkeletonList />
</Box>
))}
</Box>
@@ -365,7 +365,7 @@ export default function DetailEventDivision() {
lg: 1,
xl: 1,
}}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
</Grid.Col>
<Grid.Col span={{
base: 11,
@@ -375,14 +375,11 @@ export default function DetailEventDivision() {
lg: 11,
xl: 11,
}}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1} pl={isMobile ? 35 : 40}>{v.name}</Text>
<Text c={"#5A687D"} fz={14} lineClamp={1} pl={isMobile ? 35 : 40}>
{v.email}
</Text>
</Flex>
</Flex>
<Text lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
<Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
style={{
overflowWrap: "break-word"
}}>{v.email}</Text>
</Grid.Col>
</Grid>
<Box mt={10}>

View File

@@ -31,6 +31,7 @@ export default function InformationDivision() {
const roleLogin = useHookstate(globalRole)
const [isAdmin, setAdmin] = useState(false)
const isMobile = useMediaQuery('(max-width: 455px)');
const isMobile2 = useMediaQuery("(max-width: 438px)");
const tema = useHookstate(TEMA)
async function getOneData() {
@@ -164,8 +165,8 @@ export default function InformationDivision() {
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
<Avatar size={isMobile ? 'md' : 'lg'}>
<AiOutlineUserAdd size={isMobile ? 25 : 30} color={tema.get().utama} />
<Avatar size={'lg'}>
<AiOutlineUserAdd size={30} color={tema.get().utama} />
</Avatar>
<Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
</Group>
@@ -194,10 +195,10 @@ export default function InformationDivision() {
}}
>
<Grid.Col span={1}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<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"} truncate="end" pl={isMobile ? 25 : 30} fz={isMobile ? 14 : 16}>
<Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Grid.Col>

View File

@@ -66,7 +66,7 @@ export default function ListTaskOnDetailDivision() {
: <></>
}
</Group>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{data.map((v, i) =>
<Carousel.Slide key={v.id}>
<Box p={20} w={{

View File

@@ -59,9 +59,9 @@ export default function ListDivisi() {
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada divisi</Text>
</Box>
:
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{isData.map((v) =>
<Carousel.Slide key={v.id}>
<Carousel.Slide key={v.id} pb={20}>
<Box w={{
base: isMobile ? 230 : 300,
md: 400

View File

@@ -59,9 +59,9 @@ export default function ListProjects() {
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada kegiatan terbaru</Text>
</Box>
:
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{isData.map((v) =>
<Carousel.Slide key={v.id}>
<Carousel.Slide key={v.id} pb={20}>
<Box w={{
base: isMobile ? 230 : 300,
md: 400

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>

View File

@@ -1,6 +1,6 @@
'use client'
import { globalRole, LayoutDrawer, SkeletonSingle, TEMA } from '@/module/_global';
import { Avatar, Box, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { globalRole, LayoutDrawer, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
import toast from 'react-hot-toast';
@@ -24,6 +24,7 @@ export default function ListAnggotaDetailProject() {
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function getOneDataCancel() {
try {
@@ -83,7 +84,7 @@ export default function ListAnggotaDetailProject() {
toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
}
}
const isMobile = useMediaQuery('(max-width: 369px)');
const isMobile = useMediaQuery('(max-width: 369px)');
return (
<Box pt={20}>
@@ -107,7 +108,7 @@ const isMobile = useMediaQuery('(max-width: 369px)');
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
<SkeletonList />
</Box>
))
:
@@ -123,19 +124,15 @@ const isMobile = useMediaQuery('(max-width: 369px)');
: setOpenDrawer(false)
}}
>
<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
}}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
<Text c={"#5A687D"} fz={isMobile ? 10 : 14} lineClamp={1}>{v.email}</Text>
</Flex>
</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 lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
<Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
style={{
overflowWrap: "break-word"
}}>{v.email}</Text>
</Grid.Col>
<Grid.Col span={3}>
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
@@ -143,6 +140,9 @@ const isMobile = useMediaQuery('(max-width: 369px)');
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider my={10} />
</Box>
</Box>
);
})}

View File

@@ -1,6 +1,6 @@
'use client'
import { globalRole, LayoutDrawer, SkeletonSingle, TEMA } from "@/module/_global";
import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid } from "@mantine/core";
import { globalRole, LayoutDrawer, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid, Divider } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
@@ -25,6 +25,7 @@ export default function ListAnggotaDetailTask() {
const roleLogin = useHookstate(globalRole)
const adminLogin = useHookstate(globalIsAdminDivision)
const isMobile = useMediaQuery('(max-width: 369px)');
const isMobile2 = useMediaQuery("(max-width: 438px)");
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
@@ -109,7 +110,7 @@ export default function ListAnggotaDetailTask() {
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
<SkeletonList />
</Box>
))
:
@@ -121,23 +122,19 @@ export default function ListAnggotaDetailTask() {
onClick={() => {
setDataChoose({ id: v.idUser, name: v.name })
reason == null ?
setOpenDrawer(true)
: setOpenDrawer(false)
setOpenDrawer(true)
: setOpenDrawer(false)
}}
>
<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
}}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
<Text c={"#5A687D"} lineClamp={1} fz={isMobile ? 10 : 14}>{v.email}</Text>
</Flex>
</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 lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
<Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
style={{
overflowWrap: "break-word"
}}>{v.email}</Text>
</Grid.Col>
<Grid.Col span={3}>
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
@@ -145,6 +142,9 @@ export default function ListAnggotaDetailTask() {
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider my={10} />
</Box>
</Box>
);
})}