|
|
|
@ -1,12 +1,12 @@
|
|
|
|
|
import * as XLSX from 'xlsx'; |
|
|
|
|
import DialogForm from './DialogForm'; |
|
|
|
|
import React, { useState, useEffect } from 'react'; |
|
|
|
|
import React, { useState, useEffect, useMemo } from 'react'; |
|
|
|
|
import SweetAlert from 'react-bootstrap-sweetalert'; |
|
|
|
|
import axios from "../../../const/interceptorApi" |
|
|
|
|
import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap'; |
|
|
|
|
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; |
|
|
|
|
import { DIVISI_LIST, DIVISI_ADD, DIVISI_EDIT, DIVISI_DELETE, DIVISI_SEARCH, COMPANY_MANAGEMENT_LIST } from '../../../const/ApiConst'; |
|
|
|
|
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
|
|
|
import { Pagination, Button, Tooltip } from 'antd'; |
|
|
|
|
import { Pagination, Button, Tooltip, Table, Spin } from 'antd'; |
|
|
|
|
import { useTranslation } from 'react-i18next'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -48,6 +48,7 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
const [typeDialog, setTypeDialog] = useState('Save') |
|
|
|
|
const [dataDivisions, setDataDivisions] = useState([]) |
|
|
|
|
const [listCompany, setListCompany] = useState([]) |
|
|
|
|
const [loading, setLoading] = useState(true) |
|
|
|
|
const { t } = useTranslation() |
|
|
|
|
const column = [ |
|
|
|
|
role_name === 'Super Admin' ? { name: t('company') } : null, |
|
|
|
@ -56,7 +57,7 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
{ name: t('color') }, |
|
|
|
|
].filter(column => column && column.name); |
|
|
|
|
useEffect(() => { |
|
|
|
|
getDataProjectType(); |
|
|
|
|
getDataDivisi(); |
|
|
|
|
}, [currentPage, rowsPerPage, search]) |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
@ -93,20 +94,19 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
columns: [], |
|
|
|
|
"columns": [], |
|
|
|
|
"orders": { |
|
|
|
|
"ascending": true, |
|
|
|
|
"columns": [ |
|
|
|
|
'name' |
|
|
|
|
'id' |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
"paging": { |
|
|
|
|
"length": 0, |
|
|
|
|
"start": -1 |
|
|
|
|
"length": -1, |
|
|
|
|
"start": 0 |
|
|
|
|
}, |
|
|
|
|
'joins': [] |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (role_name !== "Super Admin") { |
|
|
|
|
payload.columns.push( |
|
|
|
|
{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" }, |
|
|
|
@ -122,6 +122,7 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
{ name: "company_name", logic_operator: "~*", value: search, table_name: "m_company" } |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const listDivions = await axios |
|
|
|
|
.post(DIVISI_SEARCH, payload, HEADER) |
|
|
|
|
.then(res => res) |
|
|
|
@ -139,7 +140,7 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const getDataProjectType = async () => { |
|
|
|
|
const getDataDivisi = async () => { |
|
|
|
|
let start = 0; |
|
|
|
|
if (currentPage !== 1 && currentPage > 1) { |
|
|
|
|
start = currentPage * rowsPerPage - rowsPerPage; |
|
|
|
@ -156,11 +157,11 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
columns: [], |
|
|
|
|
"columns": [], |
|
|
|
|
"orders": { |
|
|
|
|
"ascending": true, |
|
|
|
|
"columns": [ |
|
|
|
|
'name' |
|
|
|
|
'id' |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
"paging": { |
|
|
|
@ -169,7 +170,6 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
}, |
|
|
|
|
'joins': [] |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (role_name !== "Super Admin") { |
|
|
|
|
payload.columns.push( |
|
|
|
|
{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" }, |
|
|
|
@ -185,6 +185,7 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
{ name: "company_name", logic_operator: "~*", value: search, table_name: "m_company" } |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const result = await axios |
|
|
|
|
.post(DIVISI_SEARCH, payload, HEADER) |
|
|
|
|
.then(res => res) |
|
|
|
@ -194,8 +195,10 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
let dataRes = result.data.data || []; |
|
|
|
|
setDatatable(dataRes); |
|
|
|
|
setTotalPage(result.data.totalRecord); |
|
|
|
|
setLoading(false) |
|
|
|
|
} else { |
|
|
|
|
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
|
|
|
|
setLoading(false) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const handleExportExcel = async () => { |
|
|
|
@ -315,7 +318,7 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
.then(res => res) |
|
|
|
|
.catch((error) => error.response); |
|
|
|
|
if (result && result.data && result.data.code === 200) { |
|
|
|
|
getDataProjectType() |
|
|
|
|
getDataDivisi() |
|
|
|
|
NotificationManager.success(`Data berhasil ditambahkan`, 'Success!!'); |
|
|
|
|
} else { |
|
|
|
|
NotificationManager.error(`Data gagal ditambahkan`, 'Failed!!'); |
|
|
|
@ -329,7 +332,7 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
.then(res => res) |
|
|
|
|
.catch((error) => error.response); |
|
|
|
|
if (result && result.data && result.data.code === 200) { |
|
|
|
|
getDataProjectType(); |
|
|
|
|
getDataDivisi(); |
|
|
|
|
NotificationManager.success(`Data berhasil diubah`, 'Success!!'); |
|
|
|
|
} else { |
|
|
|
|
NotificationManager.error(`Data gagal diubah`, `Failed!!`); |
|
|
|
@ -347,7 +350,7 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
.catch((error) => error.response); |
|
|
|
|
|
|
|
|
|
if (result && result.data && result.data.code === 200) { |
|
|
|
|
getDataProjectType() |
|
|
|
|
getDataDivisi() |
|
|
|
|
setIdDelete(0) |
|
|
|
|
setAlertDelete(false) |
|
|
|
|
NotificationManager.success(`Data berhasil dihapus!`, 'Success!!'); |
|
|
|
@ -381,6 +384,95 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleAddChild = (data) => { |
|
|
|
|
setDataEdit(data) |
|
|
|
|
handleOpenDialog('addChild'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const renderTable = useMemo(() => { |
|
|
|
|
const columns = [ |
|
|
|
|
{ |
|
|
|
|
title: 'Action', |
|
|
|
|
dataIndex: '', |
|
|
|
|
key: 'id', |
|
|
|
|
className: "nowrap", |
|
|
|
|
render: (text, record) => |
|
|
|
|
<> |
|
|
|
|
<Tooltip title="Hapus"> |
|
|
|
|
<i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i> |
|
|
|
|
</Tooltip> |
|
|
|
|
<Tooltip title="Add"> |
|
|
|
|
<i id="TooltipEdit" className="cil-level-down fa-sm" style={{ color: 'blue', marginRight: 10, cursor: "pointer" }} onClick={() => handleAddChild(text)}></i> |
|
|
|
|
</Tooltip> |
|
|
|
|
<Tooltip title="Edit"> |
|
|
|
|
<i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i> |
|
|
|
|
</Tooltip> |
|
|
|
|
</> |
|
|
|
|
, |
|
|
|
|
}, |
|
|
|
|
...(role_name === 'Super Admin' ? [ |
|
|
|
|
{ |
|
|
|
|
title: t('company'), |
|
|
|
|
dataIndex: "join_first_company_name", |
|
|
|
|
key: "join_first_company_name", |
|
|
|
|
render: (text, record) => ( |
|
|
|
|
<span>{record.join_first_company_name}</span> |
|
|
|
|
) |
|
|
|
|
}] : []), |
|
|
|
|
{ title: 'Nama', dataIndex: 'name', key: 'name' }, |
|
|
|
|
{ title: 'Nama', dataIndex: 'name', key: 'name' }, |
|
|
|
|
{ title: 'Deskripsi', dataIndex: 'description', key: 'description' }, |
|
|
|
|
{ |
|
|
|
|
title: 'Color', |
|
|
|
|
dataIndex: 'color', |
|
|
|
|
key: 'color', |
|
|
|
|
render: (text) => { |
|
|
|
|
if (text != null) { |
|
|
|
|
return ( |
|
|
|
|
<Tooltip title={text}> |
|
|
|
|
<span className="fa fa-square" style={{ color: text }}></span> |
|
|
|
|
</Tooltip> |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
return ( |
|
|
|
|
<small style={{ color: "grey", fontStyle: "italic" }}>No color set</small> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
|
|
|
|
<Spin tip="Loading..." spinning={loading}> |
|
|
|
|
<Table |
|
|
|
|
size="small" |
|
|
|
|
columns={columns} |
|
|
|
|
expandable={{ |
|
|
|
|
expandIcon: ({ expanded, onExpand, record }) => |
|
|
|
|
record.children && record.children.length > 0 ? |
|
|
|
|
expanded ? ( |
|
|
|
|
<Tooltip title="Add"> |
|
|
|
|
<i id="TooltipEdit" className="fa fa-chevron-down fa-sm" style={{ color: 'grey', marginRight: 10, cursor: "pointer" }} onClick={e => onExpand(record, e)}></i> |
|
|
|
|
</Tooltip> |
|
|
|
|
) : ( |
|
|
|
|
<i id="TooltipEdit" className="fa fa-chevron-right fa-sm" style={{ color: 'grey', marginRight: 10, cursor: "pointer" }} onClick={e => onExpand(record, e)}></i> |
|
|
|
|
|
|
|
|
|
) |
|
|
|
|
: ( |
|
|
|
|
<i id="TooltipEdit" className="fa fa-chevron-right fa-sm" style={{ color: 'white', marginRight: 10, cursor: "pointer" }} onClick={e => onExpand(record, e)}></i> |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
}} |
|
|
|
|
dataSource={dataTable} |
|
|
|
|
pagination={false} |
|
|
|
|
> |
|
|
|
|
</Table> |
|
|
|
|
</Spin> |
|
|
|
|
) |
|
|
|
|
}, [dataTable, loading]) |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div> |
|
|
|
|
<NotificationContainer /> |
|
|
|
@ -428,51 +520,17 @@ const ProjectType = ({ params, ...props }) => {
|
|
|
|
|
</Row> |
|
|
|
|
</CardHeader> |
|
|
|
|
<CardBody> |
|
|
|
|
<Table responsive striped hover> |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
<th>Aksi</th> |
|
|
|
|
{column.map((i, index) => { |
|
|
|
|
return ( |
|
|
|
|
<th key={index} scope="row">{i.name}</th> |
|
|
|
|
) |
|
|
|
|
})} |
|
|
|
|
</tr> |
|
|
|
|
</thead> |
|
|
|
|
<tbody> |
|
|
|
|
{dataNotAvailable()} |
|
|
|
|
{dataTable.map((n, index) => { |
|
|
|
|
return ( |
|
|
|
|
<tr key={n.id}> |
|
|
|
|
<td className='nowrap'> |
|
|
|
|
<Tooltip title={t('delete')}> |
|
|
|
|
<i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(n.id)}></i> |
|
|
|
|
</Tooltip> |
|
|
|
|
<Tooltip title={t('edit')}> |
|
|
|
|
<i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(n)}></i> |
|
|
|
|
</Tooltip> |
|
|
|
|
</td> |
|
|
|
|
{role_name === 'Super Admin' && |
|
|
|
|
( |
|
|
|
|
<td>{n.join_first_company_name}</td> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
<td>{n.name}</td> |
|
|
|
|
<td>{n.description ?? '-'}</td> |
|
|
|
|
{n.color != null ? ( |
|
|
|
|
<td> |
|
|
|
|
<Tooltip title={n.color}> |
|
|
|
|
<span className="fa fa-square" style={{ color: n.color }}></span> |
|
|
|
|
</Tooltip> |
|
|
|
|
</td> |
|
|
|
|
) : ( |
|
|
|
|
<td><small style={{ color: "grey", fontStyle: "italic" }}>No color set</small></td> |
|
|
|
|
)} |
|
|
|
|
</tr> |
|
|
|
|
) |
|
|
|
|
})} |
|
|
|
|
</tbody> |
|
|
|
|
</Table> |
|
|
|
|
{renderTable} |
|
|
|
|
<Pagination |
|
|
|
|
style={{ marginTop: "25px" }} |
|
|
|
|
showSizeChanger |
|
|
|
|
onShowSizeChange={onShowSizeChange} |
|
|
|
|
onChange={onPagination} |
|
|
|
|
current={currentPage} |
|
|
|
|
pageSize={rowsPerPage} |
|
|
|
|
total={totalPage} |
|
|
|
|
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
|
|
|
|
/> |
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
</div> |
|
|
|
|