From bab9b0005205a2ca8001af947bb3bcce9c97514d Mon Sep 17 00:00:00 2001 From: farhantock Date: Tue, 30 Jan 2024 17:44:43 +0700 Subject: [PATCH 1/3] demo management --- src/const/ApiConst.js | 15 ++ src/const/en.json | 5 + src/const/id.json | 5 + src/routes.js | 4 +- src/views/SimproV2/Demo/DialogForm.js | 180 +++++++++++++ src/views/SimproV2/Demo/index.js | 367 ++++++++++++++++++++++++++ 6 files changed, 575 insertions(+), 1 deletion(-) create mode 100644 src/views/SimproV2/Demo/DialogForm.js create mode 100644 src/views/SimproV2/Demo/index.js diff --git a/src/const/ApiConst.js b/src/const/ApiConst.js index d7bdf1a..f8ef23b 100644 --- a/src/const/ApiConst.js +++ b/src/const/ApiConst.js @@ -806,3 +806,18 @@ export const MENU_COMPANY_EDIT = (id) => { export const MENU_COMPANY_DELETE = (id) => { return `${BASE_SIMPRO_LUMEN}/menu-company/delete/${id}`; }; + + + +export const DEMO_MANAGEMENT_ADD = `${BASE_SIMPRO_LUMEN}/demo-management/add`; +export const DEMO_MANAGEMENT_SEARCH = `${BASE_SIMPRO_LUMEN}/demo-management/search`; +export const DEMO_MANAGEMENT_EDIT = (id) => { + return `${BASE_SIMPRO_LUMEN}/demo-management/update/${id}`; +}; +export const DEMO_MANAGEMENT_GET_ID = (id) => { + return `${BASE_SIMPRO_LUMEN}/demo-management/edit/${id}`; +}; +export const DEMO_MANAGEMENT_DELETE = (id) => { + return `${BASE_SIMPRO_LUMEN}/demo-management/delete/${id}`; +}; +export const DEMO_MANAGEMENT_LIST = `${BASE_SIMPRO_LUMEN}/demo-management/list`; diff --git a/src/const/en.json b/src/const/en.json index 07b20a3..4a06ec8 100644 --- a/src/const/en.json +++ b/src/const/en.json @@ -34,6 +34,7 @@ "description": "Description", "division": "Division", "divisionAdd": "Add Division", + "demoAdd": "Add Demo", "employeeType": "Employee Type", "edit": "Edit", "export": "Export", @@ -66,6 +67,8 @@ "inputEmail": "Input Email", "inputNoPhone": "Input Phone Number", "inputNik": "Input NIK (KTP)", + "inputMessage": "Input Message", + "inputRole": "Input Role", "image": "Image", "imageCheck": "Selfie Presence", "locIn": "Location In", @@ -100,6 +103,7 @@ "presenceIn": "Presence In", "presenceOut": "Presence Out", "panicButton": "Panic Button", + "phoneNumber": "Phone Number", "price": "Price", "qty": "QTY", "qtyReceived": "QTY Received", @@ -114,6 +118,7 @@ "search": "Search", "save": "Save", "saveSend": "Save & Send", + "searchDemo": "Search Data Demo", "searchType": "Search Project Type", "searchPhase": "Search Project Phase", "searchDivision": "Search Division", diff --git a/src/const/id.json b/src/const/id.json index 92b395a..4d25734 100644 --- a/src/const/id.json +++ b/src/const/id.json @@ -34,6 +34,7 @@ "description": "Deskripsi", "division": "Divisi", "divisionAdd": "Tambah Divisi", + "demoAdd": "Tambah Demo", "edit": "Ubah", "export": "Ekspor", "exportExcel": "Ekspor Excel", @@ -66,6 +67,8 @@ "inputEmail": "Masukan Email", "inputNoPhone": "Masukan No Telp", "inputNik": "Masukan NIK (KTP)", + "inputMessage": "Masukan Pesan", + "inputRole": "Masukan Peran", "image": "Gambar", "imageCheck": "Lihat Selfie Presensi", "locIn": "Lokasi Masuk", @@ -100,6 +103,7 @@ "presenceIn": "Waktu Masuk", "presenceOut": "Waktu Pulang", "panicButton": "Tombol Panik", + "phoneNumber": "No Telepon", "price": "Harga", "qty": "Kuantitas", "qtyReceived": "Kuantitas Diterima", @@ -116,6 +120,7 @@ "search": "Cari", "searchType": "Cari Tipe Proyek", "searchPhase": "Cari Fase Proyek", + "searchDemo": "Cari Data Demo", "searchDivision": "Cari Divisi", "searchUom": "Cari Satuan", "searchChecklistK3": "Cari Ceklis K3", diff --git a/src/routes.js b/src/routes.js index ac74528..6847782 100644 --- a/src/routes.js +++ b/src/routes.js @@ -55,11 +55,12 @@ const DashboardProjectCarousell = React.lazy(() => import('./views/Dashboard/Das const MapMonitoring = React.lazy(() => import('./views/MapMonitoring')); const Settings = React.lazy(() => import('./views/SimproV2/Settings')); const CompanyManagement = React.lazy(() => import('./views/Master/MasterCompany')) +const DemoManagement = React.lazy(() => import('./views/SimproV2/Demo')) const routes = [ { path: '/', exact: true, name: 'Home' }, { path: '/dashboard', name: 'DashboardBOD', component: DashboardBOD }, { path: '/dashboard-customer/:PROJECT_ID/:GANTT_ID/:SCURVE', name: 'DashboardCustomer', component: DashboardCustomer }, - { path: '/dashboard-project/:PROJECT_ID/:GANTT_ID', exact: true, name: 'Dashboard Project', component: DashboardProject }, + { path: '/dashboard-project/:PROJECT_ID/:GANTT_ID/:Header', exact: true, name: 'Dashboard Project', component: DashboardProject }, { path: '/dashboard-perproject', exact: true, name: 'Dashboard Project Carousell', component: DashboardProjectCarousell }, { path: '/dashboard-project/:PROJECT_ID/:GANTT_ID/:SCURVE', exact: true, name: 'Dashboard Project', component: DashboardProject }, { path: '/projects', exact: true, name: 'Projects', component: CreatedProyek }, @@ -119,6 +120,7 @@ const routes = [ // { path: '/dashboard-project/:ID/:GANTTID', exact: true, name: 'Dashboard Project', component: DashboardProject }, { path: '/settings', exact: true, name: 'Settings', component: Settings }, { path: '/company-management', exact: true, name: 'Company Management', component: CompanyManagement }, + { path: '/demo-management', exact: true, name: 'Demo Management', component: DemoManagement }, ]; export default routes; diff --git a/src/views/SimproV2/Demo/DialogForm.js b/src/views/SimproV2/Demo/DialogForm.js new file mode 100644 index 0000000..9abe0b6 --- /dev/null +++ b/src/views/SimproV2/Demo/DialogForm.js @@ -0,0 +1,180 @@ +import React, { useEffect, useState } from 'react' +import { + Modal, ModalHeader, ModalBody, ModalFooter, + Button, Form, FormGroup, Label, Input, Col, Row +} from 'reactstrap'; +import { Select } from 'antd'; +import 'antd/dist/antd.css'; +import { useTranslation } from 'react-i18next'; +import "rc-color-picker/assets/index.css"; +const { Option } = Select +const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => { + const [id, setId] = useState(0) + const [name, setName] = useState('') + const [email, setEmail] = useState('') + const [message, setMessage] = useState('') + const [phoneNumber, setPhoneNumber] = useState('') + const [role, setRole] = useState(null) + const [status, setStatus] = useState('') + const { t } = useTranslation() + + useEffect(() => { + if (typeDialog === "Edit") { + setId(dataEdit.id) + } else { + setId(0) + + } + }, [dataEdit, openDialog]) + + const validation = () => { + if (!name || name === "") { + alert("Name cannot be empty!"); + return true; + } + } + const handleSave = () => { + let data = ''; + const err = validation(); + + if (!err) { + if (typeDialog === "Save") { + data = { + name + } + closeDialog('save', data); + } else { + data = { + id, + name, + } + closeDialog('edit', data); + } + setId(0) + setName('') + } + } + const handleCancel = () => { + closeDialog('cancel', 'none') + setId(0) + setName('') + } + const onChangeStatus = (val) => { + setStatus(val) + } + + + const renderForm = () => { + return ( +
+ + + * Wajib diisi. + + + + + + + setName(e.target.value)} + placeholder={t('inputName')} + /> + + + + + + setEmail(e.target.value)} + placeholder={t('inputEmail')} + /> + + + + + + + + setName(e.target.value)} + placeholder={t('inputNoPhone')} + /> + + + + + + setRole(e.target.value)} + placeholder={t('inputRole')} + /> + + + + + + + + + + + + + + + + setMessage(e.target.value)} placeholder={t('inputMessage')} /> + + + +
+ ) + } + + + return ( + <> + + {typeDialog == "Save" ? `Add` : "Edit"} {t('Demo')} + + {renderForm()} + + + {' '} + + + + + ) + +} + +export default DialogForm; diff --git a/src/views/SimproV2/Demo/index.js b/src/views/SimproV2/Demo/index.js new file mode 100644 index 0000000..a3fc1fa --- /dev/null +++ b/src/views/SimproV2/Demo/index.js @@ -0,0 +1,367 @@ +import * as XLSX from 'xlsx'; +import DialogForm from './DialogForm'; +import React, { useState, useEffect } from 'react'; +import SweetAlert from 'react-bootstrap-sweetalert'; +import axios from "../../../const/interceptorApi" +import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap'; +import { DEMO_MANAGEMENT_EDIT, DEMO_MANAGEMENT_SEARCH, DEMO_MANAGEMENT_LIST, DEMO_MANAGEMENT_GET_ID, DEMO_MANAGEMENT_ADD, DEMO_MANAGEMENT_DELETE } from '../../../const/ApiConst'; +import { NotificationContainer, NotificationManager } from 'react-notifications'; +import { Pagination, Button, Tooltip } from 'antd'; +import { useTranslation } from 'react-i18next'; + + +const ProjectType = ({ params, ...props }) => { + let role_id = 0, user_id = 0, isLogin = false, token = '', company_id = 0, all_project = null, role_name = '', hierarchy = [], user_name = ''; + if (props && props.role_id && props.user_id) { + role_id = props.role_id; + user_id = props.user_id; + token = props.token; + isLogin = props.isLogin; + company_id = props.company_id; + all_project = props.all_project; + role_name = props.role_name; + isLogin = props.isLogin; + hierarchy = props.hierarchy; + user_name = props.user_name; + } + + const HEADER = { + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${token}` + } + } + const pageName = params.name; + + const [alertDelete, setAlertDelete] = useState(false) + const [allDataMenu, setAllDataMenu] = useState([]) + const [clickOpenModal, setClickOpenModal] = useState(false) + const [currentPage, setCurrentPage] = useState(1) + const [dataEdit, setDataEdit] = useState([]) + const [dataExport, setDataExport] = useState([]) + const [dataTable, setDatatable] = useState([]) + const [idDelete, setIdDelete] = useState(0) + const [openDialog, setOpenDialog] = useState(false) + const [rowsPerPage, setRowsPerPage] = useState(10) + const [search, setSearch] = useState("") + const [totalPage, setTotalPage] = useState(0) + const [typeDialog, setTypeDialog] = useState('Save') + const [dataDemo, setDataDemo] = useState([]) + const [listCompany, setListCompany] = useState([]) + const { t } = useTranslation() + const column = [ + { name: t('name') }, + { name: t('email') }, + { name: t('roles') }, + { name: t('phoneNumber') }, + { name: t('status') }, + { name: t('message') }, + ].filter(column => column && column.name); + useEffect(() => { + getDataDemo(); + }, [currentPage, rowsPerPage, search]) + + useEffect(() => { + const cekData = dataExport || [] + if (cekData.length > 0) { + exportExcel() + } + }, [dataExport]) + + const getDataDemo = async () => { + let start = 0; + if (currentPage !== 1 && currentPage > 1) { + start = currentPage * rowsPerPage - rowsPerPage; + } + const payload = { + group_column: { + "operator": "AND", + "group_operator": "OR", + "where": [ + { + "name": "name", + "logic_operator": "~*", + "value": search, + } + ] + }, + columns: [], + "orders": { + "ascending": true, + "columns": [ + 'id' + ] + }, + "paging": { + "length": rowsPerPage, + "start": start + }, + 'joins': [] + } + + const result = await axios + .post(DEMO_MANAGEMENT_SEARCH, payload, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code == 200) { + setDatatable(result.data.data); + setTotalPage(result.data.totalRecord); + } else { + NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); + } + } + const handleExportExcel = async () => { + let start = 0; + + if (currentPage !== 1 && currentPage > 1) { + start = (currentPage * rowsPerPage) - rowsPerPage + } + + const payload = { + group_column: { + "operator": "AND", + "group_operator": "OR", + "where": [ + { + "name": "name", + "logic_operator": "~*", + "value": search, + } + ] + }, + "columns": [], + "orders": { + "ascending": true, + "columns": [ + 'id' + ] + }, + "paging": { + "length": rowsPerPage, + "start": start + }, + 'joins': [] + } + + const result = await axios + .post(DEMO_MANAGEMENT_SEARCH, payload, HEADER) + .then(res => res) + .catch((error) => error.response); + if (result && result.data && result.data.code == 200) { + let resData = result.data.data; + const excelData = []; + resData.map((val, index) => { + let dataRow = {}; + dataRow["Nama"] = val.name; + dataRow["Email"] = val.email; + dataRow["Role"] = val.role; + dataRow["No Telepon"] = val.number_phone; + dataRow["Status"] = val.message; + dataRow["Message"] = val.message; + excelData.push(dataRow) + }) + await setDataExport(excelData) + } else { + NotificationManager.error('Gagal Export Data!!', 'Failed'); + } + } + + const exportExcel = () => { + const dataExcel = dataExport || []; + const fileName = `Data ${pageName}.xlsx`; + const ws = XLSX.utils.json_to_sheet(dataExcel); + const wb = XLSX.utils.book_new(); + XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); + XLSX.writeFile(wb, fileName); + setDataExport([]) + } + + const handleSearch = e => { + const value = e.target.value + setSearch(value); + setCurrentPage(1) + }; + + const handleOpenDialog = (type) => { + setOpenDialog(true) + setTypeDialog(type) + } + + const handleEdit = (data) => { + setDataEdit(data) + handleOpenDialog('Edit'); + } + + const handleDelete = async (id) => { + await setAlertDelete(true) + await setIdDelete(id) + } + + const handleCloseDialog = (type, data) => { + if (type === "save") { + saveDemo(data); + } else if (type === "edit") { + editMaterialR(data); + } + setDataEdit([]) + setOpenDialog(false) + } + + const saveDemo = async (data) => { + const formData = data + const result = await axios.post(DEMO_MANAGEMENT_ADD, formData, HEADER) + .then(res => res) + .catch((error) => error.response); + if (result && result.data && result.data.code === 200) { + getDataDemo() + NotificationManager.success(`Data berhasil ditambahkan`, 'Success!!'); + } else { + NotificationManager.error(`Data gagal ditambahkan`, 'Failed!!'); + } + } + + const editMaterialR = async (data) => { + let urlEdit = DEMO_MANAGEMENT_EDIT(data.id) + const formData = data + const result = await axios.put(urlEdit, formData, HEADER) + .then(res => res) + .catch((error) => error.response); + if (result && result.data && result.data.code === 200) { + getDataDemo(); + NotificationManager.success(`Data berhasil diubah`, 'Success!!'); + } else { + NotificationManager.error(`Data gagal diubah`, `Failed!!`); + } + } + + const toggleAddDialog = () => { + setOpenDialog(!openDialog) + } + + const onConfirmDelete = async () => { + let url = DEMO_MANAGEMENT_DELETE(idDelete); + const result = await axios.delete(url, HEADER) + .then(res => res) + .catch((error) => error.response); + + if (result && result.data && result.data.code === 200) { + getDataDemo() + setIdDelete(0) + setAlertDelete(false) + NotificationManager.success(`Data berhasil dihapus!`, 'Success!!'); + } else { + setIdDelete(0) + setAlertDelete(false) + NotificationManager.error(`Data gagal dihapus!}`, 'Failed!!'); + } + } + + const cancelDelete = () => { + setAlertDelete(false) + setIdDelete(0) + } + + const onShowSizeChange = (current, pageSize) => { + setRowsPerPage(pageSize) + } + + const onPagination = (current, pageSize) => { + setCurrentPage(current) + } + + const dataNotAvailable = () => { + if (dataTable.length === 0) { + return ( + + {t('noData')} + + ) + } + } + + return ( +
+ + + {t('deleteMsg')} + + toggleAddDialog} + typeDialog={typeDialog} + dataEdit={dataEdit} + clickOpenModal={clickOpenModal} + dataParent={allDataMenu} + /> + + +

