8 changed files with 584 additions and 517 deletions
@ -1,141 +1,149 @@
|
||||
import React, { useEffect, useState } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
import { Button, Form } from 'reactstrap'; |
||||
import axios from "../../../const/interceptorApi"; |
||||
import { PROJECT_TO_CHECKLIST_K3_ADDS, PROJECT_TO_CHECKLIST_K3_SEARCH } from '../../../const/ApiConst'; |
||||
import { Transfer } from 'antd'; |
||||
import 'antd/dist/antd.css'; |
||||
|
||||
const AssignK3Project = ({ openDialog, closeDialog, toggleDialog, idTask, dataK3, proyekName }) => { |
||||
const token = localStorage.getItem("token") |
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
const [id, setId] = useState(0) |
||||
const [targetKeys, setTargetKeys] = useState([]) |
||||
|
||||
|
||||
const handleClearData = () => { |
||||
setId(0) |
||||
setTargetKeys([]) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if(!openDialog){ |
||||
handleClearData() |
||||
} |
||||
}, [openDialog]) |
||||
|
||||
useEffect(() => { |
||||
if(idTask && idTask > 0){ |
||||
getK3toProject() |
||||
} |
||||
}, [idTask]) |
||||
|
||||
const getK3toProject = async () => { |
||||
const payload = { |
||||
"columns": [ |
||||
{ "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" } |
||||
] |
||||
} |
||||
const result = await axios |
||||
.post(PROJECT_TO_CHECKLIST_K3_SEARCH, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if(result && result.status==200){ |
||||
console.log("cek get project to checklist k3",result.data.data) |
||||
let data = result.data.data || [] |
||||
let newTargetKeys = [] |
||||
if (data.length > 0) { |
||||
data.map((val,index)=> { |
||||
newTargetKeys.push(val.checklist_k3_id) |
||||
}); |
||||
} |
||||
setTargetKeys(newTargetKeys) |
||||
}else{ |
||||
|
||||
} |
||||
} |
||||
|
||||
const handleSave = async () => { |
||||
await saveAssign() |
||||
handleClearData() |
||||
} |
||||
|
||||
const saveAssign= async () => { |
||||
|
||||
const formData = { |
||||
checklist_k3_id:targetKeys, |
||||
proyek_id:idTask |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(PROJECT_TO_CHECKLIST_K3_ADDS, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
|
||||
if(result && result.status==200){ |
||||
closeDialog('success') |
||||
}else{ |
||||
closeDialog('failed') |
||||
} |
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel') |
||||
handleClearData() |
||||
} |
||||
|
||||
const handleChange = targetKeys => { |
||||
setTargetKeys(targetKeys) |
||||
}; |
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<div style={{ |
||||
alignContent: "center", |
||||
justifyContent: "center !imporant", |
||||
paddingLeft: 20, |
||||
paddingRight: 20, |
||||
overflow: "auto" |
||||
}}> |
||||
<Transfer
|
||||
showSearch |
||||
titles={['Available K3', 'Assigned to Project']} |
||||
dataSource={dataK3} |
||||
targetKeys={targetKeys} |
||||
onChange={handleChange} |
||||
render={item => item.title} |
||||
listStyle={{ |
||||
width: 250, |
||||
height: 300, |
||||
}} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<Modal size="lg" style={{maxWidth: '600px', width: '100%'}} isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>Assign K3 to Project {proyekName !== '' ? `- ${proyekName}` : ''}</ModalHeader> |
||||
<ModalBody> |
||||
{renderForm()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>Save</Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default AssignK3Project; |
||||
import React, { useEffect, useState } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
import { Button, Form } from 'reactstrap'; |
||||
import axios from "../../../const/interceptorApi"; |
||||
import { PROJECT_TO_CHECKLIST_K3_ADDS, PROJECT_TO_CHECKLIST_K3_SEARCH } from '../../../const/ApiConst'; |
||||
import { Transfer, Spin } from 'antd'; |
||||
import 'antd/dist/antd.css'; |
||||
import { NotificationManager } from 'react-notifications'; |
||||
|
||||
const AssignK3Project = ({ openDialog, closeDialog, toggleDialog, idTask, dataK3, proyekName }) => { |
||||
const token = localStorage.getItem("token") |
||||
const [loading, setLoading] = useState(true); |
||||
|
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
const [id, setId] = useState(0) |
||||
const [targetKeys, setTargetKeys] = useState([]) |
||||
|
||||
|
||||
const handleClearData = () => { |
||||
setId(0) |
||||
setTargetKeys([]) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if(!openDialog){ |
||||
handleClearData() |
||||
} |
||||
}, [openDialog]) |
||||
|
||||
useEffect(() => { |
||||
if (idTask && idTask > 0) { |
||||
setLoading(true); |
||||
getK3toProject() |
||||
} |
||||
}, [idTask]) |
||||
|
||||
const getK3toProject = async () => { |
||||
const payload = { |
||||
"columns": [ |
||||
{ "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" } |
||||
] |
||||
} |
||||
const result = await axios |
||||
.post(PROJECT_TO_CHECKLIST_K3_SEARCH, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if(result && result.status==200){ |
||||
console.log("cek get project to checklist k3",result.data.data) |
||||
let data = result.data.data || [] |
||||
let newTargetKeys = [] |
||||
if (data.length > 0) { |
||||
data.map((val,index)=> { |
||||
newTargetKeys.push(val.checklist_k3_id) |
||||
}); |
||||
} |
||||
setTargetKeys(newTargetKeys) |
||||
setLoading(false); |
||||
}else{ |
||||
setLoading(false); |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const handleSave = async () => { |
||||
await saveAssign() |
||||
handleClearData() |
||||
} |
||||
|
||||
const saveAssign= async () => { |
||||
|
||||
const formData = { |
||||
checklist_k3_id:targetKeys, |
||||
proyek_id:idTask |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(PROJECT_TO_CHECKLIST_K3_ADDS, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
|
||||
if(result && result.status==200){ |
||||
closeDialog('success') |
||||
}else{ |
||||
closeDialog('failed') |
||||
} |
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel') |
||||
handleClearData() |
||||
} |
||||
|
||||
const handleChange = targetKeys => { |
||||
setTargetKeys(targetKeys) |
||||
}; |
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<div style={{ |
||||
alignContent: "center", |
||||
justifyContent: "center !imporant", |
||||
paddingLeft: 20, |
||||
paddingRight: 20, |
||||
overflow: "auto" |
||||
}}> |
||||
<Transfer |
||||
showSearch |
||||
titles={['Available K3', 'Assigned to Project']} |
||||
dataSource={dataK3} |
||||
targetKeys={targetKeys} |
||||
onChange={handleChange} |
||||
render={item => item.title} |
||||
listStyle={{ |
||||
width: 250, |
||||
height: 300, |
||||
}} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<Modal size="lg" style={{maxWidth: '600px', width: '100%'}} isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>Assign K3 to Project {proyekName !== '' ? `- ${proyekName}` : ''}</ModalHeader> |
||||
<ModalBody> |
||||
<Spin tip="Loading..." spinning={loading}> |
||||
{renderForm()} |
||||
</Spin> |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>Save</Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default AssignK3Project; |
||||
|
||||
@ -1,341 +1,347 @@
|
||||
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) { |
||||
setLoading(true); |
||||
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…
Reference in new issue