alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

org & user group auth

master
Anna Ho 1 year ago
parent
1e7bb5d8b1
commit
b2a0ce201e
10 changed files with 384 additions and 277 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +101
    -98
      src/pages/Organization/DetailPage/OrganizationCard.js
  2. +29
    -25
      src/pages/Organization/SearchPage/OrganizationTable.js
  3. +7
    -3
      src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js
  4. +10
    -4
      src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js
  5. +49
    -36
      src/pages/pnspsUserGroupDetailPage/UserAddCard.js
  6. +9
    -2
      src/pages/pnspsUserGroupDetailPage/UserAddTable.js
  7. +10
    -1
      src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js
  8. +96
    -44
      src/pages/pnspsUserGroupDetailPage/index.js
  9. +42
    -36
      src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
  10. +31
    -28
      src/pages/pnspsUserGroupSearchPage/UserGroupTable.js

+ 101
- 98
src/pages/Organization/DetailPage/OrganizationCard.js View File

@@ -10,7 +10,7 @@ import * as React from "react";
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import * as yup from 'yup'; import * as yup from 'yup';
import { useEffect, useState } from "react";
import { useEffect, useState, lazy } from "react";
import * as DateUtils from 'utils/DateUtils'; import * as DateUtils from 'utils/DateUtils';
import * as HttpUtils from 'utils/HttpUtils'; import * as HttpUtils from 'utils/HttpUtils';
import * as UrlUtils from "utils/ApiPathConst"; import * as UrlUtils from "utils/ApiPathConst";
@@ -18,13 +18,12 @@ import * as FieldUtils from "utils/FieldUtils";
import * as ComboData from "utils/ComboData"; import * as ComboData from "utils/ComboData";
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react';
import { notifySaveSuccess } from 'utils/CommonFunction'; import { notifySaveSuccess } from 'utils/CommonFunction';
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { PNSPS_BUTTON_THEME } from "themes/buttonConst"; import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
import { ThemeProvider } from "@emotion/react"; import { ThemeProvider } from "@emotion/react";
import { makeStyles } from '@mui/styles'; import { makeStyles } from '@mui/styles';
import { isGrantedAny } from "auth/utils";
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
root: { root: {
@@ -40,7 +39,7 @@ const useStyles = makeStyles(() => ({
right: 50, right: 50,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
width:"70%"
width: "70%"
}, },
})); }));


@@ -57,7 +56,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
const [minDate] = React.useState(new Date()); const [minDate] = React.useState(new Date());
const [fromDate, setFromDate] = React.useState("dd / mm / yyyy"); const [fromDate, setFromDate] = React.useState("dd / mm / yyyy");
const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy"); const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
const {register, handleSubmit, reset} = useForm()
const { register, handleSubmit, reset } = useForm()