{pageName}

+ + + + + + + + + + + + + + + + + + + + {column.map((i, index) => { + return ( + + ) + })} + + + + {dataNotAvailable()} + {dataTable.map((n, index) => { + return ( + + + + + + + + + + ) + })} + +
Aksi{i.name}
+ + handleDelete(n.id)}> + + + handleEdit(n)}> + + {n.name}{n.email}{n.role}{n.number_phone}{n.status}{n.message}
+ + +
+ ) +} + +export default ProjectType; From cfa1fb6b6ea1cd992ee4a5103a2764ada203be09 Mon Sep 17 00:00:00 2001 From: farhantock Date: Wed, 31 Jan 2024 15:26:36 +0700 Subject: [PATCH 2/3] update crud demo --- src/views/SimproV2/Demo/DialogForm.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/views/SimproV2/Demo/DialogForm.js b/src/views/SimproV2/Demo/DialogForm.js index 9abe0b6..154a56d 100644 --- a/src/views/SimproV2/Demo/DialogForm.js +++ b/src/views/SimproV2/Demo/DialogForm.js @@ -21,9 +21,20 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi useEffect(() => { if (typeDialog === "Edit") { setId(dataEdit.id) + setName(dataEdit.name) + setEmail(dataEdit.email) + setMessage(dataEdit.message) + setPhoneNumber(dataEdit.number_phone) + setStatus(dataEdit.status) + setRole(dataEdit.role) } else { setId(0) - + setName('') + setEmail('') + setMessage('') + setStatus('') + setRole('') + setPhoneNumber('') } }, [dataEdit, openDialog]) @@ -40,13 +51,23 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi if (!err) { if (typeDialog === "Save") { data = { - name + name, + email, + message, + number_phone: phoneNumber, + role, + status } closeDialog('save', data); } else { data = { id, name, + email, + message, + number_phone: phoneNumber, + role, + status } closeDialog('edit', data); } From cb5d3b00b3e62e9527b146fddabfc90736efa772 Mon Sep 17 00:00:00 2001 From: farhantock Date: Wed, 31 Jan 2024 15:26:53 +0700 Subject: [PATCH 3/3] update menu company page --- src/views/Master/MasterCompany/DialogForm.js | 1828 +++++++++-------- .../Master/MenuCompany/DialogMasterMenu.js | 26 +- src/views/Master/MenuCompany/index.js | 3 - 3 files changed, 937 insertions(+), 920 deletions(-) diff --git a/src/views/Master/MasterCompany/DialogForm.js b/src/views/Master/MasterCompany/DialogForm.js index 259e8c6..1b34c6c 100644 --- a/src/views/Master/MasterCompany/DialogForm.js +++ b/src/views/Master/MasterCompany/DialogForm.js @@ -1,7 +1,7 @@ import React, { useState, useMemo, useEffect } from 'react' import { - Modal, ModalHeader, ModalBody, ModalFooter, - Button, Form, FormGroup, Row, Col, Label, Input, + Modal, ModalHeader, ModalBody, ModalFooter, + Button, Form, FormGroup, Row, Col, Label, Input, } from 'reactstrap'; import { Pagination, Table, Tooltip, Select, Spin } from 'antd'; import SweetAlert from 'react-bootstrap-sweetalert'; @@ -11,491 +11,495 @@ import DialogFormMenu from './FormMenu'; import 'antd/dist/antd.css'; import { useTranslation } from 'react-i18next'; import axios from "../../../const/interceptorApi" +import moment from 'moment'; 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'; const token = window.localStorage.getItem('token'); const config = { - headers: - { - Authorization: `Bearer ${token}`, - "Content-type": `application/json` - } + headers: + { + Authorization: `Bearer ${token}`, + "Content-type": `application/json` + } }; const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, companyID, companyNameProp, dataEditCompany, imageHeader, imageFavIcon, imageLogin, imageSlider, lastIdCompany }) => { - const { Option } = Select - const { t } = useTranslation() - const [registrationnumber, setRegistrationNumber] = useState('') - const [companyName, setCompanyName] = useState('') - const [addressCompany, setAddressCompany] = useState('') - const [phoneNumber, setPhoneNumber] = useState('') - const [emailCompany, setEmailCompany] = useState('') - 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('') - const [htmlTitle, setHtmlTitle] = useState('') - const [appName, setAppName] = useState('') - const [baseUrl, setBaseUrl] = useState([]) - const [statusCompany, setStatusCompany] = useState(true) - const [template, setTemplate] = useState('') - const [lastIdxURL, setLastIdxURL] = useState(0); - const [availableUrl, setAvailableBaseUrl] = useState(false); - const [id, setId] = useState(0) - - const [dataTable, setDatatable] = useState([]) - const [openDialogUser, setOpenDialogUser] = useState(false) - const [typeDialogUser, setTypeDialogUser] = useState("add") - const [currentPage, setCurrentPage] = useState(1) - const [rowsPerPage, setRowsPerPage] = useState(10) - const [totalPage, setTotalPage] = useState(0) - const [search, setSearch] = useState('') - const [idDelete, setIdDelete] = useState(0) - const [alertDelete, setAlertDelete] = useState(false) - const [dataEdit, setDataEdit] = useState([]) - const [roleList, setRoleList] = useState([]) - - - const [dataTableMenu, setDatatableMenu] = useState([]) - const [currentPageMenu, setCurrentPageMenu] = useState(1) - const [rowsPerPageMenu, setRowsPerPageMenu] = useState(10) - const [totalPageMenu, setTotalPageMenu] = useState(0) - 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) - getDataUser() - getRoleList() - } else if(typeDialog === 'Set-Menu') { - setLoading(true) - getDataMenu() - } else if(lastIdCompany && typeDialog === 'Save'){ - getLastCompany() - } - },[typeDialog, companyID, lastIdCompany, rowsPerPage, currentPage, rowsPerPageMenu, currentPageMenu]) - - useEffect(()=> { - if(typeDialog==="Edit"){ - setId(dataEditCompany.id) - setRegistrationNumber(dataEditCompany.registration_no) - setCompanyName(dataEditCompany.company_name) - setEmailCompany(dataEditCompany.email) - setPhoneNumber(dataEditCompany.phone_no) - setAddressCompany(dataEditCompany.address) - setAbout(dataEditCompany.about) - setAppName(dataEditCompany.app_name) - setHtmlTitle(dataEditCompany.html_title) - setStatusCompany(dataEditCompany.is_active) - setTemplate(dataEditCompany.template_id) - setBaseUrl(dataEditCompany.base_url ? dataEditCompany.base_url : []) - if(dataEditCompany.base_url) - { - setAvailableBaseUrl(true) - } else { - setAvailableBaseUrl(false) - } - setSliderLogin(null) - } else { - setId(0) - setCompanyName('') - setEmailCompany('') - setPhoneNumber('') - setAddressCompany('') - setAbout('') - setAppName('') - setHtmlTitle('') - setStatusCompany('') - setTemplate('') - setLogoLogin(null) - setLogoHeader(null) - setSliderLogin(null) - setFavIcon(null) - setBaseUrl([]) - } - },[dataEditCompany,openDialog]) + const { Option } = Select + const { t } = useTranslation() + const [registrationnumber, setRegistrationNumber] = useState('') + const [companyName, setCompanyName] = useState('') + const [addressCompany, setAddressCompany] = useState('') + const [phoneNumber, setPhoneNumber] = useState('') + const [emailCompany, setEmailCompany] = useState('') + 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('') + const [htmlTitle, setHtmlTitle] = useState('') + const [appName, setAppName] = useState('') + const [typeAccount, setTypeAccount] = useState('') + const [baseUrl, setBaseUrl] = useState([]) + const [statusCompany, setStatusCompany] = useState(true) + const [template, setTemplate] = useState('') + const [lastIdxURL, setLastIdxURL] = useState(0); + const [availableUrl, setAvailableBaseUrl] = useState(false); + const [id, setId] = useState(0) - const onShowSizeChange = (current, pageSize) => { - setRowsPerPage(pageSize) - } + const [dataTable, setDatatable] = useState([]) + const [openDialogUser, setOpenDialogUser] = useState(false) + const [typeDialogUser, setTypeDialogUser] = useState("add") + const [currentPage, setCurrentPage] = useState(1) + const [rowsPerPage, setRowsPerPage] = useState(10) + const [totalPage, setTotalPage] = useState(0) + const [search, setSearch] = useState('') + const [idDelete, setIdDelete] = useState(0) + const [alertDelete, setAlertDelete] = useState(false) + const [dataEdit, setDataEdit] = useState([]) + const [roleList, setRoleList] = useState([]) - const onPagination = (current, pageSize) => { - setCurrentPage(current) - } - const onShowSizeChangeMenu = (current, pageSize) => { - setRowsPerPageMenu(pageSize) - } - const onPaginationMenu = (current, pageSize) => { - setCurrentPageMenu(current) + const [dataTableMenu, setDatatableMenu] = useState([]) + const [currentPageMenu, setCurrentPageMenu] = useState(1) + const [rowsPerPageMenu, setRowsPerPageMenu] = useState(10) + const [totalPageMenu, setTotalPageMenu] = useState(0) + 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) + getDataUser() + getRoleList() + } else if (typeDialog === 'Set-Menu') { + setLoading(true) + getDataMenu() + } else if (lastIdCompany && typeDialog === 'Save') { + getLastCompany() } + }, [typeDialog, companyID, lastIdCompany, rowsPerPage, currentPage, rowsPerPageMenu, currentPageMenu]) - const getRoleList = async () => { - const formData = { - "paging": { "start": 0, "length": -1 }, - - "orders": { "columns": ["id"], "ascending": false } - } - const result = await axios - .post(ROLE_SEARCH, formData, config) - .then(res => res) - .catch((error) => error.response); - if (result && result.data && result.data.code == 200) { - setLoading(false) - setRoleList(result.data.data); - } + useEffect(() => { + if (typeDialog === "Edit") { + setId(dataEditCompany.id) + setRegistrationNumber(dataEditCompany.registration_no) + setCompanyName(dataEditCompany.company_name) + setEmailCompany(dataEditCompany.email) + setPhoneNumber(dataEditCompany.phone_no) + setAddressCompany(dataEditCompany.address) + setAbout(dataEditCompany.about) + setAppName(dataEditCompany.app_name) + setHtmlTitle(dataEditCompany.html_title) + setStatusCompany(dataEditCompany.is_active) + setTemplate(dataEditCompany.template_id) + setBaseUrl(dataEditCompany.base_url ? dataEditCompany.base_url : []) + if (dataEditCompany.base_url) { + setAvailableBaseUrl(true) + } else { + setAvailableBaseUrl(false) + } + setSliderLogin(null) + } else { + setId(0) + setCompanyName('') + setEmailCompany('') + setPhoneNumber('') + setAddressCompany('') + setAbout('') + setAppName('') + setHtmlTitle('') + setStatusCompany('') + setTemplate('') + setLogoLogin(null) + setLogoHeader(null) + setSliderLogin(null) + setFavIcon(null) + setBaseUrl([]) } + }, [dataEditCompany, openDialog]) - const getDataUser = async () => { - let start = 0; + const onShowSizeChange = (current, pageSize) => { + setRowsPerPage(pageSize) + } - if (currentPage !== 1 && currentPage > 1) { - start = (currentPage * rowsPerPage) - rowsPerPage - } + const onPagination = (current, pageSize) => { + setCurrentPage(current) + } + const onShowSizeChangeMenu = (current, pageSize) => { + setRowsPerPageMenu(pageSize) + } - const payload = { - "paging": { - "start": start, - "length": rowsPerPage - }, - "columns": [], - "group_column": { - "operator": "AND", - "group_operator": "OR", - "where": [ - { - "name": "name", - "logic_operator": "~*", - "value": search - }, - { - "name": "ktp_number", - "logic_operator": "~*", - "value": search - }, - { - "name": "name", - "logic_operator": "~*", - "value": search, - "table_name": "m_divisi" - }, - { - "name": "employee_type", - "logic_operator": "~*", - "value": search - }, - { - "name": "name", - "logic_operator": "~*", - "value": search, - "table_name": "m_roles" - }, - { - "name": "phone_number", - "logic_operator": "~*", - "value": search - }, - { - "name": "email", - "logic_operator": "~*", - "value": search - }, - { - "name": "status_resource", - "logic_operator": "~*", - "value": search - }, - { - "name": "company_id", - "logic_operator": "=", - "value": companyID - }, - ] - }, - "joins": [ - { - "name": "m_roles", - "column_join": "role_id", - "column_results": [ - "name", - "description" - ] - }, - { - "name": "m_divisi", - "column_join": "divisi_id", - "column_results": [ - "name" - ] - } - ], - "orders": { - "columns": [ - "id" - ], - "ascending": false - } - } + const onPaginationMenu = (current, pageSize) => { + setCurrentPageMenu(current) + } - const result = await axios - .post(USER_SEARCH, payload, config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code == 200) { - setDatatable(result.data.data); - setTotalPage(result.data.totalRecord); - setLoading(false) - } else { - setLoading(false) - NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); - } - } + const getRoleList = async () => { + const formData = { + "paging": { "start": 0, "length": -1 }, - const getDataMenu = async () => { - let start = 0; + "orders": { "columns": ["id"], "ascending": false } + } + const result = await axios + .post(ROLE_SEARCH, formData, config) + .then(res => res) + .catch((error) => error.response); + if (result && result.data && result.data.code == 200) { + setLoading(false) + setRoleList(result.data.data); + } + } - if (currentPageMenu !== 1 && currentPageMenu > 1) { - start = (currentPageMenu * rowsPerPageMenu) - rowsPerPageMenu - } + const getDataUser = async () => { + let start = 0; - const payload = { - "paging": { - "start": start, - "length": rowsPerPageMenu - }, - "columns": [{ - "name": "company_id", - "logic_operator": "=", - "value": companyID, - "operator": "AND" - }], - "joins": [{ - "name": "m_menu", - "column_join": "menu_id", - "column_results": [ - "name" - ] - }], - "orders": { "columns": ["id"], "ascending": false } - } + if (currentPage !== 1 && currentPage > 1) { + start = (currentPage * rowsPerPage) - rowsPerPage + } - const result = await axios - .post(MENU_COMPANY_SEARCH, payload, config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code == 200) { - setDatatableMenu(result.data.data); - setTotalPageMenu(result.data.totalRecord); - setLoading(false) - } else { - setLoading(false) - NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); + const payload = { + "paging": { + "start": start, + "length": rowsPerPage + }, + "columns": [], + "group_column": { + "operator": "AND", + "group_operator": "OR", + "where": [ + { + "name": "name", + "logic_operator": "~*", + "value": search + }, + { + "name": "ktp_number", + "logic_operator": "~*", + "value": search + }, + { + "name": "name", + "logic_operator": "~*", + "value": search, + "table_name": "m_divisi" + }, + { + "name": "employee_type", + "logic_operator": "~*", + "value": search + }, + { + "name": "name", + "logic_operator": "~*", + "value": search, + "table_name": "m_roles" + }, + { + "name": "phone_number", + "logic_operator": "~*", + "value": search + }, + { + "name": "email", + "logic_operator": "~*", + "value": search + }, + { + "name": "status_resource", + "logic_operator": "~*", + "value": search + }, + { + "name": "company_id", + "logic_operator": "=", + "value": companyID + }, + ] + }, + "joins": [ + { + "name": "m_roles", + "column_join": "role_id", + "column_results": [ + "name", + "description" + ] + }, + { + "name": "m_divisi", + "column_join": "divisi_id", + "column_results": [ + "name" + ] } + ], + "orders": { + "columns": [ + "id" + ], + "ascending": false + } } - const getLastCompany = async () => { - const result = await axios - .get(`${COMPANY_MANAGEMENT_GET_ID(lastIdCompany)}`, config) - .then((res) => res) - .catch((err) => err.response); - const lastRegistrationNumber = result.data.data.registration_no; - const lastNumber = parseInt(lastRegistrationNumber.match(/\d+$/)[0]); - const newNumber = lastNumber + 1; - const newRegistrationNumber = `RG-${newNumber}`; - setRegistrationNumber(newRegistrationNumber); - } + const result = await axios + .post(USER_SEARCH, payload, config) + .then(res => res) + .catch((error) => error.response); - const handleAddUser = async () => { - await setTypeDialogUser("Save") - setOpenDialogUser(true) + if (result && result.data && result.data.code == 200) { + setDatatable(result.data.data); + setTotalPage(result.data.totalRecord); + setLoading(false) + } else { + setLoading(false) + NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); } + } + + const getDataMenu = async () => { + let start = 0; - const handleEditUser = async (data) => { - setDataEdit(data) - await setTypeDialogUser('Edit') - setOpenDialogUser(true) + if (currentPageMenu !== 1 && currentPageMenu > 1) { + start = (currentPageMenu * rowsPerPageMenu) - rowsPerPageMenu } - const handleDeleteUser = async (id) => { - await setAlertDelete(true) - await setIdDelete(id) + + const payload = { + "paging": { + "start": start, + "length": rowsPerPageMenu + }, + "columns": [{ + "name": "company_id", + "logic_operator": "=", + "value": companyID, + "operator": "AND" + }], + "joins": [{ + "name": "m_menu", + "column_join": "menu_id", + "column_results": [ + "name" + ] + }], + "orders": { "columns": ["id"], "ascending": false } } - const closeDialogUser = (type, message) => { - setOpenDialogUser(false); - if (type == 'success') { - NotificationManager.success(`${message}`, "Success!!"); - getDataUser() - } else if (type == 'failed') { - NotificationManager.error(`${message}`, "Failed!!"); - } - }; + const result = await axios + .post(MENU_COMPANY_SEARCH, payload, config) + .then(res => res) + .catch((error) => error.response); - const handleAddMenu = async () => { - await setTypeDialogMenu("Save") - setOpenDialogMenu(true) + if (result && result.data && result.data.code == 200) { + setDatatableMenu(result.data.data); + setTotalPageMenu(result.data.totalRecord); + setLoading(false) + } else { + setLoading(false) + NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); } + } - const handleEditMenu = async (data) => { - setDataEdit(data) - await setTypeDialogMenu('Edit') - setOpenDialogMenu(true) - } + const getLastCompany = async () => { + const result = await axios + .get(`${COMPANY_MANAGEMENT_GET_ID(lastIdCompany)}`, config) + .then((res) => res) + .catch((err) => err.response); + const lastRegistrationNumber = result.data.data.registration_no; + const lastNumber = parseInt(lastRegistrationNumber.match(/\d+$/)[0]); + const newNumber = lastNumber + 1; + const newRegistrationNumber = `RG-${newNumber}`; + setRegistrationNumber(newRegistrationNumber); + } - const handleDeleteMenu = async (id) => { - await setAlertDelete(true) - await setIdDelete(id) + const handleAddUser = async () => { + await setTypeDialogUser("Save") + setOpenDialogUser(true) + } + + const handleEditUser = async (data) => { + setDataEdit(data) + await setTypeDialogUser('Edit') + setOpenDialogUser(true) + } + const handleDeleteUser = async (id) => { + await setAlertDelete(true) + await setIdDelete(id) + } + + const closeDialogUser = (type, message) => { + setOpenDialogUser(false); + if (type == 'success') { + NotificationManager.success(`${message}`, "Success!!"); + getDataUser() + } else if (type == 'failed') { + NotificationManager.error(`${message}`, "Failed!!"); } + }; - const closeDialogMenu = (type, message) => { - setOpenDialogMenu(false); - if (type == 'success') { - NotificationManager.success(`${message}`, "Success!!"); - getDataMenu() - } else if (type == 'failed') { - NotificationManager.error(`${message}`, "Failed!!"); - } + const handleAddMenu = async () => { + await setTypeDialogMenu("Save") + setOpenDialogMenu(true) + } - }; + const handleEditMenu = async (data) => { + setDataEdit(data) + await setTypeDialogMenu('Edit') + setOpenDialogMenu(true) + } - const handleSave = () => { - let data = ''; + const handleDeleteMenu = async (id) => { + await setAlertDelete(true) + await setIdDelete(id) + } - if (!registrationnumber && registrationnumber === "") { - alert("Please input Registration Number"); - return; - } - if (!companyName && companyName === "") { - alert("Please input the name"); - return; - } + const closeDialogMenu = (type, message) => { + setOpenDialogMenu(false); + if (type == 'success') { + NotificationManager.success(`${message}`, "Success!!"); + getDataMenu() + } else if (type == 'failed') { + NotificationManager.error(`${message}`, "Failed!!"); + } - if (typeDialog === "Save") { - data = { - registration_no: registrationnumber, - company_name: companyName, - address: addressCompany, - phone_no: phoneNumber, - email: emailCompany, - description: description, - login_instruction: loginInstruction, - about: about, - html_title: htmlTitle, - app_name: appName, - base_url: baseUrl.length == 0 ? null : baseUrl, - is_active: statusCompany, - template_id: parseInt(template) - } - 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") { - data = { - id, - registration_no: registrationnumber, - company_name: companyName, - address: addressCompany, - phone_no: phoneNumber, - email: emailCompany, - description: description, - login_instruction: loginInstruction, - about: about, - html_title: htmlTitle, - app_name: appName, - base_url: baseUrl.length == 0 ? null : baseUrl, - is_active: statusCompany, - template_id: parseInt(template), - } - 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); - } + }; + + const handleSave = () => { + let data = ''; + + if (!registrationnumber && registrationnumber === "") { + alert("Please input Registration Number"); + return; + } + if (!companyName && companyName === "") { + alert("Please input the name"); + return; } - const isValidEmail = (email) => { - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - return emailRegex.test(email); - }; - - const handleCancel = () => { - closeDialog('cancel', 'none') - setDatatable([]); - setBaseUrl([]); - setSliderLogin(null); - setAvailableBaseUrl(false); - setLoading(false); + if (typeDialog === "Save") { + data = { + registration_no: registrationnumber, + company_name: companyName, + address: addressCompany, + phone_no: phoneNumber, + email: emailCompany, + description: description, + login_instruction: loginInstruction, + about: about, + html_title: htmlTitle, + app_name: appName, + base_url: baseUrl.length == 0 ? null : baseUrl, + is_active: statusCompany, + template_id: parseInt(template), + type_account: typeAccount, + date_register: moment() + } + 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") { + data = { + id, + registration_no: registrationnumber, + company_name: companyName, + address: addressCompany, + phone_no: phoneNumber, + email: emailCompany, + description: description, + login_instruction: loginInstruction, + about: about, + html_title: htmlTitle, + app_name: appName, + base_url: baseUrl.length == 0 ? null : baseUrl, + is_active: statusCompany, + template_id: parseInt(template), + type_account: typeAccount, + } + 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); } + } - const onConfirmDelete = async () => { - let url; - if(typeDialog === "Set-Menu") { - url = MENU_COMPANY_DELETE(idDelete); - } else if(typeDialog === "Set") { - url = USER_DELETE(idDelete); - } - const result = await axios.delete(url, config) - .then(res => res) - .catch((error) => error.response); - - if (result && result.data && result.data.code === 200) { - setIdDelete(0); - setAlertDelete(false); - setLoading(false); - if (typeDialog === "Set-Menu") { - getDataMenu(); - NotificationManager.success(`Data menu berhasil dihapus!`, 'Success!!'); - } else if (typeDialog === "Set") { - getDataUser(); - NotificationManager.success(`Data user berhasil dihapus!`, 'Success!!'); - } - } else { - setIdDelete(0) - setAlertDelete(false) - setLoading(false); - if (typeDialog === "Set-Menu") { - NotificationManager.success(`Data menu gagal dihapus!`, 'Success!!'); - } else if (typeDialog === "Set") { - NotificationManager.error(`Data user gagal dihapus!`, 'Failed!!'); - } - } + const isValidEmail = (email) => { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); + }; + + const handleCancel = () => { + closeDialog('cancel', 'none') + setDatatable([]); + setBaseUrl([]); + setSliderLogin(null); + setAvailableBaseUrl(false); + setLoading(false); + } + + const onConfirmDelete = async () => { + let url; + if (typeDialog === "Set-Menu") { + url = MENU_COMPANY_DELETE(idDelete); + } else if (typeDialog === "Set") { + url = USER_DELETE(idDelete); } + const result = await axios.delete(url, config) + .then(res => res) + .catch((error) => error.response); - const cancelDelete = () => { - setAlertDelete(false) - setIdDelete(0) + if (result && result.data && result.data.code === 200) { + setIdDelete(0); + setAlertDelete(false); + setLoading(false); + if (typeDialog === "Set-Menu") { + getDataMenu(); + NotificationManager.success(`Data menu berhasil dihapus!`, 'Success!!'); + } else if (typeDialog === "Set") { + getDataUser(); + NotificationManager.success(`Data user berhasil dihapus!`, 'Success!!'); + } + } else { + setIdDelete(0) + setAlertDelete(false) + setLoading(false); + if (typeDialog === "Set-Menu") { + NotificationManager.success(`Data menu gagal dihapus!`, 'Success!!'); + } else if (typeDialog === "Set") { + NotificationManager.error(`Data user gagal dihapus!`, 'Failed!!'); + } } + } + + const cancelDelete = () => { + setAlertDelete(false) + setIdDelete(0) + } const addBaseUrl = () => { - if (availableUrl === true) { - const baseUrlArray = JSON.parse(baseUrl); - baseUrlArray.push({ - id: lastIdxURL + 1, - base_url: "", + if (availableUrl === true) { + const baseUrlArray = JSON.parse(baseUrl); + baseUrlArray.push({ + id: lastIdxURL + 1, + base_url: "", }); setBaseUrl(JSON.stringify(baseUrlArray)); setLastIdxURL(lastIdxURL + 1); - } else { - baseUrl.push({ - id: lastIdxURL + 1, - base_url: "", - }); - setBaseUrl(baseUrl); - setLastIdxURL(lastIdxURL + 1); - } - }; + } else { + baseUrl.push({ + id: lastIdxURL + 1, + base_url: "", + }); + setBaseUrl(baseUrl); + setLastIdxURL(lastIdxURL + 1); + } + }; const handleChangeBaseURL = (e, index) => { if (availableUrl === true) { @@ -508,499 +512,517 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company const newBaseURL = [...baseUrl]; newBaseURL[index][name] = value; setBaseUrl(newBaseURL); - } } + } const deleteBaseURL = (id) => { if (availableUrl === true) { - const baseUrlArray = JSON.parse(baseUrl); - let checkIdx = baseUrlArray.findIndex((o) => o.id === id); - if (checkIdx > -1) { - baseUrlArray.splice(checkIdx, 1); - const baseFilter = baseUrlArray.filter((i2) => i2 !== id); - setBaseUrl(JSON.stringify(baseFilter)); - } - } else { - let checkIdx = baseUrl.findIndex((o) => o.id === id); - if (checkIdx > -1) { - baseUrl.splice(checkIdx, 1); - setBaseUrl(baseUrl.filter((_, i2) => i2 !== id)); - } + const baseUrlArray = JSON.parse(baseUrl); + let checkIdx = baseUrlArray.findIndex((o) => o.id === id); + if (checkIdx > -1) { + baseUrlArray.splice(checkIdx, 1); + const baseFilter = baseUrlArray.filter((i2) => i2 !== id); + setBaseUrl(JSON.stringify(baseFilter)); + } + } else { + let checkIdx = baseUrl.findIndex((o) => o.id === id); + if (checkIdx > -1) { + baseUrl.splice(checkIdx, 1); + setBaseUrl(baseUrl.filter((_, i2) => i2 !== id)); } } + } const RenderBaseURL = () => { - if (baseUrl.length > 0) { - let baseUrlArray; - if(availableUrl === true) { - baseUrlArray = JSON.parse(baseUrl); - } else { - baseUrlArray = baseUrl; - } - return baseUrlArray.map((item, index) => { - return ( - + if (baseUrl.length > 0) { + let baseUrlArray; + if (availableUrl === true) { + baseUrlArray = JSON.parse(baseUrl); + } else { + baseUrlArray = baseUrl; + } + return baseUrlArray.map((item, index) => { + return ( + + + handleChangeBaseURL(e, index)} + /> + + + + + + ); + }); + } else if (baseUrl.length < 1) { + return ( +
+ No Base URL found +
+ ); + } + }; + + const onChangeType = (val) => { + setTypeAccount(val) + } + const toggleModal = () => { + setModalOpen(!modalOpen); + }; + + const handleImageClick = async (type) => { + setTypeImage(type); + if (type != '') { + toggleModal(); + } + }; + + const renderFromCompany = () => { + return ( + <> +
+ + + *Is Required + + + + + + + + + + + + + setCompanyName(e.target.value)} placeholder=' Input Company Name' /> + + + + + + + + setEmailCompany(e.target.value)} placeholder={t('inputEmail')} + onBlur={(e) => { + if (!isValidEmail(e.target.value)) { + alert("Masukkan email yang valid."); + } + }} + /> + + + + + + setPhoneNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNoPhone')} maxLength="15" /> + + + + + + + + setAddressCompany(e.target.value)} placeholder=' Input Address' /> + + + + + + setAbout(e.target.value)} placeholder=' Input Company Name' /> + + + + + + + + setAppName(e.target.value)} placeholder=' Input App Name' /> + + + + + + setHtmlTitle(e.target.value)} placeholder=' Input HTML Title' /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - handleChangeBaseURL(e, index)} - /> +

