-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: fellowship salary claimants (#4071)
* init files * update * filter * extract consts * fix: read value * fix: responsive * fix status from datalist * add hover for registered * order by rank desc * sort claim status
- Loading branch information
Showing
11 changed files
with
292 additions
and
1 deletion.
There are no files selected for viewing
43 changes: 43 additions & 0 deletions
43
packages/next-common/components/fellowship/salary/claimants/consts.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
const CLAIM_STATS = { | ||
Registered: "Registered", | ||
Nothing: "Nothing", | ||
Attempted: "Attempted", | ||
}; | ||
|
||
export const claimStatsValues = Object.values(CLAIM_STATS); | ||
|
||
export const claimantListColumns = [ | ||
{ | ||
name: "Rank", | ||
width: 80, | ||
}, | ||
{ | ||
name: "Claimant", | ||
className: "min-w-[200px]", | ||
}, | ||
{ | ||
name: "isRegistered", | ||
className: "text-right", | ||
width: 160, | ||
}, | ||
{ | ||
name: "Last Active At", | ||
className: "text-right", | ||
width: 160, | ||
}, | ||
{ | ||
name: "Active Salary", | ||
className: "text-right", | ||
width: 160, | ||
}, | ||
{ | ||
name: "Passive Salary", | ||
className: "text-right", | ||
width: 160, | ||
}, | ||
{ | ||
name: <span>Status</span>, | ||
className: "text-right", | ||
width: 160, | ||
}, | ||
]; |
11 changes: 11 additions & 0 deletions
11
packages/next-common/components/fellowship/salary/claimants/container.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import FellowshipSalaryActiveCycle from "../cycles/current"; | ||
import FellowshipSalaryClaimants from "./list"; | ||
|
||
export default function FellowshipSalaryClaimantsContainer() { | ||
return ( | ||
<div className="space-y-6"> | ||
<FellowshipSalaryActiveCycle /> | ||
<FellowshipSalaryClaimants /> | ||
</div> | ||
); | ||
} |
11 changes: 11 additions & 0 deletions
11
packages/next-common/components/fellowship/salary/claimants/isRegistered.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { SystemVoteAbstain, SystemVoteAye } from "@osn/icons/subsquare"; | ||
|
||
export default function FellowshipSalaryMemberIsRegistered({ status }) { | ||
const registered = status?.attempted || status?.registered; | ||
|
||
return registered ? ( | ||
<SystemVoteAye className="inline-block w-4 h-4" /> | ||
) : ( | ||
<SystemVoteAbstain className="inline-block w-4 h-4" /> | ||
); | ||
} |
115 changes: 115 additions & 0 deletions
115
packages/next-common/components/fellowship/salary/claimants/list.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
import DataList from "next-common/components/dataList"; | ||
import { SecondaryCard } from "next-common/components/styled/containers/secondaryCard"; | ||
import FellowshipRank from "../../rank"; | ||
import { usePageProps } from "next-common/context/page"; | ||
import { find, has, isNil, orderBy } from "lodash-es"; | ||
import AddressUser from "next-common/components/user/addressUser"; | ||
import FellowshipSalaryMemberIsRegistered from "./isRegistered"; | ||
import Link from "next/link"; | ||
import { useSalaryAsset } from "next-common/hooks/useSalaryAsset"; | ||
import ValueDisplay from "next-common/components/valueDisplay"; | ||
import { toPrecision } from "next-common/utils"; | ||
import FellowshipSalaryMemberStatus from "./status"; | ||
import useRankFilter from "next-common/hooks/fellowship/useRankFilter"; | ||
import { TitleContainer } from "next-common/components/styled/containers/titleContainer"; | ||
import { useFellowshipSalaryMemberStatusFilter } from "next-common/hooks/fellowship/salary/useFellowshipSalaryStatusFilter"; | ||
import { claimStatsValues, claimantListColumns } from "./consts"; | ||
|
||
export default function FellowshipSalaryClaimants() { | ||
const { fellowshipParams, fellowshipMembers, fellowshipSalaryClaimants } = | ||
usePageProps(); | ||
const { symbol, decimals } = useSalaryAsset(); | ||
|
||
const resolvedClaimants = orderBy( | ||
fellowshipSalaryClaimants.map((claimant) => { | ||
const address = claimant?.address; | ||
const member = find(fellowshipMembers, { address }); | ||
const rank = member?.rank; | ||
|
||
return { | ||
rank, | ||
...claimant, | ||
}; | ||
}), | ||
"rank", | ||
"desc", | ||
); | ||
|
||
const ranks = [...new Set(fellowshipMembers.map((m) => m.rank))]; | ||
const { rank, component: rankFilterComponent } = useRankFilter(ranks); | ||
|
||
const { status, component: statusFilterComponent } = | ||
useFellowshipSalaryMemberStatusFilter(claimStatsValues); | ||
|
||
const filteredClaimants = | ||
isNil(rank) && isNil(status) | ||
? resolvedClaimants | ||
: resolvedClaimants.filter((claimant) => { | ||
return ( | ||
(isNil(rank) || claimant.rank === rank) && | ||
(isNil(status) || has(claimant?.status?.status, status)) | ||
); | ||
}); | ||
|
||
const { activeSalary = [], passiveSalary = [] } = fellowshipParams ?? {}; | ||
|
||
const rows = filteredClaimants?.map((claimant) => { | ||
const address = claimant?.address; | ||
|
||
return [ | ||
<FellowshipRank key={`rank-${address}`} rank={claimant.rank} />, | ||
<AddressUser key={`address-${address}`} add={address} />, | ||
<FellowshipSalaryMemberIsRegistered | ||
key={`isRegistered-${address}`} | ||
status={claimant?.status?.status} | ||
/>, | ||
<Link | ||
key={`lastActive-${address}`} | ||
href={`/fellowship/salary/cycles/${claimant?.status?.lastActive}`} | ||
className="text14Medium text-theme500" | ||
> | ||
#{claimant?.status?.lastActive} | ||
</Link>, | ||
<ValueDisplay | ||
key={`active-salary-${address}`} | ||
value={toPrecision(activeSalary[claimant.rank - 1] || 0, decimals)} | ||
symbol={symbol} | ||
/>, | ||
<ValueDisplay | ||
key={`passive-salary-${address}`} | ||
value={toPrecision(passiveSalary[claimant.rank - 1] || 0, decimals)} | ||
symbol={symbol} | ||
/>, | ||
<FellowshipSalaryMemberStatus | ||
key={`status-${address}`} | ||
status={claimant?.status?.status} | ||
/>, | ||
]; | ||
}); | ||
|
||
return ( | ||
<div> | ||
<TitleContainer className="gap-3"> | ||
<div> | ||
List | ||
<span className="text-textTertiary text14Medium ml-1"> | ||
{filteredClaimants.length} | ||
</span> | ||
</div> | ||
<div className="flex items-center gap-x-4"> | ||
{rankFilterComponent} | ||
{statusFilterComponent} | ||
</div> | ||
</TitleContainer> | ||
|
||
<SecondaryCard className="mt-4"> | ||
<DataList | ||
className="text14Medium" | ||
columns={claimantListColumns} | ||
noDataText="No Claimants" | ||
rows={rows} | ||
/> | ||
</SecondaryCard> | ||
</div> | ||
); | ||
} |
22 changes: 22 additions & 0 deletions
22
packages/next-common/components/fellowship/salary/claimants/status.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { has } from "lodash-es"; | ||
import Tooltip from "next-common/components/tooltip"; | ||
import { useSalaryAsset } from "next-common/hooks/useSalaryAsset"; | ||
import { toPrecision } from "next-common/utils"; | ||
|
||
export default function FellowshipSalaryMemberStatus({ status }) { | ||
const { decimals, symbol } = useSalaryAsset(); | ||
|
||
let content = <span className="text-textTertiary">-</span>; | ||
let tooltipContent; | ||
|
||
if (has(status, "attempted")) { | ||
content = <span className="text-blue500">Attempted</span>; | ||
} else if (has(status, "registered")) { | ||
tooltipContent = `${toPrecision(status.registered, decimals)} ${symbol}`; | ||
content = <span className="text-green500">Registered</span>; | ||
} else if (has(status, "nothing")) { | ||
content = <span className="text-textTertiary">Nothing</span>; | ||
} | ||
|
||
return <Tooltip content={tooltipContent}>{content}</Tooltip>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
packages/next-common/hooks/fellowship/salary/useFellowshipSalaryStatusFilter.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { lowerFirst } from "lodash-es"; | ||
import Select from "next-common/components/select"; | ||
import { useState } from "react"; | ||
|
||
export function useFellowshipSalaryMemberStatusFilter(statusValues = []) { | ||
const options = [ | ||
{ | ||
label: "All", | ||
value: null, | ||
}, | ||
...statusValues.map((value) => { | ||
return { | ||
label: value, | ||
value: lowerFirst(value), | ||
}; | ||
}), | ||
]; | ||
|
||
const [status, setStatus] = useState(options[0].value); | ||
|
||
const component = ( | ||
<div className="text12Medium text-textPrimary flex items-center gap-x-2"> | ||
<div>Status</div> | ||
<Select | ||
className="w-32" | ||
small | ||
value={status} | ||
options={options} | ||
onChange={(option) => { | ||
setStatus(option.value); | ||
}} | ||
/> | ||
</div> | ||
); | ||
|
||
return { | ||
status, | ||
component, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import FellowshipSalaryCommon from "next-common/components/fellowship/salary/common"; | ||
import FellowshipSalaryClaimantsContainer from "next-common/components/fellowship/salary/claimants/container"; | ||
import { withCommonProps } from "next-common/lib"; | ||
import { fetchOpenGovTracksProps } from "next-common/services/serverSide"; | ||
import nextApi from "next-common/services/nextApi"; | ||
import { | ||
fellowshipMembersApiUri, | ||
fellowshipParamsApi, | ||
fellowshipSalaryClaimantsApi, | ||
} from "next-common/services/url"; | ||
|
||
export default function FellowshipSalaryClaimantsPage() { | ||
return ( | ||
<FellowshipSalaryCommon> | ||
<FellowshipSalaryClaimantsContainer /> | ||
</FellowshipSalaryCommon> | ||
); | ||
} | ||
|
||
export const getServerSideProps = withCommonProps(async () => { | ||
const [ | ||
tracksProps, | ||
{ result: fellowshipMembers }, | ||
{ result: fellowshipParams = {} }, | ||
{ result: fellowshipSalaryClaimants }, | ||
] = await Promise.all([ | ||
fetchOpenGovTracksProps(), | ||
nextApi.fetch(fellowshipMembersApiUri), | ||
nextApi.fetch(fellowshipParamsApi), | ||
nextApi.fetch(fellowshipSalaryClaimantsApi), | ||
]); | ||
|
||
return { | ||
props: { | ||
...tracksProps, | ||
fellowshipMembers, | ||
fellowshipParams, | ||
fellowshipSalaryClaimants, | ||
}, | ||
}; | ||
}); |