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