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

image company

pull/1/head
wahyun 10 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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 137
      src/views/Master/MasterCompany/DialogForm.js
  2. 74
      src/views/Master/MasterCompany/index.js

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

@ -12,7 +12,7 @@ import 'antd/dist/antd.css';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import axios from "../../../const/interceptorApi" import axios from "../../../const/interceptorApi"
import { 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'; } from '../../../const/ApiConst';
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');
const config = { const config = {
@ -22,7 +22,7 @@ const config = {
"Content-type": `application/json` "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 { Option } = Select
const { t } = useTranslation() const { t } = useTranslation()
const [registrationnumber, setRegistrationNumber] = useState('') const [registrationnumber, setRegistrationNumber] = useState('')
@ -33,6 +33,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
const [description, setDescription] = useState('') const [description, setDescription] = useState('')
const [logoLogin, setLogoLogin] = useState(null) const [logoLogin, setLogoLogin] = useState(null)
const [logoHeader, setLogoHeader] = useState(null) const [logoHeader, setLogoHeader] = useState(null)
const [sliderLogin, setSliderLogin] = useState(null)
const [favIcon, setFavIcon] = useState(null) const [favIcon, setFavIcon] = useState(null)
const [loginInstruction, setLoginInstruction] = useState('') const [loginInstruction, setLoginInstruction] = useState('')
const [about, setAbout] = useState('') const [about, setAbout] = useState('')
@ -65,6 +66,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
const [openDialogMenu, setOpenDialogMenu] = useState(false) const [openDialogMenu, setOpenDialogMenu] = useState(false)
const [typeDialogMenu, setTypeDialogMenu] = useState("add") const [typeDialogMenu, setTypeDialogMenu] = useState("add")
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [modalOpen, setModalOpen] = useState(false);
const [typeImage, setTypeImage] = useState('');
useEffect(() => { useEffect(() => {
if (companyID && typeDialog === 'Set') { if (companyID && typeDialog === 'Set') {
setLoading(true) setLoading(true)
@ -98,6 +101,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
} else { } else {
setAvailableBaseUrl(false) setAvailableBaseUrl(false)
} }
setSliderLogin(null)
} else { } else {
setId(0) setId(0)
setCompanyName('') setCompanyName('')
@ -111,6 +115,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
setTemplate('') setTemplate('')
setLogoLogin(null) setLogoLogin(null)
setLogoHeader(null) setLogoHeader(null)
setSliderLogin(null)
setFavIcon(null) setFavIcon(null)
setBaseUrl([]) setBaseUrl([])
} }
@ -391,6 +396,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
data.imageLogin = logoLogin ? logoLogin : null; data.imageLogin = logoLogin ? logoLogin : null;
data.imageHeader = logoHeader ? logoHeader : null; data.imageHeader = logoHeader ? logoHeader : null;
data.imageFavicon = favIcon ? favIcon : null; data.imageFavicon = favIcon ? favIcon : null;
data.imageSlider = sliderLogin ? sliderLogin : null;
closeDialog('save', data); closeDialog('save', data);
setLoading(false); setLoading(false);
} else if (typeDialog === "Edit") { } else if (typeDialog === "Edit") {
@ -413,6 +419,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
data.imageLogin = logoLogin ? logoLogin : null; data.imageLogin = logoLogin ? logoLogin : null;
data.imageHeader = logoHeader ? logoHeader : null; data.imageHeader = logoHeader ? logoHeader : null;
data.imageFavicon = favIcon ? favIcon : null; data.imageFavicon = favIcon ? favIcon : null;
data.imageSlider = sliderLogin ? sliderLogin : null;
closeDialog('edit', data); closeDialog('edit', data);
setLoading(false); setLoading(false);
} }
@ -427,6 +434,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
closeDialog('cancel', 'none') closeDialog('cancel', 'none')
setDatatable([]); setDatatable([]);
setBaseUrl([]); setBaseUrl([]);
setSliderLogin(null);
setAvailableBaseUrl(false); setAvailableBaseUrl(false);
setLoading(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 = () => { const renderFromCompany = () => {
return ( return (
<>
<Form> <Form>
<Row> <Row>
<Col md={12}> <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> <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"> <Select style={{ width: "100%" }} defaultValue={template} onChange={(e) => setTemplate(e)} placeholder="Select a template for application">
<Option value={1}>Construction</Option> <Option value={1}>Construction</Option>
{/* <Option value={2}>IT (Information AND Technology)</Option> */}
</Select> </Select>
</FormGroup> </FormGroup>
</Col> </Col>
@ -687,15 +712,45 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
</Col> </Col>
<Col md={6}> <Col md={6}>
<Row> <Row>
<FormGroup> <FormGroup>
<Label className="capitalize" style={{ fontWeight: "bold" }}>Logo Login</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Logo Login</Label>
<Input <Input
type="file" type="file"
accept="image/*" accept="image/*"
onChange={(e) => setLogoLogin(e.target.files[0])} 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" : ""}}>
</FormGroup> <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>
<Row> <Row>
<FormGroup> <FormGroup>
@ -705,10 +760,18 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
accept="image/*" accept="image/*"
onChange={(e) => setLogoHeader(e.target.files[0])} 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> </FormGroup>
</Row>
<Row>
<FormGroup> <FormGroup>
<Label className="capitalize" style={{ fontWeight: "bold" }}>Favicon Logo</Label> <Label className="capitalize" style={{ fontWeight: "bold" }}>Favicon Logo</Label>
<Input <Input
@ -716,12 +779,54 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
accept=".ico" accept=".ico"
onChange={(e) => setFavIcon(e.target.files[0])} 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> </FormGroup>
</Row> </Row>
</Col> </Col>
</Row> </Row>
</Form> </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 { NotificationContainer, NotificationManager } from 'react-notifications';
import { Pagination, Table, Button, Tooltip, Spin } from 'antd'; import { Pagination, Table, Button, Tooltip, Spin } from 'antd';
import { 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'; } from '../../../const/ApiConst';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');
@ -47,6 +47,7 @@ const MasterCompany = ({ params }) => {
const [companyName, setCompanyName] = useState('') const [companyName, setCompanyName] = useState('')
const [imageHeader, setProjectImageHeader] = useState(null); const [imageHeader, setProjectImageHeader] = useState(null);
const [imageLogin, setProjectImageLogin] = useState(null); const [imageLogin, setProjectImageLogin] = useState(null);
const [imageSlider, setProjectImageSlider] = useState([]);
const [imageFavIcon, setProjectImageFavicon] = useState(null); const [imageFavIcon, setProjectImageFavicon] = useState(null);
const [lastIdCompany,setLastCompanyId] = useState(''); const [lastIdCompany,setLastCompanyId] = useState('');
const [loading, setLoading] = useState(true); 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 handleSearch = e => {
const value = e.target.value const value = e.target.value
setSearch(value); setSearch(value);
@ -178,6 +197,7 @@ const MasterCompany = ({ params }) => {
const handleEdit = async (data) => { const handleEdit = async (data) => {
setDataEdit(data); setDataEdit(data);
await getProjectImageHeader(data.id); await getProjectImageHeader(data.id);
await getProjectImageSlider(data.id);
await getProjectImageLogin(data.id); await getProjectImageLogin(data.id);
await getProjectImageFavicon(data.id); await getProjectImageFavicon(data.id);
handleOpenDialog('Edit'); handleOpenDialog('Edit');
@ -213,9 +233,24 @@ const MasterCompany = ({ params }) => {
setProjectImageHeader(null) setProjectImageHeader(null)
setProjectImageLogin(null) setProjectImageLogin(null)
setProjectImageFavicon(null) setProjectImageFavicon(null)
setProjectImageSlider([])
setOpenDialog(false) 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 saveCompany = async (data) => {
const formData = data const formData = data
const result = await axios.post(COMPANY_MANAGEMENT_ADD, formData, HEADER) const result = await axios.post(COMPANY_MANAGEMENT_ADD, formData, HEADER)
@ -226,6 +261,7 @@ const MasterCompany = ({ params }) => {
const logoHeader = data.imageHeader; const logoHeader = data.imageHeader;
const logoLogin = data.imageLogin; const logoLogin = data.imageLogin;
const favIcon = data.imageFavicon; const favIcon = data.imageFavicon;
const slider = data.imageSlider;
if (logoHeader) { if (logoHeader) {
await saveImageHeader( await saveImageHeader(
result.data.data.id, result.data.data.id,
@ -244,6 +280,10 @@ const MasterCompany = ({ params }) => {
favIcon favIcon
); );
} }
if(slider) {
const dataPack = packFiles(result.data.data.id,slider)
await saveSliderLogin(dataPack)
}
getDataCompany(); getDataCompany();
setLoading(false) setLoading(false)
NotificationManager.success(`Data company berhasil ditambah`, 'Success!!'); NotificationManager.success(`Data company berhasil ditambah`, 'Success!!');
@ -259,6 +299,7 @@ const MasterCompany = ({ params }) => {
const logoHeader = data.imageHeader; const logoHeader = data.imageHeader;
const logoLogin = data.imageLogin; const logoLogin = data.imageLogin;
const favIcon = data.imageFavicon; const favIcon = data.imageFavicon;
const slider = data.imageSlider;
const formData = data const formData = data
const result = await axios.put(urlEdit, formData, HEADER) const result = await axios.put(urlEdit, formData, HEADER)
@ -291,6 +332,13 @@ const MasterCompany = ({ params }) => {
favIcon favIcon
); );
} }
if(slider) {
await deleteImageSlider(
data.id
);
const dataPack = packFiles(data.id,slider)
await saveSliderLogin(dataPack)
}
if (result && result.data && result.data.code === 200) { if (result && result.data && result.data.code === 200) {
getDataCompany(); getDataCompany();
setLoading(false) setLoading(false)
@ -339,6 +387,15 @@ const MasterCompany = ({ params }) => {
.catch((error) => error.response); .catch((error) => error.response);
return "berhasil"; 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 // Delete Image Function
const deleteImageHeader = async (id) => { const deleteImageHeader = async (id) => {
const URL = IMAGE_DELETE(id, 'company_logo_header'); const URL = IMAGE_DELETE(id, 'company_logo_header');
@ -367,6 +424,15 @@ const MasterCompany = ({ params }) => {
return "berhasil"; 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 = () => { const toggleAddDialog = () => {
setOpenDialog(!openDialog) setOpenDialog(!openDialog)
} }
@ -383,6 +449,7 @@ const MasterCompany = ({ params }) => {
deleteImageHeader(idDelete) deleteImageHeader(idDelete)
deleteImageLogin(idDelete) deleteImageLogin(idDelete)
deleteImageFavicon(idDelete) deleteImageFavicon(idDelete)
deleteImageSlider(idDelete)
setIdDelete(0) setIdDelete(0)
setAlertDelete(false) setAlertDelete(false)
setLoading(false) setLoading(false)
@ -465,6 +532,7 @@ const MasterCompany = ({ params }) => {
companyNameProp={companyName} companyNameProp={companyName}
imageHeader={imageHeader} imageHeader={imageHeader}
imageFavIcon={imageFavIcon} imageFavIcon={imageFavIcon}
imageSlider={imageSlider}
imageLogin={imageLogin} imageLogin={imageLogin}
lastIdCompany={lastIdCompany} lastIdCompany={lastIdCompany}
/> />
@ -473,10 +541,10 @@ const MasterCompany = ({ params }) => {
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
<h4 className="capitalize">{pageName}</h4> <h4 className="capitalize">{pageName}</h4>
<Row> <Row>
<Col> <Col md={7}>
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder='Search Company' /> <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder='Search Company' />
</Col> </Col>
<Col> <Col md={5}>
<Tooltip title='Add Company'> <Tooltip title='Add Company'>
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> <Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Tooltip> </Tooltip>

Write Preview
Loading…
Cancel
Save