React.useEffect(() => { React.useEffect(() => {
setFromDateValue(fromDate); setFromDateValue(fromDate);
@@ -151,7 +150,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
id: id > 0 ? id : null, id: id > 0 ? id : null,
enCompanyName: values.enCompanyName, enCompanyName: values.enCompanyName,
chCompanyName: values.chCompanyName, chCompanyName: values.chCompanyName,
orgShortName: values.creditor?values.orgShortName:"",
orgShortName: values.creditor ? values.orgShortName : "",
brNo: values.brNo, brNo: values.brNo,
// brExpiryDate: values.brExpiryDate, // brExpiryDate: values.brExpiryDate,
brExpiryDate: sentDateFrom, brExpiryDate: sentDateFrom,
@@ -214,17 +213,17 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {


const onSubmit = (data) => { const onSubmit = (data) => {
let sentOrgShortName = ""; let sentOrgShortName = "";
if(data.orgShortName!=null && data.orgShortName!=""){
sentOrgShortName = data.orgShortName
if (sentOrgShortName.length <=24){
if (data.orgShortName != null && data.orgShortName != "") {
sentOrgShortName = data.orgShortName
if (sentOrgShortName.length <= 24) {
const temp = { const temp = {
orgShortName: sentOrgShortName, orgShortName: sentOrgShortName,
}; };
markAsCreditor(temp); markAsCreditor(temp);
}else{
} else {
alert("Organisation Short Name must not exceed 24 characters.") alert("Organisation Short Name must not exceed 24 characters.")
} }
}else{
} else {
alert("Please enter Organisation Short Name for Demand Note.") alert("Please enter Organisation Short Name for Demand Note.")
} }


@@ -265,93 +264,97 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
<form onSubmit={formik.handleSubmit} style={{ padding: 24 }}> <form onSubmit={formik.handleSubmit} style={{ padding: 24 }}>


{/*top*/} {/*top*/}
<Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start">

{editMode ?
<>
{createMode ?
<>
{isGrantedAny("MAINTAIN_ORG") ?
<Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start">

{editMode ?
<>
{createMode ?
<>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 0, mr: 3 }}>
<Button
variant="contained"
type="submit"
color="success"
>
Create
</Button>
</Grid>
</ThemeProvider>
</> :
<>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 0, mr: 3 }}>
<Button
variant="contained"
onClick={loadDataFun}
color="cancel"
>
Reset & Back
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
type="submit"
color="success"
>
Save
</Button>
</Grid>
</ThemeProvider>
</>
}
</>
:
<>
<Grid item sx={{ ml: 0, mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}> <ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 0, mr: 3 }}>
<Button
variant="contained"
type="submit"
color="success"
>
Create
</Button>
</Grid>
<Button
variant="contained"
onClick={onEditClick}
color="success"
>
Edit
</Button>
</ThemeProvider> </ThemeProvider>
</> :
<>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 0, mr: 3 }}>
<Button
variant="contained"
onClick={loadDataFun}
color="cancel"
>
Reset & Back
</Button>
</Grid>

{
currentUserData.creditor ?
<Grid item sx={{ ml: 3, mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
color="error"
onClick={() => setNonCreditorConfirmPopUp(true)}
>
Mark as Non-Credit Client
</Button>
</ThemeProvider>
</Grid> </Grid>
:
<Grid item sx={{ ml: 3, mr: 3 }}> <Grid item sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
type="submit"
color="success"
>
Save
</Button>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
color="orange"
onClick={() => setCreditorConfirmPopUp(true)}
>
Mark as Credit Client
</Button>
</ThemeProvider>
</Grid> </Grid>
</ThemeProvider>
</>
}
</>
:
<>
<Grid item sx={{ ml: 0, mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
onClick={onEditClick}
color="success"
>
Edit
</Button>
</ThemeProvider>
</Grid>

{
currentUserData.creditor ?
<Grid item sx={{ ml: 3, mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
color="error"
onClick={() => setNonCreditorConfirmPopUp(true)}
>
Mark as Non-Credit Client
</Button>
</ThemeProvider>
</Grid>
:
<Grid item sx={{ ml: 3, mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
color="orange"
onClick={() => setCreditorConfirmPopUp(true)}
>
Mark as Credit Client
</Button>
</ThemeProvider>
</Grid>
}
</>
}
}
</>
}
</Grid>
</Grid> </Grid>
</Grid>
: <></>
}

{/*top*/} {/*top*/}


{!onReady ? {!onReady ?
@@ -430,9 +433,9 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
inputComponent: FormDateInputComponent, inputComponent: FormDateInputComponent,
}} }}
onChange={(newValue) => { onChange={(newValue) => {
if (newValue.target.value>DateUtils.dateValue(minDate)){
if (newValue.target.value > DateUtils.dateValue(minDate)) {
setFromDate(newValue.target.value); setFromDate(newValue.target.value);
}else{
} else {
alert("Please select a date after today.") alert("Please select a date after today.")
} }
}} }}
@@ -440,11 +443,11 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
shrink: true shrink: true
}} }}
disabled={(!editMode && !createMode)} disabled={(!editMode && !createMode)}
sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
sx={{ "& .MuiInputBase-input": { display: "block", textIndent: "-9999px" } }}
/> />
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>


<Grid item xs={12} lg={4} > <Grid item xs={12} lg={4} >
@@ -511,7 +514,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
form: formik form: formik
})} })}
</Grid> </Grid>
:
:
null null
} }


@@ -552,7 +555,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
<Grid item> <Grid item>
<Typography variant="h6" style={{ padding: '16px' }}>Please Enter Organisation Short Name for Credit Client (Used for Demand Note)</Typography> <Typography variant="h6" style={{ padding: '16px' }}>Please Enter Organisation Short Name for Credit Client (Used for Demand Note)</Typography>
</Grid> </Grid>
<Grid item sx={{padding: '16px'}}>
<Grid item sx={{ padding: '16px' }}>
<TextField <TextField
fullWidth fullWidth
{...register("orgShortName")} {...register("orgShortName")}


