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

Creditor

master
Anna Ho 1 year ago
parent
852d74b5cd
commit
b922b8a02c
7 changed files with 201 additions and 32 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/pages/DemandNote/Search_Public/DataGrid.js
  2. +53
    -0
      src/pages/Organization/DetailPage/CreditorHistoryTable.js
  3. +81
    -4
      src/pages/Organization/DetailPage/OrganizationCard.js
  4. +27
    -13
      src/pages/Organization/DetailPage/index.js
  5. +26
    -13
      src/pages/Organization/SearchPage/OrganizationSearchForm.js
  6. +10
    -1
      src/pages/Organization/SearchPage/OrganizationTable.js
  7. +3
    -0
      src/utils/ApiPathConst.js

+ 1
- 1
src/pages/DemandNote/Search_Public/DataGrid.js View File

@@ -51,7 +51,7 @@ export default function SearchDemandNote({ recordList }) {
headerName: '狀態',
width: 175,
renderCell: (params) => {
return [StatusUtils.getStatus_Eng(params)]
return [StatusUtils.getStatus_Cht(params)]
},
},
{


+ 53
- 0
src/pages/Organization/DetailPage/CreditorHistoryTable.js View File

@@ -0,0 +1,53 @@
// material-ui
import * as React from 'react';
import { FiDataGrid } from "components/FiDataGrid";
import { useEffect } from "react";
import * as DateUtils from "utils/DateUtils";
// ==============================|| EVENT TABLE ||============================== //

export default function CreditorHistoryTable({ recordList }) {
const [rows, setRows] = React.useState(recordList);

useEffect(() => {
setRows(recordList);
}, [recordList]);

const columns = [
{
id: 'actionType',
field: 'actionType',
headerName: 'Action',
flex: 2
},
{
id: 'modified',
field: 'modified',
headerName: 'Datetime',
flex: 1,
renderCell: (params) => {
return DateUtils.datetimeStr(params.value);
}
},
{
id: 'modifiedByName',
field: 'modifiedByName',
headerName: 'Modified By',
width: 200,
},
];

return (
<div style={{ height: "fit-content", width: '100%' }}>
<FiDataGrid
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 100 },
},
}}
/>
</div>
);
}

+ 81
- 4
src/pages/Organization/DetailPage/OrganizationCard.js View File

@@ -1,6 +1,7 @@
// material-ui
import {
Grid, Button, Checkbox, FormControlLabel, Typography
Grid, Button, Checkbox, FormControlLabel, Typography,
Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material';
// import { FormControlLabel } from '@material-ui/core';
import MainCard from "../../../components/MainCard";
@@ -22,6 +23,9 @@ import { notifySaveSuccess } from 'utils/CommonFunction';

const OrganizationCard = ({ userData, loadDataFun, id }) => {

const [creditorConfirmPopUp, setCreditorConfirmPopUp] = React.useState(false);
const [nonCreditorConfirmPopUp, setNonCreditorConfirmPopUp] = React.useState(false);

const [currentUserData, setCurrentUserData] = useState({});
const [editMode, setEditMode] = useState(false);
const [createMode, setCreateMode] = useState(false);
@@ -93,7 +97,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
addressLine2: vaule.addressLine2,
addressLine3: vaule.addressLine3,
},
creditor: vaule.creditor,
//creditor: vaule.creditor,
},
onSuccess: function () {
notifySaveSuccess()
@@ -125,6 +129,26 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
setEditMode(true);
};

const markAsCreditor = () => {
setCreditorConfirmPopUp(false);
HttpUtils.get({
url: UrlUtils.GET_ORG_MARK_AS_CREDITOR + "/" + id,
onSuccess: () => {
loadDataFun();
}
});
}

const markAsNonCreditor = () => {
setNonCreditorConfirmPopUp(false);
HttpUtils.get({
url: UrlUtils.GET_ORG_MARK_AS_NON_CREDITOR + "/" + id,
onSuccess: () => {
loadDataFun();
}
});
}

