Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 52x | import { css } from '@emotion/react';
import { IconArchive } from '@tabler/icons-react';
import { memo, useCallback, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { Table, type CellSelectOption, type CellSelectProps } from '@allshares/studio-design-system';
import { useUpdatePlanAssignments } from '@amalia/assignments/plans/state';
import { canModifyPlanAssignments } from '@amalia/kernel/auth/shared';
import { useAbilityContext } from '@amalia/kernel/auth/state';
import { type Plan, type PlanAssignment } from '@amalia/payout-definition/plans/types';
import { useTeamsAssignments } from '@amalia/tenants/assignments/teams/state';
import { useTeams } from '@amalia/tenants/teams/state';
import { type TeamContract } from '@amalia/tenants/teams/types';
type TeamOption = CellSelectOption<TeamContract['id']>;
export type PlanAssignmentsTableMainTeamCellProps = {
readonly plan: Pick<Plan, 'archived'>;
readonly planAssignment: Pick<PlanAssignment, 'id' | 'mainTeamId' | 'userId'>;
};
export const PlanAssignmentsTableMainTeamCell = memo(function PlanAssignmentsTableMainTeamCell({
plan,
planAssignment,
}: PlanAssignmentsTableMainTeamCellProps) {
const { formatMessage } = useIntl();
const ability = useAbilityContext();
const { teamsList } = useTeams({ sortByName: true, showArchivedTeams: true });
const { data: teamAssignments } = useTeamsAssignments({
teamsIds: teamsList.map((team) => team.id),
});
const mainTeam = teamsList.find((team) => team.id === planAssignment.mainTeamId);
const teamOptions = useMemo(
() =>
teamsList
.filter(
(team) =>
planAssignment.mainTeamId === team.id ||
teamAssignments?.some(
(teamAssignment) => teamAssignment.userId === planAssignment.userId && teamAssignment.teamId === team.id,
),
)
.map(
(team): TeamOption => ({
label: team.name,
value: team.id,
icon: team.archived ? <IconArchive /> : undefined,
disabled:
team.archived ||
!teamAssignments?.some(
(teamAssignment) =>
teamAssignment.userId === planAssignment.userId && teamAssignment.teamId === team.id,
),
}),
),
[teamsList, teamAssignments, planAssignment.userId, planAssignment.mainTeamId],
);
const { mutate: updatePlanAssignments, isPending } = useUpdatePlanAssignments();
const handleChange: NonNullable<
CellSelectProps<TeamOption, Pick<PlanAssignment, 'id' | 'mainTeamId' | 'userId'>>['onChange']
> = useCallback(
(value, planAssignment) =>
updatePlanAssignments([
{
id: planAssignment.id,
mainTeamId: value,
},
]),
[updatePlanAssignments],
);
return !plan.archived && canModifyPlanAssignments(ability) ? (
<Table.Cell.Select<TeamOption, Pick<PlanAssignment, 'id' | 'mainTeamId' | 'userId'>>
disabled={isPending}
options={teamOptions}
placeholder={formatMessage({ defaultMessage: 'No primary team' })}
row={planAssignment}
value={planAssignment.mainTeamId}
onChange={handleChange}
/>
) : (
<Table.Cell.Text>
{mainTeam ? (
mainTeam.name
) : (
<span
css={(theme) => css`
color: ${theme.ds.colors.gray[400]};
[data-color-scheme='dark'] & {
color: ${theme.ds.colors.gray[700]};
}
`}
>
{formatMessage({ defaultMessage: 'No primary team' })}
</span>
)}
</Table.Cell.Text>
);
});
|