project phase export, search, download document

src/views/Master/ProjectPhase/index.js

@@ -6,7 +6,7 @@ import axios from "../../../const/interceptorApi"
 import moment from 'moment'
 import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { PROJECT_PHASE_ADD, PROJECT_PHASE_EDIT, PROJECT_PHASE_DELETE, PROJECT_PHASE_SEARCH, BASE_OSPRO } from '../../../const/ApiConst';
+import { PROJECT_PHASE_ADD, PROJECT_PHASE_EDIT, PROJECT_PHASE_DELETE, PROJECT_PHASE_SEARCH, PROJECT_PHASE_LIST, BASE_OSPRO } from '../../../const/ApiConst';
 import { Pagination, Button, Tooltip, Table } from 'antd';
 
 const token = window.localStorage.getItem('token');
@@ -40,6 +40,7 @@ const ProjectPhase = ({ params }) => {
   const [clickOpenModal, setClickOpenModal] = useState(false)
   const [currentPage, setCurrentPage] = useState(1)
   const [dataEdit, setDataEdit] = useState([])
+  const [dataExport, setDataExport] = useState([])
   const [dataTable, setDatatable] = useState([])
   const [idDelete, setIdDelete] = useState(0)
   const [idPhaseProject, setIdPhaseProject] = useState(0)
@@ -54,17 +55,23 @@ const ProjectPhase = ({ params }) => {
     getDataProjectPhase()
   }, [currentPage, rowsPerPage, search])
 
+  useEffect(() => {
+    const cekData = dataExport || []
+    if (cekData.length > 0) {
+      exportExcel()
+    }
+  }, [dataExport])
+
   const getDataProjectPhase = async () => {
     let start = 0;
     if (currentPage !== 1 && currentPage > 1) {
       start = (currentPage * rowsPerPage) - rowsPerPage
     }
-
     const payload = {
       "columns": [
         {
           "name": "name",
-          "logic_operator": "like",
+          "logic_operator": "ilike",
           "value": search,
           "operator": "AND"
         }
@@ -80,18 +87,16 @@ const ProjectPhase = ({ params }) => {
         "start": start
       }
     }
-
-    /*const result = await axios
-      .post(PROJECT_PHASE_SEARCH, payload, config)
-      .then(res => res)
-      .catch((error) => error.response);*/
-    //const result = await axios.post(PROJECT_PHASE_SEARCH, payload, HEADER).then(res => res).catch(err => err.response)
-
-    const URL = `${BASE_OSPRO}/api/project-phase/list`
-    const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
-    console.log(result)
+    // let url = `${BASE_OSPRO}/api/project-phase/list?start=${start}&length=${rowsPerPage}&orderby=id&asc=false&column=name&logic=ilike&value=${search}`
+    const result = await axios
+      .post(PROJECT_PHASE_SEARCH, payload, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
 
     if (result && result.data && result.data.code == 200) {
+      result.data.data.map((res) => {
+        res.key = res.id.toString()
+      });
       setDatatable(result.data.data);
       setTotalPage(result.data.totalRecord);
     } else {
@@ -104,7 +109,6 @@ const ProjectPhase = ({ params }) => {
     setSearch(value);
     setCurrentPage(1)
   };
-
   const handleOpenDialog = (type) => {
     setOpenDialog(true)
     setTypeDialog(type)
@@ -113,19 +117,59 @@ const ProjectPhase = ({ params }) => {
   const handleExportExcel = async () => {
     let start = 0;
 
+    if (currentPage !== 1 && currentPage > 1) {
+      start = (currentPage * rowsPerPage) - rowsPerPage
+    }
+
     const payload = {
-      "paging": { "start": start, "length": -1 },
       "columns": [
-        { "name": "name", "logic_operator": "ilike", "value": search, "operator": "AND" }
+        {
+          "name": "name",
+          "logic_operator": "like",
+          "value": search,
+          "operator": "AND"
+        }
       ],
-      "joins": [],
-      "orders": { "columns": ["id"], "ascending": false }
+      "orders": {
+        "ascending": true,
+        "columns": [
+          'id'
+        ]
+      },
+      "paging": {
+        "length": rowsPerPage,
+        "start": start
+      }
     }
 
     const result = await axios
-      .post(PROJECT_PHASE_SEARCH, payload)
+      .post(PROJECT_PHASE_SEARCH, payload, HEADER)
       .then(res => res)
       .catch((error) => error.response);
+    if (result && result.data && result.data.code == 200) {
+      let resData = result.data.data;
+      const excelData = [];
+      resData.map((val, index) => {
+        let dataRow = {
+          "Nama": val.name,
+          "Color": val.color,
+        }
+        excelData.push(dataRow)
+      })
+      await setDataExport(excelData)
+    } else {
+      NotificationManager.error('Gagal Export Data!!', 'Failed');
+    }
+  }
+
+  const exportExcel = () => {
+    const dataExcel = dataExport || [];
+    const fileName = `Data ${pageName}.xlsx`;
+    const ws = XLSX.utils.json_to_sheet(dataExcel);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`);
+    XLSX.writeFile(wb, fileName);
+    setDataExport([])
   }
 
   const handleEdit = (data) => {
@@ -309,10 +353,16 @@ const ProjectPhase = ({ params }) => {
         <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
           <h4 className="capitalize">{pageName}</h4>
           <Row>
+            <Col>
+              <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Cari Fase`} />
+            </Col>
             <Col>
               <Tooltip title="Add new data">
                 <Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
               </Tooltip>
+              <Tooltip title="Export Excel">
+                <Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
+              </Tooltip>
             </Col>
           </Row>
         </CardHeader>

src/views/SimproV2/CreatedProyek/DialogDocument.js

@@ -82,8 +82,24 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
   }
 
   const handleDownload = (id) => {
-    const urlDownload = DOCUMENT_DOWNLOAD(id);
-    window.open(urlDownload);
+    fetch(DOCUMENT_DOWNLOAD(id), {
+      headers: new Headers({
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+      })
+    })
+      .then(response => {
+        response.blob().then(blob => {
+          let url = window.URL.createObjectURL(blob);
+          let a = document.createElement('a');
+          a.href = url;
+          a.download = 'Project Documents';
+          a.click();
+        });
+        //window.location.href = response.url;
+      });
+    // const urlDownload = DOCUMENT_DOWNLOAD(id);
+    // window.open(urlDownload);
   }
 
   const handleShow = (file) => {