22 changed files with 2882 additions and 41 deletions
@ -0,0 +1,113 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
import { Select } from "antd"; |
||||||
|
import InputColor from "./InputColor"; |
||||||
|
import "./styles.css"; |
||||||
|
import "rc-color-picker/assets/index.css"; |
||||||
|
import { useTranslation } from 'react-i18next'; |
||||||
|
const company_id = localStorage.getItem("company_id") |
||||||
|
const { Option } = Select; |
||||||
|
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => { |
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [projectExpenditure, setProjectExpenditure] = useState('') |
||||||
|
const [color, setColor] = useState('') |
||||||
|
const { t } = useTranslation(); |
||||||
|
useEffect(() => { |
||||||
|
if (typeDialog === "Edit") { |
||||||
|
setId(dataEdit.id) |
||||||
|
setProjectExpenditure(dataEdit.name) |
||||||
|
setColor(dataEdit.color) |
||||||
|
} else { |
||||||
|
setId(0) |
||||||
|
setColor('') |
||||||
|
setProjectExpenditure('') |
||||||
|
} |
||||||
|
}, [dataEdit, openDialog]) |
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
if (typeDialog === "Save") { |
||||||
|
data = { |
||||||
|
name: projectExpenditure, |
||||||
|
color, |
||||||
|
company_id |
||||||
|
} |
||||||
|
closeDialog('save', data); |
||||||
|
} else { |
||||||
|
data = { |
||||||
|
id, |
||||||
|
name: projectExpenditure, |
||||||
|
color, |
||||||
|
company_id |
||||||
|
} |
||||||
|
closeDialog('edit', data); |
||||||
|
} |
||||||
|
setId(0) |
||||||
|
} |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialog('cancel', 'none') |
||||||
|
setId(0) |
||||||
|
} |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<Row> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('Project Expenditure')}</Label> |
||||||
|
<Select |
||||||
|
value={projectExpenditure} |
||||||
|
defaultValue={projectExpenditure} |
||||||
|
onChange={setProjectExpenditure} |
||||||
|
style={{ width: "100%", pointerEvents: typeDialog === 'Edit' ? 'none' : '' }} |
||||||
|
suffixIcon={typeDialog === 'Edit' ? null : <i class="fa fa-chevron-down" aria-hidden="true"></i> } |
||||||
|
> |
||||||
|
<Option key="Total Budget" value="Total Budget"> |
||||||
|
Total Budget |
||||||
|
</Option> |
||||||
|
<Option key="Expenditure" value="Expenditure"> |
||||||
|
Expenditure |
||||||
|
</Option> |
||||||
|
<Option key="Invoice" value="Invoice"> |
||||||
|
Invoice |
||||||
|
</Option> |
||||||
|
<Option key="Cash In" value="Cash In"> |
||||||
|
Cash In |
||||||
|
</Option> |
||||||
|
</Select> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('color')}</Label> |
||||||
|
<InputColor value={color} color={color} onChange={(e) => setColor(e.color)} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} data</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
{renderForm()} |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default DialogForm; |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
|
||||||
|
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, idActivity, projectTypeId }) => { |
||||||
|
|
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [activity, setActivity] = useState('') |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (typeDialog === "edit") { |
||||||
|
setId(dataEdit.id) |
||||||
|
setActivity(dataEdit.name_activity) |
||||||
|
|
||||||
|
} else { |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
}, [dataEdit, openDialog]) |
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
|
||||||
|
if (typeDialog === "add") { |
||||||
|
data = { |
||||||
|
name_activity: activity, |
||||||
|
proyek_type_id: projectTypeId |
||||||
|
} |
||||||
|
|
||||||
|
if (idActivity && idActivity > 0) { |
||||||
|
data['parent_id'] = idActivity |
||||||
|
} |
||||||
|
|
||||||
|
closeDialog('save', data); |
||||||
|
} else { |
||||||
|
data = { |
||||||
|
id, |
||||||
|
name_activity: activity, |
||||||
|
proyek_type_id: projectTypeId |
||||||
|
} |
||||||
|
|
||||||
|
if (idActivity && idActivity > 0) { |
||||||
|
data['parent_id'] = idActivity |
||||||
|
} |
||||||
|
|
||||||
|
closeDialog('edit', data); |
||||||
|
} |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialog('cancel', 'none') |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Activity</Label> |
||||||
|
<Input row="4" type="textarea" value={activity} onChange={(e) => setActivity(e.target.value)} placeholder={`Persiapan ...`} /> |
||||||
|
</FormGroup> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal isOpen={openDialog} toggle={toggleDialog}> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "add" ? `Add` : "Edit"} Activity</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
{renderForm()} |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button className='capitalize' color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogForm; |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Input from "antd/lib/input"; |
||||||
|
import Button from "antd/lib/button"; |
||||||
|
import Dropdown from "antd/lib/dropdown"; |
||||||
|
import { Panel } from 'rc-color-picker' |
||||||
|
import "antd/dist/antd.css"; |
||||||
|
import "./styles.css"; |
||||||
|
|
||||||
|
export default function InputColor(props) { |
||||||
|
const { color, onChange } = props; |
||||||
|
|
||||||
|
const [internalColor, setInternalColor] = React.useState(color); |
||||||
|
|
||||||
|
const handleChange = (color) => { |
||||||
|
setInternalColor(color.color); |
||||||
|
|
||||||
|
if (onChange) { |
||||||
|
onChange(color); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const overlay = ( |
||||||
|
<div> |
||||||
|
<Panel |
||||||
|
color={internalColor} |
||||||
|
enableAlpha={false} |
||||||
|
onChange={handleChange} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Input |
||||||
|
value={internalColor || ""} |
||||||
|
onChange={(e) => setInternalColor(e.target.value)} |
||||||
|
suffix={ |
||||||
|
<Dropdown trigger={["click"]} overlay={overlay}> |
||||||
|
<Button style={{ background: internalColor }}> </Button> |
||||||
|
</Dropdown> |
||||||
|
} |
||||||
|
/> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,392 @@ |
|||||||
|
import * as XLSX from 'xlsx'; |
||||||
|
import DialogForm from './DialogForm'; |
||||||
|
import React, { useState, useEffect, useMemo } from 'react'; |
||||||
|
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
|
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_EXPENDITURE_ADD, PROJECT_EXPENDITURE_EDIT, PROJECT_EXPENDITURE_DELETE, PROJECT_EXPENDITURE_SEARCH } from '../../../const/ApiConst'; |
||||||
|
import { Pagination, Button, Tooltip, Table } from 'antd'; |
||||||
|
import { useTranslation } from 'react-i18next'; |
||||||
|
|
||||||
|
|
||||||
|
const ProjectExpenditure = ({ params, ...props }) => { |
||||||
|
let role_id = '', user_id = '', proyek_id = '', isLogin = '', token = '', company_id = 0, role_name = ''; |
||||||
|
if (props.location.state && props.location.state.role_id && props.location.state.user_id) { |
||||||
|
role_id = props.location.state.role_id; |
||||||
|
user_id = props.location.state.user_id; |
||||||
|
token = props.location.state.token; |
||||||
|
isLogin = props.location.state.isLogin; |
||||||
|
role_name = props.location.state.role_name; |
||||||
|
} else { |
||||||
|
role_id = localStorage.getItem("role_id"); |
||||||
|
proyek_id = localStorage.getItem("proyek_id"); |
||||||
|
user_id = localStorage.getItem("user_id"); |
||||||
|
token = localStorage.getItem("token"); |
||||||
|
isLogin = localStorage.getItem("isLogin"); |
||||||
|
company_id = localStorage.getItem('company_id'); |
||||||
|
role_name = localStorage.getItem('role_name'); |
||||||
|
} |
||||||
|
|
||||||
|
const HEADER = { |
||||||
|
headers: { |
||||||
|
"Content-Type": "application/json", |
||||||
|
"Authorization": `Bearer ${token}` |
||||||
|
} |
||||||
|
} |
||||||
|
const pageName = params.name; |
||||||
|
|
||||||
|
const [alertDelete, setAlertDelete] = useState(false) |
||||||
|
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) |
||||||
|
const [openDialog, setOpenDialog] = useState(false) |
||||||
|
const [openDialogIG, setOpenDialogIG] = useState(false) |
||||||
|
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||||
|
const [search, setSearch] = useState('') |
||||||
|
const [totalPage, setTotalPage] = useState(0) |
||||||
|
const [typeDialog, setTypeDialog] = useState('Save') |
||||||
|
const { t } = useTranslation() |
||||||
|
useEffect(() => { |
||||||
|
getDataProjectExpenditure() |
||||||
|
}, [currentPage, rowsPerPage, search]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const cekData = dataExport || [] |
||||||
|
if (cekData.length > 0) { |
||||||
|
exportExcel() |
||||||
|
} |
||||||
|
}, [dataExport]) |
||||||
|
|
||||||
|
const getDataProjectExpenditure = async () => { |
||||||
|
let start = 0; |
||||||
|
if (currentPage !== 1 && currentPage > 1) { |
||||||
|
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
|
} |
||||||
|
const payload = { |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"name": "name", |
||||||
|
"logic_operator": "ilike", |
||||||
|
"value": search, |
||||||
|
"operator": "AND" |
||||||
|
} |
||||||
|
], |
||||||
|
"orders": { |
||||||
|
"ascending": true, |
||||||
|
"columns": [ |
||||||
|
'id' |
||||||
|
] |
||||||
|
}, |
||||||
|
"paging": { |
||||||
|
"length": rowsPerPage, |
||||||
|
"start": start |
||||||
|
} |
||||||
|
} |
||||||
|
if (role_name !== "Super Admin") { |
||||||
|
payload.columns.push( |
||||||
|
{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" }, |
||||||
|
) |
||||||
|
} else { |
||||||
|
payload.columns.push( |
||||||
|
{ "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" }, |
||||||
|
) |
||||||
|
} |
||||||
|
const result = await axios |
||||||
|
.post(PROJECT_EXPENDITURE_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 { |
||||||
|
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleSearch = e => { |
||||||
|
const value = e.target.value |
||||||
|
setSearch(value); |
||||||
|
setCurrentPage(1) |
||||||
|
}; |
||||||
|
const handleOpenDialog = (type) => { |
||||||
|
setOpenDialog(true) |
||||||
|
setTypeDialog(type) |
||||||
|
} |
||||||
|
|
||||||
|
const handleExportExcel = async () => { |
||||||
|
let start = 0; |
||||||
|
|
||||||
|
if (currentPage !== 1 && currentPage > 1) { |
||||||
|
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
|
} |
||||||
|
|
||||||
|
const payload = { |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"name": "name", |
||||||
|
"logic_operator": "like", |
||||||
|
"value": search, |
||||||
|
"operator": "AND" |
||||||
|
} |
||||||
|
], |
||||||
|
"orders": { |
||||||
|
"ascending": true, |
||||||
|
"columns": [ |
||||||
|
'id' |
||||||
|
] |
||||||
|
}, |
||||||
|
"paging": { |
||||||
|
"length": rowsPerPage, |
||||||
|
"start": start |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const result = await axios |
||||||
|
.post(PROJECT_EXPENDITURE_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) => { |
||||||
|
setDataEdit(data) |
||||||
|
handleOpenDialog('Edit'); |
||||||
|
} |
||||||
|
|
||||||
|
const handleDelete = async (id) => { |
||||||
|
await setAlertDelete(true) |
||||||
|
await setIdDelete(id) |
||||||
|
} |
||||||
|
|
||||||
|
const handleCloseDialog = (type, data) => { |
||||||
|
if (type === "save") { |
||||||
|
saveProjectExpenditure(data); |
||||||
|
} else if (type === "edit") { |
||||||
|
editMaterialR(data); |
||||||
|
} |
||||||
|
setDataEdit([]) |
||||||
|
setOpenDialog(false) |
||||||
|
} |
||||||
|
|
||||||
|
const saveProjectExpenditure = async (data) => { |
||||||
|
const result = await axios.post(PROJECT_EXPENDITURE_ADD, data, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectExpenditure() |
||||||
|
NotificationManager.success(`Data project expenditure berhasil ditambah`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const editMaterialR = async (data) => { |
||||||
|
let urlEdit = PROJECT_EXPENDITURE_EDIT(data.id) |
||||||
|
const result = await axios.put(urlEdit, data, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectExpenditure(); |
||||||
|
NotificationManager.success(`Data project expenditure berhasil diedit`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`Data project expenditure gagal di edit`, `Failed!!`); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const toggleAddDialog = () => { |
||||||
|
setOpenDialog(!openDialog) |
||||||
|
} |
||||||
|
|
||||||
|
const handleDialogIg = (id) => { |
||||||
|
setIdPhaseProject(id) |
||||||
|
setOpenDialogIG(true) |
||||||
|
} |
||||||
|
|
||||||
|
const closeDialogIG = () => { |
||||||
|
setIdPhaseProject(0) |
||||||
|
setOpenDialogIG(false) |
||||||
|
} |
||||||
|
|
||||||
|
const toggleDialogIG = () => { |
||||||
|
if (openDialogIG) { |
||||||
|
setIdPhaseProject(0) |
||||||
|
} |
||||||
|
setOpenDialogIG(!openDialogIG); |
||||||
|
} |
||||||
|
|
||||||
|
const onConfirmDelete = async () => { |
||||||
|
let url = PROJECT_EXPENDITURE_DELETE(idDelete); |
||||||
|
|
||||||
|
const result = await axios.delete(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectExpenditure() |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.success(`Data project expenditure berhasil dihapus!`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.error(`Data project expenditure gagal dihapus!}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const cancelDelete = () => { |
||||||
|
setAlertDelete(false) |
||||||
|
setIdDelete(0) |
||||||
|
} |
||||||
|
|
||||||
|
const onShowSizeChange = (current, pageSize) => { |
||||||
|
setRowsPerPage(pageSize) |
||||||
|
} |
||||||
|
|
||||||
|
const onPagination = (current, pageSize) => { |
||||||
|
setCurrentPage(current) |
||||||
|
} |
||||||
|
|
||||||
|
const dataNotAvailable = () => { |
||||||
|
if (dataTable.length === 0) { |
||||||
|
return ( |
||||||
|
<tr> |
||||||
|
<td align="center" colSpan="3">{t('noData')}</td> |
||||||
|
</tr> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const renderTable = useMemo(() => { |
||||||
|
const columns = [ |
||||||
|
{ |
||||||
|
title: t('action'), |
||||||
|
dataIndex: '', |
||||||
|
key: 'x', |
||||||
|
className: 'nowrap', |
||||||
|
render: (text, record) => <> |
||||||
|
<Tooltip title={t('delete')}> |
||||||
|
<i className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i> |
||||||
|
</Tooltip> |
||||||
|
<Tooltip title={t('Edit')}> |
||||||
|
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i> |
||||||
|
</Tooltip>{" "} |
||||||
|
</>, |
||||||
|
}, |
||||||
|
{ title: t('Project Expenditure'), dataIndex: 'name', key: 'name', className: "nowrap" }, |
||||||
|
{ |
||||||
|
title: t('color'), |
||||||
|
dataIndex: 'color', |
||||||
|
key: 'color', |
||||||
|
render: (text) => <> |
||||||
|
<Tooltip title={text}> |
||||||
|
<i className="fa fa-square" style={{ color: text }} ></i> |
||||||
|
</Tooltip> |
||||||
|
</>, |
||||||
|
}, |
||||||
|
]; |
||||||
|
return ( |
||||||
|
<Table |
||||||
|
rowKey="id" |
||||||
|
size="small" |
||||||
|
columns={columns} |
||||||
|
dataSource={dataTable} |
||||||
|
pagination={false} |
||||||
|
/> |
||||||
|
) |
||||||
|
}, [dataTable]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<NotificationContainer /> |
||||||
|
<SweetAlert |
||||||
|
show={alertDelete} |
||||||
|
warning |
||||||
|
showCancel |
||||||
|
confirmBtnText="Delete" |
||||||
|
confirmBtnBsStyle="danger" |
||||||
|
title={t('deleteConfirm')} |
||||||
|
onConfirm={onConfirmDelete} |
||||||
|
onCancel={cancelDelete} |
||||||
|
focusCancelBtn |
||||||
|
> |
||||||
|
{t('deleteMsg')} |
||||||
|
</SweetAlert> |
||||||
|
<DialogForm |
||||||
|
openDialog={openDialog} |
||||||
|
closeDialog={handleCloseDialog} |
||||||
|
toggleDialog={() => toggleAddDialog} |
||||||
|
typeDialog={typeDialog} |
||||||
|
dataEdit={dataEdit} |
||||||
|
clickOpenModal={clickOpenModal} |
||||||
|
/> |
||||||
|
<Card> |
||||||
|
<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={t('search')} /> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<Tooltip title={t('Add Project Expenditure')}> |
||||||
|
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
||||||
|
</Tooltip> |
||||||
|
<Tooltip title={t('exportExcel')}> |
||||||
|
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||||
|
</Tooltip> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</CardHeader> |
||||||
|
<CardBody> |
||||||
|
{renderTable} |
||||||
|
<Pagination |
||||||
|
style={{ marginTop: "25px" }} |
||||||
|
showSizeChanger |
||||||
|
onShowSizeChange={onShowSizeChange} |
||||||
|
onChange={onPagination} |
||||||
|
defaultCurrent={currentPage} |
||||||
|
pageSize={rowsPerPage} |
||||||
|
total={totalPage} |
||||||
|
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
||||||
|
/> |
||||||
|
</CardBody> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default ProjectExpenditure; |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
.App { |
||||||
|
font-family: sans-serif; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.rc-color-picker-panel { |
||||||
|
border: 1px solid #ccc; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-inner { |
||||||
|
border: none; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-hsv { |
||||||
|
border-radius: 12px; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-value { |
||||||
|
border: none; |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-saturation { |
||||||
|
border: none; |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-ribbon { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-wrap-preview { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-preview span { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-preview input { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,110 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
import { Select } from "antd"; |
||||||
|
import InputColor from "./InputColor"; |
||||||
|
import "./styles.css"; |
||||||
|
import "rc-color-picker/assets/index.css"; |
||||||
|
import { useTranslation } from 'react-i18next'; |
||||||
|
const company_id = localStorage.getItem("company_id") |
||||||
|
const { Option } = Select; |
||||||
|
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => { |
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [projectFinancialHealth, setProjectFinancialHealth] = useState('') |
||||||
|
const [color, setColor] = useState('') |
||||||
|
const { t } = useTranslation(); |
||||||
|
useEffect(() => { |
||||||
|
if (typeDialog === "Edit") { |
||||||
|
setId(dataEdit.id) |
||||||
|
setProjectFinancialHealth(dataEdit.name) |
||||||
|
setColor(dataEdit.color) |
||||||
|
} else { |
||||||
|
setId(0) |
||||||
|
setColor('') |
||||||
|
setProjectFinancialHealth('') |
||||||
|
} |
||||||
|
}, [dataEdit, openDialog]) |
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
if (typeDialog === "Save") { |
||||||
|
data = { |
||||||
|
name: projectFinancialHealth, |
||||||
|
color, |
||||||
|
company_id |
||||||
|
} |
||||||
|
closeDialog('save', data); |
||||||
|
} else { |
||||||
|
data = { |
||||||
|
id, |
||||||
|
name: projectFinancialHealth, |
||||||
|
color, |
||||||
|
company_id |
||||||
|
} |
||||||
|
closeDialog('edit', data); |
||||||
|
} |
||||||
|
setId(0) |
||||||
|
} |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialog('cancel', 'none') |
||||||
|
setId(0) |
||||||
|
} |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<Row> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('Project Financial Health')}</Label> |
||||||
|
<Select |
||||||
|
value={projectFinancialHealth} |
||||||
|
defaultValue={projectFinancialHealth} |
||||||
|
onChange={setProjectFinancialHealth} |
||||||
|
style={{ width: "100%", pointerEvents: typeDialog === 'Edit' ? 'none' : '' }} |
||||||
|
suffixIcon={typeDialog === 'Edit' ? null : <i class="fa fa-chevron-down" aria-hidden="true"></i> } |
||||||
|
> |
||||||
|
<Option key="Cost Everrun" value="Cost Everrun"> |
||||||
|
Cost Overrun |
||||||
|
</Option> |
||||||
|
<Option key="Early Warning" value="Early Warning"> |
||||||
|
Early Warning |
||||||
|
</Option> |
||||||
|
<Option key="On Budget" value="On Budget"> |
||||||
|
On Budget |
||||||
|
</Option> |
||||||
|
</Select> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('color')}</Label> |
||||||
|
<InputColor value={color} color={color} onChange={(e) => setColor(e.color)} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} data</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
{renderForm()} |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default DialogForm; |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
|
||||||
|
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, idActivity, projectTypeId }) => { |
||||||
|
|
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [activity, setActivity] = useState('') |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (typeDialog === "edit") { |
||||||
|
setId(dataEdit.id) |
||||||
|
setActivity(dataEdit.name_activity) |
||||||
|
|
||||||
|
} else { |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
}, [dataEdit, openDialog]) |
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
|
||||||
|
if (typeDialog === "add") { |
||||||
|
data = { |
||||||
|
name_activity: activity, |
||||||
|
proyek_type_id: projectTypeId |
||||||
|
} |
||||||
|
|
||||||
|
if (idActivity && idActivity > 0) { |
||||||
|
data['parent_id'] = idActivity |
||||||
|
} |
||||||
|
|
||||||
|
closeDialog('save', data); |
||||||
|
} else { |
||||||
|
data = { |
||||||
|
id, |
||||||
|
name_activity: activity, |
||||||
|
proyek_type_id: projectTypeId |
||||||
|
} |
||||||
|
|
||||||
|
if (idActivity && idActivity > 0) { |
||||||
|
data['parent_id'] = idActivity |
||||||
|
} |
||||||
|
|
||||||
|
closeDialog('edit', data); |
||||||
|
} |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialog('cancel', 'none') |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Activity</Label> |
||||||
|
<Input row="4" type="textarea" value={activity} onChange={(e) => setActivity(e.target.value)} placeholder={`Persiapan ...`} /> |
||||||
|
</FormGroup> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal isOpen={openDialog} toggle={toggleDialog}> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "add" ? `Add` : "Edit"} Activity</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
{renderForm()} |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button className='capitalize' color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogForm; |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Input from "antd/lib/input"; |
||||||
|
import Button from "antd/lib/button"; |
||||||
|
import Dropdown from "antd/lib/dropdown"; |
||||||
|
import { Panel } from 'rc-color-picker' |
||||||
|
import "antd/dist/antd.css"; |
||||||
|
import "./styles.css"; |
||||||
|
|
||||||
|
export default function InputColor(props) { |
||||||
|
const { color, onChange } = props; |
||||||
|
|
||||||
|
const [internalColor, setInternalColor] = React.useState(color); |
||||||
|
|
||||||
|
const handleChange = (color) => { |
||||||
|
setInternalColor(color.color); |
||||||
|
|
||||||
|
if (onChange) { |
||||||
|
onChange(color); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const overlay = ( |
||||||
|
<div> |
||||||
|
<Panel |
||||||
|
color={internalColor} |
||||||
|
enableAlpha={false} |
||||||
|
onChange={handleChange} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Input |
||||||
|
value={internalColor || ""} |
||||||
|
onChange={(e) => setInternalColor(e.target.value)} |
||||||
|
suffix={ |
||||||
|
<Dropdown trigger={["click"]} overlay={overlay}> |
||||||
|
<Button style={{ background: internalColor }}> </Button> |
||||||
|
</Dropdown> |
||||||
|
} |
||||||
|
/> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,392 @@ |
|||||||
|
import * as XLSX from 'xlsx'; |
||||||
|
import DialogForm from './DialogForm'; |
||||||
|
import React, { useState, useEffect, useMemo } from 'react'; |
||||||
|
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
|
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_FINANCIAL_HEALTH_ADD, PROJECT_FINANCIAL_HEALTH_EDIT, PROJECT_FINANCIAL_HEALTH_DELETE, PROJECT_FINANCIAL_HEALTH_SEARCH } from '../../../const/ApiConst'; |
||||||
|
import { Pagination, Button, Tooltip, Table } from 'antd'; |
||||||
|
import { useTranslation } from 'react-i18next'; |
||||||
|
|
||||||
|
|
||||||
|
const ProjectFinancialHealth = ({ params, ...props }) => { |
||||||
|
let role_id = '', user_id = '', proyek_id = '', isLogin = '', token = '', company_id = 0, role_name = ''; |
||||||
|
if (props.location.state && props.location.state.role_id && props.location.state.user_id) { |
||||||
|
role_id = props.location.state.role_id; |
||||||
|
user_id = props.location.state.user_id; |
||||||
|
token = props.location.state.token; |
||||||
|
isLogin = props.location.state.isLogin; |
||||||
|
role_name = props.location.state.role_name; |
||||||
|
} else { |
||||||
|
role_id = localStorage.getItem("role_id"); |
||||||
|
proyek_id = localStorage.getItem("proyek_id"); |
||||||
|
user_id = localStorage.getItem("user_id"); |
||||||
|
token = localStorage.getItem("token"); |
||||||
|
isLogin = localStorage.getItem("isLogin"); |
||||||
|
company_id = localStorage.getItem('company_id'); |
||||||
|
role_name = localStorage.getItem('role_name'); |
||||||
|
} |
||||||
|
|
||||||
|
const HEADER = { |
||||||
|
headers: { |
||||||
|
"Content-Type": "application/json", |
||||||
|
"Authorization": `Bearer ${token}` |
||||||
|
} |
||||||
|
} |
||||||
|
const pageName = params.name; |
||||||
|
|
||||||
|
const [alertDelete, setAlertDelete] = useState(false) |
||||||
|
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) |
||||||
|
const [openDialog, setOpenDialog] = useState(false) |
||||||
|
const [openDialogIG, setOpenDialogIG] = useState(false) |
||||||
|
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||||
|
const [search, setSearch] = useState('') |
||||||
|
const [totalPage, setTotalPage] = useState(0) |
||||||
|
const [typeDialog, setTypeDialog] = useState('Save') |
||||||
|
const { t } = useTranslation() |
||||||
|
useEffect(() => { |
||||||
|
getDataProjectFinancialHealth() |
||||||
|
}, [currentPage, rowsPerPage, search]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const cekData = dataExport || [] |
||||||
|
if (cekData.length > 0) { |
||||||
|
exportExcel() |
||||||
|
} |
||||||
|
}, [dataExport]) |
||||||
|
|
||||||
|
const getDataProjectFinancialHealth = async () => { |
||||||
|
let start = 0; |
||||||
|
if (currentPage !== 1 && currentPage > 1) { |
||||||
|
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
|
} |
||||||
|
const payload = { |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"name": "name", |
||||||
|
"logic_operator": "ilike", |
||||||
|
"value": search, |
||||||
|
"operator": "AND" |
||||||
|
} |
||||||
|
], |
||||||
|
"orders": { |
||||||
|
"ascending": true, |
||||||
|
"columns": [ |
||||||
|
'id' |
||||||
|
] |
||||||
|
}, |
||||||
|
"paging": { |
||||||
|
"length": rowsPerPage, |
||||||
|
"start": start |
||||||
|
} |
||||||
|
} |
||||||
|
if (role_name !== "Super Admin") { |
||||||
|
payload.columns.push( |
||||||
|
{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" }, |
||||||
|
) |
||||||
|
} else { |
||||||
|
payload.columns.push( |
||||||
|
{ "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" }, |
||||||
|
) |
||||||
|
} |
||||||
|
const result = await axios |
||||||
|
.post(PROJECT_FINANCIAL_HEALTH_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 { |
||||||
|
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleSearch = e => { |
||||||
|
const value = e.target.value |
||||||
|
setSearch(value); |
||||||
|
setCurrentPage(1) |
||||||
|
}; |
||||||
|
const handleOpenDialog = (type) => { |
||||||
|
setOpenDialog(true) |
||||||
|
setTypeDialog(type) |
||||||
|
} |
||||||
|
|
||||||
|
const handleExportExcel = async () => { |
||||||
|
let start = 0; |
||||||
|
|
||||||
|
if (currentPage !== 1 && currentPage > 1) { |
||||||
|
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
|
} |
||||||
|
|
||||||
|
const payload = { |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"name": "name", |
||||||
|
"logic_operator": "like", |
||||||
|
"value": search, |
||||||
|
"operator": "AND" |
||||||
|
} |
||||||
|
], |
||||||
|
"orders": { |
||||||
|
"ascending": true, |
||||||
|
"columns": [ |
||||||
|
'id' |
||||||
|
] |
||||||
|
}, |
||||||
|
"paging": { |
||||||
|
"length": rowsPerPage, |
||||||
|
"start": start |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const result = await axios |
||||||
|
.post(PROJECT_FINANCIAL_HEALTH_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) => { |
||||||
|
setDataEdit(data) |
||||||
|
handleOpenDialog('Edit'); |
||||||
|
} |
||||||
|
|
||||||
|
const handleDelete = async (id) => { |
||||||
|
await setAlertDelete(true) |
||||||
|
await setIdDelete(id) |
||||||
|
} |
||||||
|
|
||||||
|
const handleCloseDialog = (type, data) => { |
||||||
|
if (type === "save") { |
||||||
|
saveProjectFinancialHealth(data); |
||||||
|
} else if (type === "edit") { |
||||||
|
editMaterialR(data); |
||||||
|
} |
||||||
|
setDataEdit([]) |
||||||
|
setOpenDialog(false) |
||||||
|
} |
||||||
|
|
||||||
|
const saveProjectFinancialHealth = async (data) => { |
||||||
|
const result = await axios.post(PROJECT_FINANCIAL_HEALTH_ADD, data, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectFinancialHealth() |
||||||
|
NotificationManager.success(`Data project financial health berhasil ditambah`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const editMaterialR = async (data) => { |
||||||
|
let urlEdit = PROJECT_FINANCIAL_HEALTH_EDIT(data.id) |
||||||
|
const result = await axios.put(urlEdit, data, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectFinancialHealth(); |
||||||
|
NotificationManager.success(`Data project financial health berhasil diedit`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`Data project financial health gagal di edit`, `Failed!!`); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const toggleAddDialog = () => { |
||||||
|
setOpenDialog(!openDialog) |
||||||
|
} |
||||||
|
|
||||||
|
const handleDialogIg = (id) => { |
||||||
|
setIdPhaseProject(id) |
||||||
|
setOpenDialogIG(true) |
||||||
|
} |
||||||
|
|
||||||
|
const closeDialogIG = () => { |
||||||
|
setIdPhaseProject(0) |
||||||
|
setOpenDialogIG(false) |
||||||
|
} |
||||||
|
|
||||||
|
const toggleDialogIG = () => { |
||||||
|
if (openDialogIG) { |
||||||
|
setIdPhaseProject(0) |
||||||
|
} |
||||||
|
setOpenDialogIG(!openDialogIG); |
||||||
|
} |
||||||
|
|
||||||
|
const onConfirmDelete = async () => { |
||||||
|
let url = PROJECT_FINANCIAL_HEALTH_DELETE(idDelete); |
||||||
|
|
||||||
|
const result = await axios.delete(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectFinancialHealth() |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.success(`Data project financial health berhasil dihapus!`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.error(`Data project financial health gagal dihapus!}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const cancelDelete = () => { |
||||||
|
setAlertDelete(false) |
||||||
|
setIdDelete(0) |
||||||
|
} |
||||||
|
|
||||||
|
const onShowSizeChange = (current, pageSize) => { |
||||||
|
setRowsPerPage(pageSize) |
||||||
|
} |
||||||
|
|
||||||
|
const onPagination = (current, pageSize) => { |
||||||
|
setCurrentPage(current) |
||||||
|
} |
||||||
|
|
||||||
|
const dataNotAvailable = () => { |
||||||
|
if (dataTable.length === 0) { |
||||||
|
return ( |
||||||
|
<tr> |
||||||
|
<td align="center" colSpan="3">{t('noData')}</td> |
||||||
|
</tr> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const renderTable = useMemo(() => { |
||||||
|
const columns = [ |
||||||
|
{ |
||||||
|
title: t('action'), |
||||||
|
dataIndex: '', |
||||||
|
key: 'x', |
||||||
|
className: 'nowrap', |
||||||
|
render: (text, record) => <> |
||||||
|
<Tooltip title={t('delete')}> |
||||||
|
<i className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i> |
||||||
|
</Tooltip> |
||||||
|
<Tooltip title={t('Edit')}> |
||||||
|
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i> |
||||||
|
</Tooltip>{" "} |
||||||
|
</>, |
||||||
|
}, |
||||||
|
{ title: t('Project Financial Health'), dataIndex: 'name', key: 'name', className: "nowrap" }, |
||||||
|
{ |
||||||
|
title: t('color'), |
||||||
|
dataIndex: 'color', |
||||||
|
key: 'color', |
||||||
|
render: (text) => <> |
||||||
|
<Tooltip title={text}> |
||||||
|
<i className="fa fa-square" style={{ color: text }} ></i> |
||||||
|
</Tooltip> |
||||||
|
</>, |
||||||
|
}, |
||||||
|
]; |
||||||
|
return ( |
||||||
|
<Table |
||||||
|
rowKey="id" |
||||||
|
size="small" |
||||||
|
columns={columns} |
||||||
|
dataSource={dataTable} |
||||||
|
pagination={false} |
||||||
|
/> |
||||||
|
) |
||||||
|
}, [dataTable]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<NotificationContainer /> |
||||||
|
<SweetAlert |
||||||
|
show={alertDelete} |
||||||
|
warning |
||||||
|
showCancel |
||||||
|
confirmBtnText="Delete" |
||||||
|
confirmBtnBsStyle="danger" |
||||||
|
title={t('deleteConfirm')} |
||||||
|
onConfirm={onConfirmDelete} |
||||||
|
onCancel={cancelDelete} |
||||||
|
focusCancelBtn |
||||||
|
> |
||||||
|
{t('deleteMsg')} |
||||||
|
</SweetAlert> |
||||||
|
<DialogForm |
||||||
|
openDialog={openDialog} |
||||||
|
closeDialog={handleCloseDialog} |
||||||
|
toggleDialog={() => toggleAddDialog} |
||||||
|
typeDialog={typeDialog} |
||||||
|
dataEdit={dataEdit} |
||||||
|
clickOpenModal={clickOpenModal} |
||||||
|
/> |
||||||
|
<Card> |
||||||
|
<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={t('search')} /> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<Tooltip title={t('Add Project Financial Health')}> |
||||||
|
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
||||||
|
</Tooltip> |
||||||
|
<Tooltip title={t('exportExcel')}> |
||||||
|
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||||
|
</Tooltip> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</CardHeader> |
||||||
|
<CardBody> |
||||||
|
{renderTable} |
||||||
|
<Pagination |
||||||
|
style={{ marginTop: "25px" }} |
||||||
|
showSizeChanger |
||||||
|
onShowSizeChange={onShowSizeChange} |
||||||
|
onChange={onPagination} |
||||||
|
defaultCurrent={currentPage} |
||||||
|
pageSize={rowsPerPage} |
||||||
|
total={totalPage} |
||||||
|
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
||||||
|
/> |
||||||
|
</CardBody> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default ProjectFinancialHealth; |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
.App { |
||||||
|
font-family: sans-serif; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.rc-color-picker-panel { |
||||||
|
border: 1px solid #ccc; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-inner { |
||||||
|
border: none; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-hsv { |
||||||
|
border-radius: 12px; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-value { |
||||||
|
border: none; |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-saturation { |
||||||
|
border: none; |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-ribbon { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-wrap-preview { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-preview span { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-preview input { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,107 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
import { Select } from "antd"; |
||||||
|
import InputColor from "./InputColor"; |
||||||
|
import "./styles.css"; |
||||||
|
import "rc-color-picker/assets/index.css"; |
||||||
|
import { useTranslation } from 'react-i18next'; |
||||||
|
const company_id = localStorage.getItem("company_id") |
||||||
|
const { Option } = Select; |
||||||
|
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => { |
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [projectInvoice, setProjectInvoice] = useState('') |
||||||
|
const [color, setColor] = useState('') |
||||||
|
const { t } = useTranslation(); |
||||||
|
useEffect(() => { |
||||||
|
if (typeDialog === "Edit") { |
||||||
|
setId(dataEdit.id) |
||||||
|
setProjectInvoice(dataEdit.name) |
||||||
|
setColor(dataEdit.color) |
||||||
|
} else { |
||||||
|
setId(0) |
||||||
|
setColor('') |
||||||
|
setProjectInvoice('') |
||||||
|
} |
||||||
|
}, [dataEdit, openDialog]) |
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
if (typeDialog === "Save") { |
||||||
|
data = { |
||||||
|
name: projectInvoice, |
||||||
|
color, |
||||||
|
company_id |
||||||
|
} |
||||||
|
closeDialog('save', data); |
||||||
|
} else { |
||||||
|
data = { |
||||||
|
id, |
||||||
|
name: projectInvoice, |
||||||
|
color, |
||||||
|
company_id |
||||||
|
} |
||||||
|
closeDialog('edit', data); |
||||||
|
} |
||||||
|
setId(0) |
||||||
|
} |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialog('cancel', 'none') |
||||||
|
setId(0) |
||||||
|
} |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<Row> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('Project Invoice')}</Label> |
||||||
|
<Select |
||||||
|
value={projectInvoice} |
||||||
|
defaultValue={projectInvoice} |
||||||
|
onChange={setProjectInvoice} |
||||||
|
style={{ width: "100%", pointerEvents: typeDialog === 'Edit' ? 'none' : '' }} |
||||||
|
suffixIcon={typeDialog === 'Edit' ? null : <i class="fa fa-chevron-down" aria-hidden="true"></i> } |
||||||
|
> |
||||||
|
<Option key="Invoiced" value="Invoiced"> |
||||||
|
Invoiced |
||||||
|
</Option> |
||||||
|
<Option key="Cash In" value="Cash In"> |
||||||
|
Cash In |
||||||
|
</Option> |
||||||
|
</Select> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('color')}</Label> |
||||||
|
<InputColor value={color} color={color} onChange={(e) => setColor(e.color)} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} data</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
{renderForm()} |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default DialogForm; |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
|
||||||
|
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, idActivity, projectTypeId }) => { |
||||||
|
|
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [activity, setActivity] = useState('') |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (typeDialog === "edit") { |
||||||
|
setId(dataEdit.id) |
||||||
|
setActivity(dataEdit.name_activity) |
||||||
|
|
||||||
|
} else { |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
}, [dataEdit, openDialog]) |
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
|
||||||
|
if (typeDialog === "add") { |
||||||
|
data = { |
||||||
|
name_activity: activity, |
||||||
|
proyek_type_id: projectTypeId |
||||||
|
} |
||||||
|
|
||||||
|
if (idActivity && idActivity > 0) { |
||||||
|
data['parent_id'] = idActivity |
||||||
|
} |
||||||
|
|
||||||
|
closeDialog('save', data); |
||||||
|
} else { |
||||||
|
data = { |
||||||
|
id, |
||||||
|
name_activity: activity, |
||||||
|
proyek_type_id: projectTypeId |
||||||
|
} |
||||||
|
|
||||||
|
if (idActivity && idActivity > 0) { |
||||||
|
data['parent_id'] = idActivity |
||||||
|
} |
||||||
|
|
||||||
|
closeDialog('edit', data); |
||||||
|
} |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialog('cancel', 'none') |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Activity</Label> |
||||||
|
<Input row="4" type="textarea" value={activity} onChange={(e) => setActivity(e.target.value)} placeholder={`Persiapan ...`} /> |
||||||
|
</FormGroup> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal isOpen={openDialog} toggle={toggleDialog}> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "add" ? `Add` : "Edit"} Activity</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
{renderForm()} |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button className='capitalize' color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogForm; |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Input from "antd/lib/input"; |
||||||
|
import Button from "antd/lib/button"; |
||||||
|
import Dropdown from "antd/lib/dropdown"; |
||||||
|
import { Panel } from 'rc-color-picker' |
||||||
|
import "antd/dist/antd.css"; |
||||||
|
import "./styles.css"; |
||||||
|
|
||||||
|
export default function InputColor(props) { |
||||||
|
const { color, onChange } = props; |
||||||
|
|
||||||
|
const [internalColor, setInternalColor] = React.useState(color); |
||||||
|
|
||||||
|
const handleChange = (color) => { |
||||||
|
setInternalColor(color.color); |
||||||
|
|
||||||
|
if (onChange) { |
||||||
|
onChange(color); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const overlay = ( |
||||||
|
<div> |
||||||
|
<Panel |
||||||
|
color={internalColor} |
||||||
|
enableAlpha={false} |
||||||
|
onChange={handleChange} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Input |
||||||
|
value={internalColor || ""} |
||||||
|
onChange={(e) => setInternalColor(e.target.value)} |
||||||
|
suffix={ |
||||||
|
<Dropdown trigger={["click"]} overlay={overlay}> |
||||||
|
<Button style={{ background: internalColor }}> </Button> |
||||||
|
</Dropdown> |
||||||
|
} |
||||||
|
/> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,392 @@ |
|||||||
|
import * as XLSX from 'xlsx'; |
||||||
|
import DialogForm from './DialogForm'; |
||||||
|
import React, { useState, useEffect, useMemo } from 'react'; |
||||||
|
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
|
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_INVOICE_ADD, PROJECT_INVOICE_EDIT, PROJECT_INVOICE_DELETE, PROJECT_INVOICE_SEARCH } from '../../../const/ApiConst'; |
||||||
|
import { Pagination, Button, Tooltip, Table } from 'antd'; |
||||||
|
import { useTranslation } from 'react-i18next'; |
||||||
|
|
||||||
|
|
||||||
|
const ProjectInvoice = ({ params, ...props }) => { |
||||||
|
let role_id = '', user_id = '', proyek_id = '', isLogin = '', token = '', company_id = 0, role_name = ''; |
||||||
|
if (props.location.state && props.location.state.role_id && props.location.state.user_id) { |
||||||
|
role_id = props.location.state.role_id; |
||||||
|
user_id = props.location.state.user_id; |
||||||
|
token = props.location.state.token; |
||||||
|
isLogin = props.location.state.isLogin; |
||||||
|
role_name = props.location.state.role_name; |
||||||
|
} else { |
||||||
|
role_id = localStorage.getItem("role_id"); |
||||||
|
proyek_id = localStorage.getItem("proyek_id"); |
||||||
|
user_id = localStorage.getItem("user_id"); |
||||||
|
token = localStorage.getItem("token"); |
||||||
|
isLogin = localStorage.getItem("isLogin"); |
||||||
|
company_id = localStorage.getItem('company_id'); |
||||||
|
role_name = localStorage.getItem('role_name'); |
||||||
|
} |
||||||
|
|
||||||
|
const HEADER = { |
||||||
|
headers: { |
||||||
|
"Content-Type": "application/json", |
||||||
|
"Authorization": `Bearer ${token}` |
||||||
|
} |
||||||
|
} |
||||||
|
const pageName = params.name; |
||||||
|
|
||||||
|
const [alertDelete, setAlertDelete] = useState(false) |
||||||
|
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) |
||||||
|
const [openDialog, setOpenDialog] = useState(false) |
||||||
|
const [openDialogIG, setOpenDialogIG] = useState(false) |
||||||
|
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||||
|
const [search, setSearch] = useState('') |
||||||
|
const [totalPage, setTotalPage] = useState(0) |
||||||
|
const [typeDialog, setTypeDialog] = useState('Save') |
||||||
|
const { t } = useTranslation() |
||||||
|
useEffect(() => { |
||||||
|
getDataProjectInvoice() |
||||||
|
}, [currentPage, rowsPerPage, search]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const cekData = dataExport || [] |
||||||
|
if (cekData.length > 0) { |
||||||
|
exportExcel() |
||||||
|
} |
||||||
|
}, [dataExport]) |
||||||
|
|
||||||
|
const getDataProjectInvoice = async () => { |
||||||
|
let start = 0; |
||||||
|
if (currentPage !== 1 && currentPage > 1) { |
||||||
|
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
|
} |
||||||
|
const payload = { |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"name": "name", |
||||||
|
"logic_operator": "ilike", |
||||||
|
"value": search, |
||||||
|
"operator": "AND" |
||||||
|
} |
||||||
|
], |
||||||
|
"orders": { |
||||||
|
"ascending": true, |
||||||
|
"columns": [ |
||||||
|
'id' |
||||||
|
] |
||||||
|
}, |
||||||
|
"paging": { |
||||||
|
"length": rowsPerPage, |
||||||
|
"start": start |
||||||
|
} |
||||||
|
} |
||||||
|
if (role_name !== "Super Admin") { |
||||||
|
payload.columns.push( |
||||||
|
{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" }, |
||||||
|
) |
||||||
|
} else { |
||||||
|
payload.columns.push( |
||||||
|
{ "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" }, |
||||||
|
) |
||||||
|
} |
||||||
|
const result = await axios |
||||||
|
.post(PROJECT_INVOICE_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 { |
||||||
|
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleSearch = e => { |
||||||
|
const value = e.target.value |
||||||
|
setSearch(value); |
||||||
|
setCurrentPage(1) |
||||||
|
}; |
||||||
|
const handleOpenDialog = (type) => { |
||||||
|
setOpenDialog(true) |
||||||
|
setTypeDialog(type) |
||||||
|
} |
||||||
|
|
||||||
|
const handleExportExcel = async () => { |
||||||
|
let start = 0; |
||||||
|
|
||||||
|
if (currentPage !== 1 && currentPage > 1) { |
||||||
|
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
|
} |
||||||
|
|
||||||
|
const payload = { |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"name": "name", |
||||||
|
"logic_operator": "like", |
||||||
|
"value": search, |
||||||
|
"operator": "AND" |
||||||
|
} |
||||||
|
], |
||||||
|
"orders": { |
||||||
|
"ascending": true, |
||||||
|
"columns": [ |
||||||
|
'id' |
||||||
|
] |
||||||
|
}, |
||||||
|
"paging": { |
||||||
|
"length": rowsPerPage, |
||||||
|
"start": start |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const result = await axios |
||||||
|
.post(PROJECT_INVOICE_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) => { |
||||||
|
setDataEdit(data) |
||||||
|
handleOpenDialog('Edit'); |
||||||
|
} |
||||||
|
|
||||||
|
const handleDelete = async (id) => { |
||||||
|
await setAlertDelete(true) |
||||||
|
await setIdDelete(id) |
||||||
|
} |
||||||
|
|
||||||
|
const handleCloseDialog = (type, data) => { |
||||||
|
if (type === "save") { |
||||||
|
saveProjectInvoice(data); |
||||||
|
} else if (type === "edit") { |
||||||
|
editMaterialR(data); |
||||||
|
} |
||||||
|
setDataEdit([]) |
||||||
|
setOpenDialog(false) |
||||||
|
} |
||||||
|
|
||||||
|
const saveProjectInvoice = async (data) => { |
||||||
|
const result = await axios.post(PROJECT_INVOICE_ADD, data, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectInvoice() |
||||||
|
NotificationManager.success(`Data project invoice berhasil ditambah`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const editMaterialR = async (data) => { |
||||||
|
let urlEdit = PROJECT_INVOICE_EDIT(data.id) |
||||||
|
const result = await axios.put(urlEdit, data, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectInvoice(); |
||||||
|
NotificationManager.success(`Data project invoice berhasil diedit`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`Data project invoice gagal di edit`, `Failed!!`); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const toggleAddDialog = () => { |
||||||
|
setOpenDialog(!openDialog) |
||||||
|
} |
||||||
|
|
||||||
|
const handleDialogIg = (id) => { |
||||||
|
setIdPhaseProject(id) |
||||||
|
setOpenDialogIG(true) |
||||||
|
} |
||||||
|
|
||||||
|
const closeDialogIG = () => { |
||||||
|
setIdPhaseProject(0) |
||||||
|
setOpenDialogIG(false) |
||||||
|
} |
||||||
|
|
||||||
|
const toggleDialogIG = () => { |
||||||
|
if (openDialogIG) { |
||||||
|
setIdPhaseProject(0) |
||||||
|
} |
||||||
|
setOpenDialogIG(!openDialogIG); |
||||||
|
} |
||||||
|
|
||||||
|
const onConfirmDelete = async () => { |
||||||
|
let url = PROJECT_INVOICE_DELETE(idDelete); |
||||||
|
|
||||||
|
const result = await axios.delete(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectInvoice() |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.success(`Data project invoice berhasil dihapus!`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.error(`Data project invoice gagal dihapus!}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const cancelDelete = () => { |
||||||
|
setAlertDelete(false) |
||||||
|
setIdDelete(0) |
||||||
|
} |
||||||
|
|
||||||
|
const onShowSizeChange = (current, pageSize) => { |
||||||
|
setRowsPerPage(pageSize) |
||||||
|
} |
||||||
|
|
||||||
|
const onPagination = (current, pageSize) => { |
||||||
|
setCurrentPage(current) |
||||||
|
} |
||||||
|
|
||||||
|
const dataNotAvailable = () => { |
||||||
|
if (dataTable.length === 0) { |
||||||
|
return ( |
||||||
|
<tr> |
||||||
|
<td align="center" colSpan="3">{t('noData')}</td> |
||||||
|
</tr> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const renderTable = useMemo(() => { |
||||||
|
const columns = [ |
||||||
|
{ |
||||||
|
title: t('action'), |
||||||
|
dataIndex: '', |
||||||
|
key: 'x', |
||||||
|
className: 'nowrap', |
||||||
|
render: (text, record) => <> |
||||||
|
<Tooltip title={t('delete')}> |
||||||
|
<i className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i> |
||||||
|
</Tooltip> |
||||||
|
<Tooltip title={t('Edit')}> |
||||||
|
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i> |
||||||
|
</Tooltip>{" "} |
||||||
|
</>, |
||||||
|
}, |
||||||
|
{ title: t('Project Invoice'), dataIndex: 'name', key: 'name', className: "nowrap" }, |
||||||
|
{ |
||||||
|
title: t('color'), |
||||||
|
dataIndex: 'color', |
||||||
|
key: 'color', |
||||||
|
render: (text) => <> |
||||||
|
<Tooltip title={text}> |
||||||
|
<i className="fa fa-square" style={{ color: text }} ></i> |
||||||
|
</Tooltip> |
||||||
|
</>, |
||||||
|
}, |
||||||
|
]; |
||||||
|
return ( |
||||||
|
<Table |
||||||
|
rowKey="id" |
||||||
|
size="small" |
||||||
|
columns={columns} |
||||||
|
dataSource={dataTable} |
||||||
|
pagination={false} |
||||||
|
/> |
||||||
|
) |
||||||
|
}, [dataTable]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<NotificationContainer /> |
||||||
|
<SweetAlert |
||||||
|
show={alertDelete} |
||||||
|
warning |
||||||
|
showCancel |
||||||
|
confirmBtnText="Delete" |
||||||
|
confirmBtnBsStyle="danger" |
||||||
|
title={t('deleteConfirm')} |
||||||
|
onConfirm={onConfirmDelete} |
||||||
|
onCancel={cancelDelete} |
||||||
|
focusCancelBtn |
||||||
|
> |
||||||
|
{t('deleteMsg')} |
||||||
|
</SweetAlert> |
||||||
|
<DialogForm |
||||||
|
openDialog={openDialog} |
||||||
|
closeDialog={handleCloseDialog} |
||||||
|
toggleDialog={() => toggleAddDialog} |
||||||
|
typeDialog={typeDialog} |
||||||
|
dataEdit={dataEdit} |
||||||
|
clickOpenModal={clickOpenModal} |
||||||
|
/> |
||||||
|
<Card> |
||||||
|
<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={t('search')} /> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<Tooltip title={t('Add Project Invoice')}> |
||||||
|
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
||||||
|
</Tooltip> |
||||||
|
<Tooltip title={t('exportExcel')}> |
||||||
|
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||||
|
</Tooltip> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</CardHeader> |
||||||
|
<CardBody> |
||||||
|
{renderTable} |
||||||
|
<Pagination |
||||||
|
style={{ marginTop: "25px" }} |
||||||
|
showSizeChanger |
||||||
|
onShowSizeChange={onShowSizeChange} |
||||||
|
onChange={onPagination} |
||||||
|
defaultCurrent={currentPage} |
||||||
|
pageSize={rowsPerPage} |
||||||
|
total={totalPage} |
||||||
|
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
||||||
|
/> |
||||||
|
</CardBody> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default ProjectInvoice; |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
.App { |
||||||
|
font-family: sans-serif; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.rc-color-picker-panel { |
||||||
|
border: 1px solid #ccc; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-inner { |
||||||
|
border: none; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-hsv { |
||||||
|
border-radius: 12px; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-value { |
||||||
|
border: none; |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-saturation { |
||||||
|
border: none; |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-ribbon { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-wrap-preview { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-preview span { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-preview input { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,110 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
import { Select } from "antd"; |
||||||
|
import InputColor from "./InputColor"; |
||||||
|
import "./styles.css"; |
||||||
|
import "rc-color-picker/assets/index.css"; |
||||||
|
import { useTranslation } from 'react-i18next'; |
||||||
|
const company_id = localStorage.getItem("company_id") |
||||||
|
const { Option } = Select; |
||||||
|
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => { |
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [projectScheduleHealth, setProjectScheduleHealth] = useState('') |
||||||
|
const [color, setColor] = useState('') |
||||||
|
const { t } = useTranslation(); |
||||||
|
useEffect(() => { |
||||||
|
if (typeDialog === "Edit") { |
||||||
|
setId(dataEdit.id) |
||||||
|
setProjectScheduleHealth(dataEdit.name) |
||||||
|
setColor(dataEdit.color) |
||||||
|
} else { |
||||||
|
setId(0) |
||||||
|
setColor('') |
||||||
|
setProjectScheduleHealth('') |
||||||
|
} |
||||||
|
}, [dataEdit, openDialog]) |
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
if (typeDialog === "Save") { |
||||||
|
data = { |
||||||
|
name: projectScheduleHealth, |
||||||
|
color, |
||||||
|
company_id |
||||||
|
} |
||||||
|
closeDialog('save', data); |
||||||
|
} else { |
||||||
|
data = { |
||||||
|
id, |
||||||
|
name: projectScheduleHealth, |
||||||
|
color, |
||||||
|
company_id |
||||||
|
} |
||||||
|
closeDialog('edit', data); |
||||||
|
} |
||||||
|
setId(0) |
||||||
|
} |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialog('cancel', 'none') |
||||||
|
setId(0) |
||||||
|
} |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<Row> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('Project Schedule Health')}</Label> |
||||||
|
<Select |
||||||
|
value={projectScheduleHealth} |
||||||
|
defaultValue={projectScheduleHealth} |
||||||
|
onChange={setProjectScheduleHealth} |
||||||
|
style={{ width: "100%", pointerEvents: typeDialog === 'Edit' ? 'none' : '' }} |
||||||
|
suffixIcon={typeDialog === 'Edit' ? null : <i class="fa fa-chevron-down" aria-hidden="true"></i> } |
||||||
|
> |
||||||
|
<Option key="Behind Schedule" value="Behind Schedule"> |
||||||
|
Behind Schedule |
||||||
|
</Option> |
||||||
|
<Option key="Early Warning" value="Early Warning"> |
||||||
|
Early Warning |
||||||
|
</Option> |
||||||
|
<Option key="On Schedule" value="On Schedule"> |
||||||
|
On Schedule |
||||||
|
</Option> |
||||||
|
</Select> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('color')}</Label> |
||||||
|
<InputColor value={color} color={color} onChange={(e) => setColor(e.color)} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} data</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
{renderForm()} |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default DialogForm; |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
|
||||||
|
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, idActivity, projectTypeId }) => { |
||||||
|
|
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [activity, setActivity] = useState('') |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (typeDialog === "edit") { |
||||||
|
setId(dataEdit.id) |
||||||
|
setActivity(dataEdit.name_activity) |
||||||
|
|
||||||
|
} else { |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
}, [dataEdit, openDialog]) |
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
|
||||||
|
if (typeDialog === "add") { |
||||||
|
data = { |
||||||
|
name_activity: activity, |
||||||
|
proyek_type_id: projectTypeId |
||||||
|
} |
||||||
|
|
||||||
|
if (idActivity && idActivity > 0) { |
||||||
|
data['parent_id'] = idActivity |
||||||
|
} |
||||||
|
|
||||||
|
closeDialog('save', data); |
||||||
|
} else { |
||||||
|
data = { |
||||||
|
id, |
||||||
|
name_activity: activity, |
||||||
|
proyek_type_id: projectTypeId |
||||||
|
} |
||||||
|
|
||||||
|
if (idActivity && idActivity > 0) { |
||||||
|
data['parent_id'] = idActivity |
||||||
|
} |
||||||
|
|
||||||
|
closeDialog('edit', data); |
||||||
|
} |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialog('cancel', 'none') |
||||||
|
setId(0) |
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Activity</Label> |
||||||
|
<Input row="4" type="textarea" value={activity} onChange={(e) => setActivity(e.target.value)} placeholder={`Persiapan ...`} /> |
||||||
|
</FormGroup> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal isOpen={openDialog} toggle={toggleDialog}> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "add" ? `Add` : "Edit"} Activity</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
{renderForm()} |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button className='capitalize' color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogForm; |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Input from "antd/lib/input"; |
||||||
|
import Button from "antd/lib/button"; |
||||||
|
import Dropdown from "antd/lib/dropdown"; |
||||||
|
import { Panel } from 'rc-color-picker' |
||||||
|
import "antd/dist/antd.css"; |
||||||
|
import "./styles.css"; |
||||||
|
|
||||||
|
export default function InputColor(props) { |
||||||
|
const { color, onChange } = props; |
||||||
|
|
||||||
|
const [internalColor, setInternalColor] = React.useState(color); |
||||||
|
|
||||||
|
const handleChange = (color) => { |
||||||
|
setInternalColor(color.color); |
||||||
|
|
||||||
|
if (onChange) { |
||||||
|
onChange(color); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const overlay = ( |
||||||
|
<div> |
||||||
|
<Panel |
||||||
|
color={internalColor} |
||||||
|
enableAlpha={false} |
||||||
|
onChange={handleChange} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Input |
||||||
|
value={internalColor || ""} |
||||||
|
onChange={(e) => setInternalColor(e.target.value)} |
||||||
|
suffix={ |
||||||
|
<Dropdown trigger={["click"]} overlay={overlay}> |
||||||
|
<Button style={{ background: internalColor }}> </Button> |
||||||
|
</Dropdown> |
||||||
|
} |
||||||
|
/> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,392 @@ |
|||||||
|
import * as XLSX from 'xlsx'; |
||||||
|
import DialogForm from './DialogForm'; |
||||||
|
import React, { useState, useEffect, useMemo } from 'react'; |
||||||
|
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
|
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_SCHEDULE_HEALTH_ADD, PROJECT_SCHEDULE_HEALTH_EDIT, PROJECT_SCHEDULE_HEALTH_DELETE, PROJECT_SCHEDULE_HEALTH_SEARCH } from '../../../const/ApiConst'; |
||||||
|
import { Pagination, Button, Tooltip, Table } from 'antd'; |
||||||
|
import { useTranslation } from 'react-i18next'; |
||||||
|
|
||||||
|
|
||||||
|
const ProjectScheduleHealth = ({ params, ...props }) => { |
||||||
|
let role_id = '', user_id = '', proyek_id = '', isLogin = '', token = '', company_id = 0, role_name = ''; |
||||||
|
if (props.location.state && props.location.state.role_id && props.location.state.user_id) { |
||||||
|
role_id = props.location.state.role_id; |
||||||
|
user_id = props.location.state.user_id; |
||||||
|
token = props.location.state.token; |
||||||
|
isLogin = props.location.state.isLogin; |
||||||
|
role_name = props.location.state.role_name; |
||||||
|
} else { |
||||||
|
role_id = localStorage.getItem("role_id"); |
||||||
|
proyek_id = localStorage.getItem("proyek_id"); |
||||||
|
user_id = localStorage.getItem("user_id"); |
||||||
|
token = localStorage.getItem("token"); |
||||||
|
isLogin = localStorage.getItem("isLogin"); |
||||||
|
company_id = localStorage.getItem('company_id'); |
||||||
|
role_name = localStorage.getItem('role_name'); |
||||||
|
} |
||||||
|
|
||||||
|
const HEADER = { |
||||||
|
headers: { |
||||||
|
"Content-Type": "application/json", |
||||||
|
"Authorization": `Bearer ${token}` |
||||||
|
} |
||||||
|
} |
||||||
|
const pageName = params.name; |
||||||
|
|
||||||
|
const [alertDelete, setAlertDelete] = useState(false) |
||||||
|
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) |
||||||
|
const [openDialog, setOpenDialog] = useState(false) |
||||||
|
const [openDialogIG, setOpenDialogIG] = useState(false) |
||||||
|
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||||
|
const [search, setSearch] = useState('') |
||||||
|
const [totalPage, setTotalPage] = useState(0) |
||||||
|
const [typeDialog, setTypeDialog] = useState('Save') |
||||||
|
const { t } = useTranslation() |
||||||
|
useEffect(() => { |
||||||
|
getDataProjectScheduleHealth() |
||||||
|
}, [currentPage, rowsPerPage, search]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const cekData = dataExport || [] |
||||||
|
if (cekData.length > 0) { |
||||||
|
exportExcel() |
||||||
|
} |
||||||
|
}, [dataExport]) |
||||||
|
|
||||||
|
const getDataProjectScheduleHealth = async () => { |
||||||
|
let start = 0; |
||||||
|
if (currentPage !== 1 && currentPage > 1) { |
||||||
|
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
|
} |
||||||
|
const payload = { |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"name": "name", |
||||||
|
"logic_operator": "ilike", |
||||||
|
"value": search, |
||||||
|
"operator": "AND" |
||||||
|
} |
||||||
|
], |
||||||
|
"orders": { |
||||||
|
"ascending": true, |
||||||
|
"columns": [ |
||||||
|
'id' |
||||||
|
] |
||||||
|
}, |
||||||
|
"paging": { |
||||||
|
"length": rowsPerPage, |
||||||
|
"start": start |
||||||
|
} |
||||||
|
} |
||||||
|
if (role_name !== "Super Admin") { |
||||||
|
payload.columns.push( |
||||||
|
{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" }, |
||||||
|
) |
||||||
|
} else { |
||||||
|
payload.columns.push( |
||||||
|
{ "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" }, |
||||||
|
) |
||||||
|
} |
||||||
|
const result = await axios |
||||||
|
.post(PROJECT_SCHEDULE_HEALTH_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 { |
||||||
|
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleSearch = e => { |
||||||
|
const value = e.target.value |
||||||
|
setSearch(value); |
||||||
|
setCurrentPage(1) |
||||||
|
}; |
||||||
|
const handleOpenDialog = (type) => { |
||||||
|
setOpenDialog(true) |
||||||
|
setTypeDialog(type) |
||||||
|
} |
||||||
|
|
||||||
|
const handleExportExcel = async () => { |
||||||
|
let start = 0; |
||||||
|
|
||||||
|
if (currentPage !== 1 && currentPage > 1) { |
||||||
|
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
|
} |
||||||
|
|
||||||
|
const payload = { |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"name": "name", |
||||||
|
"logic_operator": "like", |
||||||
|
"value": search, |
||||||
|
"operator": "AND" |
||||||
|
} |
||||||
|
], |
||||||
|
"orders": { |
||||||
|
"ascending": true, |
||||||
|
"columns": [ |
||||||
|
'id' |
||||||
|
] |
||||||
|
}, |
||||||
|
"paging": { |
||||||
|
"length": rowsPerPage, |
||||||
|
"start": start |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const result = await axios |
||||||
|
.post(PROJECT_SCHEDULE_HEALTH_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) => { |
||||||
|
setDataEdit(data) |
||||||
|
handleOpenDialog('Edit'); |
||||||
|
} |
||||||
|
|
||||||
|
const handleDelete = async (id) => { |
||||||
|
await setAlertDelete(true) |
||||||
|
await setIdDelete(id) |
||||||
|
} |
||||||
|
|
||||||
|
const handleCloseDialog = (type, data) => { |
||||||
|
if (type === "save") { |
||||||
|
saveProjectScheduleHealth(data); |
||||||
|
} else if (type === "edit") { |
||||||
|
editMaterialR(data); |
||||||
|
} |
||||||
|
setDataEdit([]) |
||||||
|
setOpenDialog(false) |
||||||
|
} |
||||||
|
|
||||||
|
const saveProjectScheduleHealth = async (data) => { |
||||||
|
const result = await axios.post(PROJECT_SCHEDULE_HEALTH_ADD, data, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectScheduleHealth() |
||||||
|
NotificationManager.success(`Data project schedule health berhasil ditambah`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const editMaterialR = async (data) => { |
||||||
|
let urlEdit = PROJECT_SCHEDULE_HEALTH_EDIT(data.id) |
||||||
|
const result = await axios.put(urlEdit, data, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectScheduleHealth(); |
||||||
|
NotificationManager.success(`Data project schedule health berhasil di edit`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`Data project schedule health gagal di edit`, `Failed!!`); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const toggleAddDialog = () => { |
||||||
|
setOpenDialog(!openDialog) |
||||||
|
} |
||||||
|
|
||||||
|
const handleDialogIg = (id) => { |
||||||
|
setIdPhaseProject(id) |
||||||
|
setOpenDialogIG(true) |
||||||
|
} |
||||||
|
|
||||||
|
const closeDialogIG = () => { |
||||||
|
setIdPhaseProject(0) |
||||||
|
setOpenDialogIG(false) |
||||||
|
} |
||||||
|
|
||||||
|
const toggleDialogIG = () => { |
||||||
|
if (openDialogIG) { |
||||||
|
setIdPhaseProject(0) |
||||||
|
} |
||||||
|
setOpenDialogIG(!openDialogIG); |
||||||
|
} |
||||||
|
|
||||||
|
const onConfirmDelete = async () => { |
||||||
|
let url = PROJECT_SCHEDULE_HEALTH_DELETE(idDelete); |
||||||
|
|
||||||
|
const result = await axios.delete(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataProjectScheduleHealth() |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.success(`Data project schedule health berhasil dihapus!`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.error(`Data project schedule health gagal dihapus!}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const cancelDelete = () => { |
||||||
|
setAlertDelete(false) |
||||||
|
setIdDelete(0) |
||||||
|
} |
||||||
|
|
||||||
|
const onShowSizeChange = (current, pageSize) => { |
||||||
|
setRowsPerPage(pageSize) |
||||||
|
} |
||||||
|
|
||||||
|
const onPagination = (current, pageSize) => { |
||||||
|
setCurrentPage(current) |
||||||
|
} |
||||||
|
|
||||||
|
const dataNotAvailable = () => { |
||||||
|
if (dataTable.length === 0) { |
||||||
|
return ( |
||||||
|
<tr> |
||||||
|
<td align="center" colSpan="3">{t('noData')}</td> |
||||||
|
</tr> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const renderTable = useMemo(() => { |
||||||
|
const columns = [ |
||||||
|
{ |
||||||
|
title: t('action'), |
||||||
|
dataIndex: '', |
||||||
|
key: 'x', |
||||||
|
className: 'nowrap', |
||||||
|
render: (text, record) => <> |
||||||
|
<Tooltip title={t('delete')}> |
||||||
|
<i className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i> |
||||||
|
</Tooltip> |
||||||
|
<Tooltip title={t('Edit')}> |
||||||
|
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i> |
||||||
|
</Tooltip>{" "} |
||||||
|
</>, |
||||||
|
}, |
||||||
|
{ title: t('Project Schedule Health'), dataIndex: 'name', key: 'name', className: "nowrap" }, |
||||||
|
{ |
||||||
|
title: t('color'), |
||||||
|
dataIndex: 'color', |
||||||
|
key: 'color', |
||||||
|
render: (text) => <> |
||||||
|
<Tooltip title={text}> |
||||||
|
<i className="fa fa-square" style={{ color: text }} ></i> |
||||||
|
</Tooltip> |
||||||
|
</>, |
||||||
|
}, |
||||||
|
]; |
||||||
|
return ( |
||||||
|
<Table |
||||||
|
rowKey="id" |
||||||
|
size="small" |
||||||
|
columns={columns} |
||||||
|
dataSource={dataTable} |
||||||
|
pagination={false} |
||||||
|
/> |
||||||
|
) |
||||||
|
}, [dataTable]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<NotificationContainer /> |
||||||
|
<SweetAlert |
||||||
|
show={alertDelete} |
||||||
|
warning |
||||||
|
showCancel |
||||||
|
confirmBtnText="Delete" |
||||||
|
confirmBtnBsStyle="danger" |
||||||
|
title={t('deleteConfirm')} |
||||||
|
onConfirm={onConfirmDelete} |
||||||
|
onCancel={cancelDelete} |
||||||
|
focusCancelBtn |
||||||
|
> |
||||||
|
{t('deleteMsg')} |
||||||
|
</SweetAlert> |
||||||
|
<DialogForm |
||||||
|
openDialog={openDialog} |
||||||
|
closeDialog={handleCloseDialog} |
||||||
|
toggleDialog={() => toggleAddDialog} |
||||||
|
typeDialog={typeDialog} |
||||||
|
dataEdit={dataEdit} |
||||||
|
clickOpenModal={clickOpenModal} |
||||||
|
/> |
||||||
|
<Card> |
||||||
|
<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={t('search')} /> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<Tooltip title={t('Add Project Schedule Health')}> |
||||||
|
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
||||||
|
</Tooltip> |
||||||
|
<Tooltip title={t('exportExcel')}> |
||||||
|
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||||
|
</Tooltip> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</CardHeader> |
||||||
|
<CardBody> |
||||||
|
{renderTable} |
||||||
|
<Pagination |
||||||
|
style={{ marginTop: "25px" }} |
||||||
|
showSizeChanger |
||||||
|
onShowSizeChange={onShowSizeChange} |
||||||
|
onChange={onPagination} |
||||||
|
defaultCurrent={currentPage} |
||||||
|
pageSize={rowsPerPage} |
||||||
|
total={totalPage} |
||||||
|
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
||||||
|
/> |
||||||
|
</CardBody> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default ProjectScheduleHealth; |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
.App { |
||||||
|
font-family: sans-serif; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.rc-color-picker-panel { |
||||||
|
border: 1px solid #ccc; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-inner { |
||||||
|
border: none; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-hsv { |
||||||
|
border-radius: 12px; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-value { |
||||||
|
border: none; |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-saturation { |
||||||
|
border: none; |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-ribbon { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-wrap-preview { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-preview span { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-preview input { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
|
||||||
Loading…
Reference in new issue