ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Bug fixing export excel

pull/2/head
nurkomalasari 2 years ago
parent
78907d19ce
commit
70d6c38539
4 changed files with 2030 additions and 1829 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 771
      src/views/SimproV2/ProjectType/index.js
  2. 1321
      src/views/SimproV2/ResourceTools/index.js
  3. 758
      src/views/SimproV2/ResourceWorker/DialogForm.js
  4. 1009
      src/views/SimproV2/ResourceWorker/index.js

771
src/views/SimproV2/ProjectType/index.js
Unescape View File

@ -1,377 +1,394 @@
import * as XLSX from 'xlsx';
import DialogForm from './DialogForm';
import DialogInitialGantt from './DialogInitialGantt';
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 { DownloadOutlined } from '@ant-design/icons';
import { NotificationContainer, NotificationManager } from 'react-notifications';
import { PROJECT_TYPE_ADD, PROJECT_TYPE_EDIT, PROJECT_TYPE_DELETE, PROJECT_TYPE_SEARCH } from '../../../const/ApiConst';
import { Pagination, Button, Tooltip, Table} from 'antd';
const url = "";
const proyek_id = localStorage.getItem('proyek_id');
const role_id = localStorage.getItem('role_id');
const format = "DD-MM-YYYY";
const token = window.localStorage.getItem('token');
const config = {
headers:
{
Authorization : `Bearer ${token}`,
"Content-type" : `application/json`
}
};
const column = [
{ name: "Nama" },
{ name: "Deskripsi" },
]
const ProjectType = ({params}) => {
const token = localStorage.getItem("token")
const HEADER = {
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
}
}
const pageName = params.name;
const [alertDelete, setAlertDelete] = useState(false)
const [allDataMenu, setAllDataMenu] = useState([])
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 [idTypeProject, setIdTypeProject] = 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')
useEffect(() => {
getDataProjectType()
}, [currentPage, rowsPerPage, search])
useEffect(() => {
const cekData = dataExport || []
if (cekData.length > 0) {
exportExcel()
}
}, [dataExport])
const getDataProjectType = 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_TYPE_SEARCH, payload, config)
.then(res => res)
.catch((error) => error.response);
if(result && result.data && result.data.code == 200){
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;
const payload = {
"paging": { "start": start, "length": -1 },
"columns": [
{ "name": "name", "logic_operator": "ilike", "value": search, "operator": "AND" }
],
"joins": [],
"orders": { "columns": ["id"], "ascending": false }
}
const result = await axios
.post(PROJECT_TYPE_SEARCH, payload)
.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,
"Deskripsi": val.description,
}
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") {
saveProjectType(data);
} else if (type === "edit") {
editMaterialR(data);
}
setDataEdit([])
setOpenDialog(false)
}
const saveProjectType = async (data) => {
const formData = data
const result = await axios.post(PROJECT_TYPE_ADD, formData, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType()
NotificationManager.success(`Data project type berhasil ditambah`, 'Success!!');
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}
const editMaterialR = async (data) => {
let urlEdit = PROJECT_TYPE_EDIT(data.id)
const formData = data
const result = await axios.put(urlEdit, formData, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType();
NotificationManager.success(`Data project type berhasil diedit`, 'Success!!');
} else {
NotificationManager.error(`Data project type gagal di edit`, `Failed!!`);
}
}
const toggleAddDialog = () => {
setOpenDialog(!openDialog)
}
const handleDialogIg = (id) => {
setIdTypeProject(id)
setOpenDialogIG(true)
}
const closeDialogIG = () => {
setIdTypeProject(0)
setOpenDialogIG(false)
}
const toggleDialogIG = () => {
if(openDialogIG){
setIdTypeProject(0)
}
setOpenDialogIG(!openDialogIG);
}
const onConfirmDelete = async () => {
let url = PROJECT_TYPE_DELETE(idDelete);
const result = await axios.delete(url,config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType()
setIdDelete(0)
setAlertDelete(false)
NotificationManager.success(`Data project type berhasil dihapus!`, 'Success!!');
} else {
setIdDelete(0)
setAlertDelete(false)
NotificationManager.error(`Data project type 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">Tidak ada data project type</td>
</tr>
)
}
}
const renderTable = useMemo(() => {
const columns = [
{
title: 'Action',
dataIndex: '',
key: 'x',
className:'nowrap',
render: (text, record) => <>
<Tooltip title="Delete">
<i className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i>
</Tooltip>
<Tooltip title="Edit">
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i>
</Tooltip>{" "}
<Tooltip title="Template Gantt">
<i className="fa fa-gears" style={{ color: 'blue', cursor: "pointer" }} onClick={() => handleDialogIg(text.id)}></i>
</Tooltip>
</>,
},
{ title: 'Nama Role', dataIndex: 'name', key: 'name', className:"nowrap" },
{ title: 'Description', dataIndex: 'description', key: 'description' },
];
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={`Are you sure?`}
onConfirm={onConfirmDelete}
onCancel={() => cancelDelete()}
focusCancelBtn
>
Delete this data
</SweetAlert>
<DialogForm
openDialog={openDialog}
closeDialog={handleCloseDialog}
toggleDialog={() => toggleAddDialog}
typeDialog={typeDialog}
dataEdit={dataEdit}
clickOpenModal={clickOpenModal}
dataParent={allDataMenu}
/>
<DialogInitialGantt
openDialog={openDialogIG}
closeDialog={closeDialogIG}
toggleDialog={toggleDialogIG}
idTypeProject={idTypeProject}
/>
<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={`Search project type...`} />
</Col>
<Col>
<Tooltip title="Add Material Resource">
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Tooltip>
<Tooltip title="Export Excel">
<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 ProjectType;
import * as XLSX from 'xlsx';
import DialogForm from './DialogForm';
import DialogInitialGantt from './DialogInitialGantt';
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 { DownloadOutlined } from '@ant-design/icons';
import { NotificationContainer, NotificationManager } from 'react-notifications';
import { PROJECT_TYPE_ADD, PROJECT_TYPE_EDIT, PROJECT_TYPE_DELETE, PROJECT_TYPE_SEARCH } from '../../../const/ApiConst';
import { Pagination, Button, Tooltip, Table } from 'antd';
const url = "";
const proyek_id = localStorage.getItem('proyek_id');
const role_id = localStorage.getItem('role_id');
const format = "DD-MM-YYYY";
const token = window.localStorage.getItem('token');
const config = {
headers:
{
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
const column = [
{ name: "Nama" },
{ name: "Deskripsi" },
]
const ProjectType = ({ params }) => {
const token = localStorage.getItem("token")
const HEADER = {
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
}
}
const pageName = params.name;
const [alertDelete, setAlertDelete] = useState(false)
const [allDataMenu, setAllDataMenu] = useState([])
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 [idTypeProject, setIdTypeProject] = 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')
useEffect(() => {
getDataProjectType()
}, [currentPage, rowsPerPage, search])
useEffect(() => {
const cekData = dataExport || []
if (cekData.length > 0) {
exportExcel()
}
}, [dataExport])
const getDataProjectType = 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_TYPE_SEARCH, payload, config, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
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_TYPE_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,
"Deskripsi": val.description,
}
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") {
saveProjectType(data);
} else if (type === "edit") {
editMaterialR(data);
}
setDataEdit([])
setOpenDialog(false)
}
const saveProjectType = async (data) => {
const formData = data
const result = await axios.post(PROJECT_TYPE_ADD, formData, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType()
NotificationManager.success(`Data project type berhasil ditambah`, 'Success!!');
} else {
NotificationManager.error(`${result.data.message}`, 'Failed!!');
}
}
const editMaterialR = async (data) => {
let urlEdit = PROJECT_TYPE_EDIT(data.id)
const formData = data
const result = await axios.put(urlEdit, formData, HEADER)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType();
NotificationManager.success(`Data project type berhasil diedit`, 'Success!!');
} else {
NotificationManager.error(`Data project type gagal di edit`, `Failed!!`);
}
}
const toggleAddDialog = () => {
setOpenDialog(!openDialog)
}
const handleDialogIg = (id) => {
setIdTypeProject(id)
setOpenDialogIG(true)
}
const closeDialogIG = () => {
setIdTypeProject(0)
setOpenDialogIG(false)
}
const toggleDialogIG = () => {
if (openDialogIG) {
setIdTypeProject(0)
}
setOpenDialogIG(!openDialogIG);
}
const onConfirmDelete = async () => {
let url = PROJECT_TYPE_DELETE(idDelete);
const result = await axios.delete(url, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
getDataProjectType()
setIdDelete(0)
setAlertDelete(false)
NotificationManager.success(`Data project type berhasil dihapus!`, 'Success!!');
} else {
setIdDelete(0)
setAlertDelete(false)
NotificationManager.error(`Data project type 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">Tidak ada data project type</td>
</tr>
)
}
}
const renderTable = useMemo(() => {
const columns = [
{
title: 'Action',
dataIndex: '',
key: 'x',
className: 'nowrap',
render: (text, record) => <>
<Tooltip title="Delete">
<i className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i>
</Tooltip>
<Tooltip title="Edit">
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i>
</Tooltip>{" "}
<Tooltip title="Template Gantt">
<i className="fa fa-gears" style={{ color: 'blue', cursor: "pointer" }} onClick={() => handleDialogIg(text.id)}></i>
</Tooltip>
</>,
},
{ title: 'Nama Role', dataIndex: 'name', key: 'name', className: "nowrap" },
{ title: 'Description', dataIndex: 'description', key: 'description' },
];
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={`Are you sure?`}
onConfirm={onConfirmDelete}
onCancel={() => cancelDelete()}
focusCancelBtn
>
Delete this data
</SweetAlert>
<DialogForm
openDialog={openDialog}
closeDialog={handleCloseDialog}
toggleDialog={() => toggleAddDialog}
typeDialog={typeDialog}
dataEdit={dataEdit}
clickOpenModal={clickOpenModal}
dataParent={allDataMenu}
/>
<DialogInitialGantt
openDialog={openDialogIG}
closeDialog={closeDialogIG}
toggleDialog={toggleDialogIG}
idTypeProject={idTypeProject}
/>
<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={`Search project type...`} />
</Col>
<Col>
<Tooltip title="Add Material Resource">
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Tooltip>
<Tooltip title="Export Excel">
<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 ProjectType;

1321
src/views/SimproV2/ResourceTools/index.js
View File

File diff suppressed because it is too large Load Diff

758
src/views/SimproV2/ResourceWorker/DialogForm.js
Unescape View File

@ -1,379 +1,379 @@
import React, { useEffect, useState } from 'react'
import {
Modal, ModalHeader, ModalBody, ModalFooter,
Button, Form, FormGroup, Label, Input, Col, Row
} from 'reactstrap';
import { DatePicker, Tooltip, Select, Input as InputAntd } from 'antd';
import moment from 'moment';
import 'antd/dist/antd.css';
import { formatRupiah, formatNumber } from '../../../const/CustomFunc'
import { ROLE_SEARCH } from '../../../const/ApiConst'
const { Option } = Select
const token = window.localStorage.getItem('token');
const config = {
headers:
{
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, divisiList }) => {
const [openDialogMap, setOpenDialogMap] = useState(false)
const [id, setId] = useState(0)
const [resourceName, setResourceName] = useState('')
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [retryPassword, setRetryPassword] = useState('')
const [employeeType, setEmployeeType] = useState('')
const [phoneNo, setPhoneNo] = useState('')
const [email, setEmail] = useState('')
const [gender, setGender] = useState('')
const [birthDate, setBirthDate] = useState('')
const [birthPlace, setBirthPlace] = useState('')
const [bloodType, setBloodType] = useState('')
const [ktpNumber, setKtpNumber] = useState('')
const [biayaPerJam, setBiayaPerJam] = useState('')
const [roleId, setRoleId] = useState('')
const [address, setAddress] = useState('')
const [divisionId, setDivisionId] = useState('')
const [statusResource, setStatusResource] = useState('active')
useEffect(() => {
if (typeDialog === "Edit" || typeDialog === "Set") {
console.log("cel data Edit", dataEdit)
setId(dataEdit.id)
setResourceName(dataEdit.name)
setUsername(dataEdit.username)
setPassword('')
setRetryPassword('')
setEmployeeType(dataEdit.employee_type)
setPhoneNo(dataEdit.phone_number)
setEmail(dataEdit.email)
setGender(dataEdit.gender)
setBirthDate(dataEdit.birth_date ? moment(dataEdit.birth_date) : "")
setBirthPlace(dataEdit.birth_place)
setBloodType(dataEdit.blood_type)
setKtpNumber(dataEdit.ktp_number ? dataEdit.ktp_number : '')
setBiayaPerJam(dataEdit.biaya_per_jam ? formatNumber(dataEdit.biaya_per_jam) : '')
setRoleId(dataEdit.role_id)
setDivisionId(dataEdit.divisi_id)
setAddress(dataEdit.address)
} else {
setId(0)
setResourceName('')
setUsername('')
setPassword('')
setRetryPassword('')
setEmployeeType('')
setPhoneNo('')
setEmail('')
setGender('')
setBirthDate('')
setBirthPlace('')
setBloodType('')
setKtpNumber('')
setBiayaPerJam('')
setRoleId('')
setDivisionId('')
setAddress('')
setStatusResource('active')
}
}, [dataEdit, openDialog])
const handleSave = () => {
let data = '';
if (!ktpNumber && ktpNumber === "") {
alert("Please input NIK (KTP/ ID Card)");
return;
}
if (!roleId && roleId === "") {
alert("Please select the role");
return;
}
if (!divisionId && divisionId === "") {
alert("Please select the division");
return;
}
if (typeDialog === "Save") {
console.log("divisionId ", divisionId)
data = {
name: resourceName,
employee_type: employeeType,
phone_number: phoneNo,
email,
gender,
birth_place: birthPlace,
ktp_number: ktpNumber,
role_id: roleId,
divisi_id: divisionId,
address,
status_resource: statusResource
}
if(birthDate && birthDate!=""){
data['birth_date'] = birthDate;
}
closeDialog('save', data);
} else if (typeDialog === "Set") {
if (!password && password === "") {
alert("Please fill password");
return;
}
if (password !== retryPassword) {
alert("Password doesn't match");
return;
}
data = {
id,
username,
password,
email,
}
closeDialog('edit', data);
} else {
data = {
id,
name: resourceName,
username,
employee_type: employeeType,
phone_number: phoneNo,
email,
gender,
birth_place: birthPlace,
blood_type: bloodType,
ktp_number: ktpNumber,
biaya_per_jam: biayaPerJam.replace('.', ''),
role_id: roleId,
divisi_id: divisionId,
address,
status_resource: statusResource
}
if(birthDate && birthDate!=""){
data['birth_date'] = birthDate;
}
closeDialog('edit', data);
}
}
const handleCancel = () => {
closeDialog('cancel', 'none')
}
const setupSelectRole = () => {
return (
<>
{roleList.map((val, index) => {
return (
<Option key={index} value={val.id}>{val.name}</Option>
)
})}
</>
)
}
const setupSelectDivisi = () => {
return (
<>
{divisiList.map((val, index) => {
return (
<Option key={index} value={val.id}>{val.name}</Option>
)
})}
</>
)
}
const renderForm = () => {
return (
<Form>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">NIK (KTP / ID Card) *</Label>
{/* <Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input NIK (KTP)...`} maxLength="16" /> */}
<Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value)} placeholder={`Input NIK (KTP)...`} maxLength="16" />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Resource Name *</Label>
<Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={`Input resource name...`} />
</FormGroup>
</Col>
</Row>
{/* {typeDialog === 'Save' &&
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Password</Label>
<Input type="password" value={password} onChange={(e)=> setPassword(e.target.value)} placeholder={`Password...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Retry Password</Label>
<Input type="password" value={retryPassword} onChange={(e)=> setRetryPassword(e.target.value)} placeholder={`Retry password...`} />
</FormGroup>
</Col>
</Row>
} */}
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Employee Type *</Label>
<Select showSearch value={employeeType} defaultValue={employeeType} onChange={(val) => setEmployeeType(val)} placeholder="Select Employee Type" style={{ width: '100%' }}>
<Option value={'employee'}>Employee</Option>
<Option value={'subcon'}>Subcon</Option>
<Option value={'freelance'}>Freelance</Option>
</Select>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Phone No.</Label>
<Input type="text" value={phoneNo} onChange={(e) => setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input phone number...`} maxLength="15" />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Email</Label>
<Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Input email...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Gender</Label>
<Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder="Select Gender" style={{ width: '100%' }}>
<Option value="Male">Male</Option>
<Option value="Female">Female</Option>
{/* <Option value="Other">Other</Option> */}
</Select>
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Birth Place</Label>
<Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={`Input birth place...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Birth Date</Label>
<DatePicker style={{ width: "100%" }} value={birthDate} onChange={(date, dateString) => setBirthDate(date)} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Role *</Label>
<Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder="Select Role" style={{ width: '100%' }}>
{setupSelectRole()}
</Select>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Division *</Label>
{/* <Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}>
<Option value={'active'}>Active</Option>
<Option value={'inactive'}>Inactive</Option>
</Select> */}
<Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder="Select Division" style={{ width: '100%' }}>
{setupSelectDivisi()}
</Select>
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<Label className="capitalize">Status Resource</Label>
<Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}>
<Option value={'active'}>Active</Option>
<Option value={'inactive'}>Inactive</Option>
</Select>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Address</Label>
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Input address..." />
</FormGroup>
</Col>
</Row>
</Form>
)
}
const renderForm2 = () => {
return (
<Form>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Email</Label>
<Input type="text" defaultValue={""} value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Email...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Username</Label>
<Input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={`Username...`} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Password</Label>
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={`Password...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Retry Password</Label>
<Input type="password" value={retryPassword} onChange={(e) => setRetryPassword(e.target.value)} placeholder={`Retry password...`} />
</FormGroup>
</Col>
</Row>
</Form>
)
}
return (
<>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Human Resource</ModalHeader>
<ModalBody>
{typeDialog !== "Set" ? renderForm() : renderForm2()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
</ModalFooter>
</Modal>
</>
)
}
export default DialogForm;
import React, { useEffect, useState } from 'react'
import {
Modal, ModalHeader, ModalBody, ModalFooter,
Button, Form, FormGroup, Label, Input, Col, Row
} from 'reactstrap';
import { DatePicker, Tooltip, Select, Input as InputAntd } from 'antd';
import moment from 'moment';
import 'antd/dist/antd.css';
import { formatRupiah, formatNumber } from '../../../const/CustomFunc'
import { ROLE_SEARCH } from '../../../const/ApiConst'
const { Option } = Select
const token = window.localStorage.getItem('token');
const config = {
headers:
{
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, divisiList }) => {
const [openDialogMap, setOpenDialogMap] = useState(false)
const [id, setId] = useState(0)
const [resourceName, setResourceName] = useState('')
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [retryPassword, setRetryPassword] = useState('')
const [employeeType, setEmployeeType] = useState('')
const [phoneNo, setPhoneNo] = useState('')
const [email, setEmail] = useState('')
const [gender, setGender] = useState('')
const [birthDate, setBirthDate] = useState('')
const [birthPlace, setBirthPlace] = useState('')
const [bloodType, setBloodType] = useState('')
const [ktpNumber, setKtpNumber] = useState('')
const [biayaPerJam, setBiayaPerJam] = useState('')
const [roleId, setRoleId] = useState('')
const [address, setAddress] = useState('')
const [divisionId, setDivisionId] = useState('')
const [statusResource, setStatusResource] = useState('active')
useEffect(() => {
if (typeDialog === "Edit" || typeDialog === "Set") {
console.log("cel data Edit", dataEdit)
setId(dataEdit.id)
setResourceName(dataEdit.name)
setUsername(dataEdit.username)
setPassword('')
setRetryPassword('')
setEmployeeType(dataEdit.employee_type)
setPhoneNo(dataEdit.phone_number)
setEmail(dataEdit.email)
setGender(dataEdit.gender)
setBirthDate(dataEdit.birth_date ? moment(dataEdit.birth_date) : "")
setBirthPlace(dataEdit.birth_place)
setBloodType(dataEdit.blood_type)
setKtpNumber(dataEdit.ktp_number ? dataEdit.ktp_number : '')
setBiayaPerJam(dataEdit.biaya_per_jam ? formatNumber(dataEdit.biaya_per_jam) : '')
setRoleId(dataEdit.role_id)
setDivisionId(dataEdit.divisi_id)
setAddress(dataEdit.address)
} else {
setId(0)
setResourceName('')
setUsername('')
setPassword('')
setRetryPassword('')
setEmployeeType('')
setPhoneNo('')
setEmail('')
setGender('')
setBirthDate('')
setBirthPlace('')
setBloodType('')
setKtpNumber('')
setBiayaPerJam('')
setRoleId('')
setDivisionId('')
setAddress('')
setStatusResource('active')
}
}, [dataEdit, openDialog])
const handleSave = () => {
let data = '';
if (!ktpNumber && ktpNumber === "") {
alert("Please input NIK (KTP/ ID Card)");
return;
}
if (!roleId && roleId === "") {
alert("Please select the role");
return;
}
if (!divisionId && divisionId === "") {
alert("Please select the division");
return;
}
if (typeDialog === "Save") {
console.log("divisionId ", divisionId)
data = {
name: resourceName,
employee_type: employeeType,
phone_number: phoneNo,
email,
gender,
birth_place: birthPlace,
ktp_number: ktpNumber,
role_id: roleId,
divisi_id: divisionId,
address,
status_resource: statusResource
}
if (birthDate && birthDate != "") {
data['birth_date'] = birthDate;
}
closeDialog('save', data);
} else if (typeDialog === "Set") {
if (!password && password === "") {
alert("Please fill password");
return;
}
if (password !== retryPassword) {
alert("Password doesn't match");
return;
}
data = {
id,
username,
password,
email,
}
closeDialog('edit', data);
} else {
data = {
id,
name: resourceName,
username,
employee_type: employeeType,
phone_number: phoneNo,
email,
gender,
birth_place: birthPlace,
blood_type: bloodType,
ktp_number: ktpNumber,
biaya_per_jam: biayaPerJam.replace('.', ''),
role_id: roleId,
divisi_id: divisionId,
address,
status_resource: statusResource
}
if (birthDate && birthDate != "") {
data['birth_date'] = birthDate;
}
closeDialog('edit', data);
}
}
const handleCancel = () => {
closeDialog('cancel', 'none')
}
const setupSelectRole = () => {
return (
<>
{roleList.map((val, index) => {
return (
<Option key={index} value={val.id}>{val.name}</Option>
)
})}
</>
)
}
const setupSelectDivisi = () => {
return (
<>
{divisiList.map((val, index) => {
return (
<Option key={index} value={val.id}>{val.name}</Option>
)
})}
</>
)
}
const renderForm = () => {
return (
<Form>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">NIK (KTP / ID Card) *</Label>
{/* <Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input NIK (KTP)...`} maxLength="16" /> */}
<Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value)} placeholder={`Input NIK (KTP)...`} maxLength="16" />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Resource Name *</Label>
<Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={`Input resource name...`} />
</FormGroup>
</Col>
</Row>
{/* {typeDialog === 'Save' &&
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Password</Label>
<Input type="password" value={password} onChange={(e)=> setPassword(e.target.value)} placeholder={`Password...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Retry Password</Label>
<Input type="password" value={retryPassword} onChange={(e)=> setRetryPassword(e.target.value)} placeholder={`Retry password...`} />
</FormGroup>
</Col>
</Row>
} */}
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Employee Type *</Label>
<Select showSearch value={employeeType} defaultValue={employeeType} onChange={(val) => setEmployeeType(val)} placeholder="Select Employee Type" style={{ width: '100%' }}>
<Option value={'employee'}>Employee</Option>
<Option value={'subcon'}>Subcon</Option>
<Option value={'freelance'}>Freelance</Option>
</Select>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Phone No.</Label>
<Input type="text" value={phoneNo} onChange={(e) => setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input phone number...`} maxLength="15" />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Email</Label>
<Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Input email...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Gender</Label>
<Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder="Select Gender" style={{ width: '100%' }}>
<Option value="Male">Male</Option>
<Option value="Female">Female</Option>
{/* <Option value="Other">Other</Option> */}
</Select>
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Birth Place</Label>
<Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={`Input birth place...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Birth Date</Label>
<DatePicker style={{ width: "100%" }} value={birthDate} onChange={(date, dateString) => setBirthDate(date)} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Role *</Label>
<Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder="Select Role" style={{ width: '100%' }}>
{setupSelectRole()}
</Select>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Division *</Label>
{/* <Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}>
<Option value={'active'}>Active</Option>
<Option value={'inactive'}>Inactive</Option>
</Select> */}
<Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder="Select Division" style={{ width: '100%' }}>
{setupSelectDivisi()}
</Select>
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<Label className="capitalize">Status Resource</Label>
<Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}>
<Option value={'active'}>Active</Option>
<Option value={'inactive'}>Inactive</Option>
</Select>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Address</Label>
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Input address..." />
</FormGroup>
</Col>
</Row>
</Form>
)
}
const renderForm2 = () => {
return (
<Form>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Email</Label>
<Input type="text" defaultValue={""} value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Email...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Username</Label>
<Input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={`Username...`} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Password</Label>
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={`Password...`} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Retry Password</Label>
<Input type="password" value={retryPassword} onChange={(e) => setRetryPassword(e.target.value)} placeholder={`Retry password...`} />
</FormGroup>
</Col>
</Row>
</Form>
)
}
return (
<>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Human Resource</ModalHeader>
<ModalBody>
{typeDialog !== "Set" ? renderForm() : renderForm2()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
</ModalFooter>
</Modal>
</>
)
}
export default DialogForm;

1009
src/views/SimproV2/ResourceWorker/index.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save