Browse Source

add loader

pull/1/head
wahyuun 1 year ago
parent
commit
cd29f3de52
  1. 687
      src/views/SimproV2/CreatedProyek/DialogDocument.js

687
src/views/SimproV2/CreatedProyek/DialogDocument.js

@ -1,341 +1,346 @@
import React, { useEffect, useState, useMemo } from 'react'
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { Button } from 'reactstrap';
import { Table, Tooltip, Popover } from 'antd';
import 'antd/dist/antd.css';
import moment from 'moment';
import SweetAlert from 'react-bootstrap-sweetalert';
import { DOCUMENT_DOWNLOAD, DOCUMENT_GET, BASE_SIMPRO_LUMEN_FILE, REQUEST_MATERIAL_EDIT, DOCUMENT_DELETE, DOCUMENT_SEARCH, FOLDER_DOCUMENT_PROYEK_GET_TREE, FOLDER_DOCUMENT_PROYEK_DELETE } from '../../../const/ApiConst';
import axios from "../../../const/interceptorApi"
import { NotificationContainer, NotificationManager } from 'react-notifications';
import DialogRequest from './FormDocument';
import DialogRequestFolder from './FormFolderDocument';
const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName }) => {
const token = localStorage.getItem("token")
const HEADER = {
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
}
}
const config = {
headers:
{
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
const [dataDocument, setDataDocument] = useState([])
const [openDialogReq, setOpenDialogReq] = useState(false)
const [openDialogNewFolder, setOpenDialogNewFolder] = useState(false)
const [alertDelete, setAlertDelete] = useState(false)
const [alertDeleteFolder, setAlertDeleteFolder] = useState(false)
const [idDelete, setIdDelete] = useState(0)
const [dataEdit, setDataEdit] = useState(null)
const [parentIdNewFolder, setParentIdNewFolder] = useState(0)
useEffect(() => {
if (idTask > 0) {
getDataDocument();
}
}, [idTask, openDialog])
useEffect(() => {
if (!openDialog) {
setDataDocument([]);
} else {
}
}, [openDialog])
const getDataDocument = async () => {
const url = FOLDER_DOCUMENT_PROYEK_GET_TREE(idTask)
const result = await axios
.get(url, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
setDataDocument(result.data.data);
} else {
NotificationManager.error('Gagal mengambil data, Silahkan coba lagi!!', 'Failed');
}
}
const handleCancel = () => {
setDataDocument([]);
closeDialog('cancel', 'none')
}
const handleDelete = (id) => {
setIdDelete(id)
setAlertDelete(true)
}
const handleDeleteFolder = (id) => {
setIdDelete(id)
setAlertDeleteFolder(true)
}
const handleDownload = (id, file) => {
fetch(DOCUMENT_DOWNLOAD(id), {
headers: new Headers({
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
})
})
.then(response => {
response.blob().then(blob => {
const url = window.URL.createObjectURL(new Blob([blob]));
let a = document.createElement('a');
a.href = url;
a.download = file;
a.click();
a.remove();
});
//window.location.href = response.url;
});
// const urlDownload = DOCUMENT_DOWNLOAD(id);
// window.open(urlDownload);
}
const handleShow = (file) => {
const urlShow = `${BASE_SIMPRO_LUMEN_FILE}/${file}`
window.open(urlShow);
}
const handleNewFolderParent = (folderId) => {
setParentIdNewFolder(folderId)
setOpenDialogNewFolder(true)
}
const handleNewFolderWOParent = () => {
setParentIdNewFolder(0)
setOpenDialogNewFolder(true)
}
const handleNewFileParent = (folderId) => {
setParentIdNewFolder(folderId)
openDialogRequest()
}
const handleNewFileWOParent = () => {
setParentIdNewFolder(0)
openDialogRequest()
}
const renderShowDokumen = (file) => {
let arrayFile = file.split(".")
let length = arrayFile.length
length = length - 1
const fileExt = arrayFile[length];
if (fileExt == "pdf" || fileExt == "png" || fileExt == "jpg" || fileExt == "jpeg" || fileExt == "gif") {
return (
<Tooltip title="View Document">
<Button size={"sm"} color='info' style={{ color: "#FFFFFF" }} onClick={() => handleShow(file)}><i className="fa fa-eye"></i></Button>
</Tooltip>
)
}
}
const RenderTable = useMemo(() => {
const columns = [
{
title: 'Action',
dataIndex: '',
key: 'id',
className: "nowrap",
render: (text, record) =>
<>
{!record.isDir && <Tooltip title="Delete Document">
<Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
</Tooltip>}{" "}
{record.isDir && <Tooltip title="Delete Folder">
<Button size={"sm"} color='danger' onClick={() => handleDeleteFolder(text.id)}><i className="fa fa-trash"></i></Button>
</Tooltip>}{" "}
{!record.isDir && <Tooltip title="Download Document">
<Button size={"sm"} color='primary' onClick={() => handleDownload(text.id, text.file)}><i className="fa fa-download"></i></Button>
</Tooltip>}{" "}
{record.isDir && <Tooltip title="New Folder">
<Button size="sm" color="success" onClick={() => handleNewFolderParent(record.id)}><i className="fa fa-folder"></i></Button>
</Tooltip>}{" "}
{record.isDir && <Tooltip title="New File">
<Button size="sm" color="primary" onClick={() => handleNewFileParent(record.id)}><i className="fa fa-file"></i></Button>
</Tooltip>}{" "}
{text.file ? renderShowDokumen(text.file) : ""}
</>
,
},
{ title: 'Document Name', dataIndex: 'name_folder', key: 'name_folder', render: (text, record) => record.isDir ? record.name_folder : record.file },
{ title: 'Type', dataIndex: 'isDir', key: 'isDir', render: (text, record) => record.isDir ? 'Folder' : 'File' },
{ title: 'Upload Date', dataIndex: 'created_at', key: 'created_at', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) }
];
return (
<Table
size="small"
columns={columns}
rowKey={"id"}
dataSource={dataDocument}
pagination={{ position: ["bottomLeft"] }}
/>
)
}, [dataDocument])
const closeDialogReq = (type) => {
if (type == "upload") {
getDataDocument();
}
setOpenDialogReq(false);
}
const toggleDialogReq = () => {
setOpenDialogReq(!openDialogReq)
}
const openDialogRequest = () => {
setOpenDialogReq(true)
}
const cancelDelete = () => {
setAlertDelete(false)
setIdDelete(0)
}
const cancelDeleteFolder = () => {
setAlertDeleteFolder(false)
setIdDelete(0)
}
const onConfirmDelete = async () => {
let urlDel = DOCUMENT_DELETE(idDelete)
const result = await axios.delete(urlDel, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataDocument()
setIdDelete(0)
setAlertDelete(false)
NotificationManager.success(`Dokumen project berhasil dihapus`, 'Success!!');
} else {
setIdDelete(0)
setAlertDelete(false)
NotificationManager.error(`Dokumen project gagal dihapus`, 'Failed!!');
}
}
const onConfirmDeleteFolder = async () => {
let urlDel = FOLDER_DOCUMENT_PROYEK_DELETE(idDelete)
const result = await axios.delete(urlDel, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataDocument()
setIdDelete(0)
setAlertDeleteFolder(false)
NotificationManager.success(`Folder berhasil dihapus`, 'Success!!');
} else {
setIdDelete(0)
setAlertDeleteFolder(false)
NotificationManager.error(`Folder gagal dihapus`, 'Failed!!');
}
}
const closeDialogNewFolder = (type) => {
if (type == "upload") {
getDataDocument();
}
setOpenDialogNewFolder(false);
setParentIdNewFolder(0);
}
const toggleDialogNewFolder = () => {
setOpenDialogNewFolder(!openDialogNewFolder)
}
return (
<>
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
<div>Project Documents - {proyekName} </div>
{/* <Button onClick={openDialogRequest} size='sm' color="primary"><i className='fa fa-plus'></i></Button> */}
{/* <Popover placement="bottom" title="Add" content={popupAddDoc()} trigger="click">
<Button size='sm' color="primary"><i className='fa fa-plus'></i></Button>
</Popover> */}
<div>
<Tooltip title="New Folder">
<Button size="sm" color="success" onClick={handleNewFolderWOParent}><i className="fa fa-folder"></i></Button>
</Tooltip>
<span style={{ marginLeft: 5, marginRight: 5 }}></span>
<Tooltip title="New File">
<Button size="sm" color="primary" onClick={handleNewFileWOParent}><i className="fa fa-file"></i></Button>
</Tooltip>
</div>
{/* <Button onClick={openDialogRequest} size='sm' color="primary"><i className='fa fa-folder'></i></Button> */}
</ModalHeader>
<ModalBody>
<div style={{ width: '100%', overflow: "auto" }}>
{RenderTable}
</div>
</ModalBody>
{/* <ModalFooter>
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
</ModalFooter> */}
</Modal>
<NotificationContainer />
<SweetAlert
show={alertDelete}
warning
showCancel
confirmBtnText="Delete"
confirmBtnBsStyle="danger"
title={`Are you sure?`}
onConfirm={onConfirmDelete}
onCancel={() => cancelDelete()}
focusCancelBtn
>
Delete this data
</SweetAlert>
<SweetAlert
show={alertDeleteFolder}
warning
showCancel
confirmBtnText="Delete"
confirmBtnBsStyle="danger"
title={`Are you sure?`}
onConfirm={onConfirmDeleteFolder}
onCancel={() => cancelDeleteFolder()}
focusCancelBtn
>
Delete this folder
</SweetAlert>
<DialogRequest
openDialog={openDialogReq}
closeDialog={closeDialogReq}
toggleDialog={toggleDialogReq}
idTask={idTask}
parentIdNewFolder={parentIdNewFolder}
dataEdit={dataEdit}
/>
<DialogRequestFolder
openDialog={openDialogNewFolder}
closeDialog={closeDialogNewFolder}
toggleDialog={toggleDialogNewFolder}
idTask={idTask}
parentIdNewFolder={parentIdNewFolder}
dataEdit={dataEdit}
/>
</>
)
}
export default DialogDocument;
import React, { useEffect, useState, useMemo } from 'react'
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { Button } from 'reactstrap';
import { Table, Tooltip, Popover, Spin } from 'antd';
import 'antd/dist/antd.css';
import moment from 'moment';
import SweetAlert from 'react-bootstrap-sweetalert';
import { DOCUMENT_DOWNLOAD, DOCUMENT_GET, BASE_SIMPRO_LUMEN_FILE, REQUEST_MATERIAL_EDIT, DOCUMENT_DELETE, DOCUMENT_SEARCH, FOLDER_DOCUMENT_PROYEK_GET_TREE, FOLDER_DOCUMENT_PROYEK_DELETE } from '../../../const/ApiConst';
import axios from "../../../const/interceptorApi"
import { NotificationContainer, NotificationManager } from 'react-notifications';
import DialogRequest from './FormDocument';
import DialogRequestFolder from './FormFolderDocument';
const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName }) => {
const token = localStorage.getItem("token")
const HEADER = {
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
}
}
const config = {
headers:
{
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
const [dataDocument, setDataDocument] = useState([])
const [openDialogReq, setOpenDialogReq] = useState(false)
const [openDialogNewFolder, setOpenDialogNewFolder] = useState(false)
const [alertDelete, setAlertDelete] = useState(false)
const [alertDeleteFolder, setAlertDeleteFolder] = useState(false)
const [idDelete, setIdDelete] = useState(0)
const [dataEdit, setDataEdit] = useState(null)
const [parentIdNewFolder, setParentIdNewFolder] = useState(0)
const [loading, setLoading] = useState(true);
useEffect(() => {
if (idTask > 0) {
getDataDocument();
}
}, [idTask, openDialog])
useEffect(() => {
if (!openDialog) {
setDataDocument([]);
} else {
}
}, [openDialog])
const getDataDocument = async () => {
const url = FOLDER_DOCUMENT_PROYEK_GET_TREE(idTask)
const result = await axios
.get(url, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
setDataDocument(result.data.data);
setLoading(false);
} else {
setLoading(false);
NotificationManager.error('Gagal mengambil data, Silahkan coba lagi!!', 'Failed');
}
}
const handleCancel = () => {
setDataDocument([]);
closeDialog('cancel', 'none')
}
const handleDelete = (id) => {
setIdDelete(id)
setAlertDelete(true)
}
const handleDeleteFolder = (id) => {
setIdDelete(id)
setAlertDeleteFolder(true)
}
const handleDownload = (id, file) => {
fetch(DOCUMENT_DOWNLOAD(id), {
headers: new Headers({
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
})
})
.then(response => {
response.blob().then(blob => {
const url = window.URL.createObjectURL(new Blob([blob]));
let a = document.createElement('a');
a.href = url;
a.download = file;
a.click();
a.remove();
});
//window.location.href = response.url;
});
// const urlDownload = DOCUMENT_DOWNLOAD(id);
// window.open(urlDownload);
}
const handleShow = (file) => {
const urlShow = `${BASE_SIMPRO_LUMEN_FILE}/${file}`
window.open(urlShow);
}
const handleNewFolderParent = (folderId) => {
setParentIdNewFolder(folderId)
setOpenDialogNewFolder(true)
}
const handleNewFolderWOParent = () => {
setParentIdNewFolder(0)
setOpenDialogNewFolder(true)
}
const handleNewFileParent = (folderId) => {
setParentIdNewFolder(folderId)
openDialogRequest()
}
const handleNewFileWOParent = () => {
setParentIdNewFolder(0)
openDialogRequest()
}
const renderShowDokumen = (file) => {
let arrayFile = file.split(".")
let length = arrayFile.length
length = length - 1
const fileExt = arrayFile[length];
if (fileExt == "pdf" || fileExt == "png" || fileExt == "jpg" || fileExt == "jpeg" || fileExt == "gif") {
return (
<Tooltip title="View Document">
<Button size={"sm"} color='info' style={{ color: "#FFFFFF" }} onClick={() => handleShow(file)}><i className="fa fa-eye"></i></Button>
</Tooltip>
)
}
}
const RenderTable = useMemo(() => {
const columns = [
{
title: 'Action',
dataIndex: '',
key: 'id',
className: "nowrap",
render: (text, record) =>
<>
{!record.isDir && <Tooltip title="Delete Document">
<Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
</Tooltip>}{" "}
{record.isDir && <Tooltip title="Delete Folder">
<Button size={"sm"} color='danger' onClick={() => handleDeleteFolder(text.id)}><i className="fa fa-trash"></i></Button>
</Tooltip>}{" "}
{!record.isDir && <Tooltip title="Download Document">
<Button size={"sm"} color='primary' onClick={() => handleDownload(text.id, text.file)}><i className="fa fa-download"></i></Button>
</Tooltip>}{" "}
{record.isDir && <Tooltip title="New Folder">
<Button size="sm" color="success" onClick={() => handleNewFolderParent(record.id)}><i className="fa fa-folder"></i></Button>
</Tooltip>}{" "}
{record.isDir && <Tooltip title="New File">
<Button size="sm" color="primary" onClick={() => handleNewFileParent(record.id)}><i className="fa fa-file"></i></Button>
</Tooltip>}{" "}
{text.file ? renderShowDokumen(text.file) : ""}
</>
,
},
{ title: 'Document Name', dataIndex: 'name_folder', key: 'name_folder', render: (text, record) => record.isDir ? record.name_folder : record.file },
{ title: 'Type', dataIndex: 'isDir', key: 'isDir', render: (text, record) => record.isDir ? 'Folder' : 'File' },
{ title: 'Upload Date', dataIndex: 'created_at', key: 'created_at', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) }
];
return (
<Table
size="small"
columns={columns}
rowKey={"id"}
dataSource={dataDocument}
pagination={{ position: ["bottomLeft"] }}
/>
)
}, [dataDocument])
const closeDialogReq = (type) => {
if (type == "upload") {
getDataDocument();
}
setOpenDialogReq(false);
}
const toggleDialogReq = () => {
setOpenDialogReq(!openDialogReq)
}
const openDialogRequest = () => {
setOpenDialogReq(true)
}
const cancelDelete = () => {
setAlertDelete(false)
setIdDelete(0)
}
const cancelDeleteFolder = () => {
setAlertDeleteFolder(false)
setIdDelete(0)
}
const onConfirmDelete = async () => {
let urlDel = DOCUMENT_DELETE(idDelete)
const result = await axios.delete(urlDel, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataDocument()
setIdDelete(0)
setAlertDelete(false)
NotificationManager.success(`Dokumen project berhasil dihapus`, 'Success!!');
} else {
setIdDelete(0)
setAlertDelete(false)
NotificationManager.error(`Dokumen project gagal dihapus`, 'Failed!!');
}
}
const onConfirmDeleteFolder = async () => {
let urlDel = FOLDER_DOCUMENT_PROYEK_DELETE(idDelete)
const result = await axios.delete(urlDel, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataDocument()
setIdDelete(0)
setAlertDeleteFolder(false)
NotificationManager.success(`Folder berhasil dihapus`, 'Success!!');
} else {
setIdDelete(0)
setAlertDeleteFolder(false)
NotificationManager.error(`Folder gagal dihapus`, 'Failed!!');
}
}
const closeDialogNewFolder = (type) => {
if (type == "upload") {
getDataDocument();
}
setOpenDialogNewFolder(false);
setParentIdNewFolder(0);
}
const toggleDialogNewFolder = () => {
setOpenDialogNewFolder(!openDialogNewFolder)
}
return (
<>
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
<div>Project Documents - {proyekName} </div>
{/* <Button onClick={openDialogRequest} size='sm' color="primary"><i className='fa fa-plus'></i></Button> */}
{/* <Popover placement="bottom" title="Add" content={popupAddDoc()} trigger="click">
<Button size='sm' color="primary"><i className='fa fa-plus'></i></Button>
</Popover> */}
<div>
<Tooltip title="New Folder">
<Button size="sm" color="success" onClick={handleNewFolderWOParent}><i className="fa fa-folder"></i></Button>
</Tooltip>
<span style={{ marginLeft: 5, marginRight: 5 }}></span>
<Tooltip title="New File">
<Button size="sm" color="primary" onClick={handleNewFileWOParent}><i className="fa fa-file"></i></Button>
</Tooltip>
</div>
{/* <Button onClick={openDialogRequest} size='sm' color="primary"><i className='fa fa-folder'></i></Button> */}
</ModalHeader>
<ModalBody>
<Spin tip="Loading..." spinning={loading}>
<div style={{ width: '100%', overflow: "auto" }}>
{RenderTable}
</div>
</Spin>
</ModalBody>
{/* <ModalFooter>
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
</ModalFooter> */}
</Modal>
<NotificationContainer />
<SweetAlert
show={alertDelete}
warning
showCancel
confirmBtnText="Delete"
confirmBtnBsStyle="danger"
title={`Are you sure?`}
onConfirm={onConfirmDelete}
onCancel={() => cancelDelete()}
focusCancelBtn
>
Delete this data
</SweetAlert>
<SweetAlert
show={alertDeleteFolder}
warning
showCancel
confirmBtnText="Delete"
confirmBtnBsStyle="danger"
title={`Are you sure?`}
onConfirm={onConfirmDeleteFolder}
onCancel={() => cancelDeleteFolder()}
focusCancelBtn
>
Delete this folder
</SweetAlert>
<DialogRequest
openDialog={openDialogReq}
closeDialog={closeDialogReq}
toggleDialog={toggleDialogReq}
idTask={idTask}
parentIdNewFolder={parentIdNewFolder}
dataEdit={dataEdit}
/>
<DialogRequestFolder
openDialog={openDialogNewFolder}
closeDialog={closeDialogNewFolder}
toggleDialog={toggleDialogNewFolder}
idTask={idTask}
parentIdNewFolder={parentIdNewFolder}
dataEdit={dataEdit}
/>
</>
)
}
export default DialogDocument;

Loading…
Cancel
Save