report analysis no sum

src/views/SimproV2/CreatedProyek/ReportAnalysis.js

@@ -1,25 +1,142 @@
-import React, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody, Table } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody } from 'reactstrap';
 import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col, Input } from 'reactstrap';
 import { Button } from 'reactstrap';
+import axios from "../../../const/interceptorApi";
+import {
+  NotificationManager,
+} from "react-notifications";
+import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst";
 import 'antd/dist/antd.css';
 import './style.css'
-
+import { Select, Table } from 'antd';
+const { Option } = Select
 
 const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog }) => {
+  const token = localStorage.getItem("token");
   const [activeTab, setActiveTab] = useState('1');
   const [search, setSearch] = useState('');
+  const [dataTable, setDatatable] = useState([]);
+  const [dataTableActivityToHr, setDataTableActivityToHr] = useState([]);
+  const [hrList, setHrList] = useState([]);
+  const [selectedHr, setSelectedHr] = useState(null);
+
   const toggle = (tab) => {
     if (activeTab !== tab) {
       setActiveTab(tab);
     }
   };
 
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  };
+
+  const columns = [
+    {title: "Activity Name", dataIndex: "name", key: "name"}
+  ]
+
+  const columnActivityToHr = [
+    {title: "Activity Name", dataIndex: "join_first_name", key: "join_first_name"}
+  ]
+
+  useEffect(() => {
+    if (search) {
+      getDataActivity()
+    }
+  }, [search]);
+
+  useEffect(() => {
+    if (selectedHr) {
+      getDataActivityToHr()
+    }
+  }, [selectedHr]);
+
+  useEffect(() => {
+    getDataHr()
+  }, []);
+
   const handleSearch = (e) => {
     const value = e.target.value;
     setSearch(value);
   };
 
+  const getDataHr = async () => {
+    const result = await axios
+      .get(`${BASE_SIMPRO_LUMEN}/human-resource/list`, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data || [];
+      setHrList(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  }
+  const getDataActivityToHr = async () => {
+    const payload = {
+      columns: [
+        {
+          name: "user_id",
+          logic_operator: "=",
+          value: selectedHr,
+          operator: "AND",
+        },
+      ],
+      joins: [
+        {
+          name: "m_activity",
+          column_join: "activity_id",
+          column_results: ["name"]
+        }
+      ],
+      orders: { columns: ["id"], ascending: false },
+      paging: { start: 0, length: -1 },
+    };
+
+    const result = await axios
+      .post(`${BASE_SIMPRO_LUMEN}/user-to-activity/search-analysis`, payload, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data || [];
+      setDataTableActivityToHr(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+  const getDataActivity = async () => {
+    const payload = {
+      columns: [
+        {
+          name: "name",
+          logic_operator: "ilike",
+          value: search,
+          operator: "AND",
+        },
+      ],
+      orders: { columns: ["id"], ascending: false },
+      paging: { start: 0, length: -1 },
+    };
+
+    const result = await axios
+      .post(`${BASE_SIMPRO_LUMEN}/activity/search`, payload, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data || [];
+
+      setDatatable(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
   return (
     <>
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
@@ -55,6 +172,8 @@ import './style.css'
                     <Row>
                       <Col>
                         <Input
+                          onChange={handleSearch}
+                          value={search}
                           type="text"
                           name="search"
                           id="search"
@@ -70,36 +189,13 @@ import './style.css'
                         Hello World
                       </h1>
                     </div>
-                    <Table>
+                      <Table
-                      <thead>
+                        size="small"
-                        <tr>
+                        columns={columns}
-                          <th>#</th>
+                        dataSource={dataTable}
-                          <th>First Name</th>
+                        pagination={false}
-                          <th>Last Name</th>
+                        rowKey={"id"}
-                          <th>Username</th>
+                      />
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <th scope="row">1</th>
-                          <td>Mark</td>
-                          <td>Otto</td>
-                          <td>@mdo</td>
-                        </tr>
-                        <tr>
-                          <th scope="row">2</th>
-                          <td>Jacob</td>
-                          <td>Thornton</td>
-                          <td>@fat</td>
-                        </tr>
-                        <tr>
-                          <th scope="row">3</th>
-                          <td>Larry</td>
-                          <td>the Bird</td>
-                          <td>@twitter</td>
-                        </tr>
-                      </tbody>
-                    </Table>
                   </CardBody>
                 </Card>
               </TabPane>
@@ -108,13 +204,13 @@ import './style.css'
                   <CardHeader>
                     <Row>
                       <Col>
-                        <Input type="select" name="select" id="exampleSelect" style={{ width: 200 }}>
+                        <Select showSearch value={selectedHr} onChange={(val) => setSelectedHr(val)} placeholder="Select Human Resource" filterOption={(input, option) =>
-                          <option>1</option>
+                          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                          <option>2</option>
+                        } style={{ width: '100%' }}>
-                          <option>3</option>
+                            {hrList && hrList.map(res => (
-                          <option>4</option>
+                            <Option key={res.id} value={res.id}>{`${res.name}`}</Option>
-                          <option>5</option>
+                            ))}
-                        </Input>
+                        </Select>
                       </Col>
                     </Row>
                   </CardHeader>
@@ -124,36 +220,13 @@ import './style.css'
                         Hello World
                       </h1>
                     </div>
-                    <Table>
+                      <Table
-                      <thead>
+                        size="small"
-                        <tr>
+                        columns={columnActivityToHr}
-                          <th>#</th>
+                        dataSource={dataTableActivityToHr}
-                          <th>First Name</th>
+                        pagination={false}
-                          <th>Last Name</th>
+                        rowKey={"id"}
-                          <th>Username</th>
+                      />
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <th scope="row">1</th>
-                          <td>Mark</td>
-                          <td>Otto</td>
-                          <td>@mdo</td>
-                        </tr>
-                        <tr>
-                          <th scope="row">2</th>
-                          <td>Jacob</td>
-                          <td>Thornton</td>
-                          <td>@fat</td>
-                        </tr>
-                        <tr>
-                          <th scope="row">3</th>
-                          <td>Larry</td>
-                          <td>the Bird</td>
-                          <td>@twitter</td>
-                        </tr>
-                      </tbody>
-                    </Table>
                   </CardBody>
                 </Card>
               </TabPane>