upd: project
Deskripsi: - tambah project - update tb project NO Issues
This commit is contained in:
amel
116
src/module/project/ui/create_date_end_task.tsx
Normal file
116
src/module/project/ui/create_date_end_task.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
import { LayoutNavbarNew, WARNA } from "@/module/_global";
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Group,
|
||||
Input,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
} 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";
|
||||
|
||||
|
||||
export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateProject) => void }) {
|
||||
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
|
||||
const router = useRouter()
|
||||
const [title, setTitle] = useState("")
|
||||
|
||||
function onSubmit() {
|
||||
if (value[0] == null || value[1] == null)
|
||||
return toast.error("Error! harus memilih tanggal")
|
||||
|
||||
if (title == "")
|
||||
return toast.error("Error! harus memasukkan judul tugas")
|
||||
|
||||
onClose(
|
||||
{
|
||||
dateStart: value[0],
|
||||
dateEnd: value[1],
|
||||
title: title
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<LayoutNavbarNew back="" title={"Tanggal Tugas"} menu />
|
||||
<Box p={20}>
|
||||
<Group
|
||||
justify="center"
|
||||
bg={"white"}
|
||||
py={20}
|
||||
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
|
||||
>
|
||||
<DatePicker
|
||||
styles={{}}
|
||||
type="range"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
size="md"
|
||||
c={WARNA.biruTua}
|
||||
/>
|
||||
</Group>
|
||||
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
|
||||
<Box>
|
||||
<Text>Tanggal Mulai</Text>
|
||||
<Group
|
||||
justify="center"
|
||||
bg={"white"}
|
||||
h={45}
|
||||
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
|
||||
>
|
||||
<Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
|
||||
<Group
|
||||
justify="center"
|
||||
bg={"white"}
|
||||
h={45}
|
||||
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
|
||||
>
|
||||
<Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
<Stack pt={15}>
|
||||
<Input
|
||||
styles={{
|
||||
input: {
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
borderRadius: 10,
|
||||
},
|
||||
}}
|
||||
placeholder="Input Nama Tahapan"
|
||||
size="md"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
</Stack>
|
||||
<Box mt={"xl"}>
|
||||
<Button
|
||||
c={"white"}
|
||||
bg={WARNA.biruTua}
|
||||
size="lg"
|
||||
radius={30}
|
||||
fullWidth
|
||||
onClick={() => { onSubmit() }}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
416
src/module/project/ui/create_project.tsx
Normal file
416
src/module/project/ui/create_project.tsx
Normal file
@@ -0,0 +1,416 @@
|
||||
"use client";
|
||||
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
|
||||
import { Avatar, Box, Button, Center, Flex, Group, Select, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { IoIosArrowDropright } from "react-icons/io";
|
||||
import { BsFiletypeCsv } from "react-icons/bs";
|
||||
import ResultsDateAndTask from "./results_date-and_task";
|
||||
import ResultsFile from "./results_file";
|
||||
import LayoutModal from "@/module/_global/layout/layout_modal";
|
||||
import toast from "react-hot-toast";
|
||||
import { funGetAllGroup, IDataGroup } from "@/module/group";
|
||||
import { funGetUserByCookies } from "@/module/auth";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { useHookstate } from "@hookstate/core";
|
||||
import { globalMemberProject } from "../lib/val_project";
|
||||
import ViewDateEndTask from "./create_date_end_task";
|
||||
import { IFormDateProject, IFormMemberProject, IListFileTaskProject } from "../lib/type_project";
|
||||
import CreateUsersProject from "./create_users_project";
|
||||
import { FaTrash } from "react-icons/fa6";
|
||||
import { Dropzone } from "@mantine/dropzone";
|
||||
import _ from "lodash";
|
||||
import { funCreateProject } from "../lib/api_project";
|
||||
|
||||
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)
|
||||
const [dataGroup, setDataGroup] = useState<IDataGroup[]>([]);
|
||||
const [roleUser, setRoleUser] = useState<any>("")
|
||||
const [isChooseAnggota, setChooseAnggota] = useState(false)
|
||||
const member = useHookstate(globalMemberProject)
|
||||
const memberValue = member.get() as IFormMemberProject[]
|
||||
const [openTugas, setOpenTugas] = useState(false)
|
||||
const [dataTask, setDataTask] = useState<IFormDateProject[]>([])
|
||||
const openRef = useRef<() => void>(null)
|
||||
const [fileForm, setFileForm] = useState<FormData[]>([])
|
||||
const [listFile, setListFile] = useState<IListFileTaskProject[]>([])
|
||||
const [indexDelFile, setIndexDelFile] = useState<number>(0)
|
||||
const [indexDelTask, setIndexDelTask] = useState<number>(0)
|
||||
const [body, setBody] = useState<any>({
|
||||
idGroup: "",
|
||||
title: "",
|
||||
desc: "",
|
||||
});
|
||||
|
||||
function deleteFile(index: number) {
|
||||
setListFile([...listFile.filter((val, i) => i !== index)])
|
||||
setFileForm([...fileForm.filter((val, i) => i !== index)])
|
||||
setOpenDrawerFile(false)
|
||||
}
|
||||
|
||||
function deleteTask(index: number) {
|
||||
setDataTask([...dataTask.filter((val, i) => i !== index)])
|
||||
setOpenDrawerTask(false)
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const loadGroup = await funGetAllGroup('?active=true')
|
||||
if (loadGroup.success) {
|
||||
setDataGroup(loadGroup.data);
|
||||
} else {
|
||||
toast.error(loadGroup.message);
|
||||
}
|
||||
|
||||
const loadUser = await funGetUserByCookies();
|
||||
setRoleUser(loadUser.idUserRole)
|
||||
}
|
||||
|
||||
function onToChooseAnggota() {
|
||||
if (roleUser == "supadmin" && body.idGroup == "")
|
||||
return toast.error("Error! grup harus diisi")
|
||||
setChooseAnggota(true)
|
||||
}
|
||||
|
||||
function onChooseGroup(val: any) {
|
||||
member.set([])
|
||||
setBody({ ...body, idGroup: val })
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
|
||||
async function onSubmit() {
|
||||
try {
|
||||
const response = await funCreateProject({ title: body.title, idGroup: body.idGroup, task: dataTask, file: fileForm, member: memberValue })
|
||||
|
||||
if (response.success) {
|
||||
toast.success(response.message)
|
||||
setBody({
|
||||
idGroup: "",
|
||||
title: "",
|
||||
desc: "",
|
||||
})
|
||||
member.set([])
|
||||
setFileForm([])
|
||||
setListFile([])
|
||||
setDataTask([])
|
||||
} else {
|
||||
toast.error(response.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
toast.error("Gagal menambahkan tugas divisi, coba lagi nanti");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (openTugas) return <ViewDateEndTask onClose={(val) => {
|
||||
setDataTask([...dataTask, val])
|
||||
setOpenTugas(false)
|
||||
}} />;
|
||||
|
||||
if (isChooseAnggota) return <CreateUsersProject grup={body.idGroup} onClose={() => { setChooseAnggota(false) }} />
|
||||
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<LayoutNavbarNew back="/project" title="tambah proyek" menu />
|
||||
<Box p={20}>
|
||||
<Stack>
|
||||
{
|
||||
(roleUser == "supadmin") && (
|
||||
<Select
|
||||
placeholder="Grup"
|
||||
label="Grup"
|
||||
size="md"
|
||||
required
|
||||
radius={40}
|
||||
data={dataGroup?.map((pro: any) => ({
|
||||
value: String(pro.id),
|
||||
label: pro.name
|
||||
}))}
|
||||
onChange={(val) => {
|
||||
onChooseGroup(val)
|
||||
}}
|
||||
|
||||
value={(body.idGroup=="")?null:body.idGroup}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<TextInput
|
||||
label="Proyek"
|
||||
styles={{
|
||||
input: {
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
borderRadius: 10,
|
||||
},
|
||||
}}
|
||||
required withAsterisk
|
||||
placeholder="Nama Proyek"
|
||||
size="md"
|
||||
value={body.title}
|
||||
onChange={(e) => setBody({ ...body, title: e.target.value })}
|
||||
/>
|
||||
<Box onClick={() => { setOpenTugas(true) }}>
|
||||
<Group
|
||||
justify="space-between"
|
||||
p={10}
|
||||
style={{
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<Text>Tambah Tanggal & Tugas</Text>
|
||||
<IoIosArrowDropright size={25} />
|
||||
</Group>
|
||||
</Box>
|
||||
<Group
|
||||
justify="space-between"
|
||||
p={10}
|
||||
style={{
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
onClick={() => setOpenDrawer(true)}
|
||||
>
|
||||
<Text>Upload File</Text>
|
||||
<IoIosArrowDropright size={25} />
|
||||
</Group>
|
||||
<Box onClick={() => { onToChooseAnggota() }}>
|
||||
<Group
|
||||
justify="space-between"
|
||||
p={10}
|
||||
style={{
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<Text>Pilih Anggota</Text>
|
||||
<IoIosArrowDropright size={25} />
|
||||
</Group>
|
||||
</Box>
|
||||
</Stack>
|
||||
{
|
||||
dataTask.length > 0 &&
|
||||
<Box pt={20}>
|
||||
<Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
|
||||
{
|
||||
dataTask.map((v, i) => {
|
||||
return (
|
||||
<Box key={i} onClick={() => {
|
||||
setIndexDelTask(i)
|
||||
setOpenDrawerTask(true)
|
||||
}}>
|
||||
<ResultsDateAndTask dateStart={v.dateStart} dateEnd={v.dateEnd} title={v.title} />
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
|
||||
{
|
||||
listFile.length > 0 &&
|
||||
<Box pt={20}>
|
||||
<Text fw={'bold'} c={WARNA.biruTua}>File</Text>
|
||||
<Box bg={"white"} style={{
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
padding: 20
|
||||
}}>
|
||||
{
|
||||
listFile.map((v, i) => {
|
||||
return (
|
||||
<Box key={i} onClick={() => {
|
||||
setIndexDelFile(i)
|
||||
setOpenDrawerFile(true)
|
||||
}}>
|
||||
<ResultsFile name={v.name} extension={v.extension} />
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
|
||||
{
|
||||
member.length > 0 &&
|
||||
<Box pt={30}>
|
||||
<Group justify="space-between">
|
||||
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
|
||||
<Text c={WARNA.biruTua}>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.get().map((v: any, i: any) => {
|
||||
return (
|
||||
<Flex
|
||||
justify={"space-between"}
|
||||
align={"center"}
|
||||
mt={20}
|
||||
key={i}
|
||||
>
|
||||
<Group>
|
||||
<Avatar src={"v.image"} alt="it's me" size="lg" />
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua} fw={"bold"}>
|
||||
{v.name}
|
||||
</Text>
|
||||
</Box>
|
||||
</Group>
|
||||
<Text c={WARNA.biruTua} fw={"bold"}>
|
||||
Anggota
|
||||
</Text>
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
|
||||
<Box mt="xl">
|
||||
<Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => setModal(true)}>
|
||||
Simpan
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
{/* Drawer pilih file */}
|
||||
<LayoutDrawer
|
||||
opened={openDrawer}
|
||||
onClose={() => setOpenDrawer(false)}
|
||||
title={"Pilih File"}
|
||||
>
|
||||
<Flex justify={"space-around"}>
|
||||
<Dropzone
|
||||
openRef={openRef}
|
||||
onDrop={async (files) => {
|
||||
if (!files || _.isEmpty(files))
|
||||
return toast.error('Tidak ada file yang dipilih')
|
||||
const fd = new FormData();
|
||||
fd.append("file", files[0]);
|
||||
setFileForm([...fileForm, fd])
|
||||
setListFile([...listFile, { name: files[0].name, extension: files[0].type.split("/")[1] }])
|
||||
}}
|
||||
activateOnClick={false}
|
||||
maxSize={3 * 1024 ** 2}
|
||||
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
|
||||
onReject={(files) => {
|
||||
return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
|
||||
}}
|
||||
>
|
||||
<Box onClick={() => openRef.current?.()}>
|
||||
<Box
|
||||
bg={"#DCEED8"}
|
||||
style={{
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
padding: 20,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<BsFiletypeCsv size={40} />
|
||||
</Center>
|
||||
</Box>
|
||||
<Text mt={10} ta={"center"}>
|
||||
Pilih file
|
||||
</Text>
|
||||
<Text ta={"center"}>diperangkat</Text>
|
||||
</Box>
|
||||
</Dropzone>
|
||||
<Box onClick={() => router.push("/project/create?page=file-save")}>
|
||||
<Box
|
||||
bg={"#DCEED8"}
|
||||
style={{
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
padding: 20,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<BsFiletypeCsv size={40} />
|
||||
</Center>
|
||||
</Box>
|
||||
<Text mt={10} ta={"center"}>
|
||||
Pilih file yang
|
||||
</Text>
|
||||
<Text ta={"center"}>sudah ada</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</LayoutDrawer>
|
||||
|
||||
|
||||
|
||||
{/* Drawer hapus file */}
|
||||
<LayoutDrawer
|
||||
opened={openDrawerFile}
|
||||
onClose={() => setOpenDrawerFile(false)}
|
||||
title={""}
|
||||
>
|
||||
<Stack pt={10}>
|
||||
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
|
||||
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
|
||||
<Box>
|
||||
<FaTrash size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</LayoutDrawer>
|
||||
|
||||
|
||||
{/* Drawer hapus tugas */}
|
||||
<LayoutDrawer
|
||||
opened={openDrawerTask}
|
||||
onClose={() => setOpenDrawerTask(false)}
|
||||
title={""}
|
||||
>
|
||||
<Stack pt={10}>
|
||||
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
|
||||
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteTask(indexDelTask)}>
|
||||
<Box>
|
||||
<FaTrash size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua} ta='center'>Hapus Tugas</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</LayoutDrawer>
|
||||
|
||||
|
||||
<LayoutModal opened={isModal} onClose={() => setModal(false)}
|
||||
description="Apakah Anda yakin ingin menambahkan data?"
|
||||
onYes={(val) => {
|
||||
if (val) {
|
||||
onSubmit()
|
||||
}
|
||||
setModal(false)
|
||||
}} />
|
||||
</Box >
|
||||
);
|
||||
}
|
||||
146
src/module/project/ui/create_users_project.tsx
Normal file
146
src/module/project/ui/create_users_project.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
"use client"
|
||||
import { LayoutNavbarNew, WARNA } from '@/module/_global';
|
||||
import { useHookstate } from '@hookstate/core';
|
||||
import { Avatar, Box, Button, Center, Input, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import React, { useState } from 'react';
|
||||
import { HiMagnifyingGlass } from 'react-icons/hi2';
|
||||
import { funGetAllmember, TypeUser } from '@/module/user';
|
||||
import { funGetUserByCookies } from '@/module/auth';
|
||||
import toast from 'react-hot-toast';
|
||||
import { globalMemberProject } from '../lib/val_project';
|
||||
|
||||
|
||||
export default function CreateUsersProject({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) {
|
||||
const router = useRouter()
|
||||
const member = useHookstate(globalMemberProject)
|
||||
const [selectedFiles, setSelectedFiles] = useState<any>([]);
|
||||
const [dataMember, setDataMember] = useState<TypeUser>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [openTugas, setOpenTugas] = useState(false)
|
||||
|
||||
const handleFileClick = (index: number) => {
|
||||
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
|
||||
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != dataMember[index].id))
|
||||
} else {
|
||||
setSelectedFiles([...selectedFiles, { idUser: dataMember[index].id, name: dataMember[index].name }])
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
async function loadData(search: string) {
|
||||
setLoading(true)
|
||||
const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
|
||||
const user = await funGetUserByCookies();
|
||||
|
||||
if (res.success) {
|
||||
setDataMember(res.data.filter((i: any) => i.id != user.id))
|
||||
|
||||
// cek data member sebelumnya
|
||||
if (member.length > 0) {
|
||||
setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
|
||||
}
|
||||
} else {
|
||||
toast.error(res.message)
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
|
||||
function onSubmit() {
|
||||
if (selectedFiles.length == 0) {
|
||||
return toast.error("Error! silahkan pilih anggota")
|
||||
}
|
||||
member.set(selectedFiles)
|
||||
onClose(true)
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
loadData("")
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<LayoutNavbarNew title="Pilih Anggota" menu />
|
||||
<Box p={20}>
|
||||
<Stack>
|
||||
<TextInput
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: '#A3A3A3',
|
||||
borderColor: '#A3A3A3',
|
||||
},
|
||||
}}
|
||||
size="md"
|
||||
radius={30}
|
||||
leftSection={<HiMagnifyingGlass size={20} />}
|
||||
placeholder="Pencarian"
|
||||
onChange={(e) => loadData(e.target.value)}
|
||||
/>
|
||||
<Box pt={10}>
|
||||
{loading ?
|
||||
<SimpleGrid
|
||||
cols={{ base: 2, sm: 2, lg: 2 }}
|
||||
spacing={{ base: 20, sm: "xl" }}
|
||||
verticalSpacing={{ base: "md", sm: "xl" }}
|
||||
>
|
||||
{Array(6)
|
||||
.fill(null)
|
||||
.map((_, i) => (
|
||||
<Box key={i}>
|
||||
<Skeleton width={"100%"} height={100} radius={"md"} />
|
||||
</Box>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
:
|
||||
<SimpleGrid
|
||||
cols={{ base: 2, sm: 2, lg: 2 }}
|
||||
spacing={{ base: 20, sm: "xl" }}
|
||||
verticalSpacing={{ base: "md", sm: "xl" }}
|
||||
>
|
||||
{dataMember.map((v, index) => {
|
||||
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
|
||||
return (
|
||||
<Box key={index} mb={10}>
|
||||
<Box
|
||||
bg={isSelected ? WARNA.bgHijauMuda : "white"}
|
||||
style={{
|
||||
border: `1px solid ${WARNA.biruTua}`,
|
||||
borderRadius: 20,
|
||||
}}
|
||||
py={10}
|
||||
onClick={() => handleFileClick(index)}
|
||||
>
|
||||
<Center>
|
||||
<Avatar src={"https://i.pravatar.cc/1000?img=37"} alt="it's me" size="xl" />
|
||||
</Center>
|
||||
<Text mt={20} ta="center">
|
||||
{v.name}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
}
|
||||
</Box>
|
||||
</Stack>
|
||||
<Box mt="xl">
|
||||
<Button
|
||||
color="white"
|
||||
bg={WARNA.biruTua}
|
||||
size="lg"
|
||||
radius={30}
|
||||
fullWidth
|
||||
onClick={() => { onSubmit() }}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@ export default function EditDetailTaskProject() {
|
||||
|
||||
try {
|
||||
const res = await funEditDetailProject(param.id, {
|
||||
name: name,
|
||||
title: name,
|
||||
dateStart: value[0],
|
||||
dateEnd: value[1],
|
||||
|
||||
|
||||
@@ -110,7 +110,7 @@ export default function ListProject() {
|
||||
<HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
|
||||
</ActionIcon>
|
||||
</Center>
|
||||
<Text>{v.name}</Text>
|
||||
<Text>{v.title}</Text>
|
||||
</Group>
|
||||
<Box>
|
||||
<RiCircleFill size={12} color={
|
||||
@@ -136,7 +136,7 @@ export default function ListProject() {
|
||||
<Card.Section>
|
||||
<Box h={120} bg={WARNA.biruTua}>
|
||||
<Flex justify={'center'} align={'center'} h={"100%"}>
|
||||
<Title order={3} c={"white"}>{v.name}</Title>
|
||||
<Title order={3} c={"white"}>{v.title}</Title>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Card.Section>
|
||||
|
||||
56
src/module/project/ui/results_date-and_task.tsx
Normal file
56
src/module/project/ui/results_date-and_task.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { WARNA } from '@/module/_global';
|
||||
import { Box, Group, SimpleGrid, Text } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import { AiOutlineFileSync } from "react-icons/ai";
|
||||
import { IFormDateProject } from '../lib/type_project';
|
||||
import moment from 'moment';
|
||||
|
||||
export default function ResultsDateAndTask(data: IFormDateProject) {
|
||||
return (
|
||||
<Box pt={5}>
|
||||
<Box bg={"white"} style={{
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
padding: 20
|
||||
}}>
|
||||
<Box style={{
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
padding: 10
|
||||
}}>
|
||||
<Group>
|
||||
<AiOutlineFileSync size={25} />
|
||||
<Text>{data.title}</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
<Box>
|
||||
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
|
||||
<Box>
|
||||
<Text>Tanggal Mulai</Text>
|
||||
<Group
|
||||
justify="center"
|
||||
bg={"white"}
|
||||
h={45}
|
||||
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
|
||||
>
|
||||
<Text>{moment(data.dateStart).format('DD-MM-YYYY')}</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
|
||||
<Group
|
||||
justify="center"
|
||||
bg={"white"}
|
||||
h={45}
|
||||
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
|
||||
>
|
||||
<Text>{moment(data.dateEnd).format('DD-MM-YYYY')}</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
24
src/module/project/ui/results_file.tsx
Normal file
24
src/module/project/ui/results_file.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { WARNA } from '@/module/_global';
|
||||
import { Box, Group, Text } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
|
||||
import { IListFileTaskProject } from '../lib/type_project';
|
||||
|
||||
export default function ResultsFile({ name, extension }: IListFileTaskProject) {
|
||||
return (
|
||||
<Box style={{
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
padding: 10
|
||||
}} mb={10}>
|
||||
<Group>
|
||||
{extension == "pdf" && <BsFiletypePdf size={25} />}
|
||||
{extension == "csv" && <BsFiletypeCsv size={25} />}
|
||||
{extension == "png" && <BsFiletypePng size={25} />}
|
||||
{extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={25} />}
|
||||
{extension == "heic" && <BsFiletypeHeic size={25} />}
|
||||
<Text>{name}</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user