wahyun
10 months ago
8 changed files with 985 additions and 984 deletions
@ -1,479 +1,480 @@ |
|||||||
import React, { useState, useEffect, useMemo } from 'react'; |
import React, { useState, useEffect, useMemo } from 'react'; |
||||||
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; |
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; |
||||||
import { DownloadOutlined } from '@ant-design/icons'; |
import { DownloadOutlined } from '@ant-design/icons'; |
||||||
import axios from 'axios'; |
import axios from 'axios'; |
||||||
import * as XLSX from 'xlsx'; |
import * as XLSX from 'xlsx'; |
||||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
import DialogForm from './DialogForm'; |
import DialogForm from './DialogForm'; |
||||||
import DialogFormSub from './DialogFormSub'; |
import DialogFormSub from './DialogFormSub'; |
||||||
import SubProyekComp from './SubProyekComp'; |
import SubProyekComp from './SubProyekComp'; |
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||||
import { Pagination, Table, Button, Tooltip } from 'antd'; |
import { Pagination, Table, Button, Tooltip } from 'antd'; |
||||||
import { BASE_SIMPRO, PROYEK_ADD, PROYEK_SEARCH, PROYEK_EDIT, PROYEK_DELETE } from '../../../const/ApiConst'; |
import { BASE_SIMPRO, PROYEK_ADD, PROYEK_SEARCH, PROYEK_EDIT, PROYEK_DELETE } from '../../../const/ApiConst'; |
||||||
import { formatRupiah } from '../../../const/CustomFunc' |
import { formatRupiah } from '../../../const/CustomFunc' |
||||||
import moment from 'moment' |
import moment from 'moment' |
||||||
|
|
||||||
const format = "DD-MM-YYYY"; |
const format = "DD-MM-YYYY"; |
||||||
const data = [ |
const data = [ |
||||||
{ |
{ |
||||||
key: 1, |
key: 1, |
||||||
name: 'John Brown', |
name: 'John Brown', |
||||||
age: 32, |
age: 32, |
||||||
address: 'New York No. 1 Lake Park', |
address: 'New York No. 1 Lake Park', |
||||||
description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.', |
description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.', |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
key: 2, |
key: 2, |
||||||
name: 'Jim Green', |
name: 'Jim Green', |
||||||
age: 42, |
age: 42, |
||||||
address: 'London No. 1 Lake Park', |
address: 'London No. 1 Lake Park', |
||||||
description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.', |
description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.', |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
key: 3, |
key: 3, |
||||||
name: 'Not Expandable', |
name: 'Not Expandable', |
||||||
age: 29, |
age: 29, |
||||||
address: 'Jiangsu No. 1 Lake Park', |
address: 'Jiangsu No. 1 Lake Park', |
||||||
description: 'This not expandable', |
description: 'This not expandable', |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
key: 4, |
key: 4, |
||||||
name: 'Joe Black', |
name: 'Joe Black', |
||||||
age: 32, |
age: 32, |
||||||
address: 'Sidney No. 1 Lake Park', |
address: 'Sidney No. 1 Lake Park', |
||||||
description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.', |
description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.', |
||||||
}, |
}, |
||||||
]; |
]; |
||||||
|
|
||||||
const url = ""; |
const url = ""; |
||||||
const proyek_id = localStorage.getItem('proyek_id'); |
const proyek_id = localStorage.getItem('proyek_id'); |
||||||
const role_id = localStorage.getItem('role_id'); |
const role_id = localStorage.getItem('role_id'); |
||||||
|
const company_id = window.localStorage.getItem('company_id'); |
||||||
const IndexRole = ({ params }) => { |
|
||||||
const token = localStorage.getItem("token") |
const IndexRole = ({ params }) => { |
||||||
const HEADER = { |
const token = localStorage.getItem("token") |
||||||
headers: { |
const HEADER = { |
||||||
"Content-Type": "application/json", |
headers: { |
||||||
"Authorization": `Bearer ${token}` |
"Content-Type": "application/json", |
||||||
} |
"Authorization": `Bearer ${token}` |
||||||
} |
} |
||||||
const [idTask, setidTask] = useState(0); |
} |
||||||
const [dataTable, setDatatable] = useState([]) |
const [idTask, setidTask] = useState(0); |
||||||
const [search, setSearch] = useState('') |
const [dataTable, setDatatable] = useState([]) |
||||||
const [currentPage, setCurrentPage] = useState(1) |
const [search, setSearch] = useState('') |
||||||
const [totalPage, setTotalPage] = useState(0) |
const [currentPage, setCurrentPage] = useState(1) |
||||||
const [openDialog, setOpenDialog] = useState(false) |
const [totalPage, setTotalPage] = useState(0) |
||||||
const [openDialogSub, setOpenDialogSub] = useState(false) |
const [openDialog, setOpenDialog] = useState(false) |
||||||
const [openDialogMap, setOpenDialogMap] = useState(false) |
const [openDialogSub, setOpenDialogSub] = useState(false) |
||||||
const [typeDialog, setTypeDialog] = useState('Save'); |
const [openDialogMap, setOpenDialogMap] = useState(false) |
||||||
const [typeDialogSub, setTypeDialogSub] = useState('Save') |
const [typeDialog, setTypeDialog] = useState('Save'); |
||||||
const [idDelete, setIdDelete] = useState(0) |
const [typeDialogSub, setTypeDialogSub] = useState('Save') |
||||||
const [alertDelete, setAlertDelete] = useState(false) |
const [idDelete, setIdDelete] = useState(0) |
||||||
const [dataEdit, setDataEdit] = useState([]) |
const [alertDelete, setAlertDelete] = useState(false) |
||||||
const [dataEditSub, setDataEditSub] = useState([]) |
const [dataEdit, setDataEdit] = useState([]) |
||||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
const [dataEditSub, setDataEditSub] = useState([]) |
||||||
const [clickOpenModal, setClickOpenModal] = useState(false) |
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||||
const [dataExport, setDataExport] = useState([]) |
const [clickOpenModal, setClickOpenModal] = useState(false) |
||||||
const [allDataMenu, setAllDataMenu] = useState([]) |
const [dataExport, setDataExport] = useState([]) |
||||||
const pageName = params.name; |
const [allDataMenu, setAllDataMenu] = useState([]) |
||||||
useEffect(() => { |
const pageName = params.name; |
||||||
getDataProyek(); |
useEffect(() => { |
||||||
}, []) |
getDataProyek(); |
||||||
|
}, []) |
||||||
useEffect(() => { |
|
||||||
getDataProyek(); |
useEffect(() => { |
||||||
}, [search, rowsPerPage, currentPage]) |
getDataProyek(); |
||||||
|
}, [search, rowsPerPage, currentPage]) |
||||||
useEffect(() => { |
|
||||||
const cekData = dataExport || [] |
useEffect(() => { |
||||||
if (cekData.length > 0) { |
const cekData = dataExport || [] |
||||||
exportExcel() |
if (cekData.length > 0) { |
||||||
} |
exportExcel() |
||||||
}, [dataExport]) |
} |
||||||
|
}, [dataExport]) |
||||||
const handleSearch = e => { |
|
||||||
const value = e.target.value |
const handleSearch = e => { |
||||||
setSearch(value); |
const value = e.target.value |
||||||
setCurrentPage(1) |
setSearch(value); |
||||||
}; |
setCurrentPage(1) |
||||||
|
}; |
||||||
const getDataProyek = async () => { |
|
||||||
|
const getDataProyek = async () => { |
||||||
|
|
||||||
let start = 0; |
|
||||||
|
let start = 0; |
||||||
if (currentPage !== 1 && currentPage > 1) { |
|
||||||
start = (currentPage * rowsPerPage) - rowsPerPage |
if (currentPage !== 1 && currentPage > 1) { |
||||||
} |
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
|
} |
||||||
const payload = { |
|
||||||
"columns": [ |
const payload = { |
||||||
{ "name": "nama", "logic_operator": "ilike", "value": "", "operator": "AND" } |
"columns": [ |
||||||
], |
{ "name": "nama", "logic_operator": "ilike", "value": "", "operator": "AND" } |
||||||
"joins": [ |
], |
||||||
{ "name": "subproyeks.m_proyek", "column_join": "proyek_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] }, |
"joins": [ |
||||||
{ "name": "subproyeks.m_subproyek", "column_join": "parent_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] } |
{ "name": "subproyeks.m_proyek", "column_join": "proyek_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] }, |
||||||
], |
{ "name": "subproyeks.m_subproyek", "column_join": "parent_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] } |
||||||
"orders": { "columns": ["id"], "ascending": true }, |
], |
||||||
"paging": { "start": 0, "length": 25 } |
"orders": { "columns": ["id"], "ascending": true }, |
||||||
} |
"paging": { "start": 0, "length": 25 } |
||||||
|
} |
||||||
|
|
||||||
if (parseInt(role_id) !== 1) { |
|
||||||
payload["columns"] = [ |
if (parseInt(role_id) !== 1) { |
||||||
{ "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } |
payload["columns"] = [ |
||||||
] |
{ "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } |
||||||
} |
] |
||||||
|
} |
||||||
|
|
||||||
const URL = `${BASE_SIMPRO}/proyek/search-detail` |
|
||||||
const result = await axios |
const URL = `${BASE_SIMPRO}/proyek/search-detail` |
||||||
.post(URL, payload, HEADER) |
const result = await axios |
||||||
.then(res => res) |
.post(URL, payload, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
if (result && result.data && result.data.code == 200) { |
|
||||||
let dataRes = result.data.data || [] |
if (result && result.data && result.data.code == 200) { |
||||||
let dataWithKey = getChildrenTree(dataRes) |
let dataRes = result.data.data || [] |
||||||
setDatatable(dataWithKey); |
let dataWithKey = getChildrenTree(dataRes) |
||||||
setTotalPage(result.data.totalRecord); |
setDatatable(dataWithKey); |
||||||
} else { |
setTotalPage(result.data.totalRecord); |
||||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
} else { |
||||||
} |
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
} |
} |
||||||
|
} |
||||||
const getChildrenTree = (data) => ( |
|
||||||
data.map((item, index) => { |
const getChildrenTree = (data) => ( |
||||||
let arrSubProyek = item.subproyeks |
data.map((item, index) => { |
||||||
if (item.subproyeks && item.subproyeks.length > 0) { |
let arrSubProyek = item.subproyeks |
||||||
return { |
if (item.subproyeks && item.subproyeks.length > 0) { |
||||||
"key": Math.random(), |
return { |
||||||
"subproyeks2": getChildrenTree(item.subproyeks), |
"key": Math.random(), |
||||||
...item |
"subproyeks2": getChildrenTree(item.subproyeks), |
||||||
} |
...item |
||||||
} |
} |
||||||
else if (item.plannings && item.plannings.length > 0) { |
} |
||||||
return { |
else if (item.plannings && item.plannings.length > 0) { |
||||||
"key": Math.random(), |
return { |
||||||
"plannings2": getChildrenTree(item.plannings), |
"key": Math.random(), |
||||||
...item |
"plannings2": getChildrenTree(item.plannings), |
||||||
} |
...item |
||||||
} else { |
} |
||||||
return { |
} else { |
||||||
"key": Math.random(), |
return { |
||||||
...item |
"key": Math.random(), |
||||||
} |
...item |
||||||
} |
} |
||||||
}) |
} |
||||||
) |
}) |
||||||
|
) |
||||||
const handleOpenDialog = (type) => { |
|
||||||
setOpenDialog(true) |
const handleOpenDialog = (type) => { |
||||||
setTypeDialog(type) |
setOpenDialog(true) |
||||||
} |
setTypeDialog(type) |
||||||
|
} |
||||||
const handleOpenDialogSub = (type, param) => { |
|
||||||
setidTask(param.id) |
const handleOpenDialogSub = (type, param) => { |
||||||
setOpenDialogSub(true) |
setidTask(param.id) |
||||||
setTypeDialogSub(type) |
setOpenDialogSub(true) |
||||||
} |
setTypeDialogSub(type) |
||||||
|
} |
||||||
const handleCloseDialog = (type, data) => { |
|
||||||
if (type === "save") { |
const handleCloseDialog = (type, data) => { |
||||||
saveProyek(data); |
if (type === "save") { |
||||||
} else if (type === "edit") { |
saveProyek(data); |
||||||
editProyek(data); |
} else if (type === "edit") { |
||||||
} |
editProyek(data); |
||||||
setDataEdit([]) |
} |
||||||
setOpenDialog(false) |
setDataEdit([]) |
||||||
} |
setOpenDialog(false) |
||||||
|
} |
||||||
const handleCloseDialogSub = (type, data) => { |
|
||||||
setDataEditSub([]) |
const handleCloseDialogSub = (type, data) => { |
||||||
setOpenDialogSub(false) |
setDataEditSub([]) |
||||||
if (type !== "cancel") { |
setOpenDialogSub(false) |
||||||
getDataProyek() |
if (type !== "cancel") { |
||||||
} |
getDataProyek() |
||||||
} |
} |
||||||
|
} |
||||||
const handleCloseDialogMap = () => { |
|
||||||
setOpenDialogMap(false) |
const handleCloseDialogMap = () => { |
||||||
} |
setOpenDialogMap(false) |
||||||
|
} |
||||||
const toggleAddDialog = () => { |
|
||||||
setOpenDialog(!openDialog) |
const toggleAddDialog = () => { |
||||||
} |
setOpenDialog(!openDialog) |
||||||
|
} |
||||||
const toggleAddDialogSub = () => { |
|
||||||
setOpenDialogSub(!openDialogSub) |
const toggleAddDialogSub = () => { |
||||||
} |
setOpenDialogSub(!openDialogSub) |
||||||
|
} |
||||||
const toggleMapDialog = () => { |
|
||||||
setOpenDialogMap(!openDialogMap) |
const toggleMapDialog = () => { |
||||||
} |
setOpenDialogMap(!openDialogMap) |
||||||
|
} |
||||||
const onConfirmDelete = async () => { |
|
||||||
let urlDel = PROYEK_DELETE(idDelete) |
const onConfirmDelete = async () => { |
||||||
const result = await axios.delete(urlDel, HEADER) |
let urlDel = PROYEK_DELETE(idDelete, company_id); |
||||||
.then(res => res) |
const result = await axios.delete(urlDel, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataProyek() |
if (result && result.data && result.data.code === 200) { |
||||||
setIdDelete(0) |
getDataProyek() |
||||||
setAlertDelete(false) |
setIdDelete(0) |
||||||
NotificationManager.success(`Data proyek berhasil dihapus`, 'Success!!'); |
setAlertDelete(false) |
||||||
} else { |
NotificationManager.success(`Data proyek berhasil dihapus`, 'Success!!'); |
||||||
setIdDelete(0) |
} else { |
||||||
setAlertDelete(false) |
setIdDelete(0) |
||||||
NotificationManager.error(`Data proyek gagal dihapus`, 'Failed!!'); |
setAlertDelete(false) |
||||||
} |
NotificationManager.error(`Data proyek gagal dihapus`, 'Failed!!'); |
||||||
} |
} |
||||||
|
} |
||||||
const saveProyek = async (data) => { |
|
||||||
const formData = data |
const saveProyek = async (data) => { |
||||||
|
const formData = data |
||||||
const result = await axios.post(PROYEK_ADD, formData, HEADER) |
|
||||||
.then(res => res) |
const result = await axios.post(PROYEK_ADD, formData, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataProyek(); |
if (result && result.data && result.data.code === 200) { |
||||||
NotificationManager.success(`Data proyek berhasil ditambah`, 'Success!!'); |
getDataProyek(); |
||||||
} else { |
NotificationManager.success(`Data proyek berhasil ditambah`, 'Success!!'); |
||||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
} else { |
||||||
} |
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
} |
|
||||||
|
} |
||||||
const editProyek = async (data) => { |
|
||||||
|
const editProyek = async (data) => { |
||||||
let urlEdit = PROYEK_EDIT(data.id) |
|
||||||
const formData = data |
let urlEdit = PROYEK_EDIT(data.id) |
||||||
|
const formData = data |
||||||
const result = await axios.put(urlEdit, formData, HEADER) |
|
||||||
.then(res => res) |
const result = await axios.put(urlEdit, formData, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataProyek(); |
if (result && result.data && result.data.code === 200) { |
||||||
NotificationManager.success(`Data proyek berhasil diedit`, 'Success!!'); |
getDataProyek(); |
||||||
} else { |
NotificationManager.success(`Data proyek berhasil diedit`, 'Success!!'); |
||||||
NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); |
} else { |
||||||
} |
NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
} |
||||||
|
|
||||||
const handleEdit = (data) => { |
|
||||||
setDataEdit(data) |
const handleEdit = (data) => { |
||||||
handleOpenDialog('Edit'); |
setDataEdit(data) |
||||||
} |
handleOpenDialog('Edit'); |
||||||
|
} |
||||||
const handleDelete = async (id) => { |
|
||||||
await setAlertDelete(true) |
const handleDelete = async (id) => { |
||||||
await setIdDelete(id) |
await setAlertDelete(true) |
||||||
} |
await setIdDelete(id) |
||||||
|
} |
||||||
const onShowSizeChange = (current, pageSize) => { |
|
||||||
setRowsPerPage(pageSize) |
const onShowSizeChange = (current, pageSize) => { |
||||||
} |
setRowsPerPage(pageSize) |
||||||
|
} |
||||||
const onPagination = (current, pageSize) => { |
|
||||||
setCurrentPage(current) |
const onPagination = (current, pageSize) => { |
||||||
} |
setCurrentPage(current) |
||||||
|
} |
||||||
const handleExportExcel = async () => { |
|
||||||
|
const handleExportExcel = async () => { |
||||||
const payload = { |
|
||||||
"paging": { "start": 0, "length": -1 }, |
const payload = { |
||||||
"joins": [], |
"paging": { "start": 0, "length": -1 }, |
||||||
"orders": { "columns": ["id"], "ascending": false } |
"joins": [], |
||||||
} |
"orders": { "columns": ["id"], "ascending": false } |
||||||
|
} |
||||||
if (parseInt(role_id) !== 1) { |
|
||||||
payload["columns"] = [ |
if (parseInt(role_id) !== 1) { |
||||||
{ "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } |
payload["columns"] = [ |
||||||
] |
{ "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } |
||||||
} |
] |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
const result = await axios |
|
||||||
.post(PROYEK_SEARCH, payload, HEADER) |
const result = await axios |
||||||
.then(res => res) |
.post(PROYEK_SEARCH, payload, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
if (result && result.data && result.data.code == 200) { |
|
||||||
let resData = result.data.data; |
if (result && result.data && result.data.code == 200) { |
||||||
const excelData = []; |
let resData = result.data.data; |
||||||
resData.map((n, index) => { |
const excelData = []; |
||||||
let dataRow = { |
resData.map((n, index) => { |
||||||
"Nama Proyek": n.nama, |
let dataRow = { |
||||||
"Biaya": n.biaya, |
"Nama Proyek": n.nama, |
||||||
"Color Progress": n.color_progress, |
"Biaya": n.biaya, |
||||||
"Jumlah Pekerja": n.jumlah_pekerja, |
"Color Progress": n.color_progress, |
||||||
"Tanggal Mulai": n.mulai_proyek ? moment(n.mulai_proyek).format(format) : "-", |
"Jumlah Pekerja": n.jumlah_pekerja, |
||||||
"Tanggal Selesai": n.akhir_proyek ? moment(n.akhir_proyek).format(format) : "-", |
"Tanggal Mulai": n.mulai_proyek ? moment(n.mulai_proyek).format(format) : "-", |
||||||
} |
"Tanggal Selesai": n.akhir_proyek ? moment(n.akhir_proyek).format(format) : "-", |
||||||
excelData.push(dataRow) |
} |
||||||
}) |
excelData.push(dataRow) |
||||||
await setDataExport(excelData); |
}) |
||||||
} else { |
await setDataExport(excelData); |
||||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
} else { |
||||||
} |
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
||||||
} |
} |
||||||
|
} |
||||||
const exportExcel = () => { |
|
||||||
const dataExcel = dataExport || []; |
const exportExcel = () => { |
||||||
const fileName = `Data ${pageName}.xlsx`; |
const dataExcel = dataExport || []; |
||||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
const fileName = `Data ${pageName}.xlsx`; |
||||||
const wb = XLSX.utils.book_new(); |
const ws = XLSX.utils.json_to_sheet(dataExcel); |
||||||
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
const wb = XLSX.utils.book_new(); |
||||||
|
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
||||||
XLSX.writeFile(wb, fileName); |
|
||||||
setDataExport([]) |
XLSX.writeFile(wb, fileName); |
||||||
} |
setDataExport([]) |
||||||
|
} |
||||||
const cancelDelete = () => { |
|
||||||
setAlertDelete(false) |
const cancelDelete = () => { |
||||||
setIdDelete(0) |
setAlertDelete(false) |
||||||
} |
setIdDelete(0) |
||||||
|
} |
||||||
const renderProggress = (color) => { |
|
||||||
if (color === "green") { |
const renderProggress = (color) => { |
||||||
return "Aman" |
if (color === "green") { |
||||||
} else if (color === "orange") { |
return "Aman" |
||||||
return "Alert" |
} else if (color === "orange") { |
||||||
} else { |
return "Alert" |
||||||
return "Critical" |
} else { |
||||||
} |
return "Critical" |
||||||
} |
} |
||||||
|
} |
||||||
const renderFormatRupiah = (text, prefix) => { |
|
||||||
if (text) { |
const renderFormatRupiah = (text, prefix) => { |
||||||
return formatRupiah(text, prefix) |
if (text) { |
||||||
} else { |
return formatRupiah(text, prefix) |
||||||
return "-" |
} else { |
||||||
} |
return "-" |
||||||
} |
} |
||||||
|
} |
||||||
const RenderTable = useMemo(() => { |
|
||||||
const columns = [ |
const RenderTable = useMemo(() => { |
||||||
{ title: 'Nama Proyek', dataIndex: 'nama', key: 'nama' }, |
const columns = [ |
||||||
{ |
{ title: 'Nama Proyek', dataIndex: 'nama', key: 'nama' }, |
||||||
title: 'Biaya', |
{ |
||||||
dataIndex: 'biaya', |
title: 'Biaya', |
||||||
key: 'biaya', |
dataIndex: 'biaya', |
||||||
render: (text, record) => { return renderFormatRupiah(text, "Rp") } |
key: 'biaya', |
||||||
}, |
render: (text, record) => { return renderFormatRupiah(text, "Rp") } |
||||||
{ title: 'SDM', dataIndex: 'jumlah_pekerja', key: 'jumlah_pekerja' }, |
}, |
||||||
{ title: 'PM', dataIndex: 'pic', key: 'pic' }, |
{ title: 'SDM', dataIndex: 'jumlah_pekerja', key: 'jumlah_pekerja' }, |
||||||
{ |
{ title: 'PM', dataIndex: 'pic', key: 'pic' }, |
||||||
title: 'Aktifitas Mulai', |
{ |
||||||
dataIndex: 'mulai_proyek', |
title: 'Aktifitas Mulai', |
||||||
key: 'mulai_proyek', |
dataIndex: 'mulai_proyek', |
||||||
render: (text, record) => <>{moment(text).format(format)}</>, |
key: 'mulai_proyek', |
||||||
}, |
render: (text, record) => <>{moment(text).format(format)}</>, |
||||||
{ |
}, |
||||||
title: 'Aktifitas Selesai', |
{ |
||||||
dataIndex: 'akhir_proyek', |
title: 'Aktifitas Selesai', |
||||||
key: 'akhir_proyek', |
dataIndex: 'akhir_proyek', |
||||||
render: (text, record) => <>{moment(text).format(format)}</>, |
key: 'akhir_proyek', |
||||||
}, |
render: (text, record) => <>{moment(text).format(format)}</>, |
||||||
{ |
}, |
||||||
title: 'Action', |
{ |
||||||
dataIndex: '', |
title: 'Action', |
||||||
key: 'x', |
dataIndex: '', |
||||||
render: (text, record) => <> |
key: 'x', |
||||||
<Tooltip title="Tambah Sub"> |
render: (text, record) => <> |
||||||
<Button size="small" type="link" style={{ color: 'green' }} onClick={() => handleOpenDialogSub('Save', text)}><i className="fa fa-plus"></i></Button> |
<Tooltip title="Tambah Sub"> |
||||||
</Tooltip> |
<Button size="small" type="link" style={{ color: 'green' }} onClick={() => handleOpenDialogSub('Save', text)}><i className="fa fa-plus"></i></Button> |
||||||
<Tooltip title="Edit Proyek"> |
</Tooltip> |
||||||
<Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button> |
<Tooltip title="Edit Proyek"> |
||||||
</Tooltip> |
<Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button> |
||||||
<Tooltip title="Hapus Proyek"> |
</Tooltip> |
||||||
<Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button> |
<Tooltip title="Hapus Proyek"> |
||||||
</Tooltip> |
<Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button> |
||||||
</>, |
</Tooltip> |
||||||
}, |
</>, |
||||||
]; |
}, |
||||||
|
]; |
||||||
return ( |
|
||||||
<Table |
return ( |
||||||
size="small" |
<Table |
||||||
columns={columns} |
size="small" |
||||||
expandable={{ |
columns={columns} |
||||||
expandedRowRender: record => <SubProyekComp getDataProyek={getDataProyek} idParentTask={record.id} nameProyek={record.nama} data={record.subproyeks2} />, |
expandable={{ |
||||||
rowExpandable: record => record.subproyeks2, |
expandedRowRender: record => <SubProyekComp getDataProyek={getDataProyek} idParentTask={record.id} nameProyek={record.nama} data={record.subproyeks2} />, |
||||||
}} |
rowExpandable: record => record.subproyeks2, |
||||||
dataSource={dataTable} |
}} |
||||||
/> |
dataSource={dataTable} |
||||||
) |
/> |
||||||
}, [dataTable]) |
) |
||||||
|
}, [dataTable]) |
||||||
return ( |
|
||||||
<div> |
return ( |
||||||
<NotificationContainer /> |
<div> |
||||||
<SweetAlert |
<NotificationContainer /> |
||||||
show={alertDelete} |
<SweetAlert |
||||||
warning |
show={alertDelete} |
||||||
showCancel |
warning |
||||||
confirmBtnText="Delete" |
showCancel |
||||||
confirmBtnBsStyle="danger" |
confirmBtnText="Delete" |
||||||
title={`Apakah anda yakin?`} |
confirmBtnBsStyle="danger" |
||||||
onConfirm={onConfirmDelete} |
title={`Apakah anda yakin?`} |
||||||
onCancel={() => cancelDelete()} |
onConfirm={onConfirmDelete} |
||||||
focusCancelBtn |
onCancel={() => cancelDelete()} |
||||||
> |
focusCancelBtn |
||||||
Data akan terhapus |
> |
||||||
</SweetAlert> |
Data akan terhapus |
||||||
<DialogForm |
</SweetAlert> |
||||||
openDialog={openDialog} |
<DialogForm |
||||||
closeDialog={handleCloseDialog} |
openDialog={openDialog} |
||||||
toggleDialog={() => toggleAddDialog} |
closeDialog={handleCloseDialog} |
||||||
typeDialog={typeDialog} |
toggleDialog={() => toggleAddDialog} |
||||||
dataEdit={dataEdit} |
typeDialog={typeDialog} |
||||||
clickOpenModal={clickOpenModal} |
dataEdit={dataEdit} |
||||||
dataParent={allDataMenu} |
clickOpenModal={clickOpenModal} |
||||||
/> |
dataParent={allDataMenu} |
||||||
<DialogFormSub |
/> |
||||||
openDialog={openDialogSub} |
<DialogFormSub |
||||||
closeDialog={handleCloseDialogSub} |
openDialog={openDialogSub} |
||||||
toggleDialog={() => toggleAddDialogSub} |
closeDialog={handleCloseDialogSub} |
||||||
typeDialog={typeDialogSub} |
toggleDialog={() => toggleAddDialogSub} |
||||||
dataEdit={dataEditSub} |
typeDialog={typeDialogSub} |
||||||
idTask={idTask} |
dataEdit={dataEditSub} |
||||||
idSubtask={0} |
idTask={idTask} |
||||||
/> |
idSubtask={0} |
||||||
<Card> |
/> |
||||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
<Card> |
||||||
<h4 className="capitalize">{pageName}</h4> |
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||||
<Row> |
<h4 className="capitalize">{pageName}</h4> |
||||||
<Col> |
<Row> |
||||||
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Cari nama proyek`} /> |
<Col> |
||||||
</Col> |
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Cari nama proyek`} /> |
||||||
<Col> |
</Col> |
||||||
<Tooltip title="Tambah Proyek"> |
<Col> |
||||||
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
<Tooltip title="Tambah Proyek"> |
||||||
</Tooltip> |
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
||||||
<Tooltip title="Export Excel"> |
</Tooltip> |
||||||
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
<Tooltip title="Export Excel"> |
||||||
</Tooltip> |
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||||
</Col> |
</Tooltip> |
||||||
</Row> |
</Col> |
||||||
</CardHeader> |
</Row> |
||||||
<CardBody> |
</CardHeader> |
||||||
|
<CardBody> |
||||||
{RenderTable} |
|
||||||
</CardBody> |
{RenderTable} |
||||||
</Card> |
</CardBody> |
||||||
</div> |
</Card> |
||||||
) |
</div> |
||||||
} |
) |
||||||
|
} |
||||||
export default IndexRole; |
|
||||||
|
export default IndexRole; |
||||||
|
@ -1,383 +1,384 @@ |
|||||||
import * as XLSX from 'xlsx'; |
import * as XLSX from 'xlsx'; |
||||||
import DialogForm from './DialogForm'; |
import DialogForm from './DialogForm'; |
||||||
import React, { useState, useEffect, useMemo } from 'react'; |
import React, { useState, useEffect, useMemo } from 'react'; |
||||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
import axios from "../../../const/interceptorApi"; |
import axios from "../../../const/interceptorApi"; |
||||||
import moment from 'moment' |
import moment from 'moment' |
||||||
import { BASE_SIMPRO, PROYEK_ADD, PROYEK_SEARCH, PROYEK_EDIT, PROYEK_DELETE } from '../../../const/ApiConst'; |
import { BASE_SIMPRO, PROYEK_ADD, PROYEK_SEARCH, PROYEK_EDIT, PROYEK_DELETE } from '../../../const/ApiConst'; |
||||||
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; |
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; |
||||||
import { DownloadOutlined } from '@ant-design/icons'; |
import { DownloadOutlined } from '@ant-design/icons'; |
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||||
import { Pagination, Table, Button, Tooltip } from 'antd'; |
import { Pagination, Table, Button, Tooltip } from 'antd'; |
||||||
import { formatRupiah } from '../../../const/CustomFunc' |
import { formatRupiah } from '../../../const/CustomFunc' |
||||||
|
|
||||||
const url = ""; |
const url = ""; |
||||||
const proyek_id = localStorage.getItem('proyek_id'); |
const proyek_id = localStorage.getItem('proyek_id'); |
||||||
const role_id = localStorage.getItem('role_id'); |
const role_id = localStorage.getItem('role_id'); |
||||||
const format = "DD-MM-YYYY"; |
const company_id = window.localStorage.getItem('company_id'); |
||||||
|
const format = "DD-MM-YYYY"; |
||||||
const Closing = ({ params, ...props }) => { |
|
||||||
const token = localStorage.getItem("token") |
const Closing = ({ params, ...props }) => { |
||||||
const HEADER = { |
const token = localStorage.getItem("token") |
||||||
headers: { |
const HEADER = { |
||||||
"Content-Type": "application/json", |
headers: { |
||||||
"Authorization": `Bearer ${token}` |
"Content-Type": "application/json", |
||||||
} |
"Authorization": `Bearer ${token}` |
||||||
} |
} |
||||||
|
} |
||||||
const [alertClose, setAlertClose] = useState(false) |
|
||||||
const [alertDelete, setAlertDelete] = useState(false) |
const [alertClose, setAlertClose] = useState(false) |
||||||
const [allDataMenu, setAllDataMenu] = useState([]) |
const [alertDelete, setAlertDelete] = useState(false) |
||||||
const [clickOpenModal, setClickOpenModal] = useState(false) |
const [allDataMenu, setAllDataMenu] = useState([]) |
||||||
const [currentPage, setCurrentPage] = useState(1) |
const [clickOpenModal, setClickOpenModal] = useState(false) |
||||||
const [dataCharter, setDataCharter] = useState(null) |
const [currentPage, setCurrentPage] = useState(1) |
||||||
const [dataEdit, setDataEdit] = useState([]) |
const [dataCharter, setDataCharter] = useState(null) |
||||||
const [dataEditSub, setDataEditSub] = useState([]) |
const [dataEdit, setDataEdit] = useState([]) |
||||||
const [dataExport, setDataExport] = useState([]) |
const [dataEditSub, setDataEditSub] = useState([]) |
||||||
const [dataTable, setDatatable] = useState([]) |
const [dataExport, setDataExport] = useState([]) |
||||||
const [dataView, setDataView] = useState([]) |
const [dataTable, setDatatable] = useState([]) |
||||||
const [idDelete, setIdDelete] = useState(0) |
const [dataView, setDataView] = useState([]) |
||||||
const [idTask, setidTask] = useState(0); |
const [idDelete, setIdDelete] = useState(0) |
||||||
const [openDialog, setOpenDialog] = useState(false) |
const [idTask, setidTask] = useState(0); |
||||||
const [openDialogMap, setOpenDialogMap] = useState(false) |
const [openDialog, setOpenDialog] = useState(false) |
||||||
const [openDialogResource, setOpenDialogResource] = useState(false) |
const [openDialogMap, setOpenDialogMap] = useState(false) |
||||||
const [openDialogViewDetail, setOpenDialogViewDetail] = useState(false) |
const [openDialogResource, setOpenDialogResource] = useState(false) |
||||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
const [openDialogViewDetail, setOpenDialogViewDetail] = useState(false) |
||||||
const [search, setSearch] = useState('') |
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||||
const [totalPage, setTotalPage] = useState(0) |
const [search, setSearch] = useState('') |
||||||
const [typeDialog, setTypeDialog] = useState('Save'); |
const [totalPage, setTotalPage] = useState(0) |
||||||
const [typeDialogSub, setTypeDialogSub] = useState('Save') |
const [typeDialog, setTypeDialog] = useState('Save'); |
||||||
const [userProyek, setUserProyek] = useState([]); |
const [typeDialogSub, setTypeDialogSub] = useState('Save') |
||||||
const pageName = params.name; |
const [userProyek, setUserProyek] = useState([]); |
||||||
|
const pageName = params.name; |
||||||
useEffect(() => { |
|
||||||
getDataProyek() |
useEffect(() => { |
||||||
}, []) |
getDataProyek() |
||||||
|
}, []) |
||||||
const handleSearch = e => { |
|
||||||
const value = e.target.value |
const handleSearch = e => { |
||||||
setSearch(value); |
const value = e.target.value |
||||||
setCurrentPage(1) |
setSearch(value); |
||||||
}; |
setCurrentPage(1) |
||||||
|
}; |
||||||
const getDataProyek = async () => { |
|
||||||
|
const getDataProyek = async () => { |
||||||
let start = 0; |
|
||||||
|
let start = 0; |
||||||
if (currentPage !== 1 && currentPage > 1) { |
|
||||||
start = (currentPage * rowsPerPage) - rowsPerPage |
if (currentPage !== 1 && currentPage > 1) { |
||||||
} |
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
|
} |
||||||
const payload = { |
|
||||||
"columns": [ |
const payload = { |
||||||
{ "name": "nama", "logic_operator": "ilike", "value": "", "operator": "AND" } |
"columns": [ |
||||||
], |
{ "name": "nama", "logic_operator": "ilike", "value": "", "operator": "AND" } |
||||||
"joins": [ |
], |
||||||
{ "name": "m_users", "column_join": "pm_id", "column_results": ["name", "username"] }, |
"joins": [ |
||||||
{ "name": "m_type_proyek", "column_join": "type_proyek_id", "column_results": ["name", "description"] }, |
{ "name": "m_users", "column_join": "pm_id", "column_results": ["name", "username"] }, |
||||||
], |
{ "name": "m_type_proyek", "column_join": "type_proyek_id", "column_results": ["name", "description"] }, |
||||||
"orders": { "columns": ["id"], "ascending": true }, |
], |
||||||
"paging": { "start": 0, "length": 25 } |
"orders": { "columns": ["id"], "ascending": true }, |
||||||
} |
"paging": { "start": 0, "length": 25 } |
||||||
|
} |
||||||
|
|
||||||
if (parseInt(role_id) !== 1) { |
|
||||||
payload["columns"] = [ |
if (parseInt(role_id) !== 1) { |
||||||
{ "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } |
payload["columns"] = [ |
||||||
] |
{ "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } |
||||||
} |
] |
||||||
|
} |
||||||
const URL = `${BASE_SIMPRO}/proyek/search-detail` |
|
||||||
const result = await axios |
const URL = `${BASE_SIMPRO}/proyek/search-detail` |
||||||
.post(URL, payload, HEADER) |
const result = await axios |
||||||
.then(res => res) |
.post(URL, payload, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code == 200) { |
|
||||||
let dataRes = result.data.data || [] |
if (result && result.data && result.data.code == 200) { |
||||||
|
let dataRes = result.data.data || [] |
||||||
setDatatable(dataRes); |
|
||||||
setTotalPage(result.data.totalRecord); |
setDatatable(dataRes); |
||||||
} else { |
setTotalPage(result.data.totalRecord); |
||||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
} else { |
||||||
} |
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
} |
} |
||||||
|
} |
||||||
const handleOpenDialog = (id) => { |
|
||||||
setOpenDialog(true) |
const handleOpenDialog = (id) => { |
||||||
setidTask(id) |
setOpenDialog(true) |
||||||
} |
setidTask(id) |
||||||
|
} |
||||||
const handleOpenDialogResource = (data) => { |
|
||||||
setOpenDialogResource(true) |
const handleOpenDialogResource = (data) => { |
||||||
setidTask(data.id) |
setOpenDialogResource(true) |
||||||
setUserProyek(data.user_proyeks) |
setidTask(data.id) |
||||||
} |
setUserProyek(data.user_proyeks) |
||||||
|
} |
||||||
const handleOpenDialogViewDetail = (data) => { |
|
||||||
setOpenDialogViewDetail(true) |
const handleOpenDialogViewDetail = (data) => { |
||||||
setidTask(data.id) |
setOpenDialogViewDetail(true) |
||||||
setDataView(data) |
setidTask(data.id) |
||||||
setDataCharter(data.project_charter ? data.project_charter : null) |
setDataView(data) |
||||||
} |
setDataCharter(data.project_charter ? data.project_charter : null) |
||||||
|
} |
||||||
const handleCloseDialog = (type, payload) => { |
|
||||||
if (type === "add") saveProyek(payload); |
const handleCloseDialog = (type, payload) => { |
||||||
|
if (type === "add") saveProyek(payload); |
||||||
if (type === "edit") editProyek(payload); |
|
||||||
|
if (type === "edit") editProyek(payload); |
||||||
setOpenDialog(false) |
|
||||||
} |
setOpenDialog(false) |
||||||
|
} |
||||||
const handleCloseDialogResource = (type, payload) => { |
|
||||||
setOpenDialogResource(false) |
const handleCloseDialogResource = (type, payload) => { |
||||||
} |
setOpenDialogResource(false) |
||||||
|
} |
||||||
const handleCloseDialogView = (type, payload) => { |
|
||||||
setOpenDialogViewDetail(false) |
const handleCloseDialogView = (type, payload) => { |
||||||
} |
setOpenDialogViewDetail(false) |
||||||
|
} |
||||||
|
|
||||||
const toggleAddDialog = () => setOpenDialog(!openDialog) |
|
||||||
|
const toggleAddDialog = () => setOpenDialog(!openDialog) |
||||||
const toggleAddDialogResource = () => setOpenDialogResource(!openDialog) |
|
||||||
const toggleAddDialogView = () => setOpenDialogViewDetail(!openDialogViewDetail) |
const toggleAddDialogResource = () => setOpenDialogResource(!openDialog) |
||||||
|
const toggleAddDialogView = () => setOpenDialogViewDetail(!openDialogViewDetail) |
||||||
const onConfirmDelete = async () => { |
|
||||||
let urlDel = PROYEK_DELETE(idDelete) |
const onConfirmDelete = async () => { |
||||||
const result = await axios.delete(urlDel, HEADER) |
let urlDel = PROYEK_DELETE(idDelete, company_id) |
||||||
.then(res => res) |
const result = await axios.delete(urlDel, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
if (result && result.data && result.data.code === 200) { |
.catch((error) => error.response); |
||||||
getDataProyek() |
if (result && result.data && result.data.code === 200) { |
||||||
setIdDelete(0) |
getDataProyek() |
||||||
setAlertDelete(false) |
setIdDelete(0) |
||||||
NotificationManager.success(`Data proyek berhasil dihapus`, 'Success!!'); |
setAlertDelete(false) |
||||||
} else { |
NotificationManager.success(`Data proyek berhasil dihapus`, 'Success!!'); |
||||||
setIdDelete(0) |
} else { |
||||||
setAlertDelete(false) |
setIdDelete(0) |
||||||
NotificationManager.error(`Data proyek gagal dihapus`, 'Failed!!'); |
setAlertDelete(false) |
||||||
} |
NotificationManager.error(`Data proyek gagal dihapus`, 'Failed!!'); |
||||||
} |
} |
||||||
|
} |
||||||
const onConfirmClose = async () => { |
|
||||||
setIdDelete(0) |
const onConfirmClose = async () => { |
||||||
setAlertClose(false) |
setIdDelete(0) |
||||||
NotificationManager.success(`Data proyek berhasil diclose`, 'Success!!'); |
setAlertClose(false) |
||||||
} |
NotificationManager.success(`Data proyek berhasil diclose`, 'Success!!'); |
||||||
|
} |
||||||
const saveProyek = async (data) => { |
|
||||||
const formData = data |
const saveProyek = async (data) => { |
||||||
|
const formData = data |
||||||
const result = await axios.post(PROYEK_ADD, formData, HEADER) |
|
||||||
.then(res => res) |
const result = await axios.post(PROYEK_ADD, formData, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataProyek(); |
if (result && result.data && result.data.code === 200) { |
||||||
NotificationManager.success(`Data proyek berhasil ditambah`, 'Success!!'); |
getDataProyek(); |
||||||
} else { |
NotificationManager.success(`Data proyek berhasil ditambah`, 'Success!!'); |
||||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
} else { |
||||||
} |
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
} |
|
||||||
|
} |
||||||
const editProyek = async (data) => { |
|
||||||
let urlEdit = PROYEK_EDIT(data.id) |
const editProyek = async (data) => { |
||||||
const formData = data |
let urlEdit = PROYEK_EDIT(data.id) |
||||||
|
const formData = data |
||||||
const result = await axios.put(urlEdit, formData, HEADER) |
|
||||||
.then(res => res) |
const result = await axios.put(urlEdit, formData, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataProyek(); |
if (result && result.data && result.data.code === 200) { |
||||||
NotificationManager.success(`Data proyek berhasil diedit`, 'Success!!'); |
getDataProyek(); |
||||||
} else { |
NotificationManager.success(`Data proyek berhasil diedit`, 'Success!!'); |
||||||
NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); |
} else { |
||||||
} |
NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); |
||||||
} |
} |
||||||
|
} |
||||||
const handleDelete = async (id) => { |
|
||||||
await setAlertDelete(true) |
const handleDelete = async (id) => { |
||||||
await setIdDelete(id) |
await setAlertDelete(true) |
||||||
} |
await setIdDelete(id) |
||||||
|
} |
||||||
const handleCloseProject = async (id) => { |
|
||||||
await setAlertClose(true) |
const handleCloseProject = async (id) => { |
||||||
await setIdDelete(id) |
await setAlertClose(true) |
||||||
} |
await setIdDelete(id) |
||||||
|
} |
||||||
const onShowSizeChange = (current, pageSize) => { |
|
||||||
setRowsPerPage(pageSize) |
const onShowSizeChange = (current, pageSize) => { |
||||||
} |
setRowsPerPage(pageSize) |
||||||
|
} |
||||||
const onPagination = (current, pageSize) => { |
|
||||||
setCurrentPage(current) |
const onPagination = (current, pageSize) => { |
||||||
} |
setCurrentPage(current) |
||||||
|
} |
||||||
const handleExportExcel = async () => { |
|
||||||
|
const handleExportExcel = async () => { |
||||||
const payload = { |
|
||||||
"paging": { "start": 0, "length": -1 }, |
const payload = { |
||||||
"joins": [], |
"paging": { "start": 0, "length": -1 }, |
||||||
"orders": { "columns": ["id"], "ascending": false } |
"joins": [], |
||||||
} |
"orders": { "columns": ["id"], "ascending": false } |
||||||
|
} |
||||||
if (parseInt(role_id) !== 1) { |
|
||||||
payload["columns"] = [ |
if (parseInt(role_id) !== 1) { |
||||||
{ "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } |
payload["columns"] = [ |
||||||
] |
{ "name": "id", "logic_operator": "=", "value": proyek_id, "operator": "AND" } |
||||||
} |
] |
||||||
|
} |
||||||
const result = await axios |
|
||||||
.post(PROYEK_SEARCH, payload, HEADER) |
const result = await axios |
||||||
.then(res => res) |
.post(PROYEK_SEARCH, payload, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code == 200) { |
|
||||||
let resData = result.data.data; |
if (result && result.data && result.data.code == 200) { |
||||||
const excelData = []; |
let resData = result.data.data; |
||||||
resData.map((n, index) => { |
const excelData = []; |
||||||
let dataRow = { |
resData.map((n, index) => { |
||||||
"Nama Proyek": n.nama, |
let dataRow = { |
||||||
"Biaya": n.biaya, |
"Nama Proyek": n.nama, |
||||||
"Color Progress": n.color_progress, |
"Biaya": n.biaya, |
||||||
"Jumlah Pekerja": n.jumlah_pekerja, |
"Color Progress": n.color_progress, |
||||||
"Tanggal Mulai": n.mulai_proyek ? moment(n.mulai_proyek).format(format) : "-", |
"Jumlah Pekerja": n.jumlah_pekerja, |
||||||
"Tanggal Selesai": n.akhir_proyek ? moment(n.akhir_proyek).format(format) : "-", |
"Tanggal Mulai": n.mulai_proyek ? moment(n.mulai_proyek).format(format) : "-", |
||||||
} |
"Tanggal Selesai": n.akhir_proyek ? moment(n.akhir_proyek).format(format) : "-", |
||||||
excelData.push(dataRow) |
} |
||||||
}) |
excelData.push(dataRow) |
||||||
await setDataExport(excelData); |
}) |
||||||
} else { |
await setDataExport(excelData); |
||||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
} else { |
||||||
} |
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
||||||
} |
} |
||||||
|
} |
||||||
const exportExcel = () => { |
|
||||||
const dataExcel = dataExport || []; |
const exportExcel = () => { |
||||||
const fileName = `Data ${pageName}.xlsx`; |
const dataExcel = dataExport || []; |
||||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
const fileName = `Data ${pageName}.xlsx`; |
||||||
const wb = XLSX.utils.book_new(); |
const ws = XLSX.utils.json_to_sheet(dataExcel); |
||||||
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
const wb = XLSX.utils.book_new(); |
||||||
|
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
||||||
XLSX.writeFile(wb, fileName); |
|
||||||
setDataExport([]) |
XLSX.writeFile(wb, fileName); |
||||||
} |
setDataExport([]) |
||||||
|
} |
||||||
const cancelDelete = () => { |
|
||||||
setAlertDelete(false) |
const cancelDelete = () => { |
||||||
setIdDelete(0) |
setAlertDelete(false) |
||||||
} |
setIdDelete(0) |
||||||
|
} |
||||||
const cancelClose = () => { |
|
||||||
setAlertClose(false) |
const cancelClose = () => { |
||||||
setIdDelete(0) |
setAlertClose(false) |
||||||
} |
setIdDelete(0) |
||||||
|
} |
||||||
const renderFormatRupiah = (text, prefix) => { |
|
||||||
if (text) { |
const renderFormatRupiah = (text, prefix) => { |
||||||
return formatRupiah(text, prefix) |
if (text) { |
||||||
} else { |
return formatRupiah(text, prefix) |
||||||
return "-" |
} else { |
||||||
} |
return "-" |
||||||
} |
} |
||||||
|
} |
||||||
const handleClickGantt = (id) => { |
|
||||||
props.history.push({ |
const handleClickGantt = (id) => { |
||||||
pathname: '/gantt', |
props.history.push({ |
||||||
state: { proyek_id: id } |
pathname: '/gantt', |
||||||
}) |
state: { proyek_id: id } |
||||||
} |
}) |
||||||
|
} |
||||||
const RenderTable = useMemo(() => { |
|
||||||
const columns = [ |
const RenderTable = useMemo(() => { |
||||||
{ |
const columns = [ |
||||||
title: 'Action', |
{ |
||||||
dataIndex: '', |
title: 'Action', |
||||||
key: 'x', |
dataIndex: '', |
||||||
render: (text, record) => <> |
key: 'x', |
||||||
<Tooltip title="Report"> |
render: (text, record) => <> |
||||||
<Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleOpenDialog(text.id)}><i className="fa fa-print"></i></Button> |
<Tooltip title="Report"> |
||||||
</Tooltip> |
<Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleOpenDialog(text.id)}><i className="fa fa-print"></i></Button> |
||||||
</>, |
</Tooltip> |
||||||
}, |
</>, |
||||||
{ title: 'Nama Proyek', dataIndex: 'nama', key: 'nama' }, |
}, |
||||||
{ |
{ title: 'Nama Proyek', dataIndex: 'nama', key: 'nama' }, |
||||||
title: 'Planning Cost', |
{ |
||||||
dataIndex: 'rencana_biaya', |
title: 'Planning Cost', |
||||||
key: 'rencana_biaya', |
dataIndex: 'rencana_biaya', |
||||||
render: (text, record) => { return renderFormatRupiah(text, "Rp") } |
key: 'rencana_biaya', |
||||||
}, |
render: (text, record) => { return renderFormatRupiah(text, "Rp") } |
||||||
{ |
}, |
||||||
title: 'Project Type', |
{ |
||||||
dataIndex: 'color_progress', |
title: 'Project Type', |
||||||
key: 'color_progress', |
dataIndex: 'color_progress', |
||||||
render: (text, record) => <>{record.join.m_type_proyek_name}</> |
key: 'color_progress', |
||||||
}, |
render: (text, record) => <>{record.join.m_type_proyek_name}</> |
||||||
{ |
}, |
||||||
title: 'PM', dataIndex: 'pic', key: 'pic', |
{ |
||||||
render: (text, record) => <>{record.join.m_users_name}</> |
title: 'PM', dataIndex: 'pic', key: 'pic', |
||||||
}, |
render: (text, record) => <>{record.join.m_users_name}</> |
||||||
{ |
}, |
||||||
title: 'Time Project', |
{ |
||||||
dataIndex: 'akhir_proyek', |
title: 'Time Project', |
||||||
key: 'akhir_proyek', |
dataIndex: 'akhir_proyek', |
||||||
render: (text, record) => <>{moment(record.mulai_proyek).format(format)} - {moment(record.akhir_proyek).format(format)}</>, |
key: 'akhir_proyek', |
||||||
}, |
render: (text, record) => <>{moment(record.mulai_proyek).format(format)} - {moment(record.akhir_proyek).format(format)}</>, |
||||||
]; |
}, |
||||||
|
]; |
||||||
return ( |
|
||||||
<Table |
return ( |
||||||
size="small" |
<Table |
||||||
columns={columns} |
size="small" |
||||||
dataSource={dataTable} |
columns={columns} |
||||||
/> |
dataSource={dataTable} |
||||||
) |
/> |
||||||
}, [dataTable]) |
) |
||||||
|
}, [dataTable]) |
||||||
const RenderDialogForm = useMemo(() => ( |
|
||||||
<DialogForm |
const RenderDialogForm = useMemo(() => ( |
||||||
openDialog={openDialog} |
<DialogForm |
||||||
closeDialog={handleCloseDialog} |
openDialog={openDialog} |
||||||
toggleDialog={() => toggleAddDialog} |
closeDialog={handleCloseDialog} |
||||||
idTask={idTask} |
toggleDialog={() => toggleAddDialog} |
||||||
/> |
idTask={idTask} |
||||||
), [openDialog]) |
/> |
||||||
|
), [openDialog]) |
||||||
return ( |
|
||||||
<div> |
return ( |
||||||
<NotificationContainer /> |
<div> |
||||||
<SweetAlert |
<NotificationContainer /> |
||||||
show={alertClose} |
<SweetAlert |
||||||
warning |
show={alertClose} |
||||||
showCancel |
warning |
||||||
confirmBtnText="Close" |
showCancel |
||||||
confirmBtnBsStyle="danger" |
confirmBtnText="Close" |
||||||
title={`Are you sure?`} |
confirmBtnBsStyle="danger" |
||||||
onConfirm={onConfirmClose} |
title={`Are you sure?`} |
||||||
onCancel={() => cancelClose()} |
onConfirm={onConfirmClose} |
||||||
focusCancelBtn |
onCancel={() => cancelClose()} |
||||||
> |
focusCancelBtn |
||||||
Close this project |
> |
||||||
</SweetAlert> |
Close this project |
||||||
{RenderDialogForm} |
</SweetAlert> |
||||||
<Card> |
{RenderDialogForm} |
||||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
<Card> |
||||||
<h4 className="capitalize">{pageName}</h4> |
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||||
<Row> |
<h4 className="capitalize">{pageName}</h4> |
||||||
<Col> |
<Row> |
||||||
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Cari nama proyek`} /> |
<Col> |
||||||
</Col> |
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Cari nama proyek`} /> |
||||||
</Row> |
</Col> |
||||||
</CardHeader> |
</Row> |
||||||
<CardBody> |
</CardHeader> |
||||||
{RenderTable} |
<CardBody> |
||||||
</CardBody> |
{RenderTable} |
||||||
</Card> |
</CardBody> |
||||||
</div> |
</Card> |
||||||
) |
</div> |
||||||
} |
) |
||||||
|
} |
||||||
export default Closing; |
|
||||||
|
export default Closing; |
||||||
|
@ -1,96 +1,99 @@ |
|||||||
import React, { useEffect, useState } from 'react' |
import React, { useEffect, useState } from 'react' |
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||||
import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; |
import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; |
||||||
import axios from "../../../const/interceptorApi"; |
import axios from "../../../const/interceptorApi"; |
||||||
import { DOCUMENT_ADD } from '../../../const/ApiConst'; |
import { DOCUMENT_ADD } from '../../../const/ApiConst'; |
||||||
import 'antd/dist/antd.css'; |
import 'antd/dist/antd.css'; |
||||||
import { NotificationManager } from 'react-notifications'; |
import { NotificationManager } from 'react-notifications'; |
||||||
|
|
||||||
const DialogRequest = ({ openDialog, closeDialog, toggleDialog, idTask, parentIdNewFolder }) => { |
const DialogRequest = ({ openDialog, closeDialog, toggleDialog, idTask, parentIdNewFolder }) => { |
||||||
const token = localStorage.getItem("token") |
const token = localStorage.getItem("token") |
||||||
const HEADER = { |
const HEADER = { |
||||||
headers: { |
headers: { |
||||||
"Content-Type": "application/json", |
"Content-Type": "application/json", |
||||||
"Authorization": `Bearer ${token}` |
"Authorization": `Bearer ${token}` |
||||||
} |
} |
||||||
} |
} |
||||||
const [id, setId] = useState(0) |
const [id, setId] = useState(0) |
||||||
const [file, setFile] = useState(null) |
const [file, setFile] = useState(null) |
||||||
|
|
||||||
|
|
||||||
const handleCLearData = () => { |
const handleCLearData = () => { |
||||||
setId(0) |
setId(0) |
||||||
setFile(null) |
setFile(null) |
||||||
} |
} |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
handleCLearData() |
handleCLearData() |
||||||
}, [openDialog]) |
}, [openDialog]) |
||||||
|
|
||||||
const handleSave = () => { |
const handleSave = () => { |
||||||
uploadDokumen() |
uploadDokumen() |
||||||
handleCLearData() |
handleCLearData() |
||||||
} |
} |
||||||
|
|
||||||
const uploadDokumen = async () => { |
const uploadDokumen = async () => { |
||||||
const formData = new FormData; |
const configApp = JSON.parse(window.localStorage.getItem('configApp')); |
||||||
formData.append('dokumen', file, file.name); |
|
||||||
|
const formData = new FormData; |
||||||
if (parentIdNewFolder > 0) { |
formData.append('dokumen', file, file.name); |
||||||
formData.append('ref_id', parentIdNewFolder); // folder_id
|
formData.append('company_name',configApp.company_name); |
||||||
formData.append('type_dokumen', 'project-document-in-folder'); |
|
||||||
} |
if (parentIdNewFolder > 0) { |
||||||
else { |
formData.append('ref_id', parentIdNewFolder); // folder_id
|
||||||
formData.append('ref_id', idTask); // proyek_id
|
formData.append('type_dokumen', 'project-document-in-folder'); |
||||||
formData.append('type_dokumen', 'project-document-out-folder') |
} |
||||||
} |
else { |
||||||
|
formData.append('ref_id', idTask); // proyek_id
|
||||||
const result = await axios |
formData.append('type_dokumen', 'project-document-out-folder') |
||||||
.post(DOCUMENT_ADD, formData, HEADER) |
} |
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
const result = await axios |
||||||
|
.post(DOCUMENT_ADD, formData, HEADER) |
||||||
if (result && result.status == 200) { |
.then(res => res) |
||||||
NotificationManager.success('Dokumen project berhasil diupload!!', 'Success'); |
.catch((error) => error.response); |
||||||
closeDialog('upload') |
const notif = result.data.message; |
||||||
} else { |
if (result && result.status == 200) { |
||||||
NotificationManager.error('Dokumen project gagal diupload!!', 'Failed'); |
NotificationManager.success(notif, 'Success'); |
||||||
closeDialog('failed upload') |
closeDialog('upload') |
||||||
} |
} else { |
||||||
} |
NotificationManager.error(notif, 'Failed'); |
||||||
|
closeDialog('failed upload') |
||||||
const handleCancel = () => { |
} |
||||||
closeDialog('cancel') |
} |
||||||
handleCLearData() |
|
||||||
} |
const handleCancel = () => { |
||||||
|
closeDialog('cancel') |
||||||
const renderForm = () => { |
handleCLearData() |
||||||
return ( |
} |
||||||
<Form> |
|
||||||
<FormGroup> |
const renderForm = () => { |
||||||
<Label className="capitalize">Upload File</Label> |
return ( |
||||||
<Input type="file" onChange={(e) => setFile(e.target.files[0])} /> |
<Form> |
||||||
</FormGroup> |
<FormGroup> |
||||||
</Form> |
<Label className="capitalize">Upload File</Label> |
||||||
) |
<Input type="file" onChange={(e) => setFile(e.target.files[0])} /> |
||||||
} |
</FormGroup> |
||||||
|
</Form> |
||||||
|
) |
||||||
return ( |
} |
||||||
<> |
|
||||||
<Modal isOpen={openDialog} toggle={toggleDialog}> |
|
||||||
<ModalHeader className="capitalize" toggle={closeDialog}>Upload Project Document</ModalHeader> |
return ( |
||||||
<ModalBody> |
<> |
||||||
{renderForm()} |
<Modal isOpen={openDialog} toggle={toggleDialog}> |
||||||
</ModalBody> |
<ModalHeader className="capitalize" toggle={closeDialog}>Upload Project Document</ModalHeader> |
||||||
<ModalFooter> |
<ModalBody> |
||||||
<Button color="primary" onClick={() => handleSave()}>Upload</Button>{' '} |
{renderForm()} |
||||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button> |
</ModalBody> |
||||||
</ModalFooter> |
<ModalFooter> |
||||||
</Modal> |
<Button color="primary" onClick={() => handleSave()}>Upload</Button>{' '} |
||||||
</> |
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button> |
||||||
) |
</ModalFooter> |
||||||
|
</Modal> |
||||||
} |
</> |
||||||
|
) |
||||||
export default DialogRequest; |
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogRequest; |
||||||
|
Loading…
Reference in new issue