DR import

src/layout/MainLayout/Header/index.js

@@ -149,6 +149,9 @@ function Header(props) {
             <li>
               <Link className="holidaySetting" to='/holiday'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Holiday Setting</Typography></Link>
             </li>
+            <li>
+              <Link className="holidaySetting" to='/setting/drImport'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>DR Import</Typography></Link>
+            </li>
             <li>
               <Link className="announcement" to='/setting/announcement'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Announcement</Typography></Link>
             </li>

src/pages/Setting/DrImport/index.js

@@ -0,0 +1,176 @@
+
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+
+import {
+    Grid, Typography, Button,
+    Stack, Box,
+    Dialog, DialogTitle, DialogContent, DialogActions,
+} from '@mui/material';
+import { notifyDownloadSuccess } from 'utils/CommonFunction';
+
+import { FormattedMessage, useIntl } from "react-intl";
+
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const Index = () => {
+    const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
+    const [warningText, setWarningText] = React.useState("");
+    const [resultStr, setResultStr] = React.useState("");
+
+    const intl = useIntl();
+
+
+    const BackgroundHead = {
+        backgroundImage: `url(${titleBackgroundImg})`,
+        width: 'auto',
+        height: 'auto',
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundColor: '#0C489E',
+        backgroundPosition: 'right'
+    }
+
+
+    const readFile = (event) => {
+        let file = event.target.files[0];
+        if (file) {
+            if (file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx")
+            ) {
+                HttpUtils.postWithFiles({
+                    url: UrlUtils.DR_IMPORT,
+                    params:null,
+                    files: [event.target.files[0]],
+                    onSuccess: function (responData) {
+                        if(responData?.msg){
+                            setResultStr(<>Error:<br/><span style={{"whiteSpace": "pre-line"}}>{responData?.msg}</span></>)
+                        }else if(responData?.success){
+                            setResultStr(<>Success<br/>Record Count: {responData.recordCount}</>)
+                        }
+                    }
+                });
+            } else {
+                setWarningText(intl.formatMessage({ id: 'requireValidFileWithFormat' }));
+                setIsWarningPopUp(true);
+                setAttachment({});
+                document.getElementById("uploadFileBtn").value = "";
+                return;
+            }
+        }
+        document.getElementById("uploadFileBtn").value = "";
+    }
+
+    return (
+        <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column" alignItems="center">
+            <Grid item xs={12} md={12} width="100%" >
+                <div style={BackgroundHead}>
+                    <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                        <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                            DR Import
+                        </Typography>
+                    </Stack>
+                </div>
+            </Grid>
+
+            <Grid item xs={12} md={12} sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, }} width="98%">
+                <Box xs={12} md={12} sx={{ borderRadius: '10px', backgroundColor: '#fff', p: 4 }}>
+                    <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+
+                        <Button
+                            aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
+                            component="span"
+                            variant="outlined"
+                            size="large"
+                            onClick={()=>{
+                                HttpUtils.fileDownload({
+                                    url: UrlUtils.DR_EXPORT,
+                                    onSuccess: ()=>{
+                                        notifyDownloadSuccess();
+                                    }
+                                });
+                            }}
+                        >Export DR Excel</Button>
+                            <Grid item sx={{ pl: 4 }}>
+                                <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+                                    <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}>
+                                        <input
+                                            id="uploadFileBtn"
+                                            name="file"
+                                            type="file"
+                                            accept=".xlsx"
+                                            style={{ display: 'none' }}
+                                            onChange={(event) => {
+                                                readFile(event)
+                                            }}
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                            <Grid item >
+                                <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+                                    <Grid item xs={12} >
+                                        <label htmlFor="uploadFileBtn">
+                                            <Button
+                                                aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
+                                                component="span"
+                                                variant="outlined"
+                                                size="large"
+                                            >Import DR Excel</Button>
+                                        </label>
+                                    </Grid>
+                                    
+                                </Grid>
+                            </Grid>
+                     
+                    </Stack>
+                </Box>
+            </Grid>
+
+            <Grid item xs={12} md={12} sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, }} width="98%" >
+                <Box xs={12} md={12} sx={{ borderRadius: '10px', backgroundColor: '#fff', p: 4 }}>
+
+                    <Typography variant="h4">Result:</Typography>
+                    <Box xs={12} md={12} sx={{ pl: 4 }}>
+                        {resultStr}
+                    </Box>
+
+
+                </Box>
+            </Grid>
+
+            <div>
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
+                    <DialogTitle>
+                        Action Fail
+                    </DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button
+                            aria-label={intl.formatMessage({ id: 'ok' })}
+                            onClick={() => { setIsWarningPopUp(false); }}
+                        >
+                            <FormattedMessage id="ok" />
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
+        </Grid>
+    );
+};
+
+export default Index;

