8 changed files with 179 additions and 163 deletions
@ -1,84 +1,86 @@
|
||||
import React, { Component } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
||||
import { Image, Col, Row } from 'antd'; |
||||
import 'antd/dist/antd.css'; |
||||
import { BASE_SIMPRO_LUMEN_IMAGE } from '../../../const/ApiConst.js'; |
||||
export default class DialogForm extends Component { |
||||
constructor(props) { |
||||
super(props) |
||||
this.state = { |
||||
id: 0, |
||||
url:"", |
||||
ready:false, |
||||
isParentClick: false, |
||||
} |
||||
} |
||||
|
||||
async componentDidMount(){ |
||||
this.props.showDialog(this.showDialog); |
||||
} |
||||
|
||||
async componentDidUpdate (){ |
||||
if(this.state.isParentClick===true){ |
||||
this.setState({ready:false}) |
||||
const { dataImage } = this.props |
||||
this.setState({
|
||||
url:dataImage, |
||||
},() => { |
||||
this.setState({ready:true}); |
||||
}); |
||||
this.setState({isParentClick:false}); |
||||
} |
||||
} |
||||
|
||||
|
||||
showDialog = () => { |
||||
this.setState({ isParentClick : true }); |
||||
} |
||||
|
||||
handleCancel = () => { |
||||
this.setState({ready:false}) |
||||
this.props.closeDialog('cancel', 'none') |
||||
} |
||||
|
||||
renderForm = () => { |
||||
const { dataImage } = this.props; |
||||
return( |
||||
<div style={{justifyContent:'center'}}> |
||||
<Row gutter={[16, 16]}> |
||||
<Image.PreviewGroup> |
||||
{ |
||||
dataImage && dataImage.length > 0 && dataImage.map((item, idx) =>
|
||||
<Col span={8}> |
||||
<Image |
||||
style={{width: 150, height: 200}} |
||||
src={`${BASE_SIMPRO_LUMEN_IMAGE}/${item.image}`} |
||||
/> |
||||
</Col> |
||||
) |
||||
} |
||||
</Image.PreviewGroup> |
||||
|
||||
{ !dataImage || (dataImage && dataImage.length < 1) && <div style={{textAlign: 'center', color: 'red', flex: 1, padding: 20}}>No image available</div> } |
||||
</Row> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> |
||||
<ModalHeader toggle={this.props.closeDialog}>Lihat Foto Laporan K3</ModalHeader> |
||||
<ModalBody> |
||||
{this.state.ready ?
|
||||
this.renderForm() |
||||
: null} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
|
||||
</ModalFooter> |
||||
</Modal> |
||||
) |
||||
} |
||||
} |
||||
import React, { Component } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
||||
import { Image, Col, Row } from 'antd'; |
||||
import 'antd/dist/antd.css'; |
||||
import { BASE_SIMPRO_LUMEN_IMAGE_COMPANY } from '../../../const/ApiConst.js'; |
||||
import moment from 'moment'; |
||||
|
||||
export default class DialogForm extends Component { |
||||
constructor(props) { |
||||
super(props) |
||||
this.state = { |
||||
id: 0, |
||||
url:"", |
||||
ready:false, |
||||
isParentClick: false, |
||||
} |
||||
} |
||||
|
||||
async componentDidMount(){ |
||||
this.props.showDialog(this.showDialog); |
||||
} |
||||
|
||||
async componentDidUpdate (){ |
||||
if(this.state.isParentClick===true){ |
||||
this.setState({ready:false}) |
||||
const { dataImage } = this.props |
||||
this.setState({ |
||||
url:dataImage, |
||||
},() => { |
||||
this.setState({ready:true}); |
||||
}); |
||||
this.setState({isParentClick:false}); |
||||
} |
||||
} |
||||
|
||||
|
||||
showDialog = () => { |
||||
this.setState({ isParentClick : true }); |
||||
} |
||||
|
||||
handleCancel = () => { |
||||
this.setState({ready:false}) |
||||
this.props.closeDialog('cancel', 'none') |
||||
} |
||||
|
||||
renderForm = () => { |
||||
const { dataImage, companyName } = this.props; |
||||
return( |
||||
<div style={{justifyContent:'center'}}> |
||||
<Row gutter={[16, 16]}> |
||||
<Image.PreviewGroup> |
||||
{ |
||||
dataImage && dataImage.length > 0 && dataImage.map((item, idx) => |
||||
<Col span={8}> |
||||
<Image |
||||
style={{width: 150, height: 200}} |
||||
src={`${BASE_SIMPRO_LUMEN_IMAGE_COMPANY(item?.image, companyName, moment(item?.created_at).format('YYYY-MM'))}`} |
||||
/> |
||||
</Col> |
||||
) |
||||
} |
||||
</Image.PreviewGroup> |
||||
|
||||
{ !dataImage || (dataImage && dataImage.length < 1) && <div style={{textAlign: 'center', color: 'red', flex: 1, padding: 20}}>No image available</div> } |
||||
</Row> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> |
||||
<ModalHeader toggle={this.props.closeDialog}>Lihat Foto Laporan K3</ModalHeader> |
||||
<ModalBody> |
||||
{this.state.ready ? |
||||
this.renderForm() |
||||
: null} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
|
||||
</ModalFooter> |
||||
</Modal> |
||||
) |
||||
} |
||||
} |
||||
|
||||
@ -1,59 +1,64 @@
|
||||
import React, { useEffect, useState } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
import { Button } from 'reactstrap'; |
||||
import { Image } from 'antd' |
||||
import { BASE_SIMPRO_LUMEN_IMAGE } from '../../../const/ApiConst'; |
||||
import 'antd/dist/antd.css'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
|
||||
|
||||
const DialogFoto = ({ openDialog, closeDialog, toggleDialog, dataImage }) => { |
||||
|
||||
const [urlImage, setUrlImage] = useState("") |
||||
const [dataReady, setDataReady] = useState(false) |
||||
const [hrName, setHrName] = useState(false) |
||||
const { t } = useTranslation() |
||||
useEffect(() => { |
||||
if (dataImage && dataImage != null) { |
||||
setUrlImage(dataImage.url); |
||||
setHrName(dataImage.name); |
||||
setDataReady(true) |
||||
} |
||||
}, [dataImage]) |
||||
|
||||
useEffect(() => { |
||||
if (!openDialog) { |
||||
setUrlImage("") |
||||
setHrName("") |
||||
setDataReady(false) |
||||
} |
||||
}, [openDialog]) |
||||
|
||||
const renderModalBody = () => { |
||||
return ( |
||||
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'flex-start' }}> |
||||
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> |
||||
<Image |
||||
width={200} |
||||
src={`${BASE_SIMPRO_LUMEN_IMAGE}/${urlImage}`} |
||||
/> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<Modal isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>{t('imageCheck')} | {t('nameHR')} {hrName}</ModalHeader> |
||||
<ModalBody> |
||||
{dataReady ? renderModalBody() : null} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button className="capitalize" color="secondary" onClick={closeDialog}>{t('close')}</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default DialogFoto; |
||||
import React, { useEffect, useState } from 'react' |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
import { Button } from 'reactstrap'; |
||||
import { Image } from 'antd' |
||||
import { BASE_SIMPRO_LUMEN_IMAGE_COMPANY } from '../../../const/ApiConst'; |
||||
import 'antd/dist/antd.css'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
import moment from 'moment'; |
||||
|
||||
const DialogFoto = ({ openDialog, closeDialog, toggleDialog, dataImage, configApp, role_name }) => { |
||||
|
||||
const [urlImage, setUrlImage] = useState("") |
||||
const [dateImage, setDateImage] = useState("") |
||||
const [companyName, setCompanyName] = useState("") |
||||
const [dataReady, setDataReady] = useState(false) |
||||
const [hrName, setHrName] = useState(false) |
||||
const { t } = useTranslation() |
||||
|
||||
useEffect(() => { |
||||
if (dataImage && dataImage != null) { |
||||
setCompanyName(role_name !== "Super Admin" ? JSON.parse(configApp).company_name : "undifined"); |
||||
setUrlImage(dataImage.url); |
||||
setDateImage(dataImage.date); |
||||
setHrName(dataImage.name); |
||||
setDataReady(true) |
||||
} |
||||
}, [dataImage]) |
||||
|
||||
useEffect(() => { |
||||
if (!openDialog) { |
||||
setUrlImage("") |
||||
setHrName("") |
||||
setDataReady(false) |
||||
} |
||||
}, [openDialog]) |
||||
|
||||
const renderModalBody = () => { |
||||
return ( |
||||
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'flex-start' }}> |
||||
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> |
||||
<Image |
||||
width={200} |
||||
src={`${BASE_SIMPRO_LUMEN_IMAGE_COMPANY(urlImage, companyName, moment(dateImage).format('YYYY-MM'))}`} |
||||
/> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<Modal isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>{t('imageCheck')} | {t('nameHR')} {hrName}</ModalHeader> |
||||
<ModalBody> |
||||
{dataReady ? renderModalBody() : null} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button className="capitalize" color="secondary" onClick={closeDialog}>{t('close')}</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default DialogFoto; |
||||
|
||||
Loading…
Reference in new issue