All files / libs/assignments/plans/components/src/lib/user-plan-assignments-table UserPlanAssignmentsTable.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
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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 { useUserPlanAssignments } from '@amalia/assignments/plans/state';
import { useBoolState } from '@amalia/ext/react/hooks';
import { canModifyPlanAssignments } from '@amalia/kernel/auth/shared';
import { useAbilityContext } from '@amalia/kernel/auth/state';
import { type PlanAssignmentWithPlanAndMainTeam } from '@amalia/payout-definition/plans/types';
import { type UserProfile } from '@amalia/tenants/users/profile/types';

import { CreateUserPlanAssignmentsFormModal } from '../forms/create-user-plan-assignments/modal/CreateUserPlanAssignmentsFormModal';
import { usePlanAssignmentsStatusFilter } from '../hooks/use-plan-assignments-status-filter';

import { useUserPlanAssignmentsTableColumns } from './useUserPlanAssignmentsTableColumns';

export type UserPlanAssignmentsTableProps = {
  readonly user: Pick<UserProfile, 'firstName' | 'id' | 'lastName'>;
};

export const UserPlanAssignmentsTable = memo(function UserPlanAssignmentsTable({
  user,
}: UserPlanAssignmentsTableProps) {
  const ability = useAbilityContext();
  const { formatMessage } = useIntl();

  const { isCreateAssignmentsModalOpen, setCreateAssignmentsModalOpenTrue, setCreateAssignmentsModalOpenFalse } =
    useBoolState(false, 'createAssignmentsModalOpen');

  const columns = useUserPlanAssignmentsTableColumns({ user });
  const { isPending, data: planAssignments } = useUserPlanAssignments(user.id);

  const { page, pageSize, setPage, columnSorting, searchText, setSearchText } = useDataGridState({
    pageSize: 10,
    columnSorting: [{ id: 'plan', direction: SortDirection.ASC }],
  });

  const { statusFilter, setStatusFilter, statusOptions, filteredAssignments } = usePlanAssignmentsStatusFilter({
    planAssignments,
    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<PlanAssignmentWithPlanAndMainTeam, PlanAssignmentWithPlanAndMainTeam['id']>
        columns={columns}
        data={data}
        isLoading={isPending}
        loadingRowsCount={1}
        rowKey="id"
        actions={
          canModifyPlanAssignments(ability) ? (
            <DataGrid.Action
              icon={<IconPlus />}
              variant="primary"
              onClick={setCreateAssignmentsModalOpenTrue}
            >
              <FormattedMessage defaultMessage="Assign to plans" />
            </DataGrid.Action>
          ) : undefined
        }
        leftHeaderSlot={
          <AssignmentsStatusFilter
            options={statusOptions}
            value={statusFilter}
            onChange={setStatusFilter}
          />
        }
        noDataMessage={
          <FormattedMessage
            defaultMessage="{firstName} {lastName} is not currently assigned to any plans."
            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 plans…' })}
              value={searchText}
              onChange={setSearchText}
            />
          ) : undefined
        }
      />

      <CreateUserPlanAssignmentsFormModal
        isOpen={isCreateAssignmentsModalOpen}
        user={user}
        onClose={setCreateAssignmentsModalOpenFalse}
        onSubmitSuccess={setCreateAssignmentsModalOpenFalse}
      />
    </Fragment>
  );
});