Merge pull request 'image company' (#47) from dev-wahyun into staging

Reviewed-on: ibnu/generic-ospro-frontend#47

src/const/ApiConst.js

@@ -771,7 +771,10 @@ export const HIERARCHY_FTTH_COUNT_TREE = (id) => {
 export const WAYPOINT_SEARCH = `${BASE_SIMPRO_LUMEN}/waypoint/search`;
 
 export const IMAGE_UPLOAD = `${BASE_SIMPRO_LUMEN}/image/upload`;
-
+export const IMAGE_MULTIPLE_UPLOAD = `${BASE_SIMPRO_LUMEN}/image/multiple-upload`;
+export const IMAGE_MULTIPLE_DELETE = (id, category) => {
+  return `${BASE_SIMPRO_LUMEN}/image/multiple-delete/${id}/${category}`;
+}
 export const IMAGE_DELETE = (id, category) => {
   return `${BASE_SIMPRO_LUMEN}/image/delete/${id}/${category}`;
 }

src/views/Master/MasterCompany/DialogForm.js

@@ -12,7 +12,7 @@ import 'antd/dist/antd.css';
 import { useTranslation } from 'react-i18next';
 import axios from "../../../const/interceptorApi"
 import {
-    USER_SEARCH, MENU_COMPANY_DELETE, USER_DELETE, ROLE_SEARCH, COMPANY_MANAGEMENT_GET_ID, MENU_COMPANY_SEARCH
+    USER_SEARCH, MENU_COMPANY_DELETE, USER_DELETE, ROLE_SEARCH, COMPANY_MANAGEMENT_GET_ID, MENU_COMPANY_SEARCH, BASE_SIMPRO_LUMEN_IMAGE
 } from '../../../const/ApiConst';
 const token = window.localStorage.getItem('token');
 const config = {
@@ -22,7 +22,7 @@ const config = {
         "Content-type": `application/json`
     }
 };
-const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, companyID, companyNameProp, dataEditCompany, imageHeader, imageFavIcon, imageLogin, lastIdCompany }) => {
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, companyID, companyNameProp, dataEditCompany, imageHeader, imageFavIcon, imageLogin, imageSlider, lastIdCompany }) => {
     const { Option } = Select
     const { t } = useTranslation()
     const [registrationnumber, setRegistrationNumber] = useState('')
@@ -33,6 +33,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
     const [description, setDescription] = useState('')
     const [logoLogin, setLogoLogin] = useState(null)
     const [logoHeader, setLogoHeader] = useState(null)
+    const [sliderLogin, setSliderLogin] = useState(null)
     const [favIcon, setFavIcon] = useState(null)
     const [loginInstruction, setLoginInstruction] = useState('')
     const [about, setAbout] = useState('')
@@ -65,6 +66,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
     const [openDialogMenu, setOpenDialogMenu] = useState(false)
     const [typeDialogMenu, setTypeDialogMenu] = useState("add")
     const [loading, setLoading] = useState(true);
+    const [modalOpen, setModalOpen] = useState(false);
+    const [typeImage, setTypeImage] = useState('');
     useEffect(() => {
         if (companyID && typeDialog === 'Set') {
           setLoading(true)
@@ -98,6 +101,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
         } else {
           setAvailableBaseUrl(false)
         }
+        setSliderLogin(null)
       } else {
         setId(0)
         setCompanyName('')
@@ -111,6 +115,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
         setTemplate('')
         setLogoLogin(null)
         setLogoHeader(null)
+        setSliderLogin(null)
         setFavIcon(null)
         setBaseUrl([])
       }
@@ -391,6 +396,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
             data.imageLogin = logoLogin ? logoLogin : null;
             data.imageHeader = logoHeader ? logoHeader : null;
             data.imageFavicon = favIcon ? favIcon : null;
+            data.imageSlider = sliderLogin ? sliderLogin : null;
             closeDialog('save', data);
             setLoading(false);
         } else if (typeDialog === "Edit") {
@@ -413,6 +419,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
           data.imageLogin = logoLogin ? logoLogin : null;
           data.imageHeader = logoHeader ? logoHeader : null;
           data.imageFavicon = favIcon ? favIcon : null;
+          data.imageSlider = sliderLogin ? sliderLogin : null;
           closeDialog('edit', data);
           setLoading(false);
         }
@@ -427,6 +434,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
         closeDialog('cancel', 'none')
         setDatatable([]);
         setBaseUrl([]);
+        setSliderLogin(null);
         setAvailableBaseUrl(false);
         setLoading(false);
     }
