fixing auth, switching corporate, table member
This commit is contained in:
Muhammad Fajar
@@ -15,15 +15,26 @@ import { Search as SearchIcon } from '@mui/icons-material';
|
||||
import MuiDialog from '../../components/MuiDialog';
|
||||
import Iconify from '../../components/Iconify';
|
||||
// React
|
||||
import { ReactElement, useRef, useState } from 'react';
|
||||
import { ReactElement, useContext, useEffect, useRef, useState } from 'react';
|
||||
import DialogClaimSubmitMemberSubmission from './DialogClaimSubmitMemberSubmission';
|
||||
import axios from '../../utils/axios';
|
||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type DataContent = {
|
||||
name: string;
|
||||
type DataContentType = {
|
||||
id: number;
|
||||
fullName: string;
|
||||
memberId: string;
|
||||
saldo: string;
|
||||
limit: {
|
||||
current: number;
|
||||
total: number;
|
||||
percentage: number;
|
||||
};
|
||||
avatar?: {
|
||||
url?: string;
|
||||
title?: string;
|
||||
};
|
||||
};
|
||||
|
||||
type MuiDialogProps = {
|
||||
@@ -34,25 +45,11 @@ type MuiDialogProps = {
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
data?: DataContent[];
|
||||
// data?: DataContent[];
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
function createData(name: string, memberId: string, saldo: string) {
|
||||
return { name, memberId, saldo };
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData('Alexandra tjoa tri atmaja kurniadi', '0122122', '10.000.000'),
|
||||
createData('Marina kurniadi', '0122123', '10.000.000'),
|
||||
createData('Tjoa Indri', '0122124', '10.000.000'),
|
||||
createData('Atmaja Tirta', '0122125', '10.000.000'),
|
||||
createData('Alexandra kurniadi', '0122126', '10.000.000'),
|
||||
];
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
height: 10,
|
||||
borderRadius: 6,
|
||||
@@ -67,42 +64,81 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const DialogClaimSubmitMember = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
|
||||
/* --------------------------------- Search --------------------------------- */
|
||||
export default function DialogClaimSubmitMember({
|
||||
title,
|
||||
openDialog,
|
||||
setOpenDialog,
|
||||
}: MuiDialogProps) {
|
||||
const { corporateValue } = useContext(UserCurrentCorporateContext);
|
||||
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [dataMemberClaim, setDataMemberClaim] = useState({
|
||||
name: '',
|
||||
/* ---------------------------------- data ---------------------------------- */
|
||||
const [data, setData] = useState([]);
|
||||
const [dataMemberClaim, setDataMemberClaim] = useState<DataContentType>({
|
||||
id: 0,
|
||||
fullName: '',
|
||||
memberId: '',
|
||||
saldo: '',
|
||||
limit: {
|
||||
current: 0,
|
||||
total: 0,
|
||||
percentage: 0,
|
||||
},
|
||||
});
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const handleSearchChange = (event: any) => {
|
||||
const newSearchText = event.target.value ?? '';
|
||||
setSearchText(newSearchText);
|
||||
/* --------------------------------- Search --------------------------------- */
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [appliedParams, setAppliedParams] = useState({});
|
||||
|
||||
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
if (searchText === '') {
|
||||
setAppliedParams({});
|
||||
} else {
|
||||
setAppliedParams({ search: searchText });
|
||||
}
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
};
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* ---------------------------- Get Current Date ---------------------------- */
|
||||
|
||||
const current = new Date();
|
||||
const date = `${current.getDate()} / ${current.getMonth() + 1} / ${current.getFullYear()}`;
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* ------------------------------ Icon On Click ----------------------------- */
|
||||
|
||||
const [openDialogClaimMember, setOpenDialogMemberClaim] = useState(false);
|
||||
|
||||
const clickHandler = (name: string, memberId: string, saldo: string) => {
|
||||
setDataMemberClaim({ name: name, memberId: memberId, saldo: saldo });
|
||||
const clickHandler = ({ id, fullName, memberId, limit, avatar }: DataContentType) => {
|
||||
setDataMemberClaim({
|
||||
id: id,
|
||||
fullName: fullName,
|
||||
memberId: memberId,
|
||||
limit: {
|
||||
current: limit.current,
|
||||
total: limit.total,
|
||||
percentage: limit.percentage,
|
||||
},
|
||||
avatar: {
|
||||
url: avatar && avatar.url,
|
||||
title: avatar && avatar.title,
|
||||
},
|
||||
});
|
||||
setOpenDialogMemberClaim(true);
|
||||
};
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (openDialog === true) {
|
||||
const response = await axios.get(`${corporateValue}/members`, {
|
||||
params: { ...appliedParams, claimMember: true },
|
||||
});
|
||||
|
||||
setData(response.data);
|
||||
}
|
||||
})();
|
||||
}, [corporateValue, openDialog, appliedParams]);
|
||||
|
||||
const getContent = () => (
|
||||
<Stack>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
|
||||
@@ -112,36 +148,37 @@ const DialogClaimSubmitMember = ({ title, openDialog, setOpenDialog, data }: Mui
|
||||
<Typography variant="caption">{date}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<TextField
|
||||
id="search-input"
|
||||
ref={searchInput}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={handleSearchChange}
|
||||
value={searchText}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
placeholder="Cari nama atau member ID disini..."
|
||||
sx={{ marginTop: 2 }}
|
||||
/>
|
||||
<form onSubmit={handleSearchSubmit}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={(event) => setSearchText(event?.target.value)}
|
||||
value={searchText}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
placeholder="Cari nama atau member ID disini..."
|
||||
sx={{ marginTop: 2 }}
|
||||
/>
|
||||
</form>
|
||||
<Stack marginTop={2} spacing={1}>
|
||||
{rows.map((row, key) => (
|
||||
{data.map((row: DataContentType, key) => (
|
||||
<Card key={key} sx={{ paddingY: 1, paddingX: 2 }}>
|
||||
<Stack direction="row" alignItems="center" spacing={2}>
|
||||
<img
|
||||
width={40}
|
||||
height={40}
|
||||
src="/images/member.png"
|
||||
alt="user-profile"
|
||||
src={row.avatar ? row.avatar.url : '/images/member.png'}
|
||||
alt={row.avatar ? row.avatar.url : 'user-profile'}
|
||||
style={{ borderRadius: '50%' }}
|
||||
/>
|
||||
<Stack sx={{ flex: '45%' }}>
|
||||
<Typography variant="subtitle1">{row.name}</Typography>
|
||||
<Typography variant="subtitle1">{row.fullName}</Typography>
|
||||
<Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
|
||||
Member ID : {row.memberId}
|
||||
</Typography>
|
||||
@@ -150,15 +187,31 @@ const DialogClaimSubmitMember = ({ title, openDialog, setOpenDialog, data }: Mui
|
||||
<Typography color="#0A0A0A" variant="caption">
|
||||
Total Limit
|
||||
</Typography>
|
||||
<BorderLinearProgress variant="determinate" value={100} />
|
||||
<BorderLinearProgress
|
||||
variant="determinate"
|
||||
value={row.limit && row.limit.percentage}
|
||||
/>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
|
||||
{row.saldo} /{' '}
|
||||
{row.limit && row.limit.current} /{' '}
|
||||
<Typography variant="body2" color="#757575" component="span">
|
||||
10.000.000
|
||||
{row.limit && row.limit.total}
|
||||
</Typography>
|
||||
</Typography>
|
||||
</Stack>
|
||||
<IconButton onClick={() => clickHandler(row.name, row.memberId, row.saldo)}>
|
||||
<IconButton
|
||||
onClick={() =>
|
||||
clickHandler({
|
||||
id: row.id,
|
||||
fullName: row.fullName,
|
||||
memberId: row.memberId,
|
||||
limit: {
|
||||
current: row.limit.current,
|
||||
total: row.limit.total,
|
||||
percentage: row.limit.percentage,
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<Iconify icon="ic:round-chevron-right" />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
@@ -186,6 +239,4 @@ const DialogClaimSubmitMember = ({ title, openDialog, setOpenDialog, data }: Mui
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DialogClaimSubmitMember;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user