\r\n \r\n {!upf.user.image && \r\n {({ TransitionProps, placement }) => (\r\n \r\n \r\n {upf.user.firstName && (\r\n \r\n \r\n }\r\n />\r\n \r\n {upf.user.lastLogin && (\r\n \r\n \r\n \r\n \r\n \r\n อีเมล :{' '}\r\n {upf.user.email}\r\n \r\n \r\n ตำแหน่ง: {upf.user.position}\r\n \r\n \r\n ส่วนงาน :{' '}\r\n {upf.user.department}\r\n \r\n {/* เข้าใช้ล่าสุด: {upf.user.lastLogin} */}\r\n \r\n \r\n }\r\n />\r\n {' '}\r\n \r\n )}\r\n \r\n \r\n \r\n {/* {\r\n alert('Link to Profile Page');\r\n }}\r\n >\r\n \r\n \r\n Profile\r\n */}\r\n {\r\n handleLogout();\r\n handleClose(e);\r\n }}\r\n >\r\n \r\n \r\n ออกจากระบบ\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n )}\r\n - \r\n
\r\n {upf.user.firstNameEn &&\r\n `${upf.user.firstNameEn} ${upf.user.lastNameEn}`}\r\n \r\n
\r\n {!isBackOffice && (\r\n
\r\n );\r\n}\r\n\r\nexport default React.memo(InnerSidebar);\r\n","/**\r\n * Style of surfaces component cat. consists of\r\n * - appBarStyles,\r\n * - toolbarStyles,\r\n * - paperStyles,\r\n * - cardStyles,\r\n * and etc.\r\n */\r\n\r\n/**\r\n * toolbarStyles for AppBar position=fixed\r\n * @param {*} theme\r\n */\r\nexport const appBarStyles = (theme) => {\r\n // Default drawer width\r\n const drawerWidth = '240';\r\n\r\n // themeMixinsToolbar is the poperty of theme toolbar\r\n const themeMixinsToolbar = { ...theme.mixins.toolbar };\r\n\r\n // Re-Create themeMixinsToolbar with mixinsToolbar\r\n // Let simplify to apply to toolbarStyle.\r\n const mixinsToolbar = {\r\n minHeight: themeMixinsToolbar.minHeight,\r\n upxs: {\r\n minHeight:\r\n themeMixinsToolbar[\r\n `${theme.breakpoints.up('xs')} and (orientation: landscape)`\r\n ].minHeight,\r\n },\r\n upsm: {\r\n minHeight: themeMixinsToolbar[theme.breakpoints.up('sm')].minHeight,\r\n },\r\n };\r\n const toolbarStyleOffsetHeight = 25;\r\n\r\n // Toolbar Style\r\n const toolbarStyle = {\r\n padding: theme.spacing(1),\r\n minHeight: mixinsToolbar.minHeight - toolbarStyleOffsetHeight,\r\n [`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: {\r\n minHeight: mixinsToolbar.upxs.minHeight - toolbarStyleOffsetHeight,\r\n },\r\n [theme.breakpoints.up('sm')]: {\r\n minHeight: mixinsToolbar.upsm.minHeight - toolbarStyleOffsetHeight,\r\n },\r\n };\r\n\r\n //Return appToolBarStyle\r\n return {\r\n //Set top appToolBar (Let appToolBar is under the window + AbbBar)\r\n appToolBarStyle: {\r\n flexGrow: 1,\r\n top: mixinsToolbar.minHeight,\r\n [`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: {\r\n top: mixinsToolbar.upxs.minHeight,\r\n },\r\n [theme.breakpoints.up('sm')]: {\r\n top: mixinsToolbar.upsm.minHeight,\r\n },\r\n color: '#000000',\r\n background: '#FFFFFF',\r\n borderBottom: '1px solid #e0e0e0',\r\n // boxShadow: 'none',\r\n },\r\n // toolbarStyle\r\n toolbarStyle,\r\n // necessary for content to be below AppToolBar\r\n toolbarOffsetStyle: toolbarStyle,\r\n };\r\n};\r\n","import React from 'react';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\n\r\nconst HtmlTooltip = withStyles((theme) => ({\r\n tooltip: {\r\n backgroundColor: '#f5f5f9',\r\n color: 'rgba(0, 0, 0, 0.87)',\r\n maxWidth: 300,\r\n fontSize: theme.typography.pxToRem(12),\r\n border: '1px solid #dadde9',\r\n },\r\n}))(Tooltip);\r\n\r\nconst LFTooltip = withStyles((theme) => ({\r\n tooltip: {\r\n fontSize: theme.typography.pxToRem(12),\r\n },\r\n}))(Tooltip);\r\n\r\nexport { LFTooltip, HtmlTooltip };\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Breadcrumbs, Tooltip, Typography, Box } from '@material-ui/core';\r\n\r\nimport { LFTooltip } from './../Tooltips';\r\n\r\nimport { Link } from 'react-router-dom';\r\n\r\nconst BreadcrumbsList = ({ breadcrumbs }) => {\r\n return (\r\n - \r\n {listMenuFrontOf.map((item, index) => {\r\n if (\r\n userProfile.permission.level.some(\r\n (elem) => item.permissionLevel.indexOf(elem) > -1\r\n )\r\n ) {\r\n fontOfCount++;\r\n return (\r\n
- \r\n {listMenuBackOf.map((item, index) => {\r\n if (\r\n userProfile.permission.level.some(\r\n (elem) => item.permissionLevel.indexOf(elem) > -1\r\n )\r\n ) {\r\n backOfCount++;\r\n return (\r\n
\r\n \r\n {/* @Toolbar of AppBar */}\r\n \r\n {/* @Sidebar-Left MenuIcon */}\r\n {sidebar && (\r\n \r\n \r\n \r\n \r\n {/*AppToolBar (Secondary AppBar) */}\r\n {isAuthen && (\r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {/* @Sidebar-Left Drawer */}\r\n {sidebar && (\r\n \r\n \r\n \r\n \r\n {/* {JSON.stringify(matches)} */}\r\n {children}\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default React.memo(MasterLayout);\r\n","import axios from 'axios';\r\nimport join from 'url-join';\r\nimport {\r\n server,\r\n sysURL,\r\n NOT_CONNECT_NETWORK,\r\n NETWORK_CONNECTION_MESSAGE,\r\n} from './../constants';\r\nimport { JSON2HTML } from './../utils/utils';\r\n\r\nimport { useHistory } from 'react-router-dom';\r\nimport { useDialog } from './../contexts/DialogContext';\r\n\r\n/**==============================================================================================================\r\n * Axios & built-in accessToken for request-api\r\n * ==============================================================================================================\r\n */\r\nconst axioses = axios.create();\r\n// Local constant\r\n\r\nconst ATHEN_FALSE_TITLE = 'New data authorization has error occurred!';\r\nconst ATHEN_EXCEPTION = 'Auth Exception';\r\n\r\nconst isAbsoluteURLRegex = /^(?:\\w+:)\\/\\//;\r\n\r\n// FIXME: Axios cancelled requests can't be restarted (https://github.com/axios/axios/issues/1330)\r\n// TODO : https://stackoverflow.com/questions/53475045/axios-cancelled-requests-cant-be-restarted\r\n// FIXED: Axios cancelled requests can't be restarted (https://github.com/axios/axios#cancellation)\r\n// OTHER INFO: https://github.com/axios/axios/issues/1330\r\n\r\n// Axioses propoties that assigned by axios\r\naxioses.CancelToken = axios.CancelToken;\r\naxioses.isCancel = axios.isCancel;\r\naxioses.Cancel = axios.Cancel;\r\n\r\n// How to axios cancellation https://github.com/axios/axios#cancellation\r\nlet axios_cancelToken = null;\r\nlet axios_cancelTokenAgent;\r\nlet axios_isCancelTokenNew = true;\r\n\r\naxioses.interceptors.request.use(\r\n async (config) => {\r\n // Do something before request is sent (axios ofc)\r\n\r\n // Create axios_cancelToken\r\n if (axios_isCancelTokenNew) {\r\n axios_cancelToken = new axioses.CancelToken(function executor(c) {\r\n axios_cancelTokenAgent = c;\r\n });\r\n axios_isCancelTokenNew = false;\r\n }\r\n\r\n // Check url path if it is relative path then join after api-domian (urlApi)\r\n if (!isAbsoluteURLRegex.test(config.url)) {\r\n config.url = join(sysURL.api, config.url);\r\n }\r\n const accessToken = localStorage.getItem(server.ACCESS_TOKEN_KEY);\r\n config.headers = {\r\n Authorization: accessToken,\r\n };\r\n config.cancelToken = axios_cancelToken;\r\n return config;\r\n },\r\n (error) => {\r\n // Do something with request error\r\n return Promise.reject(error);\r\n }\r\n);\r\n\r\n// Add a response interceptor (axios ofc(officeial))\r\naxioses.interceptors.response.use(\r\n (response) => {\r\n // Any status code that lie within the range of 2xx cause this function to trigger (axios ofc)\r\n // Do something with response data\r\n if (response.data.status === false) {\r\n return Promise.reject({\r\n response,\r\n message: response.data.message,\r\n name: 'Error',\r\n });\r\n }\r\n return response;\r\n },\r\n async (error) => {\r\n // Any status codes that falls outside the range of 2xx cause this function to trigger (axios ofc)\r\n // Do something with response error'\r\n\r\n if (axioses.isCancel(error)) {\r\n console.error(`Request canceled because, ${error}`);\r\n return Promise.reject(error);\r\n } else if (!error.response) {\r\n return Promise.reject({\r\n message: `${NETWORK_CONNECTION_MESSAGE} ${error.message}`,\r\n name: NOT_CONNECT_NETWORK,\r\n });\r\n }\r\n\r\n if (error.response.status === 401) {\r\n try {\r\n // let n = null;\r\n // let s = n.toString();\r\n // Prease use pure axios for urlAccessToken for fiexed error from header authorization of axios\r\n let respAccessToken = await axios.get(sysURL.accessToken);\r\n let { data } = respAccessToken;\r\n if (data.status === true) {\r\n // jsSnackbar(\"Data authorized\");\r\n localStorage.setItem(server.ACCESS_TOKEN_KEY, data.tokenAccess);\r\n return axioses.request(error.config);\r\n } else {\r\n throw new Error(`${ATHEN_FALSE_TITLE}, Message: ${data.message}`);\r\n }\r\n } catch (catchError) {\r\n return Promise.reject({\r\n message: catchError.message,\r\n name: ATHEN_EXCEPTION,\r\n });\r\n }\r\n }\r\n return Promise.reject(error);\r\n }\r\n);\r\n\r\n/**\r\n * Hook handler handleClientError\r\n * Dependencies: useDialog, useHistory\r\n * @return handleClientError(error, infoPath), Show dialog error messages or redirect to app-info page\r\n */\r\nexport function useHandleClientError() {\r\n const [openDialog /*, closeDialog*/] = useDialog();\r\n const history = useHistory();\r\n /**\r\n *\r\n * @param {object} error, object error messages\r\n * @param {string} infoPath, route path to display messages-json-string\r\n */\r\n const handleClientError = (error = {}, infoPath = '/info') => {\r\n // Assign error2JSON with JSON error messages from (fnc) error.toJSON (toJSON is the feuture from axios )\r\n // (if (fnc) toJSON does not exist in error, let create JSON with error messages and prop.name = \"Error from Exception\")\r\n let error2JSON = {\r\n message: error.message,\r\n name: error.name,\r\n 'process name': (() => {\r\n try {\r\n if (error.response.data.process) {\r\n return error.response.data.process;\r\n }\r\n } catch (error) {}\r\n return 'N/A';\r\n })(),\r\n };\r\n\r\n if (!axioses.isCancel(error)) {\r\n // Cancel another request by axios_cancelTokenAgent\r\n if (typeof axios_cancelTokenAgent === 'function') {\r\n axios_cancelTokenAgent(`${error2JSON.message}`);\r\n }\r\n\r\n // localStorage.setItem(server.INFO_KEY, JSON.stringify(error2JSON));\r\n\r\n (() => {\r\n if (error2JSON.name === ATHEN_EXCEPTION) {\r\n console.error(ATHEN_EXCEPTION, error2JSON.message);\r\n } else {\r\n return openDialog({\r\n id: 'clientErrorDialog',\r\n title: 'Error Occured',\r\n summary: error2JSON,\r\n detail: error.response\r\n ? error.response.data\r\n ? error.response.data\r\n : null\r\n : null,\r\n onClose: () => {\r\n axios_isCancelTokenNew = true;\r\n // // Check each status (code) when you set to redirect page after click close\r\n // if (error.hasOwnProperty('response')) {\r\n // let status = error.response.status;\r\n // switch (status) {\r\n // // cose 401 skiped because auto get new token_access when expire\r\n // case 401:\r\n // // history.push(infoPath);\r\n // break;\r\n // default:\r\n // history.push(infoPath);\r\n // }\r\n // // error from cancel or net work error\r\n // } else {\r\n // history.push(infoPath);\r\n // }\r\n },\r\n });\r\n }\r\n })();\r\n }\r\n };\r\n\r\n return handleClientError;\r\n}\r\n/**\r\n * export httpClient for external use request-api\r\n */\r\nexport const httpClient = axioses;\r\n\r\n/** ===============================================================================================================\r\n * Test mutableValue\r\n * ================================================================================================================\r\n */\r\nlet mutable_count = 1;\r\nexport const mutableCount = {\r\n run() {\r\n console.warn('Testing run mutableCount before ', { mutable_count });\r\n mutable_count++;\r\n },\r\n log() {\r\n console.warn('Testing run mutableCount after ', { mutable_count });\r\n },\r\n};\r\n","import { sysURL, server } from \"../constants\";\r\nimport axios from 'axios';\r\n\r\n\r\n/**\r\n * getInfoNoVersion(), call info after login\r\n * Method: get\r\n * @returns \r\n */\r\nexport function getInfoNoVersion() {\r\n return axios\r\n .get(`${sysURL.api}/info`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}","import { server } from '../constants';\r\nimport { httpClient } from '../utils/HttpClient';\r\n/**\r\n * user data\r\n * Create: 26/03/2021\r\n */\r\n\r\n/**\r\n * updateUser(), update hri-personal-data to user data\r\n * Method: POST\r\n * @returns\r\n */\r\nexport function updateUser() {\r\n return httpClient\r\n .post(`${server.USER_URL}/updateUser`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * userProfile(), get user profile and user permission\r\n * Method: GET\r\n * @returns\r\n */\r\nexport function userProfile() {\r\n return httpClient\r\n .get(`${server.USER_URL}/userProfile`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * mockGetList() get email of all user in the system (Adapt api searching Name or Email)\r\n * Version: Mock\r\n * @returns\r\n */\r\nexport function mockSearchEmails(email = '') {\r\n return httpClient\r\n .get(`${server.USER_URL}/searchName`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","import { server } from '../constants';\r\nimport { httpClient } from '../utils/HttpClient';\r\n\r\n/*________________________\r\n * Permission Level Data \r\n *========================\r\n */\r\n\r\n/**\r\n * getListAllSetting()\r\n * @param {object} params\r\n * @param {object} params.lang Default: TH\r\n * @returns\r\n * Detail: Get all permission level except level 0 for setting page\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Master/PermissionLevel\r\n */\r\nexport function getListAllSetting(params = { lang: 'TH' }) {\r\n return httpClient\r\n .get(`${server.PERMISSION_LEVEL_URL}/getListAllSetting/${params.lang}`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n\r\n/*________________________\r\n * Permission Level Data form Admin\r\n *========================\r\n */\r\n\r\n/**\r\n * getListAllWithUserRight()\r\n * @param {object} params\r\n * @param {object} params.lang Default: TH\r\n * @returns\r\n * Detail: Get all permission level except level 0 for setting page\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Master/PermissionLevel\r\n */\r\n export function getListAllWithUserRight(params = { lang: 'TH' }) {\r\n return httpClient\r\n .get(`${server.PERMISSION_LEVEL_URL}/getListAllWithUserRight/${params.lang}`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","import { server } from '../constants';\r\nimport { httpClient } from './../utils/HttpClient';\r\n\r\n// Category data model\r\n\r\n/**\r\n * getListAll(), getListAll category for reporter\r\n * Method: GET\r\n * @returns\r\n */\r\nexport function getListAll(params = { lang: 'TH' }) {\r\n return httpClient\r\n .get(`${server.CATEGORY_URL}/getListAll/${params.lang}`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * getList(), getList category by permission (for staff)\r\n * @param {object} params\r\n * @param {string} params.package base64 of props {lang, dateStart, dateEnd, category_id }\r\n * @returns\r\n * API Doc: muit-iDev/pdpa-im-api/-/wikis/Master/Category#getlist\r\n */\r\nexport function getList(params) {\r\n return httpClient\r\n .get(`${server.CATEGORY_URL}/getList`, { params })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","import { server } from '../constants';\r\nimport { httpClient } from '../utils/HttpClient';\r\n\r\n/*________________________\r\n * Permission Group Data\r\n *========================\r\n */\r\n\r\n/**\r\n * getListByCategoryLevel()\r\n * @param {object} props.params\r\n * @param {object} props.params.package { category_id, level }\r\n * @returns\r\n * Detail: get List By Category and Level, *require category_id and level\r\n * Method: GET\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Master/PermissionLevel\r\n */\r\nexport function getListByCategoryLevel(params) {\r\n return httpClient\r\n .get(`${server.PERMISSION_GROUP_URL}/getListByCategoryLevel`, {\r\n params,\r\n })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","import { server } from '../constants';\r\nimport { httpClient } from '../utils/HttpClient';\r\n\r\n/*______________\r\n * Label Data \r\n *==============\r\n */\r\n\r\n/**\r\n * getListAll()\r\n * @returns\r\n * Detail: get list all of label data\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Master/Label\r\n */\r\nexport function getListAll() {\r\n return httpClient\r\n .get(`${server.LABEL_URL}/getListAll`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}","import { server } from '../constants';\r\nimport { httpClient } from './../utils/HttpClient';\r\n\r\n// Dimension data model\r\n\r\n/**\r\n * getListAll(), get list all of dimension\r\n * Method: GET\r\n * @returns\r\n */\r\nexport function getListAll(params = { lang: 'TH' }) {\r\n return httpClient\r\n .get(`${server.ISSUE_URL}/getDimensionList/${params.lang}`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","import { server } from '../constants';\r\nimport { httpClient } from '../utils/HttpClient';\r\n\r\n/*______________________\r\n * ProcessStatus Data \r\n *=====================\r\n */\r\n\r\n/**\r\n * getList()\r\n * @param {object} params\r\n * @param {object} params.package base64 of props {lang, issue_id}\r\n * @returns\r\n * Detail: get process-status list by condition\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Master/ProcessStatus#getlist\r\n */\r\nexport function getList(params) {\r\n return httpClient\r\n .get(`${server.PROCESS_STATUS_URL}/getList`, { params })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * getListAll()\r\n * @param {object} params\r\n * @param {object} params.package base64 of props {lang}\r\n * @returns\r\n * Detail: get all process-status all\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Master/ProcessStatus#getlistAll\r\n */\r\nexport function getListAll(params) {\r\n return httpClient\r\n .get(`${server.PROCESS_STATUS_URL}/getListAll`, { params })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","import { server } from '../constants';\r\nimport { httpClient } from '../utils/HttpClient';\r\n\r\n/*________________________\r\n * IssueCommentType Data \r\n *========================\r\n */\r\n\r\n/**\r\n * getListAll()\r\n * @param {object} params\r\n * @param {string} params.lang Default: TH\r\n * @returns\r\n * Detail: Get list all of comment type\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Master/CommentType\r\n */\r\nexport function getListAll(params = { lang: 'EN' }) {\r\n return httpClient\r\n .get(`${server.ISSUE_URL}/getCommentTypeList/${params.lang}`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","import { server } from '../constants';\r\nimport { httpClient } from '../utils/HttpClient';\r\n\r\n/*______________\r\n * File Data\r\n *==============\r\n */\r\n\r\n/**\r\n * save()\r\n *\r\n * Method: POST\r\n * Detail: insert issue file (image)\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/IssueFile\r\n */\r\nexport function save(data) {\r\n return httpClient\r\n .post(`${server.FILE_URL}/save`, data)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * thumbnail()\r\n * @param {object} props\r\n * @param {string} props.issue_id\r\n * @param {string} props.file_id\r\n * Method: get\r\n * Detail: get thumbnail file (image)\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/IssueFile#get-thumbnail-file\r\n */\r\nexport function thumbnail({ issue_id, file_id }) {\r\n return httpClient\r\n .get(`${server.FILE_URL}/thumbnail/${issue_id}/${file_id}`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * thumbnails()\r\n * @param {object} props\r\n * @param {string} props.issue_id\r\n * @param {array} props.files array of file_id\r\n * Method: get\r\n * Detail: get thumbnail file (image)\r\n * NOTE: extend from thumbnail()\r\n */\r\nexport async function thumbnails({ issue_id, files = [] }) {\r\n let contents = [];\r\n if (files.length) {\r\n for (let file_id of files) {\r\n const content = await thumbnail({ issue_id, file_id }).then(\r\n (data) => data\r\n );\r\n contents.push(content);\r\n }\r\n }\r\n return contents;\r\n}\r\n\r\n/**\r\n * thumbnail()\r\n * @param {object} props\r\n * @param {string} props.issue_id\r\n * @param {string} props.file_id\r\n * Method: get\r\n * Detail: get origin(al) file (image)\r\n * API Doc: /muit-iDev//pdpa-im-api/-/wikis/Transaction/IssueFile#get-origin-file\r\n */\r\nexport async function original({ issue_id, file_id }) {\r\n return httpClient\r\n .get(`${server.FILE_URL}/origin/${issue_id}/${file_id}`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","import { server } from './../constants';\r\nimport { httpClient } from './../utils/HttpClient';\r\nimport { base64 } from './../utils/utils';\r\nimport * as file from './../data/file';\r\n\r\n/*______________\r\n * Issue Data\r\n *==============\r\n */\r\n\r\n/**\r\n * getCommentTypeList()\r\n * Detail: get status for access issue\r\n * @returns bool accessStatus\r\n */\r\nexport function getCommentTypeList(params) {\r\n return httpClient\r\n .get(`${server.ISSUE_URL}/getCommentTypeList`, { params })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * accessible()\r\n * Detail: get status for access issue\r\n * @returns bool accessStatus\r\n */\r\nexport function accessible(params) {\r\n return httpClient\r\n .get(`${server.ISSUE_URL}/access`, { params })\r\n .then((result) => {\r\n return result.data.content.accessStatus;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * createId()\r\n *\r\n * Detail: create new issue id to get id and short id\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/Issue#create-issue-id\r\n */\r\nexport function createId() {\r\n return httpClient\r\n .get(`${server.ISSUE_URL}/createId`)\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n\r\n/**\r\n * updateProcessStatus()\r\n * @param {object} props\r\n * @param {object} props.issue_id\r\n * @param {string} props.status_id\r\n * Method: PUT\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/Issue#set-issue-process-status\r\n * @returns\r\n */\r\nexport function updateProcessStatus({ issue_id, status_id }) {\r\n return httpClient\r\n .put(`${server.ISSUE_URL}/setProcessStatus`, { issue_id, status_id })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * addIssue() create issue of user lv0\r\n * @param {object} props\r\n * @param {object} props.issue issue data object\r\n * @param {string} props.logMode default: issueCreate\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/Issue#insert-issue\r\n */\r\nexport function addIssue({ issue = {}, logMode = 'issueCreate' }) {\r\n return httpClient\r\n .post(`${server.ISSUE_URL}/save`, { issue, logMode })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * updateIssue() update issue\r\n * @param {object} props\r\n * @param {object} props.issue issue object\r\n * @param {array} props.labels labels object, default: undefined\r\n * @param {array} props.dimensions dimensions object, default: undefined\r\n * @param {string} props.logMode default: issueEdit\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/Issue#insert-issue\r\n */\r\nexport function updateIssue({\r\n issue = {},\r\n labels = undefined,\r\n dimensions = undefined,\r\n logMode = 'issueEdit',\r\n}) {\r\n return httpClient\r\n .put(`${server.ISSUE_URL}/save`, { issue, labels, dimensions, logMode })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * forwardIssue() forward issue to new category / level / group\r\n * @param {*} props\r\n * @param {string} issue_id\r\n * @param {string} category_id,\r\n * @param {number} level,\r\n * @param {string} permissionGroupFilter = null,\r\n * @return\r\n */\r\nexport function forwardIssue({\r\n issue_id,\r\n category_id,\r\n level,\r\n permissionGroupFilter = null,\r\n}) {\r\n return httpClient\r\n .put(`${server.ISSUE_URL}/forward`, {\r\n issue_id,\r\n category_id,\r\n level,\r\n permissionGroupFilter,\r\n })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n *\r\n * @param {object} props\r\n * @param {string:GUID} props.issue_id\r\n * @param {number} props.vote 0 Unsatisfied | 1 Satisfied\r\n * @returns\r\n */\r\nexport function setVote({ issue_id = null, vote = null }) {\r\n if (issue_id && vote) {\r\n return httpClient\r\n .put(`${server.ISSUE_URL}/setVote`, {\r\n issue_id,\r\n vote,\r\n })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n } else {\r\n return () => {\r\n throw 'setVote issue id or vote id null';\r\n };\r\n }\r\n}\r\n\r\n/**\r\n * getList() get list issue\r\n * @param {object} params\r\n * @param {string} params.package base64 of props {lang, dateStart, dateEnd, category_id }\r\n * @return\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/Issue#getlist\r\n */\r\nexport function getList(params) {\r\n return httpClient\r\n .get(`${server.ISSUE_URL}/getList`, { params })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * getDetailCore() add options parameter,\r\n * @param {object} params\r\n * @param {object} params.package base64 of props {lang, id}\r\n * @param {object} options\r\n * @param {object} options.includedThumbnail default: true\r\n * @param {object} options.includedViewStatus default: false (included readOnlyStatus)\r\n * @return\r\n * Detail: get detail issue\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/Issue#getdetail\r\n */\r\n\r\nasync function getDetailCore(\r\n params,\r\n options /*legacy { includedThumbnail = true }*/\r\n) {\r\n options = options || {};\r\n options.includedThumbnail = options.includedThumbnail || true;\r\n options.includedViewStatus = options.includedViewStatus || false;\r\n try {\r\n let respIssue = await httpClient.get(`${server.ISSUE_URL}/getDetail`, {\r\n params,\r\n });\r\n let issue = respIssue.data.content;\r\n let issue_id = issue.issues.id;\r\n\r\n // include thumbnail\r\n if (options.includedThumbnail) {\r\n let files = issue.issues.issueFiles\r\n ? issue.issues.issueFiles.split(',')\r\n : [];\r\n let thumbnails = await file.thumbnails({ issue_id, files });\r\n issue.issues.thumbnails = thumbnails;\r\n }\r\n\r\n // extraForStaff if get detail in mode staff we shall add veiwStatus automatic\r\n if (options.includedViewStatus) {\r\n let lang = 'TH';\r\n let dateStart = issue.issues.createDate.substr(0, 10);\r\n let dateEnd = dateStart;\r\n let category_id = issue.issues.category_id;\r\n let lists = await getList({\r\n package: base64.encodeObj({\r\n lang,\r\n mode: server.REQ_PARAM_MODE_STAFF,\r\n dateStart,\r\n dateEnd,\r\n category_id,\r\n }),\r\n });\r\n\r\n let thisIssueFromList = lists.find(\r\n (list) => list.issues.id === issue.issues.id\r\n );\r\n if (thisIssueFromList) {\r\n issue.viewStatus = thisIssueFromList.viewStatus;\r\n issue.readOnlyStatus = thisIssueFromList.readOnlyStatus;\r\n }\r\n }\r\n\r\n return issue;\r\n } catch (error) {\r\n throw error;\r\n }\r\n}\r\n\r\n/**\r\n * getDetail() v2 add options parameter,\r\n * @param {object} params\r\n * @param {object} params.package base64 of props {lang, id}\r\n * @param {object} options\r\n * @param {object} options.includedThumbnail default: true\r\n * @param {object} options.includedViewStatus default: false\r\n * @return\r\n * Detail: get detail issue\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/Issue#getdetail\r\n */\r\nexport function getDetail(params, options) {\r\n return getDetailCore(params, options)\r\n .then((issue) => {\r\n return issue;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","import { server } from '../constants';\r\nimport { httpClient } from '../utils/HttpClient';\r\nimport * as file from './../data/file';\r\n\r\n/*_____________________\r\n * IssueComment Data \r\n *=====================\r\n */\r\n\r\n/**\r\n * addIssueComment() create issue comment with add file is option\r\n * @param {object} props\r\n * @param {object} props.issue_id issue-id\r\n * @param {object} props.comment comment object\r\n * @param {string} props.logMode default: issueCommentCreate\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/Issue#insert-comment\r\n */\r\nexport function addIssueComment({\r\n issue_id,\r\n comment,\r\n logMode = 'issueCommentCreate',\r\n}) {\r\n return httpClient\r\n .post(`${server.ISSUE_URL}/saveComment`, {\r\n issue: {\r\n id: issue_id,\r\n },\r\n comment,\r\n logMode,\r\n })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * updateIssueComment() update issue comment with add file is option by comment id\r\n * @param {object} props\r\n * @param {object} props.issue_id issue-id\r\n * @param {object} props.comment comment data object\r\n * @param {string} props.logMode default: issueCommentEdit\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/Issue#insert-comment\r\n */\r\nexport function updateIssueComment({\r\n issue_id,\r\n comment = {},\r\n logMode = 'issueCommentEdit',\r\n}) {\r\n return httpClient\r\n .put(`${server.ISSUE_URL}/saveComment`, {\r\n issue: {\r\n id: issue_id,\r\n },\r\n comment,\r\n logMode,\r\n })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n// /**\r\n// * getList() get list issueComment v1\r\n// * @param {object} params\r\n// * @param {object} params.package base64 of props {lang, issue_id, orderByAcs = true }\r\n// * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/IssueComment\r\n// * @returns\r\n// */\r\n// export function getList(params) {\r\n// return httpClient\r\n// .get(`${server.ISSUE_COMMEMNT_URL}/getList`, { params })\r\n// .then((result) => {\r\n// console.log('comment, ', result);\r\n// return result.data.content;\r\n// })\r\n// .catch((error) => {\r\n// throw error;\r\n// });\r\n// }\r\n\r\n/**\r\n * getListCore() get list issueComment\r\n * @param {object} params\r\n * @param {object} params.package base64 of props {lang, issue_id, orderByAcs = true }\r\n * @param {object} options\r\n * @param {object} options.includedThumbnail default: true\r\n * @returns\r\n */\r\nasync function getListCore(params, { includedThumbnail = true }) {\r\n try {\r\n let respComms = await httpClient.get(`${server.ISSUE_COMMEMNT_URL}/getList`, {\r\n params,\r\n });\r\n let comments = respComms.data.content;\r\n let customComments = [];\r\n if (includedThumbnail) {\r\n for (let comment of comments) {\r\n let issue_id = comment.IssueComments.issue_id;\r\n let files = comment.IssueComments.commentFiles\r\n ? comment.IssueComments.commentFiles.split(',')\r\n : [];\r\n let thumbnails = await file.thumbnails({ issue_id, files });\r\n comment.IssueComments.thumbnails = thumbnails;\r\n customComments.push(comment);\r\n }\r\n } else {\r\n customComments = comments;\r\n }\r\n return customComments;\r\n } catch (error) {\r\n throw error;\r\n }\r\n}\r\n\r\n/**\r\n * getList() get list issueComment v2\r\n * @param {object} params\r\n * @param {object} params.package base64 of props {lang, issue_id, orderByAcs = true }\r\n * @param {object} options\r\n * @param {object} options.includedThumbnail default: true\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/IssueComment\r\n * @returns\r\n */\r\nexport function getList(params, options = { includedThumbnail: true }) {\r\n return getListCore(params, options)\r\n .then((comments) => {\r\n return comments;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","import { server } from '../constants';\r\nimport { httpClient } from './../utils/HttpClient';\r\n\r\n// lssue-log data model\r\n\r\n/**\r\n * getList() get list issueLog\r\n * @param {object} params\r\n * @param {object} params.package base64 of props {lang, issue_id, mode, orderAsc }\r\n * @return\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/IssueLog\r\n */\r\nexport function getList(params) {\r\n return httpClient\r\n .get(`${server.ISSUE_LOG_URL}/getList`, { params })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","import { server } from '../constants';\r\nimport { httpClient } from '../utils/HttpClient';\r\n\r\n/*________________\r\n * Observer Data\r\n *================\r\n */\r\n\r\n/**\r\n * addObserver()\r\n * @returns\r\n * Detail: add new observer\r\n * Method: POST\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/Observer#remove-observer\r\n */\r\nexport function addObserver({ issue_id = null, user_id = null }) {\r\n return httpClient\r\n .post(`${server.OBSERVER_URL}/add`, { issue_id, user_id })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n\r\n/**\r\n * removeObserver()\r\n * @returns\r\n * Detail: remove observer\r\n * Method: DELETE\r\n * API Doc: /muit-iDev/pdpa-im-api/-/wikis/Transaction/Observer#remove-observer\r\n * axios deleting body: https://stackoverflow.com/questions/51069552/axios-delete-request-with-body-and-headers\r\n */\r\nexport function removeObserver(data = { issue_id: null, user_id: null }) {\r\n return httpClient\r\n .delete(`${server.OBSERVER_URL}/remove`, { data })\r\n .then((result) => {\r\n return result.data.content;\r\n })\r\n .catch((error) => {\r\n throw error;\r\n });\r\n}\r\n","/**\r\n * PrepareUserInfomationPage\r\n * ========================================\r\n * Mo=dify\r\n * ========================================\r\n * #MDF20230214\r\n * issue:\r\n * DPO (Fac of Engineeing director) notice after logged-in then not redirect to the system!\r\n * check init menu of back office perm.. error!\r\n * initialMenuBackOfUser is undifined (initialMenuBackOfUser.path error)\r\n * couse of because permission.level.includes(menu.permissionLevel[0]) not found\r\n * - permission.level = [0, 3]\r\n * - menu.permissionLevel = [1,2,3]\r\n */\r\nimport React, { useState, useEffect } from 'react';\r\n\r\nimport clsx from 'clsx';\r\n\r\n// import axios\r\nimport axios from 'axios';\r\n\r\n// import material-ui core/style\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport { red, green } from '@material-ui/core/colors';\r\nimport Box from '@material-ui/core/Box';\r\nimport Fab from '@material-ui/core/Fab';\r\nimport CheckIcon from '@material-ui/icons/Check';\r\nimport PersonOutlineSharpIcon from '@material-ui/icons/PersonOutlineSharp';\r\n\r\n// import constanst\r\nimport { server, sysURL } from '../../../constants';\r\n\r\n// import routers constants\r\nimport {\r\n routers,\r\n listMenuBackOf,\r\n listPermissionLevelBackOf,\r\n} from '../../../routers';\r\n\r\n// import uitils/utils\r\nimport { userProfiler, mergeArray, logger } from '../../../utils/utils';\r\nimport { useHandleClientError } from '../../../utils/HttpClient';\r\n\r\n// import info, users data\r\nimport { info, users } from '../../../data';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: '100%',\r\n },\r\n item: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n wrapper: {\r\n margin: theme.spacing(10, 10, 5, 10),\r\n position: 'relative',\r\n },\r\n buttonSuccess: {\r\n backgroundColor: green[500],\r\n '&:hover': {\r\n backgroundColor: green[700],\r\n },\r\n },\r\n buttonFail: {\r\n backgroundColor: red[500],\r\n '&:hover': {\r\n backgroundColor: red[700],\r\n },\r\n },\r\n fabProgress: {\r\n color: green[500],\r\n position: 'absolute',\r\n top: -8,\r\n left: -8,\r\n zIndex: 1,\r\n },\r\n buttonProgress: {\r\n color: green[500],\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n marginTop: -12,\r\n marginLeft: -12,\r\n },\r\n}));\r\nconst PREPAREING = 'preparing';\r\nconst PREPAREING_SUCCESS = 'preparing success';\r\nconst PREPAREING_FAIL = 'preparing fail';\r\n// UpdateUserInformationPage() (Component)\r\n// Path:\r\nconst PrepareUserInformationPage = ({ history }) => {\r\n const classes = useStyles();\r\n const handleClientError = useHandleClientError();\r\n const UDUSER_CONTENT_ID = 'update-user-content';\r\n const [preparing, setPreparing] = useState(false);\r\n const [success, setSuccess] = useState(null);\r\n\r\n useEffect(() => {\r\n if (!preparing) {\r\n setSuccess(null);\r\n setPreparing(true);\r\n }\r\n }, []);\r\n\r\n let status = null;\r\n if (preparing) {\r\n status = PREPAREING;\r\n } else {\r\n if (success) {\r\n status = PREPAREING_SUCCESS;\r\n }\r\n if (!success) {\r\n status = PREPAREING_FAIL;\r\n }\r\n }\r\n const buttonClassname = clsx({\r\n [classes.buttonSuccess]: success,\r\n });\r\n async function preparer() {\r\n try {\r\n // call api/info for change databaseContext connection from dev to current server\r\n await info.getInfoNoVersion();\r\n\r\n let respAccessToken = await axios.get(sysURL.accessToken);\r\n let { data } = respAccessToken;\r\n\r\n if (data.status === true) {\r\n // jsSnackbar(\"Data authorized\");\r\n\r\n // Set tokenAccess to localStorage\r\n localStorage.setItem(server.ACCESS_TOKEN_KEY, data.tokenAccess);\r\n\r\n // Updatep hri-personal data to user model.\r\n await users.updateUser();\r\n\r\n // Get user profile (consis of user, permission) and set to localStorage\r\n let { user, permission } = await users.userProfile();\r\n\r\n // ** Fixed full permission (Please remove before up to production), fo Test admin add [8, 9] to mergeArray parameter\r\n // permission.level = mergeArray([permission.level, []]);\r\n\r\n userProfiler.setToLocal({ user, permission });\r\n\r\n // State - success (& preparing flase)\r\n setSuccess(true);\r\n setPreparing(false);\r\n\r\n // Redirect to back/front office permission\r\n setTimeout(() => {\r\n // Check user has back office permission or not.\r\n if (\r\n permission.level.some(\r\n (elem) => listPermissionLevelBackOf.indexOf(elem) > -1\r\n )\r\n ) {\r\n // Condition = user has back office perm.\r\n\r\n /**\r\n * ======================================\r\n * check init menu of back office perm..\r\n * ======================================\r\n */\r\n\r\n // < Commented code bellow is the issue of #MDF20230214 >\r\n\r\n // let initialMenuBackOfUser = listMenuBackOf.find((menu) =>\r\n // permission.level.includes(menu.permissionLevel[0])\r\n // );\r\n\r\n // #MDF20230214 (Fix issue DPO notice after logged-in then not redirect to the system!)\r\n let initialMenuBackOfUser = listMenuBackOf.find((menuItem) =>\r\n permission.level.some(\r\n (levelItem) => menuItem.permissionLevel.indexOf(levelItem) > -1\r\n )\r\n );\r\n history.push(initialMenuBackOfUser.path);\r\n\r\n // Condition = user has only front office permission.\r\n } else {\r\n history.push(routers.frontOf.main.path);\r\n }\r\n }, 2000);\r\n } else {\r\n throw data;\r\n }\r\n } catch (error) {\r\n // If error then set state - success fail (& preparing flase)\r\n setSuccess(false);\r\n setPreparing(false);\r\n\r\n // Open dialog notice error\r\n handleClientError(error);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n preparer();\r\n }, []);\r\n\r\n // console.log({preparing})\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {/* ตัวเลือก ... */}\r\n \r\n \r\n
\r\n \r\n \r\n {theme.direction === 'ltr' ? (\r\n \r\n
\r\n \r\n {/* Original \"persistant drawer rigth\" Chevron*Icon */}\r\n {/* \r\n {theme.direction === \"rtl\" ? (\r\n */}\r\n\r\n {/* Custom Chevron*Icon for \"clipped under the app bar\" */}\r\n {\r\n if (!openDrawerRight) {\r\n handleDrawerRightOpen();\r\n } else {\r\n handleDrawerRightClose();\r\n }\r\n }}\r\n >\r\n {!openDrawerRight &&
\r\n \r\n \r\n \r\n \r\n {status === PREPAREING &&
\r\n );\r\n};\r\n\r\nexport default PrepareUserInformationPage;\r\n","import React, { useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport {\r\n Container,\r\n Grid,\r\n Box,\r\n Card,\r\n CardContent,\r\n CardMedia,\r\n CardActions,\r\n Typography,\r\n Button,\r\n} from '@material-ui/core';\r\n\r\n// import { useSelector, useDispatch } from \"react-redux\";\r\nimport Divider from '@material-ui/core/Divider';\r\n\r\nimport { Link } from 'react-router-dom';\r\n\r\n// import constants & router constants\r\nimport {\r\n SYSTEM_NAME_FRONTOF,\r\n SYSTEM_NAME_FRONTOF_TH,\r\n sysURL,\r\n} from './../../../constants';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n minHeight: '30vh',\r\n [theme.breakpoints.up('xs')]: {\r\n width: '100%',\r\n maxWidth: '100%',\r\n },\r\n [theme.breakpoints.up('sm')]: {\r\n width: 420,\r\n maxWidth: 420,\r\n marginTop: 20,\r\n },\r\n marginLeft: 'auto',\r\n marginRight: 'auto',\r\n },\r\n media: {\r\n height: 120,\r\n display: 'flex',\r\n verticalAlign: 'middle',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n imageSize: {\r\n height: 80,\r\n /*marginRight: theme.spacing(2),*/\r\n },\r\n form: {\r\n width: '100%', // Fix IE 11 issue.\r\n marginTop: theme.spacing(1),\r\n },\r\n cardContent: {\r\n margin: theme.spacing(2),\r\n },\r\n submit: {\r\n margin: theme.spacing(2, 0, 1),\r\n },\r\n}));\r\n\r\nexport default (props) => {\r\n const classes = useStyles();\r\n // const dispatch = useDispatch();\r\n // const loginReducer = useSelector(({ loginReducer }) => loginReducer);\r\n\r\n return (\r\n \r\n {status != PREPAREING_FAIL && (\r\n \r\n {status === PREPAREING && (\r\n
\r\n โปรดรอสักครู่...
}\r\n {status === PREPAREING_SUCCESS && เข้าสู่ระบบ
}\r\n {status === PREPAREING_FAIL && (\r\n \r\n
\r\n )}\r\n \r\n \r\n เกิดข้อผิดพลาดในการเตรียมข้อมูลผู้ใช้งาน\r\n
\r\n\r\n กลับสู่ Login เพื่อ ลองใหม่อีกครั้ง\r\n
\r\n\r\n {SYSTEM_NAME_FRONTOF}\r\n
\r\n
\r\n การลงชื่อเข้าใช้ {SYSTEM_NAME_FRONTOF_TH}\r\n \r\n
\r\n เนื่องจากสถานะของเหตุละเมิดไม่มีอยู่ในรายการตัวเลือกสถานะนี้\r\n
{' '}\r\nกรุณาแจ้งผู้ดูแลระบบฯ
\r\n \r\n }\r\n >\r\nสถานะผิดพลาด
\r\n \r\n )}\r\n {selectedIndex > -1 && (\r\n\r\n \r\n {/* {names.map((name, index) => (\r\n \r\n \r\n {name}\r\n \r\n {index != names.length - 1 && / }\r\n \r\n ))} */}\r\n {names\r\n .map((name, index) => (\r\n \r\n {name}\r\n \r\n ))\r\n .reduce((prev, curr, index) => [\r\n prev,\r\n / ,\r\n curr,\r\n ])}\r\n \r\n
\r\n }\r\n size=\"small\"\r\n style={style}\r\n />\r\n \r\n \r\n เลือกป้ายกำกับ\r\n \r\n \r\n
\r\n \r\n
\r\n ค้นหา-เลือกติดป้ายกำกับ
\r\n \r\n {option.name.split('/').length > 1\r\n ? option.name.split('/')[1]\r\n : option.name}\r\n
\r\n \r\n \r\n // option[fieldOptions.id] === value[fieldOptions.id]\r\n // }\r\n getOptionLabel={(option) => option[fieldOptions.title]}\r\n onChange={handleChange}\r\n renderInput={(params) => (\r\n \r\n {loading ? (\r\n
\r\n );\r\n};\r\n\r\nexport default AutocompleteSelectOptions;\r\n","import * as input from './inputStyles';\r\nimport * as surface from './surfaceStyles';\r\nimport * as dataDisplay from './dataDisplayStyles';\r\nimport * as feedback from './feedbackStyles';\r\nconst globalStyles = (theme) => ({\r\n ...surface.appBarStyles(theme),\r\n ...input.formStyles(theme),\r\n ...input.buttonStyles(theme),\r\n ...dataDisplay.tableStyles(theme),\r\n ...feedback.backdropStyles(theme),\r\n});\r\n\r\nexport default globalStyles;\r\n","/**\r\n * Style of inputs component cat. consists of\r\n * - buttonStyle,\r\n * - buttonGroupStyle,\r\n * - checkboxStyle,\r\n * - and etc.\r\n */\r\nexport const formStyles = (theme) => ({\r\n formStyle: {\r\n margin: theme.spacing(1, 0),\r\n\r\n '& > *': {\r\n margin: theme.spacing(1, 0, 2, 0),\r\n },\r\n },\r\n fieldMargin: {\r\n margin: theme.spacing(1, 0, 2, 0),\r\n }\r\n});\r\n/**\r\n * buttonStyles\r\n * @param {*} theme\r\n */\r\nexport const buttonStyles = (theme) => {\r\n const buttonCoreStyle = {\r\n minWidth: '6.3vw',\r\n fontSize: '0.8rem',\r\n height: '30px',\r\n };\r\n return {\r\n btnLayoutStyle: {\r\n ...buttonCoreStyle,\r\n margin: theme.spacing(1),\r\n },\r\n btnLayoutLeftStyle: {\r\n ...buttonCoreStyle,\r\n margin: theme.spacing(0.3, 1.2, 0.3, 0),\r\n },\r\n btnLayoutRightStyle: {\r\n ...buttonCoreStyle,\r\n margin: theme.spacing(0.3, 0, 0.3, 1.2),\r\n },\r\n };\r\n};\r\n","/**\r\n * Style of data-display component cat. consists of\r\n * - avatarSyles\r\n * - badgeStyles,\r\n * - tableStyles,\r\n * - listStyles,\r\n * & etc.\r\n */\r\n\r\nexport const tableStyles = (theme) => ({\r\n materialTableStyle__root: {\r\n '& tbody tr:hover': {\r\n backgroundColor: 'WhiteSmoke',\r\n cursor: 'pointer',\r\n },\r\n },\r\n hiddenStyle: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nexport const chipStyles = (theme) => ({\r\n chipStatusSmallStyle: {\r\n margin: 0,\r\n padding: 0,\r\n borderRadius: 4,\r\n height: '18px',\r\n fontSize: '12px',\r\n },\r\n chipStatusMediumStyle: {\r\n margin: 0,\r\n padding: 0,\r\n borderRadius: 4,\r\n height: '25px',\r\n fontSize: '14px',\r\n },\r\n chipStatusLargeStyle: {\r\n margin: 0,\r\n padding: 0,\r\n borderRadius: 4,\r\n height: '32px',\r\n fontSize: '14px',\r\n },\r\n \r\n chipLabelSmallStyle: {\r\n margin: 0,\r\n padding: 0,\r\n borderRadius: 15,\r\n height: '18px',\r\n fontSize: '12px',\r\n },\r\n chipLabelMediumStyle: {\r\n margin: 0,\r\n padding: 0,\r\n borderRadius: 15,\r\n height: '25px',\r\n fontSize: '14px',\r\n },\r\n chipLabelLargeStyle: {\r\n margin: 0,\r\n padding: 0,\r\n borderRadius: 15,\r\n height: '32px',\r\n fontSize: '14px',\r\n },\r\n \r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { Tabs, Tab, Typography, Box } from '@material-ui/core';\r\n/**\r\n * TabPanel (component)\r\n * @param {*} props\r\n */\r\nfunction TabPanel(props) {\r\n const { children, value, index, ...other } = props;\r\n\r\n return (\r\n \r\n
\r\n ));\r\n\r\n useEffect(\r\n () => () => {\r\n // Make sure to revoke the data uris to avoid memory leaks\r\n // files.forEach((file) => URL.revokeObjectURL(file.preview));\r\n files.forEach((file) => URL.revokeObjectURL(file.thumbnail));\r\n },\r\n [files]\r\n );\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n ไฟล์ \r\n
\r\n \r\n ชื่อ: {file.name}\r\n
\r\n\r\n {file.size && (\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n ไฟล์ \r\n
\r\n \r\n ชื่อ: {file.name}\r\n
\r\n\r\n {file.size && (\r\n
{file.name}
\r\n \r\n \r\n \r\n {\r\n handleRemoveFiles(index);\r\n }}\r\n >\r\n
\r\n \r\n \r\n
\r\n\r\n {/* Original Dorpzoe preview element */}\r\n \r\n\r\n {/* ลากไฟล์มาวาง หรือคลิกเพื่อเลือก
\r\n\r\n
\r\n \r\n \r\n \r\n ส่งต่อเหตุละเมิด \r\n \r\n \r\n ส่งต่อเหตุละเมิดไปยังผู้ดำเนินการใน\r\n ประเภทข้อมูล/ระดับชั้น/ระบุกลุ่มผู้ดูแล-ดำเนินการที่ต้องการส่ง\r\n \r\n {\r\n setSubmitting(false);\r\n // Set null for select empty permissionGroupFilter\r\n values.issue.permissionGroupFilter = values.issue\r\n .permissionGroupFilter\r\n ? values.issue.permissionGroupFilter\r\n : null;\r\n // Get receiverType from recieverTypeByTabIndex and assign to values\r\n values.comment.receiverType =\r\n recieverTypeByTabIndex[antTabValue];\r\n // onSubmit\r\n (async () => {\r\n if (onSubmit) {\r\n !isLoading && setLIsoading(true);\r\n // values are {issue, comment}\r\n await onSubmit(values);\r\n setLIsoading(false);\r\n }\r\n })();\r\n }}\r\n innerRef={formikRef}\r\n >\r\n {(props) => showFormForwardIssue(props)}\r\n \r\n \r\n \r\n {isLoading && (\r\n \r\n \r\n )}\r\n \r\n formikRef.current.submitForm()}\r\n variant=\"contained\"\r\n color=\"primary\"\r\n disabled={isLoading}\r\n >\r\n ตกลง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n);\r\n\r\nexport { FormForwardIssueDialog };\r\n","//Original with ReactDom.render\r\nimport React, { useState, useMemo, useRef, Fragment } from 'react';\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Button from '@material-ui/core/Button';\r\nimport Box from '@material-ui/core/Box';\r\nimport Divider from '@material-ui/core/Divider';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport Skeleton from '@material-ui/lab/Skeleton';\r\nimport Chip from '@material-ui/core/Chip';\r\n\r\nimport InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';\r\nimport PeopleAltOutlinedIcon from '@material-ui/icons/PeopleAltOutlined';\r\nimport HelpOutlineIcon from '@material-ui/icons/HelpOutline';\r\n\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nimport { LFTooltip, HtmlTooltip } from './../Tooltips';\r\n\r\n// import React-Redux\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport * as issueActions from './../../../actions/issue.action';\r\nimport * as issueCommentActions from './../../../actions/issueComment.action';\r\nimport * as issueLogActions from '../../../actions/issueLog.action';\r\n\r\n// import react-router-dom\r\nimport { BrowserRouter as Router, Switch, Route } from 'react-router-dom';\r\nimport { routers } from './../../../routers';\r\n\r\nimport { useHandleClientError } from './../../../utils/HttpClient';\r\n\r\n// import useSnackbar\r\nimport { useSnackbar } from 'notistack';\r\n\r\n// import constants\r\nimport { server } from './../../../constants';\r\n\r\n// import style\r\nimport { chipStyles } from './../../../styles/globalStyles/dataDisplayStyles';\r\n\r\n// import utils\r\nimport {\r\n logger,\r\n base64,\r\n userProfiler,\r\n issueOperations,\r\n isManageIssue,\r\n} from './../../../utils/utils';\r\n\r\n// import another fragment\r\nimport ButtonGroupSelectOptions from '../ButtonGroupSelectOptions';\r\nimport { LabelPicker } from './../LabelPicker';\r\nimport AutocompleteSelectOptions from '../AutocompleteSelectOptions';\r\nimport { FormForwardIssueDialog } from './../../fragments/FormDialogs';\r\nimport { ChipLabels } from './../LabelPicker';\r\n\r\nimport {\r\n useProcessStatusGetList,\r\n useProcessStatusGetListAll,\r\n useDimensionGetListAll,\r\n} from './../../../hooks/useData';\r\n\r\nconst styles = (theme) => ({\r\n ...chipStyles(theme),\r\n root: {\r\n width: '100%',\r\n maxWidth: 360,\r\n backgroundColor: theme.palette.background.paper,\r\n },\r\n section1: {\r\n margin: theme.spacing(1.7),\r\n },\r\n section2: {\r\n margin: theme.spacing(2),\r\n },\r\n section3: {\r\n margin: theme.spacing(3, 1, 1),\r\n },\r\n});\r\n\r\nfunction issueTransition(data) {\r\n return data ? data : '';\r\n}\r\n\r\nconst SkeletonText = withStyles(styles)(({ classes }) => {\r\n return (\r\n \r\n
\r\n );\r\n});\r\n/**\r\n * AppSidebarRBackManageIssueActivity: App in Sidebar-Right of Back-Office\r\n */\r\nconst AppSidebarRBackManageIssueActivity = withStyles(styles)(\r\n ({ classes, match }) => {\r\n logger('AppSidebarRBack render');\r\n\r\n const issue_id = base64.decode(match.params.id);\r\n\r\n // Get user profile\r\n const upf = useMemo(() => userProfiler.getFromLocal(), []);\r\n\r\n // Hook handle-client-error (handle error in catch from promise reject)\r\n const handleClientError = useHandleClientError();\r\n\r\n // States\r\n const [openFormForward, setOpenFormForward] = useState(false);\r\n\r\n const btnSelectOptionsRef = useRef();\r\n\r\n // Hook states in reducer (by useSelector) from store\r\n const dispatch = useDispatch();\r\n const issueReducer = useSelector(({ issueReducer }) => issueReducer);\r\n\r\n // Check empty issueReducer.result assign to initail issue\r\n let issue = issueReducer.result || {};\r\n\r\n let isManageFeatures = issue.issues\r\n ? isManageIssue(\r\n issue.readOnlyStatus.readOnly,\r\n issue.issues.worker === upf.user.id,\r\n issue.issues.processStatus_id,\r\n {\r\n operation: issueOperations.features,\r\n }\r\n )\r\n : false;\r\n\r\n // Hook enqueueSnackbar from useSnackbar\r\n const { enqueueSnackbar } = useSnackbar();\r\n\r\n // package parameter for request getDetail-issue\r\n const memoGetIssueDetailPackage = useMemo(\r\n () => ({\r\n package: base64.encodeObj({\r\n lang: 'TH',\r\n id: issue_id,\r\n }),\r\n }),\r\n [issue_id]\r\n );\r\n\r\n // package parameter for request getList-comment\r\n const memoGetListActivityPackage = useMemo(\r\n () => ({\r\n package: base64.encodeObj({\r\n lang: 'TH',\r\n mode: server.REQ_PARAM_MODE_STAFF,\r\n issue_id,\r\n }),\r\n }),\r\n [issue_id]\r\n );\r\n\r\n const processStatusesBiz = useProcessStatusGetList(\r\n 'TH',\r\n issue_id,\r\n issue.issues && issue.issues.processStatus_id\r\n );\r\n\r\n const processStatuses = useProcessStatusGetListAll('TH');\r\n\r\n const dimensions = useDimensionGetListAll('TH');\r\n\r\n /*******************************\r\n * PROCESS-STATUS APP FUCNTION\r\n *******************************/\r\n\r\n /**\r\n * handleChangeProcessStatus()\r\n * @param {object} props\r\n * @param {string} props.processStatus_id\r\n * @param {string} props.processStatus_name\r\n */\r\n const handleChangeProcessStatus = async ({ id, name, description }) => {\r\n // Set processStatus_idRef temp\r\n let status_id = id;\r\n if (status_id === 40) {\r\n setOpenFormForward(true);\r\n } else {\r\n try {\r\n // // Dispatch mutiple action solution 1\r\n // await dispatch(async (dispatch) => {\r\n // // https://react-redux.js.org/api/batch\r\n // // should only result in one combined re-render, not two\r\n // await batch(async () => {\r\n // // Original dispatch action (of handleChangeProcessStatus)\r\n // await dispatch(\r\n // issueActions.updateProcessStatus(\r\n // { issue_id, status_id },\r\n // {\r\n // package: base64.encodeObj({\r\n // lang: 'TH',\r\n // id: issue_id,\r\n // }),\r\n // }\r\n // )\r\n // );\r\n // // Addition: dispatch action-updateIssueLog\r\n // await dispatch(\r\n // issueLogActions.updateIssueLog(memoGetListActivityPackage)\r\n // );\r\n // });\r\n // });\r\n\r\n // Dispatch mutiple action (updateIssue, updateIssueLog) solution 2\r\n // Ref: https://github.com/reduxjs/redux-thunk\r\n // Ref: https://twitter.com/dan_abramov/status/770914221638942720\r\n // FIXME: Maybe code dispatch mutiple action got it wrong\r\n // TODO: How to chain async actions https://github.com/reduxjs/redux/issues/1676\r\n await dispatch(\r\n issueActions.updateProcessStatus({\r\n issue_id,\r\n status_id,\r\n params: memoGetIssueDetailPackage,\r\n options: { includedViewStatus: true },\r\n })\r\n ).then(\r\n // Addition: dispatch action-updateIssueLog\r\n () =>\r\n dispatch(\r\n issueLogActions.updateIssueLog(memoGetListActivityPackage)\r\n ).catch((error) => {\r\n throw error;\r\n }),\r\n (error) => {\r\n throw error;\r\n }\r\n );\r\n\r\n // If change status to recieved the api update to processing auto.\r\n // Take processStatus_id after updated assign to processStatus_idRef (It chaange value props for re-reder ButtonGroupSelectOptions)\r\n // processStatus_idRef.current = issue.issues.processStatus_id;\r\n enqueueSnackbar(`เปลี่ยนสถานะแล้ว`, {\r\n variant: 'success',\r\n });\r\n } catch (error) {\r\n btnSelectOptionsRef.current.undoSelected();\r\n handleClientError(error);\r\n }\r\n }\r\n };\r\n\r\n /******************************\r\n * DIMESION APP FUCNTION\r\n ******************************/\r\n\r\n /**\r\n * handleDimensionChange()\r\n * @param {*} e event\r\n * @param {*} v value\r\n * @returns\r\n */\r\n async function handleDimensionChange(e, v) {\r\n let dimensions = [\r\n {\r\n dimension_id: v.dimension_id,\r\n dimensionLevel_id: v.dimensionLevel_id,\r\n },\r\n ];\r\n try {\r\n // Dispatch mutiple action (updateIssueDimension, updateIssueLog) with solution 2 (Look solution 1 in handleChangeProcessStatus)\r\n await dispatch(\r\n issueActions.updateIssueDimension({\r\n id: issue_id,\r\n dimensions,\r\n params: memoGetIssueDetailPackage,\r\n options: { includedViewStatus: true },\r\n })\r\n ).then(\r\n // Addition: dispatch action-updateIssueLog\r\n () =>\r\n dispatch(\r\n issueLogActions.updateIssueLog(memoGetListActivityPackage)\r\n ).catch((error) => {\r\n throw error;\r\n }),\r\n (error) => {\r\n throw error;\r\n }\r\n );\r\n\r\n enqueueSnackbar(\r\n `ปรับปรุง ${v.dimension_name} = ${v.dimensionLevel_name} แล้ว`,\r\n {\r\n variant: 'success',\r\n }\r\n );\r\n } catch (error) {\r\n handleClientError(error);\r\n }\r\n }\r\n\r\n /*****************************\r\n * FORWARD ISSUE APP FUCNTION\r\n ******************************/\r\n /**\r\n * handleSubmitForwardIssue\r\n * @param {object} props\r\n * @param {object} issueForwarding , issue object included forwarding data.\r\n * @param {object} comment , comment data\r\n */\r\n async function handleSubmitForwardIssue({ issue, comment }) {\r\n try {\r\n // Dispatch mutiple action (updateIssue, updateIssueLog) solution 2\r\n // Ref: https://github.com/reduxjs/redux-thunk\r\n // Ref: https://twitter.com/dan_abramov/status/770914221638942720\r\n\r\n await dispatch(\r\n issueActions.forwardIssue({\r\n data: issue,\r\n params: memoGetIssueDetailPackage,\r\n options: { includedViewStatus: true },\r\n })\r\n )\r\n .then(\r\n () =>\r\n dispatch(\r\n issueCommentActions.addIssueComment({\r\n issue_id,\r\n data: comment,\r\n params: memoGetListActivityPackage,\r\n })\r\n ),\r\n (error) => {\r\n throw error;\r\n }\r\n )\r\n .then(\r\n // Addition: dispatch action-updateIssueLog\r\n () =>\r\n dispatch(\r\n issueLogActions.updateIssueLog(memoGetListActivityPackage)\r\n ).catch((error) => {\r\n throw error;\r\n }),\r\n (error) => {\r\n throw error;\r\n }\r\n );\r\n setOpenFormForward(false);\r\n } catch (error) {\r\n handleClientError(error);\r\n }\r\n }\r\n\r\n /****************************\r\n * LABEL APP FUCNTION\r\n ***************************/\r\n\r\n async function handleBlurLabelPicker(\r\n pendingLabels,\r\n existingLabels,\r\n updateLabelPendingToSelectedState\r\n ) {\r\n // check if pendingLabels and existingLabels equal or not, if Equal then prosess api.\r\n if (JSON.stringify(pendingLabels) !== JSON.stringify(existingLabels)) {\r\n let labels = pendingLabels.map((label) => ({\r\n label_id: label.id,\r\n }));\r\n try {\r\n // Dispatch mutiple action (updateIssueDimension, updateIssueLog) with solution 2\r\n await dispatch(\r\n issueActions.updateIssueLabel({\r\n id: issue_id,\r\n labels,\r\n params: memoGetIssueDetailPackage,\r\n options: { includedViewStatus: true },\r\n })\r\n ).then(\r\n // Addition: dispatch action-updateIssueLog\r\n () =>\r\n dispatch(\r\n issueLogActions.updateIssueLog(memoGetListActivityPackage)\r\n ).catch((error) => {\r\n throw error;\r\n }),\r\n (error) => {\r\n throw error;\r\n }\r\n );\r\n enqueueSnackbar(`ปรับปรุงป้ายกำกับแล้ว`, {\r\n variant: 'success',\r\n });\r\n updateLabelPendingToSelectedState &&\r\n updateLabelPendingToSelectedState();\r\n } catch (error) {\r\n handleClientError(error);\r\n }\r\n } else {\r\n // enqueueSnackbar(`ไม่มีการติดป้ายกำกับเพิ่ม`, {\r\n // variant: 'warning',\r\n // });\r\n }\r\n }\r\n\r\n /****************************\r\n * OBSERVER APP FUCNTION\r\n ****************************/\r\n\r\n // Check this use is obsered issue.\r\n let userObserved = useMemo(\r\n () =>\r\n issue.observers\r\n ? issue.observers.find((osv) => osv.users.id === upf.user.id)\r\n : undefined,\r\n [issue.observers]\r\n );\r\n\r\n // Dialog display overservers\r\n const [observing, setObserving] = useState(false);\r\n const [openObserver, setOpenObserver] = React.useState(false);\r\n const [openConfirmUnObserve, setOpenConfirmUnObserve] = React.useState(\r\n false\r\n );\r\n\r\n const handleOpenObserverDialog = () => {\r\n setOpenObserver(true);\r\n };\r\n\r\n const handleCloseObserverDialog = () => {\r\n setOpenObserver(false);\r\n };\r\n\r\n const handleOpenConfirmUnObserve = () => {\r\n setOpenConfirmUnObserve(true);\r\n };\r\n\r\n const handleCloseConfirmUnObserve = () => {\r\n setOpenConfirmUnObserve(false);\r\n };\r\n\r\n const handleUnObserve = () => {\r\n manageObserving({ mode: 'remove' });\r\n handleCloseConfirmUnObserve();\r\n };\r\n\r\n const handleSetObserve = () => {\r\n manageObserving({ mode: 'add' });\r\n };\r\n\r\n const descriptionElementRef = React.useRef(null);\r\n React.useEffect(() => {\r\n if (openObserver) {\r\n const { current: descriptionElement } = descriptionElementRef;\r\n if (descriptionElement !== null) {\r\n descriptionElement.focus();\r\n }\r\n }\r\n }, [openObserver]);\r\n\r\n async function manageObserving({ mode = 'add' }) {\r\n let data = {\r\n issue_id,\r\n user_id: upf.user.id,\r\n };\r\n mode === 'add' && setObserving(true);\r\n try {\r\n // Dispatch mutiple action\r\n await dispatch(\r\n mode === 'add'\r\n ? issueActions.addObserver({\r\n ...data,\r\n params: memoGetIssueDetailPackage,\r\n options: { includedViewStatus: true },\r\n })\r\n : issueActions.removeObserver({\r\n ...data,\r\n params: memoGetIssueDetailPackage,\r\n options: { includedViewStatus: true },\r\n })\r\n ).then(\r\n // Addition: dispatch action-updateIssueLog\r\n () =>\r\n dispatch(\r\n issueLogActions.updateIssueLog(memoGetListActivityPackage)\r\n ).catch((error) => {\r\n throw error;\r\n }),\r\n (error) => {\r\n throw error;\r\n }\r\n );\r\n enqueueSnackbar(`${mode === 'remove' ? 'เลิก' : ''}ติดตามแล้ว`, {\r\n variant: 'success',\r\n });\r\n } catch (error) {\r\n handleClientError(error);\r\n }\r\n\r\n mode === 'add' && setObserving(false);\r\n }\r\n\r\n return (\r\n \r\n {/* Category */}\r\n {issueReducer.isLoading && \r\n \r\n )}\r\n {issueReducer.isLoading && \r\n \r\n )}\r\n\r\n {/* Reporter */}\r\n {issueReducer.isLoading && \r\n \r\n )}\r\n\r\n {/* ProcessStatus */}\r\n {issueReducer.isLoading && \r\n \r\n )}\r\n {/* FormForwardIssueDialog */}\r\n \r\n \r\n )}\r\n {issueReducer.isLoading && \r\n {issue.viewStatus.filterGroup && (\r\n \r\n \r\n )}\r\n \r\n )}\r\n\r\n {/* Label */}\r\n {issueReducer.isLoading && \r\n \r\n )}\r\n\r\n {/* Dimension */}\r\n {issueReducer.isLoading && \r\n \r\n );\r\n })}\r\n\r\n \r\n \r\n ผู้ติดตามเหตุละเมิด\r\n \r\n \r\n \r\n {issue.observers && (\r\n \r\n \r\n ลำดับ \r\n ผู้ติดตาม \r\n ติดตามในฐานะ \r\n \r\n {issue.observers.map((osv, index) => (\r\n\r\n \r\n {index + 1} \r\n {`${osv.users.firstName} ${osv.users.lastName}`}\r\n \r\n {osv.observers.type === 0 ? 'คณะทำงาน' : 'ทั่วไป'}\r\n \r\n \r\n ))}\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ยืนยันการเลิกติดตาม\r\n \r\n \r\n \r\n ยืนยันการเลิกติดตามเหตุละเมิดนี้\r\n \r\n \r\n \r\n \r\n ยืนยัน\r\n \r\n \r\n ยกเลิก\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n);\r\n\r\n/**\r\n * AppSidebarRBack() constist of routes and component in route.\r\n * @returns\r\n */\r\nexport default function AppSidebarRBack() {\r\n return (\r\n \r\n {userObserved ? (\r\n \r\n \r\n \r\n ติดตามแล้ว\r\n \r\n \r\n \r\n ) : (\r\n \r\n ติดตาม\r\n \r\n )}\r\n\r\n {issue.observers.length > 0 && (\r\n \r\n {' '}\r\n \r\n \r\n {' '}\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n ประเภทของข้อมูลส่วนบุคคล\r\n \r\n {issueTransition(issue.categorys.name)} \r\n \r\n ระดับ {issueTransition(issue.issues.level)}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n ผู้แจ้ง{' '}\r\n \r\n {\r\n let x = document.getElementById('reporter-info');\r\n if (x.style.display === 'none') {\r\n x.style.display = 'block';\r\n } else {\r\n x.style.display = 'none';\r\n }\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n {issue.issues.fullname && (\r\n \r\n
\r\n ชื่อ: {issue.issues.fullname}
\r\n )}\r\n \r\n {issue.issues.email &&
\r\n อีเมล: {issue.issues.email}
}\r\n {issue.issues.position && (\r\n ตำแหน่ง: {issue.issues.position}
\r\n )}\r\n {issue.issues.department && (\r\n ส่วนงาน: {issue.issues.department}
\r\n )}\r\n \r\n \r\n \r\n สถานะการดำเนินการ\r\n \r\n \r\n {isManageIssue(\r\n issue.readOnlyStatus.readOnly,\r\n issue.issues.worker === upf.user.id,\r\n issue.issues.processStatus_id,\r\n {\r\n operation: issueOperations.reciever,\r\n }\r\n ) ? (\r\n {\r\n return !processStatusesBiz\r\n .map((item) => item.id)\r\n .includes(option.id);\r\n }}\r\n disabledOption={(option) => option.id === 99}\r\n value={issue.issues.processStatus_id}\r\n onChange={handleChangeProcessStatus}\r\n />\r\n ) : (\r\n
\r\n \r\n {issue.issues && (\r\n {\r\n btnSelectOptionsRef.current.undoSelected();\r\n setOpenFormForward(false);\r\n }}\r\n />\r\n )}\r\n
\r\n\r\n {/* Worker */}\r\n {issueReducer.isLoading && \r\n \r\n \r\n ผู้รับเรื่อง\r\n \r\n \r\n {`${issue.issueWorker.firstName} ${issue.issueWorker.lastName}`}\r\n \r\n {/* \r\n {issueTransition(issueReducer.permissionGroup_name)}\r\n */}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n มีการส่งต่อเรื่องแบบระบุกลุ่มผู้ดูแล-ดำเนินการที่ท่านเป็นสมาชิก\r\n \r\n \r\n ระบุมายังกลุ่ม:{' '}\r\n {issue.permissionGroupFilter.name}\r\n \r\n \r\n \r\n }\r\n >\r\n \r\n {issue.permissionGroupFilter.name} \r\n \r\n
\r\n \r\n {/* issue.issueLabels is array item of {labels. labelTypes} */}\r\n {isManageFeatures ? (\r\n issueLabel.labels)\r\n : []\r\n }\r\n onBlur={handleBlurLabelPicker}\r\n />\r\n ) : (\r\n \r\n \r\n \r\n ป้ายกำกับ\r\n \r\n \r\n {issue.issueLabels.length > 0 ? (\r\n issueLabel.labels\r\n )}\r\n />\r\n ) : (\r\n '-'\r\n )}\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n {dimension.name}\r\n \r\n \r\n \r\n {isManageFeatures ? (\r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: '100%',\r\n maxWidth: 360,\r\n backgroundColor: theme.palette.background.paper,\r\n },\r\n section1: {\r\n margin: theme.spacing(3, 2),\r\n },\r\n section2: {\r\n margin: theme.spacing(2),\r\n },\r\n section3: {\r\n margin: theme.spacing(3, 1, 1),\r\n },\r\n ...processStatusStyles(theme),\r\n ...chipStyles(theme),\r\n}));\r\n\r\nconst AppSidebarRFrontIssueActivity = ({ match }) => {\r\n const classes = useStyles();\r\n\r\n logger('AppSidebarRFront render');\r\n\r\n\r\n const issue = useSelector(({ issueReducer }) => issueReducer).result || {};\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\n/**\r\n * AppSidebarRFront() constist of routes and component in route.\r\n * @returns\r\n */\r\nexport default function AppSidebarRFront() {\r\n return (\r\n \r\n {!issue.categorys && \r\n \r\n \r\n ประเภทของข้อมูลส่วนบุคคล\r\n \r\n \r\n \r\n {issue.categorys && issue.categorys.name}\r\n \r\n \r\n )}\r\n
\r\n \r\n {!issue.issues && \r\n \r\n สถานะการดำเนินการ\r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withStyles(styles)(HelpdeskMainPage);\r\n","import React, { Fragment } from 'react';\r\nimport { isEqual } from 'lodash';\r\n/**\r\n * Author: NRK.\r\n */\r\n\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\n// import Link from react-router-dom\r\nimport { Link } from 'react-router-dom';\r\n\r\n// import material-ui core\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Box from '@material-ui/core/Box';\r\nimport Chip from '@material-ui/core/Chip';\r\n\r\nimport VisibilityIcon from '@material-ui/icons/Visibility';\r\nimport VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';\r\n\r\n// import statusStyles, chipStyles\r\nimport { chipStyles } from './../../../styles/globalStyles/dataDisplayStyles';\r\n\r\nimport { logger } from './../../../utils/utils';\r\n\r\nimport { ChipLabels } from './../LabelPicker';\r\n\r\nimport { LFTooltip } from './../Tooltips';\r\n\r\n// Styles consist of processStatusStyle\r\nconst useStyles = makeStyles((theme) => ({\r\n ...chipStyles(theme),\r\n grid: {\r\n flexGrow: 1,\r\n },\r\n}));\r\n/**\r\n * ColumnContent() (Comonent) Display summary detail in summary column (material-table)\r\n * @param {object} props *Required\r\n * @param {string} props.issueId *Required\r\n * @param {string} props.categoryName *Required\r\n * @param {string} props.summary *Required\r\n * @param {string} props.path ^Router path of issue activity\r\n * @param {string} props.reporter\r\n * @param {string} props.worker\r\n * @param {string} props.level, 1|2|3\r\n * @param {object} props.processStatus {processStatus_id, processStatus_name, processStatus_style}\r\n * @param {array} props.labels\r\n * @param {array} props.createDate\r\n * @param {array} props.modifyDate\r\n * @returns element summary detail\r\n */\r\nconst ColumnContent = ({\r\n issueId = '',\r\n categoryName = '',\r\n summary = '',\r\n path = '',\r\n reporter = '',\r\n worker = '',\r\n level = null,\r\n processStatus = null,\r\n labels = [],\r\n createDate = '',\r\n modifyDate = '',\r\n viewStatus = {},\r\n}) => {\r\n const classes = useStyles();\r\n logger('ColumnContent render');\r\n\r\n return (\r\n หน้าหลัก-แจ้งเหตุละเมิดข้อมูลส่วนบุคคล
\r\nUnder Construction
\r\n\r\n \r\n \r\n {/* check observer by Is viewStatus.byCategoryAndLevel false */}\r\n {!viewStatus.byCategoryAndLevel &&\r\n (viewStatus.observerWorker || viewStatus.observer) && (\r\n \r\n \r\n \r\n {viewStatus.observerWorker ? (\r\n \r\n \r\n )}\r\n \r\n {summary}\r\n \r\n \r\n \r\n \r\n {/* Flexbox style */}\r\n \r\n \r\n รหัส: {issueId}\r\n \r\n \r\n วันที่แจ้ง: {createDate}\r\n \r\n \r\n ประเภท: {categoryName}\r\n \r\n {level && (\r\n \r\n ระดับ: {level}\r\n \r\n )}\r\n \r\n ผู้แจ้ง: {reporter}\r\n \r\n {worker && (\r\n \r\n ผู้รับเรื่อง: {worker}\r\n \r\n )}\r\n {/* {\r\n \r\n viewStatus: {JSON.stringify(viewStatus)}\r\n \r\n } */}\r\n {labels.length > 0 && \r\n
\r\n );\r\n};\r\n\r\nColumnContent.propTypes = {\r\n issueId: PropTypes.string.isRequired,\r\n summary: PropTypes.string.isRequired,\r\n categoryName: PropTypes.string.isRequired,\r\n path: PropTypes.string.isRequired,\r\n reporter: PropTypes.string.isRequired,\r\n worker: PropTypes.string,\r\n processStatus: PropTypes.object,\r\n labels: PropTypes.array,\r\n createDate: PropTypes.string.isRequired,\r\n modifyDate: PropTypes.string,\r\n viewStatus: PropTypes.object,\r\n};\r\n\r\n/**\r\n * By default it will only shallowly compare complex objects in the props object.\r\n * If you want control over the comparison,\r\n * you can also provide a custom comparison function as the second argument.\r\n * https://reactjs.org/docs/react-api.html\r\n * https://stackoverflow.com/questions/63502588/avoid-rerendering-child-when-passing-object-in-props\r\n */\r\nexport default React.memo(ColumnContent, isEqual);\r\n","import React, {\r\n useState,\r\n useEffect,\r\n useMemo,\r\n useRef,\r\n forwardRef,\r\n useImperativeHandle,\r\n} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isEqual } from 'lodash';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport clsx from 'clsx';\r\n\r\n// import material-ui core\r\nimport Accordion from '@material-ui/core/Accordion';\r\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\r\nimport AccordionActions from '@material-ui/core/AccordionActions';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Box from '@material-ui/core/Box';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport FormGroup from '@material-ui/core/FormGroup';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Button from '@material-ui/core/Button';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\n\r\nimport { TextField } from 'formik-material-ui';\r\n\r\n// import material-ui icon\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport TuneOutlinedIcon from '@material-ui/icons/TuneOutlined';\r\nimport SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';\r\nimport HelpOutlineIcon from '@material-ui/icons/HelpOutline';\r\nimport SortIcon from '@material-ui/icons/Sort';\r\n// import {\r\n// MuiPickersUtilsProvider,\r\n// KeyboardTimePicker,\r\n// KeyboardDatePicker,\r\n// } from '@material-ui/pickers';\r\n\r\n// import Formik and Dependency\r\nimport { Formik, Form, Field } from 'formik';\r\nimport { Select, CheckboxWithLabel } from 'formik-material-ui';\r\n\r\nimport { server } from './../../../constants';\r\nimport { getPeriodDateById, logger, base64 } from './../../../utils/utils';\r\n\r\nimport { HtmlTooltip, LFTooltip } from './../../fragments/Tooltips';\r\n\r\nimport SelectPersonalDataCategory from './../SelectPersonalDataCategory';\r\nimport { useCategoryGetListByMode } from './../../../hooks/useData';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: '100%',\r\n minHeight: 20,\r\n },\r\n heading: {\r\n fontSize: theme.typography.pxToRem(15),\r\n },\r\n secondaryHeading: {\r\n fontSize: theme.typography.pxToRem(15),\r\n color: theme.palette.text.secondary,\r\n },\r\n icon: {\r\n verticalAlign: 'bottom',\r\n height: 20,\r\n width: 20,\r\n },\r\n // https://stackoverflow.com/questions/53537680/material-ui-auto-complete-rotate-icon-on-expand-or-collapse\r\n sortDirection: {\r\n transition: theme.transitions.create(['transform'], {\r\n duration: theme.transitions.duration.short,\r\n }),\r\n },\r\n sortDirectionAsc: {\r\n transform: 'rotate(-180deg)',\r\n },\r\n sortDirectionDesc: {\r\n transform: 'rotate(0)',\r\n },\r\n details: {\r\n alignItems: 'center',\r\n },\r\n column12: {\r\n flexBasis: '99.99%',\r\n },\r\n column8: {\r\n flexBasis: '66.66%',\r\n },\r\n column4: {\r\n flexBasis: '33.33%',\r\n },\r\n}));\r\n\r\n/**\r\n * remArrayItem()\r\n * Remove item from given array\r\n * @param {any} item\r\n * @param {array} arr given array\r\n * @return {array} array of item removed\r\n */\r\nfunction remArrayItem(item, arr) {\r\n let index = arr.indexOf(item);\r\n if (index > -1) {\r\n arr.splice(index, 1);\r\n }\r\n return arr;\r\n}\r\n\r\nfunction buildContexts(contexts) {\r\n let lists = Object.keys(contexts).map((key) =>\r\n contexts[key].context\r\n ? `${contexts[key].title}: ${contexts[key].context}`\r\n : null\r\n );\r\n return lists.reduce((acc, curr) => [acc, curr ? ', ' : '', curr]);\r\n}\r\n\r\n/**\r\n * AccordionForm()\r\n * @param {object} props\r\n * @param {string} mode staff|reprter default: reporter\r\n * @param {array} sortsOptions with schema (each option) consist of {name, title}\r\n * @param {array} onFilterAndSearch Callback function(filters: object, keyword: string, sorts: object, side: string) with\r\n * @param filters filtering (object) param, consist of {dateStart,dateEnd,category_id,permissionLevels}\r\n * @param sorts sorting (object) param, consist of {name, direction} (name is a field for sorting)\r\n * @param keyword isearching (string) param,\r\n * @param side SS|CS (Server Side | Cliend Side)\r\n * @return {void}\r\n */\r\nconst AccordionForm = forwardRef(\r\n (\r\n {\r\n mode = server.REQ_PARAM_MODE_REPORTER,\r\n sortsOptions = [],\r\n onFilterAndSearch,\r\n },\r\n ref\r\n ) => {\r\n const classes = useStyles();\r\n\r\n logger('AccordionForm render');\r\n\r\n // get categories for make initail permissionLevel checkLevel when select-all\r\n let categories = useCategoryGetListByMode('TH', 'staff');\r\n\r\n // issue-filters (if) from catching (localStorage)\r\n const cacheIfs =\r\n useMemo(() => {\r\n let ifs = localStorage.getItem(server.ISSUE_FILTERS_KEY);\r\n return ifs ? base64.decodeObj(ifs) : {};\r\n }, [])[mode] || {};\r\n\r\n const sideRef = useRef(cacheIfs.side || 'SS');\r\n const cacheFilters = useMemo(() => cacheIfs.filters || {}, []);\r\n const cacheSorts = useMemo(() => cacheIfs.sorts || {}, []);\r\n const cacheKeyword = useMemo(() => cacheIfs.keyword, []);\r\n const cacheContexts = useMemo(() => cacheIfs.contexts, []);\r\n\r\n // https://material-ui.com/components/checkboxes/#checkbox (Checkbox with FormControlLabel)\r\n\r\n const initialCanSelectPermissionLevel = cacheFilters.permissionLevels || [\r\n 1,\r\n 2,\r\n 3,\r\n ];\r\n\r\n const period = getPeriodDateById(cacheFilters.period_id || '1y');\r\n\r\n const initialValues = {\r\n filters: {\r\n category_id: cacheFilters.category_id || '*',\r\n permissionLevels: initialCanSelectPermissionLevel,\r\n period_id: cacheFilters.period_id || '1y',\r\n dateStart: period.dateStart,\r\n dateEnd: period.dateEnd,\r\n },\r\n sorts: sortsOptions.length\r\n ? {\r\n title: cacheSorts.title || sortsOptions[0].title,\r\n name: cacheSorts.name || sortsOptions[0].name,\r\n direction: cacheSorts.direction || 'desc',\r\n }\r\n : {},\r\n keyword: cacheKeyword || '',\r\n contexts: cacheContexts || {\r\n category: {\r\n title: 'ประเภท',\r\n context: 'ทุกประเภท',\r\n },\r\n period: {\r\n title: 'ช่วงเวลา',\r\n context: 'ภายใน 1 ปี',\r\n },\r\n keyword: {\r\n title: 'คำค้นหา',\r\n context: '',\r\n },\r\n },\r\n };\r\n\r\n const [contexts, setContexts] = useState(\r\n buildContexts(initialValues.contexts)\r\n );\r\n\r\n // HandleFilterAndSearch(), Set argument and call onFilterAndSearch props\r\n const handleFilterAndSearch = (values) => {\r\n if (onFilterAndSearch) {\r\n let period = getPeriodDateById(values.filters.period_id);\r\n\r\n // filters parameter\r\n let filters = {\r\n ...values.filters,\r\n category_id:\r\n values.filters.category_id === '*'\r\n ? undefined\r\n : values.filters.category_id,\r\n dateStart: period.startDate,\r\n dateEnd: period.endDate,\r\n };\r\n\r\n // sorts parameter\r\n let sorts = { title: 'dynamic' };\r\n if (sortsOptions.length) {\r\n sorts = { ...sorts, ...values.sorts };\r\n }\r\n\r\n // keyword parameter\r\n let keyword = values.keyword;\r\n\r\n let contexts = {\r\n ...values.contexts,\r\n keyword: { ...values.contexts.keyword, context: keyword },\r\n };\r\n\r\n let side = sideRef.current;\r\n\r\n /**\r\n * Test issue-filters in localStorage\r\n * issue-filters is catching issue filter\r\n */\r\n\r\n // Read issue-filters from storage (by ISSUE_FILTERS_KEY)\r\n let beforeIssueFilters = localStorage.getItem(server.ISSUE_FILTERS_KEY);\r\n beforeIssueFilters = beforeIssueFilters\r\n ? base64.decodeObj(beforeIssueFilters)\r\n : {};\r\n\r\n // Check exist data in object by key reporter|staff (of props mode) & assign {} when data is not exist\r\n if (!beforeIssueFilters[mode]) {\r\n beforeIssueFilters[mode] = {};\r\n }\r\n\r\n // Assign new issue-filters data (of props mode)\r\n beforeIssueFilters[mode] = {\r\n ...beforeIssueFilters[`${mode}`],\r\n filters,\r\n keyword,\r\n sorts,\r\n contexts,\r\n side,\r\n };\r\n\r\n // Combile data of each key (reporter|staff) to new issue-filters object\r\n let newIssueFilters = {\r\n ...beforeIssueFilters,\r\n };\r\n\r\n //Set new issue-filters to localStorage\r\n localStorage.setItem(\r\n server.ISSUE_FILTERS_KEY,\r\n base64.encodeObj(newIssueFilters)\r\n );\r\n\r\n // Process filter and Search\r\n onFilterAndSearch(filters, keyword, sorts, side);\r\n\r\n // Set search title on acordionForm\r\n setContexts(buildContexts(contexts));\r\n }\r\n };\r\n // Form (of Formik) reference\r\n const formikRef = useRef(null);\r\n\r\n useImperativeHandle(ref, () => ({\r\n submitForm: () => {\r\n formikRef.current.submitForm();\r\n },\r\n }));\r\n\r\n const showFormSearch = ({\r\n values,\r\n setFieldValue,\r\n touched,\r\n errors,\r\n submitForm,\r\n }) => {\r\n const onCbChange = (e) => {\r\n let val = Number(e.target.value);\r\n let newVal = values.filters.permissionLevels.includes(val)\r\n ? remArrayItem(val, [...values.filters.permissionLevels])\r\n : [...values.filters.permissionLevels, val];\r\n setFieldValue('filters.permissionLevels', newVal);\r\n sideRef.current = 'CS';\r\n submitForm();\r\n };\r\n return (\r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n {\r\n setSubmitting(false);\r\n if (onFilterAndSearch) {\r\n handleFilterAndSearch(values);\r\n }\r\n }}\r\n innerRef={formikRef}\r\n >\r\n {(props) => showFormSearch(props)}\r\n \r\n
\r\n );\r\n }\r\n);\r\n\r\n/**\r\n * AccordionForm's propTypes\r\n */\r\nAccordionForm.propTypes = {\r\n onFilterAndSearch: PropTypes.func.isRequired,\r\n};\r\n\r\n/**\r\n * By default it will only shallowly compare complex objects in the props object.\r\n * If you want control over the comparison,\r\n * you can also provide a custom comparison function as the second argument.\r\n * https://reactjs.org/docs/react-api.html\r\n * https://stackoverflow.com/questions/63502588/avoid-rerendering-child-when-passing-object-in-props\r\n */\r\nexport default React.memo(AccordionForm, isEqual);\r\n","import React, { Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isEqual } from 'lodash';\r\nimport CommentOutlinedIcon from '@material-ui/icons/CommentOutlined';\r\nimport PeopleAltOutlinedIcon from '@material-ui/icons/PeopleAltOutlined';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Box from '@material-ui/core/Box';\r\n\r\nimport { LFTooltip, HtmlTooltip } from './../Tooltips';\r\n/**\r\n * Author: NRK.\r\n */\r\n\r\nconst ColuumnSumUp = ({\r\n permissionGroupFilterName = null,\r\n countComment,\r\n latestCommentDate = null,\r\n isIssueStatusClosed,\r\n}) => {\r\n return (\r\n \r\n \r\n \r\n {/* Flexbox style */}\r\n \r\n \r\n {isIssueStatusClosed && 'ปิด (Closed)'}\r\n \r\n \r\n {permissionGroupFilterName && (\r\n \r\n \r\n \r\n \r\n มีการส่งต่อเรื่องแบบระบุกลุ่มผู้ดูแล-ดำเนินการ มายังกลุ่ม {permissionGroupFilterName} ที่ท่านเป็นสมาชิก\r\n \r\n \r\n \r\n }\r\n >\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n {countComment > 0 && `ล่าสุด ${latestCommentDate}`}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\n// propTypes\r\nColuumnSumUp.propTypes = {\r\n permissionGroupFilterName: PropTypes.string,\r\n countComment: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.number,\r\n ]).isRequired,\r\n latestCommentDate: PropTypes.string,\r\n isIssueStatusClosed: PropTypes.bool.isRequired,\r\n};\r\n\r\n/**\r\n * By default it will only shallowly compare complex objects in the props object.\r\n * If you want control over the comparison,\r\n * you can also provide a custom comparison function as the second argument.\r\n * https://reactjs.org/docs/react-api.html\r\n * https://stackoverflow.com/questions/63502588/avoid-rerendering-child-when-passing-object-in-props\r\n */\r\nexport default React.memo(ColuumnSumUp);\r\n","import React, {\r\n useState,\r\n useEffect,\r\n useMemo,\r\n useCallback,\r\n useRef,\r\n} from 'react';\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\n// import @material-ui/core\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Badge from '@material-ui/core/Badge';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport Backdrop from '@material-ui/core/Backdrop';\r\n// import Tabs\r\nimport { Tabs, Tab, TabPanel, a11yProps } from './../../fragments/Tabs';\r\n\r\n// import styles-globalStyles\r\nimport globalStyles from './../../../styles/globalStyles';\r\n\r\nimport MaterialTable, {\r\n MTableToolbar,\r\n MTableHeader,\r\n MTableBody,\r\n} from 'material-table';\r\n\r\n// import constant\r\nimport { server, sortingOptions, muiTable } from './../../../constants';\r\n\r\n// import routers constant\r\nimport { routers } from './../../../routers';\r\n\r\n// import React-Redux & Reducer action\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport * as issueActions from '../../../actions/issue.action';\r\n\r\n// import utils\r\nimport {\r\n logger,\r\n formatDatetime,\r\n base64,\r\n getPeriodDateById,\r\n} from './../../../utils/utils';\r\nimport { useHandleClientError } from './../../../utils/HttpClient';\r\n\r\n// import fragmmet\r\nimport ColumnContent from './../../fragments/ColumnContent';\r\nimport AccordionForm from './../../fragments/AccordionForm';\r\nimport ColuumnSumUp from './../../fragments/ColuumnSumUp';\r\n\r\nconst StyledBadge = withStyles((theme) => ({\r\n badge: {\r\n right: -5,\r\n top: 2,\r\n border: `1px solid ${theme.palette.background.paper}`,\r\n padding: '2px',\r\n },\r\n}))(Badge);\r\n\r\n/**\r\n * styles\r\n * @param {*} theme\r\n */\r\nconst styles = (theme) => ({\r\n ...globalStyles(theme),\r\n root: {\r\n flexGrow: 1,\r\n backgroundColor: theme.palette.background.paper,\r\n '& .MuiCardContent-root': {\r\n padding: theme.spacing(1),\r\n },\r\n },\r\n avatarSmall: {\r\n fontSize: '9px',\r\n fontWeight: 'normal',\r\n width: theme.spacing(3),\r\n height: theme.spacing(3),\r\n },\r\n appBar: {\r\n boxShadow: 'none',\r\n borderBottom: '1px solid #e8e8e8',\r\n },\r\n // https://stackoverflow.com/questions/55078256/how-to-change-the-position-of-an-icon-component-within-a-tab-component\r\n iconLabelWrapperReverse: {\r\n flexDirection: 'row-reverse',\r\n },\r\n toolbarWrapper: {\r\n '& .MuiToolbar-regular': {\r\n minHeight: 0,\r\n },\r\n },\r\n});\r\n\r\n/**\r\n * HelpdeskIssuesPage component\r\n * @param {*} props\r\n */\r\nconst HelpdeskIssuesPage = (props) => {\r\n // Classes extend from widthStyle(style)\r\n const { classes } = props;\r\n\r\n logger('HelpdeskIssuesPage render');\r\n\r\n const routFrontOf = routers.frontOf;\r\n\r\n // Hook handle-client-error\r\n const handleClientError = useHandleClientError();\r\n\r\n // TabPanel state & handle function\r\n const [tabValue, setTabValue] = React.useState(0);\r\n\r\n // TabPanel handle function\r\n const handleChangeTab = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n // Hook reducer V2) Destructure multiple reducer by one useSelector\r\n const issueListReducer = useSelector(\r\n ({ issueListReducer }) => issueListReducer\r\n );\r\n\r\n // Hook reducer (by useSelector) from store\r\n const dispatch = useDispatch();\r\n\r\n // Ref accordionForm\r\n const accordionFormRef = useRef(null);\r\n\r\n // Check is badgeContent assign data from getList (server-side)\r\n let isSeverBadgeContentRef = useRef(true);\r\n\r\n // issue-filters from catching (localStorage)\r\n const cacheIfs =\r\n useMemo(() => {\r\n let ifs = localStorage.getItem(server.ISSUE_FILTERS_KEY);\r\n return ifs ? base64.decodeObj(ifs) : {};\r\n }, []).reporter || {};\r\n const cacheFilters = useMemo(() => cacheIfs.filters || {}, []);\r\n const cacheSorts = useMemo(() => cacheIfs.sorts || {}, []);\r\n const cacheKeyword = useMemo(() => cacheIfs.keyword || '', []);\r\n\r\n useEffect(() => {\r\n // Must use cache period_id but dont use cache date\r\n let { dateStart, dateEnd } = getPeriodDateById(\r\n cacheFilters.period_id || '1y'\r\n );\r\n\r\n dispatch(\r\n issueActions.getList({\r\n package: base64.encodeObj({\r\n lang: 'TH',\r\n mode: server.REQ_PARAM_MODE_REPORTER,\r\n\r\n // Must use cache date from period_id but dont use cache date\r\n dateStart: dateStart,\r\n dateEnd: dateEnd,\r\n\r\n category_id: cacheFilters.category_id || undefined, // default category_id all (Cancel category_id prop by undefined value)\r\n }),\r\n })\r\n ).then(\r\n () => {\r\n setBadgeContent({\r\n open: mtOpenRef.current.state.data.length,\r\n close: mtCloseRef.current.state.data.length,\r\n all: mtAllRef.current.state.data.length,\r\n });\r\n },\r\n (error) => {\r\n throw error;\r\n }\r\n );\r\n return () => {\r\n logger('clearList');\r\n dispatch(issueActions.clearList());\r\n };\r\n }, []);\r\n\r\n const memoIssueListOpen = useMemo(\r\n () =>\r\n issueListReducer.result\r\n ? issueListReducer.result.filter(\r\n (issue) => issue.issueStatuses.id === 10\r\n )\r\n : [],\r\n [issueListReducer.result]\r\n );\r\n\r\n const memoIssueListClose = useMemo(\r\n () =>\r\n issueListReducer.result\r\n ? issueListReducer.result.filter(\r\n (issue) => issue.issueStatuses.id === 90\r\n )\r\n : [],\r\n [issueListReducer.result]\r\n );\r\n\r\n // Ref of material-table\r\n const mtOpenRef = useRef({});\r\n const mtCloseRef = useRef({});\r\n const mtAllRef = useRef({});\r\n\r\n // Ref of material-table toolbar (ref onSearchChange func)\r\n const mtToolbarOpenRef = useRef();\r\n const mtToolbarCloseRef = useRef();\r\n const mtToolbarAllRef = useRef();\r\n\r\n // Ref of material-table header (ref props.onOrderChange (sorting) func)\r\n const mtHeaderOpenRef = useRef();\r\n const mtHeaderCloseRef = useRef();\r\n const mtHeaderAllRef = useRef();\r\n\r\n // Ref of material-table body (ref props.onFilterChanged (fitering) func)\r\n const mtBodyOpenRef = useRef();\r\n const mtBodyCloseRef = useRef();\r\n const mtBodyAllRef = useRef();\r\n\r\n // Ref of material-table sorting (keep sorting value)\r\n const [sortingCol, setSortingCol] = useState({\r\n name: cacheSorts.name || sortingOptions.issues[0].name,\r\n title: cacheSorts.title || sortingOptions.issues[0].title,\r\n direction: cacheSorts.direction || 'desc',\r\n });\r\n\r\n // Ref of material-table filter (keep filtering value)\r\n const [filteringCol, setFilteringCol] = useState({\r\n name: 'issues.level',\r\n title: 'ระดับ',\r\n term: cacheFilters.permissionLevels || [1, 2, 3],\r\n customFilterAndSearch: (term, rowData) => {\r\n return term.includes(rowData.issues.level);\r\n },\r\n });\r\n\r\n const badgeMax = 9999;\r\n\r\n const [badgeContent, setBadgeContent] = useState({\r\n open: 0,\r\n close: 0,\r\n all: 0,\r\n });\r\n\r\n // useEffect 1st setBadgeContent\r\n useEffect(() => {\r\n if (issueListReducer.result && isSeverBadgeContentRef.current) {\r\n logger('(1) setBadgeContent depend on issueListReducer');\r\n setBadgeContent({\r\n open: memoIssueListOpen.length,\r\n close: memoIssueListClose.length,\r\n all: issueListReducer.result.length,\r\n });\r\n isSeverBadgeContentRef.current = false;\r\n }\r\n }, [issueListReducer.result]);\r\n\r\n // useEffect sortingCol\r\n useEffect(() => {\r\n mtHeaderOpenRef.current.props.onOrderChange(0, sortingCol.direction);\r\n mtHeaderCloseRef.current.props.onOrderChange(0, sortingCol.direction);\r\n mtHeaderAllRef.current.props.onOrderChange(0, sortingCol.direction);\r\n logger('useEffect onOrderChange');\r\n }, [sortingCol]);\r\n\r\n // useEffect filteringCol\r\n useEffect(() => {\r\n mtBodyOpenRef.current.props.onFilterChanged(1, filteringCol.term);\r\n mtBodyCloseRef.current.props.onFilterChanged(1, filteringCol.term);\r\n mtBodyAllRef.current.props.onFilterChanged(1, filteringCol.term);\r\n logger('useEffect onOrderChange');\r\n }, [filteringCol]);\r\n\r\n // Memo (func) handle search. (props onSearch of AccordionForm)\r\n const memoHandleSearchAndFilter = useCallback(\r\n async (\r\n {\r\n // SSP\r\n dateStart,\r\n dateEnd,\r\n category_id,\r\n permissionLevels,\r\n },\r\n keyword,\r\n { title, name, direction },\r\n side\r\n ) => {\r\n // Search (updating) (Do not check keyword that is existed or ever searched, course of material-table ref.searchText (form prev search) not clear)\r\n logger('search');\r\n mtToolbarOpenRef.current.onSearchChange(keyword);\r\n mtToolbarCloseRef.current.onSearchChange(keyword);\r\n mtToolbarAllRef.current.onSearchChange(keyword);\r\n\r\n // set sortingCol (updating)\r\n if (sortingCol.name !== name || sortingCol.direction !== direction) {\r\n logger('sort');\r\n setSortingCol({ title, name, direction });\r\n }\r\n\r\n // set fiteringCol (updating)\r\n if (filteringCol.term !== permissionLevels) {\r\n logger('filter');\r\n setFilteringCol((prev) => ({ ...prev, term: permissionLevels }));\r\n }\r\n\r\n if (side === 'SS') {\r\n isSeverBadgeContentRef.current = true;\r\n // Set isFilterAndSearch for prevent repleat useEffect 1st setBadgeContent\r\n // getList new data\r\n logger('getList');\r\n await dispatch(\r\n issueActions.getList({\r\n package: base64.encodeObj({\r\n lang: 'TH',\r\n mode: server.REQ_PARAM_MODE_REPORTER,\r\n dateStart,\r\n dateEnd,\r\n category_id,\r\n }),\r\n })\r\n ).catch((error) => handleClientError(error));\r\n }\r\n },\r\n [sortingCol, filteringCol]\r\n );\r\n\r\n // Memo (func) customFilterAndSearchSummary\r\n const memoCustomFilterAndSearchContent = useCallback((term, rowData) => {\r\n let searchSource = [\r\n rowData.issues.shortId,\r\n formatDatetime({ datetime: rowData.issues.createDate }),\r\n rowData.categorys.name,\r\n rowData.issues.summary,\r\n rowData.issues.fullname,\r\n rowData.processStatuses.name,\r\n ].join(' ');\r\n // Search and return result\r\n return searchSource.indexOf(term) != -1;\r\n }, []);\r\n\r\n const renderColumnContent = (rowData) => (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n }\r\n />\r\n \r\n
\r\n ),\r\n Header: (props) => (\r\n \r\n
\r\n ),\r\n Header: (props) => (\r\n \r\n
\r\n ),\r\n Header: (props) => \r\n \r\n \r\n \r\n { (!image && name) && name}\r\n { !image && !name && \r\n \r\n \r\n {children}\r\n \r\n \r\n
\r\n );\r\n});\r\n\r\nexport default withStyles(styles)(GridAvatar);\r\n","import React, { useState, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isEqual } from 'lodash';\r\nimport clsx from 'clsx';\r\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport Box from '@material-ui/core/Box';\r\nimport Button from '@material-ui/core/Button';\r\nimport Divider from '@material-ui/core/Divider';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport Backdrop from '@material-ui/core/Backdrop';\r\nimport Chip from '@material-ui/core/Chip';\r\n\r\n// import styles-globalStyles\r\nimport globalStyles from './../../../styles/globalStyles';\r\nimport { chipStyles } from './../../../styles/globalStyles/dataDisplayStyles';\r\n\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport ContactsOutlinedIcon from '@material-ui/icons/ContactsOutlined';\r\nimport SentimentSatisfiedOutlinedIcon from '@material-ui/icons/SentimentSatisfiedOutlined';\r\nimport SentimentDissatisfiedOutlinedIcon from '@material-ui/icons/SentimentDissatisfiedOutlined';\r\n\r\n// import react-router\r\nimport { Prompt } from 'react-router-dom';\r\n\r\n// import Formik and Dependency\r\nimport { Formik, Form, Field } from 'formik';\r\nimport { TextField } from 'formik-material-ui';\r\nimport * as Yup from 'yup';\r\n\r\nimport GridAvatar from './../../fragments/GridAvatar';\r\nimport DropFiles from './../../fragments/DropFiles';\r\n\r\nimport { logger, openOriginalImage } from './../../../utils/utils';\r\n\r\nimport { file } from '../../../data';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n ...globalStyles(theme),\r\n ...chipStyles(theme),\r\n card: {\r\n minWidth: 250,\r\n maxWidth: 930,\r\n position: 'relative',\r\n },\r\n cardHeader: {\r\n padding: theme.spacing(2),\r\n '& > *': {\r\n margin: theme.spacing(0),\r\n },\r\n },\r\n cardAction: {\r\n width: '100%',\r\n justifyContent: 'flex-end',\r\n '& > *': {\r\n margin: theme.spacing(1),\r\n },\r\n },\r\n\r\n contentWidth: {\r\n maxWidth: 860,\r\n },\r\n\r\n formIssueWidth: {\r\n maxWidth: 890,\r\n },\r\n\r\n breakWord: {\r\n wordBreak: 'break-word',\r\n whiteSpace: 'pre-wrap',\r\n MozWhiteSpace: 'pre-wrap',\r\n },\r\n\r\n pos: {\r\n marginBottom: theme.spacing(4),\r\n },\r\n\r\n // Style thumb-image\r\n thumbsContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n marginTop: 16,\r\n },\r\n\r\n thumb: {\r\n //display: 'inline-flex',\r\n borderRadius: 2,\r\n border: '1px dashed #eaeaea',\r\n marginBottom: 20,\r\n marginRight: 8,\r\n maxWidth: 500,\r\n // minHeight: 150,\r\n padding: 4,\r\n boxSizing: 'border-box',\r\n },\r\n thumbInner: {\r\n display: 'flex',\r\n minWidth: 0,\r\n overflow: 'hidden',\r\n },\r\n\r\n img: {\r\n display: 'block',\r\n [theme.breakpoints.up('xs')]: {\r\n width: '100%',\r\n },\r\n [theme.breakpoints.up('sm')]: {\r\n width: '100%',\r\n },\r\n [theme.breakpoints.up('md')]: {\r\n maxWidth: 500,\r\n },\r\n [theme.breakpoints.up('lg')]: {\r\n maxWidth: 500,\r\n },\r\n height: '100%',\r\n },\r\n}));\r\n\r\n// YUP: build validation schema (validationSchema)\r\nconst validationSchema = Yup.object().shape({\r\n summary: Yup.string()\r\n .min(4, 'เรื่องโดยสรุปต้องมากกว่า 4 อักขระ')\r\n .max(255, 'เรื่องโดยสรุปต้องไม่เกิน 255 อักขระ')\r\n .required('กรุณากรอกเรื่องโดยสรุป'),\r\n description: Yup.string()\r\n .min(4, 'รายละเอียดต้องมากกว่า 4 อักขระ')\r\n .max(8000, 'รายละเอียดต้องไม่เกิน 8,000 อักขระ')\r\n .required('กรุณากรอกรายละเอียด'),\r\n contract: Yup.string()\r\n .min(4, 'ข้อมูลการติดต่อเพิ่มเติมต้องมากกว่า 4 อักขระ')\r\n .max(255, 'ข้อมูลการติดต่อเพิ่มเติมต้องไม่เกิน 255 อักขระ')\r\n .nullable(true),\r\n});\r\n\r\nconst linkOriginalImage = (issue_id, file_id) => {\r\n file\r\n .original({ issue_id, file_id })\r\n .then((data) => {\r\n openOriginalImage(data.content);\r\n })\r\n .catch((error) => alert('Error openFileOriginal'));\r\n};\r\n\r\n/**\r\n * IssueCard() (Conponent)\r\n * @param {object} prop\r\n * @param {string} summary, summary title\r\n * @param {string} description\r\n * @param {string} contract\r\n * @param {number} vote\r\n * @param {string} createDate\r\n * @param {string} reporter, issue-reporter name\r\n * @param {object} avatar, {name, image}\r\n * @param {string} modifyDate, modify date\r\n * @param {string} modifier, issue-modifier (modifyBy)\r\n * @param {array} thumbnails,\r\n * @param {bool} editing [default: false] Set true if user can edit issue;\r\n * @param {bool} isClosed [default: false]\r\n * @param {bool} closing [default: false] Set true if user can close issue;\r\n * @param {func} onDroppedFiles,\r\n * @param {func} onRemovedFile,\r\n * @param {func} onSubmit,\r\n * @param {func} onClose, Callback voted (id: GIID (issue id), vote: int) => void\r\n * @returns IssueCard element\r\n */\r\n\r\nconst IssueCard = ({\r\n id,\r\n summary,\r\n description,\r\n contract,\r\n vote,\r\n createDate,\r\n reporter,\r\n avatar = {\r\n image: undefined,\r\n name: undefined,\r\n },\r\n modifyDate = null,\r\n modifier = null,\r\n thumbnails = [],\r\n editing = false,\r\n isClosed = false,\r\n closing = false,\r\n onDroppedFiles,\r\n onRemovedFile,\r\n onSubmit,\r\n onClose,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n logger('IssueCard render');\r\n\r\n // InitialVaue of form reporting breach\r\n const initialValues = {\r\n id,\r\n summary,\r\n description,\r\n contract,\r\n };\r\n\r\n // Ref, dropFilesRef\r\n const dropFilesRef = useRef();\r\n\r\n // State isEdit, thumbnails\r\n const [isEdit, setIsEdit] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const showFormIssue = ({ values, resetForm, touched, errors }) => {\r\n return (\r\n \r\n {\r\n setSubmitting(false);\r\n\r\n // dropFilesRef (ref of DropFiles) has new files and also existFiles is included\r\n // Note: existFiles in dropFilesRef is data (existFiles) assigned to existFiles (become DropFiles's prop), look DropFiles statement\r\n\r\n let issueFiles = [\r\n ...dropFilesRef.current.files.map((file) => file.id),\r\n ].join(',');\r\n\r\n let reqData = {\r\n id: values.id,\r\n summary: values.summary,\r\n description: values.description,\r\n contract: values.contract,\r\n issueFiles,\r\n };\r\n // onSubmit\r\n (async () => {\r\n if (onSubmit) {\r\n !isLoading && setIsLoading(true);\r\n // values are {issue, comment}\r\n await onSubmit(reqData);\r\n setIsLoading(false);\r\n setIsEdit(false);\r\n }\r\n })();\r\n }}\r\n >\r\n {(props) => showFormIssue(props)}\r\n \r\n
\r\n );\r\n};\r\n\r\n/**\r\n * IssueCard's propTypes\r\n */\r\nIssueCard.propTypes = {\r\n reporter: PropTypes.string,\r\n createDate: PropTypes.string,\r\n summary: PropTypes.string,\r\n description: PropTypes.string,\r\n contract: PropTypes.string,\r\n avatar: PropTypes.object,\r\n thumbnails: PropTypes.array,\r\n isClosed: PropTypes.bool,\r\n closing: PropTypes.bool,\r\n editing: PropTypes.bool,\r\n onDroppedFiles: PropTypes.func,\r\n onRemovedFile: PropTypes.func,\r\n onSubmit: PropTypes.func,\r\n};\r\n\r\n/**\r\n * By default it will only shallowly compare complex objects in the props object.\r\n * If you want control over the comparison,\r\n * you can also provide a custom comparison function as the second argument.\r\n * https://reactjs.org/docs/react-api.html\r\n * https://stackoverflow.com/questions/63502588/avoid-rerendering-child-when-passing-object-in-props\r\n */\r\nexport default React.memo(IssueCard, isEqual);\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isEqual } from 'lodash';\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Box from '@material-ui/core/Box';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\n\r\n// import utils\r\nimport { openOriginalImage, logger } from './../../../utils/utils';\r\n\r\n// import material-icon\r\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\r\nimport SupervisorAccountOutlinedIcon from '@material-ui/icons/SupervisorAccountOutlined';\r\nimport SettingsIcon from '@material-ui/icons/Settings';\r\n\r\nimport { FormComment } from '../FormComment';\r\n\r\nimport * as file from '../../../data/file';\r\nimport { useThumbnails } from '../../../hooks/useFile';\r\n\r\nimport GridAvatar from './../../fragments/GridAvatar';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n overflow: 'hidden',\r\n padding: theme.spacing(2, 0),\r\n },\r\n card: {\r\n minWidth: 250,\r\n maxWidth: 930,\r\n },\r\n // bullet: {\r\n // display: 'inline-block',\r\n // margin: '0 2px',\r\n // transform: 'scale(0.8)',\r\n // },\r\n title: {\r\n fontSize: 14,\r\n },\r\n pos: {\r\n marginBottom: 12,\r\n },\r\n contentWidth: {\r\n maxWidth: 860,\r\n },\r\n formCommentWidth: {\r\n maxWidth: 890,\r\n },\r\n breakWord: {\r\n wordBreak: 'break-word',\r\n whiteSpace: 'pre-wrap',\r\n MozWhiteSpace: 'pre-wrap',\r\n },\r\n // Style thumb-image\r\n thumbsContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n marginTop: 16,\r\n },\r\n\r\n thumb: {\r\n //display: 'inline-flex',\r\n borderRadius: 2,\r\n border: '1px dashed #eaeaea',\r\n marginBottom: 20,\r\n marginRight: 8,\r\n maxWidth: 500,\r\n // minHeight: 150,\r\n padding: 4,\r\n boxSizing: 'border-box',\r\n },\r\n thumbInner: {\r\n display: 'flex',\r\n minWidth: 0,\r\n overflow: 'hidden',\r\n },\r\n\r\n img: {\r\n display: 'block',\r\n [theme.breakpoints.up('xs')]: {\r\n width: '100%',\r\n },\r\n [theme.breakpoints.up('sm')]: {\r\n width: '100%',\r\n },\r\n [theme.breakpoints.up('md')]: {\r\n maxWidth: 500,\r\n },\r\n [theme.breakpoints.up('lg')]: {\r\n maxWidth: 500,\r\n },\r\n height: '100%',\r\n },\r\n}));\r\n\r\nconst linkOriginalImage = (issue_id, file_id) => {\r\n file\r\n .original({ issue_id, file_id })\r\n .then((data) => {\r\n openOriginalImage(data.content);\r\n })\r\n .catch((error) => alert('Error linkOriginalImage'));\r\n};\r\n\r\n/**\r\n * CommentCard() (Conponent)\r\n * @param {object} props\r\n * data props\r\n * @param {int} props.id, [issue-] comment-id\r\n * @param {int} props.issueId, issue id\r\n * @param {int} props.issueCommentTypeId, comment-type-id\r\n * @param {string} props.issueCommentTypeName, comment-type-name\r\n * @param {string} props.issueCommentTypeDescription, comment-type-description\r\n * @param {int} props.receiverType, receiver-type (0, 1)\r\n * @param {int} props.detail, comment-detail\r\n * @param {int} props.commentFiles, string fileIds with , delimitor\r\n * @param {string} creater, comment-creater (createBy)\r\n * @param {string} createDate, string create-date\r\n * @param {string} modifier, comment-modifier (modifyBy)\r\n * @param {string} modifyDate, string modify-date\r\n * feature props\r\n * @param {bool} editing, [default: false] Set true if user can edit issue;\r\n * @param {bool} receiverTapping defalut: false\r\n * event props\r\n * @param {func} onDroppedFiles, function(filesBase64: array, data: object) => void\r\n * @param {func} onRemovedFile,\r\n * @param {func} onSubmit, function(dataUpdated) => void\r\n * @return\r\n */\r\nconst CommentCard = ({\r\n // data props\r\n id = undefined,\r\n issueId = '',\r\n issueCommentTypeId = -1,\r\n issueCommentTypeName = null,\r\n issueCommentTypeDescription = null,\r\n receiverType = null,\r\n detail = '',\r\n commentFiles = null,\r\n creater = '',\r\n avatar = {\r\n image: undefined,\r\n name: undefined,\r\n },\r\n createDate = '',\r\n modifier = '',\r\n modifyDate = '',\r\n // feature props\r\n editing,\r\n receiverTapping = false,\r\n // event props\r\n onDroppedFiles,\r\n onRemovedFile,\r\n onSubmit,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n logger('CommentCard render');\r\n\r\n const [isEdit, setIsEdit] = useState(false);\r\n\r\n const thumbnails = useThumbnails(issueId, commentFiles);\r\n\r\n const handleCancel = () => {\r\n setIsEdit(false);\r\n };\r\n\r\n const handleSubmit = async (data) => {\r\n if (onSubmit) {\r\n await onSubmit(data);\r\n }\r\n setIsEdit(false);\r\n };\r\n\r\n const handleDroppedFiles = (newFiles, extendNewFiles) => {\r\n if (onDroppedFiles) {\r\n onDroppedFiles(newFiles, extendNewFiles);\r\n }\r\n };\r\n const cardHeader = {\r\n action: (\r\n \r\n \r\n
\r\n \r\n {detail}\r\n
\r\n \r\n {/* Apply thumbs style from Dropzone preview component */}\r\n \r\n \r\n
\r\n )}\r\n \r\n {logs.map((log) => {\r\n let issueLogsContext = log.issueLogs.context\r\n ? JSON.parse(log.issueLogs.context)\r\n : {};\r\n log.issueLogs.mode === 'issueDimensionSet' &&\r\n logger({ issueLogsContext });\r\n return (\r\n
\r\n );\r\n});\r\n\r\nexport default withStyles(styles)(LogCard);\r\n","import React, { useState, useEffect } from 'react';\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Box from '@material-ui/core/Box';\r\nimport Divider from '@material-ui/core/Divider';\r\nimport Skeleton from '@material-ui/lab/Skeleton';\r\n\r\n// Dialog vote depedency\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport FormLabel from '@material-ui/core/FormLabel';\r\nimport Button from '@material-ui/core/Button';\r\n\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nimport ThumbsUpDownIcon from '@material-ui/icons/ThumbsUpDown';\r\n\r\n// import React-Redux\r\nimport { useSelector, useDispatch } from 'react-redux';\r\n\r\n// import globalStyles\r\nimport globalStyles from '../../../styles/globalStyles';\r\n\r\n// import useSnackbar\r\nimport { useSnackbar } from 'notistack';\r\n\r\n// import constants\r\nimport { server } from './../../../constants';\r\n\r\n// import utils\r\nimport {\r\n userProfiler,\r\n formatDatetime,\r\n logger,\r\n base64,\r\n} from './../../../utils/utils';\r\n\r\n// import hooks\r\nimport { useHandleClientError } from '../../../utils/HttpClient';\r\n\r\n// import fragments Tabs\r\nimport { Tabs, Tab, TabPanel, a11yProps } from './../../fragments/Tabs';\r\n\r\n//import Fragment AppSidebarRFront, IssueCard, CommentCard, FormComment & etc.\r\nimport IssueCard from './../../fragments/IssueCard';\r\nimport CommentCard from './../../fragments/CommentCard';\r\nimport LogCard from './../../fragments/LogCard';\r\nimport { FormComment } from './../../fragments/FormComment';\r\nimport GridAvatar from './../../fragments/GridAvatar';\r\n\r\nimport * as issueActions from '../../../actions/issue.action';\r\nimport * as issueCommentActions from '../../../actions/issueComment.action';\r\nimport * as issueLogActions from '../../../actions/issueLog.action';\r\n\r\n// import file data\r\nimport { file } from './../../../data';\r\n\r\n// Styles declaration\r\nconst styles = (theme) => ({\r\n ...globalStyles(theme),\r\n root: {\r\n margin: theme.spacing(1),\r\n },\r\n formCommentControl: {\r\n maxWidth: 890,\r\n margin: theme.spacing(4, 0, 1, 0),\r\n },\r\n card: {\r\n minWidth: 275,\r\n margin: theme.spacing(5, 0),\r\n padding: theme.spacing(0, 1, 1, 1),\r\n },\r\n cardContent: {\r\n minHeight: 200,\r\n },\r\n section: {\r\n margin: theme.spacing(1),\r\n },\r\n // https://stackoverflow.com/questions/61056265/how-to-override-box-created-by-tabpanel-in-material-ui\r\n tabPanel: {\r\n '&>:first-child': {\r\n padding: theme.spacing(3, 0.5),\r\n },\r\n },\r\n});\r\n\r\n/**\r\n * CommentCardList() (Component), Show multiple CommentCard with comments prop.\r\n * @param {object} props\r\n * @param {array} props.data list of comment data.\r\n * @param {func} props.onSubmitByComment function(dataUpdated) => void\r\n * @param {func} props.onDroppedFilesByComment function(filesBase64: array, data: object) => void\r\n * @param {func} props.onRemovedFileByComment\r\n */\r\nconst CommentCardList = React.memo(\r\n ({\r\n data = [],\r\n userProfile,\r\n onSubmitByComment,\r\n onDroppedFilesByComment,\r\n onRemovedFileByComment,\r\n }) => {\r\n logger('CommentCardList render');\r\n\r\n if (!data.length) {\r\n return (\r\n \r\n \r\n {/* Flexbox style */}\r\n \r\n {log.issueLogsCreateBy && (\r\n \r\n {`${log.issueLogsCreateBy.firstName} ${log.issueLogsCreateBy.lastName}`}\r\n \r\n )}\r\n\r\n {/* Component in array joining: https://stackoverflow.com/questions/34034038/how-to-render-react-components-by-using-map-and-join/54381375 */}\r\n {log.issueLogs && (\r\n \r\n {log.issueLogs.mode && (\r\n \r\n {transformIssueMode(log.issueLogs.mode)}\r\n \r\n )}\r\n \r\n {log.issueLogs.mode === issueModes.issueCreate.mode && (\r\n เรื่อง: {issueLogsContext.summary} \r\n )}\r\n {log.issueLogs.mode === issueModes.addObserver.mode && (\r\n \r\n {[\r\n // ตำแหน่ง,\r\n // issueLogsContext.position,\r\n // ส่วนงาน,\r\n // issueLogsContext.department,\r\n ในฐานะ,\r\n issueLogsContext.type === 'Subscribe' ? 'ทั่วไป (Subscribe)' : 'คณะทำงาน (Worker)',\r\n ].reduce((prev, curr) => [prev, ' ', curr])}\r\n \r\n )}\r\n {log.issueLogs.mode ===\r\n issueModes.removeObserver.mode && (\r\n \r\n {[\r\n // ตำแหน่ง,\r\n // issueLogsContext.position,\r\n // ส่วนงาน,\r\n // issueLogsContext.department,\r\n [\r\n '(ในฐานะ ',\r\n issueLogsContext.type === 'Subscribe'\r\n ? 'ทั่วไป (Subscribe)'\r\n : 'คณะทำงาน (Worker)',\r\n ')',\r\n ].join(''),\r\n ].reduce((prev, curr) => [prev, ' ', curr])}\r\n \r\n )}\r\n {log.issueLogs.mode ===\r\n issueModes.issueEditTitle.mode && (\r\n \r\n {[\r\n ...(issueLogsContext.before\r\n ? [\r\n จาก,\r\n issueLogsContext.before.title,\r\n ]\r\n : ['']),\r\n ...(issueLogsContext.after\r\n ? [\r\n เป็น,\r\n issueLogsContext.after.title,\r\n ]\r\n : ['']),\r\n ].reduce((prev, curr) => [prev, ' ', curr])}\r\n \r\n )}\r\n {log.issueLogs.mode ===\r\n issueModes.issueEditDetail.mode && (\r\n \r\n {[\r\n ...(issueLogsContext.before\r\n ? [\r\n จาก,\r\n issueLogsContext.before.detail,\r\n ]\r\n : ['']),\r\n ...(issueLogsContext.after\r\n ? [\r\n เป็น,\r\n issueLogsContext.after.detail,\r\n ]\r\n : ['']),\r\n ].reduce((prev, curr) => [prev, ' ', curr])}\r\n \r\n )}\r\n {log.issueLogs.mode ===\r\n issueModes.issueEditContract.mode && (\r\n \r\n {[\r\n ...(issueLogsContext.before\r\n ? [\r\n จาก,\r\n issueLogsContext.before.contract,\r\n ]\r\n : ['']),\r\n ...(issueLogsContext.after\r\n ? [\r\n เป็น,\r\n issueLogsContext.after.contract,\r\n ]\r\n : ['']),\r\n ].reduce((prev, curr) => [prev, ' ', curr])}\r\n \r\n )}\r\n {log.issueLogs.mode === issueModes.issueTransfer.mode && (\r\n \r\n {[\r\n ...(issueLogsContext.before\r\n ? [\r\n จาก,\r\n `ประเภท: ${issueLogsContext.before.category.name}`,\r\n `, ระดับ: ${issueLogsContext.before.level}`,\r\n issueLogsContext.before.permissionGroup\r\n ? `, กลุ่ม: ${issueLogsContext.before.permissionGroup.name}`\r\n : '',\r\n ]\r\n : ['']),\r\n ...(issueLogsContext.after\r\n ? [\r\n เป็น,\r\n `ประเภท: ${issueLogsContext.after.category.name}`,\r\n `, ระดับ: ${issueLogsContext.after.level}`,\r\n issueLogsContext.after.permissionGroup\r\n ? `, กลุ่ม: ${issueLogsContext.after.permissionGroup.name}`\r\n : '',\r\n ]\r\n : ['']),\r\n ].reduce((prev, curr) => [prev, ' ', curr])}\r\n \r\n )}\r\n {log.issueLogs.mode === issueModes.voteSet.mode && (\r\n \r\n {[\r\n ...(issueLogsContext\r\n ? [\r\n issueLogsContext.vote == 1\r\n ? 'พึงพอใจ'\r\n : 'ไม่พึงพอใจ',\r\n ]\r\n : ['']),\r\n ].reduce((prev, curr) => [prev, ' ', curr])}\r\n \r\n )}\r\n {log.issueLogs.mode ===\r\n issueModes.issueStatusSet.mode && (\r\n \r\n {[\r\n ...(issueLogsContext.before\r\n ? [\r\n จาก,\r\n \r\n )}\r\n {log.issueLogs.mode ===\r\n issueModes.processStatusSet.mode && (\r\n \r\n {[\r\n ...(issueLogsContext.before\r\n ? [\r\n จาก,\r\n \r\n )}\r\n {log.issueLogs.mode === issueModes.issueLabelSet.mode && (\r\n \r\n {[\r\n ...(issueLogsContext.remove.length\r\n ? [\r\n นำออก,\r\n \r\n )}\r\n {log.issueLogs.mode ===\r\n issueModes.issueDimensionSet.mode && (\r\n \r\n {issueLogsContext.after\r\n .map((dimA, index) => {\r\n let dimB = issueLogsContext.before[index];\r\n return [\r\n ...(dimB\r\n ? [\r\n `${dimA.name}`,\r\n จาก,\r\n dimB.levelName,\r\n `(${dimB.value})`,\r\n ]\r\n : [dimA.name]),\r\n เป็น,\r\n `${dimA.levelName} (${dimA.value})`,\r\n ].reduce((prev, curr) => [prev, ' ', curr]);\r\n })\r\n .reduce((prev, curr) => [prev, ' ', curr])}\r\n \r\n )}\r\n {log.issueLogs.mode === 'issueCommentCreate' && (\r\n \r\n {[\r\n `ประเภท: ${issueLogsContext.commentType}`,\r\n issueLogsContext.receiverType\r\n ? `ผู้รับ: ${issueLogsContext.receiverType}`\r\n : '',\r\n `รายละเอียด: ${issueLogsContext.detail}`,\r\n ].reduce((prev, curr) => [prev, ' ', curr])}\r\n \r\n )}\r\n {log.issueLogs.mode ===\r\n issueModes.issueCommentEdit.mode && (\r\n \r\n {[\r\n `ประเภท: ${issueLogsContext.before.commentType}`,\r\n issueLogsContext.before.receiverType\r\n ? `ผู้รับ: ${issueLogsContext.before.receiverType}`\r\n : '',\r\n ...(issueLogsContext.before\r\n ? [\r\n จาก,\r\n `${issueLogsContext.before.detail}`,\r\n ]\r\n : ['']),\r\n ...(issueLogsContext.after\r\n ? [\r\n เป็น,\r\n `${issueLogsContext.after.detail}`,\r\n ]\r\n : ['']),\r\n ].reduce((prev, curr) => [prev, ' ', curr])}\r\n \r\n )}\r\n \r\n \r\n เมื่อ:{' '}\r\n {formatDatetime({\r\n datetime: log.issueLogs.createDate,\r\n })}\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n {/* issue loading (by Skeleton) */}\r\n {issueReducer.isLoading && (\r\n {\r\n // Save file (file.save, request api image/vx/save) and get filesSaved\r\n let filesSaved = await file.save({\r\n data: newFiles.map((file) => ({\r\n issue_id,\r\n name: file.name,\r\n type: file.type,\r\n content: file.base64,\r\n })),\r\n });\r\n\r\n // Callback, Add file id (in filesSaved, field: id) to files (each nfile)\r\n await extendNewFiles((nfile) => {\r\n let fileSaved = filesSaved.find((fs) => fs.name === nfile.name);\r\n if (fileSaved !== undefined) {\r\n return { id: fileSaved.id };\r\n }\r\n return { id: 'n/a' };\r\n });\r\n }}\r\n onSubmit={handleUpdateIssue}\r\n isClosed={issue.issueStatuses.id === 90}\r\n closing={issue.processStatuses.id === 90}\r\n onClose={handleOpenVote}\r\n />\r\n )}\r\n \r\n \r\n กิจกรรม\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* issue loading (by Skeleton) */}\r\n {issueCommentReducer.isLoading && (\r\n \r\n {/* Form add new comment */}\r\n {\r\n // Save file (file.save, request api image/vx/save) and get filesSaved\r\n let filesSaved = await file.save({\r\n data: newFiles.map((file) => ({\r\n issue_id,\r\n name: file.name,\r\n type: file.type,\r\n content: file.base64,\r\n })),\r\n });\r\n\r\n // Callback, Add file id (in filesSaved, field: id) to files (each nfile)\r\n await extendNewFiles((nfile) => {\r\n let fileSaved = filesSaved.find(\r\n (fs) => fs.name === nfile.name\r\n );\r\n if (fileSaved !== undefined) {\r\n return { id: fileSaved.id };\r\n }\r\n return { id: 'n/a' };\r\n });\r\n }}\r\n onSubmit={handleAddComment}\r\n formControlStyle={classes.formCommentControl}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* Dialog Vote */}\r\n \r\n \r\n \r\n \r\n \r\n ประเมินความพึงพอใจการจัดการเหตุละเมิดนี้\r\n \r\n \r\n ระดับความพึงพอใจ \r\n \r\n \r\n \r\n \r\n \r\n บันทึก\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n});\r\n\r\nexport default withStyles(styles)(HelpdeskIssueActivitiesPage);\r\n","/**\r\n * HelpdeskReportIssuePage v2 ReleaseAPI (under construction)\r\n */\r\n\r\nimport React, { useState, useRef } from 'react';\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\n// import @material-ui/core\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Divider from '@material-ui/core/Divider';\r\nimport Box from '@material-ui/core/Box';\r\nimport Button from '@material-ui/core/Button';\r\n\r\n// import react-router\r\nimport { Link, Prompt } from 'react-router-dom';\r\n\r\n// import Formik and Dependency\r\nimport { Formik, Form, Field } from 'formik';\r\nimport { TextField } from 'formik-material-ui';\r\nimport * as Yup from 'yup';\r\n\r\n// import globalStyles\r\nimport globalStyles from '../../../styles/globalStyles';\r\n\r\n// import router and routers (routers constant)\r\nimport { routers } from './../../../routers';\r\n\r\n// import utils (utils, HttpClient)\r\nimport { userProfiler, logger } from './../../../utils/utils';\r\nimport { useHandleClientError } from './../../../utils/HttpClient';\r\n\r\n// import Fragments\r\n// import FileGridList from './../../fragments/FileGridList';\r\nimport SelectPersonalDataCategory from './../../fragments/SelectPersonalDataCategory';\r\nimport DropFiles from './../../fragments/DropFiles';\r\n\r\nimport { issue, file } from './../../../data';\r\nimport { useIssueCreateId } from './../../../hooks/useData';\r\n\r\n// Styles\r\nconst styles = (theme) => ({\r\n ...globalStyles(theme),\r\n root: {\r\n margin: theme.spacing(1),\r\n [theme.breakpoints.up('sm')]: {\r\n margin: theme.spacing(1, 10, 1, 10),\r\n },\r\n },\r\n formControl: {\r\n margin: theme.spacing(1, 0),\r\n },\r\n formControlOutlined: {\r\n margin: theme.spacing(2, 0),\r\n },\r\n card: {\r\n minWidth: 275,\r\n padding: theme.spacing(2),\r\n },\r\n cardContent: {\r\n minHeight: 275,\r\n },\r\n cardAction: {\r\n justifyContent: 'flex-end',\r\n '& > *': {\r\n margin: theme.spacing(1, 3, 1, 1),\r\n },\r\n },\r\n section: {\r\n margin: theme.spacing(3, 0),\r\n },\r\n});\r\n\r\n// YUP: build validation schema (validationSchema)\r\nconst validationSchema = Yup.object().shape({\r\n category_id: Yup.string().required(\r\n 'กรุณาเลือกประเภทของข้อมูลส่วนบุคคลที่มีการละเมิด'\r\n ),\r\n summary: Yup.string()\r\n .min(4, 'เรื่องโดยสรุปต้องมากกว่า 4 อักขระ')\r\n .max(255, 'เรื่องโดยสรุปต้องไม่เกิน 255 อักขระ')\r\n .required('กรุณากรอกเรื่องโดยสรุป'),\r\n description: Yup.string()\r\n .min(4, 'รายละเอียดต้องมากกว่า 4 อักขระ')\r\n .max(8000, 'รายละเอียดต้องไม่เกิน 8,000 อักขระ')\r\n .required('กรุณากรอกรายละเอียด'),\r\n contract: Yup.string()\r\n .min(4, 'ข้อมูลการติดต่อเพิ่มเติมต้องมากกว่า 4 อักขระ')\r\n .max(255, 'ข้อมูลการติดต่อเพิ่มเติมต้องไม่เกิน 255 อักขระ')\r\n .nullable(true),\r\n});\r\n\r\nconst HelpdeskReportIssuePage = (props) => {\r\n // logger (Dev only)\r\n logger(`HelpdeskReportIssuePage render`);\r\n\r\n // Classes extend from widthStyle(style)\r\n const { classes, history } = props;\r\n\r\n // Get user profile\r\n const userProfile = userProfiler.getFromLocal();\r\n\r\n // Hook handle-client-error (handle error in catch from promise reject)\r\n const handleClientError = useHandleClientError();\r\n\r\n // routFrontOf is the front office router info.\r\n const routFrontOf = routers.frontOf;\r\n\r\n // const isSave\r\n const [isSave, setIsSave] = useState(false);\r\n\r\n // Hook createId\r\n const { id, shortId, createDate } = useIssueCreateId();\r\n // logger({id:, shortId, createDate });\r\n\r\n // InitialVaue of form reporting breach\r\n const initialValues = {\r\n id,\r\n shortId,\r\n category_id: '',\r\n fullname: userProfile.user.fullname,\r\n position: userProfile.user.position,\r\n keycode: userProfile.user.keycode,\r\n department: userProfile.user.department,\r\n summary: '',\r\n description: '',\r\n email: userProfile.user.email,\r\n contract: '',\r\n issueFiles: [],\r\n };\r\n const dropFilesRef = useRef();\r\n // Show from reporting breach\r\n const showFormReportBreach = ({\r\n values,\r\n setFieldValue,\r\n resetForm,\r\n touched,\r\n errors,\r\n }) => {\r\n return (\r\n \r\n {!issueLogReducer.isLoading &&
\r\n \r\n {\r\n setSubmitting(false);\r\n let reqIssue = {\r\n id,\r\n shortId,\r\n category_id: values.category_id,\r\n fullname: values.fullname,\r\n position: values.position,\r\n department: values.department,\r\n keycode: values.keycode,\r\n email: values.email,\r\n summary: values.summary,\r\n description: values.description,\r\n contract: values.contract,\r\n // // Personal/System information\r\n // createBy: values.createBy,\r\n issueFiles: dropFilesRef.current.files\r\n .map((file) => file.id)\r\n .join(','),\r\n };\r\n\r\n // logger(reqIssue);\r\n setIsSave(true);\r\n // POST Request addIssue\r\n issue\r\n .addIssue({ issue: reqIssue })\r\n .then((result) => {\r\n history.push(routers.frontOf.issues.path);\r\n })\r\n .catch((error) => handleClientError(error));\r\n }}\r\n >\r\n {(props) => showFormReportBreach(props)}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withStyles(styles)(HelpdeskReportIssuePage);\r\n","import React, {\r\n useState,\r\n useEffect,\r\n useMemo,\r\n useCallback,\r\n useRef,\r\n} from 'react';\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Badge from '@material-ui/core/Badge';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport Backdrop from '@material-ui/core/Backdrop';\r\n\r\n// import tabs\r\nimport { Tabs, Tab, TabPanel, a11yProps } from './../../fragments/Tabs';\r\n\r\n// import styles-globalStyles\r\nimport globalStyles from './../../../styles/globalStyles';\r\n\r\nimport MaterialTable, {\r\n MTableToolbar,\r\n MTableHeader,\r\n MTableBody,\r\n} from 'material-table';\r\n\r\n// import constant\r\nimport { sortingOptions, server, muiTable } from './../../../constants';\r\n\r\n// import routers constant\r\nimport { routers } from './../../../routers';\r\n\r\n// import React-Redux & Reducer action\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport * as issueActions from '../../../actions/issue.action';\r\n\r\nimport {\r\n formatDatetime,\r\n logger,\r\n getPeriodDateById,\r\n base64,\r\n} from './../../../utils/utils';\r\nimport { useHandleClientError } from './../../../utils/HttpClient';\r\n\r\n// import fragmmet\r\nimport AccordionForm from './../../fragments/AccordionForm';\r\nimport ColumnContent from './../../fragments/ColumnContent';\r\nimport ColuumnSumUp from './../../fragments/ColuumnSumUp';\r\n// import utils\r\n\r\nconst StyledBadge = withStyles((theme) => ({\r\n badge: {\r\n right: -5,\r\n top: 2,\r\n border: `1px solid ${theme.palette.background.paper}`,\r\n padding: '2px',\r\n },\r\n}))(Badge);\r\n\r\n/**\r\n * styles\r\n * @param {*} theme\r\n */\r\nconst styles = (theme) => ({\r\n ...globalStyles(theme),\r\n root: {\r\n flexGrow: 1,\r\n backgroundColor: theme.palette.background.paper,\r\n '& .MuiCardContent-root': {\r\n padding: theme.spacing(1),\r\n },\r\n },\r\n avatarSmall: {\r\n fontSize: '9px',\r\n fontWeight: 'normal',\r\n width: theme.spacing(3),\r\n height: theme.spacing(3),\r\n },\r\n appBar: {\r\n boxShadow: 'none',\r\n borderBottom: '1px solid #e8e8e8',\r\n },\r\n // https://stackoverflow.com/questions/55078256/how-to-change-the-position-of-an-icon-component-within-a-tab-component\r\n iconLabelWrapperReverse: {\r\n flexDirection: 'row-reverse',\r\n },\r\n // https://stackoverflow.com/questions/64746735/how-to-apply-disablegutters-props-on-mtabletoolbar\r\n toolbarWrapper: {\r\n '& .MuiToolbar-regular': {\r\n minHeight: 0,\r\n },\r\n },\r\n});\r\n\r\n/**\r\n * ManageIssuesPage component\r\n * @param {*} props\r\n */\r\nconst ManageIssuesPage = (props) => {\r\n // Classes extend from widthStyle(style)\r\n const { classes } = props;\r\n\r\n logger('ManageIssuesPage render');\r\n\r\n const routBackOf = routers.backOf;\r\n\r\n // Hook handle-client-error\r\n const handleClientError = useHandleClientError();\r\n\r\n // TabPanel state & handle function\r\n const [tabValue, setTabValue] = React.useState(0);\r\n\r\n // TabPanel handle function\r\n const handleChangeTab = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n /// Hook reducer V2) Destructure multiple reducer by one useSelector\r\n let issueListReducer = useSelector(\r\n ({ issueListReducer }) => issueListReducer\r\n );\r\n\r\n // Hook reducer (by useSelector) from store\r\n const dispatch = useDispatch();\r\n\r\n // Ref accordionForm\r\n const accordionFormRef = useRef(null);\r\n\r\n // Check is badgeContent assign data from getList (server-side)\r\n let isSeverBadgeContentRef = useRef(true);\r\n\r\n // issue-filters (ifs) from catching (localStorage), *.staff\r\n const cacheIfs =\r\n useMemo(() => {\r\n let ifs = localStorage.getItem(server.ISSUE_FILTERS_KEY);\r\n return ifs ? base64.decodeObj(ifs) : {};\r\n }, []).staff || {};\r\n const cacheFilters = useMemo(() => cacheIfs.filters || {}, []);\r\n const cacheSorts = useMemo(() => cacheIfs.sorts || {}, []);\r\n const cacheKeyword = useMemo(() => cacheIfs.keyword || '', []);\r\n\r\n useEffect(() => {\r\n // Must use cache period_id but dont use cache date\r\n let { dateStart, dateEnd } = getPeriodDateById('1y');\r\n\r\n // logger({\r\n // lang: 'TH',\r\n // mode: server.REQ_PARAM_MODE_STAFF,\r\n // dateStart: cacheFilters.dateStart || dateStart,\r\n // dateEnd: cacheFilters.dateEnd || dateEnd,\r\n // category_id: cacheFilters.category_id || undefined, // default category_id all (Cancel category_id prop by undefined value)\r\n // }, {cacheFilters});\r\n\r\n dispatch(\r\n issueActions.getList({\r\n package: base64.encodeObj({\r\n lang: 'TH',\r\n mode: server.REQ_PARAM_MODE_STAFF,\r\n\r\n // Must use cache date from period_id but dont use cache date\r\n dateStart: dateStart,\r\n dateEnd: dateEnd,\r\n\r\n category_id: cacheFilters.category_id || undefined, // default category_id all (Cancel category_id prop by undefined value)\r\n }),\r\n })\r\n ).then(\r\n () => {\r\n setBadgeContent({\r\n open: mtOpenRef.current.state.data.length,\r\n close: mtCloseRef.current.state.data.length,\r\n all: mtAllRef.current.state.data.length,\r\n });\r\n },\r\n (error) => {\r\n throw error;\r\n }\r\n );\r\n return () => {\r\n logger('clearList');\r\n dispatch(issueActions.clearList());\r\n };\r\n }, []);\r\n\r\n let memoIssueListOpen = useMemo(\r\n () =>\r\n issueListReducer.result\r\n ? issueListReducer.result.filter(\r\n (issue) => issue.issueStatuses.id === 10\r\n )\r\n : [],\r\n [issueListReducer.result]\r\n );\r\n let memoIssueListClose = useMemo(\r\n () =>\r\n issueListReducer.result\r\n ? issueListReducer.result.filter(\r\n (issue) => issue.issueStatuses.id === 90\r\n )\r\n : [],\r\n [issueListReducer.result]\r\n );\r\n\r\n // Ref of material-table\r\n const mtOpenRef = useRef({});\r\n const mtCloseRef = useRef({});\r\n const mtAllRef = useRef({});\r\n\r\n /**\r\n * Component Overriding (Material-table)\r\n * https://material-table.com/#/docs/features/component-overriding\r\n */\r\n // Ref of material-table toolbar (ref onSearchChange function)\r\n const mtToolbarOpenRef = useRef();\r\n const mtToolbarCloseRef = useRef();\r\n const mtToolbarAllRef = useRef();\r\n\r\n // Ref of material-table header (ref props.onOrderChange (sorting) func)\r\n const mtHeaderOpenRef = useRef();\r\n const mtHeaderCloseRef = useRef();\r\n const mtHeaderAllRef = useRef();\r\n\r\n // Ref of material-table body (ref props.onFilterChanged (fitering) func)\r\n const mtBodyOpenRef = useRef();\r\n const mtBodyCloseRef = useRef();\r\n const mtBodyAllRef = useRef();\r\n\r\n // Ref of material-table sorting (keep sorting value)\r\n const [sortingCol, setSortingCol] = useState({\r\n name: cacheSorts.name || sortingOptions.issues[0].name,\r\n title: cacheSorts.title || sortingOptions.issues[0].title,\r\n direction: cacheSorts.direction || 'desc',\r\n });\r\n\r\n // Ref of material-table filter (keep filtering value)\r\n const [filteringCol, setFilteringCol] = useState({\r\n name: 'issues.level',\r\n title: 'ระดับ',\r\n term: cacheFilters.permissionLevels || [1, 2, 3],\r\n customFilterAndSearch: (term, rowData) => {\r\n return term.includes(rowData.issues.level);\r\n },\r\n });\r\n\r\n const badgeMax = 9999;\r\n\r\n const [badgeContent, setBadgeContent] = useState({\r\n open: 0,\r\n close: 0,\r\n all: 0,\r\n });\r\n\r\n // useEffect issueListReducer 1st for setBadgeContent\r\n useEffect(() => {\r\n if (issueListReducer.result) {\r\n logger('(1) setBadgeContent depend on issueListReducer');\r\n setBadgeContent({\r\n open: memoIssueListOpen.length,\r\n close: memoIssueListClose.length,\r\n all: issueListReducer.result.length,\r\n });\r\n }\r\n }, [issueListReducer.result]);\r\n\r\n // useEffect sortingCol\r\n useEffect(() => {\r\n mtHeaderOpenRef.current.props.onOrderChange(0, sortingCol.direction);\r\n mtHeaderCloseRef.current.props.onOrderChange(0, sortingCol.direction);\r\n mtHeaderAllRef.current.props.onOrderChange(0, sortingCol.direction);\r\n logger('useEffect onOrderChange');\r\n }, [sortingCol]);\r\n\r\n // useEffect filteringCol\r\n useEffect(() => {\r\n mtBodyOpenRef.current.props.onFilterChanged(1, filteringCol.term);\r\n mtBodyCloseRef.current.props.onFilterChanged(1, filteringCol.term);\r\n mtBodyAllRef.current.props.onFilterChanged(1, filteringCol.term);\r\n logger('useEffect onFiterChange');\r\n }, [filteringCol]);\r\n\r\n // Memo (func) handle search. (props onSearch of AccordionForm)\r\n const memoHandleSearchAndFilter = useCallback(\r\n // SSP (server searching param), CSP (client searching param)\r\n async (\r\n {\r\n // SSP\r\n dateStart,\r\n // SSP\r\n dateEnd,\r\n // SSP\r\n category_id,\r\n // CSP\r\n permissionLevels,\r\n },\r\n keyword,\r\n { title, name, direction },\r\n side\r\n ) => {\r\n if (side === 'SS') {\r\n // Set isFilterAndSearch for prevent repleat useEffect 1st setBadgeContent\r\n // getList new data\r\n await dispatch(\r\n issueActions.getList({\r\n package: base64.encodeObj({\r\n lang: 'TH',\r\n mode: server.REQ_PARAM_MODE_STAFF,\r\n dateStart,\r\n dateEnd,\r\n category_id,\r\n }),\r\n })\r\n ).catch((error) => handleClientError(error));\r\n }\r\n\r\n // Search (updating) (Do not check keyword that is existed or ever searched, course of material-table ref.searchText (form prev search) not clear)\r\n logger('search');\r\n mtToolbarOpenRef.current.onSearchChange(keyword);\r\n mtToolbarCloseRef.current.onSearchChange(keyword);\r\n mtToolbarAllRef.current.onSearchChange(keyword);\r\n\r\n // set sortingCol (updating)\r\n if (sortingCol.name !== name || sortingCol.direction !== direction) {\r\n logger('sort');\r\n setSortingCol({ title, name, direction });\r\n }\r\n\r\n // set fiteringCol (updating)\r\n if (filteringCol.term !== permissionLevels) {\r\n logger('filter');\r\n setFilteringCol((prev) => ({ ...prev, term: permissionLevels }));\r\n }\r\n },\r\n [sortingCol, filteringCol]\r\n );\r\n\r\n // Memo (func) customFilterAndSearchContent\r\n const memoCustomFilterAndSearchContent = useCallback((term, rowData) => {\r\n let searchSource = [\r\n rowData.issues.shortId,\r\n formatDatetime({ datetime: rowData.issues.createDate }),\r\n rowData.issues.summary,\r\n rowData.issues.fullname,\r\n rowData.processStatuses.name,\r\n ].join(' ');\r\n\r\n // Search and return result\r\n return searchSource.indexOf(term) != -1;\r\n }, []);\r\n\r\n const renderColumnContent = (rowData) => (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n }\r\n />\r\n \r\n
\r\n ),\r\n Header: (props) => (\r\n \r\n
\r\n ),\r\n Header: (props) => (\r\n \r\n
\r\n ),\r\n Header: (props) => \r\n {/* issue loading (by Skeleton) */}\r\n {issueReducer.isLoading && (\r\n {\r\n // Save file (file.save, request api image/vx/save) and get filesSaved\r\n let filesSaved = await file.save({\r\n data: newFiles.map((file) => ({\r\n issue_id,\r\n name: file.name,\r\n type: file.type,\r\n content: file.base64,\r\n })),\r\n });\r\n\r\n // Callback, Add file id (in filesSaved, field: id) to files (each nfile)\r\n await extendNewFiles((nfile) => {\r\n let fileSaved = filesSaved.find((fs) => fs.name === nfile.name);\r\n if (fileSaved !== undefined) {\r\n return { id: fileSaved.id };\r\n }\r\n return { id: 'n/a' };\r\n });\r\n }}\r\n onSubmit={handleUpdateIssue}\r\n editing={isManageIssue(\r\n issue.readOnlyStatus.readOnly,\r\n issue.issues.worker === upf.user.id,\r\n issue.issues.processStatus_id,\r\n {\r\n operation: issueOperations.updateIssue,\r\n isCreater: upf.user.id === issue.issues.createBy,\r\n }\r\n )}\r\n isClosed={issue.issueStatuses.id === 90}\r\n closing={false}\r\n />\r\n )}\r\n\r\n \r\n \r\n กิจกรรม\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n */}\r\n
\r\n );\r\n});\r\n\r\nexport default withStyles(styles)(ManageIssueActivitiesPage);\r\n","const initialState = {\r\n isFetching: null,\r\n isError: false,\r\n result: { content: { data: [], page: 1, totalCount: 0 }, status: true },\r\n};\r\n\r\nexport const SETTING_PERMISSION_FETCHING = 'SETTING_PERMISSION_FETCHING';\r\nexport const SETTING_PERMISSION_FAILED = 'SETTING_PERMISSION_FAILED';\r\nexport const SETTING_PERMISSION_SUCCESS = 'SETTING_PERMISSION_SUCCESS';\r\nexport const SettingPermissionReducer = (\r\n state = initialState,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n case SETTING_PERMISSION_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_PERMISSION_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: [], page: 1, totalCount: 0 }},\r\n };\r\n case SETTING_PERMISSION_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\n\r\nconst initialState2 = {\r\n isFetching: null,\r\n isError: false,\r\n result: { content: { data: [], status: true }},\r\n};\r\n\r\nexport const SETTING_PERMISSION_DELETE_FETCHING = 'SETTING_PERMISSION_DELETE_FETCHING';\r\nexport const SETTING_PERMISSION_DELETE_FAILED = 'SETTING_PERMISSION_DELETE_FAILED';\r\nexport const SETTING_PERMISSION_DELETE_SUCCESS = 'SETTING_PERMISSION_DELETE_SUCCESS';\r\nexport const SettingPermissionDeleteReducer = (\r\n state = initialState2,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n case SETTING_PERMISSION_DELETE_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_PERMISSION_DELETE_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: []}},\r\n };\r\n case SETTING_PERMISSION_DELETE_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\n","import { sysURL } from '../constants';\r\nimport { httpClient } from './../utils/HttpClient';\r\nimport * as M from '../reducers/settingPermission.reducer';\r\n\r\n//redirect to login page\r\n\r\n//load Count Summary Data Group \";\r\nexport const setSettingPermissionStateToFetching = () => ({\r\n type: M.SETTING_PERMISSION_FETCHING,\r\n});\r\n\r\nexport const setSettingPermissionStateToFailed = () => ({\r\n type: M.SETTING_PERMISSION_FAILED,\r\n});\r\n\r\nexport const setSettingPermissionStateToSuccess = (payload) => ({\r\n type: M.SETTING_PERMISSION_SUCCESS,\r\n payload,\r\n});\r\n\r\nexport const loadSettingPermission = ({\r\n columnOrder,\r\n isAscending,\r\n pageNo,\r\n perPage,\r\n search,\r\n}) => {\r\n let api = 'permissiongroup/v1/getListAllPagingWithUserRight';\r\n let url = api;\r\n return async (dispatch, getState) => {\r\n try {\r\n dispatch(setSettingPermissionStateToFetching());\r\n\r\n let result = await httpClient.post(url, {\r\n perPage: perPage,\r\n pageNo: pageNo,\r\n columnOrder: columnOrder,\r\n isAscending: isAscending,\r\n search: search,\r\n // searchObj: search,\r\n });\r\n\r\n if (result.data.status == true) {\r\n dispatch(setSettingPermissionStateToSuccess(result.data));\r\n } else {\r\n dispatch(setSettingPermissionStateToFailed([]));\r\n }\r\n\r\n // let dataMock = {\r\n // content: {\r\n // data: [\r\n // {\r\n // id: '1',\r\n // fullName: 'uaychai saengfa',\r\n // permissionType: 'level 1 ',\r\n // },\r\n // {\r\n // id: '2',\r\n // fullName: 'uaychai saengfa',\r\n // permissionType: 'level 1 ',\r\n // },\r\n // {\r\n // id: '3',\r\n // fullName: 'uaychai saengfa',\r\n // permissionType: 'level 1 ',\r\n // },\r\n // {\r\n // id: '4',\r\n // fullName: 'uaychai saengfa',\r\n // permissionType: 'level 1 ',\r\n // },\r\n // {\r\n // id: '5',\r\n // fullName: 'uaychai saengfa',\r\n // permissionType: 'level 1 ',\r\n // },\r\n // {\r\n // id: '6',\r\n // fullName: 'uaychai saengfa',\r\n // permissionType: 'level 1 ',\r\n // },\r\n // {\r\n // id: '7',\r\n // fullName: 'uaychai saengfa',\r\n // permissionType: 'level 1 ',\r\n // },\r\n // {\r\n // id: '8',\r\n // fullName: 'uaychai saengfa',\r\n // permissionType: 'level 1 ',\r\n // },\r\n // {\r\n // id: '9',\r\n // fullName: 'uaychai saengfa',\r\n // permissionType: 'level 1 ',\r\n // },\r\n // {\r\n // id: '10',\r\n // fullName: 'uaychai saengfa',\r\n // permissionType: 'level 1 ',\r\n // },\r\n // ],\r\n // countRow: 10,\r\n // },\r\n // };\r\n //dispatch(setSettingPermissionStateToSuccess(dataMock));\r\n } catch (error) {\r\n console.log(error);\r\n dispatch(setSettingPermissionStateToFailed({ data: { message: error } }));\r\n }\r\n\r\n return getState().SettingPermissionReducer.result.content;\r\n };\r\n};\r\n\r\n//delete data \";\r\nexport const setSettingPermissionDeleteStateToFetching = () => ({\r\n type: M.SETTING_PERMISSION_DELETE_FETCHING,\r\n});\r\n\r\nexport const setSettingPermissionDeleteStateToFailed = () => ({\r\n type: M.SETTING_PERMISSION_DELETE_FAILED,\r\n});\r\n\r\nexport const setSettingPermissionDeleteStateToSuccess = (payload) => ({\r\n type: M.SETTING_PERMISSION_DELETE_SUCCESS,\r\n payload,\r\n});\r\n\r\nexport const deleteSettingPermission = (data) => {\r\n let api = 'permissiongroup/v1/' + data;\r\n let url = api;\r\n return async (dispatch) => {\r\n try {\r\n dispatch(setSettingPermissionDeleteStateToFetching());\r\n\r\n let result = await httpClient.delete(url);\r\n\r\n if (result.data.status == true) {\r\n dispatch(setSettingPermissionDeleteStateToSuccess(result.data));\r\n } else {\r\n dispatch(setSettingPermissionDeleteStateToFailed([]));\r\n }\r\n } catch (error) {\r\n console.log(error);\r\n dispatch(\r\n setSettingPermissionDeleteStateToFailed({ data: { message: error } })\r\n );\r\n }\r\n\r\n // return getState().SettingPermissionReducer.result.content;\r\n };\r\n};\r\n","//Save Permission\r\nconst initialState = {\r\n isFetching: null,\r\n isError: false,\r\n result: { content: { data: []}, status: true },\r\n};\r\n\r\nexport const SETTING_PERMISSION_MANAGE_FETCHING =\r\n 'SETTING_PERMISSION_MANAGE_FETCHING';\r\nexport const SETTING_PERMISSION_MANAGE_FAILED =\r\n 'SETTING_PERMISSION_MANAGE_FAILED';\r\nexport const SETTING_PERMISSION_MANAGE_SUCCESS =\r\n 'SETTING_PERMISSION_MANAGE_SUCCESS';\r\nexport const SettingPermissionManageReducer = (\r\n state = initialState,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n case SETTING_PERMISSION_MANAGE_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_PERMISSION_MANAGE_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: []} },\r\n };\r\n case SETTING_PERMISSION_MANAGE_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\n\r\nexport const SETTING_PERMISSION_MANAGE_SAVE_FETCHING =\r\n 'SETTING_PERMISSION_MANAGE_SAVE_FETCHING';\r\nexport const SETTING_PERMISSION_MANAGE_SAVE_FAILED =\r\n 'SETTING_PERMISSION_MANAGE_SAVE_FAILED';\r\nexport const SETTING_PERMISSION_MANAGE_SAVE_SUCCESS =\r\n 'SETTING_PERMISSION_MANAGE_SAVE_SUCCESS';\r\nexport const SettingPermissionManageSaveReducer = (\r\n state = initialState,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n case SETTING_PERMISSION_MANAGE_SAVE_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_PERMISSION_MANAGE_SAVE_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: []} },\r\n };\r\n case SETTING_PERMISSION_MANAGE_SAVE_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\n//Edit permission\r\nexport const SETTING_PERMISSION_MANAGE_EDIT_FETCHING =\r\n 'SETTING_PERMISSION_MANAGE_EDIT_FETCHING';\r\nexport const SETTING_PERMISSION_MANAGE_EDIT_FAILED =\r\n 'SETTING_PERMISSION_MANAGE_EDIT_FAILED';\r\nexport const SETTING_PERMISSION_MANAGE_EDIT_SUCCESS =\r\n 'SETTING_PERMISSION_MANAGE_EDIT_SUCCESS';\r\nexport const SettingPermissionManageEditReducer = (\r\n state = initialState,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n case SETTING_PERMISSION_MANAGE_EDIT_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_PERMISSION_MANAGE_EDIT_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: []} },\r\n };\r\n case SETTING_PERMISSION_MANAGE_EDIT_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\n//Select By Id\r\nexport const SETTING_PERMISSION_MANAGE_BY_ID_FETCHING =\r\n 'SETTING_PERMISSION_MANAGE_BY_ID_FETCHING';\r\nexport const SETTING_PERMISSION_MANAGE_BY_ID_FAILED =\r\n 'SETTING_PERMISSION_MANAGE_BY_ID_FAILED';\r\nexport const SETTING_PERMISSION_MANAGE_BY_ID_SUCCESS =\r\n 'SETTING_PERMISSION_MANAGE_BY_ID_SUCCESS';\r\nexport const SettingPermissionManageByIdReducer = (\r\n state = initialState,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n case SETTING_PERMISSION_MANAGE_BY_ID_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_PERMISSION_MANAGE_BY_ID_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: []} },\r\n };\r\n case SETTING_PERMISSION_MANAGE_BY_ID_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\n","import { sysURL } from '../constants';\r\nimport { httpClient } from './../utils/HttpClient';\r\nimport * as M from '../reducers/settingPermissionManage.reducer';\r\n\r\n//save data\";\r\nexport const setSettingPermissionManageSaveStateToFetching = () => ({\r\n type: M.SETTING_PERMISSION_MANAGE_SAVE_FETCHING,\r\n});\r\n\r\nexport const setSettingPermissionManageSaveStateToFailed = () => ({\r\n type: M.SETTING_PERMISSION_MANAGE_SAVE_FAILED,\r\n});\r\n\r\nexport const setSettingPermissionManageSaveStateToSuccess = (payload) => ({\r\n type: M.SETTING_PERMISSION_MANAGE_SAVE_SUCCESS,\r\n payload,\r\n});\r\n\r\nexport const saveSettingPermission = (data) => {\r\n let api = 'permissiongroup/v1/save';\r\n let url = api;\r\n return async (dispatch) => {\r\n try {\r\n dispatch(setSettingPermissionManageSaveStateToFetching());\r\n\r\n let result = await httpClient.post(url, data);\r\n\r\n if (result.data.status == true) {\r\n dispatch(setSettingPermissionManageSaveStateToSuccess(result.data));\r\n } else {\r\n dispatch(setSettingPermissionManageSaveStateToFailed([]));\r\n }\r\n } catch (error) {\r\n console.log(error);\r\n dispatch(\r\n setSettingPermissionManageSaveStateToFailed({\r\n data: { message: error },\r\n })\r\n );\r\n }\r\n\r\n // return getState().SettingPermissionReducer.result.content;\r\n };\r\n};\r\n\r\n//edit,update data \";\r\nexport const setSettingPermissionManageEditStateToFetching = () => ({\r\n type: M.SETTING_PERMISSION_MANAGE_EDIT_FETCHING,\r\n});\r\n\r\nexport const setSettingPermissionManageEditStateToFailed = () => ({\r\n type: M.SETTING_PERMISSION_MANAGE_EDIT_FAILED,\r\n});\r\n\r\nexport const setSettingPermissionManageEditStateToSuccess = (payload) => ({\r\n type: M.SETTING_PERMISSION_MANAGE_EDIT_SUCCESS,\r\n payload,\r\n});\r\n\r\nexport const editSettingPermission = (data) => {\r\n let api = 'permissiongroup/v1/save';\r\n let url = api;\r\n return async (dispatch) => {\r\n try {\r\n dispatch(setSettingPermissionManageEditStateToFetching());\r\n\r\n let result = await httpClient.put(url, data);\r\n\r\n if (result.data.status == true) {\r\n dispatch(setSettingPermissionManageEditStateToSuccess(result.data));\r\n } else {\r\n dispatch(setSettingPermissionManageEditStateToFailed([]));\r\n }\r\n } catch (error) {\r\n console.log(error);\r\n dispatch(\r\n setSettingPermissionManageEditStateToFailed({\r\n data: { message: error },\r\n })\r\n );\r\n }\r\n\r\n // return getState().SettingPermissionReducer.result.content;\r\n };\r\n};\r\n\r\n// load Setting Permission By Id\r\nexport const setSettingPermissionManageByIdStateToFetching = () => ({\r\n type: M.SETTING_PERMISSION_MANAGE_BY_ID_FETCHING,\r\n});\r\n\r\nexport const setSettingPermissionManageByIdStateToFailed = () => ({\r\n type: M.SETTING_PERMISSION_MANAGE_BY_ID_FAILED,\r\n});\r\n\r\nexport const setSettingPermissionManageByIdStateToSuccess = (payload) => ({\r\n type: M.SETTING_PERMISSION_MANAGE_BY_ID_SUCCESS,\r\n payload,\r\n});\r\n\r\nexport const loadSettingPermissionById = (data) => {\r\n let api = 'permissiongroup/v1/getById?data=' + data;\r\n let url = api;\r\n return async (dispatch) => {\r\n try {\r\n dispatch(setSettingPermissionManageByIdStateToFetching());\r\n\r\n let result = await httpClient.get(url);\r\n\r\n if (result.data.status == true) {\r\n \r\n dispatch(setSettingPermissionManageByIdStateToSuccess(result.data));\r\n } else {\r\n dispatch(setSettingPermissionManageByIdStateToFailed([]));\r\n }\r\n } catch (error) {\r\n console.log(error);\r\n dispatch(\r\n setSettingPermissionManageByIdStateToFailed({\r\n data: { message: error },\r\n })\r\n );\r\n }\r\n\r\n // return getState().SettingPermissionReducer.result.content;\r\n \r\n };\r\n};\r\n","import React, { useState, useEffect, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Field } from 'formik';\r\n//import { Select } from 'formik-material-ui';\r\nimport Select, { Option, ReactSelectProps } from 'react-select';\r\nimport {\r\n CircularProgress,\r\n FormControl,\r\n InputLabel,\r\n MenuItem,\r\n FormHelperText,\r\n ListItemText,\r\n Checkbox,\r\n Input,\r\n Button,\r\n} from '@material-ui/core';\r\nimport { FormatColorReset } from '@material-ui/icons';\r\nimport { useCategoryGetListAll } from './../../../hooks/useData';\r\n\r\nconst options = [\r\n {\r\n value: 1,\r\n label: 'ข้อมูลพื้นฐานที่ระบุตัวตน เช่น ชื่อ รายละเอียดการติดต่อ',\r\n },\r\n { value: 2, label: 'ข้อมูลที่ระบุตัวตน เช่น Username และ Password' },\r\n {\r\n value: 3,\r\n label: 'ข้อมูลด้านการเงิน เช่น Credit Card ID ข้อมูลสถาบันการเงิน',\r\n },\r\n { value: 4, label: 'ข้อมูลด้าน Biometric' },\r\n { value: 5, label: 'ข้อมูลด้านสุขภาพ' },\r\n { value: 6, label: 'ข้อมูลศาสนาและความเชื่อ' },\r\n { value: 7, label: 'ข้อมูลเกี่ยวกับความเห็นทางการเมือง' },\r\n { value: 8, label: 'ข้อมูลเกี่ยวกับเพศและเพศสภาพ' },\r\n {\r\n value: 9,\r\n label: 'ข้อมูลส่วนบุคคลที่เป็นทางการ เช่น Passport ใบขับขี่ บัตรประชาชน',\r\n },\r\n { value: 10, label: 'ข้อมูลตำแหน่งสถานที่' },\r\n { value: 11, label: 'ไม่สามารถระบุได้' },\r\n { value: 12, label: 'อื่นๆ' },\r\n];\r\nconst personalDataCategories = [\r\n 'ข้อมูลพื้นฐานที่ระบุตัวตน เช่น ชื่อ รายละเอียดการติดต่อ',\r\n 'ข้อมูลที่ระบุตัวตน เช่น Username และ Password',\r\n 'ข้อมูลด้านการเงิน เช่น Credit Card ID ข้อมูลสถาบันการเงิน',\r\n 'ข้อมูลด้าน Biometric',\r\n 'ข้อมูลด้านสุขภาพ',\r\n 'ข้อมูลศาสนาและความเชื่อ',\r\n 'ข้อมูลเกี่ยวกับความเห็นทางการเมือง',\r\n 'ข้อมูลเกี่ยวกับเพศและเพศสภาพ',\r\n 'ข้อมูลส่วนบุคคลที่เป็นทางการ เช่น Passport ใบขับขี่ บัตรประชาชน',\r\n 'ข้อมูลตำแหน่งสถานที่',\r\n 'ไม่สามารถระบุได้',\r\n 'อื่นๆ',\r\n];\r\n\r\nconst customStyles = {\r\n control: (provide, state) => ({\r\n flexDirection: 'row',\r\n display: 'flex',\r\n border: '1px solid #ccc',\r\n font: '1.2rem',\r\n }),\r\n valueContainer: () => ({\r\n flexDirection: 'row',\r\n margin: '5px',\r\n padding: '5px',\r\n fontSize: '1rem',\r\n minWidth: '90%',\r\n }),\r\n indicatorsContainer: () => ({\r\n flexDirection: 'row',\r\n display: 'flex',\r\n minWidth: '10%',\r\n }),\r\n};\r\n/**\r\n * SelectPersonalDataCategory() (component)\r\n * @param {string} name, name of select element (default: category_id)\r\n * @param {string} id, id of select element (default: category_id)\r\n * @param {string} label, label of select element (default: \"ประเภทของข้อมูลส่วนบุคคลที่มีการละเมิด\")\r\n * @param {function} onChange, onChange\r\n * @param {string|number} value, value of select element\r\n * @param {Formik.touched} touched\r\n * @param {Formik.errors} errors\r\n * @param {object} className, className of select element\r\n * @returns (element) SelectPersonalDataCategory\r\n */\r\nconst SelectMultiPersonalDataCategory = ({\r\n name,\r\n id,\r\n label = 'ประเภทของข้อมูลส่วนบุคคลที่มีการละเมิด',\r\n onChange,\r\n value = '',\r\n touched,\r\n errors,\r\n className,\r\n}) => {\r\n const [selectedValue, setSelectedValue] = useState([\r\n // {\r\n // value: 1,\r\n // label: 'ข้อมูลพื้นฐานที่ระบุตัวตน เช่น ชื่อ รายละเอียดการติดต่อ',\r\n // },\r\n // { value: 2, label: 'ข้อมูลที่ระบุตัวตน เช่น Username และ Password' },\r\n // {\r\n // value: 3,\r\n // label: 'ข้อมูลด้านการเงิน เช่น Credit Card ID ข้อมูลสถาบันการเงิน',\r\n // },\r\n // { value: 4, label: 'ข้อมูลด้าน Biometric' },\r\n // { value: 5, label: 'ข้อมูลด้านสุขภาพ' },\r\n ]);\r\n\r\n const categorys = (data) => {\r\n return data.map((el) => ({\r\n category_id: el.id,\r\n name:el.name,\r\n }));\r\n };\r\n\r\n const categories = categorys(useCategoryGetListAll());\r\n\r\n\r\n //Set internal value (selectedValue) when external value is changed\r\n useEffect(() => {\r\n setSelectedValue(value);\r\n }, [value]);\r\n\r\n //const [personName, setPersonName] = React.useState([]);\r\n\r\n //const handleChange = (event) => {\r\n // setPersonName(event.target.value);\r\n // console.log(event);\r\n //};\r\n // Handle change select\r\n const memoHandleChange = useCallback((e) => {\r\n // let context = typeof c.props.children === 'string' ? c.props.children : '';\r\n onChange && onChange(e);\r\n\r\n \r\n setSelectedValue(e);\r\n });\r\n\r\n let labelPlaceHold = 'เลือกประเภทของข้อมูลส่วนบุคคลที่มีการละเมิด';\r\n\r\n return (\r\n \r\n {/* issue loading (by Skeleton) */}\r\n {issueCommentReducer.isLoading && (\r\n \r\n {isManageIssue(\r\n issue.readOnlyStatus.readOnly,\r\n issue.issues.worker === upf.user.id,\r\n issue.issues.processStatus_id,\r\n {\r\n operation: issueOperations.addComment,\r\n }\r\n ) && (\r\n \r\n {\r\n // Save file (file.save, request api image/vx/save) and get filesSaved\r\n let filesSaved = await file.save({\r\n data: newFiles.map((file) => ({\r\n issue_id,\r\n name: file.name,\r\n type: file.type,\r\n content: file.base64,\r\n })),\r\n });\r\n\r\n // Callback, Add file id (in filesSaved, field: id) to files (each nfile)\r\n await extendNewFiles((nfile) => {\r\n let fileSaved = filesSaved.find(\r\n (fs) => fs.name === nfile.name\r\n );\r\n if (fileSaved !== undefined) {\r\n return { id: fileSaved.id };\r\n }\r\n return { id: 'n/a' };\r\n });\r\n }}\r\n onSubmit={handleAddComment}\r\n formControlStyle={classes.formCommentWidth}\r\n />\r\n \r\n )}\r\n \r\n )}\r\n
\r\n \r\n {!issueLogReducer.isLoading &&
\r\n \r\n Under Construction \r\n
\r\n \r\n {label} \r\n
\r\n \r\n {labelPlaceHold} \r\n
\r\n \r\n {' '}\r\n
*/}\r\n \r\n );\r\n};\r\n\r\nexport default React.memo(SelectMultipleEmails);\r\n","import React from 'react';\r\nimport {\r\n SolarSystemLoading,\r\n WaveTopBottomLoading,\r\n WindMillLoading,\r\n} from 'react-loadingg';\r\nimport Backdrop from '@material-ui/core/Backdrop';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport Button from '@material-ui/core/Button';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n backdrop: {\r\n zIndex: theme.zIndex.drawer + 1,\r\n color: '#fff',\r\n },\r\n}));\r\n\r\nexport const Backdrops = (props) => {\r\n const classes = useStyles();\r\n const { open,handleClose } = props;\r\n return (\r\n - \r\n {usurs.map((option) => (\r\n
- {option} \r\n ))}\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport const SolarSystemLoadings = () => \r\n \r\n \r\n \r\n {actionStatus.action == 'add' ? \r\n {actionStatus.label}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\nconst FormSettingPermissions = React.memo(\r\n withStyles(styles)(FormSettingPermission)\r\n);\r\n\r\nconst SettingPermissionManagePage = (props) => {\r\n const {\r\n open,\r\n setOpen,\r\n classes,\r\n actionStatus,\r\n keyValues,\r\n setFieldValue,\r\n touched,\r\n errors,\r\n isSubmitting,\r\n\r\n ...rest\r\n } = props;\r\n\r\n const theme = useTheme();\r\n const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));\r\n const handleClickOpen = () => {\r\n setOpen(true);\r\n };\r\n\r\n const handleClose = () => {\r\n setOpen(false);\r\n };\r\n\r\n const dispatch = useDispatch();\r\n const SettingPermissionSaveReducer = useSelector(\r\n ({ SettingPermissionSaveReducer }) => SettingPermissionSaveReducer\r\n );\r\n const SettingPermissionManageByIdReducer = useSelector(\r\n ({ SettingPermissionManageByIdReducer }) =>\r\n SettingPermissionManageByIdReducer\r\n );\r\n\r\n const loadSettingPermissionById = () => {\r\n dispatch(\r\n settingPermissionManageAction.loadSettingPermissionById(keyValues)\r\n ).then(() => {});\r\n };\r\n\r\n useEffect(() => {\r\n if (actionStatus.action == 'edit') {\r\n loadSettingPermissionById();\r\n }\r\n }, []);\r\n let permissionGroupData;\r\n if (actionStatus.action == 'add') {\r\n initialValues = {\r\n permissionLevel_id: '',\r\n keycodes: '',\r\n departmentId: '',\r\n permissionGroupName: '',\r\n permissionGroupDescription: '',\r\n category_id: '',\r\n categoryValue: [],\r\n user_id: '',\r\n userValue: [],\r\n userData: [],\r\n noticedEmails: [],\r\n };\r\n } else {\r\n permissionGroupData = SettingPermissionManageByIdReducer.result.content;\r\n if (permissionGroupData.group != undefined) {\r\n //set default tab1\r\n initialValues.permissionLevel_id =\r\n permissionGroupData.group.permissionLevel_id;\r\n initialValues.permissionGroupName = permissionGroupData.group.name;\r\n initialValues.departmentId = permissionGroupData.group.keycodes;\r\n initialValues.permissionGroupDescription =\r\n permissionGroupData.group.description == null\r\n ? ''\r\n : permissionGroupData.group.description;\r\n //set default tab2\r\n initialValues.categoryValue = permissionGroupData.categorys;\r\n initialValues.category_id =\r\n permissionGroupData.categorys.length > 0\r\n ? permissionGroupData.categorys[0].name\r\n : '';\r\n initialValues.userData = permissionGroupData.users;\r\n\r\n //set default tab3\r\n initialValues.noticedEmails = permissionGroupData.noticedEmails || [];\r\n }\r\n }\r\n return (\r\n \r\n \r\n {\r\n let data = {\r\n group: {\r\n permissionLevel_id: values.permissionLevel_id,\r\n keycodes: values.departmentId,\r\n name: values.permissionGroupName,\r\n description:\r\n values.permissionGroupDescription == ''\r\n ? null\r\n : values.permissionGroupDescription,\r\n },\r\n categorys: values.categoryValue,\r\n users: values.userData,\r\n noticedEmails: values.noticedEmails,\r\n };\r\n\r\n if (actionStatus.action == 'edit') {\r\n data.group['id'] = keyValues;\r\n }\r\n\r\n console.log('Save values:', { values });\r\n\r\n dispatch(\r\n actionStatus.action == 'add'\r\n ? settingPermissionManageAction.saveSettingPermission(data)\r\n : settingPermissionManageAction.editSettingPermission(data)\r\n ).then(() => {\r\n setSubmitting(false);\r\n setOpen(false);\r\n rest.reloadTable();\r\n });\r\n }}\r\n >\r\n {({\r\n values,\r\n setFieldValue,\r\n touched,\r\n errors,\r\n isSubmitting,\r\n resetForm,\r\n }) => (\r\n
\r\n );\r\n};\r\nexport default React.memo(withStyles(styles)(SettingPermissionManagePage));\r\n","import React from 'react';\r\nimport Button from '@material-ui/core/Button';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nexport const ConfirmDialog = (props) => {\r\n const {\r\n open,\r\n handleClose,\r\n message,\r\n OK = 'OK',\r\n Cancel = 'Cancel',\r\n ...rests\r\n } = props;\r\n //const [open, setOpen] = React.useState(false);\r\n\r\n return (\r\n \r\n
*/}\r\n \r\n ) : null}\r\n \r\n handleClose(false)}\r\n aria-labelledby=\"confirm-dialog-title\"\r\n aria-describedby=\"confirm-dialog-description\"\r\n disableBackdropClick={true}\r\n >\r\n {'ยืนยัน'} \r\n \r\n \r\n {message}\r\n \r\n \r\n \r\n handleClose(false)}\r\n variant=\"contained\"\r\n >\r\n {Cancel}\r\n \r\n handleClose(true)}\r\n variant=\"contained\"\r\n color=\"primary\"\r\n autoFocus\r\n style={{ textTransform: 'none' }}\r\n {...rests}\r\n >\r\n {OK}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport MaterialTable, { MTableToolbar } from 'material-table';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport PropTypes from 'prop-types';\r\nimport { Typography, Box, Paper, Grid, Button } from '@material-ui/core';\r\nimport * as settingPermissionAction from '../../../actions/settingPermission.action';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n// import globalStyles\r\nimport globalStyles from '../../../styles/globalStyles';\r\n\r\n//import AppSidebarRBack, IssueCard, ActivityCard\r\nimport AppSidebarRBack from './../../fragments/AppSidebarRBack';\r\nimport IssueCard from './../../fragments/IssueCard';\r\nimport ActivityCard from './../../fragments/ActivityCard';\r\nimport FormComment from './../../fragments/FormComment';\r\n\r\n// import dom Constant\r\nimport { dom } from './../../../constants';\r\n\r\n// import utils\r\nimport { formatDatetime, logger } from './../../../utils/utils';\r\n\r\n// import hooks\r\nimport { useHandleClientError } from '../../../utils/HttpClient';\r\n\r\n// import data\r\nimport { issues } from './../../../data';\r\nimport EditTwoToneIcon from '@material-ui/icons/EditTwoTone';\r\nimport DeleteTwoToneIcon from '@material-ui/icons/DeleteTwoTone';\r\nimport { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport Icon from '@material-ui/core/Icon';\r\nimport AddTwoTone from '@material-ui/icons/AddTwoTone';\r\nimport SettingPermissionManagePage from './SettingPermissionManagePage';\r\nimport { ConfirmDialog } from '../../fragments/Dialog/Dialog';\r\nimport {muiTable} from '../../../constants/index';\r\n\r\n// Styles\r\nconst styles = (theme) => ({\r\n ...globalStyles(theme),\r\n root: {\r\n margin: theme.spacing(1),\r\n },\r\n formControl: {\r\n margin: theme.spacing(1, 0, 1, 0),\r\n },\r\n card: {\r\n minWidth: 275,\r\n padding: theme.spacing(1, 1, 2, 2),\r\n },\r\n cardContent: {\r\n minHeight: 275,\r\n },\r\n section: {\r\n margin: theme.spacing(1),\r\n },\r\n paper: {\r\n padding: theme.spacing(1),\r\n textAlign: 'center',\r\n color: theme.palette.text.secondary,\r\n },\r\n cursor_pointer: {\r\n cursor: 'pointer',\r\n },\r\n});\r\nconst theme = createMuiTheme({\r\n palette: {\r\n primary: {\r\n main: '#4caf50',\r\n },\r\n secondary: {\r\n main: '#ff9100',\r\n },\r\n },\r\n});\r\nconst SettingPermissionPage = React.memo((props) => {\r\n let { data, classes } = props;\r\n const dispatch = useDispatch();\r\n const SettingPermissionReducer = useSelector(\r\n ({ SettingPermissionReducer }) => SettingPermissionReducer\r\n );\r\n\r\n const [open, setOpen] = React.useState(false);\r\n const [actionStatus, setActionStatus] = React.useState(false);\r\n const [editKey, setEditKey] = React.useState(null);\r\n const [openConfirm, setOpenConfirm] = React.useState(false);\r\n const [selectGroupId, setSelectGroupId] = React.useState(null);\r\n const [messageConfirm, setMessageConfirm] = React.useState('');\r\n //Reference of material-table\r\n const tableRef = useRef();\r\n\r\n // let stateGroupSave = groupPermissionReducer.save;\r\n\r\n /*\r\n dispatch(\r\n settingPermissionAction.loadSettingPermission({\r\n per_page: 10,\r\n page: 1,\r\n })\r\n );\r\n*/\r\n //set innit page options\r\n const [pageOptions, setPageOptions] = React.useState({\r\n pageSize: 10,\r\n pageSizeOptions: [5, 10, 20, 100],\r\n });\r\n const loadSettingPermission = (query) => {\r\n const initData = { data: [], page: 1, totalCount: 0 };\r\n const { orderBy, orderDirection, page, pageSize, search } = query;\r\n setPageOptions({\r\n pageSize: pageSize,\r\n pageOptions: pageOptions.pageSizeOptions,\r\n });\r\n //return dispatch (Promise)\r\n\r\n return dispatch(\r\n settingPermissionAction.loadSettingPermission({\r\n columnOrder: orderBy ? orderBy.field : orderBy,\r\n isAscending: orderDirection === 'asc',\r\n pageNo: page + 1,\r\n perPage: pageSize,\r\n search,\r\n })\r\n )\r\n .then((content) => {\r\n return {\r\n data: content?content.data:[{}],\r\n page: page,\r\n totalCount: content?content.countRow:0,\r\n };\r\n })\r\n .catch((error) => {\r\n // handleClientError(error);\r\n });\r\n };\r\n\r\n const deleteSettingPermission = () => {\r\n dispatch(\r\n settingPermissionAction.deleteSettingPermission(selectGroupId)\r\n ).then(() => {\r\n reloadTable();\r\n });\r\n };\r\n\r\n // useEffect(() => {\r\n // // loadSettingPermission();\r\n // if (open == false && actionStatus != false) {\r\n // tableRef.current.onQueryChange();\r\n // }\r\n // }, [open]);\r\n const reloadTable = () => {\r\n tableRef.current.onQueryChange();\r\n };\r\n const handleClickConfirm = (status) => {\r\n if (status) {\r\n // action delete\r\n deleteSettingPermission();\r\n } else {\r\n }\r\n setOpenConfirm(false);\r\n };\r\n // let settingPermissionData =\r\n // SettingPermissionReducer.result.content.data.length > 0\r\n // ? SettingPermissionReducer.result.content\r\n // : null;\r\n\r\n let labelTitle = 'ตั้งค่าสิทธิ์ผู้ใช้งาน';\r\n let labelAddPermission = 'เพิ่มสิทธิ์ผู้ใช้งาน';\r\n return (\r\n \r\n {open ? (\r\n handleClickConfirm(v)}\r\n message={messageConfirm}\r\n />\r\n \r\n {/* \r\n \r\n test\r\n \r\n */}\r\n \r\n {\r\n return (\r\n \r\n {alert('dd')}} />{\" \"}{alert('bbb')}}/>\r\n \r\n );\r\n },\r\n cellStyle: {\r\n textAlign: 'center',\r\n },\r\n },*/\r\n { title: 'ชื่อสิทธิ์การใช้งาน', field: 'permissionName' },\r\n {\r\n title: 'ระดับการดำเนินการ',\r\n field: 'categories',\r\n render: (rowData) => {\r\n return rowData.categories.join(' , ');\r\n },\r\n disablePadding: false,\r\n },\r\n { title: 'จำนวนผู้ใช้งาน', field: 'count_user' },\r\n ]}\r\n options={{\r\n search: true,\r\n searchAutoFocus: true,\r\n headerStyle: {\r\n textAlign: 'center',\r\n fontWeight:'bold'\r\n },\r\n cellStyle: {\r\n textAlign: 'center',\r\n },\r\n // pageSize: 20,\r\n // pageSizeOptions: [5,10, 20,100],\r\n ...pageOptions,\r\n }}\r\n data={loadSettingPermission}\r\n localization={{\r\n ...muiTable.localization,\r\n header: {\r\n actions: 'แก้ไข | ลบ'\r\n }\r\n }\r\n }\r\n actions={[\r\n (rowData) => ({\r\n icon: 'edit',\r\n tooltip: {'แก้ไขสิทธิ์ผู้ใช้งาน'},\r\n onClick: (event, rowData) => {\r\n setEditKey(rowData.permission_id);\r\n setActionStatus({ action: 'edit', label: 'แก้ไข' });\r\n setOpen(true);\r\n }\r\n }),\r\n (rowData) => ({\r\n icon: 'delete',\r\n tooltip: {'จำนวนผู้ใช้งานต้อง = 0'},\r\n onClick: (event, rowData) => {\r\n // setSelectGroupId(rowData.groupId);\r\n setSelectGroupId(rowData.permission_id);\r\n setMessageConfirm(\r\n 'ท่านต้องการลบชื่อสิทธิ์การใช้งาน \"' +\r\n rowData.permissionName +\r\n '\"หรือไม่'\r\n );\r\n\r\n setOpenConfirm(true);\r\n },\r\n disabled: rowData.count_user != 0,\r\n }),\r\n ]}\r\n components={{\r\n Toolbar: (props) => (\r\n \r\n \r\n
\r\n );\r\n});\r\n\r\nSettingPermissionPage.prototype = {\r\n data: PropTypes.object,\r\n};\r\n\r\nexport default withStyles(styles)(SettingPermissionPage);\r\n","const initialState = {\r\n isFetching: null,\r\n isError: false,\r\n result: { content: { data: [], page: 1, totalCount: 0 }, status: true },\r\n };\r\n \r\n export const SETTING_LABEL_FETCHING = 'SETTING_LABEL_FETCHING';\r\n export const SETTING_LABEL_FAILED = 'SETTING_LABEL_FAILED';\r\n export const SETTING_LABEL_SUCCESS = 'SETTING_LABEL_SUCCESS';\r\n export const SettingLabelReducer = (\r\n state = initialState,\r\n { type, payload }\r\n ) => {\r\n switch (type) {\r\n case SETTING_LABEL_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_LABEL_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: [], page: 1, totalCount: 0 }},\r\n };\r\n case SETTING_LABEL_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n };\r\n \r\n export const SETTING_LABEL_DELETE_FETCHING = 'SETTING_LABEL_DELETE_FETCHING';\r\n export const SETTING_LABEL_DELETE_FAILED = 'SETTING_LABEL_DELETE_FAILED';\r\n export const SETTING_LABEL_DELETE_SUCCESS = 'SETTING_LABEL_DELETE_SUCCESS';\r\n export const SettingLabelDeleteReducer = (\r\n state = initialState,\r\n { type, payload }\r\n ) => {\r\n switch (type) {\r\n case SETTING_LABEL_DELETE_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_LABEL_DELETE_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: [], page: 1, totalCount: 0 }},\r\n };\r\n case SETTING_LABEL_DELETE_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n };\r\n ","import { sysURL } from '../constants';\r\nimport { httpClient } from './../utils/HttpClient';\r\nimport * as M from '../reducers/settingLabel.reducer';\r\n\r\n//redirect to login page\r\n\r\n//load Count Summary Data Group \";\r\nexport const setSettingLabelStateToFetching = () => ({\r\n type: M.SETTING_LABEL_FETCHING,\r\n});\r\n\r\nexport const setSettingLabelStateToFailed = () => ({\r\n type: M.SETTING_LABEL_FAILED,\r\n});\r\n\r\nexport const setSettingLabelStateToSuccess = (payload) => ({\r\n type: M.SETTING_LABEL_SUCCESS,\r\n payload,\r\n});\r\n\r\nexport const loadSettingLabel = ({\r\n columnOrder,\r\n isAscending,\r\n pageNo,\r\n perPage,\r\n search,\r\n}) => {\r\n let api = 'label/v1/getListAllPaging';\r\n let url = api;\r\n return async (dispatch, getState) => {\r\n try {\r\n dispatch(setSettingLabelStateToFetching());\r\n\r\n let result = await httpClient.post(url, {\r\n perPage: perPage,\r\n pageNo: pageNo,\r\n columnOrder: columnOrder,\r\n isAscending: isAscending,\r\n search: search,\r\n // searchObj: search,\r\n });\r\n\r\n if (result.data.status == true) {\r\n dispatch(setSettingLabelStateToSuccess(result.data));\r\n } else {\r\n dispatch(setSettingLabelStateToFailed([]));\r\n }\r\n\r\n } catch (error) {\r\n console.log(error);\r\n dispatch(setSettingLabelStateToFailed({ data: { message: error } }));\r\n }\r\n\r\n return getState().SettingLabelReducer.result.content;\r\n };\r\n};\r\n\r\n//delete data \";\r\nexport const setSettingLabelDeleteStateToFetching = () => ({\r\n type: M.SETTING_LABEL_DELETE_FETCHING,\r\n});\r\n\r\nexport const setSettingLabelDeleteStateToFailed = () => ({\r\n type: M.SETTING_LABEL_DELETE_FAILED,\r\n});\r\n\r\nexport const setSettingLabelDeleteStateToSuccess = (payload) => ({\r\n type: M.SETTING_LABEL_DELETE_SUCCESS,\r\n payload,\r\n});\r\n\r\nexport const deleteSettingLabel = (data) => {\r\n let api = 'label/v1/' + data;\r\n let url = api;\r\n return async (dispatch) => {\r\n try {\r\n dispatch(setSettingLabelDeleteStateToFetching());\r\n\r\n let result = await httpClient.delete(url);\r\n\r\n if (result.data.status == true) {\r\n dispatch(setSettingLabelDeleteStateToSuccess(result.data));\r\n } else {\r\n dispatch(setSettingLabelDeleteStateToFailed([]));\r\n }\r\n } catch (error) {\r\n console.log(error);\r\n dispatch(\r\n setSettingLabelDeleteStateToFailed({ data: { message: error } })\r\n );\r\n }\r\n\r\n // return getState().SettingPermissionReducer.result.content;\r\n };\r\n};\r\n","const initialState = {\r\n isFetching: null,\r\n isError: false,\r\n result: { content: { data: [] }, status: true },\r\n};\r\n\r\nexport const SETTING_LABEL_MANAGE_FETCHING = 'SETTING_LABEL_MANAGE_FETCHING';\r\nexport const SETTING_LABEL_MANAGE_FAILED = 'SETTING_LABEL_MANAGE_FAILED';\r\nexport const SETTING_LABEL_MANAGE_SUCCESS = 'SETTING_LABEL_MANAGE_SUCCESS';\r\nexport const SettingLabelManageReducer = (\r\n state = initialState,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n case SETTING_LABEL_MANAGE_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_LABEL_MANAGE_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: [] } },\r\n };\r\n case SETTING_LABEL_MANAGE_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\n\r\nexport const SETTING_LABEL_MANAGE_SAVE_FETCHING =\r\n 'SETTING_LABEL_MANAGE_SAVE_FETCHING';\r\nexport const SETTING_LABEL_MANAGE_SAVE_FAILED =\r\n 'SETTING_LABEL_MANAGE_SAVE_FAILED';\r\nexport const SETTING_LABEL_MANAGE_SAVE_SUCCESS =\r\n 'SETTING_LABEL_MANAGE_SAVE_SUCCESS';\r\nexport const SettingLabelManageSaveReducer = (\r\n state = initialState,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n case SETTING_LABEL_MANAGE_SAVE_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_LABEL_MANAGE_SAVE_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: [] } },\r\n };\r\n case SETTING_LABEL_MANAGE_SAVE_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\n\r\nexport const SETTING_LABEL_MANAGE_EDIT_FETCHING =\r\n 'SETTING_LABEL_MANAGE_EDIT_FETCHING';\r\nexport const SETTING_LABEL_MANAGE_EDIT_FAILED =\r\n 'SETTING_LABEL_MANAGE_EDIT_FAILED';\r\nexport const SETTING_LABEL_MANAGE_EDIT_SUCCESS =\r\n 'SETTING_LABEL_MANAGE_EDIT_SUCCESS';\r\nexport const SettingLabelManageEditReducer = (\r\n state = initialState,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n case SETTING_LABEL_MANAGE_EDIT_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_LABEL_MANAGE_EDIT_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: [] } },\r\n };\r\n case SETTING_LABEL_MANAGE_EDIT_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\n\r\n//Select By Id\r\nexport const SETTING_LABEL_MANAGE_BY_ID_FETCHING =\r\n 'SETTING_LABEL_MANAGE_BY_ID_FETCHING';\r\nexport const SETTING_LABEL_MANAGE_BY_ID_FAILED =\r\n 'SETTING_LABEL_MANAGE_BY_ID_FAILED';\r\nexport const SETTING_LABEL_MANAGE_BY_ID_SUCCESS =\r\n 'SETTING_LABEL_MANAGE_BY_ID_SUCCESS';\r\nexport const SettingLabelManageByIdReducer = (\r\n state = initialState,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n case SETTING_LABEL_MANAGE_BY_ID_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SETTING_LABEL_MANAGE_BY_ID_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: [] } },\r\n };\r\n case SETTING_LABEL_MANAGE_BY_ID_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\n","import { sysURL } from '../constants';\r\nimport { httpClient } from './../utils/HttpClient';\r\nimport * as M from '../reducers/settingLabelManage.reducer';\r\n\r\n//save data\";\r\nexport const setSettingLabelManageSaveStateToFetching = () => ({\r\n type: M.SETTING_LABEL_MANAGE_SAVE_FETCHING,\r\n});\r\n\r\nexport const setSettingLabelManageSaveStateToFailed = () => ({\r\n type: M.SETTING_LABEL_MANAGE_SAVE_FAILED,\r\n});\r\n\r\nexport const setSettingLabelManageSaveStateToSuccess = (payload) => ({\r\n type: M.SETTING_LABEL_MANAGE_SAVE_SUCCESS,\r\n payload,\r\n});\r\n\r\nexport const saveSettingLabel = (data) => {\r\n let api = 'label/v1/add';\r\n let url = api;\r\n return async (dispatch) => {\r\n try {\r\n dispatch(setSettingLabelManageSaveStateToFetching());\r\n\r\n let result = await httpClient.post(url, data);\r\n\r\n if (result.data.status == true) {\r\n dispatch(setSettingLabelManageSaveStateToSuccess(result.data));\r\n } else {\r\n dispatch(setSettingLabelManageSaveStateToFailed([]));\r\n }\r\n } catch (error) {\r\n console.log(error);\r\n dispatch(\r\n setSettingLabelManageSaveStateToFailed({\r\n data: { message: error },\r\n })\r\n );\r\n }\r\n\r\n // return getState().SettingPermissionReducer.result.content;\r\n };\r\n};\r\n\r\n//edit,update data \";\r\nexport const setSettingLabelManageEditStateToFetching = () => ({\r\n type: M.SETTING_LABEL_MANAGE_EDIT_FETCHING,\r\n});\r\n\r\nexport const setSettingLabelManageEditStateToFailed = () => ({\r\n type: M.SETTING_LABEL_MANAGE_EDIT_FAILED,\r\n});\r\n\r\nexport const setSettingLabelManageEditStateToSuccess = (payload) => ({\r\n type: M.SETTING_LABEL_MANAGE_EDIT_SUCCESS,\r\n payload,\r\n});\r\n\r\nexport const editSettingLabel = (data) => {\r\n let api = 'label/v1/update';\r\n let url = api;\r\n return async (dispatch) => {\r\n try {\r\n dispatch(setSettingLabelManageEditStateToFetching());\r\n\r\n let result = await httpClient.put(url, data);\r\n\r\n if (result.data.status == true) {\r\n dispatch(setSettingLabelManageEditStateToSuccess(result.data));\r\n } else {\r\n dispatch(setSettingLabelManageEditStateToFailed([]));\r\n }\r\n } catch (error) {\r\n console.log(error);\r\n dispatch(\r\n setSettingLabelManageEditStateToFailed({\r\n data: { message: error },\r\n })\r\n );\r\n }\r\n\r\n // return getState().SettingPermissionReducer.result.content;\r\n };\r\n};\r\n\r\n// load Setting Permission By Id\r\nexport const setSettingLabelManageByIdStateToFetching = () => ({\r\n type: M.SETTING_LABEL_MANAGE_BY_ID_FETCHING,\r\n});\r\n\r\nexport const setSettingLabelManageByIdStateToFailed = () => ({\r\n type: M.SETTING_LABEL_MANAGE_BY_ID_FAILED,\r\n});\r\n\r\nexport const setSettingLabelManageByIdStateToSuccess = (payload) => ({\r\n type: M.SETTING_LABEL_MANAGE_BY_ID_SUCCESS,\r\n payload,\r\n});\r\n\r\nexport const loadSettingLabelById = (data) => {\r\n let api = 'label/v1/getByID?data=' + data;\r\n let url = api;\r\n return async (dispatch) => {\r\n try {\r\n dispatch(setSettingLabelManageByIdStateToFetching());\r\n\r\n let result = await httpClient.get(url);\r\n\r\n if (result.data.status == true) {\r\n dispatch(setSettingLabelManageByIdStateToSuccess(result.data));\r\n } else {\r\n dispatch(setSettingLabelManageByIdStateToFailed([]));\r\n }\r\n } catch (error) {\r\n console.log(error);\r\n dispatch(\r\n setSettingLabelManageByIdStateToFailed({\r\n data: { message: error },\r\n })\r\n );\r\n }\r\n\r\n // return getState().SettingPermissionReducer.result.content;\r\n };\r\n};\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { useTheme } from '@material-ui/core/styles';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\nimport {\r\n FormControl,\r\n InputLabel,\r\n MenuItem,\r\n FormHelperText,\r\n Card,\r\n CardContent,\r\n CardActions,\r\n Typography,\r\n Divider,\r\n Box,\r\n Button,\r\n IconButton,\r\n Toolbar,\r\n AppBar,\r\n Dialog,\r\n ListItemText,\r\n ListItem,\r\n List,\r\n Tabs,\r\n Tab,\r\n Slide,\r\n Paper,\r\n Grid,\r\n} from '@material-ui/core';\r\nimport MaterialTable, { MTableToolbar } from 'material-table';\r\nimport { issues } from './../../../data';\r\nimport EditTwoToneIcon from '@material-ui/icons/EditTwoTone';\r\nimport DeleteTwoToneIcon from '@material-ui/icons/DeleteTwoTone';\r\nimport { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';\r\nimport Icon from '@material-ui/core/Icon';\r\nimport * as settingLabelManageAction from '../../../actions/settingLabelManage.action';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\n// import react-router\r\nimport { Link } from 'react-router-dom';\r\n\r\n// import Formik and Dependency\r\nimport { Formik, Form, Field } from 'formik';\r\nimport { Select, TextField } from 'formik-material-ui';\r\nimport * as Yup from 'yup';\r\nimport SelectPersonalDataCategory from '../../fragments/SelectPersonalDataCategory';\r\nimport SelectMultiPersonalDataCategory from '../../fragments/SelectMultiPersonalDataCategory';\r\nimport globalStyles from '../../../styles/globalStyles';\r\nimport SelectPermissionLevel from '../../fragments/SelectPermissionLevel';\r\nimport SelectNameOrEmail from '../../fragments/SelectNameOrEmail';\r\nimport SelectDepartment from '../../fragments/SelectDepartment';\r\nimport { ColorPicker } from 'material-ui-color'; //https://mikbry.github.io/material-ui-color/?path=/story/docs-intro--page\r\nimport { Backdrops } from './../../fragments/Loading/react-loadingg';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n //backgroundColor: theme.palette.background.paper,\r\n },\r\n appBar: {\r\n position: 'relative',\r\n // backgroundColor: theme.palette.background.paper,\r\n },\r\n title: {\r\n marginLeft: theme.spacing(2),\r\n flex: 1,\r\n },\r\n}));\r\nconst paletteObj = {\r\n red: '#ff0000',\r\n blue: '#0000ff',\r\n green: '#00ff00',\r\n yellow: 'yellow',\r\n cyan: 'cyan',\r\n lime: 'lime',\r\n gray: 'gray',\r\n orange: 'orange',\r\n purple: 'purple',\r\n black: 'black',\r\n white: 'white',\r\n pink: 'pink',\r\n darkblue: 'darkblue',\r\n};\r\nconst styles = (theme) => ({\r\n ...globalStyles(theme),\r\n root: {\r\n flexGrow: 1,\r\n //backgroundColor: theme.palette.background.paper,\r\n },\r\n appBar: {\r\n position: 'relative',\r\n backgroundColor: theme.palette.primary.dark,\r\n },\r\n appBarTab: {\r\n backgroundColor: theme.palette.primary.light,\r\n color: '#222',\r\n },\r\n title: {\r\n //marginLeft: theme.spacing(2),\r\n flex: 1,\r\n },\r\n TabPanel: {\r\n padding: theme.spacing(1),\r\n },\r\n menuButton: {\r\n marginLeft: theme.spacing(1),\r\n },\r\n toolbar: {\r\n paddingRight: theme.spacing(1),\r\n paddingLeft: theme.spacing(1),\r\n },\r\n formControl: {\r\n margin: theme.spacing(1, 0, 1, 0),\r\n },\r\n card: {\r\n minWidth: 500,\r\n padding: theme.spacing(0, 2, 3, 2),\r\n },\r\n cardContent: {\r\n minHeight: 500,\r\n },\r\n section: {\r\n margin: theme.spacing(1),\r\n },\r\n paper: {\r\n padding: theme.spacing(1),\r\n },\r\n tableHeight: {\r\n body: { minHeight: '10px !important' },\r\n },\r\n});\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n return \r\n
\r\n ),\r\n }}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {actionStatus.action == 'add' ? \r\n {actionStatus.label}\r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n );\r\n};\r\nconst FormSettingLabels = React.memo(withStyles(styles)(FormSettingLabel));\r\n\r\nconst SettingLabelManagePage = (props) => {\r\n const {\r\n open,\r\n setOpen,\r\n classes,\r\n actionStatus,\r\n keyValues,\r\n setFieldValue,\r\n touched,\r\n errors,\r\n isSubmitting,\r\n\r\n ...rest\r\n } = props;\r\n //const classes = useStyles();\r\n // YUP: build validation schema (validationSchema)\r\nconst categoryData = Yup.object({\r\n value: Yup.number().required('Required'),\r\n label: Yup.string().required('Required'),\r\n});\r\n\r\nconst validationSchema = Yup.object().shape({\r\n labelName: Yup.string().required('กรุณาระบุชื่อป้ายกำกับ'),\r\n // departmentId: Yup.string().required('กรุณาระบุส่วนงาน'),\r\n // permissionLevel_id: Yup.string().required('กรุณาระบุระดับการดำเนินการ'),\r\n // // user_id: Yup.bool().required('กรุณาระบุผู้ใช้งาน').oneOf([true], \"กรุณาระบุผู้ใช้งาน\"),\r\n // permissionGroupName: Yup.string().required('กรุณาระบุกลุ่มสิทธิ์ผู้ใช้งาน'),\r\n /*summary: Yup.string()\r\n .min(4, 'เรื่องโดยสรุปต้องมากกว่า 4 อักขระ')\r\n .max(255, 'เรื่องโดยสรุปต้องไม่เกิน 255 อักขระ')\r\n .required('กรุณากรอกเรื่องโดยสรุป'),\r\n description: Yup.string()\r\n .min(4, 'รายละเอียดต้องมากกว่า 4 อักขระ')\r\n .max(255, 'รายละเอียดต้องไม่เกิน 1000 อักขระ')\r\n .required('กรุณากรอกรายละเอียด'),*/\r\n //fullname: Yup.string().required('กรุณาเลือกหมวดหมุ่ข้อมูลส่วนบุคคล'),\r\n});\r\n\r\n// InitialVaue of form reporting breach\r\nlet initialValues = {\r\n labelId: '',\r\n labelName: '',\r\n labelDescription: '',\r\n labelStyles: '',\r\n};\r\n \r\n const theme = useTheme();\r\n const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));\r\n const handleClickOpen = () => {\r\n setOpen(true);\r\n };\r\n\r\n const handleClose = () => {\r\n setOpen(false);\r\n \r\n };\r\n //const [fullWidth, setFullWidth] = React.useState(true);\r\n //const [maxWidth, setMaxWidth] = React.useState('xl');\r\n const dispatch = useDispatch();\r\n const SettingPermissionSaveReducer = useSelector(\r\n ({ SettingPermissionSaveReducer }) => SettingPermissionSaveReducer\r\n );\r\n\r\n const SettingLabelManageByIdReducer = useSelector(\r\n ({ SettingLabelManageByIdReducer }) => SettingLabelManageByIdReducer\r\n );\r\n\r\n const loadSettingLabelById = () => {\r\n dispatch(\r\n settingLabelManageAction.loadSettingLabelById(keyValues)\r\n )\r\n\r\n };\r\n\r\n useEffect(() => {\r\n if(actionStatus.action == 'add'){\r\n \r\n initialValues = {\r\n labelId: '',\r\n labelName: '',\r\n labelDescription: '',\r\n labelStyles: '',\r\n };\r\n }\r\n\r\n});\r\n\r\n useEffect(() => {\r\n if (actionStatus.action == 'edit') {\r\n loadSettingLabelById();\r\n }\r\n }, []);\r\n\r\n /* สามารถ get ค่าได้รอบที่2 */\r\n \r\n let labelData = SettingLabelManageByIdReducer.result.content;\r\n if(labelData!=undefined && actionStatus.action == 'edit'){\r\n initialValues = {\r\n labelId: labelData.id,\r\n labelName: labelData.name,\r\n labelDescription: labelData.description?labelData.description:'',\r\n labelStyles: labelData.style!=null ?JSON.parse(labelData.style):null,\r\n };\r\n }\r\n\r\n \r\n return (\r\n \r\n {\r\n \r\n {\r\n let data = {\r\n labelType_id : 0,\r\n name:values.labelName,\r\n description:values.labelDescription=''?null:values.labelDescription,\r\n style: JSON.stringify(values.labelStyles),\r\n };\r\n\r\n if (actionStatus.action == 'edit') {\r\n data['id'] = keyValues;\r\n }\r\n\r\n dispatch(\r\n actionStatus.action == 'add'\r\n ? settingLabelManageAction.saveSettingLabel(data)\r\n : settingLabelManageAction.editSettingLabel(data)\r\n ).then(() => {\r\n setSubmitting(false);\r\n setOpen(false);\r\n rest.reloadTable();\r\n });\r\n\r\n\r\n }}\r\n >\r\n {({ values, setFieldValue, touched, errors, isSubmitting }) => (\r\n
\r\n );\r\n};\r\nexport default React.memo(withStyles(styles)(SettingLabelManagePage));\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport MaterialTable, { MTableToolbar } from 'material-table';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport PropTypes from 'prop-types';\r\nimport { Typography, Box, Paper, Grid, Button } from '@material-ui/core';\r\nimport * as settingLabelAction from '../../../actions/settingLabel.action';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n// import globalStyles\r\nimport globalStyles from '../../../styles/globalStyles';\r\n\r\n//import AppSidebarRBack, IssueCard, ActivityCard\r\nimport AppSidebarRBack from './../../fragments/AppSidebarRBack';\r\nimport IssueCard from './../../fragments/IssueCard';\r\nimport ActivityCard from './../../fragments/ActivityCard';\r\nimport FormComment from './../../fragments/FormComment';\r\n\r\n// import dom Constant\r\nimport { dom } from './../../../constants';\r\n\r\n// import utils\r\nimport { formatDatetime, logger } from './../../../utils/utils';\r\n\r\n// import hooks\r\nimport { useHandleClientError } from '../../../utils/HttpClient';\r\n\r\n// import data\r\nimport { issues } from './../../../data';\r\nimport EditTwoToneIcon from '@material-ui/icons/EditTwoTone';\r\nimport DeleteTwoToneIcon from '@material-ui/icons/DeleteTwoTone';\r\nimport { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport Icon from '@material-ui/core/Icon';\r\nimport AddTwoTone from '@material-ui/icons/AddTwoTone';\r\nimport SettingLabelManagePage from './SettingLabelManagePage';\r\nimport { ConfirmDialog } from '../../fragments/Dialog/Dialog';\r\nimport clsx from 'clsx';\r\nimport {muiTable} from '../../../constants/index';\r\n\r\n// Styles\r\nconst styles = (theme) => ({\r\n ...globalStyles(theme),\r\n root: {\r\n margin: theme.spacing(1),\r\n },\r\n formControl: {\r\n margin: theme.spacing(1, 0, 1, 0),\r\n },\r\n card: {\r\n minWidth: 275,\r\n padding: theme.spacing(1, 1, 2, 2),\r\n },\r\n cardContent: {\r\n minHeight: 275,\r\n },\r\n section: {\r\n margin: theme.spacing(1),\r\n },\r\n paper: {\r\n padding: theme.spacing(1),\r\n textAlign: 'center',\r\n color: theme.palette.text.secondary,\r\n },\r\n cursor_pointer: {\r\n cursor: 'pointer',\r\n }\r\n \r\n});\r\nconst theme = createMuiTheme({\r\n palette: {\r\n primary: {\r\n main: '#4caf50',\r\n },\r\n secondary: {\r\n main: '#ff9100',\r\n },\r\n },\r\n});\r\nconst SettingLabelPage = React.memo((props) => {\r\n let { data, classes } = props;\r\n const dispatch = useDispatch();\r\n const SettingLabelReducer = useSelector(\r\n ({ SettingLabelReducer }) => SettingLabelReducer\r\n );\r\n\r\n const [open, setOpen] = React.useState(false);\r\n const [actionStatus, setActionStatus] = React.useState(false);\r\n const [editKey, setEditKey] = React.useState(null);\r\n const [openConfirm, setOpenConfirm] = React.useState(false);\r\n const [selectLabelId, setSelectLabelId] = React.useState(null);\r\n const [messageConfirm, setMessageConfirm] = React.useState('');\r\n //Reference of material-table\r\n const tableRef = useRef();\r\n\r\n // let stateGroupSave = groupPermissionReducer.save;\r\n\r\n /*\r\n dispatch(\r\n settingPermissionAction.loadSettingPermission({\r\n per_page: 10,\r\n page: 1,\r\n })\r\n );\r\n*/\r\n //set innit page options\r\n const [pageOptions, setPageOptions] = React.useState({\r\n pageSize: 10,\r\n pageSizeOptions: [5, 10, 20, 100],\r\n });\r\n\r\n const loadSettingLabel = (query) => {\r\n const initData = { data: [], page: 1, totalCount: 0 };\r\n const { orderBy, orderDirection, page, pageSize, search } = query;\r\n setPageOptions({\r\n pageSize: pageSize,\r\n pageOptions: pageOptions.pageSizeOptions,\r\n });\r\n\r\n //return dispatch (Promise)\r\n return dispatch(\r\n settingLabelAction.loadSettingLabel({\r\n columnOrder: orderBy ? orderBy.field : orderBy,\r\n isAscending: orderDirection === 'asc',\r\n pageNo: page + 1,\r\n perPage: pageSize,\r\n search,\r\n })\r\n )\r\n .then((content) => {\r\n return {\r\n data: content.data,\r\n page: page,\r\n totalCount: content.countRow,\r\n };\r\n })\r\n .catch((error) => {\r\n // handleClientError(error);\r\n });\r\n };\r\n\r\n const deleteSettingLabel = () => {\r\n dispatch(\r\n settingLabelAction.deleteSettingLabel(selectLabelId)\r\n ).then(() => {\r\n reloadTable();\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n // loadSettingPermission();\r\n }, []);\r\n\r\n const reloadTable = () => {\r\n tableRef.current.onQueryChange();\r\n };\r\n const handleClickConfirm = (status) => {\r\n if (status) {\r\n // action delete\r\n deleteSettingLabel();\r\n } else {\r\n }\r\n setOpenConfirm(false);\r\n };\r\n\r\n let settingLabelData =\r\n SettingLabelReducer.result.content.data.length > 0\r\n ? SettingLabelReducer.result.content\r\n : null;\r\n\r\n let labelTitle = 'ป้ายกำกับ';\r\n let labelAdd = 'เพิ่มป้ายกำกับ';\r\n return (\r\n \r\n {open ? (\r\n handleClickConfirm(v)}\r\n message={messageConfirm}\r\n />\r\n \r\n {/* \r\n \r\n test\r\n \r\n */}\r\n \r\n {\r\n const padding={padding:5};\r\n return (\r\n \r\n {rowData.name}\r\n \r\n );\r\n },\r\n },\r\n { title: 'คำอธิบาย', field: 'description' },\r\n ]}\r\n options={{\r\n search: true,\r\n searchAutoFocus: true,\r\n headerStyle: {\r\n textAlign: 'center',\r\n fontWeight:'bold'\r\n },\r\n cellStyle: {\r\n textAlign: 'center',\r\n },\r\n ...pageOptions,\r\n }}\r\n localization={{\r\n ...muiTable.localization,\r\n header: {\r\n actions: 'แก้ไข | ลบ'\r\n }\r\n }\r\n }\r\n data={loadSettingLabel}\r\n actions={[\r\n {\r\n icon: 'edit',\r\n tooltip: {'แก้ไข'} ,\r\n onClick: (event, rowData) => {\r\n \r\n setEditKey(rowData.id);\r\n setActionStatus({ action: 'edit', label: 'แก้ไข' });\r\n setOpen(true);\r\n },\r\n },\r\n (rowData) => ({\r\n icon: 'delete',\r\n tooltip: {'ลบ'},\r\n onClick: (event, rowData) => {\r\n setSelectLabelId(rowData.id);\r\n setMessageConfirm(\r\n 'ท่านต้องการลบป้ายกำกับ \"' + rowData.name + '\"หรือไม่'\r\n );\r\n\r\n setOpenConfirm(true);\r\n },\r\n }),\r\n ]}\r\n components={{\r\n Toolbar: (props) => (\r\n \r\n \r\n
\r\n );\r\n});\r\n\r\nSettingLabelPage.prototype = {\r\n data: PropTypes.object,\r\n};\r\n\r\nexport default withStyles(styles)(SettingLabelPage);\r\n","import React from 'react';\r\nimport axios from 'axios';\r\n\r\nimport { createMuiTheme } from '@material-ui/core/styles';\r\n\r\n// import material-ui core\r\nimport Grow from '@material-ui/core/Grow';\r\n\r\n// import SnackbarProvider\r\nimport { SnackbarProvider } from 'notistack';\r\n\r\nimport {\r\n BrowserRouter as Router,\r\n Route,\r\n Redirect,\r\n Switch,\r\n Link,\r\n} from 'react-router-dom';\r\n\r\n// import routers constants\r\nimport { routers, PATH_FRONTOF_MASTER, PATH_BACKOF_MASTER } from './routers';\r\n\r\n// import routers\r\nimport { sysURL } from './constants';\r\nimport { listRoutFrontOf, listRoutBackOf } from './routers';\r\n\r\nimport {\r\n base64,\r\n userProfiler,\r\n logger,\r\n clearLocalAccessData,\r\n} from './utils/utils';\r\n\r\n// import Contexts\r\nimport { MuiThemeProvider } from './contexts/ThemeContext';\r\nimport { DialogProvider } from './contexts/DialogContext';\r\n\r\n// import Layout & Pages\r\n\r\n// import MasterLayout\r\nimport MasterLayout from './components/layouts/MasterLayout';\r\n\r\n// import PrepareUserInformationPage\r\nimport PrepareUserInformationPage from './components/pages/PrepareUserInformationPage';\r\n\r\n// import LoginPage\r\nimport LoginPage from './components/pages/LoginPage';\r\n\r\n// import AppSidebrRBack - AppSidebrRFront\r\nimport AppSidebarRBack from './components/fragments/AppSidebarRBack';\r\nimport AppSidebarRFront from './components/fragments/AppSidebarRFront';\r\n\r\n// import Helpdesk*Page (FrontOffice)\r\nimport HelpdeskMainPage from './components/pages/HelpdeskMainPage';\r\nimport HelpdeskIssuesPage from './components/pages/HelpdeskIssuesPage';\r\nimport HelpdeskIssueActivitiesPage from './components/pages/HelpdeskIssueActivitiesPage';\r\nimport HelpdeskReportIssuePage from './components/pages/HelpdeskReportIssuePage';\r\n\r\n// import Manage*Page (BackOffice)\r\nimport ManageIssuesPage from './components/pages/ManageIssuesPage';\r\nimport ManageIssueAcitivitiesPage from './components/pages/ManageIssueActivitiesPage';\r\nimport SettingPermissionPage from './components/pages/SettingPermissionPage';\r\nimport SettingLabelPage from './components/pages/SettingLabelPage';\r\n\r\nimport { accessible } from './data/issue';\r\n\r\n/**\r\n * MuiTheme-themeFrontOffice\r\n */\r\nconst themeFrontOffice = createMuiTheme({\r\n palette: {\r\n primary: {\r\n light: '#4383cc',\r\n main: '#1565c0',\r\n dark: '#0e4686',\r\n contrastText: '#fff',\r\n },\r\n },\r\n shadows: [\r\n 'none',\r\n\r\n // Paper\r\n '0px 1px 1px rgba(0, 0, 0, 0.25)',\r\n\r\n //Button\r\n 'none',\r\n\r\n 'none',\r\n 'none',\r\n ...Array(20).fill('none'),\r\n ],\r\n});\r\n\r\n/**\r\n * MuiTheme-themeBackOffice\r\n */\r\nconst themeBackOffice = createMuiTheme({\r\n palette: {\r\n primary: {\r\n light: '#ffca28',\r\n main: '#ffb300',\r\n dark: '#b28704',\r\n contrastText: '#fff',\r\n },\r\n secondary: {\r\n light: '#ff4569',\r\n main: '#ff1744',\r\n dark: '#b2102f',\r\n contrastText: '#fff',\r\n },\r\n },\r\n shadows: [\r\n 'none',\r\n\r\n // Paper\r\n '0px 1px 1px rgba(0, 0, 0, 0.25)',\r\n\r\n //Button\r\n 'none',\r\n\r\n 'none',\r\n 'none',\r\n ...Array(20).fill('none'),\r\n ],\r\n});\r\n\r\n/**\r\n * CheckRefreshTokenWork()\r\n * Check RefreshToken is worked (No expire)\r\n * @returns {bool}\r\n */\r\nasync function CheckRefreshTokenWork() {\r\n try {\r\n let { data } = await axios.get(sysURL.accessToken);\r\n if (data.tokenAccess) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n } catch (error) {\r\n return false;\r\n }\r\n}\r\n\r\n/**\r\n * CheckAccessibleIssueById()\r\n * @param {*} mode\r\n * @param {*} id\r\n * @returns\r\n */\r\nasync function CheckAccessibleIssueById(mode, id) {\r\n try {\r\n if (!mode) throw 'CheckAccessibleIssueById no mode';\r\n let accessStatus = await accessible({\r\n package: base64.encodeObj({ mode, id }),\r\n });\r\n return accessStatus;\r\n } catch (error) {\r\n throw error;\r\n }\r\n}\r\nconst LoginRoute = ({ component: Component, ...rest }) => {\r\n return \r\n
\r\n ),\r\n }}\r\n />\r\n \r\n
\r\n \r\n
\r\n );\r\n }}\r\n />\r\n {/* unauthrolized with message ex con not access issue (Not clearLocalAccessData) */}\r\n Can't access this page.
\r\n\r\n
\r\n );\r\n }}\r\n />\r\n {message}
\r\n Back to Main\r\nรายงาน
\r\nUnder Construction
\r\n\r\n
\r\n )}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default App;\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://cra.link/PWA\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.0/8 are considered localhost for IPv4.\r\n window.location.hostname.match(/^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)\r\n);\r\n\r\nexport function register(config) {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Let's check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl, config);\r\n\r\n // Add some additional logging to localhost, pointing developers to the\r\n // service worker/PWA documentation.\r\n navigator.serviceWorker.ready.then(() => {\r\n console.log(\r\n 'This web app is being served cache-first by a service ' +\r\n 'worker. To learn more, visit https://cra.link/PWA'\r\n );\r\n });\r\n } else {\r\n // Is not localhost. Just register service worker\r\n registerValidSW(swUrl, config);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW(swUrl, config) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then((registration) => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n if (installingWorker == null) {\r\n return;\r\n }\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the updated precached content has been fetched,\r\n // but the previous service worker will still serve the older\r\n // content until all client tabs are closed.\r\n console.log(\r\n 'New content is available and will be used when all ' +\r\n 'tabs for this page are closed. See https://cra.link/PWA.'\r\n );\r\n\r\n // Execute callback\r\n if (config && config.onUpdate) {\r\n config.onUpdate(registration);\r\n }\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n\r\n // Execute callback\r\n if (config && config.onSuccess) {\r\n config.onSuccess(registration);\r\n }\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch((error) => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl, config) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl, {\r\n headers: { 'Service-Worker': 'script' },\r\n })\r\n .then((response) => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n const contentType = response.headers.get('content-type');\r\n if (\r\n response.status === 404 ||\r\n (contentType != null && contentType.indexOf('javascript') === -1)\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then((registration) => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl, config);\r\n }\r\n })\r\n .catch(() => {\r\n console.log('No internet connection found. App is running in offline mode.');\r\n });\r\n}\r\n\r\nexport function unregister() {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready\r\n .then((registration) => {\r\n registration.unregister();\r\n })\r\n .catch((error) => {\r\n console.error(error.message);\r\n });\r\n }\r\n}\r\n","const reportWebVitals = (onPerfEntry) => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import {\r\n // issue list type const\r\n ISSUE_LIST_FETCH_PROCESSING,\r\n ISSUE_LIST_FETCH_SUCCESS,\r\n ISSUE_LIST_FETCH_FAILED,\r\n ISSUE_LIST_FETCH_CLEAR,\r\n\r\n // issue type const\r\n ISSUE_FETCH_PROCESSING,\r\n ISSUE_FETCH_SUCCESS,\r\n ISSUE_FETCH_FAILED,\r\n ISSUE_FETCH_CLEAR,\r\n ISSUE_UPDATE_SUCCESS,\r\n ISSUE_UPDATE_FAILED,\r\n} from '../constants';\r\n\r\n// initialStateIssue\r\nconst initialStateIssueList = {\r\n result: null,\r\n isLoading: false,\r\n isError: false,\r\n message: null,\r\n};\r\n\r\n// initialStateIssue\r\nconst initialStateIssue = {\r\n result: null,\r\n isLoading: false,\r\n isError: false,\r\n message: null,\r\n};\r\n\r\nexport const issueListReducer = (\r\n state = initialStateIssueList,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n /**\r\n * CASE: ISSUE_FETCH_*\r\n */\r\n case ISSUE_LIST_FETCH_PROCESSING:\r\n return {\r\n ...state,\r\n result: initialStateIssueList.result,\r\n isLoading: true,\r\n isError: false,\r\n };\r\n case ISSUE_LIST_FETCH_SUCCESS:\r\n return {\r\n ...state,\r\n result: payload,\r\n isLoading: false,\r\n isError: false,\r\n };\r\n case ISSUE_LIST_FETCH_FAILED:\r\n return {\r\n result: initialStateIssueList.result,\r\n isLoading: false,\r\n isError: true,\r\n };\r\n case ISSUE_LIST_FETCH_CLEAR:\r\n return {\r\n ...state,\r\n ...initialStateIssueList,\r\n };\r\n default:\r\n return state;\r\n }\r\n};\r\n\r\n/**\r\n * IssueReducer()\r\n * @param {object} state, issue state\r\n * @param {object} payloads\r\n * @param {string} type,\r\n * @param {any} payload,\r\n * @returns new state\r\n * NOTE: issueReducer is state of sigle row issue.\r\n */\r\nexport const issueReducer = (state = initialStateIssue, { type, payload }) => {\r\n switch (type) {\r\n /**\r\n * CASE: ISSUE_FETCH_*\r\n */\r\n case ISSUE_FETCH_PROCESSING:\r\n return {\r\n ...state,\r\n result: initialStateIssue.result,\r\n isLoading: true,\r\n isError: false,\r\n };\r\n case ISSUE_FETCH_SUCCESS:\r\n return {\r\n ...state,\r\n result: payload,\r\n isLoading: false,\r\n isError: false,\r\n };\r\n case ISSUE_FETCH_FAILED:\r\n return {\r\n result: initialStateIssue.result,\r\n isLoading: false,\r\n isError: true,\r\n };\r\n case ISSUE_FETCH_CLEAR:\r\n return {\r\n ...state,\r\n ...initialStateIssue,\r\n };\r\n\r\n /**\r\n * CASE: ISSUE_UPDATE_*\r\n */\r\n case ISSUE_UPDATE_SUCCESS:\r\n return {\r\n ...state,\r\n result: payload,\r\n isLoading: false,\r\n isError: false,\r\n };\r\n case ISSUE_UPDATE_FAILED:\r\n return {\r\n ...state,\r\n isLoading: false,\r\n isError: true,\r\n };\r\n default:\r\n return state;\r\n }\r\n};\r\n","import {\r\n // issueComment fetch type:\r\n ISSUE_COMMENT_FETCH_PROCESSING,\r\n ISSUE_COMMENT_FETCH_SUCCESS,\r\n ISSUE_COMMENT_FETCH_FAILED,\r\n ISSUE_COMMENT_FETCH_CLEAR,\r\n\r\n // issueComment update type:\r\n ISSUE_COMMENT_UPDATE_SUCCESS,\r\n ISSUE_COMMENT_UPDATE_FAILED,\r\n // ISSUE_COMMENT_UPDATE_CLEAR,\r\n} from '../constants';\r\n\r\n// initialStateIssueComment\r\nconst initialStateIssueComment = {\r\n result: null,\r\n isLoading: false,\r\n isError: false,\r\n};\r\n\r\n/**\r\n * issueCommentReducer()\r\n * @param {object} state, issueComment state\r\n * @param {object} payloads\r\n * @param {string} payloads.type,\r\n * @param {any} payloads.payload,\r\n * @returns new state\r\n * NOTE: issueCommentReducer consis of comment, history, analystIncident\r\n */\r\nexport default (state = initialStateIssueComment, { type, payload }) => {\r\n switch (type) {\r\n /**\r\n * CASE: ISSUE_COMMENT_FETCH_*\r\n */\r\n case ISSUE_COMMENT_FETCH_PROCESSING:\r\n return {\r\n ...state,\r\n result: initialStateIssueComment.result,\r\n isLoading: true,\r\n isError: false,\r\n };\r\n case ISSUE_COMMENT_FETCH_SUCCESS:\r\n return {\r\n ...state,\r\n result: payload,\r\n isLoading: false,\r\n isError: false,\r\n };\r\n case ISSUE_COMMENT_FETCH_FAILED:\r\n return {\r\n result: initialStateIssueComment.result,\r\n isLoading: false,\r\n isError: true,\r\n message: null,\r\n };\r\n case ISSUE_COMMENT_FETCH_CLEAR:\r\n return {\r\n ...state,\r\n ...initialStateIssueComment,\r\n };\r\n\r\n /**\r\n * CASE: ISSUE_COMMENT_UPDATE_*\r\n */\r\n case ISSUE_COMMENT_UPDATE_SUCCESS:\r\n return {\r\n ...state,\r\n result: payload,\r\n isLoading: false,\r\n isError: false,\r\n };\r\n case ISSUE_COMMENT_UPDATE_FAILED:\r\n return {\r\n ...state,\r\n isLoading: false,\r\n isError: true,\r\n };\r\n default:\r\n return state;\r\n }\r\n};\r\n","import {\r\n // issueLog fetch type:\r\n ISSUE_LOG_FETCH_PROCESSING,\r\n ISSUE_LOG_FETCH_SUCCESS,\r\n ISSUE_LOG_FETCH_FAILED,\r\n ISSUE_LOG_FETCH_CLEAR,\r\n\r\n // issueLog update type:\r\n ISSUE_LOG_UPDATE_SUCCESS,\r\n ISSUE_LOG_UPDATE_FAILED,\r\n // ISSUE_LOG_UPDATE_CLEAR,\r\n} from '../constants';\r\n\r\n// initialStateIssueLog\r\nconst initialStateIssueLog = {\r\n result: null,\r\n isLoading: false,\r\n isError: false,\r\n};\r\n\r\n/**\r\n * issueLogReducer()\r\n * @param {object} state, issueLog state\r\n * @param {object} payloads\r\n * @param {string} payloads.type,\r\n * @param {any} payloads.payload,\r\n * @returns new state\r\n */\r\nexport default (state = initialStateIssueLog, { type, payload }) => {\r\n switch (type) {\r\n /**\r\n * CASE: ISSUE_LOG_FETCH_*\r\n */\r\n case ISSUE_LOG_FETCH_PROCESSING:\r\n return {\r\n ...state,\r\n result: initialStateIssueLog.result,\r\n isLoading: true,\r\n isError: false,\r\n };\r\n case ISSUE_LOG_FETCH_SUCCESS:\r\n return {\r\n ...state,\r\n result: payload,\r\n isLoading: false,\r\n isError: false,\r\n };\r\n case ISSUE_LOG_FETCH_FAILED:\r\n return {\r\n result: initialStateIssueLog.result,\r\n isLoading: false,\r\n isError: true,\r\n message: null,\r\n };\r\n case ISSUE_LOG_FETCH_CLEAR:\r\n return {\r\n ...state,\r\n ...initialStateIssueLog,\r\n };\r\n\r\n /**\r\n * CASE: ISSUE_LOG_UPDATE_*\r\n */\r\n case ISSUE_LOG_UPDATE_SUCCESS:\r\n return {\r\n ...state,\r\n result: payload,\r\n isLoading: false,\r\n isError: false,\r\n };\r\n case ISSUE_LOG_UPDATE_FAILED:\r\n return {\r\n ...state,\r\n isLoading: false,\r\n isError: true,\r\n };\r\n default:\r\n return state;\r\n }\r\n};\r\n","const initialState = {\r\n isFetching: null,\r\n isError: false,\r\n result: { content: { data: [], page: 1, totalCount: 0 }, status: true },\r\n};\r\n\r\nexport const SELECT_MULTI_PERSONAL_DATA_CATEGORY_FETCHING =\r\n 'SELECT_MULTI_PERSONAL_DATA_CATEGORY_FETCHING';\r\nexport const SELECT_MULTI_PERSONAL_DATA_CATEGORY_FAILED =\r\n 'SELECT_MULTI_PERSONAL_DATA_CATEGORY_FAILED';\r\nexport const SELECT_MULTI_PERSONAL_DATA_CATEGORY_SUCCESS =\r\n 'SELECT_MULTI_PERSONAL_DATA_CATEGORY_SUCCESS';\r\nexport const SelectMultiPersonalDataCategoryReducer = (\r\n state = initialState,\r\n { type, payload }\r\n) => {\r\n switch (type) {\r\n case SELECT_MULTI_PERSONAL_DATA_CATEGORY_FETCHING:\r\n return { ...state, isFetching: true, isError: false };\r\n case SELECT_MULTI_PERSONAL_DATA_CATEGORY_FAILED:\r\n return {\r\n ...state,\r\n isFetching: false,\r\n isError: true,\r\n result: { content: { data: [], page: 1, totalCount: 0 } },\r\n };\r\n case SELECT_MULTI_PERSONAL_DATA_CATEGORY_SUCCESS:\r\n return { ...state, isFetching: false, isError: false, result: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\n","import { combineReducers } from 'redux';\r\nimport { issueListReducer, issueReducer } from './issue.reducer';\r\nimport issueCommentReducer from './issueComment.reducer';\r\nimport issueLogReducer from './issueLog.reducer';\r\n\r\nimport { SelectMultiPersonalDataCategoryReducer } from './selectMultiPersonalDataCategory.reducer';\r\nimport { SelectNameOrEmailReducer } from './selectNameOrEmail.reducer';\r\nimport {\r\n SelectDepartmentReducer,\r\n // SelectDepartment2Reducer,\r\n // SelectDepartment3Reducer,\r\n} from './selectDepartment.reducer';\r\nimport {\r\n SettingPermissionReducer,\r\n SettingPermissionDeleteReducer,\r\n} from './settingPermission.reducer';\r\nimport {\r\n SettingPermissionManageReducer,\r\n SettingPermissionManageSaveReducer,\r\n SettingPermissionManageEditReducer,\r\n SettingPermissionManageByIdReducer,\r\n} from './settingPermissionManage.reducer';\r\nimport {\r\n SettingLabelReducer,\r\n SettingLabelDeleteReducer,\r\n} from './settingLabel.reducer';\r\nimport {\r\n SettingLabelManageReducer,\r\n SettingLabelManageSaveReducer,\r\n SettingLabelManageEditReducer,\r\n SettingLabelManageByIdReducer,\r\n} from './settingLabelManage.reducer';\r\n\r\nexport default combineReducers({\r\n \r\n issueListReducer,\r\n issueReducer,\r\n issueCommentReducer,\r\n issueLogReducer,\r\n\r\n SelectMultiPersonalDataCategoryReducer,\r\n SelectNameOrEmailReducer,\r\n SelectDepartmentReducer,\r\n\r\n SettingPermissionReducer,\r\n SettingPermissionDeleteReducer,\r\n SettingPermissionManageReducer,\r\n SettingPermissionManageSaveReducer,\r\n SettingPermissionManageEditReducer,\r\n SettingPermissionManageByIdReducer,\r\n\r\n SettingLabelReducer,\r\n SettingLabelDeleteReducer,\r\n SettingLabelManageReducer,\r\n SettingLabelManageSaveReducer,\r\n SettingLabelManageEditReducer,\r\n SettingLabelManageByIdReducer,\r\n});\r\n","import React, { Suspense } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport App from './App';\r\nimport * as serviceWorkerRegistration from './serviceWorkerRegistration';\r\nimport reportWebVitals from './reportWebVitals';\r\nimport { createStore, applyMiddleware } from 'redux';\r\nimport thunk from 'redux-thunk';\r\nimport { Provider } from 'react-redux';\r\nimport reducers from './reducers';\r\nimport logger from 'redux-logger';\r\nlet middlewares = null;\r\nmiddlewares = applyMiddleware(thunk, logger);\r\n\r\nif (process.env.NODE_ENV === 'development') {\r\n middlewares = applyMiddleware(thunk, logger);\r\n} else {\r\n middlewares = applyMiddleware(thunk);\r\n}\r\n\r\nconst store = createStore(reducers, middlewares);\r\nReactDOM.render(\r\n