@@ -568,9 +576,27 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
         }
     };
 
+    const truncateText = (text, maxLength) => {
+      if (text.length > maxLength) {
+        return text.substring(0, maxLength) + '...';
+      }
+      return text;
+    };
+
+    const toggleModal = () => {
+      setModalOpen(!modalOpen);
+    };
+
+    const handleImageClick = async (type) => {
+      setTypeImage(type);
+      if (type != '') {
+        toggleModal();
+      }
+    };
 
     const renderFromCompany = () => {
         return (
+          <>
             <Form>
                 <Row>
                     <Col md={12}>
@@ -654,7 +680,6 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
                             <Label className="capitalize">Template Application<span style={{ color: "red" }}>*</span></Label>
                             <Select style={{ width: "100%" }} defaultValue={template} onChange={(e) => setTemplate(e)} placeholder="Select a template for application">
                                 <Option value={1}>Construction</Option>
-                                {/* <Option value={2}>IT (Information AND Technology)</Option> */}
                             </Select>
                         </FormGroup>
                     </Col>
@@ -687,15 +712,45 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
                     </Col>
                     <Col md={6}>
                         <Row>
-                            <FormGroup>
-                                <Label className="capitalize" style={{ fontWeight: "bold" }}>Logo Login</Label>
-                                <Input
-                                  type="file"
-                                  accept="image/*"
-                                  onChange={(e) => setLogoLogin(e.target.files[0])}
-                                />
-                                <small>{imageLogin ? imageLogin.image : <p style={{ color: "red" }}>Not found image</p> }</small>
-                            </FormGroup>
+                          <FormGroup>
+                            <Label className="capitalize" style={{ fontWeight: "bold" }}>Logo Login</Label>
+                            <Input
+                              type="file"
+                              accept="image/*"
+                              onChange={(e) => setLogoLogin(e.target.files[0])}
+                            />
+                            <small onClick={imageLogin ? () => handleImageClick('imageLogin') : ''} style={{ cursor: imageLogin ? "pointer" : ""}}>
+                              <p style={{ textDecoration: imageLogin ? 'underline' : 'none', color: imageLogin ? 'blue' : 'red' }}>
+                                {
+                                  imageLogin ? (
+                                    "View Image"
+                                  ) : (
+                                    "Not found image"
+                                  )
+                                }
+                              </p>
+                            </small>
+                          </FormGroup>
+                          <FormGroup>
+                            <Label className="capitalize" style={{ fontWeight: "bold" }}>Slider Login </Label><small> (Multiple Input)</small>
+                            <Input
+                              type="file"
+                              accept="image/*"
+                              multiple
+                              onChange={(e) => setSliderLogin(e.target.files)}
+                            />
+                            <small onClick={imageSlider.length ? () => handleImageClick('imageSlider') : ''} style={{ cursor: imageSlider.length ? "pointer" : ""}}>
+                              <p style={{ textDecoration: imageSlider.length ? 'underline' : 'none', color: imageSlider.length ? 'blue' : 'red' }}>
+                                {
+                                  imageSlider.length > 0 ? (
+                                    "View image"
+                                  ) : (
+                                    "Not found image"
+                                  )
+                                }
+                              </p>
+                            </small>
+                          </FormGroup>
                         </Row>
                         <Row>
                             <FormGroup>
@@ -705,10 +760,18 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
                                   accept="image/*"
                                   onChange={(e) => setLogoHeader(e.target.files[0])}
                                 />
-                                <small>{imageHeader ? imageHeader.image : <p style={{ color: "red" }}>Not found image</p> }</small>
+                                <small onClick={imageHeader ? () => handleImageClick('imageHeader') : ''} style={{ cursor: imageHeader ? "pointer" : ""}}>
+                                  <p style={{ textDecoration: imageHeader ? 'underline' : 'none', color: imageHeader ? 'blue' : 'red' }}>
+                                    {
+                                      imageHeader ? (
+                                        "View image"
+                                      ) : (
+                                        "Not found image"
+                                      )
+                                    }
+                                  </p>
+                                </small>
                             </FormGroup>
-                        </Row>
-                        <Row>
                             <FormGroup>
                                 <Label className="capitalize" style={{ fontWeight: "bold" }}>Favicon Logo</Label>
                                 <Input
@@ -716,12 +779,54 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
                                   accept=".ico"
                                   onChange={(e) => setFavIcon(e.target.files[0])}
                                 />
-                                <small>{imageFavIcon ? imageFavIcon.image : <p style={{ color: "red" }}>Not found image</p> }</small>
+                                <small onClick={imageFavIcon ? () => handleImageClick('favIcon') : ''} style={{ cursor: imageFavIcon ? "pointer" : "" }}>
+                                <p style={{ textDecoration: imageFavIcon ? 'underline' : 'none', color: imageFavIcon ? 'blue' : 'red' }}>
+                                  {
+                                    imageFavIcon ? (
+                                      "View image"
+                                    ) : (
+                                      "Not found image"
+                                    )
+                                  }
+                                </p>
+                                </small>
                             </FormGroup>
                         </Row>
                     </Col>
                 </Row>
             </Form>
+            <Modal isOpen={modalOpen} toggle={toggleModal}>
+              <ModalBody>
+                  {
+                    typeImage !== 'imageSlider' ? (
+                      imageLogin || imageHeader || imageFavIcon ? (
+                        <img
+                          src={
+                            `${BASE_SIMPRO_LUMEN_IMAGE}/` +
+                            (typeImage === 'imageHeader' && imageHeader ? imageHeader.image :
+                            typeImage === 'imageLogin' && imageLogin ? imageLogin.image :
+                            typeImage === 'favIcon' && imageFavIcon ? imageFavIcon.image : '')
+                          }
+                          style={{ maxWidth: "100%" }}
+                          alt="Image Preview"
+                        />
+                      ):('-')
+                    ):(
+                      <Row style={{ display:'flex', justifyContent:'center' }}>
+                        {imageSlider && imageSlider.map((item, index)=> (
+                          <Col md={6} style={{ marginBottom:'20px' }}>
+                            <img key={index} src={`${BASE_SIMPRO_LUMEN_IMAGE}/` + item.image} style={{ width:'150px', display:'block' }}></img>
+                          </Col>
+                        ))}
+                      </Row>
+                    )
+                  }
+              </ModalBody>
+              <ModalFooter>
+                <Button color="secondary" onClick={toggleModal}>Close</Button>
+              </ModalFooter>
+            </Modal>
+          </>
         )
     }
 