URL

+

Action

+ + + + - ); - }); - } else if (baseUrl.length < 1) { - return ( -
- No Base URL found -
- ); - } - }; - - 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 ( - <> - - - - *Is Required - - - - - - - - - - - - - setCompanyName(e.target.value)} placeholder=' Input Company Name' /> - - - - - - - - setEmailCompany(e.target.value)} placeholder={t('inputEmail')} - onBlur={(e) => { - if (!isValidEmail(e.target.value)) { - alert("Masukkan email yang valid."); - } - }} - /> - - - - - - setPhoneNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNoPhone')} maxLength="15" /> - - - - - - - - setAddressCompany(e.target.value)} placeholder=' Input Address' /> - - - - - - setAbout(e.target.value)} placeholder=' Input Company Name' /> - - - - - - - - setAppName(e.target.value)} placeholder=' Input App Name' /> - - - - - - setHtmlTitle(e.target.value)} placeholder=' Input HTML Title' /> - - - - - - - - - - - - - - - - - - - - - - - -

URL

- - -

Action

- - - - - - - -
{RenderBaseURL()}
- - - - - - - setLogoLogin(e.target.files[0])} - /> - handleImageClick('imageLogin') : ''} style={{ cursor: imageLogin ? "pointer" : ""}}> -

- { - imageLogin ? ( - "View Image" - ) : ( - "Not found image" - ) - } -