src/routes/GLDUserRoutes.js

@@ -22,6 +22,7 @@ const UserMaintainPage = Loadable(lazy(() => import('pages/User/GLDUserProfile')
 const SystemSetting = Loadable(lazy(() => import('pages/Setting/SystemSetting')));
 const AnnouncementDetails = Loadable(lazy(() => import('pages/Announcement/Details')));
 const AnnouncementSearch = Loadable(lazy(() => import('pages/Announcement/Search')));
+const DrImport = Loadable(lazy(() => import('pages/Setting/DrImport')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -100,6 +101,10 @@ const GLDUserRoutes = {
           path: '/setting/announcement/details/:id',
           element: <AnnouncementDetails />
         },
+        {
+          path: '/setting/drImport',
+          element: <DrImport />
+        },
       ]
     },
   ]

src/utils/ApiPathConst.js

@@ -67,6 +67,11 @@ export const POST_FILE_LIST = apiPath+'/file/list';
 export const GET_FILE_DELETE = apiPath+'/file/delete';
 //export const FILE_DOWN_GET = ({id,skey,filename})=>{ return apiPath+'/file/dl/'+id+'/'+skey+'/'+filename};
 
+export const DR_EXPORT = apiPath+'/settings/dr/export';
+export const DR_IMPORT = apiPath+'/settings/dr/import';
+
+
+
 // POST request
 //Login
 export const POST_LOGIN = '/login';

src/utils/HttpUtils.js

@@ -1,109 +1,110 @@
 import axios from "axios";
-import {FILE_UP_POST, FILE_DOWN_GET} from "../utils/ApiPathConst";
+import { FILE_UP_POST, FILE_DOWN_GET } from "../utils/ApiPathConst";
 
-export const get = ({url, params, onSuccess, onFail, onError}) =>{
-    axios.get(url,{
+export const get = ({ url, params, onSuccess, onFail, onError }) => {
+    axios.get(url, {
         params: params
     }).then(
-        (response)=>{onResponse(response, onSuccess, onFail);}
+        (response) => { onResponse(response, onSuccess, onFail); }
     ).catch(error => {
-        return handleError(error,onError);
+        return handleError(error, onError);
     });
 };
 
 //TODO
-export const put = ({url,params, onSuccess, onFail, onError}) =>{
-    axios.put(url,params).then(
-        (response)=>{onResponse(response, onSuccess, onFail);}
+export const put = ({ url, params, onSuccess, onFail, onError }) => {
+    axios.put(url, params).then(
+        (response) => { onResponse(response, onSuccess, onFail); }
     ).catch(error => {
-        return handleError(error,onError);
+        return handleError(error, onError);
     });
 };
 
-export const patch = ({url,params, onSuccess, onFail, onError}) =>{
-    axios.patch(url,params).then(
-        (response)=>{onResponse(response, onSuccess, onFail);}
+export const patch = ({ url, params, onSuccess, onFail, onError }) => {
+    axios.patch(url, params).then(
+        (response) => { onResponse(response, onSuccess, onFail); }
     ).catch(error => {
-        return handleError(error,onError);
+        return handleError(error, onError);
     });
 };
 
-export const post = ({url, params, onSuccess, onFail, onError, headers}) =>{
-    headers = headers?headers:{
-        "Content-Type":"application/json"
+export const post = ({ url, params, onSuccess, onFail, onError, headers }) => {
+    headers = headers ? headers : {
+        "Content-Type": "application/json"
     };
-    
-    axios.post(url,params,
+
+    axios.post(url, params,
         {
-            headers:headers
+            headers: headers
         }).then(
-        (response)=>{onResponse(response, onSuccess, onFail);}
-    ).catch(error => {
-        return handleError(error,onError);
-    });
+            (response) => { onResponse(response, onSuccess, onFail); }
+        ).catch(error => {
+            return handleError(error, onError);
+        });
 };
 
-export const postWithFiles = ({url, params, files, onSuccess, onFail, onError}) =>{
+export const postWithFiles = ({ url, params, files, onSuccess, onFail, onError }) => {
     var formData = new FormData();
-    for (let i = 0; i < files.length; i++){
+    for (let i = 0; i < files.length; i++) {
         const file = files[i]
         formData.append("multipartFileList", file);
     }
-    for (var key in params) {
-        if(typeof(params[key]) ==='object'){
-            formData.append(key, JSON.stringify(params[key]));
-        }else{
-            formData.append(key, params[key]);
-        } 
-    }
-    
-    axios.post(url,formData, 
-        {headers: {"Content-Type":"multipart/form-data"}})
-    .then(
-        (response)=>{onResponse(response, onSuccess, onFail);}
-    ).catch(error => {
-        return handleError(error,onError);
-    });
+    if (params)
+        for (var key in params) {
+            if (typeof (params[key]) === 'object') {
+                formData.append(key, JSON.stringify(params[key]));
+            } else {
+                formData.append(key, params[key]);
+            }
+        }
+
+    axios.post(url, formData,
+        { headers: { "Content-Type": "multipart/form-data" } })
+        .then(
+            (response) => { onResponse(response, onSuccess, onFail); }
+        ).catch(error => {
+            return handleError(error, onError);
+        });
 };
 
-export const fileDownload = ({url, fileId, skey, filename, params, method, onResponse, onError}) =>{
-    if(!url){
-        url = FILE_DOWN_GET+"/"+fileId+"/"+skey+"/"+filename
+export const fileDownload = ({ url, fileId, skey, filename, params, method, onResponse, onError }) => {
+    if (!url) {
+        url = FILE_DOWN_GET + "/" + fileId + "/" + skey + "/" + filename
     }
-    if(method == 'post'){
-        axios.post( url, params,
+    if (method == 'post') {
+        axios.post(url, params,
             {
                 responseType: 'blob',
-                headers:{
-                    "Content-Type":"application/json"
+                headers: {
+                    "Content-Type": "application/json"
                 }
             }
         ).then(
-            (response)=>{
+            (response) => {
                 fileDownloadResponse(response, onResponse)
             }
         ).catch(error => {
-            return handleError(error,onError);
+            return handleError(error, onError);
         });
 
-    }else{
-        axios.get( url,
+    } else {
+        axios.get(url,
             {
                 responseType: 'blob',
-                params:params
+                params: params
             }
         ).then(
-            (response)=>{
+            (response) => {
                 fileDownloadResponse(response, onResponse)
             }
         ).catch(error => {
-            return handleError(error,onError);
+            return handleError(error, onError);
         });
     }
 };
 
-const fileDownloadResponse=(response, onResponse)=>{
-    const fn = response.headers.get("content-disposition")?.split("filename=")[1]?.split('"')[1]?.trim()??filename;
+const fileDownloadResponse = (response, onResponse) => {
+    const fn = response.headers.get("content-disposition")?.split("filename=")[1]?.split('"')[1]?.trim() ?? filename;
     const url = URL.createObjectURL(response.data);
     const a = document.createElement('a');
     a.href = url;
@@ -112,47 +113,47 @@ const fileDownloadResponse=(response, onResponse)=>{
     a.click();
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
-    if(onResponse){
+    if (onResponse) {
         onResponse();
     }
 }
 
-export const fileUpload = ({refType, refId, files, refCode, onSuccess, onFail, onError}) =>{
+export const fileUpload = ({ refType, refId, files, refCode, onSuccess, onFail, onError }) => {
     postWithFiles({
         url: FILE_UP_POST,
-        params:{
+        params: {
             refType: refType,
             refId: refId,
             refCode: refCode
         },
         files: files,
         onSuccess: onSuccess,
-        onFail:onFail,
-        onError:onError
+        onFail: onFail,
+        onError: onError
     });
 };
 
 
-const onResponse= (response, onSuccess, onFail) =>{
-    if (response.status >= 300 ||response.status < 200) {
+const onResponse = (response, onSuccess, onFail) => {
+    if (response.status >= 300 || response.status < 200) {
         console.log("onFail");
-        if(onFail){
+        if (onFail) {
             onFail(response);
-        }else{
+        } else {
             console.log(response);
         }
         return;
     }
-    
-    if(onSuccess){
+
+    if (onSuccess) {
         onSuccess(response?.data);
     }
 }
 
-const handleError= (error, onError) =>{
-    if(onError){
+const handleError = (error, onError) => {
+    if (onError) {
         return onError(error);
-    }else{
+    } else {
         console.log(error);
         return false;
     }