nurkomalasari
2 years ago
4 changed files with 2030 additions and 1829 deletions
@ -1,377 +1,394 @@ |
|||||||
import * as XLSX from 'xlsx'; |
import * as XLSX from 'xlsx'; |
||||||
import DialogForm from './DialogForm'; |
import DialogForm from './DialogForm'; |
||||||
import DialogInitialGantt from './DialogInitialGantt'; |
import DialogInitialGantt from './DialogInitialGantt'; |
||||||
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 { 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 { PROJECT_TYPE_ADD, PROJECT_TYPE_EDIT, PROJECT_TYPE_DELETE, PROJECT_TYPE_SEARCH } from '../../../const/ApiConst'; |
import { PROJECT_TYPE_ADD, PROJECT_TYPE_EDIT, PROJECT_TYPE_DELETE, PROJECT_TYPE_SEARCH } from '../../../const/ApiConst'; |
||||||
import { Pagination, Button, Tooltip, Table} from 'antd'; |
import { Pagination, Button, Tooltip, Table } from 'antd'; |
||||||
|
|
||||||
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 format = "DD-MM-YYYY"; |
||||||
const token = window.localStorage.getItem('token'); |
const token = window.localStorage.getItem('token'); |
||||||
const config = { |
const config = { |
||||||
headers: |
headers: |
||||||
{ |
{ |
||||||
Authorization : `Bearer ${token}`, |
Authorization: `Bearer ${token}`, |
||||||
"Content-type" : `application/json` |
"Content-type": `application/json` |
||||||
} |
} |
||||||
}; |
}; |
||||||
|
|
||||||
const column = [ |
const column = [ |
||||||
{ name: "Nama" }, |
{ name: "Nama" }, |
||||||
{ name: "Deskripsi" }, |
{ name: "Deskripsi" }, |
||||||
] |
] |
||||||
|
|
||||||
const ProjectType = ({params}) => { |
const ProjectType = ({ params }) => { |
||||||
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 pageName = params.name; |
const pageName = params.name; |
||||||
|
|
||||||
const [alertDelete, setAlertDelete] = useState(false) |
const [alertDelete, setAlertDelete] = useState(false) |
||||||
const [allDataMenu, setAllDataMenu] = useState([]) |
const [allDataMenu, setAllDataMenu] = useState([]) |
||||||
const [clickOpenModal, setClickOpenModal] = useState(false) |
const [clickOpenModal, setClickOpenModal] = useState(false) |
||||||
const [currentPage, setCurrentPage] = useState(1) |
const [currentPage, setCurrentPage] = useState(1) |
||||||
const [dataEdit, setDataEdit] = useState([]) |
const [dataEdit, setDataEdit] = useState([]) |
||||||
const [dataExport, setDataExport] = useState([]) |
const [dataExport, setDataExport] = useState([]) |
||||||
const [dataTable, setDatatable] = useState([]) |
const [dataTable, setDatatable] = useState([]) |
||||||
const [idDelete, setIdDelete] = useState(0) |
const [idDelete, setIdDelete] = useState(0) |
||||||
const [idTypeProject, setIdTypeProject] = useState(0) |
const [idTypeProject, setIdTypeProject] = useState(0) |
||||||
const [openDialog, setOpenDialog] = useState(false) |
const [openDialog, setOpenDialog] = useState(false) |
||||||
const [openDialogIG, setOpenDialogIG] = useState(false) |
const [openDialogIG, setOpenDialogIG] = useState(false) |
||||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||||
const [search, setSearch] = useState('') |
const [search, setSearch] = useState('') |
||||||
const [totalPage, setTotalPage] = useState(0) |
const [totalPage, setTotalPage] = useState(0) |
||||||
const [typeDialog, setTypeDialog] = useState('Save') |
const [typeDialog, setTypeDialog] = useState('Save') |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
getDataProjectType() |
getDataProjectType() |
||||||
}, [currentPage, rowsPerPage, search]) |
}, [currentPage, rowsPerPage, search]) |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
const cekData = dataExport || [] |
const cekData = dataExport || [] |
||||||
if (cekData.length > 0) { |
if (cekData.length > 0) { |
||||||
exportExcel() |
exportExcel() |
||||||
} |
} |
||||||
}, [dataExport]) |
}, [dataExport]) |
||||||
|
|
||||||
const getDataProjectType = async () => { |
const getDataProjectType = async () => { |
||||||
|
|
||||||
let start = 0; |
let start = 0; |
||||||
|
|
||||||
if (currentPage !== 1 && currentPage > 1) { |
if (currentPage !== 1 && currentPage > 1) { |
||||||
start = (currentPage * rowsPerPage) - rowsPerPage |
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
} |
} |
||||||
|
|
||||||
const payload = { |
const payload = { |
||||||
"columns": [ |
"columns": [ |
||||||
{ |
{ |
||||||
"name":"name", |
"name": "name", |
||||||
"logic_operator":"like", |
"logic_operator": "like", |
||||||
"value":search, |
"value": search, |
||||||
"operator":"AND" |
"operator": "AND" |
||||||
} |
} |
||||||
], |
], |
||||||
"orders": { |
"orders": { |
||||||
"ascending": true, |
"ascending": true, |
||||||
"columns": [ |
"columns": [ |
||||||
'id' |
'id' |
||||||
] |
] |
||||||
}, |
}, |
||||||
"paging": { |
"paging": { |
||||||
"length": rowsPerPage, |
"length": rowsPerPage, |
||||||
"start": start |
"start": start |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const result = await axios |
const result = await axios |
||||||
.post(PROJECT_TYPE_SEARCH, payload, config) |
.post(PROJECT_TYPE_SEARCH, payload, config, HEADER) |
||||||
.then(res => res) |
.then(res => res) |
||||||
.catch((error) => error.response); |
.catch((error) => error.response); |
||||||
|
|
||||||
if(result && result.data && result.data.code == 200){ |
if (result && result.data && result.data.code == 200) { |
||||||
setDatatable(result.data.data); |
setDatatable(result.data.data); |
||||||
setTotalPage(result.data.totalRecord); |
setTotalPage(result.data.totalRecord); |
||||||
}else{ |
} else { |
||||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const handleSearch = e => { |
const handleSearch = e => { |
||||||
const value = e.target.value |
const value = e.target.value |
||||||
setSearch(value); |
setSearch(value); |
||||||
setCurrentPage(1) |
setCurrentPage(1) |
||||||
}; |
}; |
||||||
|
|
||||||
const handleOpenDialog = (type) => { |
const handleOpenDialog = (type) => { |
||||||
setOpenDialog(true) |
setOpenDialog(true) |
||||||
setTypeDialog(type) |
setTypeDialog(type) |
||||||
} |
} |
||||||
|
|
||||||
const handleExportExcel = async () => { |
const handleExportExcel = async () => { |
||||||
let start = 0; |
let start = 0; |
||||||
|
|
||||||
const payload = { |
if (currentPage !== 1 && currentPage > 1) { |
||||||
"paging": { "start": start, "length": -1 }, |
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
"columns": [ |
} |
||||||
{ "name": "name", "logic_operator": "ilike", "value": search, "operator": "AND" } |
|
||||||
], |
const payload = { |
||||||
"joins": [], |
"columns": [ |
||||||
"orders": { "columns": ["id"], "ascending": false } |
{ |
||||||
} |
"name": "name", |
||||||
|
"logic_operator": "like", |
||||||
const result = await axios |
"value": search, |
||||||
.post(PROJECT_TYPE_SEARCH, payload) |
"operator": "AND" |
||||||
.then(res => res) |
} |
||||||
.catch((error) => error.response); |
], |
||||||
|
"orders": { |
||||||
if (result && result.data && result.data.code == 200) { |
"ascending": true, |
||||||
let resData = result.data.data; |
"columns": [ |
||||||
const excelData = []; |
'id' |
||||||
resData.map((val, index) => { |
] |
||||||
let dataRow = { |
}, |
||||||
"Nama": val.name, |
"paging": { |
||||||
"Deskripsi": val.description, |
"length": rowsPerPage, |
||||||
} |
"start": start |
||||||
excelData.push(dataRow) |
} |
||||||
}) |
} |
||||||
await setDataExport(excelData); |
|
||||||
} else { |
|
||||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
const result = await axios |
||||||
} |
.post(PROJECT_TYPE_SEARCH, payload, HEADER) |
||||||
} |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
const exportExcel = () => { |
|
||||||
const dataExcel = dataExport || []; |
if (result && result.data && result.data.code == 200) { |
||||||
const fileName = `Data ${pageName}.xlsx`; |
let resData = result.data.data; |
||||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
const excelData = []; |
||||||
const wb = XLSX.utils.book_new(); |
resData.map((val, index) => { |
||||||
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
let dataRow = { |
||||||
XLSX.writeFile(wb, fileName); |
"Nama": val.name, |
||||||
setDataExport([]) |
"Deskripsi": val.description, |
||||||
} |
} |
||||||
|
excelData.push(dataRow) |
||||||
const handleEdit = (data) => { |
}) |
||||||
setDataEdit(data) |
await setDataExport(excelData); |
||||||
handleOpenDialog('Edit'); |
} else { |
||||||
} |
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
||||||
|
} |
||||||
const handleDelete = async (id) => { |
} |
||||||
await setAlertDelete(true) |
|
||||||
await setIdDelete(id) |
const exportExcel = () => { |
||||||
} |
const dataExcel = dataExport || []; |
||||||
|
const fileName = `Data ${pageName}.xlsx`; |
||||||
const handleCloseDialog = (type, data) => { |
const ws = XLSX.utils.json_to_sheet(dataExcel); |
||||||
if (type === "save") { |
const wb = XLSX.utils.book_new(); |
||||||
saveProjectType(data); |
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
||||||
} else if (type === "edit") { |
XLSX.writeFile(wb, fileName); |
||||||
editMaterialR(data); |
setDataExport([]) |
||||||
} |
} |
||||||
setDataEdit([]) |
|
||||||
setOpenDialog(false) |
const handleEdit = (data) => { |
||||||
} |
setDataEdit(data) |
||||||
|
handleOpenDialog('Edit'); |
||||||
const saveProjectType = async (data) => { |
} |
||||||
const formData = data |
|
||||||
const result = await axios.post(PROJECT_TYPE_ADD, formData, HEADER) |
const handleDelete = async (id) => { |
||||||
.then(res => res) |
await setAlertDelete(true) |
||||||
.catch((error) => error.response); |
await setIdDelete(id) |
||||||
|
} |
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataProjectType() |
const handleCloseDialog = (type, data) => { |
||||||
NotificationManager.success(`Data project type berhasil ditambah`, 'Success!!'); |
if (type === "save") { |
||||||
} else { |
saveProjectType(data); |
||||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
} else if (type === "edit") { |
||||||
} |
editMaterialR(data); |
||||||
} |
} |
||||||
|
setDataEdit([]) |
||||||
const editMaterialR = async (data) => { |
setOpenDialog(false) |
||||||
let urlEdit = PROJECT_TYPE_EDIT(data.id) |
} |
||||||
const formData = data |
|
||||||
|
const saveProjectType = async (data) => { |
||||||
const result = await axios.put(urlEdit, formData, HEADER) |
const formData = data |
||||||
.then(res => res) |
const result = await axios.post(PROJECT_TYPE_ADD, formData, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataProjectType(); |
if (result && result.data && result.data.code === 200) { |
||||||
NotificationManager.success(`Data project type berhasil diedit`, 'Success!!'); |
getDataProjectType() |
||||||
} else { |
NotificationManager.success(`Data project type berhasil ditambah`, 'Success!!'); |
||||||
NotificationManager.error(`Data project type gagal di edit`, `Failed!!`); |
} else { |
||||||
} |
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
} |
} |
||||||
|
} |
||||||
const toggleAddDialog = () => { |
|
||||||
setOpenDialog(!openDialog) |
const editMaterialR = async (data) => { |
||||||
} |
let urlEdit = PROJECT_TYPE_EDIT(data.id) |
||||||
|
const formData = data |
||||||
const handleDialogIg = (id) => { |
|
||||||
setIdTypeProject(id) |
const result = await axios.put(urlEdit, formData, HEADER) |
||||||
setOpenDialogIG(true) |
.then(res => res) |
||||||
} |
.catch((error) => error.response); |
||||||
|
|
||||||
const closeDialogIG = () => { |
if (result && result.data && result.data.code === 200) { |
||||||
setIdTypeProject(0) |
getDataProjectType(); |
||||||
setOpenDialogIG(false) |
NotificationManager.success(`Data project type berhasil diedit`, 'Success!!'); |
||||||
} |
} else { |
||||||
|
NotificationManager.error(`Data project type gagal di edit`, `Failed!!`); |
||||||
const toggleDialogIG = () => { |
} |
||||||
if(openDialogIG){ |
} |
||||||
setIdTypeProject(0) |
|
||||||
} |
const toggleAddDialog = () => { |
||||||
setOpenDialogIG(!openDialogIG); |
setOpenDialog(!openDialog) |
||||||
} |
} |
||||||
|
|
||||||
const onConfirmDelete = async () => { |
const handleDialogIg = (id) => { |
||||||
let url = PROJECT_TYPE_DELETE(idDelete); |
setIdTypeProject(id) |
||||||
|
setOpenDialogIG(true) |
||||||
const result = await axios.delete(url,config) |
} |
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
const closeDialogIG = () => { |
||||||
|
setIdTypeProject(0) |
||||||
if (result && result.data && result.data.code === 200) { |
setOpenDialogIG(false) |
||||||
getDataProjectType() |
} |
||||||
setIdDelete(0) |
|
||||||
setAlertDelete(false) |
const toggleDialogIG = () => { |
||||||
NotificationManager.success(`Data project type berhasil dihapus!`, 'Success!!'); |
if (openDialogIG) { |
||||||
} else { |
setIdTypeProject(0) |
||||||
setIdDelete(0) |
} |
||||||
setAlertDelete(false) |
setOpenDialogIG(!openDialogIG); |
||||||
NotificationManager.error(`Data project type gagal dihapus!}`, 'Failed!!'); |
} |
||||||
} |
|
||||||
} |
const onConfirmDelete = async () => { |
||||||
|
let url = PROJECT_TYPE_DELETE(idDelete); |
||||||
const cancelDelete = () => { |
|
||||||
setAlertDelete(false) |
const result = await axios.delete(url, config) |
||||||
setIdDelete(0) |
.then(res => res) |
||||||
} |
.catch((error) => error.response); |
||||||
|
|
||||||
const onShowSizeChange = (current, pageSize) => { |
if (result && result.data && result.data.code === 200) { |
||||||
setRowsPerPage(pageSize) |
getDataProjectType() |
||||||
} |
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
const onPagination = (current, pageSize) => { |
NotificationManager.success(`Data project type berhasil dihapus!`, 'Success!!'); |
||||||
setCurrentPage(current) |
} else { |
||||||
} |
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
const dataNotAvailable = () => { |
NotificationManager.error(`Data project type gagal dihapus!}`, 'Failed!!'); |
||||||
if(dataTable.length===0){ |
} |
||||||
return ( |
} |
||||||
<tr> |
|
||||||
<td align="center" colSpan="3">Tidak ada data project type</td> |
const cancelDelete = () => { |
||||||
</tr> |
setAlertDelete(false) |
||||||
) |
setIdDelete(0) |
||||||
} |
} |
||||||
} |
|
||||||
|
const onShowSizeChange = (current, pageSize) => { |
||||||
const renderTable = useMemo(() => { |
setRowsPerPage(pageSize) |
||||||
const columns = [ |
} |
||||||
{ |
|
||||||
title: 'Action', |
const onPagination = (current, pageSize) => { |
||||||
dataIndex: '', |
setCurrentPage(current) |
||||||
key: 'x', |
} |
||||||
className:'nowrap', |
|
||||||
render: (text, record) => <> |
const dataNotAvailable = () => { |
||||||
<Tooltip title="Delete"> |
if (dataTable.length === 0) { |
||||||
<i className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i> |
return ( |
||||||
</Tooltip> |
<tr> |
||||||
<Tooltip title="Edit"> |
<td align="center" colSpan="3">Tidak ada data project type</td> |
||||||
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i> |
</tr> |
||||||
</Tooltip>{" "} |
) |
||||||
<Tooltip title="Template Gantt"> |
} |
||||||
<i className="fa fa-gears" style={{ color: 'blue', cursor: "pointer" }} onClick={() => handleDialogIg(text.id)}></i> |
} |
||||||
</Tooltip> |
|
||||||
</>, |
const renderTable = useMemo(() => { |
||||||
}, |
const columns = [ |
||||||
{ title: 'Nama Role', dataIndex: 'name', key: 'name', className:"nowrap" }, |
{ |
||||||
{ title: 'Description', dataIndex: 'description', key: 'description' }, |
title: 'Action', |
||||||
]; |
dataIndex: '', |
||||||
return ( |
key: 'x', |
||||||
<Table |
className: 'nowrap', |
||||||
rowKey="id" |
render: (text, record) => <> |
||||||
size="small" |
<Tooltip title="Delete"> |
||||||
columns={columns} |
<i className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i> |
||||||
dataSource={dataTable} |
</Tooltip> |
||||||
pagination={false} |
<Tooltip title="Edit"> |
||||||
/> |
<i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i> |
||||||
) |
</Tooltip>{" "} |
||||||
}, [dataTable]) |
<Tooltip title="Template Gantt"> |
||||||
|
<i className="fa fa-gears" style={{ color: 'blue', cursor: "pointer" }} onClick={() => handleDialogIg(text.id)}></i> |
||||||
return ( |
</Tooltip> |
||||||
<div> |
</>, |
||||||
<NotificationContainer /> |
}, |
||||||
<SweetAlert |
{ title: 'Nama Role', dataIndex: 'name', key: 'name', className: "nowrap" }, |
||||||
show={alertDelete} |
{ title: 'Description', dataIndex: 'description', key: 'description' }, |
||||||
warning |
]; |
||||||
showCancel |
return ( |
||||||
confirmBtnText="Delete" |
<Table |
||||||
confirmBtnBsStyle="danger" |
rowKey="id" |
||||||
title={`Are you sure?`} |
size="small" |
||||||
onConfirm={onConfirmDelete} |
columns={columns} |
||||||
onCancel={() => cancelDelete()} |
dataSource={dataTable} |
||||||
focusCancelBtn |
pagination={false} |
||||||
> |
/> |
||||||
Delete this data |
) |
||||||
</SweetAlert> |
}, [dataTable]) |
||||||
<DialogForm |
|
||||||
openDialog={openDialog} |
return ( |
||||||
closeDialog={handleCloseDialog} |
<div> |
||||||
toggleDialog={() => toggleAddDialog} |
<NotificationContainer /> |
||||||
typeDialog={typeDialog} |
<SweetAlert |
||||||
dataEdit={dataEdit} |
show={alertDelete} |
||||||
clickOpenModal={clickOpenModal} |
warning |
||||||
dataParent={allDataMenu} |
showCancel |
||||||
/> |
confirmBtnText="Delete" |
||||||
<DialogInitialGantt |
confirmBtnBsStyle="danger" |
||||||
openDialog={openDialogIG} |
title={`Are you sure?`} |
||||||
closeDialog={closeDialogIG} |
onConfirm={onConfirmDelete} |
||||||
toggleDialog={toggleDialogIG} |
onCancel={() => cancelDelete()} |
||||||
idTypeProject={idTypeProject} |
focusCancelBtn |
||||||
/> |
> |
||||||
<Card> |
Delete this data |
||||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
</SweetAlert> |
||||||
<h4 className="capitalize">{pageName}</h4> |
<DialogForm |
||||||
<Row> |
openDialog={openDialog} |
||||||
<Col> |
closeDialog={handleCloseDialog} |
||||||
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search project type...`} /> |
toggleDialog={() => toggleAddDialog} |
||||||
</Col> |
typeDialog={typeDialog} |
||||||
<Col> |
dataEdit={dataEdit} |
||||||
<Tooltip title="Add Material Resource"> |
clickOpenModal={clickOpenModal} |
||||||
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
dataParent={allDataMenu} |
||||||
</Tooltip> |
/> |
||||||
<Tooltip title="Export Excel"> |
<DialogInitialGantt |
||||||
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
openDialog={openDialogIG} |
||||||
</Tooltip> |
closeDialog={closeDialogIG} |
||||||
</Col> |
toggleDialog={toggleDialogIG} |
||||||
</Row> |
idTypeProject={idTypeProject} |
||||||
</CardHeader> |
/> |
||||||
<CardBody> |
<Card> |
||||||
{renderTable} |
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||||
<Pagination |
<h4 className="capitalize">{pageName}</h4> |
||||||
style={{marginTop:"25px"}} |
<Row> |
||||||
showSizeChanger |
<Col> |
||||||
onShowSizeChange={onShowSizeChange} |
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={`Search project type...`} /> |
||||||
onChange={onPagination} |
</Col> |
||||||
defaultCurrent={currentPage} |
<Col> |
||||||
pageSize={rowsPerPage} |
<Tooltip title="Add Material Resource"> |
||||||
total={totalPage} |
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
||||||
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
</Tooltip> |
||||||
/> |
<Tooltip title="Export Excel"> |
||||||
</CardBody> |
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||||
</Card> |
</Tooltip> |
||||||
</div> |
</Col> |
||||||
) |
</Row> |
||||||
} |
</CardHeader> |
||||||
|
<CardBody> |
||||||
export default ProjectType; |
{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; |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,379 +1,379 @@ |
|||||||
import React, { useEffect, useState } from 'react' |
import React, { useEffect, useState } from 'react' |
||||||
import { |
import { |
||||||
Modal, ModalHeader, ModalBody, ModalFooter, |
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
Button, Form, FormGroup, Label, Input, Col, Row |
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
} from 'reactstrap'; |
} from 'reactstrap'; |
||||||
import { DatePicker, Tooltip, Select, Input as InputAntd } from 'antd'; |
import { DatePicker, Tooltip, Select, Input as InputAntd } from 'antd'; |
||||||
import moment from 'moment'; |
import moment from 'moment'; |
||||||
import 'antd/dist/antd.css'; |
import 'antd/dist/antd.css'; |
||||||
import { formatRupiah, formatNumber } from '../../../const/CustomFunc' |
import { formatRupiah, formatNumber } from '../../../const/CustomFunc' |
||||||
import { ROLE_SEARCH } from '../../../const/ApiConst' |
import { ROLE_SEARCH } from '../../../const/ApiConst' |
||||||
const { Option } = Select |
const { Option } = Select |
||||||
|
|
||||||
const token = window.localStorage.getItem('token'); |
const token = window.localStorage.getItem('token'); |
||||||
const config = { |
const config = { |
||||||
headers: |
headers: |
||||||
{ |
{ |
||||||
Authorization: `Bearer ${token}`, |
Authorization: `Bearer ${token}`, |
||||||
"Content-type": `application/json` |
"Content-type": `application/json` |
||||||
} |
} |
||||||
}; |
}; |
||||||
|
|
||||||
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, divisiList }) => { |
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, divisiList }) => { |
||||||
const [openDialogMap, setOpenDialogMap] = useState(false) |
const [openDialogMap, setOpenDialogMap] = useState(false) |
||||||
|
|
||||||
const [id, setId] = useState(0) |
const [id, setId] = useState(0) |
||||||
const [resourceName, setResourceName] = useState('') |
const [resourceName, setResourceName] = useState('') |
||||||
const [username, setUsername] = useState('') |
const [username, setUsername] = useState('') |
||||||
const [password, setPassword] = useState('') |
const [password, setPassword] = useState('') |
||||||
const [retryPassword, setRetryPassword] = useState('') |
const [retryPassword, setRetryPassword] = useState('') |
||||||
const [employeeType, setEmployeeType] = useState('') |
const [employeeType, setEmployeeType] = useState('') |
||||||
const [phoneNo, setPhoneNo] = useState('') |
const [phoneNo, setPhoneNo] = useState('') |
||||||
const [email, setEmail] = useState('') |
const [email, setEmail] = useState('') |
||||||
const [gender, setGender] = useState('') |
const [gender, setGender] = useState('') |
||||||
const [birthDate, setBirthDate] = useState('') |
const [birthDate, setBirthDate] = useState('') |
||||||
const [birthPlace, setBirthPlace] = useState('') |
const [birthPlace, setBirthPlace] = useState('') |
||||||
const [bloodType, setBloodType] = useState('') |
const [bloodType, setBloodType] = useState('') |
||||||
const [ktpNumber, setKtpNumber] = useState('') |
const [ktpNumber, setKtpNumber] = useState('') |
||||||
const [biayaPerJam, setBiayaPerJam] = useState('') |
const [biayaPerJam, setBiayaPerJam] = useState('') |
||||||
const [roleId, setRoleId] = useState('')
|
const [roleId, setRoleId] = useState('') |
||||||
const [address, setAddress] = useState('') |
const [address, setAddress] = useState('') |
||||||
const [divisionId, setDivisionId] = useState('') |
const [divisionId, setDivisionId] = useState('') |
||||||
const [statusResource, setStatusResource] = useState('active') |
const [statusResource, setStatusResource] = useState('active') |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
if (typeDialog === "Edit" || typeDialog === "Set") { |
if (typeDialog === "Edit" || typeDialog === "Set") { |
||||||
console.log("cel data Edit", dataEdit) |
console.log("cel data Edit", dataEdit) |
||||||
setId(dataEdit.id) |
setId(dataEdit.id) |
||||||
setResourceName(dataEdit.name) |
setResourceName(dataEdit.name) |
||||||
setUsername(dataEdit.username) |
setUsername(dataEdit.username) |
||||||
setPassword('') |
setPassword('') |
||||||
setRetryPassword('') |
setRetryPassword('') |
||||||
setEmployeeType(dataEdit.employee_type) |
setEmployeeType(dataEdit.employee_type) |
||||||
setPhoneNo(dataEdit.phone_number) |
setPhoneNo(dataEdit.phone_number) |
||||||
setEmail(dataEdit.email) |
setEmail(dataEdit.email) |
||||||
setGender(dataEdit.gender) |
setGender(dataEdit.gender) |
||||||
setBirthDate(dataEdit.birth_date ? moment(dataEdit.birth_date) : "") |
setBirthDate(dataEdit.birth_date ? moment(dataEdit.birth_date) : "") |
||||||
setBirthPlace(dataEdit.birth_place) |
setBirthPlace(dataEdit.birth_place) |
||||||
setBloodType(dataEdit.blood_type) |
setBloodType(dataEdit.blood_type) |
||||||
setKtpNumber(dataEdit.ktp_number ? dataEdit.ktp_number : '') |
setKtpNumber(dataEdit.ktp_number ? dataEdit.ktp_number : '') |
||||||
setBiayaPerJam(dataEdit.biaya_per_jam ? formatNumber(dataEdit.biaya_per_jam) : '') |
setBiayaPerJam(dataEdit.biaya_per_jam ? formatNumber(dataEdit.biaya_per_jam) : '') |
||||||
setRoleId(dataEdit.role_id) |
setRoleId(dataEdit.role_id) |
||||||
setDivisionId(dataEdit.divisi_id) |
setDivisionId(dataEdit.divisi_id) |
||||||
setAddress(dataEdit.address) |
setAddress(dataEdit.address) |
||||||
} else { |
} else { |
||||||
setId(0) |
setId(0) |
||||||
setResourceName('') |
setResourceName('') |
||||||
setUsername('') |
setUsername('') |
||||||
setPassword('') |
setPassword('') |
||||||
setRetryPassword('') |
setRetryPassword('') |
||||||
setEmployeeType('') |
setEmployeeType('') |
||||||
setPhoneNo('') |
setPhoneNo('') |
||||||
setEmail('') |
setEmail('') |
||||||
setGender('') |
setGender('') |
||||||
setBirthDate('') |
setBirthDate('') |
||||||
setBirthPlace('') |
setBirthPlace('') |
||||||
setBloodType('') |
setBloodType('') |
||||||
setKtpNumber('') |
setKtpNumber('') |
||||||
setBiayaPerJam('') |
setBiayaPerJam('') |
||||||
setRoleId('') |
setRoleId('') |
||||||
setDivisionId('') |
setDivisionId('') |
||||||
setAddress('') |
setAddress('') |
||||||
setStatusResource('active') |
setStatusResource('active') |
||||||
} |
} |
||||||
}, [dataEdit, openDialog]) |
}, [dataEdit, openDialog]) |
||||||
|
|
||||||
const handleSave = () => { |
const handleSave = () => { |
||||||
let data = ''; |
let data = ''; |
||||||
|
|
||||||
if (!ktpNumber && ktpNumber === "") { |
if (!ktpNumber && ktpNumber === "") { |
||||||
alert("Please input NIK (KTP/ ID Card)"); |
alert("Please input NIK (KTP/ ID Card)"); |
||||||
return; |
return; |
||||||
} |
} |
||||||
if (!roleId && roleId === "") { |
if (!roleId && roleId === "") { |
||||||
alert("Please select the role"); |
alert("Please select the role"); |
||||||
return; |
return; |
||||||
} |
} |
||||||
if (!divisionId && divisionId === "") { |
if (!divisionId && divisionId === "") { |
||||||
alert("Please select the division"); |
alert("Please select the division"); |
||||||
return; |
return; |
||||||
} |
} |
||||||
|
|
||||||
if (typeDialog === "Save") { |
if (typeDialog === "Save") { |
||||||
console.log("divisionId ", divisionId) |
console.log("divisionId ", divisionId) |
||||||
data = { |
data = { |
||||||
name: resourceName, |
name: resourceName, |
||||||
employee_type: employeeType, |
employee_type: employeeType, |
||||||
phone_number: phoneNo, |
phone_number: phoneNo, |
||||||
email, |
email, |
||||||
gender, |
gender, |
||||||
birth_place: birthPlace, |
birth_place: birthPlace, |
||||||
ktp_number: ktpNumber, |
ktp_number: ktpNumber, |
||||||
role_id: roleId, |
role_id: roleId, |
||||||
divisi_id: divisionId, |
divisi_id: divisionId, |
||||||
address, |
address, |
||||||
status_resource: statusResource |
status_resource: statusResource |
||||||
} |
} |
||||||
|
|
||||||
if(birthDate && birthDate!=""){ |
if (birthDate && birthDate != "") { |
||||||
data['birth_date'] = birthDate; |
data['birth_date'] = birthDate; |
||||||
} |
} |
||||||
|
|
||||||
closeDialog('save', data); |
closeDialog('save', data); |
||||||
} else if (typeDialog === "Set") { |
} else if (typeDialog === "Set") { |
||||||
if (!password && password === "") { |
if (!password && password === "") { |
||||||
alert("Please fill password"); |
alert("Please fill password"); |
||||||
return; |
return; |
||||||
} |
} |
||||||
if (password !== retryPassword) { |
if (password !== retryPassword) { |
||||||
alert("Password doesn't match"); |
alert("Password doesn't match"); |
||||||
return; |
return; |
||||||
} |
} |
||||||
data = { |
data = { |
||||||
id, |
id, |
||||||
username, |
username, |
||||||
password, |
password, |
||||||
email, |
email, |
||||||
} |
} |
||||||
|
|
||||||
closeDialog('edit', data); |
closeDialog('edit', data); |
||||||
} else { |
} else { |
||||||
|
|
||||||
data = { |
data = { |
||||||
id, |
id, |
||||||
name: resourceName, |
name: resourceName, |
||||||
username, |
username, |
||||||
employee_type: employeeType, |
employee_type: employeeType, |
||||||
phone_number: phoneNo, |
phone_number: phoneNo, |
||||||
email, |
email, |
||||||
gender, |
gender, |
||||||
birth_place: birthPlace, |
birth_place: birthPlace, |
||||||
blood_type: bloodType, |
blood_type: bloodType, |
||||||
ktp_number: ktpNumber, |
ktp_number: ktpNumber, |
||||||
biaya_per_jam: biayaPerJam.replace('.', ''), |
biaya_per_jam: biayaPerJam.replace('.', ''), |
||||||
role_id: roleId, |
role_id: roleId, |
||||||
divisi_id: divisionId, |
divisi_id: divisionId, |
||||||
address, |
address, |
||||||
status_resource: statusResource |
status_resource: statusResource |
||||||
} |
} |
||||||
|
|
||||||
if(birthDate && birthDate!=""){ |
if (birthDate && birthDate != "") { |
||||||
data['birth_date'] = birthDate; |
data['birth_date'] = birthDate; |
||||||
} |
} |
||||||
|
|
||||||
closeDialog('edit', data); |
closeDialog('edit', data); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const handleCancel = () => { |
const handleCancel = () => { |
||||||
closeDialog('cancel', 'none') |
closeDialog('cancel', 'none') |
||||||
} |
} |
||||||
|
|
||||||
const setupSelectRole = () => { |
const setupSelectRole = () => { |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{roleList.map((val, index) => { |
{roleList.map((val, index) => { |
||||||
return ( |
return ( |
||||||
<Option key={index} value={val.id}>{val.name}</Option> |
<Option key={index} value={val.id}>{val.name}</Option> |
||||||
) |
) |
||||||
})} |
})} |
||||||
</> |
</> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
const setupSelectDivisi = () => { |
const setupSelectDivisi = () => { |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{divisiList.map((val, index) => { |
{divisiList.map((val, index) => { |
||||||
return ( |
return ( |
||||||
<Option key={index} value={val.id}>{val.name}</Option> |
<Option key={index} value={val.id}>{val.name}</Option> |
||||||
) |
) |
||||||
})} |
})} |
||||||
</> |
</> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
const renderForm = () => { |
const renderForm = () => { |
||||||
return ( |
return ( |
||||||
<Form> |
<Form> |
||||||
<Row> |
<Row> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
|
|
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">NIK (KTP / ID Card) *</Label> |
<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.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" /> |
<Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value)} placeholder={`Input NIK (KTP)...`} maxLength="16" /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Resource Name *</Label> |
<Label className="capitalize">Resource Name *</Label> |
||||||
<Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={`Input resource name...`} /> |
<Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={`Input resource name...`} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
</Row> |
</Row> |
||||||
{/* {typeDialog === 'Save' && |
{/* {typeDialog === 'Save' && |
||||||
<Row> |
<Row> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Password</Label> |
<Label className="capitalize">Password</Label> |
||||||
<Input type="password" value={password} onChange={(e)=> setPassword(e.target.value)} placeholder={`Password...`} /> |
<Input type="password" value={password} onChange={(e)=> setPassword(e.target.value)} placeholder={`Password...`} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Retry Password</Label> |
<Label className="capitalize">Retry Password</Label> |
||||||
<Input type="password" value={retryPassword} onChange={(e)=> setRetryPassword(e.target.value)} placeholder={`Retry password...`} /> |
<Input type="password" value={retryPassword} onChange={(e)=> setRetryPassword(e.target.value)} placeholder={`Retry password...`} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
</Row> |
</Row> |
||||||
} */} |
} */} |
||||||
<Row> |
<Row> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Employee Type *</Label> |
<Label className="capitalize">Employee Type *</Label> |
||||||
<Select showSearch value={employeeType} defaultValue={employeeType} onChange={(val) => setEmployeeType(val)} placeholder="Select Employee Type" style={{ width: '100%' }}> |
<Select showSearch value={employeeType} defaultValue={employeeType} onChange={(val) => setEmployeeType(val)} placeholder="Select Employee Type" style={{ width: '100%' }}> |
||||||
<Option value={'employee'}>Employee</Option> |
<Option value={'employee'}>Employee</Option> |
||||||
<Option value={'subcon'}>Subcon</Option> |
<Option value={'subcon'}>Subcon</Option> |
||||||
<Option value={'freelance'}>Freelance</Option> |
<Option value={'freelance'}>Freelance</Option> |
||||||
</Select> |
</Select> |
||||||
</FormGroup> |
</FormGroup> |
||||||
|
|
||||||
</Col> |
</Col> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Phone No.</Label> |
<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" /> |
<Input type="text" value={phoneNo} onChange={(e) => setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input phone number...`} maxLength="15" /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
</Row> |
</Row> |
||||||
<Row> |
<Row> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Email</Label> |
<Label className="capitalize">Email</Label> |
||||||
<Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Input email...`} /> |
<Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Input email...`} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Gender</Label> |
<Label className="capitalize">Gender</Label> |
||||||
<Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder="Select Gender" style={{ width: '100%' }}> |
<Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder="Select Gender" style={{ width: '100%' }}> |
||||||
<Option value="Male">Male</Option> |
<Option value="Male">Male</Option> |
||||||
<Option value="Female">Female</Option> |
<Option value="Female">Female</Option> |
||||||
{/* <Option value="Other">Other</Option> */} |
{/* <Option value="Other">Other</Option> */} |
||||||
</Select> |
</Select> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
</Row> |
</Row> |
||||||
<Row> |
<Row> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Birth Place</Label> |
<Label className="capitalize">Birth Place</Label> |
||||||
<Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={`Input birth place...`} /> |
<Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={`Input birth place...`} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Birth Date</Label> |
<Label className="capitalize">Birth Date</Label> |
||||||
<DatePicker style={{ width: "100%" }} value={birthDate} onChange={(date, dateString) => setBirthDate(date)} /> |
<DatePicker style={{ width: "100%" }} value={birthDate} onChange={(date, dateString) => setBirthDate(date)} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
</Row> |
</Row> |
||||||
<Row> |
<Row> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Role *</Label> |
<Label className="capitalize">Role *</Label> |
||||||
<Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder="Select Role" style={{ width: '100%' }}> |
<Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder="Select Role" style={{ width: '100%' }}> |
||||||
{setupSelectRole()} |
{setupSelectRole()} |
||||||
</Select> |
</Select> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Division *</Label> |
<Label className="capitalize">Division *</Label> |
||||||
{/* <Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}> |
{/* <Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}> |
||||||
<Option value={'active'}>Active</Option> |
<Option value={'active'}>Active</Option> |
||||||
<Option value={'inactive'}>Inactive</Option> |
<Option value={'inactive'}>Inactive</Option> |
||||||
</Select> */} |
</Select> */} |
||||||
<Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder="Select Division" style={{ width: '100%' }}> |
<Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder="Select Division" style={{ width: '100%' }}> |
||||||
{setupSelectDivisi()} |
{setupSelectDivisi()} |
||||||
</Select> |
</Select> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
</Row> |
</Row> |
||||||
|
|
||||||
<Row> |
<Row> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<Label className="capitalize">Status Resource</Label> |
<Label className="capitalize">Status Resource</Label> |
||||||
<Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}> |
<Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}> |
||||||
<Option value={'active'}>Active</Option> |
<Option value={'active'}>Active</Option> |
||||||
<Option value={'inactive'}>Inactive</Option> |
<Option value={'inactive'}>Inactive</Option> |
||||||
</Select> |
</Select> |
||||||
</Col> |
</Col> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Address</Label> |
<Label className="capitalize">Address</Label> |
||||||
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Input address..." /> |
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Input address..." /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
</Row> |
</Row> |
||||||
</Form> |
</Form> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
const renderForm2 = () => { |
const renderForm2 = () => { |
||||||
return ( |
return ( |
||||||
<Form> |
<Form> |
||||||
<Row> |
<Row> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Email</Label> |
<Label className="capitalize">Email</Label> |
||||||
<Input type="text" defaultValue={""} value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Email...`} /> |
<Input type="text" defaultValue={""} value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Email...`} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Username</Label> |
<Label className="capitalize">Username</Label> |
||||||
<Input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={`Username...`} /> |
<Input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={`Username...`} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
</Row> |
</Row> |
||||||
<Row> |
<Row> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Password</Label> |
<Label className="capitalize">Password</Label> |
||||||
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={`Password...`} /> |
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={`Password...`} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
<Col md={6}> |
<Col md={6}> |
||||||
<FormGroup> |
<FormGroup> |
||||||
<Label className="capitalize">Retry Password</Label> |
<Label className="capitalize">Retry Password</Label> |
||||||
<Input type="password" value={retryPassword} onChange={(e) => setRetryPassword(e.target.value)} placeholder={`Retry password...`} /> |
<Input type="password" value={retryPassword} onChange={(e) => setRetryPassword(e.target.value)} placeholder={`Retry password...`} /> |
||||||
</FormGroup> |
</FormGroup> |
||||||
</Col> |
</Col> |
||||||
</Row> |
</Row> |
||||||
|
|
||||||
|
|
||||||
</Form> |
</Form> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Human Resource</ModalHeader> |
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Human Resource</ModalHeader> |
||||||
<ModalBody> |
<ModalBody> |
||||||
{typeDialog !== "Set" ? renderForm() : renderForm2()} |
{typeDialog !== "Set" ? renderForm() : renderForm2()} |
||||||
</ModalBody> |
</ModalBody> |
||||||
<ModalFooter> |
<ModalFooter> |
||||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||||
</ModalFooter> |
</ModalFooter> |
||||||
</Modal> |
</Modal> |
||||||
</> |
</> |
||||||
) |
) |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
export default DialogForm; |
export default DialogForm; |
||||||
|
|||||||
Loading…
Reference in new issue