+ 29
- 25
src/pages/Organization/SearchPage/OrganizationTable.js View File

@@ -1,12 +1,13 @@
// material-ui // material-ui
import * as React from 'react'; import * as React from 'react';
import {
GridActionsCellItem,
} from "@mui/x-data-grid";
// import {
// GridActionsCellItem,
// } from "@mui/x-data-grid";
import { FiDataGrid } from "components/FiDataGrid"; import { FiDataGrid } from "components/FiDataGrid";
import EditIcon from '@mui/icons-material/Visibility';
//import EditIcon from '@mui/icons-material/Visibility';
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import * as DateUtils from "utils/DateUtils"; import * as DateUtils from "utils/DateUtils";
import { clickableLink} from 'utils/CommonFunction';
import {GET_ORG_PATH} from "utils/ApiPathConst"; import {GET_ORG_PATH} from "utils/ApiPathConst";
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


@@ -18,35 +19,38 @@ export default function OrganizationTable({ searchCriteria }) {
set_searchCriteria(searchCriteria); set_searchCriteria(searchCriteria);
}, [searchCriteria]); }, [searchCriteria]);


const handleActionClick = (id) => () => {
navigate('/org/' + id);
};
// const handleActionClick = (id) => () => {
// navigate('/org/' + id);
// };


