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

Merge pull request #316 from bipproduction/join

Browse Source 
Join
This commit is contained in:
Amalia
2024-10-28 17:10:39 +08:00
committed by GitHub
parent 7354c405d8 46553762f5
commit a88ff3ea11
22 changed files with 560 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/api/project/[id]/route.ts
View File

@@ -49,8 +49,8 @@ export async function GET(request: Request, context: { params: { id: string } })
const progress = Math.ceil((selesai / semua) * 100)
allData = {
progress: progress,
lastUpdate: moment(dataProgress[0].updatedAt).format("DD MMMM YYYY"),
progress: (_.isNaN(progress)) ? 0 : progress,
lastUpdate: moment(dataProgress[0]?.updatedAt).format("DD MMMM YYYY"),
}
} else if (kategori == "task") {
const dataProgress = await prisma.projectTask.findMany({

2
src/app/api/version-app/route.ts
View File

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
export async function GET(request: Request) {
try {
return NextResponse.json({ success: true, version: "0.1.6", mode: "staging" }, { status: 200 });
return NextResponse.json({ success: true, version: "0.1.7", mode: "staging" }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, version: "Gagal mendapatkan version, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });

27
src/module/_global/view/view_filter.tsx
View File

@@ -1,15 +1,15 @@
'use client'
import { Box, Group, Divider, Button, Text, Skeleton, rem } from "@mantine/core";
import { useState } from "react";
import { FaCheck } from "react-icons/fa6";
import { WARNA } from "../fun/WARNA";
import LayoutNavbarNew from "../layout/layout_navbar_new";
import { useRouter, useSearchParams } from "next/navigation";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { useShallowEffect } from "@mantine/hooks";
import toast from "react-hot-toast";
import { useHookstate } from "@hookstate/core";
import { Box, Button, Divider, Group, rem, Skeleton, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { FaCheck } from "react-icons/fa6";
import { TEMA } from "../bin/val_global";
import LayoutNavbarNew from "../layout/layout_navbar_new";
import { funGetUserByCookies } from "@/module/auth";
export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
const [selectedFilter, setSelectedFilter] = useState<any>('');
@@ -38,8 +38,17 @@ export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
}
}
async function dataUser() {
const user = await funGetUserByCookies()
setSelectedFilter(user.idGroup)
}
useShallowEffect(() => {
setSelectedFilter(group)
if (group == "null" || group == "undefined" || group == '') {
dataUser()
} else {
setSelectedFilter(group)
}
}, [group]);

15
src/module/home/ui/list_project.tsx
View File

@@ -1,17 +1,15 @@
'use client'
import { TEMA, WARNA } from "@/module/_global";
import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text, Progress, Stack, Skeleton, ActionIcon } from "@mantine/core";
import { Box, Card, Flex, Progress, Skeleton, Stack, Text, Title } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { funGetHome } from "../lib/api_home";
import { IDataHomeKegiatan } from "../lib/type_home";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
import { MdMoreVert } from "react-icons/md";
import { IoIosArrowDropright } from "react-icons/io";
export default function ListProjects() {
const router = useRouter()
@@ -24,7 +22,6 @@ export default function ListProjects() {
setData([]);
setLoading(true);
const response = await funGetHome('?cat=kegiatan')
if (response.success) {
setData(response.data)
} else {
@@ -78,8 +75,8 @@ export default function ListProjects() {
</Card.Section>
<Stack h={isMobile ? 100 : 150} align="stretch" justify="center">
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={v.progress} color="yellow" striped >
<Progress.Label>{v.progress}%</Progress.Label>
<Progress.Section value={_.isNull(v.progress) ? 0 : v.progress} color="yellow" striped >
<Progress.Label>{_.isNull(v.progress) ? 0 : v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text c={tema.get().utama} fz={isMobile ? 14 : 16}>{v.createdAt}</Text>

14
src/module/home/ui/view_home.tsx
View File

@@ -1,16 +1,14 @@
"use client"
import { ReloadButtonTop } from '@/module/_global';
import { Box, Stack } from '@mantine/core';
import React from 'react';
import Carosole from './carosole';
import Features from './features';
import ListProjects from './list_project';
import ListDivisi from './list_divisi';
import ListDiscussion from './list_discussion';
import ListEventHome from './list_event';
import ChartProgressHome from './chart_progress_tugas';
import ChartDocumentHome from './chart_document';
import ChartProgressHome from './chart_progress_tugas';
import Features from './features';
import HeaderHome from './header_home';
import ListDiscussion from './list_discussion';
import ListDivisi from './list_divisi';
import ListEventHome from './list_event';
import ListProjects from './list_project';
export default function ViewHome() {

2
src/module/position/ui/drawer_detail_position.tsx
View File

@@ -207,7 +207,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
onChange={(e) => { onValidation('name', e.target.value) }}
error={
touched.name &&
(data.name == "" ? "Error! harus memasukkan Nama Jabatan" :
(data.name == "" ? "Nama Jabatan Tidak Boleh Kosong" :
data.name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
)
}

2
src/module/position/ui/drawer_list_position.tsx
View File

@@ -202,7 +202,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
placeholder="Nama Jabatan"
error={
touched.name &&
(listData.name == "" ? "Error! harus memasukkan Nama Jabatan" :
(listData.name == "" ? "Nama Jabatan Tidak Boleh Kosong" :
listData.name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
)
}

96
src/module/project/ui/add_detail_task_project.tsx
View File

@@ -2,7 +2,7 @@
import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Button, Group, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { DatePicker } from '@mantine/dates';
import moment from 'moment';
import { useParams, useRouter } from 'next/navigation';
@@ -10,6 +10,7 @@ import { useState } from 'react';
import toast from 'react-hot-toast';
import { useWibuRealtime } from 'wibu-realtime';
import { funCreateDetailProject } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
export default function AddDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -19,24 +20,16 @@ export default function AddDetailTaskProject() {
const [loadingModal, setLoadingModal] = useState(false)
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
const [acuan, setAcuan] = useState(false)
const [touched, setTouched] = useState({
name: false,
title: false,
date: false
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function onVerification() {
if (value[0] == null || value[1] == null)
return toast.error("Error! harus memilih tanggal")
if (name == "")
return toast.error("Error! harus memasukkan judul tugas")
setOpenModal(true)
}
async function onSubmit() {
try {
setLoadingModal(true)
@@ -65,9 +58,59 @@ export default function AddDetailTaskProject() {
}
}
function onCheck() {
const cek = checkAll()
if (!cek)
return false
setOpenModal(true)
}
function checkAll() {
let nilai = true
if (name == "") {
setTouched(touched => ({ ...touched, title: true }))
nilai = false
}
if (value[0] == null || value[1] == null) {
setTouched(touched => ({ ...touched, date: true }))
nilai = false
}
return nilai
}
function onValidation(kategori: string, val: string) {
if (kategori == 'title') {
setName(val)
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'date') {
const array = val.split(",")
if (array[0] == '' || array[1] == '') {
setTouched({ ...touched, date: true })
} else {
setTouched({ ...touched, date: false })
}
}
}
useShallowEffect(() => {
if (acuan) {
onValidation('date', String(value))
} else {
setAcuan(true)
}
}, [value])
return (
<Box>
<LayoutNavbarNew back="" title={"Tambah Kegiatan"} menu />
<LayoutNavbarNew back="" title={"Tambah Tugas"} menu />
<Box p={20}>
<Group
justify="center"
@@ -86,7 +129,9 @@ export default function AddDetailTaskProject() {
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Mulai</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -97,7 +142,9 @@ export default function AddDetailTaskProject() {
</Group>
</Box>
<Box>
<Text>Tanggal Berakhir</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Berakhir</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -108,6 +155,11 @@ export default function AddDetailTaskProject() {
</Group>
</Box>
</SimpleGrid>
{
(touched && touched.date)
? <Text size="sm" c={"red"}>Tanggal Tidak Boleh Kosong</Text>
: <></>
}
<Stack pt={15} pb={100}>
<TextInput
styles={{
@@ -116,19 +168,17 @@ export default function AddDetailTaskProject() {
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
label="Judul Tahapan"
placeholder="Input Judul Tugas"
label="Judul Tugas"
required
size="md"
value={name}
onChange={(e) => {
setName(e.target.value)
setTouched({ ...touched, name: false })
onValidation('title', e.target.value)
}}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
name == "" ? "Judul Tidak Boleh Kosong" : null
touched.title && (
name == "" ? "Judul Tugas Tidak Boleh Kosong" : null
)
}
/>
@@ -145,7 +195,7 @@ export default function AddDetailTaskProject() {
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
onClick={() => { onCheck() }}
>
Simpan
</Button>

153
src/module/project/ui/create_date_end_task.tsx
View File

@@ -1,36 +1,24 @@
"use client";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
ActionIcon,
Avatar,
Box,
Button,
Flex,
Group,
Input,
rem,
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { DatePicker } from "@mantine/dates";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import moment from "moment";
import { IFormDateProject } from "../lib/type_project";
import { HiChevronLeft } from "react-icons/hi2";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { DatePicker } from "@mantine/dates";
import moment from "moment";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiChevronLeft } from "react-icons/hi2";
import { IFormDateProject } from "../lib/type_project";
import { useShallowEffect } from "@mantine/hooks";
export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: boolean) => void, onSet: (val: IFormDateProject) => void }) {
export default function ViewDateEndTask({ onClose, onSet }: { onClose: (val: boolean) => void, onSet: (val: IFormDateProject) => void }) {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const [title, setTitle] = useState("")
const tema = useHookstate(TEMA)
const [acuan, setAcuan] = useState(false)
const [touched, setTouched] = useState({
title: false
title: false,
date: false
});
function onSubmit() {
@@ -40,16 +28,64 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
if (title == "")
return toast.error("Error! harus memasukkan judul tugas")
onSet(
{
dateStart: value[0],
dateEnd: value[1],
title: title
}
)
onSet({
dateStart: value[0],
dateEnd: value[1],
title: title
})
}
function onCheck() {
const cek = checkAll()
if (!cek)
return false
onSubmit()
}
function checkAll() {
let nilai = true
if (title == "") {
setTouched(touched => ({ ...touched, title: true }))
nilai = false
}
if (value[0] == null || value[1] == null) {
setTouched(touched => ({ ...touched, date: true }))
nilai = false
}
return nilai
}
function onValidation(kategori: string, val: string) {
if (kategori == 'title') {
setTitle(val)
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'date') {
const array = val.split(",")
if (array[0] == '' || array[1] == '') {
setTouched({ ...touched, date: true })
} else {
setTouched({ ...touched, date: false })
}
}
}
useShallowEffect(() => {
if (acuan) {
onValidation('date', String(value))
} else {
setAcuan(true)
}
}, [value])
return (
<Box>
<LayoutNavbarNew state={
@@ -77,7 +113,9 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Mulai</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -88,7 +126,9 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
</Group>
</Box>
<Box>
<Text>Tanggal Berakhir</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Berakhir</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -99,6 +139,11 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
</Group>
</Box>
</SimpleGrid>
{
(touched && touched.date)
? <Text size="sm" c={"red"}>Tanggal Tidak Boleh Kosong</Text>
: <></>
}
<Stack pt={15} pb={100}>
<TextInput
styles={{
@@ -107,40 +152,38 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
borderRadius: 10,
},
}}
placeholder="Input Judul Tahapan"
label="Judul Tahapan"
placeholder="Input Judul Tugas"
label="Judul Tugas"
required
size="md"
value={title}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
onValidation('title', e.target.value)
}}
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
title == "" ? "Judul Tahapan Tidak Boleh Kosong" : null
title == "" ? "Judul Tugas Tidak Boleh Kosong" : null
)
}
/>
</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={() => { onSubmit() }}
>
Simpan
</Button>
</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>
</Box>
);
}

89
src/module/project/ui/edit_detail_task_project.tsx
View File

@@ -1,15 +1,15 @@
"use client"
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
import moment from 'moment';
import { useShallowEffect } from '@mantine/hooks';
import { Box, Button, Group, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { DatePicker } from '@mantine/dates';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Button, Flex, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { DatePicker } from '@mantine/dates';
import { useShallowEffect } from '@mantine/hooks';
import moment from 'moment';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
export default function EditDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -18,9 +18,11 @@ export default function EditDetailTaskProject() {
const param = useParams<{ id: string }>()
const [openModal, setOpenModal] = useState(false)
const [loading, setLoading] = useState(true)
const [loadingModal, setLoadingModal] = useState(false)
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
date: false,
});
const router = useRouter()
@@ -32,6 +34,7 @@ export default function EditDetailTaskProject() {
return toast.error("Error! harus memasukkan judul tugas")
try {
setLoadingModal(true)
const res = await funEditDetailProject(param.id, {
title: name,
dateStart: value[0],
@@ -48,6 +51,9 @@ export default function EditDetailTaskProject() {
} catch (error) {
console.error(error);
toast.error("Gagal edit detail tugas Kegiatan, coba lagi nanti");
} finally {
setLoadingModal(false)
setOpenModal(false)
}
}
@@ -78,6 +84,36 @@ export default function EditDetailTaskProject() {
getOneData();
}, [param.id])
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
setOpenModal(true)
}
function onValidation(kategori: string, val: string) {
if (kategori == 'title') {
setName(val)
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'date') {
const array = val.split(",")
if (array[0] == '' || array[1] == '') {
setTouched({ ...touched, date: true })
} else {
setTouched({ ...touched, date: false })
}
}
}
useShallowEffect(() => {
onValidation('date', String(value))
}, [value])
return (
<Box>
<LayoutNavbarNew back="" title={"Edit Tanggal dan tugas"} menu />
@@ -103,7 +139,9 @@ export default function EditDetailTaskProject() {
<Skeleton height={45} mt={20} radius={10} />
:
<>
<Text>Tanggal Mulai</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Mulai</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -120,7 +158,9 @@ export default function EditDetailTaskProject() {
<Skeleton height={45} mt={20} radius={10} />
:
<>
<Text>Tanggal Berakhir</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Berakhir</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -133,6 +173,11 @@ export default function EditDetailTaskProject() {
}
</Box>
</SimpleGrid>
{
(!loading && touched && touched.date)
? <Text size="sm" c={"red"}>Tanggal Tidak Boleh Kosong</Text>
: <></>
}
<Stack pt={15} pb={100}>
{loading ?
<Skeleton height={40} mt={20} radius={10} />
@@ -144,16 +189,15 @@ export default function EditDetailTaskProject() {
borderRadius: 10,
},
}}
placeholder="Input Judul Tahapan"
label="Judul Tahapan"
placeholder="Input Judul Tugas"
label="Judul Tugas"
required
size="md"
value={name}
onChange={(e) => { setName(e.target.value) }}
onBlur={() => setTouched({ ...touched, title: true })}
onChange={(e) => { onValidation('title', e.target.value) }}
error={
touched.title && (
name == "" ? "Judul Tahapan Tidak Boleh Kosong" : null
name == "" ? "Judul Tugas Tidak Boleh Kosong" : null
)
}
/>
@@ -174,28 +218,21 @@ export default function EditDetailTaskProject() {
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
name !== ""
) {
setOpenModal(true)
} else {
toast.error("Judul Tidak Boleh Kosong")
}
}}
onClick={() => { onCheck() }}
>
Simpan
</Button>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => {
if (val) {
onSubmit()
} else {
setOpenModal(false)
}
setOpenModal(false)
}} />
</Box>
);

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

@@ -7,8 +7,8 @@ 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';
import { useWibuRealtime } from 'wibu-realtime';
import { funEditProject, funGetOneProjectById } from '../lib/api_project';
export default function EditTaskProject() {
const router = useRouter()

101
src/module/task/ui/add_detail_task.tsx
View File

@@ -2,43 +2,61 @@
import { keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Button, Group, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { DatePicker } from "@mantine/dates";
import moment from "moment";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { funCreateDetailTask } from "../lib/api_task";
import { useWibuRealtime } from "wibu-realtime";
import { funCreateDetailTask } from "../lib/api_task";
import { useShallowEffect } from "@mantine/hooks";
export default function AddDetailTask() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const [title, setTitle] = useState("")
const [openModal, setOpenModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const tema = useHookstate(TEMA)
const [acuan, setAcuan] = useState(false)
const [touched, setTouched] = useState({
title: false,
date: false
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function onVerification() {
if (value[0] == null || value[1] == null)
return toast.error("Error! harus memilih tanggal")
if (title == "")
return toast.error("Error! harus memasukkan judul tugas")
function onCheck() {
const cek = checkAll()
if (!cek)
return false
setOpenModal(true)
}
function checkAll() {
let nilai = true
if (title == "") {
setTouched(touched => ({ ...touched, title: true }))
nilai = false
}
if (value[0] == null || value[1] == null) {
setTouched(touched => ({ ...touched, date: true }))
nilai = false
}
return nilai
}
async function onSubmit() {
try {
setLoadingModal(true)
const res = await funCreateDetailTask(param.detail, {
title,
dateStart: (value[0] != null) ? value[0] : new Date,
@@ -52,7 +70,6 @@ export default function AddDetailTask() {
id: param.detail,
}])
toast.success(res.message)
setOpenModal(false)
router.push(`/division/${param.id}/task/${param.detail}`)
} else {
toast.error(res.message)
@@ -60,10 +77,39 @@ export default function AddDetailTask() {
} catch (error) {
console.error(error)
toast.error("Gagal menambahkan tugas, coba lagi nanti")
} finally {
setLoadingModal(false)
setOpenModal(false)
}
}
function onValidation(kategori: string, val: string) {
if (kategori == 'title') {
setTitle(val)
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'date') {
const array = val.split(",")
if (array[0] == '' || array[1] == '') {
setTouched({ ...touched, date: true })
} else {
setTouched({ ...touched, date: false })
}
}
}
useShallowEffect(() => {
if (acuan) {
onValidation('date', String(value))
} else {
setAcuan(true)
}
}, [value])
return (
<Box>
@@ -86,7 +132,9 @@ export default function AddDetailTask() {
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Mulai</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -97,7 +145,9 @@ export default function AddDetailTask() {
</Group>
</Box>
<Box>
<Text >Tanggal Berakhir</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Berakhir</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -108,6 +158,11 @@ export default function AddDetailTask() {
</Group>
</Box>
</SimpleGrid>
{
(touched && touched.date)
? <Text size="sm" c={"red"}>Tanggal Tidak Boleh Kosong</Text>
: <></>
}
<Stack pt={15} pb={100}>
<TextInput
styles={{
@@ -116,20 +171,15 @@ export default function AddDetailTask() {
borderRadius: 10,
},
}}
label="Judul Tahapan"
placeholder="Input Judul Tahapan"
placeholder="Input Judul Tugas"
label="Judul Tugas"
size="md"
required
value={title}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}
}
onBlur={() => setTouched({ ...touched, title: true })}
onChange={(e) => { onValidation('title', e.target.value) }}
error={
touched.title && (
title == "" ? "Judul Tahapan Tidak Boleh Kosong" : null
title == "" ? "Judul Tugas Tidak Boleh Kosong" : null
)
}
/>
@@ -146,19 +196,20 @@ export default function AddDetailTask() {
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
onClick={() => { onCheck() }}
>
Simpan
</Button>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan tugas?"
onYes={(val) => {
if (val) {
onSubmit()
} else {
setOpenModal(false)
}
setOpenModal(false)
}} />
</Box>
);

12
src/module/task/ui/add_file_detail_task.tsx
View File

@@ -10,15 +10,16 @@ import { useRef, useState } from "react";
import toast from "react-hot-toast";
import { FaTrash } from "react-icons/fa6";
import { IoIosArrowDropright } from "react-icons/io";
import { useWibuRealtime } from "wibu-realtime";
import { funAddFileTask, funCekNamFileUploadTask } from "../lib/api_task";
import { IListFileTask } from "../lib/type_task";
import ResultsFile from "./results_file";
import { useWibuRealtime } from "wibu-realtime";
export default function AddFileDetailTask() {
const router = useRouter()
const [openModal, setOpenModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const [fileForm, setFileForm] = useState<any[]>([])
const [listFile, setListFile] = useState<IListFileTask[]>([])
const param = useParams<{ id: string, detail: string }>()
@@ -57,6 +58,7 @@ export default function AddFileDetailTask() {
async function onSubmit() {
try {
setLoadingModal(true)
const fd = new FormData();
for (let i = 0; i < fileForm.length; i++) {
fd.append(`file${i}`, fileForm[i]);
@@ -78,6 +80,9 @@ export default function AddFileDetailTask() {
} catch (error) {
console.error(error)
toast.error("Gagal menambahkan tugas divisi, coba lagi nanti");
} finally {
setLoadingModal(false)
setOpenModal(false)
}
}
@@ -182,13 +187,14 @@ export default function AddFileDetailTask() {
</Stack>
</LayoutDrawer>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan file?"
onYes={(val) => {
if (val) {
onSubmit()
} else {
setOpenModal(false)
}
setOpenModal(false)
}} />
</Box>

12
src/module/task/ui/add_member_detail_task.tsx
View File

@@ -12,9 +12,9 @@ import toast from "react-hot-toast";
import { FaCheck } from "react-icons/fa6";
import { HiMagnifyingGlass } from "react-icons/hi2";
import { IoArrowBackOutline, IoClose } from "react-icons/io5";
import { useWibuRealtime } from "wibu-realtime";
import { funAddMemberTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataMemberTaskDivision } from "../lib/type_task";
import { useWibuRealtime } from "wibu-realtime";
export default function AddMemberDetailTask() {
const router = useRouter()
@@ -25,6 +25,7 @@ export default function AddMemberDetailTask() {
const [selectAll, setSelectAll] = useState(false)
const [openModal, setOpenModal] = useState(false)
const [loading, setLoading] = useState(true)
const [loadingModal, setLoadingModal] = useState(false)
const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
@@ -106,6 +107,7 @@ export default function AddMemberDetailTask() {
async function onSubmit() {
try {
setLoadingModal(true)
const res = await funAddMemberTask(param.detail, { idDivision: param.id, member: selectedFiles });
if (res.success) {
setDataRealtime([{
@@ -120,6 +122,9 @@ export default function AddMemberDetailTask() {
} catch (error) {
console.error(error)
toast.error("Gagal menambahkan anggota, coba lagi nanti");
} finally {
setLoadingModal(false)
setOpenModal(false)
}
}
@@ -317,13 +322,14 @@ export default function AddMemberDetailTask() {
</Button>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan anggota?"
onYes={(val) => {
if (val) {
onSubmit()
} else {
setOpenModal(false)
}
setOpenModal(false)
}} />
</Box>
);

10
src/module/task/ui/cancel_task.tsx
View File

@@ -14,6 +14,7 @@ export default function CancelTask() {
const router = useRouter()
const [alasan, setAlasan] = useState("")
const [openModal, setOpenModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const tema = useHookstate(TEMA)
const param = useParams<{ id: string, detail: string }>()
const [touched, setTouched] = useState({
@@ -53,6 +54,7 @@ export default function CancelTask() {
async function onSubmit() {
try {
setLoadingModal(true)
const res = await funCancelTask(param.detail, { reason: alasan })
if (res.success) {
setDataRealtime([{
@@ -67,6 +69,9 @@ export default function CancelTask() {
} catch (error) {
console.error(error)
toast.error("Gagal membatalkan tugas, coba lagi nanti")
} finally {
setLoadingModal(false)
setOpenModal(false)
}
}
@@ -109,13 +114,14 @@ export default function CancelTask() {
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin membatalkan tugas ini? Pembatalan tugas bersifat permanen"
onYes={(val) => {
if (val) {
onSubmit()
} else {
setOpenModal(false)
}
setOpenModal(false)
}} />
</Box>
);

123
src/module/task/ui/create_date_end_task.tsx
View File

@@ -1,37 +1,24 @@
"use client";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
ActionIcon,
Avatar,
Box,
Button,
Flex,
Group,
Input,
rem,
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { DatePicker } from "@mantine/dates";
import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { IFormDateTask } from "../lib/type_task";
import moment from "moment";
import { HiChevronLeft } from "react-icons/hi2";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { DatePicker } from "@mantine/dates";
import { useShallowEffect } from "@mantine/hooks";
import moment from "moment";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiChevronLeft } from "react-icons/hi2";
import { IFormDateTask } from "../lib/type_task";
export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: boolean) => void, onSet: (val: IFormDateTask) => void }) {
export default function ViewDateEndTask({ onClose, onSet }: { onClose: (val: boolean) => void, onSet: (val: IFormDateTask) => void }) {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const param = useParams<{ id: string }>()
const [title, setTitle] = useState("")
const [acuan, setAcuan] = useState(false)
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
date: false
});
function onSubmit() {
@@ -41,16 +28,65 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
if (title == "")
return toast.error("Error! harus memasukkan judul tugas")
onSet(
{
dateStart: value[0],
dateEnd: value[1],
title: title
}
)
onSet({
dateStart: value[0],
dateEnd: value[1],
title: title
})
}
function onCheck() {
const cek = checkAll()
if (!cek)
return false
onSubmit()
}
function checkAll() {
let nilai = true
if (title == "") {
setTouched(touched => ({ ...touched, title: true }))
nilai = false
}
if (value[0] == null || value[1] == null) {
setTouched(touched => ({ ...touched, date: true }))
nilai = false
}
return nilai
}
function onValidation(kategori: string, val: string) {
if (kategori == 'title') {
setTitle(val)
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'date') {
const array = val.split(",")
if (array[0] == '' || array[1] == '') {
setTouched({ ...touched, date: true })
} else {
setTouched({ ...touched, date: false })
}
}
}
useShallowEffect(() => {
if (acuan) {
onValidation('date', String(value))
} else {
setAcuan(true)
}
}, [value])
return (
<Box>
<LayoutNavbarNew state={
@@ -78,7 +114,9 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Mulai</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -89,7 +127,9 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
</Group>
</Box>
<Box>
<Text >Tanggal Berakhir</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Berakhir</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -100,6 +140,11 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
</Group>
</Box>
</SimpleGrid>
{
(touched && touched.date)
? <Text size="sm" c={"red"}>Tanggal Tidak Boleh Kosong</Text>
: <></>
}
<Stack pt={15} mb={100}>
<TextInput
styles={{
@@ -108,17 +153,15 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
borderRadius: 10,
},
}}
placeholder="Input Judul Tahapan"
label="Judul Tahapan"
placeholder="Input Judul Tugas"
label="Judul Tugas"
required
size="md"
value={title}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
onValidation('title', e.target.value)
}}
onBlur={() => setTouched({ ...touched, title: true })}
error={touched.title && title == "" ? "Judul Tahapan Tidak Boleh Kosong" : null}
error={touched.title && title == "" ? "Judul Tugas Tidak Boleh Kosong" : null}
/>
</Stack>
</Box>
@@ -133,7 +176,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
size="lg"
radius={30}
fullWidth
onClick={() => { onSubmit() }}
onClick={() => { onCheck() }}
>
Simpan
</Button>

12
src/module/task/ui/detail_list_anggota_task.tsx
View File

@@ -10,9 +10,9 @@ import { useState } from "react";
import toast from "react-hot-toast";
import { FaUser } from "react-icons/fa6";
import { IoIosCloseCircle } from "react-icons/io";
import { useWibuRealtime } from "wibu-realtime";
import { funDeleteMemberTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataMemberTaskDivision } from "../lib/type_task";
import { useWibuRealtime } from "wibu-realtime";
export default function ListAnggotaDetailTask() {
@@ -21,6 +21,7 @@ export default function ListAnggotaDetailTask() {
const param = useParams<{ id: string, detail: string }>()
const [openDrawer, setOpenDrawer] = useState(false)
const [isOpenModal, setOpenModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const [dataChoose, setDataChoose] = useState({ id: '', name: '' })
const router = useRouter()
const roleLogin = useHookstate(globalRole)
@@ -86,6 +87,7 @@ export default function ListAnggotaDetailTask() {
async function onSubmit() {
try {
setLoadingModal(true)
const res = await funDeleteMemberTask(param.detail, { idUser: dataChoose.id });
if (res.success) {
setDataRealtime([{
@@ -102,6 +104,9 @@ export default function ListAnggotaDetailTask() {
} catch (error) {
console.error(error);
toast.error("Gagal menghapus anggota tugas divisi, coba lagi nanti");
} finally {
setLoadingModal(false)
setOpenModal(false)
}
}
@@ -201,13 +206,14 @@ export default function ListAnggotaDetailTask() {
</Box>
</LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
<LayoutModal loading={loadingModal} opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengeluarkan anggota?"
onYes={(val) => {
if (val) {
onSubmit()
} else {
setOpenModal(false)
}
setOpenModal(false)
}} />
</Box>
)

12
src/module/task/ui/detail_list_file_task.tsx
View File

@@ -9,9 +9,9 @@ import { useState } from "react";
import toast from "react-hot-toast";
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from "react-icons/bs";
import { FaTrash } from "react-icons/fa6";
import { useWibuRealtime } from "wibu-realtime";
import { funDeleteFileTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataFileTaskDivision } from "../lib/type_task";
import { useWibuRealtime } from "wibu-realtime";
export default function ListFileDetailTask() {
const [isData, setData] = useState<IDataFileTaskDivision[]>([])
@@ -19,6 +19,7 @@ export default function ListFileDetailTask() {
const param = useParams<{ id: string, detail: string }>()
const [openDrawer, setOpenDrawer] = useState(false)
const [isOpenModal, setOpenModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const [idData, setIdData] = useState('')
const [idDataStorage, setIdDataStorage] = useState('')
const [nameStorage, setNameStorage] = useState('')
@@ -75,6 +76,7 @@ export default function ListFileDetailTask() {
async function onDelete() {
try {
setLoadingModal(true)
const res = await funDeleteFileTask(idData);
if (res.success) {
setDataRealtime([{
@@ -92,6 +94,9 @@ export default function ListFileDetailTask() {
} catch (error) {
console.error(error);
toast.error("Gagal menghapus file, coba lagi nanti");
} finally {
setLoadingModal(false)
setOpenModal(false)
}
}
@@ -207,13 +212,14 @@ export default function ListFileDetailTask() {
</LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
<LayoutModal loading={loadingModal} opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan"
onYes={(val) => {
if (val) {
onDelete()
} else {
setOpenModal(false)
}
setOpenModal(false)
}} />
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />

74
src/module/task/ui/detail_list_tugas_task.tsx
View File

@@ -19,6 +19,7 @@ export default function ListTugasDetailTask() {
const [openDrawer, setOpenDrawer] = useState(false)
const [openDrawerStatus, setOpenDrawerStatus] = useState(false)
const [isOpenModal, setOpenModal] = useState(false)
const [loadingHapus, setLoadingHapus] = useState(false)
const [isData, setData] = useState<IDataListTaskDivision[]>([])
const [loading, setLoading] = useState(true)
const param = useParams<{ id: string, detail: string }>()
@@ -77,6 +78,7 @@ export default function ListTugasDetailTask() {
async function onDelete() {
try {
setLoadingHapus(true)
const res = await funDeleteDetailTask(idData, { idProject: param.detail });
if (res.success) {
setDataRealtime([{
@@ -94,6 +96,9 @@ export default function ListTugasDetailTask() {
} catch (error) {
console.error(error);
toast.error("Gagal menghapus tugas divisi, coba lagi nanti");
} finally {
setLoadingHapus(false)
setOpenModal(false)
}
}
@@ -140,8 +145,9 @@ export default function ListTugasDetailTask() {
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20
}}
pl={20}
pr={20}
>
{
loading ?
@@ -261,51 +267,49 @@ export default function ListTugasDetailTask() {
</Box>
</LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
<LayoutModal loading={loadingHapus} opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menghapus tugas ini?"
onYes={(val) => {
if (val) {
onDelete()
} else {
setOpenModal(false)
}
setOpenModal(false)
}} />
<LayoutDrawer opened={openDrawerStatus} title={'Status'} onClose={() => setOpenDrawerStatus(false)}>
<Box>
<Stack pt={10}>
{
valStatusDetailTask.map((item, index) => {
return (
<Box mb={5} key={index} onClick={() => { onUpdateStatus(item.value) }}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{item.name}
</Text>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
{
valStatusDetailTask.map((item, index) => {
return (
<Box key={index} onClick={() => { onUpdateStatus(item.value) }}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{item.name}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
)
})
}
</Stack>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={20} />
</Box>
)
})
}
</Box>
</LayoutDrawer>
</Box>

2
src/module/task/ui/detail_progress_task.tsx
View File

@@ -90,7 +90,7 @@ export default function ProgressDetailTask() {
return (
<Box mt={10}>
{loading ? "" :
reason !== null ?
(reason !== null && reason != "") ?
(
<Box mb={10}>
<Box p={15} bg={"#FFF2CD"} style={{

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

@@ -2,7 +2,7 @@
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Button, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from "@mantine/core";
import { Box, Button, Flex, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from "@mantine/core";
import { DatePicker } from "@mantine/dates";
import { useShallowEffect } from "@mantine/hooks";
import moment from "moment";
@@ -19,10 +19,12 @@ export default function EditDetailTask() {
const param = useParams<{ id: string, detail: string }>()
const [openModal, setOpenModal] = useState(false)
const [loading, setLoading] = useState(true)
const [loadingModal, setLoadingModal] = useState(false)
const [idTugas, setIdTugas] = useState("")
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
title: false,
date: false
});
async function onSubmit() {
@@ -33,6 +35,7 @@ export default function EditDetailTask() {
return toast.error("Error! harus memasukkan judul tugas")
try {
setLoadingModal(true)
const res = await funEditDetailTask(param.detail, {
title: title,
dateStart: value[0],
@@ -48,6 +51,9 @@ export default function EditDetailTask() {
} catch (error) {
console.error(error);
toast.error("Gagal edit detail tugas divisi, coba lagi nanti");
} finally {
setOpenModal(false)
setLoadingModal(false)
}
}
@@ -94,9 +100,22 @@ export default function EditDetailTask() {
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'date') {
const array = val.split(",")
if (array[0] == '' || array[1] == '') {
setTouched({ ...touched, date: true })
} else {
setTouched({ ...touched, date: false })
}
}
}
useShallowEffect(() => {
onValidation('date', String(value))
}, [value])
return (
<Box>
<LayoutNavbarNew back="" title={"Edit Tanggal dan Tugas"} menu />
@@ -122,7 +141,9 @@ export default function EditDetailTask() {
<Skeleton height={45} mt={20} radius={10} />
:
<>
<Text>Tanggal Mulai</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Mulai</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -139,7 +160,9 @@ export default function EditDetailTask() {
<Skeleton height={45} mt={20} radius={10} />
:
<>
<Text c={tema.get().utama}>Tanggal Berakhir</Text>
<Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
<Text fw={500}>Tanggal Berakhir</Text> <Text c={"red"}>*</Text>
</Flex>
<Group
justify="center"
bg={"white"}
@@ -152,6 +175,12 @@ export default function EditDetailTask() {
}
</Box>
</SimpleGrid>
{
(!loading && touched && touched.date)
? <Text size="sm" c={"red"}>Tanggal Tidak Boleh Kosong</Text>
: <></>
}
<Stack pt={15} pb={100}>
{loading ?
<Skeleton height={40} mt={20} radius={10} />
@@ -163,15 +192,14 @@ export default function EditDetailTask() {
borderRadius: 10,
},
}}
label={"Judul Tahapan"}
label={"Judul Tugas"}
required
placeholder="Input Judul Tahapan"
placeholder="Input Judul Tugas"
size="md"
value={title}
error={
touched.title &&
(title == "" ? "Error! harus memasukkan Judul Tahapan" : ""
)
(title == "" ? "Judul Tugas Tidak Boleh Kosong" : "")
}
onChange={(e) => {
onValidation('title', e.target.value)
@@ -201,13 +229,14 @@ export default function EditDetailTask() {
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => {
if (val) {
onSubmit()
} else {
setOpenModal(false)
}
setOpenModal(false)
}} />
</Box>
);

12
src/module/task/ui/edit_task.tsx
View File

@@ -7,14 +7,15 @@ import { useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { funEditTask, funGetTaskDivisionById } from "../lib/api_task";
import { useWibuRealtime } from "wibu-realtime";
import { funEditTask, funGetTaskDivisionById } from "../lib/api_task";
export default function EditTask() {
const router = useRouter()
const [title, setTitle] = useState("")
const [openModal, setOpenModal] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
@@ -45,6 +46,7 @@ export default function EditTask() {
async function onSubmit() {
try {
setLoadingModal(true)
const res = await funEditTask(param.detail, { title })
if (res.success) {
setDataRealtime([{
@@ -59,6 +61,9 @@ export default function EditTask() {
} catch (error) {
console.error(error)
toast.error("Gagal mengedit tugas, coba lagi nanti")
} finally {
setLoadingModal(false)
setOpenModal(false)
}
}
@@ -139,13 +144,14 @@ export default function EditTask() {
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengedit tugas ini?"
onYes={(val) => {
if (val) {
onSubmit()
} else {
setOpenModal(false)
}
setOpenModal(false)
}} />
</Box>
);