return (
<MainCard elevation={0}
border={false}
@@ -201,6 +225,34 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
<Typography variant="h5">Edit</Typography>
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
color="orange"
onClick={()=>setCreditorConfirmPopUp(true)}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
<Typography variant="h5">Mark as Creditor</Typography>
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
color="error"
onClick={()=>setNonCreditorConfirmPopUp(true)}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
<Typography variant="h5">Mark as Non-Creditor</Typography>
</Button>
</Grid>
</>
}
</Grid>
@@ -212,7 +264,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
:
<Grid container spacing={1}>
<Grid item xs={12}>
<Typography variant="h4" sx={{mb: 2, mr: 3, borderBottom: "1px solid black" }}>
<Typography variant="h4" sx={{ mb: 2, mr: 3, borderBottom: "1px solid black" }}>
Organisation Details
</Typography>
</Grid>
@@ -233,7 +285,8 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
onChange={() => {
formik.setFieldValue("creditor", !formik.values.creditor);
}}
disabled={!editMode && !createMode}
disabled={true}
//disabled={!editMode && !createMode}
/>
</Grid>

@@ -334,6 +387,30 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
</Grid>
}
</form>
<div>
<Dialog open={creditorConfirmPopUp} onClose={() => setCreditorConfirmPopUp(false)} >
<DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
<DialogContent style={{ display: 'flex', }}>
<Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Creditor?</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cencel</Typography></Button>
<Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button>
</DialogActions>
</Dialog>
</div>
<div>
<Dialog open={nonCreditorConfirmPopUp} onClose={() => setNonCreditorConfirmPopUp(false)} >
<DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
<DialogContent style={{ display: 'flex', }}>
<Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Creditor?</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setNonCreditorConfirmPopUp(false)}><Typography variant="h5">Cencel</Typography></Button>
<Button onClick={() => markAsNonCreditor()}><Typography variant="h5">Confirm</Typography></Button>
</DialogActions>
</Dialog>
</div>
</MainCard>
);
};


+ 27
- 13
src/pages/Organization/DetailPage/index.js View File

@@ -1,18 +1,17 @@
// material-ui
import { Grid, Typography, Stack, Box, Button } 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 * as UrlUtils from "../../../utils/ApiPathConst";
import * as DateUtils from "../../../utils/DateUtils";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import * as DateUtils from "utils/DateUtils";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const InfoCard = Loadable(lazy(() => import('./OrganizationCard')));
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
const InfoCard = Loadable(React.lazy(() => import('./OrganizationCard')));
const Table = Loadable(React.lazy(() => import('./CreditorHistoryTable')));
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));

import ForwardIcon from '@mui/icons-material/Forward';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

