| @@ -2,7 +2,7 @@ | |||
| "name": "pnsps-react", | |||
| "version": "1.1.2", | |||
| "private": true, | |||
| "homepage": ".", | |||
| "homepage": "/", | |||
| "dependencies": { | |||
| "@ant-design/colors": "^6.0.0", | |||
| "@ant-design/icons": "^4.7.0", | |||
| @@ -15,6 +15,7 @@ | |||
| "@mui/lab": "^5.0.0-alpha.139", | |||
| "@mui/material": "^5.10.6", | |||
| "@mui/x-data-grid": "^6.11.1", | |||
| "@mui/x-date-pickers": "^6.12.0", | |||
| "@reduxjs/toolkit": "^1.8.5", | |||
| "@testing-library/jest-dom": "^5.16.5", | |||
| "@testing-library/react": "^13.4.0", | |||
| @@ -7,9 +7,10 @@ import useJwt from 'auth/jwt/coreUseJwt'; | |||
| */ | |||
| // eslint-disable-next-line arrow-body-style | |||
| export const hostname = 'localhost'; | |||
| const hostPort = '8090'; | |||
| const hostPort = '8080'; | |||
| export const hostPath = `http://${hostname}:${hostPort}`; | |||
| export const apiPath = `${hostPath}/api`; | |||
| //export const apiPath = `/api`; | |||
| export const isUserLoggedIn = () => { | |||
| return localStorage.getItem('userData') && localStorage.getItem(useJwt.jwtConfig.storageTokenKeyName); | |||
| @@ -0,0 +1,156 @@ | |||
| // material-ui | |||
| import * as React from 'react'; | |||
| import { | |||
| DataGrid, | |||
| GridActionsCellItem, | |||
| } from "@mui/x-data-grid"; | |||
| import {useEffect} from "react"; | |||
| import * as Icon from '../utils/IconUtils'; | |||
| import * as HttpUtils from "../utils/HttpUtils" | |||
| import * as UrlUtils from "../utils/ApiPathConst" | |||
| import * as DateUtils from "../utils/DateUtils" | |||
| // ==============================|| EVENT TABLE ||============================== // | |||
| export default function FileList({refType, refId, allowDelete, sx}) { | |||
| const [rows, setRows] = React.useState([]); | |||
| const [rowModesModel] = React.useState({}); | |||
| useEffect(() => { | |||
| loadData(); | |||
| }, []); | |||
| const onDeleteClick = (fileId, skey, filename) => () => { | |||
| HttpUtils.get( | |||
| { | |||
| url: UrlUtils.GET_FILE_DELETE, | |||
| params:{ | |||
| fileId: fileId, | |||
| skey:skey, | |||
| filename: filename | |||
| }, | |||
| onSuccess: function(){ | |||
| loadData(); | |||
| } | |||
| } | |||
| ); | |||
| }; | |||
| const onDownloadClick = (fileId, skey, filename) => () => { | |||
| HttpUtils.fileDownload({ | |||
| fileId:fileId, | |||
| skey:skey, | |||
| filename:filename, | |||
| }); | |||
| }; | |||
| const loadData = ()=>{ | |||
| HttpUtils.post( | |||
| { | |||
| url: UrlUtils.POST_FILE_LIST, | |||
| params:{ | |||
| refType: refType, | |||
| refId: refId, | |||
| }, | |||
| onSuccess: function(responseData){ | |||
| setRows(responseData.records); | |||
| } | |||
| } | |||
| ); | |||
| }; | |||
| const convertToStr=(bytes,decimals)=>{ | |||
| if(bytes == 0) return '0 Bytes'; | |||
| var dm = decimals || 2, | |||
| sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; | |||
| let i = 0; | |||
| i = Math.floor(Math.log(bytes) / Math.log(1024)); | |||
| return parseFloat((bytes / Math.pow(1024, i)).toFixed(dm)) + ' ' + sizes[i]; | |||
| } | |||
| const columns = [ | |||
| { | |||
| id: 'created', | |||
| field: 'created', | |||
| headerName: 'created', | |||
| flex: 1, | |||
| valueGetter:(params)=>{ | |||
| return DateUtils.datetimeStr(params.value); | |||
| } | |||
| }, | |||
| { | |||
| field: 'actions', | |||
| type: 'actions', | |||
| headerName: '', | |||
| width: 50, | |||
| cellClassName: 'actions', | |||
| getActions: (params) => { | |||
| return [ | |||
| <GridActionsCellItem | |||
| key="OutSave" | |||
| icon={<Icon.Download/>} | |||
| label="Download" | |||
| className="textPrimary" | |||
| onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} | |||
| color="primary" | |||
| />] | |||
| }, | |||
| },{ | |||
| id: 'filename', | |||
| field: 'filename', | |||
| headerName: 'filename', | |||
| flex: 3, | |||
| }, | |||
| { | |||
| id: 'filesize', | |||
| field: 'filesize', | |||
| headerName: 'filesize', | |||
| flex: 1, | |||
| valueGetter:(params)=>{ | |||
| return convertToStr(params.value); | |||
| } | |||
| }, | |||
| ]; | |||
| if(allowDelete){ | |||
| columns.push({ | |||
| field: 'actions', | |||
| type: 'actions', | |||
| headerName: 'Delete', | |||
| width: 100, | |||
| cellClassName: 'actions', | |||
| getActions: (params) => { | |||
| return [ | |||
| <GridActionsCellItem | |||
| key="OutSave" | |||
| icon={<Icon.Delete/>} | |||
| label="Delete" | |||
| className="textPrimary" | |||
| onClick={onDeleteClick(params.id, params.row.skey, params.row.filename)} | |||
| color="primary" | |||
| />] | |||
| }, | |||
| }); | |||
| } | |||
| return ( | |||
| <div style={{height: 400, width: '100%'}}> | |||
| <DataGrid | |||
| sx={sx} | |||
| rows={rows} | |||
| columns={columns} | |||
| editMode="row" | |||
| rowModesModel={rowModesModel} | |||
| initialState={{ | |||
| pagination: { | |||
| paginationModel: {page: 0, pageSize: 5}, | |||
| }, | |||
| }} | |||
| pageSizeOptions={[5, 10]} | |||
| autoHeight | |||
| /> | |||
| </div> | |||
| ); | |||
| } | |||
| @@ -0,0 +1,479 @@ | |||
| // material-ui | |||
| import { | |||
| Grid, TextField, Typography, Button | |||
| } from '@mui/material'; | |||
| import { DatePicker } from '@mui/x-date-pickers/DatePicker'; | |||
| import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; | |||
| import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; | |||
| import MainCard from "../../components/MainCard"; | |||
| import * as React from "react"; | |||
| import {useForm} from "react-hook-form"; | |||
| import {useEffect, useState} from "react"; | |||
| //import * as DateUtils from '../../utils/DateUtils'; | |||
| import * as HttpUtils from '../../utils/HttpUtils'; | |||
| import * as UrlUtils from "../../utils/ApiPathConst"; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const OrganizationCard = ({userData, loadDataFun, id}) => { | |||
| const [currentUserData, setCurrentUserData] = useState(userData); | |||
| const [editMode, setEditMode] = useState(false); | |||
| const [createMode, setCreateMode] = useState(false); | |||
| const from = useForm({defaultValues: userData}); | |||
| const {register,reset, handleSubmit} = from; | |||
| useEffect(() => { | |||
| if(id>0){ | |||
| userData["country"] = userData.addressTemp?.country; | |||
| userData["district"] = userData.addressTemp?.district; | |||
| userData["addressLine1"] = userData.addressTemp?.addressLine1; | |||
| userData["addressLine2"] = userData.addressTemp?.addressLine2; | |||
| userData["addressLine3"] = userData.addressTemp?.addressLine3; | |||
| userData["phoneNumber"] = userData.contactTel?.phoneNumber; | |||
| userData["tel_countryCode"] = userData.contactTel?.countryCode; | |||
| userData["faxNumber"] = userData.faxNo?.faxNumber; | |||
| userData["fax_countryCode"] = userData.faxNo?.countryCode; | |||
| userData["brExpiryDate"] = userData.brExpiryDate?userData.brExpiryDate: ""; | |||
| userData["brExpiryDateTemp"] = userData.brExpiryDateTemp?userData.brExpiryDate: ""; | |||
| }else{ | |||
| setCreateMode(id==0); | |||
| setEditMode(id==0); | |||
| userData["brExpiryDate"] = ""; | |||
| userData["brExpiryDateTemp"] = ""; | |||
| } | |||
| setCurrentUserData(userData); | |||
| }, [userData]); | |||
| useEffect(() => { | |||
| reset(currentUserData); | |||
| }, [currentUserData]); | |||
| function onSubmitForm(_formData) { | |||
| HttpUtils.post({ | |||
| url: UrlUtils.POST_ORG_SAVE_PATH, | |||
| params: { | |||
| id:id>0?id:null, | |||
| enCompanyName: _formData.enCompanyName, | |||
| chCompanyName: _formData.chCompanyName, | |||
| brNo: _formData.brNo, | |||
| brExpiryDate: _formData.brExpiryDate, | |||
| enCompanyNameTemp: _formData.enCompanyNameTemp, | |||
| chCompanyNameTemp: _formData.chCompanyNameTemp, | |||
| brExpiryDateTemp: _formData.brExpiryDateTemp, | |||
| contactPerson: _formData.contactPerson, | |||
| contactTel: { | |||
| countryCode: _formData.tel_countryCode, | |||
| phoneNumber: _formData.phoneNumber | |||
| }, | |||
| faxNo: { | |||
| countryCode: _formData.fax_countryCode, | |||
| faxNumber: _formData.faxNumber | |||
| }, | |||
| addressTemp: { | |||
| country: _formData.country, | |||
| district: _formData.district, | |||
| addressLine1: _formData.addressLine1, | |||
| addressLine2: _formData.addressLine2, | |||
| addressLine3: _formData.addressLine3, | |||
| } | |||
| }, | |||
| onSuccess: function(){ | |||
| loadDataFun(); | |||
| setEditMode(false); | |||
| } | |||
| }); | |||
| } | |||
| const onEditClick = () => { | |||
| setEditMode(true); | |||
| }; | |||
| return ( | |||
| <MainCard elevation={0} | |||
| border={false} | |||
| content={false} | |||
| > | |||
| <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}> | |||
| Information | |||
| </Typography> | |||
| <form onSubmit={handleSubmit(onSubmitForm)}> | |||
| <Grid container spacing={1}> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| BR No.: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| id='brNo' | |||
| inputProps={{ maxLength: 8 }} | |||
| disabled={!editMode} | |||
| {...register("brNo")} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={8} > | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Name (Eng): | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("enCompanyName")} | |||
| id='enCompanyName' | |||
| disabled={!editMode} | |||
| inputProps={{ maxLength: 150 }} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Name (Ch): | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("chCompanyName")} | |||
| id='chCompanyName' | |||
| disabled={!editMode} | |||
| inputProps={{ maxLength: 150 }} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Expiry Date: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <LocalizationProvider fullWidth dateAdapter={AdapterDayjs}> | |||
| <DatePicker | |||
| fullWidth | |||
| {...register("brExpiryDate")} | |||
| id='brExpiryDate' | |||
| name='brExpiryDate' | |||
| disabled={!editMode} | |||
| /> | |||
| </LocalizationProvider> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Temp Name (Eng): | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("enCompanyNameTemp")} | |||
| id='enCompanyNameTemp' | |||
| disabled={!editMode} | |||
| inputProps={{ maxLength: 150 }} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Temp Name (Ch): | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("chCompanyNameTemp")} | |||
| id='chCompanyNameTemp' | |||
| disabled={!editMode} | |||
| inputProps={{ maxLength: 150 }} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Temp Expiry Date: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <LocalizationProvider fullWidth dateAdapter={AdapterDayjs}> | |||
| <DatePicker | |||
| fullWidth | |||
| {...register("brExpiryDateTemp")} | |||
| id='brExpiryDateTemp' | |||
| name='brExpiryDateTemp' | |||
| disabled={!editMode} | |||
| /> | |||
| </LocalizationProvider> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Contact Person: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("contactPerson")} | |||
| id='contactPerson' | |||
| disabled={!editMode} | |||
| inputProps={{ maxLength: 150 }} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Contact Tel: | |||
| </Grid> | |||
| <Grid item xs={2}> | |||
| <TextField | |||
| fullWidth | |||
| type="number" | |||
| defaultValue="852" | |||
| {...register("tel_countryCode")} | |||
| id='tel_countryCode' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={4}> | |||
| <TextField | |||
| fullWidth | |||
| type="tel" | |||
| inputProps={{ maxLength: 20 }} | |||
| {...register("phoneNumber")} | |||
| id='phoneNumber' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| fax No: | |||
| </Grid> | |||
| <Grid item xs={2}> | |||
| <TextField | |||
| fullWidth | |||
| type="number" | |||
| defaultValue="852" | |||
| {...register("fax_countryCode")} | |||
| id='fax_countryCode' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={4}> | |||
| <TextField | |||
| fullWidth | |||
| inputProps={{ maxLength: 20 }} | |||
| type="number" | |||
| {...register("faxNumber")} | |||
| id='faxNumber' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Country : | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("country")} | |||
| id='country' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| District : | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("district")} | |||
| id='district' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"top"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'top'}}> | |||
| <Grid item lg={12} sx={{alignItems: 'center'}}>Adress :</Grid> | |||
| </Grid> | |||
| <Grid item lg={6}> | |||
| <Grid item lg={12}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("addressLine1")} | |||
| id='addressLine1' | |||
| disabled={!editMode} | |||
| inputProps={{ maxLength: 255 }} | |||
| /> | |||
| </Grid> | |||
| <Grid item lg={12}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("addressLine2")} | |||
| id='addressLine2' | |||
| disabled={!editMode} | |||
| inputProps={{ maxLength: 255 }} | |||
| /> | |||
| </Grid> | |||
| <Grid item lg={12}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("addressLine3")} | |||
| id='addressLine3' | |||
| disabled={!editMode} | |||
| inputProps={{ maxLength: 255 }} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| {/*bottom button*/} | |||
| <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center"> | |||
| <Grid container maxWidth justifyContent="flex-end"> | |||
| {editMode? | |||
| <> | |||
| {createMode? | |||
| <> | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| type="submit" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| > | |||
| Create | |||
| </Button> | |||
| </Grid> | |||
| </>: | |||
| <> | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| type="submit" | |||
| color="success" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| > | |||
| Save | |||
| </Button> | |||
| </Grid> | |||
| </> | |||
| } | |||
| </> | |||
| : | |||
| <> | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| onClick={onEditClick} | |||
| > | |||
| Edit | |||
| </Button> | |||
| </Grid> | |||
| </> | |||
| } | |||
| </Grid> | |||
| </Grid> | |||
| </form> | |||
| </MainCard> | |||
| ); | |||
| }; | |||
| export default OrganizationCard; | |||
| @@ -1,447 +0,0 @@ | |||
| // material-ui | |||
| import { | |||
| Grid, TextField, Typography, Button | |||
| } from '@mui/material'; | |||
| import MainCard from "../../components/MainCard"; | |||
| import * as React from "react"; | |||
| import {useForm} from "react-hook-form"; | |||
| import {useEffect, useState} from "react"; | |||
| import * as DateUtils from '../../utils/DateUtils'; | |||
| import * as HttpUtils from '../../utils/HttpUtils'; | |||
| import * as UrlUtils from "../../utils/ApiPathConst"; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const UserInformationCard_Organization = ({userData, loadDataFun}) => { | |||
| const [currentUserData, setCurrentUserData] = useState(userData); | |||
| const [editMode, setEditMode] = useState(false); | |||
| const [locked, setLocked] = useState(false); | |||
| const from = useForm({defaultValues: userData}); | |||
| const {register,reset, handleSubmit} = from; | |||
| useEffect(() => { | |||
| let createDate = DateUtils.datetimeStr(userData.created); | |||
| let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy; | |||
| userData["createDate"] = createDate; | |||
| userData["modifieDate"] = modifiedBy; | |||
| userData["verifiedStatus"] = userData.verified? "Not verify yet":"Verified"; | |||
| userData["country"] = userData.address?.country; | |||
| userData["addressLine1"] = userData.address?.addressLine1; | |||
| userData["addressLine2"] = userData.address?.addressLine2; | |||
| userData["addressLine3"] = userData.address?.addressLine3; | |||
| userData["addressLine3"] = userData.address?.addressLine3; | |||
| userData["phoneNumber"] = userData.contactTel?.phoneNumber; | |||
| userData["tel_countryCode"] = userData.contactTel?.countryCode; | |||
| userData["faxNumber"] = userData.faxNo?.faxNumber; | |||
| userData["fax_countryCode"] = userData.faxNo?.countryCode; | |||
| setCurrentUserData(userData); | |||
| }, [userData]); | |||
| useEffect(() => { | |||
| reset(currentUserData); | |||
| setLocked(currentUserData.locked); | |||
| }, [currentUserData]); | |||
| function onSubmitForm(_formData) { | |||
| HttpUtils.post({ | |||
| url: UrlUtils.POST_IND_USER+"/"+userData.id, | |||
| params: { | |||
| name: _formData.name, | |||
| prefix: _formData.prefix, | |||
| contactTel: { | |||
| countryCode: _formData.tel_countryCode, | |||
| phoneNumber: _formData.phoneNumber | |||
| }, | |||
| identification: _formData.identification, | |||
| emailAddress:_formData.emailAddress, | |||
| }, | |||
| onSuccess: function(){ | |||
| loadDataFun(); | |||
| } | |||
| }); | |||
| } | |||
| const onEditClick = () => { | |||
| setEditMode(true); | |||
| }; | |||
| const doLock = () => { | |||
| HttpUtils.get({ | |||
| url: UrlUtils.GET_USER_LOCK+"/"+userData.id, | |||
| onSuccess: function(){ | |||
| loadDataFun(); | |||
| } | |||
| }); | |||
| }; | |||
| const doUnlock = () => { | |||
| HttpUtils.get({ | |||
| url: UrlUtils.GET_USER_UNLOCK+"/"+userData.id, | |||
| onSuccess: function(){ | |||
| loadDataFun(); | |||
| } | |||
| }); | |||
| }; | |||
| return ( | |||
| <MainCard elevation={0} | |||
| border={false} | |||
| content={false} | |||
| > | |||
| <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}> | |||
| Information | |||
| </Typography> | |||
| <form onSubmit={handleSubmit(onSubmitForm)}> | |||
| <Grid container spacing={1}> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Username: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| id='username' | |||
| disabled | |||
| {...register("username")} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Name: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("name")} | |||
| id='name' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Created Date: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("createDate")} | |||
| id='createDate' | |||
| disabled | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Prefix: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("prefix")} | |||
| id='prefix' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Contact Tel: | |||
| </Grid> | |||
| <Grid item xs={2}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("tel_countryCode")} | |||
| id='tel_countryCode' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={4}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("phoneNumber")} | |||
| id='phoneNumber' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Last Updated: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("modifieDate")} | |||
| id='modifieDate' | |||
| disabled | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Organization: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6} > | |||
| <TextField | |||
| {...register("identification", | |||
| { | |||
| value: currentUserData?.identification, | |||
| })} | |||
| id='identification' | |||
| disabled={!editMode} | |||
| /> | |||
| {/* <Button lg={2} variant="contained" onClick={downloadFile} >View File</Button> */} | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Email: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("emailAddress")} | |||
| id='emailAddress' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Verified: | |||
| </Grid> | |||
| { | |||
| currentUserData.verified || editMode? | |||
| <Grid item xs={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("verifiedStatus")} | |||
| id='verifiedStatus' | |||
| disabled | |||
| /> | |||
| </Grid> | |||
| : | |||
| <> | |||
| <Grid item xs={4}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("verifiedStatus")} | |||
| id='verifiedStatus' | |||
| disabled | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={1}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| > | |||
| Verified | |||
| </Button> | |||
| </Grid> | |||
| </> | |||
| } | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Last Login: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("lastLogin", | |||
| { | |||
| value: currentUserData?.lastLogin, | |||
| })} | |||
| id='lastLogin' | |||
| disabled | |||
| > | |||
| </TextField> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Status: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("status")} | |||
| id='status' | |||
| disabled | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| {/*bottom button*/} | |||
| <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center"> | |||
| <Grid container maxWidth justifyContent="flex-end"> | |||
| {editMode? | |||
| <> | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| type="submit" | |||
| color="success" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| > | |||
| Save | |||
| </Button> | |||
| </Grid> | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| onClick={loadDataFun} | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| > | |||
| Cancel & Back | |||
| </Button> | |||
| </Grid> | |||
| </> | |||
| : | |||
| <> | |||
| {locked? | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| color="primary" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| onClick={doUnlock} | |||
| > | |||
| Unlock | |||
| </Button> | |||
| </Grid> | |||
| : | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| color="primary" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| onClick={doLock} | |||
| > | |||
| Lock | |||
| </Button> | |||
| </Grid> | |||
| } | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| onClick={onEditClick} | |||
| > | |||
| Edit | |||
| </Button> | |||
| </Grid> | |||
| </> | |||
| } | |||
| </Grid> | |||
| </Grid> | |||
| </form> | |||
| </MainCard> | |||
| ); | |||
| }; | |||
| export default UserInformationCard_Organization; | |||
| @@ -1,294 +0,0 @@ | |||
| // material-ui | |||
| import { | |||
| Grid, TextField, Typography, Button | |||
| } from '@mui/material'; | |||
| import MainCard from "../../components/MainCard"; | |||
| import * as React from "react"; | |||
| import {useForm} from "react-hook-form"; | |||
| import {useEffect, useState} from "react"; | |||
| import * as DateUtils from '../../utils/DateUtils'; | |||
| import * as HttpUtils from '../../utils/HttpUtils'; | |||
| import * as UrlUtils from "../../utils/ApiPathConst"; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const UserInformationOgCard_Organization = ({userData, loadDataFun}) => { | |||
| const [currentUserData, setCurrentUserData] = useState(userData); | |||
| const [editMode, setEditMode] = useState(false); | |||
| const from = useForm({defaultValues: userData}); | |||
| const {register,reset, handleSubmit} = from; | |||
| useEffect(() => { | |||
| let createDate = DateUtils.datetimeStr(userData.created); | |||
| let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy; | |||
| userData["createDate"] = createDate; | |||
| userData["modifieDate"] = modifiedBy; | |||
| userData["verifiedStatus"] = userData.verified? "Not verify yet":"Verified"; | |||
| userData["country"] = userData.address?.country; | |||
| userData["addressLine1"] = userData.address?.addressLine1; | |||
| userData["addressLine2"] = userData.address?.addressLine2; | |||
| userData["addressLine3"] = userData.address?.addressLine3; | |||
| userData["addressLine3"] = userData.address?.addressLine3; | |||
| userData["phoneNumber"] = userData.contactTel?.phoneNumber; | |||
| userData["tel_countryCode"] = userData.contactTel?.countryCode; | |||
| userData["faxNumber"] = userData.faxNo?.faxNumber; | |||
| userData["fax_countryCode"] = userData.faxNo?.countryCode; | |||
| setCurrentUserData(userData); | |||
| setEditMode(false); | |||
| }, [userData]); | |||
| useEffect(() => { | |||
| reset(currentUserData); | |||
| }, [currentUserData]); | |||
| function onSubmitForm(_formData) { | |||
| HttpUtils.post({ | |||
| url: UrlUtils.POST_IND_USER+"/"+userData.id, | |||
| params: { | |||
| name: _formData.name, | |||
| prefix: _formData.prefix, | |||
| contactTel: { | |||
| countryCode: _formData.tel_countryCode, | |||
| phoneNumber: _formData.phoneNumber | |||
| }, | |||
| identification: _formData.identification, | |||
| emailAddress:_formData.emailAddress, | |||
| }, | |||
| onSuccess: function(){ | |||
| loadDataFun(); | |||
| } | |||
| }); | |||
| } | |||
| return ( | |||
| <MainCard elevation={0} | |||
| border={false} | |||
| content={false} | |||
| > | |||
| <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}> | |||
| Organization | |||
| </Typography> | |||
| <form onSubmit={handleSubmit(onSubmitForm)}> | |||
| <Grid container spacing={1}> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Org.Name (English): | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("enCompanyName")} | |||
| id='enCompanyName' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Org.Name (Chinese): | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("chCompanyName")} | |||
| id='chCompanyName' | |||
| disabled | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| BR No.: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("brNo")} | |||
| id='brNo' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Fax No.: | |||
| </Grid> | |||
| <Grid item xs={2}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("fax_countryCode")} | |||
| id='tel_countryCode' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={4}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("number")} | |||
| id='number' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Contact Tel: | |||
| </Grid> | |||
| <Grid item xs={2}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("tel_countryCode")} | |||
| id='tel_countryCode' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={4}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("phoneNumber")} | |||
| id='phoneNumber' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Email: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("emailAddress")} | |||
| id='emailAddress' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| BR Expiry Date.: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("brExpiryDateTemp")} | |||
| id='brExpiryDateTemp' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| {/*bottom button*/} | |||
| <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center"> | |||
| <Grid container maxWidth justifyContent="flex-end"> | |||
| {editMode? | |||
| <> | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| type="submit" | |||
| color="success" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| > | |||
| Create | |||
| </Button> | |||
| </Grid> | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| onClick={loadDataFun} | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| > | |||
| View File | |||
| </Button> | |||
| </Grid> | |||
| </> | |||
| : | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| color="primary" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| > | |||
| View File | |||
| </Button> | |||
| </Grid> | |||
| } | |||
| </Grid> | |||
| </Grid> | |||
| </form> | |||
| </MainCard> | |||
| ); | |||
| }; | |||
| export default UserInformationOgCard_Organization; | |||
| @@ -2,43 +2,42 @@ | |||
| import {Grid, Typography} from '@mui/material'; | |||
| import {useEffect, useState} from "react"; | |||
| import * as React from "react"; | |||
| //import axios from "axios"; | |||
| import * as HttpUtils from "../../utils/HttpUtils"; | |||
| import {apiPath} from "../../auth/utils"; | |||
| import {useParams} from "react-router-dom"; | |||
| import UserInformationCard from "./UserInformationCard_Organization"; | |||
| import OrgCard from "./UserInformationOrgCard_Organization"; | |||
| import InfoCard from "./OrganizationCard"; | |||
| import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
| import * as UrlUtils from "../../utils/ApiPathConst"; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const UserMaintainPage_Organization = () => { | |||
| const OrganizationDetailPage = () => { | |||
| const params = useParams(); | |||
| const [userData, setUserData] = useState({}) | |||
| const [formData, setFormData] = useState({}) | |||
| const [isLoading, setLoding] = useState(true); | |||
| useEffect(()=>{ | |||
| console.log(userData); | |||
| console.log(formData); | |||
| loadData(); | |||
| },[]); | |||
| const loadData = ()=>{ | |||
| setLoding(true); | |||
| HttpUtils.get({ | |||
| url: `${apiPath}${UrlUtils.GET_USER_PATH}/${params.id}`, | |||
| onSuccess: function(response){ | |||
| setUserData(response.data) | |||
| } | |||
| }); | |||
| if(params.id>0){ | |||
| HttpUtils.get({ | |||
| url: UrlUtils.GET_ORG_PATH+"/"+params.id, | |||
| onSuccess: function(response){ | |||
| setFormData(response.data) | |||
| } | |||
| }); | |||
| } | |||
| }; | |||
| useEffect(() => { | |||
| setLoding(false); | |||
| }, [userData]); | |||
| }, [formData]); | |||
| return ( | |||
| isLoading ? | |||
| @@ -46,19 +45,16 @@ const UserMaintainPage_Organization = () => { | |||
| : | |||
| <Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
| <Grid item xs={12} sx={{mb: -2.25}}> | |||
| <Typography variant="h5">Organization User</Typography> | |||
| <Typography variant="h5">Organization</Typography> | |||
| </Grid> | |||
| {/*col 1*/} | |||
| <Grid item xs={12} > | |||
| <Grid container> | |||
| <Grid item xs={12} md={12} lg={12}> | |||
| <UserInformationCard | |||
| userData={userData} | |||
| loadDataFun={loadData} | |||
| /> | |||
| <OrgCard | |||
| userData={userData} | |||
| <InfoCard | |||
| userData={formData} | |||
| loadDataFun={loadData} | |||
| id={params.id} | |||
| /> | |||
| </Grid> | |||
| @@ -70,4 +66,4 @@ const UserMaintainPage_Organization = () => { | |||
| }; | |||
| export default UserMaintainPage_Organization; | |||
| export default OrganizationDetailPage; | |||
| @@ -0,0 +1,71 @@ | |||
| // material-ui | |||
| import {Grid, Typography} from '@mui/material'; | |||
| import {useEffect, useState} from "react"; | |||
| import * as React from "react"; | |||
| import * as HttpUtils from "../../utils/HttpUtils"; | |||
| import {useParams} from "react-router-dom"; | |||
| import InfoCard from "./OrganizationCard"; | |||
| import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
| import * as UrlUtils from "../../utils/ApiPathConst"; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const OrganizationDetailPage = () => { | |||
| const params = useParams(); | |||
| const [formData, setFormData] = useState({}) | |||
| const [isLoading, setLoding] = useState(true); | |||
| useEffect(()=>{ | |||
| console.log(formData); | |||
| loadData(); | |||
| },[]); | |||
| const loadData = ()=>{ | |||
| setLoding(true); | |||
| if(params.id>0){ | |||
| HttpUtils.get({ | |||
| url: UrlUtils.GET_ORG_FROM_USER_PATH+"/"+params.id, | |||
| onSuccess: function(response){ | |||
| setFormData(response.data) | |||
| } | |||
| }); | |||
| }else{ | |||
| navigate('/org/0'); | |||
| } | |||
| }; | |||
| useEffect(() => { | |||
| setLoding(false); | |||
| }, [formData]); | |||
| return ( | |||
| isLoading ? | |||
| <LoadingComponent/> | |||
| : | |||
| <Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
| <Grid item xs={12} sx={{mb: -2.25}}> | |||
| <Typography variant="h5">Organization (Create From User)</Typography> | |||
| </Grid> | |||
| {/*col 1*/} | |||
| <Grid item xs={12} > | |||
| <Grid container> | |||
| <Grid item xs={12} md={12} lg={12}> | |||
| <InfoCard | |||
| userData={formData} | |||
| loadDataFun={loadData} | |||
| id={params.id} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| {/*col 2*/} | |||
| </Grid> | |||
| ); | |||
| }; | |||
| export default OrganizationDetailPage; | |||
| @@ -33,7 +33,7 @@ const OrganizationSearchPage = () => { | |||
| function getUserList(){ | |||
| HttpUtils.get({ | |||
| url: UrlUtils.GET_ORG_USER_PATH, | |||
| url: UrlUtils.GET_ORG_PATH, | |||
| params: searchCriteria, | |||
| onSuccess: function(responseData){ | |||
| setRecord(responseData); | |||
| @@ -69,9 +69,7 @@ const OrganizationSearchPage = () => { | |||
| /> | |||
| </MainCard> | |||
| </Grid> | |||
| </Grid> | |||
| ); | |||
| }; | |||
| @@ -438,6 +438,170 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { | |||
| </Grid> | |||
| </Grid> | |||
| <Grid container spacing={1}> | |||
| <Grid item lg={1} > | |||
| <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}> | |||
| Organization | |||
| </Typography> | |||
| </Grid> | |||
| <Grid item lg={2}> | |||
| <Button | |||
| variant="contained" | |||
| > | |||
| Create Organization | |||
| </Button> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid container spacing={1}> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Org.Name (English): | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("enCompanyName")} | |||
| id='enCompanyName' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Org.Name (Chinese): | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("chCompanyName")} | |||
| id='chCompanyName' | |||
| disabled | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| BR No.: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("brNo")} | |||
| id='brNo' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Fax No.: | |||
| </Grid> | |||
| <Grid item xs={2}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("fax_countryCode")} | |||
| id='tel_countryCode' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={4}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("number")} | |||
| id='number' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Contact Tel: | |||
| </Grid> | |||
| <Grid item xs={2}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("tel_countryCode")} | |||
| id='tel_countryCode' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={4}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("phoneNumber")} | |||
| id='phoneNumber' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Email: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("emailAddress")} | |||
| id='emailAddress' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| BR Expiry Date.: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("brExpiryDateTemp")} | |||
| id='brExpiryDateTemp' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </form> | |||
| </MainCard> | |||
| ); | |||
| @@ -1,294 +0,0 @@ | |||
| // material-ui | |||
| import { | |||
| Grid, TextField, Typography, Button | |||
| } from '@mui/material'; | |||
| import MainCard from "../../components/MainCard"; | |||
| import * as React from "react"; | |||
| import {useForm} from "react-hook-form"; | |||
| import {useEffect, useState} from "react"; | |||
| import * as DateUtils from '../../utils/DateUtils'; | |||
| import * as HttpUtils from '../../utils/HttpUtils'; | |||
| import * as UrlUtils from "../../utils/ApiPathConst"; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const UserInformationOgCard_Organization = ({userData, loadDataFun}) => { | |||
| const [currentUserData, setCurrentUserData] = useState(userData); | |||
| const [editMode, setEditMode] = useState(false); | |||
| const from = useForm({defaultValues: userData}); | |||
| const {register,reset, handleSubmit} = from; | |||
| useEffect(() => { | |||
| let createDate = DateUtils.datetimeStr(userData.created); | |||
| let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy; | |||
| userData["createDate"] = createDate; | |||
| userData["modifieDate"] = modifiedBy; | |||
| userData["verifiedStatus"] = userData.verified? "Not verify yet":"Verified"; | |||
| userData["country"] = userData.address?.country; | |||
| userData["addressLine1"] = userData.address?.addressLine1; | |||
| userData["addressLine2"] = userData.address?.addressLine2; | |||
| userData["addressLine3"] = userData.address?.addressLine3; | |||
| userData["addressLine3"] = userData.address?.addressLine3; | |||
| userData["phoneNumber"] = userData.contactTel?.phoneNumber; | |||
| userData["tel_countryCode"] = userData.contactTel?.countryCode; | |||
| userData["faxNumber"] = userData.faxNo?.faxNumber; | |||
| userData["fax_countryCode"] = userData.faxNo?.countryCode; | |||
| setCurrentUserData(userData); | |||
| setEditMode(false); | |||
| }, [userData]); | |||
| useEffect(() => { | |||
| reset(currentUserData); | |||
| }, [currentUserData]); | |||
| function onSubmitForm(_formData) { | |||
| HttpUtils.post({ | |||
| url: UrlUtils.POST_IND_USER+"/"+userData.id, | |||
| params: { | |||
| name: _formData.name, | |||
| prefix: _formData.prefix, | |||
| contactTel: { | |||
| countryCode: _formData.tel_countryCode, | |||
| phoneNumber: _formData.phoneNumber | |||
| }, | |||
| identification: _formData.identification, | |||
| emailAddress:_formData.emailAddress, | |||
| }, | |||
| onSuccess: function(){ | |||
| loadDataFun(); | |||
| } | |||
| }); | |||
| } | |||
| return ( | |||
| <MainCard elevation={0} | |||
| border={false} | |||
| content={false} | |||
| > | |||
| <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}> | |||
| Organization | |||
| </Typography> | |||
| <form onSubmit={handleSubmit(onSubmitForm)}> | |||
| <Grid container spacing={1}> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Org.Name (English): | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("enCompanyName")} | |||
| id='enCompanyName' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Org.Name (Chinese): | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("chCompanyName")} | |||
| id='chCompanyName' | |||
| disabled | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| BR No.: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("brNo")} | |||
| id='brNo' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Fax No.: | |||
| </Grid> | |||
| <Grid item xs={2}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("fax_countryCode")} | |||
| id='tel_countryCode' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={4}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("number")} | |||
| id='number' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Contact Tel: | |||
| </Grid> | |||
| <Grid item xs={2}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("tel_countryCode")} | |||
| id='tel_countryCode' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={4}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("phoneNumber")} | |||
| id='phoneNumber' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4}> | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Email: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("emailAddress")} | |||
| id='emailAddress' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item lg={4} > | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| BR Expiry Date.: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("brExpiryDateTemp")} | |||
| id='brExpiryDateTemp' | |||
| disabled={!editMode} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| {/*bottom button*/} | |||
| <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center"> | |||
| <Grid container maxWidth justifyContent="flex-end"> | |||
| {editMode? | |||
| <> | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| type="submit" | |||
| color="success" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| > | |||
| Create | |||
| </Button> | |||
| </Grid> | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| onClick={loadDataFun} | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| > | |||
| View File | |||
| </Button> | |||
| </Grid> | |||
| </> | |||
| : | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| color="primary" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| > | |||
| View File | |||
| </Button> | |||
| </Grid> | |||
| } | |||
| </Grid> | |||
| </Grid> | |||
| </form> | |||
| </MainCard> | |||
| ); | |||
| }; | |||
| export default UserInformationOgCard_Organization; | |||
| @@ -6,8 +6,9 @@ import * as React from "react"; | |||
| import * as HttpUtils from "../../utils/HttpUtils"; | |||
| import {apiPath} from "../../auth/utils"; | |||
| import {useParams} from "react-router-dom"; | |||
| import FileList from "../../components/FileList" | |||
| import MainCard from "../../components/MainCard"; | |||
| import UserInformationCard from "./UserInformationCard_Organization"; | |||
| import OrgCard from "./UserInformationOrgCard_Organization"; | |||
| import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
| import * as UrlUtils from "../../utils/ApiPathConst"; | |||
| @@ -56,12 +57,18 @@ const UserMaintainPage_Organization = () => { | |||
| userData={userData} | |||
| loadDataFun={loadData} | |||
| /> | |||
| <OrgCard | |||
| userData={userData} | |||
| loadDataFun={loadData} | |||
| /> | |||
| </Grid> | |||
| <Grid item xs={12} md={12} lg={12}> | |||
| <MainCard elevation={0} border={false} content={false}> | |||
| <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}> | |||
| Files | |||
| </Typography> | |||
| <FileList sx={{mt: 3, ml: 3, mb: 1}} | |||
| refId={params.id} | |||
| refType={"brFile"} | |||
| /> | |||
| </MainCard> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| {/*col 2*/} | |||
| @@ -17,6 +17,7 @@ const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSear | |||
| const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage'))); | |||
| const OrganizationSearchPage = Loadable(lazy(() => import('pages/OrganizationSearchPage'))); | |||
| const OrganizationDetailPage = Loadable(lazy(() => import('pages/OrganizationDetailPage'))); | |||
| const OrganizationDetailPage_fromUser = Loadable(lazy(() => import('pages/OrganizationDetailPage/index_loadFormUser'))); | |||
| // ==============================|| AUTH ROUTING ||============================== // | |||
| @@ -65,6 +66,10 @@ const SettingRoutes = { | |||
| path: '/org/:id', | |||
| element: <OrganizationDetailPage /> | |||
| }, | |||
| { | |||
| path: '/org/fromUser/:id', | |||
| element: <OrganizationDetailPage_fromUser /> | |||
| }, | |||
| { | |||
| path: 'setting', | |||
| element: <SettingPage /> | |||
| @@ -20,10 +20,16 @@ export const POST_IND_USER = apiPath+'/user/ind'; | |||
| export const GET_ORG_USER_PATH = apiPath+'/user/org'; | |||
| export const GET_ORG_PATH = apiPath+'/org'; | |||
| export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user'; | |||
| export const POST_ORG_SAVE_PATH = apiPath+'/org/save'; | |||
| //File Up/Download | |||
| export const FILE_UP_POST = apiPath+'/file/ul'; | |||
| export const FILE_DOWN_GET = apiPath+"/file/dl"; | |||
| 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}; | |||
| // POST request | |||
| @@ -0,0 +1,10 @@ | |||
| import DeleteIcon from '@mui/icons-material/DeleteForever'; | |||
| import EditIcon from '@mui/icons-material/Edit'; | |||
| import ViewIcon from '@mui/icons-material/Visibility'; | |||
| import DownloadICon from '@mui/icons-material/Download'; | |||
| export const Delete = DeleteIcon; | |||
| export const Edit = EditIcon; | |||
| export const View = ViewIcon; | |||
| export const Download = DownloadICon; | |||