| @@ -7,6 +7,7 @@ import { | |||
| } from "@mui/x-data-grid"; | |||
| import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline'; | |||
| import { useEffect } from "react"; | |||
| import { useIntl } from 'react-intl'; | |||
| // import {useNavigate} from "react-router-dom"; | |||
| // import { useTheme } from '@mui/material/styles'; | |||
| import { | |||
| @@ -17,6 +18,8 @@ import { | |||
| // ==============================|| EVENT TABLE ||============================== // | |||
| export default function UploadFileTable({ recordList, setRecordList, showPageColumn, _checkCode, _expectedCode }) { | |||
| const intl = useIntl(); | |||
| const deleteFileLabel = intl.formatMessage({ id: 'ariaDeleteFile' }); | |||
| const [rows, setRows] = React.useState(recordList); | |||
| const [rowModesModel, setRowModesModel] = React.useState({}); | |||
| @@ -67,6 +70,25 @@ export default function UploadFileTable({ recordList, setRecordList, showPageCol | |||
| setRows(rows.filter((row) => row.id !== id)); | |||
| } | |||
| const renderDeleteAction = (id) => ( | |||
| <GridActionsCellItem | |||
| key="delete" | |||
| icon={<RemoveCircleOutlineIcon />} | |||
| label={deleteFileLabel} | |||
| title={deleteFileLabel} | |||
| className="textPrimary" | |||
| onClick={handleCancelClick(id)} | |||
| onKeyDown={(event) => { | |||
| if (event.key === 'Enter' || event.key === ' ') { | |||
| event.preventDefault(); | |||
| event.stopPropagation(); | |||
| handleCancelClick(id)(event); | |||
| } | |||
| }} | |||
| color="error" | |||
| /> | |||
| ); | |||
| const handlePreviewClick = (param) => () => { | |||
| var reader = new FileReader(); | |||
| reader.onload = function () { | |||
| @@ -94,17 +116,7 @@ export default function UploadFileTable({ recordList, setRecordList, showPageCol | |||
| width: 30, | |||
| cellClassName: 'actions', | |||
| // hide:true, | |||
| getActions: ({ id }) => { | |||
| return [ | |||
| <GridActionsCellItem | |||
| key="OutSave" | |||
| icon={<RemoveCircleOutlineIcon />} | |||
| label="delete" | |||
| className="textPrimary" | |||
| onClick={handleCancelClick(id)} | |||
| color="error" | |||
| />] | |||
| }, | |||
| getActions: ({ id }) => [renderDeleteAction(id)], | |||
| }, | |||
| { | |||
| field: 'name', | |||
| @@ -139,17 +151,7 @@ export default function UploadFileTable({ recordList, setRecordList, showPageCol | |||
| width: 30, | |||
| cellClassName: 'actions', | |||
| // hide:true, | |||
| getActions: ({ id }) => { | |||
| return [ | |||
| <GridActionsCellItem | |||
| key="OutSave" | |||
| icon={<RemoveCircleOutlineIcon />} | |||
| label="delete" | |||
| className="textPrimary" | |||
| onClick={handleCancelClick(id)} | |||
| color="error" | |||
| />] | |||
| }, | |||
| getActions: ({ id }) => [renderDeleteAction(id)], | |||
| }, | |||
| { | |||
| field: 'name', | |||
| @@ -55,7 +55,7 @@ import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst"; | |||
| import {ThemeProvider} from "@emotion/react"; | |||
| import {FormattedMessage, useIntl} from "react-intl"; | |||
| //import { Invaild } from 'utils/IconUtils'; | |||
| import { notifyActionError } from 'utils/CommonFunction'; | |||
| import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction'; | |||
| // ============================|| FIREBASE - REGISTER ||============================ // | |||
| @@ -822,10 +822,12 @@ const BusCustomFormWizard = (props) => { | |||
| <InputAdornment position="end"> | |||
| <IconButton | |||
| role="button" | |||
| tabIndex={0} | |||
| aria-label={intl.formatMessage({ | |||
| id: showPassword ? "ariaHidePassword" : "ariaShowPassword" | |||
| })} | |||
| onClick={handleClickShowPassword} | |||
| onKeyDown={(event) => handleActionKeyDown(event, handleClickShowPassword)} | |||
| onMouseDown={handleMouseDownPassword} | |||
| edge="end" | |||
| size="large" | |||
| @@ -899,10 +901,12 @@ const BusCustomFormWizard = (props) => { | |||
| <InputAdornment position="end"> | |||
| <IconButton | |||
| role="button" | |||
| tabIndex={0} | |||
| aria-label={intl.formatMessage({ | |||
| id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword" | |||
| })} | |||
| onClick={handleClickShowConfirmPassword} | |||
| onKeyDown={(event) => handleActionKeyDown(event, handleClickShowConfirmPassword)} | |||
| onMouseDown={handleMouseDownPassword} | |||
| edge="end" | |||
| size="large" | |||
| @@ -1546,6 +1550,7 @@ const BusCustomFormWizard = (props) => { | |||
| variant="contained" | |||
| sx={{ height: '40px' }} | |||
| type="button" | |||
| tabIndex={0} | |||
| onClick={() => { | |||
| if (fileInputRef.current) { | |||
| fileInputRef.current.click(); | |||
| @@ -1659,7 +1664,14 @@ const BusCustomFormWizard = (props) => { | |||
| <img src={captchaImg} alt="" /> | |||
| </Grid> | |||
| <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}> | |||
| <IconButton role="button" aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}> | |||
| <IconButton | |||
| role="button" | |||
| tabIndex={0} | |||
| aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} | |||
| size="large" | |||
| onClick={() => { onCaptchaChange() }} | |||
| onKeyDown={(event) => handleActionKeyDown(event, () => onCaptchaChange())} | |||
| > | |||
| <LoopIcon fontSize="inherit" /> | |||
| </IconButton> | |||
| </Grid> | |||
| @@ -47,7 +47,7 @@ import { FormattedMessage, useIntl } from "react-intl"; | |||
| import { Link } from 'react-router-dom'; | |||
| import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst"; | |||
| import * as HttpUtils from "../../../utils/HttpUtils"; | |||
| import { notifyActionError } from 'utils/CommonFunction'; | |||
| import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction'; | |||
| // ============================|| FIREBASE - REGISTER ||============================ // | |||
| const CustomFormWizard = (props) => { | |||
| @@ -1040,10 +1040,12 @@ const CustomFormWizard = (props) => { | |||
| <InputAdornment position="end"> | |||
| <IconButton | |||
| role="button" | |||
| tabIndex={0} | |||
| aria-label={intl.formatMessage({ | |||
| id: showPassword ? "ariaHidePassword" : "ariaShowPassword" | |||
| })} | |||
| onClick={handleClickShowPassword} | |||
| onKeyDown={(event) => handleActionKeyDown(event, handleClickShowPassword)} | |||
| onMouseDown={handleMouseDownPassword} | |||
| edge="end" | |||
| size="large" | |||
| @@ -1117,10 +1119,12 @@ const CustomFormWizard = (props) => { | |||
| <InputAdornment position="end"> | |||
| <IconButton | |||
| role="button" | |||
| tabIndex={0} | |||
| aria-label={intl.formatMessage({ | |||
| id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword" | |||
| })} | |||
| onClick={handleClickShowConfirmPassword} | |||
| onKeyDown={(event) => handleActionKeyDown(event, handleClickShowConfirmPassword)} | |||
| onMouseDown={handleMouseDownPassword} | |||
| edge="end" | |||
| size="large" | |||
| @@ -1874,6 +1878,7 @@ const CustomFormWizard = (props) => { | |||
| variant="contained" | |||
| sx={{ height: '40px' }} | |||
| type="button" | |||
| tabIndex={0} | |||
| onClick={() => { | |||
| if (fileInputRef.current) { | |||
| fileInputRef.current.click(); | |||
| @@ -1987,7 +1992,14 @@ const CustomFormWizard = (props) => { | |||
| <img src={captchaImg} alt="" /> | |||
| </Grid> | |||
| <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}> | |||
| <IconButton role="button" aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}> | |||
| <IconButton | |||
| role="button" | |||
| tabIndex={0} | |||
| aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} | |||
| size="large" | |||
| onClick={() => { onCaptchaChange() }} | |||
| onKeyDown={(event) => handleActionKeyDown(event, () => onCaptchaChange())} | |||
| > | |||
| <LoopIcon fontSize="inherit" /> | |||
| </IconButton> | |||
| </Grid> | |||
| @@ -2116,8 +2128,10 @@ const CustomFormWizard = (props) => { | |||
| <IconButton | |||
| role="button" | |||
| tabIndex={0} | |||
| aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })} | |||
| onClick={handleClickShowId} | |||
| onKeyDown={(event) => handleActionKeyDown(event, handleClickShowId)} | |||
| onMouseDown={handleMouseDownId} | |||
| edge="end" | |||
| size="medium" | |||
| @@ -14,6 +14,7 @@ import { | |||
| Typography | |||
| } from '@mui/material'; | |||
| import { FormattedMessage, useIntl } from "react-intl"; | |||
| import { handleActionKeyDown } from 'utils/CommonFunction'; | |||
| // ==============================|| EVENT TABLE ||============================== // | |||
| export default function UploadFileTable({ recordList, setUpdateRows, }) { | |||
| @@ -74,8 +75,10 @@ export default function UploadFileTable({ recordList, setUpdateRows, }) { | |||
| size="small" | |||
| color="error" | |||
| role="button" | |||
| aria-label={intl.formatMessage({ id: 'delete' })} | |||
| tabIndex={0} | |||
| aria-label={intl.formatMessage({ id: 'ariaDeleteFile' })} | |||
| onClick={() => handleCancelClick(row.id)} | |||
| onKeyDown={(event) => handleActionKeyDown(event, () => handleCancelClick(row.id))} | |||
| > | |||
| <RemoveCircleOutlineIcon fontSize="small" /> | |||
| </IconButton> | |||
| @@ -7,7 +7,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout'))); | |||
| import {isGranted, isGrantedAny} from "auth/utils"; | |||
| // import { isPasswordExpiry } from "utils/Utils"; | |||
| // render - dashboard | |||
| const DashboardDefault = Loadable(lazy(() => import('pages/Dashboard/GLD'))); | |||
| const DashboardDefault = Loadable(lazy(() => import('pages/dashboard/GLD'))); | |||
| const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNotice/Details_GLD'))); | |||
| const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_GLD'))); | |||
| const ApplicationMarkAsPaidSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_Mark_As_Paid_GLD'))); | |||
| @@ -7,7 +7,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout'))); | |||
| // import { isPasswordExpiry } from "utils/Utils"; | |||
| // render - dashboard | |||
| const DashboardDefault = Loadable(lazy(() => import('pages/Dashboard/Public'))); | |||
| const DashboardDefault = Loadable(lazy(() => import('pages/dashboard/Public'))); | |||
| const ManageOrgUser = Loadable(lazy(() => import('pages/User/ManagePage_OrgPublic'))); | |||
| const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice/ListPanel'))); | |||
| const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/ApplyForm'))); | |||
| @@ -652,6 +652,7 @@ | |||
| "ariaApplicationGroup": "Application Group", | |||
| "ariaProfileTabs": "Profile tabs", | |||
| "ariaUploadPdfFile": "Upload PDF file", | |||
| "ariaDeleteFile": "Delete file", | |||
| "ariaExportHolidayTemplate": "Export holiday template", | |||
| "ariaUploadExcelFile": "Upload Excel file (.xlsx)", | |||
| "ariaBackToHome": "Back to home", | |||
| @@ -648,6 +648,7 @@ | |||
| "ariaApplicationGroup": "申请组别", | |||
| "ariaProfileTabs": "个人资料选项卡", | |||
| "ariaUploadPdfFile": "上传 PDF 文件", | |||
| "ariaDeleteFile": "删除文件", | |||
| "ariaExportHolidayTemplate": "导出假期模板", | |||
| "ariaUploadExcelFile": "上传 Excel 文件 (.xlsx)", | |||
| "ariaBackToHome": "返回主页", | |||
| @@ -649,6 +649,7 @@ | |||
| "ariaApplicationGroup": "申請組別", | |||
| "ariaProfileTabs": "個人檔案分頁", | |||
| "ariaUploadPdfFile": "上載 PDF 檔案", | |||
| "ariaDeleteFile": "刪除檔案", | |||
| "ariaExportHolidayTemplate": "匯出假期範本", | |||
| "ariaUploadExcelFile": "上載 Excel 檔案 (.xlsx)", | |||
| "ariaBackToHome": "返回主頁", | |||
| @@ -11,6 +11,13 @@ export const clickableLink=(link, label)=> { | |||
| return <a href={link}>{label}</a>; | |||
| } | |||
| export const handleActionKeyDown = (event, action) => { | |||
| if (event.key === 'Enter' || event.key === ' ') { | |||
| event.preventDefault(); | |||
| action(event); | |||
| } | |||
| }; | |||
| export function getDeletedRecordWithRefList(referenceList, updatedList) { | |||
| return referenceList.filter(x => !updatedList.includes(x)); | |||
| } | |||