const BackgroundHead = {
@@ -30,11 +29,12 @@ const BackgroundHead = {

const OrganizationDetailPage = () => {
const params = useParams();
const [formData, setFormData] = useState({})
const [isLoading, setLoding] = useState(true);
const [formData, setFormData] = React.useState({})
const [list, setList] = React.useState([])
const [isLoading, setLoding] = React.useState(true);
const navigate = useNavigate();

useEffect(() => {
React.useEffect(() => {
console.log(formData);
loadData();
}, []);
@@ -59,13 +59,14 @@ const OrganizationDetailPage = () => {

response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
setFormData(response.data)
setList(response.historyList)
}
});
}
};


useEffect(() => {
React.useEffect(() => {
setLoding(false);
}, [formData]);

@@ -99,6 +100,19 @@ const OrganizationDetailPage = () => {
</Box>
<br />
</Grid>
<Grid item xs={12} md={12} lg={12}>
<Box xs={12} ml={0} mt={-1} mr={0} sx={{ pl:4, pr:4, pb:2 }}>
<Grid container sx={{ p: 3, backgroundColor: "#FFF", borderRadius: '10px' }}>
<Grid item xs={12} sx={{ p:1 }}>
<Table
sx={{ p: 1 }}
recordList={list}
>
</Table>
</Grid>
</Grid>
</Box>
</Grid>
</Grid>
</Grid>
{/*col 2*/}


+ 26
- 13
src/pages/Organization/SearchPage/OrganizationSearchForm.js View File

@@ -3,17 +3,18 @@ import {
Button,
CardContent,
Grid, TextField,
Typography
Typography,
Checkbox, FormControlLabel,
} from '@mui/material';
import MainCard from "../../../components/MainCard";
import {useForm} from "react-hook-form";
import { useForm } from "react-hook-form";

import { useState} from "react";
import { useState } from "react";
import * as React from "react";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const OrganizationSearchForm = ({applySearch}) => {
const OrganizationSearchForm = ({ applySearch }) => {

const [type, setType] = useState([]);

@@ -22,7 +23,7 @@ const OrganizationSearchForm = ({applySearch}) => {

let typeArray = [];

for(let i =0; i < type.length; i++){
for (let i = 0; i < type.length; i++) {
typeArray.push(type[i].label);
}

@@ -30,19 +31,20 @@ const OrganizationSearchForm = ({applySearch}) => {
brNo: data.brNo,
enCompanyName: data.enCompanyName,
chCompanyName: data.chCompanyName,
searchCreditor: data.searchCreditor
};
applySearch(temp);
};

function resetForm(){
function resetForm() {
setType([]);
reset();
}

return (
<MainCard xs={12} md={12} lg={12}
border={false}
content={false}>
border={false}
content={false}>

<form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
@@ -54,7 +56,7 @@ const OrganizationSearchForm = ({applySearch}) => {

{/*row 2*/}
<Grid container alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("brNo")}
@@ -66,7 +68,7 @@ const OrganizationSearchForm = ({applySearch}) => {
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("enCompanyName")}
@@ -78,7 +80,7 @@ const OrganizationSearchForm = ({applySearch}) => {
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("chCompanyName")}
@@ -90,13 +92,22 @@ const OrganizationSearchForm = ({applySearch}) => {
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3}}>
<FormControlLabel
{...register("searchCreditor")}
control={<Checkbox/>}
label="Search Creditor Only"
id=" "
/>
</Grid>

</Grid>


{/*last row*/}
<Grid container maxWidth justifyContent="flex-end">

<Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
@@ -109,7 +120,7 @@ const OrganizationSearchForm = ({applySearch}) => {
</Button>
</Grid>

<Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
@@ -121,6 +132,8 @@ const OrganizationSearchForm = ({applySearch}) => {
<Typography variant="h5">Submit</Typography>
</Button>
</Grid>

</Grid>
</form>
</MainCard>


+ 10
- 1
src/pages/Organization/SearchPage/OrganizationTable.js View File

@@ -76,12 +76,21 @@ export default function OrganizationTable({ recordList }) {
{
id: 'brExpiryDate',
field: 'brExpiryDate',
headerName: 'Expiry Date',
headerName: 'BR Expiry Date',
flex: 1,
valueGetter: (params) => {
return DateUtils.dateStr(params?.value);
}
},
{
id: 'creditor',
field: 'creditor',
headerName: 'Creditor',
width: 100,
valueGetter: (params) => {
return params?.value?"Yes":"";
}
},
];

function handleRowDoubleClick(params) {


+ 3
- 0
src/utils/ApiPathConst.js View File

@@ -26,6 +26,9 @@ 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';
export const GET_ORG_COMBO = apiPath+'/org/combo';
export const GET_ORG_CHECK_CREDITOR = apiPath+'/org/check-creditor';
export const GET_ORG_MARK_AS_CREDITOR = apiPath+'/org/mark-as-creditor';
export const GET_ORG_MARK_AS_NON_CREDITOR = apiPath+'/org/mark-as-non-creditor';





Write Preview
Loading…
Cancel
Save