6 changed files with 575 additions and 1 deletions
@ -0,0 +1,180 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
import { Select } from 'antd'; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
import { useTranslation } from 'react-i18next'; |
||||||
|
import "rc-color-picker/assets/index.css"; |
||||||
|
const { Option } = Select |
||||||
|
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => { |
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [name, setName] = useState('') |
||||||
|
const [email, setEmail] = useState('') |
||||||
|
const [message, setMessage] = useState('') |
||||||
|
const [phoneNumber, setPhoneNumber] = useState('') |
||||||
|
const [role, setRole] = useState(null) |
||||||
|
const [status, setStatus] = useState('') |
||||||
|
const { t } = useTranslation() |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (typeDialog === "Edit") { |
||||||
|
setId(dataEdit.id) |
||||||
|
} else { |
||||||
|
setId(0) |
||||||
|
|
||||||
|
} |
||||||
|
}, [dataEdit, openDialog]) |
||||||
|
|
||||||
|
const validation = () => { |
||||||
|
if (!name || name === "") { |
||||||
|
alert("Name cannot be empty!"); |
||||||
|
return true; |
||||||
|
} |
||||||
|
} |
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
const err = validation(); |
||||||
|
|
||||||
|
if (!err) { |
||||||
|
if (typeDialog === "Save") { |
||||||
|
data = { |
||||||
|
name |
||||||
|
} |
||||||
|
closeDialog('save', data); |
||||||
|
} else { |
||||||
|
data = { |
||||||
|
id, |
||||||
|
name, |
||||||
|
} |
||||||
|
closeDialog('edit', data); |
||||||
|
} |
||||||
|
setId(0) |
||||||
|
setName('') |
||||||
|
} |
||||||
|
} |
||||||
|
const handleCancel = () => { |
||||||
|
closeDialog('cancel', 'none') |
||||||
|
setId(0) |
||||||
|
setName('') |
||||||
|
} |
||||||
|
const onChangeStatus = (val) => { |
||||||
|
setStatus(val) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<Row> |
||||||
|
<Col md={12}> |
||||||
|
<span style={{ color: "red" }}>*</span> Wajib diisi. |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('name')}<span style={{ color: "red" }}>*</span></Label> |
||||||
|
<Input |
||||||
|
type="text" |
||||||
|
value={name} |
||||||
|
onChange={(e) => setName(e.target.value)} |
||||||
|
placeholder={t('inputName')} |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('email')}<span style={{ color: "red" }}>*</span></Label> |
||||||
|
<Input |
||||||
|
type="text" |
||||||
|
value={email} |
||||||
|
onChange={(e) => setEmail(e.target.value)} |
||||||
|
placeholder={t('inputEmail')} |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('phoneNumber')}<span style={{ color: "red" }}>*</span></Label> |
||||||
|
<Input |
||||||
|
type="text" |
||||||
|
value={phoneNumber} |
||||||
|
onChange={(e) => setName(e.target.value)} |
||||||
|
placeholder={t('inputNoPhone')} |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('role')}<span style={{ color: "red" }}>*</span></Label> |
||||||
|
<Input |
||||||
|
type="text" |
||||||
|
value={role} |
||||||
|
onChange={(e) => setRole(e.target.value)} |
||||||
|
placeholder={t('inputRole')} |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize"> |
||||||
|
{t('status')}<span style={{ color: "red" }}>*</span> |
||||||
|
</Label> |
||||||
|
<Select |
||||||
|
showSearch |
||||||
|
filterOption={(inputValue, option) => |
||||||
|
option.children.toLowerCase().includes(inputValue.toLowerCase()) |
||||||
|
} |
||||||
|
value={status} |
||||||
|
defaultValue={status} |
||||||
|
onChange={onChangeStatus} |
||||||
|
style={{ width: "100%" }} |
||||||
|
> |
||||||
|
<Option value="New Request">New Request</Option> |
||||||
|
<Option value="Presentation">Presentation</Option> |
||||||
|
<Option value="Live Demo">Live Demo</Option> |
||||||
|
<Option value="Trial">Trial</Option> |
||||||
|
<Option value="Go-Live">Go-Live</Option> |
||||||
|
<Option value="Postpone">Postpone</Option> |
||||||
|
|
||||||
|
</Select> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">{t('message')}</Label> |
||||||
|
<Input row="4" type="textarea" value={message} onChange={(e) => setMessage(e.target.value)} placeholder={t('inputMessage')} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} {t('Demo')}</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
{renderForm()} |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogForm; |
||||||
@ -0,0 +1,367 @@ |
|||||||
|
import * as XLSX from 'xlsx'; |
||||||
|
import DialogForm from './DialogForm'; |
||||||
|
import React, { useState, useEffect } from 'react'; |
||||||
|
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
|
import axios from "../../../const/interceptorApi" |
||||||
|
import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap'; |
||||||
|
import { DEMO_MANAGEMENT_EDIT, DEMO_MANAGEMENT_SEARCH, DEMO_MANAGEMENT_LIST, DEMO_MANAGEMENT_GET_ID, DEMO_MANAGEMENT_ADD, DEMO_MANAGEMENT_DELETE } from '../../../const/ApiConst'; |
||||||
|
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||||
|
import { Pagination, Button, Tooltip } from 'antd'; |
||||||
|
import { useTranslation } from 'react-i18next'; |
||||||
|
|
||||||
|
|
||||||
|
const ProjectType = ({ params, ...props }) => { |
||||||
|
let role_id = 0, user_id = 0, isLogin = false, token = '', company_id = 0, all_project = null, role_name = '', hierarchy = [], user_name = ''; |
||||||
|
if (props && props.role_id && props.user_id) { |
||||||
|
role_id = props.role_id; |
||||||
|
user_id = props.user_id; |
||||||
|
token = props.token; |
||||||
|
isLogin = props.isLogin; |
||||||
|
company_id = props.company_id; |
||||||
|
all_project = props.all_project; |
||||||
|
role_name = props.role_name; |
||||||
|
isLogin = props.isLogin; |
||||||
|
hierarchy = props.hierarchy; |
||||||
|
user_name = props.user_name; |
||||||
|
} |
||||||
|
|
||||||
|
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 [openDialog, setOpenDialog] = useState(false) |
||||||
|
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||||
|
const [search, setSearch] = useState("") |
||||||
|
const [totalPage, setTotalPage] = useState(0) |
||||||
|
const [typeDialog, setTypeDialog] = useState('Save') |
||||||
|
const [dataDemo, setDataDemo] = useState([]) |
||||||
|
const [listCompany, setListCompany] = useState([]) |
||||||
|
const { t } = useTranslation() |
||||||
|
const column = [ |
||||||
|
{ name: t('name') }, |
||||||
|
{ name: t('email') }, |
||||||
|
{ name: t('roles') }, |
||||||
|
{ name: t('phoneNumber') }, |
||||||
|
{ name: t('status') }, |
||||||
|
{ name: t('message') }, |
||||||
|
].filter(column => column && column.name); |
||||||
|
useEffect(() => { |
||||||
|
getDataDemo(); |
||||||
|
}, [currentPage, rowsPerPage, search]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const cekData = dataExport || [] |
||||||
|
if (cekData.length > 0) { |
||||||
|
exportExcel() |
||||||
|
} |
||||||
|
}, [dataExport]) |
||||||
|
|
||||||
|
const getDataDemo = async () => { |
||||||
|
let start = 0; |
||||||
|
if (currentPage !== 1 && currentPage > 1) { |
||||||
|
start = currentPage * rowsPerPage - rowsPerPage; |
||||||
|
} |
||||||
|
const payload = { |
||||||
|
group_column: { |
||||||
|
"operator": "AND", |
||||||
|
"group_operator": "OR", |
||||||
|
"where": [ |
||||||
|
{ |
||||||
|
"name": "name", |
||||||
|
"logic_operator": "~*", |
||||||
|
"value": search, |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
columns: [], |
||||||
|
"orders": { |
||||||
|
"ascending": true, |
||||||
|
"columns": [ |
||||||
|
'id' |
||||||
|
] |
||||||
|
}, |
||||||
|
"paging": { |
||||||
|
"length": rowsPerPage, |
||||||
|
"start": start |
||||||
|
}, |
||||||
|
'joins': [] |
||||||
|
} |
||||||
|
|
||||||
|
const result = await axios |
||||||
|
.post(DEMO_MANAGEMENT_SEARCH, payload, 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 handleExportExcel = async () => { |
||||||
|
let start = 0; |
||||||
|
|
||||||
|
if (currentPage !== 1 && currentPage > 1) { |
||||||
|
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
|
} |
||||||
|
|
||||||
|
const payload = { |
||||||
|
group_column: { |
||||||
|
"operator": "AND", |
||||||
|
"group_operator": "OR", |
||||||
|
"where": [ |
||||||
|
{ |
||||||
|
"name": "name", |
||||||
|
"logic_operator": "~*", |
||||||
|
"value": search, |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
"columns": [], |
||||||
|
"orders": { |
||||||
|
"ascending": true, |
||||||
|
"columns": [ |
||||||
|
'id' |
||||||
|
] |
||||||
|
}, |
||||||
|
"paging": { |
||||||
|
"length": rowsPerPage, |
||||||
|
"start": start |
||||||
|
}, |
||||||
|
'joins': [] |
||||||
|
} |
||||||
|
|
||||||
|
const result = await axios |
||||||
|
.post(DEMO_MANAGEMENT_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 = {}; |
||||||
|
dataRow["Nama"] = val.name; |
||||||
|
dataRow["Email"] = val.email; |
||||||
|
dataRow["Role"] = val.role; |
||||||
|
dataRow["No Telepon"] = val.number_phone; |
||||||
|
dataRow["Status"] = val.message; |
||||||
|
dataRow["Message"] = val.message; |
||||||
|
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 handleSearch = e => { |
||||||
|
const value = e.target.value |
||||||
|
setSearch(value); |
||||||
|
setCurrentPage(1) |
||||||
|
}; |
||||||
|
|
||||||
|
const handleOpenDialog = (type) => { |
||||||
|
setOpenDialog(true) |
||||||
|
setTypeDialog(type) |
||||||
|
} |
||||||
|
|
||||||
|
const handleEdit = (data) => { |
||||||
|
setDataEdit(data) |
||||||
|
handleOpenDialog('Edit'); |
||||||
|
} |
||||||
|
|
||||||
|
const handleDelete = async (id) => { |
||||||
|
await setAlertDelete(true) |
||||||
|
await setIdDelete(id) |
||||||
|
} |
||||||
|
|
||||||
|
const handleCloseDialog = (type, data) => { |
||||||
|
if (type === "save") { |
||||||
|
saveDemo(data); |
||||||
|
} else if (type === "edit") { |
||||||
|
editMaterialR(data); |
||||||
|
} |
||||||
|
setDataEdit([]) |
||||||
|
setOpenDialog(false) |
||||||
|
} |
||||||
|
|
||||||
|
const saveDemo = async (data) => { |
||||||
|
const formData = data |
||||||
|
const result = await axios.post(DEMO_MANAGEMENT_ADD, formData, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataDemo() |
||||||
|
NotificationManager.success(`Data berhasil ditambahkan`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`Data gagal ditambahkan`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const editMaterialR = async (data) => { |
||||||
|
let urlEdit = DEMO_MANAGEMENT_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) { |
||||||
|
getDataDemo(); |
||||||
|
NotificationManager.success(`Data berhasil diubah`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`Data gagal diubah`, `Failed!!`); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const toggleAddDialog = () => { |
||||||
|
setOpenDialog(!openDialog) |
||||||
|
} |
||||||
|
|
||||||
|
const onConfirmDelete = async () => { |
||||||
|
let url = DEMO_MANAGEMENT_DELETE(idDelete); |
||||||
|
const result = await axios.delete(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataDemo() |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.success(`Data berhasil dihapus!`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.error(`Data 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="7">{t('noData')}</td> |
||||||
|
</tr> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<NotificationContainer /> |
||||||
|
<SweetAlert |
||||||
|
show={alertDelete} |
||||||
|
warning |
||||||
|
showCancel |
||||||
|
confirmBtnText="Delete" |
||||||
|
confirmBtnBsStyle="danger" |
||||||
|
title={t('deleteConfirm')} |
||||||
|
onConfirm={onConfirmDelete} |
||||||
|
onCancel={cancelDelete} |
||||||
|
focusCancelBtn |
||||||
|
> |
||||||
|
{t('deleteMsg')} |
||||||
|
</SweetAlert> |
||||||
|
<DialogForm |
||||||
|
openDialog={openDialog} |
||||||
|
closeDialog={handleCloseDialog} |
||||||
|
toggleDialog={() => toggleAddDialog} |
||||||
|
typeDialog={typeDialog} |
||||||
|
dataEdit={dataEdit} |
||||||
|
clickOpenModal={clickOpenModal} |
||||||
|
dataParent={allDataMenu} |
||||||
|
/> |
||||||
|
<Card> |
||||||
|
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||||
|
<h4 className="capitalize">{pageName}</h4> |
||||||
|
<Row> |
||||||
|
<Col> |
||||||
|
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchDemo')} /> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<Tooltip title={t('demoAdd')}> |
||||||
|
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
||||||
|
</Tooltip> |
||||||
|
<Tooltip title={t('exportExcel')}> |
||||||
|
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||||
|
</Tooltip> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</CardHeader> |
||||||
|
<CardBody> |
||||||
|
<Table responsive striped hover> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>Aksi</th> |
||||||
|
{column.map((i, index) => { |
||||||
|
return ( |
||||||
|
<th key={index} scope="row">{i.name}</th> |
||||||
|
) |
||||||
|
})} |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{dataNotAvailable()} |
||||||
|
{dataTable.map((n, index) => { |
||||||
|
return ( |
||||||
|
<tr key={n.id}> |
||||||
|
<td className='nowrap'> |
||||||
|
<Tooltip title={t('delete')}> |
||||||
|
<i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(n.id)}></i> |
||||||
|
</Tooltip> |
||||||
|
<Tooltip title={t('edit')}> |
||||||
|
<i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(n)}></i> |
||||||
|
</Tooltip> |
||||||
|
</td> |
||||||
|
<td>{n.name}</td> |
||||||
|
<td>{n.email}</td> |
||||||
|
<td>{n.role}</td> |
||||||
|
<td>{n.number_phone}</td> |
||||||
|
<td>{n.status}</td> |
||||||
|
<td>{n.message}</td> |
||||||
|
</tr> |
||||||
|
) |
||||||
|
})} |
||||||
|
</tbody> |
||||||
|
</Table> |
||||||
|
</CardBody> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default ProjectType; |
||||||
Loading…
Reference in new issue