|
|
|
@ -1,25 +1,142 @@
|
|
|
|
|
import React, {useState} from 'react' |
|
|
|
|
import { Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody, Table } from 'reactstrap'; |
|
|
|
|
import React, {useState, useEffect} from 'react' |
|
|
|
|
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> |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
<th>#</th> |
|
|
|
|
<th>First Name</th> |
|
|
|
|
<th>Last Name</th> |
|
|
|
|
<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> |
|
|
|
|
<Table |
|
|
|
|
size="small" |
|
|
|
|
columns={columns} |
|
|
|
|
dataSource={dataTable} |
|
|
|
|
pagination={false} |
|
|
|
|
rowKey={"id"} |
|
|
|
|
/> |
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
</TabPane> |
|
|
|
@ -108,13 +204,13 @@ import './style.css'
|
|
|
|
|
<CardHeader> |
|
|
|
|
<Row> |
|
|
|
|
<Col> |
|
|
|
|
<Input type="select" name="select" id="exampleSelect" style={{ width: 200 }}> |
|
|
|
|
<option>1</option> |
|
|
|
|
<option>2</option> |
|
|
|
|
<option>3</option> |
|
|
|
|
<option>4</option> |
|
|
|
|
<option>5</option> |
|
|
|
|
</Input> |
|
|
|
|
<Select showSearch value={selectedHr} onChange={(val) => setSelectedHr(val)} placeholder="Select Human Resource" filterOption={(input, option) => |
|
|
|
|
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 |
|
|
|
|
} style={{ width: '100%' }}> |
|
|
|
|
{hrList && hrList.map(res => ( |
|
|
|
|
<Option key={res.id} value={res.id}>{`${res.name}`}</Option> |
|
|
|
|
))} |
|
|
|
|
</Select> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</CardHeader> |
|
|
|
@ -124,36 +220,13 @@ import './style.css'
|
|
|
|
|
Hello World |
|
|
|
|
</h1> |
|
|
|
|
</div> |
|
|
|
|
<Table> |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
<th>#</th> |
|
|
|
|
<th>First Name</th> |
|
|
|
|
<th>Last Name</th> |
|
|
|
|
<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> |
|
|
|
|
<Table |
|
|
|
|
size="small" |
|
|
|
|
columns={columnActivityToHr} |
|
|
|
|
dataSource={dataTableActivityToHr} |
|
|
|
|
pagination={false} |
|
|
|
|
rowKey={"id"} |
|
|
|
|
/> |
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
</TabPane> |
|
|
|
|