From 2fd03fccb60ae15d0adc7bfa81871e78c838646d Mon Sep 17 00:00:00 2001
From: ardhi <ardhi.irfan.syabani@gmail.com>
Date: Tue, 7 Mar 2023 16:38:11 +0700
Subject: [PATCH] fix multiple image in report k3

---
 src/views/Report/k3/DialogForm.js | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/views/Report/k3/DialogForm.js b/src/views/Report/k3/DialogForm.js
index b6e5d2d..95640d7 100644
--- a/src/views/Report/k3/DialogForm.js
+++ b/src/views/Report/k3/DialogForm.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap';
-import { Image } from 'antd';
+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 {
@@ -43,12 +43,25 @@ export default class DialogForm extends Component {
   }
 
   renderForm = () => {
+    const { dataImage } = this.props;
     return(
-      <div style={{width:"100%",display:'flex',justifyContent:'center',textAlign:'center'}}>
-          <Image
-            width={200}
-            src={`${BASE_SIMPRO_LUMEN_IMAGE}/${this.state.url}`}
-          />
+      <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>
     )
   }
@@ -63,7 +76,7 @@ export default class DialogForm extends Component {
         : null}
         </ModalBody>
         <ModalFooter>
-          <Button color="secondary" onClick={() => this.handleCancel()}>Close</Button>
+          
         </ModalFooter>
       </Modal>
     )