diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index 05fc7e8..4b4be74 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -97,6 +97,9 @@ function Header(props) {
  • Organization User
    • +
  • + Organization +
  • User Group
    • diff --git a/src/pages/OrganizationDetailPage/UserInformationCard_Organization.js b/src/pages/OrganizationDetailPage/UserInformationCard_Organization.js new file mode 100644 index 0000000..53d8327 --- /dev/null +++ b/src/pages/OrganizationDetailPage/UserInformationCard_Organization.js @@ -0,0 +1,447 @@ +// 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 ( + + + Information + + +
    + + + + + + Username: + + + + + + + + + + + + Name: + + + + + + + + + + + + Created Date: + + + + + + + + + + + + Prefix: + + + + + + + + + + + + Contact Tel: + + + + + + + + + + + + + + Last Updated: + + + + + + + + + + + + Organization: + + + + + {/* */} + + + + + + + + + Email: + + + + + + + + + + + + + Verified: + + + { + currentUserData.verified || editMode? + + + + : + <> + + + + + + + + } + + + + + + + + + + Last Login: + + + + + + + + + + + + + + + + Status: + + + + + + + + + + + {/*bottom button*/} + + + + {editMode? + <> + + + + + + + + : + <> + {locked? + + + + : + + + + } + + + + + } + + + + + +
    +     + ); +}; + +export default UserInformationCard_Organization; diff --git a/src/pages/OrganizationDetailPage/UserInformationOrgCard_Organization.js b/src/pages/OrganizationDetailPage/UserInformationOrgCard_Organization.js new file mode 100644 index 0000000..865f52d --- /dev/null +++ b/src/pages/OrganizationDetailPage/UserInformationOrgCard_Organization.js @@ -0,0 +1,294 @@ +// 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 ( + + + Organization + + +
    + + + + + + + Org.Name (English): + + + + + + + + + + + + Org.Name (Chinese): + + + + + + + + + + + + BR No.: + + + + + + + + + + + + + Fax No.: + + + + + + + + + + + + + + Contact Tel: + + + + + + + + + + + + + + + + Email: + + + + + + + + + + + + + BR Expiry Date.: + + + + + + + + + + + + {/*bottom button*/} + + + + {editMode? + <> + + + + + + + + : + + + + + + } + + + + + +
    +     + ); +}; + +export default UserInformationOgCard_Organization; diff --git a/src/pages/OrganizationDetailPage/index.js b/src/pages/OrganizationDetailPage/index.js new file mode 100644 index 0000000..21370a4 --- /dev/null +++ b/src/pages/OrganizationDetailPage/index.js @@ -0,0 +1,73 @@ +// material-ui +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 LoadingComponent from "../extra-pages/LoadingComponent"; +import * as UrlUtils from "../../utils/ApiPathConst"; + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + + +const UserMaintainPage_Organization = () => { + const params = useParams(); + const [userData, setUserData] = useState({}) + const [isLoading, setLoding] = useState(true); + + + useEffect(()=>{ + console.log(userData); + loadData(); + },[]); + + const loadData = ()=>{ + setLoding(true); + HttpUtils.get({ + url: `${apiPath}${UrlUtils.GET_USER_PATH}/${params.id}`, + onSuccess: function(response){ + setUserData(response.data) + } + }); + }; + + + useEffect(() => { + setLoding(false); + }, [userData]); + + return ( + isLoading ? + + : + + + Organization User + + {/*col 1*/} + + + + + + + + + + {/*col 2*/} + + ); +}; + + +export default UserMaintainPage_Organization; diff --git a/src/pages/OrganizationSearchPage/OrganizationSearchForm.js b/src/pages/OrganizationSearchPage/OrganizationSearchForm.js new file mode 100644 index 0000000..8855bb4 --- /dev/null +++ b/src/pages/OrganizationSearchPage/OrganizationSearchForm.js @@ -0,0 +1,120 @@ +// material-ui +import { + Button, + CardContent, + Grid, TextField +} from '@mui/material'; +import MainCard from "../../components/MainCard"; +import {useForm} from "react-hook-form"; + +import { useState} from "react"; +import * as React from "react"; +// ==============================|| DASHBOARD - DEFAULT ||============================== // + + +const OrganizationSearchForm = ({applySearch}) => { + + const [type, setType] = useState([]); + + const { reset, register, handleSubmit } = useForm() + const onSubmit = (data) => { + + let typeArray = []; + + for(let i =0; i < type.length; i++){ + typeArray.push(type[i].label); + } + + const temp = { + brNo: data.brNo, + enCompanyName: data.enCompanyName, + chCompanyName: data.chCompanyName, + }; + applySearch(temp); + }; + + function resetForm(){ + setType([]); + reset(); + } + + return ( + + +
    + {/*row 1*/} + + + Search Form + + + + {/*row 2*/} + + + + + + + + + + + + + + + + + {/*last row*/} + + + + + + + + + + +
    +     + ); +}; + +export default OrganizationSearchForm; diff --git a/src/pages/OrganizationSearchPage/OrganizationTable.js b/src/pages/OrganizationSearchPage/OrganizationTable.js new file mode 100644 index 0000000..5f82703 --- /dev/null +++ b/src/pages/OrganizationSearchPage/OrganizationTable.js @@ -0,0 +1,93 @@ +// material-ui +import * as React from 'react'; +import { + DataGrid, + GridActionsCellItem, +} from "@mui/x-data-grid"; +import EditIcon from '@mui/icons-material/Visibility'; +import {useEffect} from "react"; +import {useNavigate} from "react-router-dom"; +// ==============================|| EVENT TABLE ||============================== // + +export default function OrganizationTable({recordList}) { + const [rows, setRows] = React.useState(recordList); + const [rowModesModel] = React.useState({}); + const navigate = useNavigate() + + useEffect(() => { + setRows(recordList); + }, [recordList]); + + const handleActionClick = (id) => () => { + navigate('/orgUser/'+ id); + }; + + const columns = [ + { + field: 'actions', + type: 'actions', + headerName: 'Actions', + width: 100, + cellClassName: 'actions', + getActions: ({id}) => { + return [ + } + label="Edit" + className="textPrimary" + onClick={handleActionClick(id)} + color="primary" + />] + }, + }, + { + id: 'brNo', + field: 'brNo', + headerName: 'BR No.', + flex: 1, + }, + { + id: 'enCompanyName', + field: 'enCompanyName', + headerName: 'Name (Eng)', + flex: 1, + }, + { + id: 'chCompanyName', + field: 'chCompanyName', + headerName: 'Name (Ch)', + flex: 1, + }, + { + id: 'contactTel', + field: 'contactTel', + headerName: 'Tel.', + flex: 1, + }, + { + id: 'brExpiryDate', + field: 'brExpiryDate', + headerName: 'Expiry Date', + flex: 1, + }, + ]; + + return ( +
    + +
    + ); +} diff --git a/src/pages/OrganizationSearchPage/index.js b/src/pages/OrganizationSearchPage/index.js new file mode 100644 index 0000000..12d7680 --- /dev/null +++ b/src/pages/OrganizationSearchPage/index.js @@ -0,0 +1,78 @@ +// material-ui +import { + Grid, Typography +} from '@mui/material'; +import MainCard from "../../components/MainCard"; +import SearchForm from "./OrganizationSearchForm"; +import EventTable from "./OrganizationTable"; +import {useEffect, useState} from "react"; +import * as UrlUtils from "../../utils/ApiPathConst"; +import * as React from "react"; +import LoadingComponent from "../extra-pages/LoadingComponent"; +import * as HttpUtils from "../../utils/HttpUtils"; + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + +const OrganizationSearchPage = () => { + + const [record,setRecord] = useState([]); + const [searchCriteria, setSearchCriteria] = useState({}); + const [onReady, setOnReady] = useState(false); + + useEffect(() => { + getUserList(); + }, []); + + useEffect(() => { + setOnReady(true); + }, [record]); + + useEffect(() => { + getUserList(); + }, [searchCriteria]); + + function getUserList(){ + HttpUtils.get({ + url: UrlUtils.GET_ORG_USER_PATH, + params: searchCriteria, + onSuccess: function(responseData){ + setRecord(responseData); + } + }); + } + + function applySearch(input) { + setSearchCriteria(input); + } + + return ( + !onReady ? + + : + + + View Organization + + + {/*row 1*/} + + + + {/*row 2*/} + + + + + + + + + ); +}; + +export default OrganizationSearchPage; diff --git a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js index 7f98ede..5a58588 100644 --- a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js +++ b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js @@ -240,6 +240,26 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { + + + + + Email: + + + + + + + + + { } - - - - - Email: - - - - - - - - diff --git a/src/routes/SettingRoutes.js b/src/routes/SettingRoutes.js index fb17031..98354db 100644 --- a/src/routes/SettingRoutes.js +++ b/src/routes/SettingRoutes.js @@ -15,6 +15,9 @@ const UserSearchPage_Organization= Loadable(lazy(()=>import ('pages/pnspsUserSea const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/pnspsUserDetailPage_Organization'))); const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage'))); const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage'))); +const OrganizationSearchPage = Loadable(lazy(() => import('pages/OrganizationSearchPage'))); +const OrganizationDetailPage = Loadable(lazy(() => import('pages/OrganizationDetailPage'))); + // ==============================|| AUTH ROUTING ||============================== // @@ -54,6 +57,14 @@ const SettingRoutes = { path: '/orgUser/:id', element: }, + { + path: 'org', + element: + }, + { + path: '/org/:id', + element: + }, { path: 'setting', element: