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

Merge pull request #290 from bipproduction/amalia/05-okt-24

Browse Source 
Amalia/05 okt 24
This commit is contained in:
Amalia
2024-10-05 17:46:27 +08:00
committed by GitHub
parent a2b6790294 966264f29e
commit eb609e65a1
11 changed files with 870 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,14 +19,13 @@ export default function CreateAnnouncement() {
const memberGroup = useHookstate(globalMemberAnnouncement)
const memberValue = memberGroup.get() as GroupData[]
const [selectedFiles, setSelectedFiles] = useState<any>([])
const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false)
const router = useRouter()
const tema = useHookstate(TEMA)
const [data, setData] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const [isChooseMember, setIsChooseMember] = useState(false)
const [isData, setisData] = useState({
title: "",
@@ -37,8 +36,10 @@ export default function CreateAnnouncement() {
desc: false
});
async function onSubmit() {
try {
setLoadingKonfirmasi(true)
const response = await funCreateAnnouncement({
title: isData.title,
desc: isData.desc,
@@ -56,9 +57,11 @@ export default function CreateAnnouncement() {
} catch (error) {
console.error(error)
toast.error("Gagal menambahkan pengumuman, coba lagi nanti");
} finally {
setLoadingKonfirmasi(false)
setOpen(false)
}
setOpen(false)
}
async function loadData() {
@@ -69,18 +72,31 @@ export default function CreateAnnouncement() {
loadData()
}, [])
function onToChooseMember() {
setIsChooseMember(true)
}
if (isChooseMember) return <CreateUsersAnnouncement onClose={() => { setIsChooseMember(false) }} />
function onCheck() {
if (Object.values(touched).some((v) => v == true))
const cek = checkAll()
if (!cek)
return false
if (memberValue.length == 0)
return toast.error("Error! silahkan pilih divisi")
setOpen(true)
}
function checkAll() {
let nilai = true
if (isData.title === "") {
setTouched(touched => ({ ...touched, title: true }))
nilai = false
}
if (isData.desc === "") {
setTouched(touched => ({ ...touched, desc: true }))
nilai = false
}
return nilai
}
function onValidation(kategori: string, val: string) {
if (kategori == 'title') {
@@ -100,6 +116,8 @@ export default function CreateAnnouncement() {
}
}
if (isChooseMember) return <CreateUsersAnnouncement onClose={() => { setIsChooseMember(false) }} />
return (
<Box>
<LayoutNavbarNew back="/announcement/" title="Tambah Pengumuman" menu={<></>} />
@@ -151,7 +169,7 @@ export default function CreateAnnouncement() {
padding: 10,
borderRadius: 10
}}
onClick={() => { onToChooseMember() }}
onClick={() => { setIsChooseMember(true) }}
>
<Text size="sm">
Tambah divisi penerima pengumuman
@@ -162,7 +180,7 @@ export default function CreateAnnouncement() {
<Box pt={20} mb={100}>
<Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
{(memberGroup.length === 0) ? (
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada divisi yang dipilih</Text>
) : memberGroup.get().map((v: any, i: any) => {
return (
<Box key={i} mt={10}>
@@ -195,13 +213,14 @@ export default function CreateAnnouncement() {
Simpan
</Button>
</Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
<LayoutModal loading={loadingKonfirmasi} opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin menambahkan data?"
onYes={(val) => {
if (val) {
onSubmit()
} else {
setOpen(false)
}
setOpen(false)
}} />
</Box>

25
src/module/announcement/ui/create_users_announcement.tsx
View File

@@ -1,15 +1,16 @@
"use client";
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { funGetGroupDivision } from '@/module/group/lib/api_group';
import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react';
import { FaCheck } from 'react-icons/fa';
import { GroupData } from '../lib/type_announcement';
import { useHookstate } from '@hookstate/core';
import { globalMemberAnnouncement } from '../lib/val_announcement';
import { FaMinus } from 'react-icons/fa6';
import { ActionIcon, Box, Button, Divider, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaCheck } from 'react-icons/fa';
import { FaMinus } from 'react-icons/fa6';
import { HiChevronLeft } from 'react-icons/hi2';
import { GroupData } from '../lib/type_announcement';
import { globalMemberAnnouncement } from '../lib/val_announcement';
@@ -112,7 +113,13 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
return (
<div>
<LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
<LayoutNavbarNew state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
} title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
<Box p={20} pb={100}>
<Group justify='flex-end' mb={20}>
<Text

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

@@ -1,21 +1,21 @@
'use client'
import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Button, Flex, Group, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiOutlineChevronRight } from "react-icons/hi2";
import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement";
import { useParams, useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core";
import { globalMemberEditAnnouncement } from "../lib/val_announcement";
import { GroupData, GroupDataEditAnnouncement } from "../lib/type_announcement";
import EditChooseMember from "./edit_choose_member";
import { IoIosArrowForward } from "react-icons/io";
import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement";
import { GroupData } from "../lib/type_announcement";
import { globalMemberEditAnnouncement } from "../lib/val_announcement";
import EditChooseMember from "./edit_choose_member";
export default function EditAnnouncement() {
const [isOpen, setOpen] = useState(false)
const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false)
const [isChooseDivisi, setChooseDivisi] = useState(false)
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
@@ -75,6 +75,7 @@ export default function EditAnnouncement() {
toast.error("Gagal mendapatkan pengumuman, coba lagi nanti")
} finally {
setLoading(false)
setOpen(false)
}
}
@@ -94,30 +95,24 @@ 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)
}
setOpen(false)
}
if (isChooseDivisi) return <EditChooseMember onClose={() => { setChooseDivisi(false) }} />
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
if (memberGroup.get().length == 0)
return toast.error("Error! silahkan pilih divisi")
setOpen(true)
}
@@ -140,6 +135,8 @@ export default function EditAnnouncement() {
}
}
if (isChooseDivisi) return <EditChooseMember onClose={() => { setChooseDivisi(false) }} />
return (
<>
<LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
@@ -160,7 +157,7 @@ export default function EditAnnouncement() {
:
<>
<TextInput
size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
size="md" type="text" radius={10} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
styles={{
input: {
color: tema.get().utama,
@@ -231,28 +228,34 @@ export default function EditAnnouncement() {
))
:
memberGroup.get().map((v: any, i: any) => {
return (
<Box key={i} mt={10}>
<Text fw={"bold"}>{v.name}</Text>
<Box pl={20} pr={10}>
<Flex direction={"column"} gap={"md"}>
<List>
{
v.Division.map((division: any) => {
return <List.Item key={division.id}>
<Text lineClamp={1}>{division.name}</Text>
</List.Item>
})
}
</List>
</Flex>
</Box>
</Box>
);
<>
<Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
{
memberGroup.get().length == 0 ? <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada divisi yang dipilih</Text> :
memberGroup.get().map((v: any, i: any) => {
return (
<Box key={i} mt={10}>
<Text fw={"bold"}>{v.name}</Text>
<Box pl={20} pr={10}>
<Flex direction={"column"} gap={"md"}>
<List>
{
v.Division.map((division: any) => {
return <List.Item key={division.id}>
<Text lineClamp={1}>{division.name}</Text>
</List.Item>
})
}
</List>
</Flex>
</Box>
</Box>
);
})
}
</>
}
)
}
</Box>
@@ -282,8 +285,9 @@ export default function EditAnnouncement() {
onYes={(val) => {
if (val) {
onSubmit()
} else {
setOpen(false)
}
setOpen(false)
}} />
</>
)

27
src/module/announcement/ui/edit_choose_member.tsx
View File

@@ -1,17 +1,16 @@
"use client";
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { funGetGroupDivision } from '@/module/group/lib/api_group';
import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react';
import { FaCheck } from 'react-icons/fa';
import { GroupData, GroupDataEditAnnouncement } from '../lib/type_announcement';
import { useHookstate } from '@hookstate/core';
import { globalMemberEditAnnouncement } from '../lib/val_announcement';
import { FaMinus } from 'react-icons/fa6';
import { ActionIcon, Box, Button, Divider, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaCheck } from 'react-icons/fa';
import { FaMinus } from 'react-icons/fa6';
import { HiChevronLeft } from 'react-icons/hi2';
import { GroupData } from '../lib/type_announcement';
import { globalMemberEditAnnouncement } from '../lib/val_announcement';
interface CheckedState {
[key: string]: string[];
@@ -111,7 +110,13 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
return (
<div>
<LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
<LayoutNavbarNew state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
} title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
<Box p={20} pb={100}>
<Group justify='flex-end' mb={20}>
<Text

427
src/module/calender/ui/create_calender_division_caleder.tsx
View File

@@ -1,11 +1,428 @@
import { Box } from '@mantine/core';
import React from 'react';
import NavbarCreateDivisionCalender from './navbar_create_division_calender';
'use client'
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Divider, Grid, Group, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput, TimeInput } from '@mantine/dates';
import { useMediaQuery } from '@mantine/hooks';
import moment from 'moment';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { IoIosArrowDropright } from 'react-icons/io';
import { funCreateCalender } from '../lib/api_calender';
import { IFormMemberCalender } from '../lib/type_calender';
import { globalCalender } from '../lib/val_calender';
import CreateUserCalender from './create_user_calender';
export default function CreateCalenderDivisionCaleder() {
const [value, setValue] = useState<Date | null>(null);
const router = useRouter()
const [isModal, setModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const member = useHookstate(globalCalender)
const memberValue = member.get() as IFormMemberCalender[]
const [openMember, setOpenMember] = useState(false)
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,
timeStart: false,
timeEnd: false,
repeatEventTyper: false,
desc: false,
repeatValue: false
})
const [isData, setData] = useState({
idDivision: "",
title: "",
dateStart: "",
timeStart: "",
timeEnd: "",
linkMeet: "",
repeatEventTyper: "",
desc: "",
repeatValue: "1"
})
async function onSubmit(val: boolean) {
try {
setLoadingModal(true)
const response = await funCreateCalender({
idDivision: param.id,
title: isData.title,
dateStart: isData.dateStart,
timeStart: isData.timeStart,
timeEnd: isData.timeEnd,
linkMeet: isData.linkMeet,
repeatEventTyper: isData.repeatEventTyper,
desc: isData.desc,
repeatValue: isData.repeatValue,
member: memberValue
})
if (response.success) {
setModal(false)
router.push(`/division/${param.id}/calender`)
toast.success(response.message)
member.set([])
} else {
toast.error(response.message)
setModal(false)
}
} catch (error) {
console.error(error)
toast.error("Gagal menambahkan pengumuman, coba lagi nanti");
} finally {
setModal(false)
setLoadingModal(false)
}
}
function onCheck() {
const cek = checkAll()
if (!cek)
return false
if (memberValue.length == 0)
return toast.error("Error! silahkan pilih anggota")
setModal(true)
}
function checkAll() {
let nilai = true
if (isData.title === "") {
setTouched(touched => ({ ...touched, title: true }))
nilai = false
}
if (isData.dateStart === "") {
setTouched(touched => ({ ...touched, dateStart: true }))
nilai = false
}
if (isData.timeStart == "") {
setTouched(touched => ({ ...touched, timeStart: true }))
nilai = false
}
if (isData.timeEnd == "" || isData.timeStart > isData.timeEnd) {
setTouched(touched => ({ ...touched, timeEnd: true }))
nilai = false
}
if (isData.repeatEventTyper == "" || String(isData.repeatEventTyper) == "null") {
setTouched(touched => ({ ...touched, repeatEventTyper: true }))
nilai = false
}
if (isData.repeatValue === "" || Number(isData.repeatValue) <= 0) {
setTouched(touched => ({ ...touched, repeatValue: true }))
nilai = false
}
return nilai
}
function onValidation(kategori: string, val: any) {
if (kategori == 'title') {
setData({ ...isData, title: val })
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'dateStart') {
setValue(val)
setData({ ...isData, dateStart: moment(val).format("YYYY-MM-DD") })
if (val === "") {
setTouched({ ...touched, dateStart: true })
} else {
setTouched({ ...touched, dateStart: false })
}
} else if (kategori == 'timeStart') {
setData({ ...isData, timeStart: val })
if (val == "") {
setTouched({ ...touched, timeStart: true })
} else {
setTouched({ ...touched, timeStart: false })
}
} else if (kategori == 'timeEnd') {
setData({ ...isData, timeEnd: val })
if (val == "" || isData.timeStart > val) {
setTouched({ ...touched, timeEnd: true })
} else {
setTouched({ ...touched, timeEnd: false })
}
} else if (kategori == 'repeatEventTyper') {
setData(isData => ({ ...isData, repeatEventTyper: val }))
if (val == "once") {
setData(isData => ({ ...isData, repeatValue: "1" }))
}
if (val == "" || String(val) == "null") {
setTouched({ ...touched, repeatEventTyper: true })
} else {
setTouched({ ...touched, repeatEventTyper: false })
}
} else if (kategori == 'repeatValue') {
setData(isData => ({ ...isData, repeatValue: val, }))
if (val === "" || Number(val) <= 0) {
setTouched(touched => ({ ...touched, repeatValue: true }))
} else {
setTouched({ ...touched, repeatValue: false })
}
}
}
if (openMember) return <CreateUserCalender onClose={() => setOpenMember(false)} />
return (
<Box>
<NavbarCreateDivisionCalender />
<LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Tambah Acara" menu />
<Box p={20}>
<Stack pb={100}>
<TextInput
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
placeholder="Nama Acara"
label="Nama Acara"
value={isData.title}
onChange={(event) => { onValidation('title', event.target.value) }}
error={
touched.title && (
isData.title == "" ? "Nama Acara Tidak Boleh Kosong" : null
)
}
/>
<DateInput
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
value={value}
onChange={(val) => { onValidation('dateStart', val) }}
placeholder="Input Tanggal"
label="Tanggal"
error={
touched.dateStart && (
isData.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
)
}
/>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
>
<TimeInput
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
label="Waktu Awal"
value={isData.timeStart}
onChange={(event) => onValidation('timeStart', event.target.value)}
error={
touched.timeStart && (
isData.timeStart == "" ? "Waktu Awal Tidak Boleh Kosong" : null
)
}
/>
<TimeInput
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
label="Waktu Akhir"
value={isData.timeEnd}
onChange={(event) => onValidation('timeEnd', event.target.value)}
error={
touched.timeEnd && (
isData.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
) ||
(isData.timeStart > isData.timeEnd ? "Waktu Akhir Tidak Tepat" : null)
}
/>
</SimpleGrid>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
placeholder="Link Meet"
label="Link Meet"
value={isData.linkMeet}
onChange={(event) => setData({ ...isData, linkMeet: event.target.value })}
/>
<Select
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
placeholder="Ulangi Acara"
label="Ulangi Acara"
data={[
{ value: 'once', label: 'Acara 1 Kali' },
{ value: 'daily', label: 'Setiap Hari' },
{ value: 'weekly', label: 'Mingguan' },
{ value: 'monthly', label: 'Bulanan' },
{ value: 'yearly', label: 'Tahunan' },
]}
value={isData.repeatEventTyper}
onChange={(val: any) => { onValidation('repeatEventTyper', val) }}
error={
touched.repeatEventTyper && (
isData.repeatEventTyper == "" || String(isData.repeatEventTyper) == "null" ? "Ulangi Acara Tidak Boleh Kosong" : null
)
}
/>
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
type='number'
required
label="Jumlah pengulangan"
size="md"
placeholder='Jumlah pengulangan'
value={isData.repeatValue}
min={1}
disabled={(isData.repeatEventTyper == "once") ? true : false}
onChange={(event) => { onValidation('repeatValue', event.currentTarget.value) }}
error={
touched.repeatValue && (
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh di bawah 1" : ""
)
}
/>
<Textarea styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
value={isData.desc}
size="md" placeholder='Deskripsi' label="Deskripsi"
onChange={(event) => setData({ ...isData, desc: event.target.value })}
/>
<Box mt={5} onClick={() => setOpenMember(true)}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Tambah Anggota</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
{
member.length > 0 &&
<Box pt={30} mb={60}>
<Group justify="space-between">
<Text c={tema.get().utama}>Anggota Terpilih</Text>
<Text c={tema.get().utama}>Total {member.length} Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{member.length == 0 ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '10vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Anggota</Text>
</Box>
:
member.get().map((v: any, i: any) => {
return (
<Box key={i}>
<Grid align='center' mt={10}
>
<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}>
Anggota
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
);
})}
</Box>
</Box>
</Box>
</Box>
}
</Stack>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
c={"white"}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => { onCheck() }}
>
Simpan
</Button>
</Box>
<LayoutModal loading={loadingModal} opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin menambahkan data?"
onYes={(val) => {
if (val) {
onSubmit(val)
} else {
setModal(false)
}
}} />
</Box>
);
}
}

269
src/module/calender/ui/update_division_calender.tsx
View File

@@ -1,21 +1,22 @@
"use client"
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { Box, Button, Group, rem, Select, SimpleGrid, Skeleton, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput, TimeInput } from '@mantine/dates';
import React, { useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import LayoutModal from '@/module/_global/layout/layout_modal';
import toast from 'react-hot-toast';
import { funEditCalenderById, funGetOneCalender, funGetOneCalenderByIdCalendar, } from '../lib/api_calender';
import { useHookstate } from '@hookstate/core';
import { Box, Button, Group, rem, Select, SimpleGrid, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
import { DateInput, TimeInput } from '@mantine/dates';
import { useShallowEffect } from '@mantine/hooks';
import { IDetailByIdCalender } from '../lib/type_calender';
import moment from 'moment';
import "moment/locale/id";
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { funEditCalenderById, funGetOneCalenderByIdCalendar } from '../lib/api_calender';
import { IDetailByIdCalender } from '../lib/type_calender';
import UpdateListUsers from './update_list_users';
import { useHookstate } from '@hookstate/core';
export default function UpdateDivisionCalender() {
const [isModal, setModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
const [openMember, setOpenMember] = useState(false)
@@ -54,35 +55,89 @@ export default function UpdateDivisionCalender() {
const [value, setValue] = useState<Date | null>(null);
const router = useRouter()
async function onSubmit(val: boolean) {
try {
if (val) {
const response = await funEditCalenderById(param.detail, {
title: isDataCalender?.title,
dateStart: isDataCalender?.dateStart,
timeStart: isDataCalender?.timeStart,
timeEnd: isDataCalender?.timeEnd,
linkMeet: isDataCalender?.linkMeet,
repeatEventTyper: isDataCalender?.repeatEventTyper,
desc: isDataCalender?.desc,
repeatValue: isDataCalender?.repeatValue
})
if (response.success) {
setModal(false)
router.push(`/division/${param.id}/calender`)
toast.success(response.message)
} else {
toast.error(response.message)
}
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
setModal(true)
}
async function onSubmit() {
try {
setLoadingModal(true)
const response = await funEditCalenderById(param.detail, {
title: isDataCalender?.title,
dateStart: isDataCalender?.dateStart,
timeStart: isDataCalender?.timeStart,
timeEnd: isDataCalender?.timeEnd,
linkMeet: isDataCalender?.linkMeet,
repeatEventTyper: isDataCalender?.repeatEventTyper,
desc: isDataCalender?.desc,
repeatValue: isDataCalender?.repeatValue
})
if (response.success) {
router.push(`/division/${param.id}/calender`)
toast.success(response.message)
} else {
toast.error(response.message)
}
setModal(false)
} catch (error) {
console.error(error)
toast.error("Terjadi kesalahan! Silahkan coba kembali");
setModal(false)
} finally {
setModal(false)
setLoadingModal(false)
}
}
function onValidation(kategori: string, val: any) {
if (kategori == 'title') {
setDataCalender({ ...isDataCalender, title: val })
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'dateStart') {
setValue(val)
setDataCalender({ ...isDataCalender, dateStart: moment(val).format("YYYY-MM-DD") })
if (val === "") {
setTouched({ ...touched, dateStart: true })
} else {
setTouched({ ...touched, dateStart: false })
}
} else if (kategori == 'timeStart') {
setDataCalender({ ...isDataCalender, timeStart: val })
if (val == "") {
setTouched({ ...touched, timeStart: true })
} else {
setTouched({ ...touched, timeStart: false })
}
} else if (kategori == 'timeEnd') {
setDataCalender({ ...isDataCalender, timeEnd: val })
if (val == "" || String(isDataCalender?.timeStart) > String(val)) {
setTouched({ ...touched, timeEnd: true })
} else {
setTouched({ ...touched, timeEnd: false })
}
} else if (kategori == 'repeatEventTyper') {
setDataCalender(isDataCalender => ({ ...isDataCalender, repeatEventTyper: val }))
if (val == "once") {
setDataCalender(isDataCalender => ({ ...isDataCalender, repeatValue: "1" }))
}
if (val == "" || String(val) == "null") {
setTouched({ ...touched, repeatEventTyper: true })
} else {
setTouched({ ...touched, repeatEventTyper: false })
}
} else if (kategori == 'repeatValue') {
setDataCalender(isDataCalender => ({ ...isDataCalender, repeatValue: val, }))
if (val === "" || Number(val) <= 0) {
setTouched(touched => ({ ...touched, repeatValue: true }))
} else {
setTouched({ ...touched, repeatValue: false })
}
}
}
@@ -117,16 +172,7 @@ export default function UpdateDivisionCalender() {
placeholder="Acara"
label="Acara"
defaultValue={isDataCalender?.title}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
title: event.target.value
})
setTouched({ ...touched, title: false })
}
}
onBlur={() => setTouched({ ...touched, title: true })}
onChange={(event) => { onValidation('title', event.target.value) }}
required
error={
touched.title && (
@@ -145,20 +191,10 @@ export default function UpdateDivisionCalender() {
value={
(isDataCalender?.dateStart == '' || isDataCalender?.dateStart == null) ? null : new Date(isDataCalender.dateStart)
}
onChange={
(val) => {
setValue(val);
setDataCalender({
...isDataCalender,
dateStart: moment(val).format("YYYY-MM-DD")
})
setTouched({ ...touched, dateStart: false })
}
}
onChange={(val) => { onValidation('dateStart', val) }}
placeholder="Input Tanggal"
label="Tanggal"
minDate={new Date()}
onBlur={() => setTouched({ ...touched, dateStart: true })}
error={
touched.dateStart && (
isDataCalender?.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
@@ -178,17 +214,8 @@ export default function UpdateDivisionCalender() {
}}
size="md"
label="Waktu Awal"
// value={isDataCalender?.timeStart}
defaultValue={isDataCalender?.timeStart}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
timeStart: event.target.value
})
}
}
onBlur={() => setTouched({ ...touched, timeStart: true })}
onChange={(event) => { onValidation('timeStart', event.target.value) }}
error={touched.timeStart && !isDataCalender?.timeStart ? "Waktu Awal Tidak Boleh Kosong" : null}
required
/>
@@ -201,17 +228,8 @@ export default function UpdateDivisionCalender() {
}}
size="md"
label="Waktu Akhir"
// value={isDataCalender?.timeEnd}
defaultValue={isDataCalender?.timeEnd}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
timeEnd: event.target.value
})
}
}
onBlur={() => setTouched({ ...touched, timeEnd: true })}
onChange={(event) => { onValidation('timeEnd', event.target.value) }}
required
error={
touched.timeEnd && (
@@ -232,14 +250,7 @@ export default function UpdateDivisionCalender() {
placeholder="Link Meet"
label="Link Meet"
defaultValue={isDataCalender?.linkMeet}
onChange={
(event) => {
setDataCalender({
...isDataCalender,
linkMeet: event.target.value
})
}
}
onChange={(event) => { setDataCalender({ ...isDataCalender, linkMeet: event.target.value }) }}
/>
<Select
styles={{
@@ -260,76 +271,36 @@ export default function UpdateDivisionCalender() {
]}
value={isDataCalender?.repeatEventTyper}
defaultValue={isDataCalender?.repeatEventTyper}
onChange={
(val: any) => {
setDataCalender({
...isDataCalender,
repeatEventTyper: val
})
setTouched({ ...touched, repeatEventTyper: false })
}
}
onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
onChange={(val: any) => { onValidation('repeatEventTyper', val) }}
error={
touched.repeatEventTyper && (
isDataCalender?.repeatEventTyper == "" ? "Ulangi Acara Tidak Boleh Kosong" : null
isDataCalender?.repeatEventTyper == "" || String(isDataCalender?.repeatEventTyper) == "null" ? "Ulangi Acara Tidak Boleh Kosong" : null
)
}
required
/>
{isDataCalender?.repeatEventTyper == "once" ?
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
type='number'
required
label="Jumlah pengulangan"
size="md"
disabled
placeholder='Jumlah pengulangan'
defaultValue={"1"}
onChange={(event) => {
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
error={
touched.repeatValue && (
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null
// || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
)
}
/>
:
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
type='number'
required
label="Jumlah pengulangan"
size="md"
min={1}
placeholder='Jumlah pengulangan'
defaultValue={isDataCalender?.repeatValue}
onChange={(event) => {
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
}}
onBlur={() => setTouched({ ...touched, repeatValue: true })}
error={
touched.repeatValue && (
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh di bawah 1" : ""
)
}
/>
}
<TextInput styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
type='number'
required
label="Jumlah pengulangan"
size="md"
min={1}
disabled={(isDataCalender?.repeatEventTyper == "once") ? true : false}
placeholder='Jumlah pengulangan'
defaultValue={isDataCalender?.repeatValue}
onChange={(event) => { onValidation('repeatValue', event.currentTarget.value) }}
error={
touched.repeatValue && (
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh di bawah 1" : ""
)
}
/>
<Textarea styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -365,15 +336,21 @@ export default function UpdateDivisionCalender() {
size="lg"
radius={30}
fullWidth
onClick={() => setModal(true)}
onClick={() => onCheck()}
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
<LayoutModal loading={loadingModal} opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah data acara ini? Data ini akan mempengaruhi semua data yang terkait"
onYes={(val) => { onSubmit(val) }} />
onYes={(val) => {
if (val) {
onSubmit()
} else {
setModal(false)
}
}} />
</Box>
);
}

103
src/module/division_new/ui/create_division.tsx
View File

@@ -1,29 +1,15 @@
"use client";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import {
Avatar,
Box,
Button,
Divider,
Flex,
Grid,
Group,
rem,
Select,
Stack,
Text,
Textarea,
TextInput,
} from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { IoIosArrowDropright } from "react-icons/io";
import { globalMemberDivision } from "../lib/val_division";
import toast from "react-hot-toast";
import { funGetUserByCookies } from "@/module/auth";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { useHookstate } from "@hookstate/core";
import { Avatar, Box, Button, Divider, Grid, Group, rem, Select, Stack, Text, Textarea, TextInput } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { IoIosArrowDropright } from "react-icons/io";
import { globalMemberDivision } from "../lib/val_division";
import NavbarAdminDivision from "./navbar_admin_division";
import NavbarCreateUsers from "./navbar_create_users";
@@ -58,23 +44,14 @@ export default function CreateDivision() {
setRoleUser(loadUser.idUserRole)
}
function onSubmit() {
if (roleUser == "supadmin" && (body.idGroup == "" || body.idGroup == null)) {
return toast.error("Error! grup harus diisi")
}
if (body.name == "") {
return toast.error("Error! nama divisi harus diisi")
}
if (member.length == 0) {
function onCheck() {
const cek = checkAll()
if (!cek)
return false
if (member.length == 0)
return toast.error("Error! belum ada anggota yang terdaftar")
}
setChooseAdmin(true)
}
function onToChooseAnggota() {
@@ -86,7 +63,7 @@ export default function CreateDivision() {
function onChooseGroup(val: any) {
member.set([])
setBody({ ...body, idGroup: val })
onValidation('idGroup', val)
}
@@ -95,6 +72,39 @@ export default function CreateDivision() {
loadData();
}, []);
function onValidation(kategori: string, val: any) {
if (kategori == 'name') {
setBody({ ...body, name: val })
if (val === "") {
setTouched({ ...touched, name: true })
} else {
setTouched({ ...touched, name: false })
}
} else if (kategori == 'idGroup') {
setBody({ ...body, idGroup: val, })
if (val === "" || String(val) == "null") {
setTouched(touched => ({ ...touched, idGroup: true }))
} else {
setTouched({ ...touched, idGroup: false })
}
} else if (kategori == 'desc') {
setBody({ ...body, desc: val })
}
}
function checkAll() {
let nilai = true
if (roleUser == "supadmin" && (body.idGroup === "" || String(body.idGroup) == "null")) {
setTouched(touched => ({ ...touched, idGroup: true }))
nilai = false
}
if (body.name === "") {
setTouched(touched => ({ ...touched, name: true }))
nilai = false
}
return nilai
}
if (isChooseAdmin) return <NavbarAdminDivision data={body} onSuccess={(val) => {
@@ -133,10 +143,9 @@ export default function CreateDivision() {
onChange={(val) => {
onChooseGroup(val)
}}
onBlur={() => setTouched({ ...touched, idGroup: true })}
error={
touched.idGroup && (
body.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
body.idGroup == "" || String(body.idGroup) == "null" ? "Grup Tidak Boleh Kosong" : null
)
}
value={body.idGroup}
@@ -150,11 +159,10 @@ export default function CreateDivision() {
required
radius={10}
value={body.name}
onChange={(val) => { setBody({ ...body, name: val.target.value }) }}
onBlur={() => setTouched({ ...touched, name: true })}
onChange={(val) => { onValidation('name', val.target.value) }}
error={
touched.name && (
body.name == "" ? "Nama Tidak Boleh Kosong" : null
body.name == "" ? "Nama Divisi Tidak Boleh Kosong" : null
)
}
/>
@@ -230,16 +238,7 @@ export default function CreateDivision() {
zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
color="white"
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => {
onSubmit()
}}
>
<Button color="white" bg={tema.get().utama} size="lg" radius={30} fullWidth onClick={() => { onCheck() }} >
Simpan
</Button>
</Box>

75
src/module/division_new/ui/edit_division.tsx
View File

@@ -1,25 +1,22 @@
"use client"
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { Box, Button, rem, Select, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
import { useHookstate } from '@hookstate/core';
import { Box, Button, rem, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { funEditDivision, funGetDivisionById } from '../lib/api_division';
import { funGetAllGroup, IDataGroup } from '@/module/group';
import { funGetUserByCookies } from '@/module/auth';
import { useHookstate } from '@hookstate/core';
export default function EditDivision() {
const [openModal, setOpenModal] = useState(false)
const router = useRouter()
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
const [loadingModal, setLoadingModal] = useState(false)
const [loading, setLoading] = useState(false)
const [body, setBody] = useState<any>({
idGroup: "",
name: "",
desc: "",
});
@@ -28,6 +25,36 @@ export default function EditDivision() {
name: false,
});
function onValidation(kategori: string, val: any) {
if (kategori == 'name') {
setBody({ ...body, name: val })
if (val === "") {
setTouched({ ...touched, name: true })
} else {
setTouched({ ...touched, name: false })
}
} else if (kategori == "desc") {
setBody({ ...body, desc: val })
}
}
function onCheck() {
const cek = checkAll()
if (!cek)
return false
setOpenModal(true)
}
function checkAll() {
let nilai = true
if (body.name === "") {
setTouched(touched => ({ ...touched, name: true }))
nilai = false
}
return nilai
}
async function getOneData() {
try {
@@ -56,17 +83,19 @@ export default function EditDivision() {
async function onUpdate() {
try {
setLoadingModal(true)
const res = await funEditDivision(param.id, body)
if (res.success) {
toast.success(res.message)
} else {
toast.error(res.message)
}
setOpenModal(false)
} catch (error) {
console.error(error)
setOpenModal(false)
toast.error("Gagal mengedit divisi, coba lagi nanti");
} finally {
setLoadingModal(false)
setOpenModal(false)
}
}
@@ -88,26 +117,22 @@ export default function EditDivision() {
:
<>
<TextInput
placeholder="Judul"
label="Judul"
placeholder="Nama Divisi"
label="Nama Divisi"
size="md"
required
radius={40}
radius={10}
value={body.name}
onChange={(e) => {
setBody({ ...body, name: e.target.value })
setTouched({ ...touched, name: false })
}}
onBlur={() => setTouched({ ...touched, name: true })}
onChange={(e) => { onValidation('name', e.currentTarget.value) }}
error={
touched.name && (
body.name == "" ? "Judul Tidak Boleh Kosong" : null
body.name == "" ? "Nama Divisi Tidak Boleh Kosong" : null
)
}
/>
<Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10}
value={body.desc}
onChange={(e) => { setBody({ ...body, desc: e.currentTarget.value }) }}
onChange={(e) => { onValidation('desc', e.currentTarget.value) }}
styles={{
input: {
height: "40vh"
@@ -132,21 +157,13 @@ export default function EditDivision() {
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
body.name !== ""
) {
setOpenModal(true)
} else {
toast.error("Judul Tidak Boleh Kosong")
}
}}
onClick={() => { onCheck() }}
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
onYes={(val) => {
if (val) {
onUpdate()

12
src/module/division_new/ui/information_division.tsx
View File

@@ -135,9 +135,9 @@ export default function InformationDivision() {
</Stack>
))
:
(deskripsi != null && deskripsi != undefined) ?
(deskripsi != null && deskripsi != undefined && deskripsi != "") ?
<Text ta={"justify"}>{deskripsi}</Text>
: <></>
: <Text ta={"center"} c={"dimmed"} fs={"italic"}>Tidak ada deskripsi</Text>
}
</Box>
</Box>
@@ -195,12 +195,12 @@ export default function InformationDivision() {
}}
>
<Grid.Col span={1}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'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={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
<Text c={tema.get().utama} fw={"bold"} truncate="end" 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}>

76
src/module/project/ui/create_project.tsx
View File

@@ -24,7 +24,6 @@ import ResultsFile from "./results_file";
export default function CreateProject() {
const router = useRouter();
const [openDrawer, setOpenDrawer] = useState(false)
const [openDrawerFile, setOpenDrawerFile] = useState(false)
const [openDrawerTask, setOpenDrawerTask] = useState(false)
const [isModal, setModal] = useState(false)
@@ -51,13 +50,12 @@ export default function CreateProject() {
const [touched, setTouched] = useState({
title: false,
idGroup: false,
desc: false
});
const [data, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
})
function deleteFile(index: number) {
setListFile([...listFile.filter((val, i) => i !== index)])
@@ -93,7 +91,7 @@ export default function CreateProject() {
function onChooseGroup(val: any) {
member.set([])
setBody({ ...body, idGroup: val })
onValidation('idGroup', val)
}
useShallowEffect(() => {
@@ -138,6 +136,51 @@ export default function CreateProject() {
}
}
function onCheck() {
const cek = checkAll()
if (!cek)
return false
if (dataTask.length == 0)
return toast.error("Error! silahkan tambahkan tugas")
if (memberValue.length == 0)
return toast.error("Error! silahkan pilih anggota")
setModal(true)
}
function checkAll() {
let nilai = true
if (body.idGroup === "" || String(body.idGroup) == "null") {
setTouched(touched => ({ ...touched, idGroup: true }))
nilai = false
}
if (body.title === "") {
setTouched(touched => ({ ...touched, title: true }))
nilai = false
}
return nilai
}
function onValidation(kategori: string, val: string) {
if (kategori == 'idGroup') {
setBody({ ...body, idGroup: val })
if (val === "" || String(val) == "null") {
setTouched({ ...touched, idGroup: true })
} else {
setTouched({ ...touched, idGroup: false })
}
} else if (kategori == 'title') {
setBody({ ...body, title: val })
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
}
}
if (openTugas) return <ViewDateEndTask onClose={(val) => { setOpenTugas(false) }} onSet={(val) => { setDataTask([...dataTask, val]); setOpenTugas(false) }} />;
@@ -169,14 +212,12 @@ export default function CreateProject() {
}))}
onChange={(val) => {
onChooseGroup(val)
setTouched({ ...touched, idGroup: false })
}}
value={(body.idGroup == "") ? null : body.idGroup}
onBlur={() => setTouched({ ...touched, idGroup: true })}
error={
touched.idGroup && (
body.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
body.idGroup == "" || String(body.idGroup) == "null" ? "Grup Tidak Boleh Kosong" : null
)
}
/>
@@ -195,11 +236,7 @@ export default function CreateProject() {
placeholder="Nama Kegiatan"
size="md"
value={body.title}
onChange={(e) => {
setBody({ ...body, title: e.target.value })
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
onChange={(e) => { onValidation('title', e.target.value) }}
error={
touched.title && (
body.title == "" ? "Kegiatan Tidak Boleh Kosong" : null
@@ -361,16 +398,7 @@ export default function CreateProject() {
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
body.title !== "" &&
body.idGroup !== ""
) {
setModal(true)
} else {
toast.error("Mohon lengkapi data terlebih dahulu");
}
}}>
onClick={() => { onCheck() }}>
Simpan
</Button>
</Box>
@@ -504,10 +532,10 @@ export default function CreateProject() {
onYes={(val) => {
if (val) {
onSubmit()
}else{
} else {
setModal(false)
}
}} />
</Box >
);

114
src/module/project/ui/edit_task_project.tsx
View File

@@ -1,13 +1,13 @@
"use client"
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funEditProject, funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { Box, Button, Input, rem, Skeleton, Stack, TextInput } from '@mantine/core';
import { LayoutNavbarNew, TEMA} from '@/module/_global';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Button, rem, Skeleton, Stack, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { funEditProject, funGetOneProjectById } from '../lib/api_project';
export default function EditTaskProject() {
const router = useRouter()
@@ -20,13 +20,6 @@ export default function EditTaskProject() {
name: false,
});
function onVerification() {
if (name == "")
return toast.error("Error! harus memasukkan judul Kegiatan")
setOpenModal(true)
}
async function onSubmit() {
try {
const res = await funEditProject(param.id, { name })
@@ -42,6 +35,27 @@ export default function EditTaskProject() {
}
}
function onCheck() {
if (name == "") {
setTouched({ ...touched, name: true })
return false
}
setOpenModal(true)
}
function onValidation(kategori: string, val: string) {
if (kategori == 'title') {
setName(val)
if (val === "") {
setTouched({ ...touched, name: true })
} else {
setTouched({ ...touched, name: false })
}
}
}
async function getOneData() {
try {
setLoading(true)
@@ -69,32 +83,28 @@ export default function EditTaskProject() {
<LayoutNavbarNew back="" title={"Edit Judul Kegiatan"} menu />
<Box p={20}>
<Stack pt={15}>
{loading ?
<Skeleton height={40} mt={20} radius={10} />
{loading ?
<Skeleton height={40} mt={20} radius={10} />
:
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Input Kegiatan"
label="Judul Kegiatan"
required
size="md"
value={name}
onChange={(e) => {
setName(e.target.value)
setTouched({ ...touched, name: false })
}}
error={
touched.name && (
name == "" ? "Judul Kegiatan Tidak Boleh Kosong" : null
)
}
onBlur={() => setTouched({ ...touched, name: true })}
/>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Nama Kegiatan"
label="Kegiatan"
required
size="md"
value={name}
onChange={(e) => { onValidation('title', e.target.value) }}
error={
touched.name && (
name == "" ? "Kegiatan Tidak Boleh Kosong" : null
)
}
/>
}
</Stack>
</Box>
@@ -104,19 +114,19 @@ export default function EditTaskProject() {
backgroundColor: `${tema.get().bgUtama}`,
}}>
{loading ?
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
}
<Skeleton height={50} radius={30} />
:
<Button
c={"white"}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => { onCheck() }}
>
Simpan
</Button>
}
</Box>