Skip to content

Commit

Permalink
fix: entities spacing and refactor with Stakeholders component
Browse files Browse the repository at this point in the history
  • Loading branch information
@blushi
blushi committed Sep 5, 2023
1 parent 2f4d49b commit 153e160
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 151 deletions.
68 changes: 68 additions & 0 deletions web-marketplace/src/components/organisms/Stakeholders/Stakeholders.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { Grid, TooltipProps } from '@mui/material';

import { CollapseList } from 'web-components/lib/components/organisms/CollapseList/CollapseList';
import UserInfo, { Party } from 'web-components/lib/components/user/UserInfo';
import UserInfoWithTitle from 'web-components/lib/components/user/UserInfoWithTitle';
import { defaultFontFamily } from 'web-components/lib/theme/muiTheme';

export type Stakeholder = {
parties: Party | Party[] | undefined;
title: string;
tooltip: TooltipProps['title'];
};

type Props = {
stakeholders: Stakeholder[];
minSm: number;
};

export const Stakeholders = ({ stakeholders, minSm }: Props) => {
const filtered = stakeholders.filter(u =>
Array.isArray(u.parties) ? u.parties.length > 0 : Boolean(u.parties),
);
const sm = Math.min(12 / filtered.length, minSm);

return (
<Grid container columnSpacing={{ xs: 0, sm: 5 }}>
{filtered.map(({ parties, title, tooltip }, i) => {
const sx =
i !== filtered.length - 1 ? { mb: { xs: 8.25, sm: 0 } } : undefined;
return (
<Grid item xs={12} sm={sm} sx={sx}>
{Array.isArray(parties) ? (
<>
<UserInfoWithTitle
user={parties[0]}
title={title}
tooltip={tooltip}
fontFamily={defaultFontFamily}
sx={{ mb: 7.5 }}
/>
{parties.length > 1 && (
<CollapseList
max={0}
items={parties.slice(1, parties.length).map(party => (
<UserInfo
user={party}
key={party?.name}
fontFamily={defaultFontFamily}
sx={{ mb: 7.5 }}
/>
))}
/>
)}
</>
) : (
<UserInfoWithTitle
user={parties}
title={title}
tooltip={tooltip}
fontFamily={defaultFontFamily}
/>
)}
</Grid>
);
})}
</Grid>
);
};
126 changes: 48 additions & 78 deletions web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.Stakeholders.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { Grid } from '@mui/material';

import { Party } from 'web-components/lib/components/user/UserInfo';
import UserInfoWithTitle from 'web-components/lib/components/user/UserInfoWithTitle';
import { defaultFontFamily } from 'web-components/lib/theme/muiTheme';

import { Stakeholders } from 'components/organisms/Stakeholders/Stakeholders';

