ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

image company

pull/1/head
wahyun 11 months ago
parent
df08380038
commit
c922f8aff0
2 changed files with 192 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 121
      src/views/Master/MasterCompany/DialogForm.js
  2. 74
      src/views/Master/MasterCompany/index.js

121
src/views/Master/MasterCompany/DialogForm.js
Unescape View File

@ -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>
@ -694,7 +719,37 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
accept="image/*"
onChange={(e) => setLogoLogin(e.target.files[0])}
/>
<small>{imageLogin ? imageLogin.image : <p style={{ color: "red" }}>Not found image</p> }</small>
<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>
@ -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>
</>
)
}

74
src/views/Master/MasterCompany/index.js
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save