wahyu
1 year ago
19 changed files with 1211 additions and 819 deletions
@ -1,142 +1,142 @@
|
||||
{ |
||||
"name": "simpro-web", |
||||
"version": "0.0.1", |
||||
"description": "Sistem Informasi Manajemen Proyek", |
||||
"author": "Ardhi", |
||||
"homepage": ".", |
||||
"copyright": "Copyright Integrasia Utama", |
||||
"license": "MIT", |
||||
"private": true, |
||||
"repository": { |
||||
"type": "http", |
||||
"url": "https://git.oslog.id/iu/simpro-website.git" |
||||
}, |
||||
"dependencies": { |
||||
"@ant-design/plots": "^1.1.1", |
||||
"@ckeditor/ckeditor5-build-classic": "^39.0.2", |
||||
"@ckeditor/ckeditor5-react": "^6.1.0", |
||||
"@coreui/coreui": "^2.1.12", |
||||
"@coreui/icons": "0.3.0", |
||||
"@coreui/react": "^2.5.1", |
||||
"@dabeng/react-orgchart": "^1.0.0", |
||||
"@develoka/angka-rupiah-js": "^1.0.3", |
||||
"@faker-js/faker": "^7.3.0", |
||||
"@iconify/icons-ant-design": "^1.0.6", |
||||
"@iconify/icons-fa-solid": "^1.0.6", |
||||
"@iconify/icons-fe": "^1.0.3", |
||||
"@iconify/icons-geo": "^1.0.3", |
||||
"@iconify/icons-ion": "^1.0.7", |
||||
"@iconify/icons-mdi": "^1.0.57", |
||||
"@iconify/icons-uil": "^1.0.6", |
||||
"@iconify/react": "^1.1.1", |
||||
"@nicholasadamou/react-iframe": "^1.0.3", |
||||
"@reduxjs/toolkit": "^1.9.2", |
||||
"@terrestris/ol-util": "^7.2.0", |
||||
"@terrestris/react-geo": "^12.0.0", |
||||
"alasql": "^1.7.3", |
||||
"antd": "^4.16.13", |
||||
"axios": "^0.21.1", |
||||
"bootstrap": "^4.3.1", |
||||
"chart.js": "^3.9.1", |
||||
"chartjs-plugin-datalabels": "^2.1.0", |
||||
"chartjs-plugin-zoom": "^0.7.7", |
||||
"classnames": "^2.2.6", |
||||
"core-js": "^3.1.4", |
||||
"dhtmlx-gantt": "^7.1.7", |
||||
"dom-to-image": "^2.6.0", |
||||
"enzyme": "^3.10.0", |
||||
"enzyme-adapter-react-16": "^1.14.0", |
||||
"flag-icon-css": "^3.3.0", |
||||
"font-awesome": "^4.7.0", |
||||
"i18next": "^22.4.9", |
||||
"interactjs": "^1.10.11", |
||||
"jspdf": "^2.5.1", |
||||
"jspdf-autotable": "^3.5.25", |
||||
"leaflet": "^1.8.0", |
||||
"leaflet-control-geocoder": "^2.4.0", |
||||
"leaflet-draw": "^1.0.4", |
||||
"leaflet.markercluster": "^1.5.3", |
||||
"moment": "^2.24.0", |
||||
"node-sass": "^4.12.0", |
||||
"numeral": "^2.0.6", |
||||
"ol": "^5.3.3", |
||||
"prop-types": "^15.7.2", |
||||
"rc-color-picker": "^1.2.6", |
||||
"re-resizable": "^6.9.9", |
||||
"react": "^16.14.0", |
||||
"react-app-polyfill": "^1.0.1", |
||||
"react-awesome-query-builder": "^4.3.0", |
||||
"react-bootstrap-sweetalert": "^5.1.9", |
||||
"react-bootstrap-table-next": "^3.3.3", |
||||
"react-bootstrap-table2-editor": "^1.4.0", |
||||
"react-bootstrap-table2-paginator": "^2.1.0", |
||||
"react-bootstrap-table2-toolkit": "^2.1.1", |
||||
"react-calendar-timeline": "^0.27.0", |
||||
"react-chartjs-2": "^4.3.1", |
||||
"react-color": "^2.17.3", |
||||
"react-content-loader": "^6.0.3", |
||||
"react-dom": "^16.14.0", |
||||
"react-excel-renderer": "^1.1.0", |
||||
"react-grid-layout": "^1.2.5", |
||||
"react-highlight-words": "^0.18.0", |
||||
"react-i18next": "^12.1.5", |
||||
"react-leaflet": "^3.2.0", |
||||
"react-leaflet-draw": "^0.19.8", |
||||
"react-loader-spinner": "^3.1.5", |
||||
"react-notifications": "^1.7.2", |
||||
"react-redux": "^8.0.5", |
||||
"react-router-dom": "^5.0.1", |
||||
"react-select": "^4.3.1", |
||||
"react-slick": "^0.28.1", |
||||
"react-tiny-fab": "^4.0.4", |
||||
"react-toastify": "^5.5.0", |
||||
"reactstrap": "^8.0.0", |
||||
"redux": "^4.2.1", |
||||
"redux-persist": "^6.0.0", |
||||
"redux-thunk": "^2.4.2", |
||||
"simple-line-icons": "^2.4.1", |
||||
"slick-carousel": "^1.8.1", |
||||
"underscore": "^1.13.1", |
||||
"xlsx": "^0.17.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@babel/core": "^7.14.5", |
||||
"babel-plugin-module-resolver": "^4.1.0", |
||||
"clean-webpack-plugin": "^3.0.0", |
||||
"cypress": "^12.17.2", |
||||
"react-scripts": "^3.0.1", |
||||
"webpack-sources": "1.0.1" |
||||
}, |
||||
"scripts": { |
||||
"start": "react-scripts start", |
||||
"build": "react-scripts --max_old_space_size=8096 build", |
||||
"test": "react-scripts test", |
||||
"test:cov": "npm test -- --coverage --watchAll=false", |
||||
"test:debug": "react-scripts --inspect-brk test --runInBand", |
||||
"eject": "react-scripts eject" |
||||
}, |
||||
"bugs": { |
||||
"url": "https://git.oslog.id/iu/simpro-website/issues" |
||||
}, |
||||
"eslintConfig": { |
||||
"extends": "react-app" |
||||
}, |
||||
"browserslist": [ |
||||
">0.2%", |
||||
"not dead", |
||||
"not ie <= 9", |
||||
"not op_mini all" |
||||
], |
||||
"jest": { |
||||
"collectCoverageFrom": [ |
||||
"src/**/*.{js,jsx}", |
||||
"!**/*index.js", |
||||
"!src/serviceWorker.js", |
||||
"!src/polyfill.js" |
||||
] |
||||
}, |
||||
"engines": { |
||||
"node": ">=8.10", |
||||
"npm": ">=6" |
||||
} |
||||
} |
||||
{ |
||||
"name": "simpro-web", |
||||
"version": "0.0.1", |
||||
"description": "Sistem Informasi Manajemen Proyek", |
||||
"author": "Ardhi", |
||||
"homepage": ".", |
||||
"copyright": "Copyright Integrasia Utama", |
||||
"license": "MIT", |
||||
"private": true, |
||||
"repository": { |
||||
"type": "http", |
||||
"url": "https://git.oslog.id/iu/simpro-website.git" |
||||
}, |
||||
"dependencies": { |
||||
"@ant-design/plots": "^1.1.1", |
||||
"@ckeditor/ckeditor5-build-classic": "^39.0.2", |
||||
"@ckeditor/ckeditor5-react": "^6.1.0", |
||||
"@coreui/coreui": "^2.1.12", |
||||
"@coreui/icons": "0.3.0", |
||||
"@coreui/react": "^2.5.1", |
||||
"@dabeng/react-orgchart": "^1.0.0", |
||||
"@develoka/angka-rupiah-js": "^1.0.3", |
||||
"@faker-js/faker": "^7.3.0", |
||||
"@iconify/icons-ant-design": "^1.0.6", |
||||
"@iconify/icons-fa-solid": "^1.0.6", |
||||
"@iconify/icons-fe": "^1.0.3", |
||||
"@iconify/icons-geo": "^1.0.3", |
||||
"@iconify/icons-ion": "^1.0.7", |
||||
"@iconify/icons-mdi": "^1.0.57", |
||||
"@iconify/icons-uil": "^1.0.6", |
||||
"@iconify/react": "^1.1.1", |
||||
"@nicholasadamou/react-iframe": "^1.0.3", |
||||
"@reduxjs/toolkit": "^1.9.2", |
||||
"@terrestris/ol-util": "^7.2.0", |
||||
"@terrestris/react-geo": "^12.0.0", |
||||
"alasql": "^1.7.3", |
||||
"antd": "^4.16.13", |
||||
"axios": "^0.21.1", |
||||
"bootstrap": "^4.3.1", |
||||
"chart.js": "^3.9.1", |
||||
"chartjs-plugin-datalabels": "^2.1.0", |
||||
"chartjs-plugin-zoom": "^0.7.7", |
||||
"classnames": "^2.2.6", |
||||
"core-js": "^3.1.4", |
||||
"dhtmlx-gantt": "^7.1.7", |
||||
"dom-to-image": "^2.6.0", |
||||
"enzyme": "^3.10.0", |
||||
"enzyme-adapter-react-16": "^1.14.0", |
||||
"flag-icon-css": "^3.3.0", |
||||
"font-awesome": "^4.7.0", |
||||
"i18next": "^22.4.9", |
||||
"interactjs": "^1.10.11", |
||||
"jspdf": "^2.5.1", |
||||
"jspdf-autotable": "^3.5.25", |
||||
"leaflet": "^1.8.0", |
||||
"leaflet-control-geocoder": "^2.4.0", |
||||
"leaflet-draw": "^1.0.4", |
||||
"leaflet.markercluster": "^1.5.3", |
||||
"moment": "^2.24.0", |
||||
"node-sass": "^4.12.0", |
||||
"numeral": "^2.0.6", |
||||
"ol": "^5.3.3", |
||||
"prop-types": "^15.7.2", |
||||
"rc-color-picker": "^1.2.6", |
||||
"re-resizable": "^6.9.9", |
||||
"react": "^16.14.0", |
||||
"react-app-polyfill": "^1.0.1", |
||||
"react-awesome-query-builder": "^4.3.0", |
||||
"react-bootstrap-sweetalert": "^5.1.9", |
||||
"react-bootstrap-table-next": "^3.3.3", |
||||
"react-bootstrap-table2-editor": "^1.4.0", |
||||
"react-bootstrap-table2-paginator": "^2.1.0", |
||||
"react-bootstrap-table2-toolkit": "^2.1.1", |
||||
"react-calendar-timeline": "^0.27.0", |
||||
"react-chartjs-2": "^4.3.1", |
||||
"react-color": "^2.17.3", |
||||
"react-content-loader": "^6.0.3", |
||||
"react-dom": "^16.14.0", |
||||
"react-excel-renderer": "^1.1.0", |
||||
"react-grid-layout": "^1.2.5", |
||||
"react-highlight-words": "^0.18.0", |
||||
"react-i18next": "^12.1.5", |
||||
"react-leaflet": "^3.2.0", |
||||
"react-leaflet-draw": "^0.19.8", |
||||
"react-loader-spinner": "^3.1.5", |
||||
"react-notifications": "^1.7.2", |
||||
"react-redux": "^8.0.5", |
||||
"react-router-dom": "^5.0.1", |
||||
"react-select": "^4.3.1", |
||||
"react-slick": "^0.28.1", |
||||
"react-tiny-fab": "^4.0.4", |
||||
"react-toastify": "^5.5.0", |
||||
"reactstrap": "^8.0.0", |
||||
"redux": "^4.2.1", |
||||
"redux-persist": "^6.0.0", |
||||
"redux-thunk": "^2.4.2", |
||||
"simple-line-icons": "^2.4.1", |
||||
"slick-carousel": "^1.8.1", |
||||
"underscore": "^1.13.1", |
||||
"xlsx": "^0.17.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@babel/core": "^7.14.5", |
||||
"babel-plugin-module-resolver": "^4.1.0", |
||||
"clean-webpack-plugin": "^3.0.0", |
||||
"cypress": "^12.17.2", |
||||
"react-scripts": "^3.0.1", |
||||
"webpack-sources": "1.0.1" |
||||
}, |
||||
"scripts": { |
||||
"start": "react-scripts start", |
||||
"build": "react-scripts --max_old_space_size=8096 build", |
||||
"test": "react-scripts test", |
||||
"test:cov": "npm test -- --coverage --watchAll=false", |
||||
"test:debug": "react-scripts --inspect-brk test --runInBand", |
||||
"eject": "react-scripts eject" |
||||
}, |
||||
"bugs": { |
||||
"url": "https://git.oslog.id/iu/simpro-website/issues" |
||||
}, |
||||
"eslintConfig": { |
||||
"extends": "react-app" |
||||
}, |
||||
"browserslist": [ |
||||
">0.2%", |
||||
"not dead", |
||||
"not ie <= 9", |
||||
"not op_mini all" |
||||
], |
||||
"jest": { |
||||
"collectCoverageFrom": [ |
||||
"src/**/*.{js,jsx}", |
||||
"!**/*index.js", |
||||
"!src/serviceWorker.js", |
||||
"!src/polyfill.js" |
||||
] |
||||
}, |
||||
"engines": { |
||||
"node": ">=8.10", |
||||
"npm": ">=6" |
||||
} |
||||
} |
||||
|
||||
@ -1,304 +1,305 @@
|
||||
import React, { useEffect, useState, useMemo } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
import { Button, Form } from 'reactstrap'; |
||||
import { Table, Tooltip } from 'antd'; |
||||
import 'antd/dist/antd.css'; |
||||
import moment from 'moment'; |
||||
import { API_ADW, TOKEN_ADW, ASSIGN_HR_PROJECT_SEARCH, ASSIGN_HR_PROJECT_DELETE, USER_LIST, PROJECT_ROLE_SEARCH, ASSIGN_HR_PROJECT_ADD, ASSIGN_HR_PROJECT_EDIT } from '../../../const/ApiConst'; |
||||
import axios from "../../../const/interceptorApi" |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||
import FormAsignHr from './FormAsignHr'; |
||||
import { formatThousand } from '../../../const/CustomFunc'; |
||||
|
||||
const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsResource, proyekName }) => { |
||||
const token = localStorage.getItem("token") |
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
const [dataUserToProject, setdataUserToProject] = useState([]) |
||||
const [alertDelete, setAlertDelete] = useState(false) |
||||
const [idDelete, setIdDelete] = useState(0) |
||||
const [openDialogFormTools, setOpenDialogFormTools] = useState(false) |
||||
const [dataEdit, setDataEdit] = useState(null) |
||||
const [listUser, setListUser] = useState([]) |
||||
const [listRole, setListRole] = useState([]) |
||||
|
||||
useEffect(() => { |
||||
if (idTask > 0) { |
||||
getDataAssignHr(); |
||||
} |
||||
}, [openDialog]); |
||||
|
||||
useEffect(() => { |
||||
if (openDialog) { |
||||
getDataProjectRole(); |
||||
getDataUser(); |
||||
} |
||||
}, [dataUserToProject]) |
||||
|
||||
const getDataAssignHr = async () => { |
||||
const payload = { |
||||
"paging": { |
||||
"start": 0, |
||||
"length": -1 |
||||
}, |
||||
"columns": [ |
||||
{ "name": "name", "logic_operator": "ilike", "value": "", "table_name": "m_users" }, |
||||
{ "name": "proyek_id", "logic_operator": "=", "value": idTask } |
||||
], |
||||
"joins": [ |
||||
{ "name": "m_users", "column_join": "user_id", "column_results": ["name"] }, |
||||
{ "name": "m_role_proyek", "column_join": "project_role", "column_results": ["name"] }, |
||||
], |
||||
"orders": { |
||||
"columns": [ |
||||
"id" |
||||
], |
||||
"ascending": false |
||||
} |
||||
} |
||||
const URL = ASSIGN_HR_PROJECT_SEARCH |
||||
const result = await axios |
||||
.post(URL, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
let dataRes = result.data.data || [] |
||||
|
||||
setdataUserToProject(dataRes); |
||||
} else { |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const getDataUser = async () => { |
||||
const HEADER_ADW = { |
||||
headers: { |
||||
"Authorization": `${TOKEN_ADW}` |
||||
} |
||||
} |
||||
const result = await axios |
||||
// .get(`${API_ADW}employees`, HEADER_ADW)
|
||||
.get(USER_LIST, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.data.length != 0) { |
||||
let dataRes = result.data.data |
||||
setListUser(dataRes) |
||||
} |
||||
} |
||||
|
||||
const getDataProjectRole = async () => { |
||||
const payload = { |
||||
"paging": { |
||||
"start": 0, |
||||
"length": -1 |
||||
}, |
||||
"columns": [ |
||||
{ "name": "created_by", "logic_operator": "ilike", "value": "" }, |
||||
], |
||||
"joins": [], |
||||
"orders": { |
||||
"columns": [ |
||||
"id" |
||||
], |
||||
"ascending": false |
||||
} |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(PROJECT_ROLE_SEARCH, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
let dataRes = result.data.data || [] |
||||
setListRole(dataRes); |
||||
} else { |
||||
} |
||||
} |
||||
|
||||
const handleDelete = (id) => { |
||||
setIdDelete(id) |
||||
setAlertDelete(true) |
||||
} |
||||
|
||||
const cancelDelete = () => { |
||||
setAlertDelete(false) |
||||
setIdDelete(0) |
||||
} |
||||
|
||||
const onConfirmDelete = async () => { |
||||
let urlDel = ASSIGN_HR_PROJECT_DELETE(idDelete) |
||||
const result = await axios.delete(urlDel, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataAssignHr() |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.success(`Data assign human resource berhasil dihapus`, 'Success!!'); |
||||
} else { |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.error(`Data assign human resource gagal dihapus`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
const handleEdit = async (data) => { |
||||
await setDataEdit(data) |
||||
setOpenDialogFormTools(true) |
||||
} |
||||
|
||||
const handleOpenDialogFormTools = () => { |
||||
setOpenDialogFormTools(true) |
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel', 'none') |
||||
} |
||||
|
||||
|
||||
const RenderTable = useMemo(() => { |
||||
const columns = [ |
||||
{ |
||||
title: 'Action', |
||||
dataIndex: '', |
||||
key: 'x', |
||||
className: "nowrap", |
||||
render: (text, record) => <><Tooltip title="Delete Request Resource"> |
||||
<Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button> |
||||
</Tooltip>{" "}<Tooltip title="Edit Request Resource"> |
||||
<Button size={"sm"} color='primary' onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button> |
||||
</Tooltip></>, |
||||
}, |
||||
{ title: 'Name Human Resource', dataIndex: 'join_first_name', key: 'join_first_name', className: "nowrap" }, |
||||
{ title: 'Role Human Resource', dataIndex: 'join_second_name', key: 'join_second_name', className: "nowrap" }, |
||||
{ title: 'Percentage Available User', dataIndex: 'max_used', key: 'max_used', className: "nowrap", render: (text, record) => record.max_used ? formatThousand(record.max_used) : '-' }, |
||||
{ title: 'Standard Rate', dataIndex: 'standart_rate', key: 'standart_rate', className: "nowrap", render: (text, record) => record.standart_rate ? formatThousand(record.standart_rate) : '-' }, |
||||
{ title: 'UOM Standard Rate', dataIndex: 'uom_standart_rate', key: 'uom_standart_rate', className: "nowrap" }, |
||||
{ title: 'Overtime Rate', dataIndex: 'overtime_rate', key: 'overtime_rate', className: "nowrap", render: (text, record) => record.overtime_rate ? formatThousand(record.overtime_rate) : '-' }, |
||||
{ title: 'UOM Overtime Rate', dataIndex: 'uom_overtime_rate', key: 'uom_overtime_rate', className: "nowrap" }, |
||||
|
||||
]; |
||||
|
||||
return ( |
||||
<Table |
||||
size="small" |
||||
columns={columns} |
||||
dataSource={dataUserToProject} |
||||
pagination={{ position: ["bottomLeft"] }} |
||||
/> |
||||
) |
||||
}, [dataUserToProject]) |
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<div style={{"overflowX":"scroll"}}> |
||||
{RenderTable} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
const handleCloseDialogFormTools = (type, data) => { |
||||
if(type=="add"){ |
||||
addDataAssignHr(data); |
||||
}else if(type=="edit"){ |
||||
editDataAssignHr(data); |
||||
}else{ |
||||
setDataEdit(null) |
||||
setOpenDialogFormTools(false) |
||||
} |
||||
} |
||||
|
||||
const addDataAssignHr = async (payload) => { |
||||
const result = await axios |
||||
.post(ASSIGN_HR_PROJECT_ADD, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
getDataAssignHr(); |
||||
NotificationManager.success('assign human resource berhasil!!', 'Success'); |
||||
setDataEdit(null) |
||||
setOpenDialogFormTools(false) |
||||
} else { |
||||
NotificationManager.error('assign human resource gagal!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const editDataAssignHr = async (payload) => { |
||||
let url = ASSIGN_HR_PROJECT_EDIT(payload.id) |
||||
const result = await axios |
||||
.put(url, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
getDataAssignHr(); |
||||
NotificationManager.success('assign human resource berhasil diedit!!', 'Success'); |
||||
setDataEdit(null) |
||||
setOpenDialogFormTools(false) |
||||
} else { |
||||
NotificationManager.error('assign human resource gagal diedit!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const toogleDialogFormTools = () => { |
||||
if (openDialogFormTools) { |
||||
setDataEdit(null) |
||||
} |
||||
setOpenDialogFormTools(!openDialogFormTools) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<NotificationContainer /> |
||||
<SweetAlert |
||||
show={alertDelete} |
||||
warning |
||||
showCancel |
||||
confirmBtnText="Delete" |
||||
confirmBtnBsStyle="danger" |
||||
title={`Are you sure?`} |
||||
onConfirm={onConfirmDelete} |
||||
onCancel={() => cancelDelete()} |
||||
focusCancelBtn |
||||
> |
||||
Delete this data |
||||
</SweetAlert> |
||||
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize withBtn" toggle={closeDialog}> |
||||
|
||||
<div>Assign Human Resource - {proyekName}</div> <Button onClick={handleOpenDialogFormTools} size='sm' color="primary"><i className='fa fa-plus'></i></Button> |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
{renderForm()} |
||||
</ModalBody> |
||||
{/* <ModalFooter> |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Close</Button> |
||||
</ModalFooter> */} |
||||
</Modal> |
||||
<FormAsignHr |
||||
openDialog={openDialogFormTools} |
||||
closeDialog={handleCloseDialogFormTools} |
||||
toggleDialog={toogleDialogFormTools} |
||||
idTask={idTask} |
||||
dataEdit={dataEdit} |
||||
dataHr={listUser} |
||||
dataRole={listRole} |
||||
dataCurrentHr={dataUserToProject} |
||||
/> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default AssignHrProject; |
||||
import React, { useEffect, useState, useMemo } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
import { Button, Form } from 'reactstrap'; |
||||
import { Table, Tooltip } from 'antd'; |
||||
import 'antd/dist/antd.css'; |
||||
import moment from 'moment'; |
||||
import { API_ADW, TOKEN_ADW, ASSIGN_HR_PROJECT_SEARCH, ASSIGN_HR_PROJECT_DELETE, USER_LIST, PROJECT_ROLE_SEARCH, ASSIGN_HR_PROJECT_ADD, ASSIGN_HR_PROJECT_EDIT } from '../../../const/ApiConst'; |
||||
import axios from "../../../const/interceptorApi" |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||
import FormAsignHr from './FormAsignHr'; |
||||
import { formatThousand } from '../../../const/CustomFunc'; |
||||
|
||||
const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsResource, proyekName }) => { |
||||
const token = localStorage.getItem("token") |
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
const [dataUserToProject, setdataUserToProject] = useState([]) |
||||
const [alertDelete, setAlertDelete] = useState(false) |
||||
const [idDelete, setIdDelete] = useState(0) |
||||
const [openDialogFormTools, setOpenDialogFormTools] = useState(false) |
||||
const [dataEdit, setDataEdit] = useState(null) |
||||
const [listUser, setListUser] = useState([]) |
||||
const [listRole, setListRole] = useState([]) |
||||
|
||||
useEffect(() => { |
||||
if (idTask > 0) { |
||||
getDataAssignHr(); |
||||
} |
||||
}, [openDialog]); |
||||
|
||||
useEffect(() => { |
||||
if (openDialog) { |
||||
getDataProjectRole(); |
||||
getDataUser(); |
||||
} |
||||
}, [dataUserToProject]) |
||||
|
||||
const getDataAssignHr = async () => { |
||||
const payload = { |
||||
"paging": { |
||||
"start": 0, |
||||
"length": -1 |
||||
}, |
||||
"columns": [ |
||||
{ "name": "name", "logic_operator": "ilike", "value": "", "table_name": "m_users" }, |
||||
{ "name": "proyek_id", "logic_operator": "=", "value": idTask }, |
||||
{ "name": "is_customer", "logic_operator": "=", "value": "false" } |
||||
], |
||||
"joins": [ |
||||
{ "name": "m_users", "column_join": "user_id", "column_results": ["name"] }, |
||||
{ "name": "m_role_proyek", "column_join": "project_role", "column_results": ["name"] }, |
||||
], |
||||
"orders": { |
||||
"columns": [ |
||||
"id" |
||||
], |
||||
"ascending": false |
||||
} |
||||
} |
||||
const URL = ASSIGN_HR_PROJECT_SEARCH |
||||
const result = await axios |
||||
.post(URL, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
let dataRes = result.data.data || [] |
||||
|
||||
setdataUserToProject(dataRes); |
||||
} else { |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const getDataUser = async () => { |
||||
const HEADER_ADW = { |
||||
headers: { |
||||
"Authorization": `${TOKEN_ADW}` |
||||
} |
||||
} |
||||
const result = await axios |
||||
// .get(`${API_ADW}employees`, HEADER_ADW)
|
||||
.get(USER_LIST, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.data.length != 0) { |
||||
let dataRes = result.data.data |
||||
setListUser(dataRes) |
||||
} |
||||
} |
||||
|
||||
const getDataProjectRole = async () => { |
||||
const payload = { |
||||
"paging": { |
||||
"start": 0, |
||||
"length": -1 |
||||
}, |
||||
"columns": [ |
||||
{ "name": "created_by", "logic_operator": "ilike", "value": "" }, |
||||
], |
||||
"joins": [], |
||||
"orders": { |
||||
"columns": [ |
||||
"id" |
||||
], |
||||
"ascending": false |
||||
} |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(PROJECT_ROLE_SEARCH, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
let dataRes = result.data.data || [] |
||||
setListRole(dataRes); |
||||
} else { |
||||
} |
||||
} |
||||
|
||||
const handleDelete = (id) => { |
||||
setIdDelete(id) |
||||
setAlertDelete(true) |
||||
} |
||||
|
||||
const cancelDelete = () => { |
||||
setAlertDelete(false) |
||||
setIdDelete(0) |
||||
} |
||||
|
||||
const onConfirmDelete = async () => { |
||||
let urlDel = ASSIGN_HR_PROJECT_DELETE(idDelete) |
||||
const result = await axios.delete(urlDel, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataAssignHr() |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.success(`Data assign human resource berhasil dihapus`, 'Success!!'); |
||||
} else { |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.error(`Data assign human resource gagal dihapus`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
const handleEdit = async (data) => { |
||||
await setDataEdit(data) |
||||
setOpenDialogFormTools(true) |
||||
} |
||||
|
||||
const handleOpenDialogFormTools = () => { |
||||
setOpenDialogFormTools(true) |
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel', 'none') |
||||
} |
||||
|
||||
|
||||
const RenderTable = useMemo(() => { |
||||
const columns = [ |
||||
{ |
||||
title: 'Action', |
||||
dataIndex: '', |
||||
key: 'x', |
||||
className: "nowrap", |
||||
render: (text, record) => <><Tooltip title="Delete Request Resource"> |
||||
<Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button> |
||||
</Tooltip>{" "}<Tooltip title="Edit Request Resource"> |
||||
<Button size={"sm"} color='primary' onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button> |
||||
</Tooltip></>, |
||||
}, |
||||
{ title: 'Name Human Resource', dataIndex: 'join_first_name', key: 'join_first_name', className: "nowrap" }, |
||||
{ title: 'Role Human Resource', dataIndex: 'join_second_name', key: 'join_second_name', className: "nowrap" }, |
||||
{ title: 'Percentage Available User', dataIndex: 'max_used', key: 'max_used', className: "nowrap", render: (text, record) => record.max_used ? formatThousand(record.max_used) : '-' }, |
||||
{ title: 'Standard Rate', dataIndex: 'standart_rate', key: 'standart_rate', className: "nowrap", render: (text, record) => record.standart_rate ? formatThousand(record.standart_rate) : '-' }, |
||||
{ title: 'UOM Standard Rate', dataIndex: 'uom_standart_rate', key: 'uom_standart_rate', className: "nowrap" }, |
||||
{ title: 'Overtime Rate', dataIndex: 'overtime_rate', key: 'overtime_rate', className: "nowrap", render: (text, record) => record.overtime_rate ? formatThousand(record.overtime_rate) : '-' }, |
||||
{ title: 'UOM Overtime Rate', dataIndex: 'uom_overtime_rate', key: 'uom_overtime_rate', className: "nowrap" }, |
||||
|
||||
]; |
||||
|
||||
return ( |
||||
<Table |
||||
size="small" |
||||
columns={columns} |
||||
dataSource={dataUserToProject} |
||||
pagination={{ position: ["bottomLeft"] }} |
||||
/> |
||||
) |
||||
}, [dataUserToProject]) |
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<div style={{"overflowX":"scroll"}}> |
||||
{RenderTable} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
const handleCloseDialogFormTools = (type, data) => { |
||||
if(type=="add"){ |
||||
addDataAssignHr(data); |
||||
}else if(type=="edit"){ |
||||
editDataAssignHr(data); |
||||
}else{ |
||||
setDataEdit(null) |
||||
setOpenDialogFormTools(false) |
||||
} |
||||
} |
||||
|
||||
const addDataAssignHr = async (payload) => { |
||||
const result = await axios |
||||
.post(ASSIGN_HR_PROJECT_ADD, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
getDataAssignHr(); |
||||
NotificationManager.success('assign human resource berhasil!!', 'Success'); |
||||
setDataEdit(null) |
||||
setOpenDialogFormTools(false) |
||||
} else { |
||||
NotificationManager.error('assign human resource gagal!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const editDataAssignHr = async (payload) => { |
||||
let url = ASSIGN_HR_PROJECT_EDIT(payload.id) |
||||
const result = await axios |
||||
.put(url, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
getDataAssignHr(); |
||||
NotificationManager.success('assign human resource berhasil diedit!!', 'Success'); |
||||
setDataEdit(null) |
||||
setOpenDialogFormTools(false) |
||||
} else { |
||||
NotificationManager.error('assign human resource gagal diedit!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const toogleDialogFormTools = () => { |
||||
if (openDialogFormTools) { |
||||
setDataEdit(null) |
||||
} |
||||
setOpenDialogFormTools(!openDialogFormTools) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<NotificationContainer /> |
||||
<SweetAlert |
||||
show={alertDelete} |
||||
warning |
||||
showCancel |
||||
confirmBtnText="Delete" |
||||
confirmBtnBsStyle="danger" |
||||
title={`Are you sure?`} |
||||
onConfirm={onConfirmDelete} |
||||
onCancel={() => cancelDelete()} |
||||
focusCancelBtn |
||||
> |
||||
Delete this data |
||||
</SweetAlert> |
||||
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize withBtn" toggle={closeDialog}> |
||||
|
||||
<div>Assign Human Resource - {proyekName}</div> <Button onClick={handleOpenDialogFormTools} size='sm' color="primary"><i className='fa fa-plus'></i></Button> |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
{renderForm()} |
||||
</ModalBody> |
||||
{/* <ModalFooter> |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Close</Button> |
||||
</ModalFooter> */} |
||||
</Modal> |
||||
<FormAsignHr |
||||
openDialog={openDialogFormTools} |
||||
closeDialog={handleCloseDialogFormTools} |
||||
toggleDialog={toogleDialogFormTools} |
||||
idTask={idTask} |
||||
dataEdit={dataEdit} |
||||
dataHr={listUser} |
||||
dataRole={listRole} |
||||
dataCurrentHr={dataUserToProject} |
||||
/> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default AssignHrProject; |
||||
|
||||
@ -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,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