Browse Source

update menu company page

pull/1/head
farhantock 11 months ago
parent
commit
cb5d3b00b3
  1. 78
      src/views/Master/MasterCompany/DialogForm.js
  2. 26
      src/views/Master/MenuCompany/DialogMasterMenu.js
  3. 3
      src/views/Master/MenuCompany/index.js

78
src/views/Master/MasterCompany/DialogForm.js

@ -11,6 +11,7 @@ import DialogFormMenu from './FormMenu';
import 'antd/dist/antd.css'; 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 moment from 'moment';
import { import {
USER_SEARCH, MENU_COMPANY_DELETE, USER_DELETE, ROLE_SEARCH, COMPANY_MANAGEMENT_GET_ID, MENU_COMPANY_SEARCH, BASE_SIMPRO_LUMEN_IMAGE 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';
@ -39,6 +40,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
const [about, setAbout] = useState('') const [about, setAbout] = useState('')
const [htmlTitle, setHtmlTitle] = useState('') const [htmlTitle, setHtmlTitle] = useState('')
const [appName, setAppName] = useState('') const [appName, setAppName] = useState('')
const [typeAccount, setTypeAccount] = useState('')
const [baseUrl, setBaseUrl] = useState([]) const [baseUrl, setBaseUrl] = useState([])
const [statusCompany, setStatusCompany] = useState(true) const [statusCompany, setStatusCompany] = useState(true)
const [template, setTemplate] = useState('') const [template, setTemplate] = useState('')
@ -73,16 +75,16 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
setLoading(true) setLoading(true)
getDataUser() getDataUser()
getRoleList() getRoleList()
} else if(typeDialog === 'Set-Menu') { } else if (typeDialog === 'Set-Menu') {
setLoading(true) setLoading(true)
getDataMenu() getDataMenu()
} else if(lastIdCompany && typeDialog === 'Save'){ } else if (lastIdCompany && typeDialog === 'Save') {
getLastCompany() getLastCompany()
} }
},[typeDialog, companyID, lastIdCompany, rowsPerPage, currentPage, rowsPerPageMenu, currentPageMenu]) }, [typeDialog, companyID, lastIdCompany, rowsPerPage, currentPage, rowsPerPageMenu, currentPageMenu])
useEffect(()=> { useEffect(() => {
if(typeDialog==="Edit"){ if (typeDialog === "Edit") {
setId(dataEditCompany.id) setId(dataEditCompany.id)
setRegistrationNumber(dataEditCompany.registration_no) setRegistrationNumber(dataEditCompany.registration_no)
setCompanyName(dataEditCompany.company_name) setCompanyName(dataEditCompany.company_name)
@ -95,8 +97,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
setStatusCompany(dataEditCompany.is_active) setStatusCompany(dataEditCompany.is_active)
setTemplate(dataEditCompany.template_id) setTemplate(dataEditCompany.template_id)
setBaseUrl(dataEditCompany.base_url ? dataEditCompany.base_url : []) setBaseUrl(dataEditCompany.base_url ? dataEditCompany.base_url : [])
if(dataEditCompany.base_url) if (dataEditCompany.base_url) {
{
setAvailableBaseUrl(true) setAvailableBaseUrl(true)
} else { } else {
setAvailableBaseUrl(false) setAvailableBaseUrl(false)
@ -119,7 +120,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
setFavIcon(null) setFavIcon(null)
setBaseUrl([]) setBaseUrl([])
} }
},[dataEditCompany,openDialog]) }, [dataEditCompany, openDialog])
const onShowSizeChange = (current, pageSize) => { const onShowSizeChange = (current, pageSize) => {
setRowsPerPage(pageSize) setRowsPerPage(pageSize)
@ -391,7 +392,9 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
app_name: appName, app_name: appName,
base_url: baseUrl.length == 0 ? null : baseUrl, base_url: baseUrl.length == 0 ? null : baseUrl,
is_active: statusCompany, is_active: statusCompany,
template_id: parseInt(template) template_id: parseInt(template),
type_account: typeAccount,
date_register: moment()
} }
data.imageLogin = logoLogin ? logoLogin : null; data.imageLogin = logoLogin ? logoLogin : null;
data.imageHeader = logoHeader ? logoHeader : null; data.imageHeader = logoHeader ? logoHeader : null;
@ -415,6 +418,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
base_url: baseUrl.length == 0 ? null : baseUrl, base_url: baseUrl.length == 0 ? null : baseUrl,
is_active: statusCompany, is_active: statusCompany,
template_id: parseInt(template), template_id: parseInt(template),
type_account: typeAccount,
} }
data.imageLogin = logoLogin ? logoLogin : null; data.imageLogin = logoLogin ? logoLogin : null;
data.imageHeader = logoHeader ? logoHeader : null; data.imageHeader = logoHeader ? logoHeader : null;
@ -441,9 +445,9 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
const onConfirmDelete = async () => { const onConfirmDelete = async () => {
let url; let url;
if(typeDialog === "Set-Menu") { if (typeDialog === "Set-Menu") {
url = MENU_COMPANY_DELETE(idDelete); url = MENU_COMPANY_DELETE(idDelete);
} else if(typeDialog === "Set") { } else if (typeDialog === "Set") {
url = USER_DELETE(idDelete); url = USER_DELETE(idDelete);
} }
const result = await axios.delete(url, config) const result = await axios.delete(url, config)
@ -532,7 +536,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
const RenderBaseURL = () => { const RenderBaseURL = () => {
if (baseUrl.length > 0) { if (baseUrl.length > 0) {
let baseUrlArray; let baseUrlArray;
if(availableUrl === true) { if (availableUrl === true) {
baseUrlArray = JSON.parse(baseUrl); baseUrlArray = JSON.parse(baseUrl);
} else { } else {
baseUrlArray = baseUrl; baseUrlArray = baseUrl;
@ -543,7 +547,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
<Col md={8}> <Col md={8}>
<Input <Input
type="text" type="text"
value={availableUrl === true ? item.base_url ? item.base_url : "" : item.base_url ? item.base_url : "" } value={availableUrl === true ? item.base_url ? item.base_url : "" : item.base_url ? item.base_url : ""}
name="base_url" name="base_url"
onChange={(e) => handleChangeBaseURL(e, index)} onChange={(e) => handleChangeBaseURL(e, index)}
/> />
@ -576,13 +580,9 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
} }
}; };
const truncateText = (text, maxLength) => { const onChangeType = (val) => {
if (text.length > maxLength) { setTypeAccount(val)
return text.substring(0, maxLength) + '...';
} }
return text;
};
const toggleModal = () => { const toggleModal = () => {
setModalOpen(!modalOpen); setModalOpen(!modalOpen);
}; };
@ -684,6 +684,28 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">
{t('status')}<span style={{ color: "red" }}>*</span>
</Label>
<Select
showSearch
filterOption={(inputValue, option) =>
option.children.toLowerCase().includes(inputValue.toLowerCase())
}
value={typeAccount}
defaultValue={typeAccount}
onChange={onChangeType}
style={{ width: "100%" }}
>
<Option value="Company">Company</Option>
<Option value="Personal">Personal</Option>
</Select>
</FormGroup>
</Col>
</Row>
<Row> <Row>
<Col md={6}> <Col md={6}>
<Col md={12}> <Col md={12}>
@ -719,7 +741,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
accept="image/*" accept="image/*"
onChange={(e) => setLogoLogin(e.target.files[0])} onChange={(e) => setLogoLogin(e.target.files[0])}
/> />
<small onClick={imageLogin ? () => handleImageClick('imageLogin') : ''} style={{ cursor: imageLogin ? "pointer" : ""}}> <small onClick={imageLogin ? () => handleImageClick('imageLogin') : ''} style={{ cursor: imageLogin ? "pointer" : "" }}>
<p style={{ textDecoration: imageLogin ? 'underline' : 'none', color: imageLogin ? 'blue' : 'red' }}> <p style={{ textDecoration: imageLogin ? 'underline' : 'none', color: imageLogin ? 'blue' : 'red' }}>
{ {
imageLogin ? ( imageLogin ? (
@ -739,7 +761,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
multiple multiple
onChange={(e) => setSliderLogin(e.target.files)} onChange={(e) => setSliderLogin(e.target.files)}
/> />
<small onClick={imageSlider.length ? () => handleImageClick('imageSlider') : ''} style={{ cursor: imageSlider.length ? "pointer" : ""}}> <small onClick={imageSlider.length ? () => handleImageClick('imageSlider') : ''} style={{ cursor: imageSlider.length ? "pointer" : "" }}>
<p style={{ textDecoration: imageSlider.length ? 'underline' : 'none', color: imageSlider.length ? 'blue' : 'red' }}> <p style={{ textDecoration: imageSlider.length ? 'underline' : 'none', color: imageSlider.length ? 'blue' : 'red' }}>
{ {
imageSlider.length > 0 ? ( imageSlider.length > 0 ? (
@ -760,7 +782,7 @@ 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 onClick={imageHeader ? () => handleImageClick('imageHeader') : ''} style={{ cursor: imageHeader ? "pointer" : ""}}> <small onClick={imageHeader ? () => handleImageClick('imageHeader') : ''} style={{ cursor: imageHeader ? "pointer" : "" }}>
<p style={{ textDecoration: imageHeader ? 'underline' : 'none', color: imageHeader ? 'blue' : 'red' }}> <p style={{ textDecoration: imageHeader ? 'underline' : 'none', color: imageHeader ? 'blue' : 'red' }}>
{ {
imageHeader ? ( imageHeader ? (
@ -810,12 +832,12 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
style={{ maxWidth: "100%" }} style={{ maxWidth: "100%" }}
alt="Image Preview" alt="Image Preview"
/> />
):('-') ) : ('-')
):( ) : (
<Row style={{ display:'flex', justifyContent:'center' }}> <Row style={{ display: 'flex', justifyContent: 'center' }}>
{imageSlider && imageSlider.map((item, index)=> ( {imageSlider && imageSlider.map((item, index) => (
<Col md={6} style={{ marginBottom:'20px' }}> <Col md={6} style={{ marginBottom: '20px' }}>
<img key={index} src={`${BASE_SIMPRO_LUMEN_IMAGE}/` + item.image} style={{ width:'150px', display:'block' }}></img> <img key={index} src={`${BASE_SIMPRO_LUMEN_IMAGE}/` + item.image} style={{ width: '150px', display: 'block' }}></img>
</Col> </Col>
))} ))}
</Row> </Row>

26
src/views/Master/MenuCompany/DialogMasterMenu.js

@ -36,7 +36,8 @@ const Index = ({ params, openDialog, toggleDialog, closeDialog }) => {
const [tooltipTambah, setTooltipTambah] = useState(false) const [tooltipTambah, setTooltipTambah] = useState(false)
const [totalPage, setTotalPage] = useState(0) const [totalPage, setTotalPage] = useState(0)
const [typeDialog, setTypeDialog] = useState('Save') const [typeDialog, setTypeDialog] = useState('Save')
const [loading, SetLoading] = useState(false) const [loading, setLoading] = useState(false)
const [openDialogMasterMenu, setOpenDialogFormMenu] = useState(false)
const { t } = useTranslation() const { t } = useTranslation()
// const pageName = params.name; // const pageName = params.name;
@ -84,7 +85,7 @@ const Index = ({ params, openDialog, toggleDialog, closeDialog }) => {
} }
const getDataMenu = async () => { const getDataMenu = async () => {
SetLoading(true) setLoading(true)
let start = 0; let start = 0;
if (currentPage !== 1 && currentPage > 1) { if (currentPage !== 1 && currentPage > 1) {
@ -114,17 +115,17 @@ const Index = ({ params, openDialog, toggleDialog, closeDialog }) => {
if (result && result.data && result.data.code == 200) { if (result && result.data && result.data.code == 200) {
setDatatable(result.data.data); setDatatable(result.data.data);
setTotalPage(result.data.totalRecord); setTotalPage(result.data.totalRecord);
SetLoading(false) setLoading(false)
} else { } else {
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
SetLoading(false) setLoading(false)
} }
} }
const handleOpenDialog = async (type) => { const handleOpenDialog = async (type) => {
await setTypeDialog(type) await setTypeDialog(type)
getDataAllMenu(); getDataAllMenu();
// setOpenDialog(true) setOpenDialogFormMenu(true)
} }
const handleCloseDialog = (type, data) => { const handleCloseDialog = (type, data) => {
@ -134,19 +135,16 @@ const Index = ({ params, openDialog, toggleDialog, closeDialog }) => {
editMenu(data); editMenu(data);
} }
setDataEdit([]) setDataEdit([])
// setOpenDialog(false) setOpenDialogFormMenu(false)
} }
const toggleAddDialog = () => { const toggleAddDialog = () => {
// setOpenDialog(!openDialog) setOpenDialogFormMenu(!openDialog)
} }
const handleCancel = () => { const handleCancel = () => {
closeDialog('cancel', 'none') closeDialog('cancel', 'none')
// setDatatable([]); setLoading(false);
// setBaseUrl([]);
// setAvailableBaseUrl(false);
// setLoading(false);
} }
@ -334,15 +332,15 @@ const Index = ({ params, openDialog, toggleDialog, closeDialog }) => {
> >
{t('deleteMsg')} {t('deleteMsg')}
</SweetAlert> </SweetAlert>
{/* <DialogForm <DialogForm
openDialog={openDialog} openDialog={openDialogMasterMenu}
closeDialog={handleCloseDialog} closeDialog={handleCloseDialog}
toggleDialog={() => toggleAddDialog} toggleDialog={() => toggleAddDialog}
typeDialog={typeDialog} typeDialog={typeDialog}
dataEdit={dataEdit} dataEdit={dataEdit}
clickOpenModal={clickOpenModal} clickOpenModal={clickOpenModal}
dataMenu={allDataMenu} dataMenu={allDataMenu}
/> */} />
<Modal size="xl" fullscreen="xl" scrollable={true} isOpen={openDialog} toggle={toggleDialog}> <Modal size="xl" fullscreen="xl" scrollable={true} isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}> <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
MASTER MENU MASTER MENU

3
src/views/Master/MenuCompany/index.js

@ -414,9 +414,6 @@ const Index = ({ params, ...props }) => {
<Button id="TooltipMasterMenu" color="warning" onClick={() => handleOpenDialogMasterMenu()}><i className="fa fa-table"></i></Button> <Button id="TooltipMasterMenu" color="warning" onClick={() => handleOpenDialogMasterMenu()}><i className="fa fa-table"></i></Button>
</Tooltip> </Tooltip>
} }
<Tooltip title={t('menuAdd')}>
<Button style={{ marginLeft: "5px" }} id="TooltipTambah" color="success" onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
</Tooltip>
<Tooltip title={t('exportExcel')}> <Tooltip title={t('exportExcel')}>
<Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> <Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
</Tooltip> </Tooltip>

Loading…
Cancel
Save