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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 51x 157x 157x 157x 157x 157x 157x 157x 39x 157x 157x 157x 157x | import { IconPlus } from '@tabler/icons-react';
import { Fragment, memo, useCallback } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import {
DataGrid,
getPageCount,
SortDirection,
useControlledDataGridData,
useDataGridState,
} from '@allshares/studio-design-system';
import { AssignmentsStatusFilter } from '@amalia/assignments/common/components';
import { useBoolState } from '@amalia/ext/react/hooks';
import { canModifyTeamAssignments } from '@amalia/kernel/auth/shared';
import { useAbilityContext } from '@amalia/kernel/auth/state';
import { useUserTeamAssignments } from '@amalia/tenants/assignments/teams/state';
import { type TeamAssignmentWithTeam } from '@amalia/tenants/assignments/teams/types';
import { type UserProfile } from '@amalia/tenants/users/profile/types';
import { CreateUserTeamAssignmentsFormModal } from '../forms/create-user-team-assignments/modal/CreateUserTeamAssignmentsFormModal';
import { useTeamAssignmentsStatusFilters } from '../hooks/use-team-assignments-status-filter';
import { useUserTeamAssignmentsTableColumns } from './useUserTeamAssignmentsTableColumns';
export type UserTeamAssignmentsTableProps = {
readonly user: Pick<UserProfile, 'firstName' | 'id' | 'lastName'>;
};
export const UserTeamAssignmentsTable = memo(function UserTeamAssignmentsTable({
user,
}: UserTeamAssignmentsTableProps) {
const ability = useAbilityContext();
const { formatMessage } = useIntl();
const { isCreateAssignmentsModalOpen, setCreateAssignmentsModalOpenTrue, setCreateAssignmentsModalOpenFalse } =
useBoolState(false, 'createAssignmentsModalOpen');
const columns = useUserTeamAssignmentsTableColumns({ user });
const { isPending, data: teamAssignments } = useUserTeamAssignments(user.id);
const { page, pageSize, setPage, columnSorting, searchText, setSearchText } = useDataGridState({
pageSize: 10,
columnSorting: [{ id: 'teamName', direction: SortDirection.ASC }],
});
const { statusFilter, setStatusFilter, statusOptions, filteredAssignments } = useTeamAssignmentsStatusFilters({
teamAssignments,
onResetPage: useCallback(() => setPage(0), [setPage]),
});
const { data, total } = useControlledDataGridData(columns, filteredAssignments, {
page,
pageSize,
columnSorting,
searchText,
});
const originalPageCount = getPageCount(filteredAssignments?.length ?? 0, pageSize);
const filteredPageCount = getPageCount(total, pageSize);
return (
<Fragment>
<DataGrid<TeamAssignmentWithTeam, string>
columns={columns}
data={data}
isLoading={isPending}
loadingRowsCount={/* See UserTeamAssignmentsTable.mdx */ 1}
rowKey="id"
actions={
canModifyTeamAssignments(ability) ? (
<DataGrid.Action
icon={<IconPlus />}
variant="primary"
onClick={setCreateAssignmentsModalOpenTrue}
>
<FormattedMessage defaultMessage="Assign to teams" />
</DataGrid.Action>
) : undefined
}
leftHeaderSlot={
<AssignmentsStatusFilter
options={statusOptions}
value={statusFilter}
onChange={setStatusFilter}
/>
}
noDataMessage={
<FormattedMessage
defaultMessage="{firstName} {lastName} is not currently assigned to any teams."
values={{ firstName: user.firstName, lastName: user.lastName }}
/>
}
pagination={
/* Display pagination only if there is more than one page after filtering data. */
filteredPageCount > 1 ? (
<DataGrid.Pagination
page={page}
pageCount={filteredPageCount}
onChangePage={setPage}
/>
) : undefined
}
search={
/* Display search only if there is more than one page before filtering data. */
originalPageCount > 1 ? (
<DataGrid.Search
placeholder={formatMessage({ defaultMessage: 'Search teams…' })}
value={searchText}
onChange={setSearchText}
/>
) : undefined
}
/>
<CreateUserTeamAssignmentsFormModal
isOpen={isCreateAssignmentsModalOpen}
user={user}
onClose={setCreateAssignmentsModalOpenFalse}
onSubmitSuccess={setCreateAssignmentsModalOpenFalse}
/>
</Fragment>
);
});
|