From cd29f3de52e0497d171b7587dee3826cf61d3899 Mon Sep 17 00:00:00 2001 From: wahyuun Date: Wed, 8 Nov 2023 22:11:32 +0700 Subject: [PATCH] add loader --- .../SimproV2/CreatedProyek/DialogDocument.js | 687 +++++++++--------- 1 file changed, 346 insertions(+), 341 deletions(-) diff --git a/src/views/SimproV2/CreatedProyek/DialogDocument.js b/src/views/SimproV2/CreatedProyek/DialogDocument.js index 6a70a96..a7923e7 100644 --- a/src/views/SimproV2/CreatedProyek/DialogDocument.js +++ b/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 ( - - - - ) - } - } - const RenderTable = useMemo(() => { - const columns = [ - { - title: 'Action', - dataIndex: '', - key: 'id', - className: "nowrap", - render: (text, record) => - <> - {!record.isDir && - - }{" "} - {record.isDir && - - }{" "} - {!record.isDir && - - }{" "} - {record.isDir && - - }{" "} - {record.isDir && - - }{" "} - {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) => (
{text ? moment(text).format("D-M-YYYY") : "-"}
) } - ]; - - return ( - - ) - }, [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 ( - <> - - -
Project Documents - {proyekName}
- {/* */} - {/* - - */} -
- - - - - - - -
- {/* */} - - -
- {RenderTable} -
- - {/* - - */} - - - cancelDelete()} - focusCancelBtn - > - Delete this data - - - cancelDeleteFolder()} - focusCancelBtn - > - Delete this folder - - - - - - - ) - -} - -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 ( + + + + ) + } + } + const RenderTable = useMemo(() => { + const columns = [ + { + title: 'Action', + dataIndex: '', + key: 'id', + className: "nowrap", + render: (text, record) => + <> + {!record.isDir && + + }{" "} + {record.isDir && + + }{" "} + {!record.isDir && + + }{" "} + {record.isDir && + + }{" "} + {record.isDir && + + }{" "} + {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) => (
{text ? moment(text).format("D-M-YYYY") : "-"}
) } + ]; + + return ( +
+ ) + }, [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 ( + <> + + +
Project Documents - {proyekName}
+ {/* */} + {/* + + */} +
+ + + + + + + +
+ {/* */} + + + +
+ {RenderTable} +
+ + + {/* + + */} + + + cancelDelete()} + focusCancelBtn + > + Delete this data + + + cancelDeleteFolder()} + focusCancelBtn + > + Delete this folder + + + + + + + ) + +} + +export default DialogDocument;