src/views/Master/MasterCompany/index.js

@@ -6,7 +6,7 @@ import DialogForm from './DialogForm'
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import { Pagination, Table, Button, Tooltip, Spin } from 'antd';
 import {
-    COMPANY_MANAGEMENT_SEARCH, COMPANY_MANAGEMENT_ADD, COMPANY_MANAGEMENT_EDIT, COMPANY_MANAGEMENT_DELETE, IMAGE_UPLOAD, IMAGE_GET_BY_ID, IMAGE_DELETE
+    COMPANY_MANAGEMENT_SEARCH, COMPANY_MANAGEMENT_ADD, COMPANY_MANAGEMENT_EDIT, COMPANY_MANAGEMENT_DELETE, IMAGE_UPLOAD, IMAGE_MULTIPLE_UPLOAD, IMAGE_MULTIPLE_DELETE, IMAGE_GET_BY_ID, IMAGE_DELETE, IMAGE_SEARCH
 } from '../../../const/ApiConst';
 import { useTranslation } from 'react-i18next';
 const token = window.localStorage.getItem('token');
@@ -47,6 +47,7 @@ const MasterCompany = ({ params }) => {
     const [companyName, setCompanyName] = useState('')
     const [imageHeader, setProjectImageHeader] = useState(null);
     const [imageLogin, setProjectImageLogin] = useState(null);
+    const [imageSlider, setProjectImageSlider] = useState([]);
     const [imageFavIcon, setProjectImageFavicon] = useState(null);
     const [lastIdCompany,setLastCompanyId] = useState('');
     const [loading, setLoading] = useState(true);
@@ -163,6 +164,24 @@ const MasterCompany = ({ params }) => {
       }
     }
 