const columns = [ const columns = [
{
field: 'actions',
type: 'actions',
headerName: 'Actions',
width: 100,
cellClassName: 'actions',
getActions: ({ id }) => {
return [
<GridActionsCellItem
key="OutSave"
icon={<EditIcon />}
label="Edit"
className="textPrimary"
onClick={handleActionClick(id)}
color="primary"
/>]
},
},
// {
// field: 'actions',
// type: 'actions',
// headerName: 'Actions',
// width: 100,
// cellClassName: 'actions',
// getActions: ({ id }) => {
// return [
// <GridActionsCellItem
// key="OutSave"
// icon={<EditIcon />}
// label="Edit"
// className="textPrimary"
// onClick={handleActionClick(id)}
// color="primary"
// />]
// },
// },
{ {
id: 'brNo', id: 'brNo',
field: 'brNo', field: 'brNo',
headerName: 'BR No.', headerName: 'BR No.',
flex: 1, flex: 1,
minWidth: 150, minWidth: 150,
renderCell: (params) => {
return clickableLink('/org/'+ params.row.id, params.row.brNo);
},
}, },
{ {
id: 'enCompanyName', id: 'enCompanyName',


+ 7
- 3
src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js View File

@@ -5,8 +5,6 @@ import {
import MainCard from "../../components/MainCard"; import MainCard from "../../components/MainCard";
import * as React from "react"; import * as React from "react";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
//import LoadingComponent from "../extra-pages/LoadingComponent";
//import GroupAuthTable from "./GroupAuthTable";
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
@@ -14,11 +12,16 @@ const GroupAuthTable = Loadable(lazy(() => import('./GroupAuthTable')));


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //


const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData,isNewRecord}) => {
const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData,isNewRecord, editMode}) => {
const [currentAuthData, setCurrentAuthData] = React.useState({}); const [currentAuthData, setCurrentAuthData] = React.useState({});
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const [selectedRow, setSelectedRow] = useState([]); const [selectedRow, setSelectedRow] = useState([]);
const [referenceRow, setReferenceRow] = useState([]); const [referenceRow, setReferenceRow] = useState([]);
const [_editMode, setEditMode] = useState(editMode);

useEffect(()=>{
setEditMode(editMode);
},[editMode])


useEffect(() => { useEffect(() => {
//if user data from parent are not null //if user data from parent are not null
@@ -62,6 +65,7 @@ const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData,isNewRec
userAuth={userGroupData.authIds} userAuth={userGroupData.authIds}
setSelectedRow={setSelectedRow} setSelectedRow={setSelectedRow}
isNewRecord={isNewRecord} isNewRecord={isNewRecord}
editMode={_editMode}
/> />
</MainCard> </MainCard>
); );


+ 10
- 4
src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js View File

@@ -15,10 +15,15 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo


// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function GroupAuthTable({setSelectedRow, userAuth,isNewRecord}) {
export default function GroupAuthTable({setSelectedRow, userAuth,isNewRecord, editMode}) {
const [authData, setAuthData] = useState([]); const [authData, setAuthData] = useState([]);
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const [currentSelectedRow, setCurrentSelectedRow] = useState(userAuth); const [currentSelectedRow, setCurrentSelectedRow] = useState(userAuth);
const [_editMode, setEditMode] = useState(editMode);

useEffect(()=>{
setEditMode(editMode);
},[editMode])


const _sx = { const _sx = {
ml: 3, ml: 3,
@@ -92,9 +97,10 @@ export default function GroupAuthTable({setSelectedRow, userAuth,isNewRecord}) {
checkboxSelection checkboxSelection
rowSelectionModel={currentSelectedRow} rowSelectionModel={currentSelectedRow}
onRowSelectionModelChange={(ids) => { onRowSelectionModelChange={(ids) => {
// console.log(ids);
setSelectedRow(ids);
setCurrentSelectedRow(ids);
if(_editMode){
setSelectedRow(ids);
setCurrentSelectedRow(ids);
}
}} }}
autoHeight autoHeight
sx={_sx} sx={_sx}


+ 49
- 36
src/pages/pnspsUserGroupDetailPage/UserAddCard.js View File

@@ -23,13 +23,18 @@ const UserAddTable = Loadable(lazy(() => import('./UserAddTable')));
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




const UserAddCard = ({ isCollectData, updateGroupMember, userGroupData, isNewRecord }) => {
const UserAddCard = ({ isCollectData, updateGroupMember, userGroupData, isNewRecord, editMode }) => {
const [currentUserData, setCurrentUserData] = React.useState({}); const [currentUserData, setCurrentUserData] = React.useState({});
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const [groupUserData, setGroupUserData] = useState([]); const [groupUserData, setGroupUserData] = useState([]);
const [userComboList, setUserComboList] = useState([]); const [userComboList, setUserComboList] = useState([]);
const [selectedUser, setSelectedUser] = useState(null); const [selectedUser, setSelectedUser] = useState(null);
const [deletedList, setDeletedList] = useState([]); const [deletedList, setDeletedList] = useState([]);
const [_editMode, setEditMode] = useState(editMode);

useEffect(() => {
setEditMode(editMode);
}, [editMode])


function updateUserList() { function updateUserList() {
const idList = getIdList(groupUserData); const idList = getIdList(groupUserData);
@@ -104,47 +109,55 @@ const UserAddCard = ({ isCollectData, updateGroupMember, userGroupData, isNewRec
<Typography variant="h4" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}> <Typography variant="h4" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
User(s) User(s)
</Typography> </Typography>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mt: 2 }}>
<Grid container alignItems={"center"}>
<Grid item xs={3} s={3} md={2} lg={2}
sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">User:</Typography>
</Grid>
<Grid item xs={6} s={5} md={5} lg={5}>
<Autocomplete
disablePortal
id="user-combo"
value={selectedUser === null ? null : selectedUser}
options={userComboList}
onChange={(event, newValue) => {
console.log(newValue)
setSelectedUser(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</Grid>
<Grid item xs={3} s={3} md={4} lg={4} sx={{ ml: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={updateUserList}
>
<Typography variant="h5">Add</Typography>
</Button>

{
_editMode ?
<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mt: 2 }}>
<Grid container alignItems={"center"}>
<Grid item xs={3} s={3} md={2} lg={2}
sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5">User:</Typography>
</Grid>
<Grid item xs={6} s={5} md={5} lg={5}>
<Autocomplete
disablePortal
id="user-combo"
value={selectedUser === null ? null : selectedUser}
options={userComboList}
onChange={(event, newValue) => {
console.log(newValue)
setSelectedUser(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</Grid>
<Grid item xs={3} s={3} md={4} lg={4} sx={{ ml: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={updateUserList}
>
<Typography variant="h5">Add</Typography>
</Button>
</Grid>
</Grid>
</Grid> </Grid>
</Grid>
</Grid>
: <></>
}


<Grid container> <Grid container>
<Grid item xs={12} sx={{mt:2}}>
<Grid item xs={12}>
<UserAddTable <UserAddTable
setGroupUserData={setGroupUserData} setGroupUserData={setGroupUserData}
setDeletedList={setDeletedList} setDeletedList={setDeletedList}
userList={groupUserData} userList={groupUserData}
editMode={_editMode}
/> />
</Grid> </Grid>
</Grid> </Grid>


+ 9
- 2
src/pages/pnspsUserGroupDetailPage/UserAddTable.js View File

@@ -14,7 +14,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo


// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function UserAddTable({setGroupUserData, userList,setDeletedList}) {
export default function UserAddTable({setGroupUserData, userList,setDeletedList, editMode}) {
const [groupData, setGroupData] = useState([]); const [groupData, setGroupData] = useState([]);
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const [localDeletedList, setLocalDeletedList] = React.useState([]); const [localDeletedList, setLocalDeletedList] = React.useState([]);
@@ -37,6 +37,12 @@ export default function UserAddTable({setGroupUserData, userList,setDeletedList}
} }
} }


const [_editMode, setEditMode] = useState(editMode);

useEffect(()=>{
setEditMode(editMode);
},[editMode])

useEffect(() => { useEffect(() => {
setGroupData(userList); setGroupData(userList);
}, []); }, []);
@@ -70,6 +76,7 @@ export default function UserAddTable({setGroupUserData, userList,setDeletedList}




const columns = [ const columns = [
_editMode?
{ {
field: 'actions', field: 'actions',
type: 'actions', type: 'actions',
@@ -87,7 +94,7 @@ export default function UserAddTable({setGroupUserData, userList,setDeletedList}
/>, />,
] ]
}, },
},
}:{},
{ {
id: 'name', id: 'name',
field: 'name', field: 'name',


+ 10
- 1
src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js View File

@@ -14,12 +14,19 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserGroupInfoCard = ({ isCollectData, updateGroupObject, userGroupData }) => {
const UserGroupInfoCard = ({ isCollectData, updateGroupObject, userGroupData , editMode}) => {
//const params = useParams(); //const params = useParams();
const [currentUserGroupData, setCurrentUserGroupData] = React.useState({}); const [currentUserGroupData, setCurrentUserGroupData] = React.useState({});
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const { register, getValues } = useForm() const { register, getValues } = useForm()


const [_editMode, setEditMode] = useState(editMode);

useEffect(()=>{
setEditMode(editMode);
},[editMode])


useEffect(() => { useEffect(() => {
//if user data from parent are not null //if user data from parent are not null
if (Object.keys(userGroupData).length > 0 && userGroupData !== undefined) { if (Object.keys(userGroupData).length > 0 && userGroupData !== undefined) {
@@ -68,6 +75,7 @@ const UserGroupInfoCard = ({ isCollectData, updateGroupObject, userGroupData })
<Grid item xs={7} s={7} md={7} lg={6}> <Grid item xs={7} s={7} md={7} lg={6}>
<TextField <TextField
fullWidth fullWidth
disabled={!_editMode}
{...register("userGroupName", {...register("userGroupName",
{ {
value: currentUserGroupData.name, value: currentUserGroupData.name,
@@ -94,6 +102,7 @@ const UserGroupInfoCard = ({ isCollectData, updateGroupObject, userGroupData })
value: currentUserGroupData.description, value: currentUserGroupData.description,
}) })
} }
disabled={!_editMode}
id='description' id='description'
/> />
</Grid> </Grid>


+ 96
- 44
src/pages/pnspsUserGroupDetailPage/index.js View File

@@ -12,10 +12,9 @@ import {
getDeletedRecordWithRefList, getDeletedRecordWithRefList,
getIdList, getIdList,
notifyDeleteSuccess, notifyDeleteSuccess,
// notifyDeleteSuccess,
notifySaveSuccess notifySaveSuccess
} from "../../utils/CommonFunction"; } from "../../utils/CommonFunction";
import { POST_AND_UPDATE_USER_GROUP, GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst";
import { POST_AND_UPDATE_USER_GROUP, GET_GROUP_LIST_PATH } from "utils/ApiPathConst";


import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
@@ -25,6 +24,7 @@ const UserAddCard = Loadable(lazy(() => import('./UserAddCard')));
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
import ForwardIcon from '@mui/icons-material/Forward'; import ForwardIcon from '@mui/icons-material/Forward';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import { isGrantedAny } from "auth/utils";


const BackgroundHead = { const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`, backgroundImage: `url(${titleBackgroundImg})`,
@@ -43,6 +43,7 @@ const UserMaintainPage = () => {
const params = useParams(); const params = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const [editMode, setEditMode] = useState(false);
const [isCollectData, setIsCollectData] = useState(false); const [isCollectData, setIsCollectData] = useState(false);
const [editedGroupData, setEditedGroupData] = useState({}); const [editedGroupData, setEditedGroupData] = useState({});
const [userGroupData, setUserGroupData] = useState([]); const [userGroupData, setUserGroupData] = useState([]);
@@ -184,6 +185,96 @@ const UserMaintainPage = () => {
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
</Button> </Button>
</Grid> </Grid>

{/*top button*/}
{
isGrantedAny("MAINTAIN_GROUP")?
<Grid item s={12} md={12} lg={12} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start" sx={{ mt: 1 }}>
{editMode ?
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={() => { location.reload() }}
color="gray"
>
<Typography variant="h5">Reset & Back</Typography>
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={submitData}
>
<Typography variant="h5">Save</Typography>
</Button>
</Grid>
</>

:
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={() => { setEditMode(true) }}
>
<Typography variant="h5">Edit</Typography>
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
color="error"
disabled={isNewRecord}
onClick={handleDeleteClick}
>
<Typography variant="h5">Delete User Group</Typography>
</Button>
<GeneralConfirmWindow
isWindowOpen={isWindowOpen}
title={"Attention"}
content={`Confirm to delete User Group "${userGroupData.data.name}" ?`}
onNormalClose={handleClose}
onConfirmClose={deleteData}
/>
</Grid>

</>
}

</Grid>
</Grid>
:<></>
}



{/*col 1*/} {/*col 1*/}
<Grid item xs={12} md={5} lg={5}> <Grid item xs={12} md={5} lg={5}>
<Grid container> <Grid container>
@@ -194,6 +285,7 @@ const UserMaintainPage = () => {
userGroupData={userGroupData} userGroupData={userGroupData}
isCollectData={isCollectData} isCollectData={isCollectData}
isNewRecord={isNewRecord} isNewRecord={isNewRecord}
editMode={editMode}
/> />
</Box> </Box>
</Grid> </Grid>
@@ -205,6 +297,7 @@ const UserMaintainPage = () => {
userGroupData={userGroupData} userGroupData={userGroupData}
isCollectData={isCollectData} isCollectData={isCollectData}
isNewRecord={isNewRecord} isNewRecord={isNewRecord}
editMode={editMode}
/> />
</Box> </Box>
</Grid> </Grid>
@@ -218,51 +311,10 @@ const UserMaintainPage = () => {
userGroupData={userGroupData} userGroupData={userGroupData}
isCollectData={isCollectData} isCollectData={isCollectData}
isNewRecord={isNewRecord} isNewRecord={isNewRecord}
editMode={editMode}
/> />
</Box> </Box>
</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">
<Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
disabled={isNewRecord}
onClick={handleDeleteClick}
>
<Typography variant="h5">Delete User Group</Typography>
</Button>
<GeneralConfirmWindow
isWindowOpen={isWindowOpen}
title={"Attention"}
content={`Confirm to delete User Group "${userGroupData.data.name}" ?`}
onNormalClose={handleClose}
onConfirmClose={deleteData}
/>
</Grid>

<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={submitData}
>
<Typography variant="h5">Save</Typography>
</Button>
</Grid>
</Grid>
</Grid>
</Grid> </Grid>
); );
}; };


+ 42
- 36
src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js View File

@@ -9,9 +9,9 @@ import { useForm } from "react-hook-form";
import * as React from "react"; import * as React from "react";
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
import { PNSPS_BUTTON_THEME } from "../../themes/buttonConst";
import { ThemeProvider } from "@emotion/react";
import { isGrantedAny } from "auth/utils";
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserGroupSearchForm = ({ applySearch }) => { const UserGroupSearchForm = ({ applySearch }) => {
@@ -38,9 +38,9 @@ const UserGroupSearchForm = ({ applySearch }) => {
> >


<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
<Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1 }} width="98%">
{/*row 1*/} {/*row 1*/}
<Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
<Grid item justifyContent="space-between" alignItems="center" sx={{ mt: 1, ml: 3, mb: 2.5 }}>
<Typography variant="pnspsFormHeader" > <Typography variant="pnspsFormHeader" >
Search Search
</Typography> </Typography>
@@ -81,40 +81,46 @@ const UserGroupSearchForm = ({ applySearch }) => {
sx={{ mb: 3 }} sx={{ mb: 3 }}
> >
<ThemeProvider theme={PNSPS_BUTTON_THEME}> <ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item xs={3} md={3} >
<Button
variant="contained"
onClick={handleNewGroupClick}
startIcon={<AddCircleOutlineIcon sx={{alignItems:"center"}}/>}
>
New Group
</Button>
</Grid>
<Grid item xs={8} md={8}>
<Grid container maxWidth justifyContent="flex-end" spacing={3}>
<Grid item >
<Button
variant="contained"
color="cancel"
onClick={resetForm}
>
Reset
</Button>
</Grid>
{
isGrantedAny("MAINTAIN_GROUP") ?
<Grid item xs={3} md={3} >
<Button
variant="contained"
onClick={handleNewGroupClick}
startIcon={<AddCircleOutlineIcon sx={{ alignItems: "center" }} />}
>
New Group
</Button>
</Grid>
:
<Grid item xs={3} md={3}></Grid>
}


<Grid item >
<Button
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Search
</Button>
<Grid item xs={8} md={8}>
<Grid container maxWidth justifyContent="flex-end" spacing={3}>
<Grid item >
<Button
variant="contained"
color="cancel"
onClick={resetForm}
>
Reset
</Button>
</Grid>

<Grid item >
<Button
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Search
</Button>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid>
</ThemeProvider> </ThemeProvider>
</Grid> </Grid>
</Grid> </Grid>


+ 31
- 28
src/pages/pnspsUserGroupSearchPage/UserGroupTable.js View File

@@ -1,51 +1,54 @@
// material-ui // material-ui
import * as React from 'react';
import {
GridActionsCellItem,
} from "@mui/x-data-grid";
// import {
// GridActionsCellItem,
// } from "@mui/x-data-grid";
import {FiDataGrid} from "components/FiDataGrid"; import {FiDataGrid} from "components/FiDataGrid";
import EditIcon from '@mui/icons-material/Edit';
import {useEffect} from "react";
//import EditIcon from '@mui/icons-material/Edit';
import {useState, useEffect} from "react";
import {useNavigate} from "react-router-dom"; import {useNavigate} from "react-router-dom";
import { GET_GROUP_LIST_PATH } from "utils/ApiPathConst"; import { GET_GROUP_LIST_PATH } from "utils/ApiPathConst";
import { clickableLink} from 'utils/CommonFunction';
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function UserGroupTable({searchCriteria}) { export default function UserGroupTable({searchCriteria}) {
const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
const [_searchCriteria, set_searchCriteria] = useState(searchCriteria);
const navigate = useNavigate() const navigate = useNavigate()


useEffect(() => { useEffect(() => {
set_searchCriteria(searchCriteria); set_searchCriteria(searchCriteria);
}, [searchCriteria]); }, [searchCriteria]);


const handleEditClick = (id) => () => {
navigate('/userGroup/'+ id);
};
// const handleEditClick = (id) => () => {
// navigate('/userGroup/'+ id);
// };


const columns = [ const columns = [
{
field: 'actions',
type: 'actions',
headerName: 'Actions',
width: 100,
cellClassName: 'actions',
getActions: ({id}) => {
return [
<GridActionsCellItem
key="OutSave"
icon={<EditIcon/>}
label="Edit"
className="textPrimary"
onClick={handleEditClick(id)}
color="primary"
/>]
},
},
// {
// field: 'actions',
// type: 'actions',
// headerName: 'Actions',
// width: 100,
// cellClassName: 'actions',
// getActions: ({id}) => {
// return [
// <GridActionsCellItem
// key="OutSave"
// icon={<EditIcon/>}
// label="Edit"
// className="textPrimary"
// onClick={handleEditClick(id)}
// color="primary"
// />]
// },
// },
{ {
id: 'groupName', id: 'groupName',
field: 'name', field: 'name',
headerName: 'User Group Name', headerName: 'User Group Name',
flex: 1, flex: 1,
renderCell: (params) => {
return clickableLink('/userGroup/'+ params.row.id, params.row.name);
},
}, },
{ {
id: 'description', id: 'description',


Write Preview
Loading…
Cancel
Save