tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Change Permission & WIP Dashboard Client Portal

Browse Source
This commit is contained in:
Fajar
2023-04-06 15:30:22 +07:00
parent 4a7c3ebdda
commit 85039893a8
1497 changed files with 2808 additions and 2508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
frontend/client-portal/src/sections/dashboard/DialogClaimSubmitMember.tsx
View File

@@ -15,10 +15,8 @@ import { Search as SearchIcon } from '@mui/icons-material';
import MuiDialog from '../../components/MuiDialog';
import Iconify from '../../components/Iconify';
// React
import { ReactElement, useContext, useEffect, useRef, useState } from 'react';
import { ReactElement, useState } from 'react';
import DialogClaimSubmitMemberSubmission from './DialogClaimSubmitMemberSubmission';
import axios from '../../utils/axios';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
// ----------------------------------------------------------------------
@@ -45,7 +43,7 @@ type MuiDialogProps = {
openDialog: boolean;
setOpenDialog: Function;
content?: ReactElement;
// data?: DataContent[];
data?: DataContentType[];
};
// ----------------------------------------------------------------------
@@ -68,11 +66,9 @@ export default function DialogClaimSubmitMember({
title,
openDialog,
setOpenDialog,
data,
}: MuiDialogProps) {
const { corporateValue } = useContext(UserCurrentCorporateContext);
/* ---------------------------------- data ---------------------------------- */
const [data, setData] = useState([]);
const [dataMemberClaim, setDataMemberClaim] = useState<DataContentType>({
id: 0,
fullName: '',
@@ -87,15 +83,10 @@ export default function DialogClaimSubmitMember({
/* --------------------------------- 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));
};
/* -------------------------------------------------------------------------- */
@@ -127,18 +118,6 @@ export default function DialogClaimSubmitMember({
};
/* -------------------------------------------------------------------------- */
useEffect(() => {
(async () => {
if (openDialog === true) {
const response = await axios.get(`${corporateValue}/members`, {
params: { ...appliedParams, claimMember: true },
});
setData(response.data.data);
}
})();
}, [corporateValue, openDialog, appliedParams]);
const getContent = () => (
<Stack>
<Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
@@ -167,56 +146,57 @@ export default function DialogClaimSubmitMember({
/>
</form>
<Stack marginTop={2} spacing={1}>
{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={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.fullName}</Typography>
<Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
Member ID : {row.memberId}
</Typography>
</Stack>
<Stack spacing={1} paddingY={1}>
<Typography color="#0A0A0A" variant="caption">
Total Limit
</Typography>
<BorderLinearProgress
variant="determinate"
value={row.limit && row.limit.percentage}
{data &&
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={row.avatar ? row.avatar.url : '/images/member.png'}
alt={row.avatar ? row.avatar.url : 'user-profile'}
style={{ borderRadius: '50%' }}
/>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
{row.limit && row.limit.current} /{' '}
<Typography variant="body2" color="#757575" component="span">
{row.limit && row.limit.total}
<Stack sx={{ flex: '45%' }}>
<Typography variant="subtitle1">{row.fullName}</Typography>
<Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
Member ID : {row.memberId}
</Typography>
</Typography>
</Stack>
<Stack spacing={1} paddingY={1}>
<Typography color="#0A0A0A" variant="caption">
Total Limit
</Typography>
<BorderLinearProgress
variant="determinate"
value={row.limit && row.limit.percentage}
/>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
{row.limit && row.limit.current} /{' '}
<Typography variant="body2" color="#757575" component="span">
{row.limit && row.limit.total}
</Typography>
</Typography>
</Stack>
<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>
<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>
</Card>
))}
</Card>
))}
</Stack>
</Stack>
);