All files / libs/tenants/teams/views/details/src/lib TeamDetailsView.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo, useMemo } from 'react';
import { FormattedMessage } from 'react-intl';

import { AlertBanner, Stack } from '@allshares/studio-design-system';
import { PageContainer } from '@amalia/core/layout/components';
import { canModifyTeamAssignments } from '@amalia/kernel/auth/shared';
import { useAbilityContext } from '@amalia/kernel/auth/state';
import { makeTeamsTree } from '@amalia/tenants/teams/shared/tree';
import { useTeams } from '@amalia/tenants/teams/state';
import { type TeamContract } from '@amalia/tenants/teams/types';

import { TeamDetailsAssignments } from './components/assignments/TeamDetailsAssignments';
import { TeamDetailsHeader } from './components/header/TeamDetailsHeader';

export type TeamDetailsViewProps = {
  readonly teamId: TeamContract['id'];
};

export const TeamDetailsView = memo(function TeamDetailsView({ teamId }: TeamDetailsViewProps) {
  const ability = useAbilityContext();

  const { teamsList, isPending: isTeamsPending } = useTeams({ showArchivedTeams: true, sortByName: true });
  const teamNodes = useMemo(() => makeTeamsTree(teamsList), [teamsList]);
  const teamNode = teamNodes.find((node) => node.team.id === teamId);

  return (
    <PageContainer isLoading={!teamNode || isTeamsPending}>
      {!!teamNode && (
        <Stack gap={32}>
          <TeamDetailsHeader
            allTeamNodes={teamNodes}
            teamNode={teamNode}
          />

          <Stack gap={16}>
            {!!teamNode.team.archived && (
              <AlertBanner
                inline
                withBorder
              >
                {canModifyTeamAssignments(ability) ? (
                  <FormattedMessage defaultMessage="This team is archived. You need to unarchive it first to perform any action on assignments." />
                ) : (
                  <FormattedMessage defaultMessage="This team is archived." />
                )}
              </AlertBanner>
            )}

            <TeamDetailsAssignments
              key={teamNode.team.id}
              teamNode={teamNode}
            />
          </Stack>
        </Stack>
      )}
    </PageContainer>
  );
});