- - - - (Multiple Input) - setSliderLogin(e.target.files)} - /> - handleImageClick('imageSlider') : ''} style={{ cursor: imageSlider.length ? "pointer" : ""}}> -

- { - imageSlider.length > 0 ? ( - "View image" - ) : ( - "Not found image" - ) - } -

- - - - - - - setLogoHeader(e.target.files[0])} - /> - handleImageClick('imageHeader') : ''} style={{ cursor: imageHeader ? "pointer" : ""}}> -

- { - imageHeader ? ( - "View image" - ) : ( - "Not found image" - ) - } -

- - - - - setFavIcon(e.target.files[0])} - /> - handleImageClick('favIcon') : ''} style={{ cursor: imageFavIcon ? "pointer" : "" }}> -

- { - imageFavIcon ? ( - "View image" - ) : ( - "Not found image" - ) - } -

- - - +
{RenderBaseURL()}
+ + + + + + + setLogoLogin(e.target.files[0])} + /> + handleImageClick('imageLogin') : ''} style={{ cursor: imageLogin ? "pointer" : "" }}> +

+ { + imageLogin ? ( + "View Image" + ) : ( + "Not found image" + ) + } +

+ + + + (Multiple Input) + setSliderLogin(e.target.files)} + /> + handleImageClick('imageSlider') : ''} style={{ cursor: imageSlider.length ? "pointer" : "" }}> +