type Props = {
admin?: Party;
Expand All @@ -17,79 +15,51 @@ export const ProjectDetailsStakeholders: React.FC<Props> = ({
projectDeveloper,
projectVerifier,
}) => {
const sm = Math.min(
12 /
[program, admin, projectDeveloper, projectVerifier].filter(u =>
Boolean(u),
).length,
4,
);
const stakeholders = [
{
parties: program,
title: 'program',
tooltip: (
<>
A <b>program</b> involves the eligibility rules, monitoring and
certification, and registration systems for credit trading and
ownership tracking.
</>
),
},
{
parties: admin,
title: 'admin',
tooltip: (
<>
<b>Project admin:</b> the entity who can update a given project on the
blockchain.
</>
),
},
{
parties: projectDeveloper,
title: 'project developer',
tooltip: (
<>
<b>Project developer:</b> the entity that is in charge of managing the
project. The project developer can be the land owner, land steward, or
a third party.
</>
),
},
{
parties: projectVerifier,
title: 'verifier',
tooltip: (
<>
<b>Verifier:</b> A third party who provides a independent, impartial
assessment of project plan and project reports (that is not the
monitor).
</>
),
},
];

return (
<Grid container>
{program && (
<Grid item xs={12} sm={sm} sx={{ mb: { xs: 8.25, sm: 0 } }}>
<UserInfoWithTitle
user={program}
title="program"
tooltip={
<>
A <b>program</b> involves the eligibility rules, monitoring and
certification, and registration systems for credit trading and
ownership tracking.
</>
}
fontFamily={defaultFontFamily}
/>
</Grid>
)}
{admin && (
<Grid item xs={12} sm={sm} sx={{ mb: { xs: 8.25, sm: 0 } }}>
<UserInfoWithTitle
user={admin}
title="admin"
tooltip={
<>
<b>Project admin:</b> the entity who can update a given project
on the blockchain.
</>
}
fontFamily={defaultFontFamily}
/>
</Grid>
)}
{projectDeveloper && (
<Grid item xs={12} sm={sm}>
<UserInfoWithTitle
user={projectDeveloper}
title="project developer"
tooltip={
<>
<b>Project developer:</b> the entity that is in charge of
managing the project. The project developer can be the land
owner, land steward, or a third party.
</>
}
fontFamily={defaultFontFamily}
/>
</Grid>
)}
{projectVerifier && (
<Grid item xs={12} sm={sm}>
<UserInfoWithTitle
user={projectVerifier}
title="verifier"
tooltip={
<>
<b>Verifier:</b> A third party who provides a independent,
impartial assessment of project plan and project reports (that
is not the monitor).
</>
}
fontFamily={defaultFontFamily}
/>
</Grid>
)}
</Grid>
);
return <Stakeholders stakeholders={stakeholders} minSm={4} />;
};
109 changes: 36 additions & 73 deletions ...ges/CreditClassDetails/CreditClassDetailsSimple/CreditClassDetailsSimple.Stakeholders.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import { Grid } from '@mui/material';
import { Party } from 'web-components/lib/components/user/UserInfo';

import { CollapseList } from 'web-components/lib/components/organisms/CollapseList/CollapseList';
import UserInfo, { Party } from 'web-components/lib/components/user/UserInfo';
import UserInfoWithTitle from 'web-components/lib/components/user/UserInfoWithTitle';
import { defaultFontFamily } from 'web-components/lib/theme/muiTheme';
import { Stakeholders } from 'components/organisms/Stakeholders/Stakeholders';

interface Props {
program?: Party;
Expand All @@ -16,73 +13,39 @@ export const CreditClassDetailsStakeholders = ({
issuers,
program,
}: Props) => {
const sm = Math.min(
12 / [program, admin, issuers].filter(item => Boolean(item)).length,
6,
);
const stakeholders = [
{
parties: program,
title: 'program',
tooltip: (
<>
A <b>program</b> involves the eligibility rules, monitoring and
certification, and registration systems for credit trading and
ownership tracking.
</>
),
},
{
parties: admin,
title: 'admin',
tooltip: (
<>
<b>Credit class admin:</b> the entity who can update a given credit
class.
</>
),
},
{
parties: issuers,
title: 'issuers',
tooltip: (
<>
<b>Credit class issuer:</b> the entity who can issue credit batches
under the given credit class.
</>
),
},
];

return (
<Grid container>
{program && (
<Grid item xs={12} sm={sm} sx={{ mb: { xs: 8.25, sm: 0 } }}>
<UserInfoWithTitle
user={program}
title="program"
tooltip={
<>
A <b>program</b> involves the eligibility rules, monitoring and
certification, and registration systems for credit trading and
ownership tracking.
</>
}
fontFamily={defaultFontFamily}
/>
</Grid>
)}
{admin && (
<Grid item xs={12} sm={sm} sx={{ mb: { xs: 8.25, sm: 0 } }}>
<UserInfoWithTitle
user={admin}
title="admin"
tooltip={
<>
<b>Credit class admin</b>: the entity who can update a given
credit class.
</>
}
fontFamily={defaultFontFamily}
/>
</Grid>
)}
{issuers && issuers?.length > 0 && (
<Grid item xs={12} sm={sm}>
<UserInfoWithTitle
user={issuers[0]}
title="issuers"
tooltip={
<>
<b>Credit class issuer</b>: the entity who can issue credit
batches under the given credit class.
</>
}
fontFamily={defaultFontFamily}
sx={{ mb: 7.5 }}
/>
{issuers?.length > 1 && (
<CollapseList
max={0}
items={issuers.slice(1, issuers.length).map(issuer => (
<UserInfo
user={issuer}
key={issuer?.name}
fontFamily={defaultFontFamily}
sx={{ mb: 7.5 }}
/>
))}
/>
)}
</Grid>
)}
</Grid>
);
return <Stakeholders stakeholders={stakeholders} minSm={6} />;
};

0 comments on commit 153e160

Please sign in to comment.