alex
/
PNSPS-frontend-MaterialUI
1
0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

org & user group auth

master
Anna Ho 1 jaar geleden
bovenliggende
1e7bb5d8b1
commit
b2a0ce201e
10 gewijzigde bestanden met toevoegingen van 384 en 277 verwijderingen
Zij-aan-zij weergave
Diff opties
Statistieken weergeven Download Patch-bestand Download Diff-bestand
  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 Bestand weergeven

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

@@ -57,7 +56,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
const [minDate] = React.useState(new Date());
const [fromDate, setFromDate] = 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(() => {
setFromDateValue(fromDate);
@@ -151,7 +150,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
id: id > 0 ? id : null,
enCompanyName: values.enCompanyName,
chCompanyName: values.chCompanyName,
orgShortName: values.creditor?values.orgShortName:"",
orgShortName: values.creditor ? values.orgShortName : "",
brNo: values.brNo,
// brExpiryDate: values.brExpiryDate,
brExpiryDate: sentDateFrom,
@@ -214,17 +213,17 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {

const onSubmit = (data) => {
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 = {
orgShortName: sentOrgShortName,
};
markAsCreditor(temp);
}else{
} else {
alert("Organisation Short Name must not exceed 24 characters.")
}
}else{
} else {
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 }}>

{/*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}>
<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 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 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>
</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>
: <></>
}

{/*top*/}

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

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

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


+ 29
- 25
src/pages/Organization/SearchPage/OrganizationTable.js Bestand weergeven

@@ -1,12 +1,13 @@
// 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 EditIcon from '@mui/icons-material/Visibility';
//import EditIcon from '@mui/icons-material/Visibility';
import { useNavigate } from "react-router-dom";
import * as DateUtils from "utils/DateUtils";
import { clickableLink} from 'utils/CommonFunction';
import {GET_ORG_PATH} from "utils/ApiPathConst";
// ==============================|| EVENT TABLE ||============================== //

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

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

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',
field: 'brNo',
headerName: 'BR No.',
flex: 1,
minWidth: 150,
renderCell: (params) => {
return clickableLink('/org/'+ params.row.id, params.row.brNo);
},
},
{
id: 'enCompanyName',


+ 7
- 3
src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js Bestand weergeven

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

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

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

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

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


+ 10
- 4
src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js Bestand weergeven

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

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

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

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

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


+ 49
- 36
src/pages/pnspsUserGroupDetailPage/UserAddCard.js Bestand weergeven

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


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

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

function updateUserList() {
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" }}>
User(s)
</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 container>
<Grid item xs={12} sx={{mt:2}}>
<Grid item xs={12}>
<UserAddTable
setGroupUserData={setGroupUserData}
setDeletedList={setDeletedList}
userList={groupUserData}
editMode={_editMode}
/>
</Grid>
</Grid>


+ 9
- 2
src/pages/pnspsUserGroupDetailPage/UserAddTable.js Bestand weergeven

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

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

export default function UserAddTable({setGroupUserData, userList,setDeletedList}) {
export default function UserAddTable({setGroupUserData, userList,setDeletedList, editMode}) {
const [groupData, setGroupData] = useState([]);
const [onReady, setOnReady] = useState(false);
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(() => {
setGroupData(userList);
}, []);
@@ -70,6 +76,7 @@ export default function UserAddTable({setGroupUserData, userList,setDeletedList}


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


+ 10
- 1
src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js Bestand weergeven

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

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

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

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

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


useEffect(() => {
//if user data from parent are not null
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}>
<TextField
fullWidth
disabled={!_editMode}
{...register("userGroupName",
{
value: currentUserGroupData.name,
@@ -94,6 +102,7 @@ const UserGroupInfoCard = ({ isCollectData, updateGroupObject, userGroupData })
value: currentUserGroupData.description,
})
}
disabled={!_editMode}
id='description'
/>
</Grid>


+ 96
- 44
src/pages/pnspsUserGroupDetailPage/index.js Bestand weergeven

@@ -12,10 +12,9 @@ import {
getDeletedRecordWithRefList,
getIdList,
notifyDeleteSuccess,
// notifyDeleteSuccess,
notifySaveSuccess
} 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';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
@@ -25,6 +24,7 @@ const UserAddCard = Loadable(lazy(() => import('./UserAddCard')));
import { useNavigate } from "react-router";
import ForwardIcon from '@mui/icons-material/Forward';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import { isGrantedAny } from "auth/utils";

const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
@@ -43,6 +43,7 @@ const UserMaintainPage = () => {
const params = useParams();
const navigate = useNavigate();
const [onReady, setOnReady] = useState(false);
const [editMode, setEditMode] = useState(false);
const [isCollectData, setIsCollectData] = useState(false);
const [editedGroupData, setEditedGroupData] = useState({});
const [userGroupData, setUserGroupData] = useState([]);
@@ -184,6 +185,96 @@ const UserMaintainPage = () => {
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
</Button>
</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*/}
<Grid item xs={12} md={5} lg={5}>
<Grid container>
@@ -194,6 +285,7 @@ const UserMaintainPage = () => {
userGroupData={userGroupData}
isCollectData={isCollectData}
isNewRecord={isNewRecord}
editMode={editMode}
/>
</Box>
</Grid>
@@ -205,6 +297,7 @@ const UserMaintainPage = () => {
userGroupData={userGroupData}
isCollectData={isCollectData}
isNewRecord={isNewRecord}
editMode={editMode}
/>
</Box>
</Grid>
@@ -218,51 +311,10 @@ const UserMaintainPage = () => {
userGroupData={userGroupData}
isCollectData={isCollectData}
isNewRecord={isNewRecord}
editMode={editMode}
/>
</Box>
</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>
);
};


+ 42
- 36
src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js Bestand weergeven

@@ -9,9 +9,9 @@ import { useForm } from "react-hook-form";
import * as React from "react";
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
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 ||============================== //

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

<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*/}
<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" >
Search
</Typography>
@@ -81,40 +81,46 @@ const UserGroupSearchForm = ({ applySearch }) => {
sx={{ mb: 3 }}
>
<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>
</ThemeProvider>
</Grid>
</Grid>


+ 31
- 28
src/pages/pnspsUserGroupSearchPage/UserGroupTable.js Bestand weergeven

@@ -1,51 +1,54 @@
// 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 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 { GET_GROUP_LIST_PATH } from "utils/ApiPathConst";
import { clickableLink} from 'utils/CommonFunction';
// ==============================|| EVENT TABLE ||============================== //

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

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

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

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',
field: 'name',
headerName: 'User Group Name',
flex: 1,
renderCell: (params) => {
return clickableLink('/userGroup/'+ params.row.id, params.row.name);
},
},
{
id: 'description',


Schrijf Voorbeeld
Laden…
Annuleren
Opslaan