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 }) => { } - - -