+ { + imageSlider.length > 0 ? ( + "View image" + ) : ( + "Not found image" + ) + } +

+ + + + + + + setLogoHeader(e.target.files[0])} + /> + handleImageClick('imageHeader') : ''} style={{ cursor: imageHeader ? "pointer" : "" }}> +

+ { + imageHeader ? ( + "View image" + ) : ( + "Not found image" + ) + } +

+ + + + + setFavIcon(e.target.files[0])} + /> + handleImageClick('favIcon') : ''} style={{ cursor: imageFavIcon ? "pointer" : "" }}> +

+ { + imageFavIcon ? ( + "View image" + ) : ( + "Not found image" + ) + } +

+ + + + + + + + + { + typeImage !== 'imageSlider' ? ( + imageLogin || imageHeader || imageFavIcon ? ( + Image Preview + ) : ('-') + ) : ( + + {imageSlider && imageSlider.map((item, index) => ( + + + ))} - - - - { - typeImage !== 'imageSlider' ? ( - imageLogin || imageHeader || imageFavIcon ? ( - Image Preview - ):('-') - ):( - - {imageSlider && imageSlider.map((item, index)=> ( - - - - ))} - - ) - } - - - - - - - ) - } + ) + } + + + + + + + ) + } - const RenderTableUser = useMemo(() => { - const columns = [ - { - title: t('action'), - dataIndex: '', - key: 'x', - render: (text, record) => <> - - - {" "} - - - - , - }, + const RenderTableUser = useMemo(() => { + const columns = [ + { + title: t('action'), + dataIndex: '', + key: 'x', + render: (text, record) => <> + + + {" "} + + + + , + }, - { title: t('nik'), dataIndex: 'ktp_number', key: 'ktp_number' }, - { title: t('nameHR'), dataIndex: 'name', key: 'name' }, + { title: t('nik'), dataIndex: 'ktp_number', key: 'ktp_number' }, + { title: t('nameHR'), dataIndex: 'name', key: 'name' }, - { title: t('employeeType'), dataIndex: 'employee_type', key: 'employee_type' }, - { - title: t('roles'), - dataIndex: 'join_first_name', - key: 'join_first_name', - render: (text, record) => <>{record.join_first_name} - }, - { title: 'Phone No.', dataIndex: 'phone_number', key: 'phone_number' }, - { title: 'Email', dataIndex: 'email', key: 'email' }, - { title: 'Status', dataIndex: 'status_resource', key: 'status_status' } - ]; - return ( - - ) - }, [dataTable]) - - - const renderTableMenu = useMemo(() => { - const columns = [ - { - title: t('action'), - dataIndex: '', - key: 'x', - render: (text, record) => <> - - handleDeleteMenu(text.id)}> - - - handleEditMenu(text)}> - - , - }, - { title: t('name'), dataIndex: 'join_first_name', key: 'join_first_name' }, - { title: 'Url', dataIndex: 'url', key: 'url' }, - { title: t('icon'), dataIndex: 'icon', key: 'icon' }, - { title: 'Alias', dataIndex: 'alias_name', key: 'alias_name' }, - { title: t('order'), dataIndex: 'sequence', key: 'sequence' }, - ]; - return ( -
- ) - }, [dataTableMenu]) + { title: t('employeeType'), dataIndex: 'employee_type', key: 'employee_type' }, + { + title: t('roles'), + dataIndex: 'join_first_name', + key: 'join_first_name', + render: (text, record) => <>{record.join_first_name} + }, + { title: 'Phone No.', dataIndex: 'phone_number', key: 'phone_number' }, + { title: 'Email', dataIndex: 'email', key: 'email' }, + { title: 'Status', dataIndex: 'status_resource', key: 'status_status' } + ]; + return ( +
+ ) + }, [dataTable]) + + const renderTableMenu = useMemo(() => { + const columns = [ + { + title: t('action'), + dataIndex: '', + key: 'x', + render: (text, record) => <> + + handleDeleteMenu(text.id)}> + + + handleEditMenu(text)}> + + , + }, + { title: t('name'), dataIndex: 'join_first_name', key: 'join_first_name' }, + { title: 'Url', dataIndex: 'url', key: 'url' }, + { title: t('icon'), dataIndex: 'icon', key: 'icon' }, + { title: 'Alias', dataIndex: 'alias_name', key: 'alias_name' }, + { title: t('order'), dataIndex: 'sequence', key: 'sequence' }, + ]; return ( - <> - - cancelDelete()} - focusCancelBtn - > - {t('deleteMsg')} - - - - - - {typeDialog === "Set-Menu" ? `Menu ${companyNameProp}` : typeDialog === "Save" ? `Add Data Company` : typeDialog === "Set" ? `Manage User ${companyNameProp}` : `Edit ${companyNameProp}`} - {typeDialog === "Set" ? ( - - - - ) : - typeDialog != "Save" && typeDialog != "Edit" && - ( - - - - )} - - - - {typeDialog !== "Set" && typeDialog !== "Set-Menu" && renderFromCompany()} - {typeDialog === "Set" && ( - <> - - {RenderTableUser} - - - - )} - {typeDialog === "Set-Menu" && ( - <> - - {renderTableMenu} - - - - )} - - - - {typeDialog !== "Set" && typeDialog !== "Set-Menu" && ( - - )} - - - - +
) + }, [dataTableMenu]) + + return ( + <> + + cancelDelete()} + focusCancelBtn + > + {t('deleteMsg')} + + + + + + {typeDialog === "Set-Menu" ? `Menu ${companyNameProp}` : typeDialog === "Save" ? `Add Data Company` : typeDialog === "Set" ? `Manage User ${companyNameProp}` : `Edit ${companyNameProp}`} + {typeDialog === "Set" ? ( + + + + ) : + typeDialog != "Save" && typeDialog != "Edit" && + ( + + + + )} + + + + {typeDialog !== "Set" && typeDialog !== "Set-Menu" && renderFromCompany()} + {typeDialog === "Set" && ( + <> + + {RenderTableUser} + + + + )} + {typeDialog === "Set-Menu" && ( + <> + + {renderTableMenu} + + + + )} + + + + {typeDialog !== "Set" && typeDialog !== "Set-Menu" && ( + + )} + + + + + ) } export default DialogForm; diff --git a/src/views/Master/MenuCompany/DialogMasterMenu.js b/src/views/Master/MenuCompany/DialogMasterMenu.js index c2aef01..2784fd2 100644 --- a/src/views/Master/MenuCompany/DialogMasterMenu.js +++ b/src/views/Master/MenuCompany/DialogMasterMenu.js @@ -36,7 +36,8 @@ const Index = ({ params, openDialog, toggleDialog, closeDialog }) => { const [tooltipTambah, setTooltipTambah] = useState(false) const [totalPage, setTotalPage] = useState(0) const [typeDialog, setTypeDialog] = useState('Save') - const [loading, SetLoading] = useState(false) + const [loading, setLoading] = useState(false) + const [openDialogMasterMenu, setOpenDialogFormMenu] = useState(false) const { t } = useTranslation() // const pageName = params.name; @@ -84,7 +85,7 @@ const Index = ({ params, openDialog, toggleDialog, closeDialog }) => { } const getDataMenu = async () => { - SetLoading(true) + setLoading(true) let start = 0; if (currentPage !== 1 && currentPage > 1) { @@ -114,17 +115,17 @@ const Index = ({ params, openDialog, toggleDialog, closeDialog }) => { if (result && result.data && result.data.code == 200) { setDatatable(result.data.data); setTotalPage(result.data.totalRecord); - SetLoading(false) + setLoading(false) } else { NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); - SetLoading(false) + setLoading(false) } } const handleOpenDialog = async (type) => { await setTypeDialog(type) getDataAllMenu(); - // setOpenDialog(true) + setOpenDialogFormMenu(true) } const handleCloseDialog = (type, data) => { @@ -134,19 +135,16 @@ const Index = ({ params, openDialog, toggleDialog, closeDialog }) => { editMenu(data); } setDataEdit([]) - // setOpenDialog(false) + setOpenDialogFormMenu(false) } const toggleAddDialog = () => { - // setOpenDialog(!openDialog) + setOpenDialogFormMenu(!openDialog) } const handleCancel = () => { closeDialog('cancel', 'none') - // setDatatable([]); - // setBaseUrl([]); - // setAvailableBaseUrl(false); - // setLoading(false); + setLoading(false); } @@ -334,15 +332,15 @@ const Index = ({ params, openDialog, toggleDialog, closeDialog }) => { > {t('deleteMsg')} - {/* toggleAddDialog} typeDialog={typeDialog} dataEdit={dataEdit} clickOpenModal={clickOpenModal} dataMenu={allDataMenu} - /> */} + /> MASTER MENU diff --git a/src/views/Master/MenuCompany/index.js b/src/views/Master/MenuCompany/index.js index 8b177cc..e3eb03b 100644 --- a/src/views/Master/MenuCompany/index.js +++ b/src/views/Master/MenuCompany/index.js @@ -414,9 +414,6 @@ const Index = ({ params, ...props }) => { } - - -