+    const getProjectImageSlider = async (id) => {
+      const payload = {
+        "columns": [
+          { "name": "category", "logic_operator": "=", "value": "company_slider_login", "operator": "and" },
+          { "name": "ref_id", "logic_operator": "=", "value": parseInt(id), "operator": "and" }
+        ]
+      }
+      const result = await axios
+          .post(IMAGE_SEARCH, payload, config)
+          .then(res => res)
+          .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+        const sourceData = result.data.data;
+        setProjectImageSlider(sourceData);
+      }
+  }
+
     const handleSearch = e => {
         const value = e.target.value
         setSearch(value);
@@ -178,6 +197,7 @@ const MasterCompany = ({ params }) => {
     const handleEdit = async (data) => {
         setDataEdit(data);
         await getProjectImageHeader(data.id);
+        await getProjectImageSlider(data.id);
         await getProjectImageLogin(data.id);
         await getProjectImageFavicon(data.id);
         handleOpenDialog('Edit');
@@ -213,9 +233,24 @@ const MasterCompany = ({ params }) => {
         setProjectImageHeader(null)
         setProjectImageLogin(null)
         setProjectImageFavicon(null)
+        setProjectImageSlider([])
         setOpenDialog(false)
     }
 
+    const packFiles = (id, files) => {
+      const data = new FormData();
+
+      for (let i = 0; i < files.length; i++) {
+        data.append('files[]', files[i]);
+      }
+
+      data.append('ref_id', id);
+      data.append('category', 'company_slider_login');
+
+      return data;
+    };
+
+
     const saveCompany = async (data) => {
         const formData = data
         const result = await axios.post(COMPANY_MANAGEMENT_ADD, formData, HEADER)
@@ -226,6 +261,7 @@ const MasterCompany = ({ params }) => {
           const logoHeader = data.imageHeader;
           const logoLogin = data.imageLogin;
           const favIcon = data.imageFavicon;
+          const slider = data.imageSlider;
           if (logoHeader) {
             await saveImageHeader(
               result.data.data.id,
@@ -244,6 +280,10 @@ const MasterCompany = ({ params }) => {
               favIcon
             );
           }
+          if(slider) {
+            const dataPack = packFiles(result.data.data.id,slider)
+            await saveSliderLogin(dataPack)
+          }
           getDataCompany();
           setLoading(false)
           NotificationManager.success(`Data company berhasil ditambah`, 'Success!!');
@@ -259,6 +299,7 @@ const MasterCompany = ({ params }) => {
       const logoHeader = data.imageHeader;
       const logoLogin = data.imageLogin;
       const favIcon = data.imageFavicon;
+      const slider = data.imageSlider;
       const formData = data
 
       const result = await axios.put(urlEdit, formData, HEADER)
@@ -291,6 +332,13 @@ const MasterCompany = ({ params }) => {
               favIcon
             );
           }
+          if(slider) {
+            await deleteImageSlider(
+              data.id
+            );
+            const dataPack = packFiles(data.id,slider)
+            await saveSliderLogin(dataPack)
+          }
       if (result && result.data && result.data.code === 200) {
           getDataCompany();
           setLoading(false)
@@ -339,6 +387,15 @@ const MasterCompany = ({ params }) => {
         .catch((error) => error.response);
         return "berhasil";
     };
+
+    const saveSliderLogin = async (data) => {
+      await axios
+        .post(IMAGE_MULTIPLE_UPLOAD, data, HEADER_MULTIPART)
+        .then(res => res)
+        .catch((error) => error.response);
+        return "berhasil";
+    };
+
     // Delete Image Function
     const deleteImageHeader = async (id) => {
       const URL = IMAGE_DELETE(id, 'company_logo_header');
@@ -367,6 +424,15 @@ const MasterCompany = ({ params }) => {
       return "berhasil";
     };
 
+    const deleteImageSlider = async (id) => {
+      const URL = IMAGE_MULTIPLE_DELETE(id, 'company_slider_login');
+      await axios
+        .delete(URL, HEADER)
+        .then(res => res)
+        .catch((error) => error.response);
+      return "berhasil";
+    };
+
     const toggleAddDialog = () => {
         setOpenDialog(!openDialog)
     }
@@ -383,6 +449,7 @@ const MasterCompany = ({ params }) => {
             deleteImageHeader(idDelete)
             deleteImageLogin(idDelete)
             deleteImageFavicon(idDelete)
+            deleteImageSlider(idDelete)
             setIdDelete(0)
             setAlertDelete(false)
             setLoading(false)
@@ -465,6 +532,7 @@ const MasterCompany = ({ params }) => {
                 companyNameProp={companyName}
                 imageHeader={imageHeader}
                 imageFavIcon={imageFavIcon}
+                imageSlider={imageSlider}
                 imageLogin={imageLogin}
                 lastIdCompany={lastIdCompany}
               />
@@ -473,10 +541,10 @@ const MasterCompany = ({ params }) => {
                 <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
                     <h4 className="capitalize">{pageName}</h4>
                     <Row>
-                        <Col>
+                        <Col md={7}>
                             <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder='Search Company' />
                         </Col>
-                        <Col>
+                        <Col md={5}>
                             <Tooltip title='Add Company'>
                                 <Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
                             </Tooltip>