All files / libs/tenants/assignments/teams/components/src/lib/team-assignments-table/cells/actions TeamAssignmentsTableDeleteAssignmentAction.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { IconTrash } from '@tabler/icons-react';
import { Fragment, memo, useCallback } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

import { Modal, Table, Typography } from '@allshares/studio-design-system';
import { useBoolState } from '@amalia/ext/react/hooks';
import { useDeleteTeamAssignments } from '@amalia/tenants/assignments/teams/state';
import { TeamRole, type TeamAssignment } from '@amalia/tenants/assignments/teams/types';
import { type TeamContract } from '@amalia/tenants/teams/types';
import { formatUserFullName, type UserContract } from '@amalia/tenants/users/types';

const confirmDeleteMessages = defineMessages<TeamRole>({
  [TeamRole.TEAM_MANAGER]: {
    defaultMessage:
      'Are you sure you want to delete the assignment to “<b>{teamName}</b>” as <b>manager</b> for <b>{userName}</b>?',
  },
  [TeamRole.TEAM_EMPLOYEE]: {
    defaultMessage:
      'Are you sure you want to delete the assignment to “<b>{teamName}</b>” as <b>employee</b> for <b>{userName}</b>?',
  },
});

export type TeamAssignmentsTableDeleteAssignmentActionProps = {
  readonly team: Pick<TeamContract, 'archived' | 'name'>;
  readonly teamAssignment: Pick<TeamAssignment, 'id' | 'teamRole'>;
  readonly user: Pick<UserContract, 'firstName' | 'lastName'>;
};

export const TeamAssignmentsTableDeleteAssignmentAction = memo(function TeamAssignmentsTableDeleteAssignmentAction({
  team,
  teamAssignment,
  user,
}: TeamAssignmentsTableDeleteAssignmentActionProps) {
  const { formatMessage } = useIntl();
  const { mutate: deleteTeamAssignments, isPending } = useDeleteTeamAssignments();

  const { isDeleteModalOpen, setDeleteModalOpenTrue, setDeleteModalOpenFalse } = useBoolState(false, 'deleteModalOpen');

  const handleDeleteTeamAssignment = useCallback(
    () => deleteTeamAssignments([teamAssignment.id]),
    [deleteTeamAssignments, teamAssignment.id],
  );

  return (
    <Fragment>
      <Table.Cell.IconAction
        disabled={team.archived}
        icon={<IconTrash />}
        isLoading={isPending}
        label={formatMessage({ defaultMessage: 'Delete assignment' })}
        variant="danger"
        onClick={setDeleteModalOpenTrue}
      />

      <Modal
        isOpen={isDeleteModalOpen}
        variant="danger"
        onClose={setDeleteModalOpenFalse}
      >
        <Modal.Content>
          <Modal.Header>
            <Modal.Title>
              <FormattedMessage defaultMessage="Delete assignment" />
            </Modal.Title>
          </Modal.Header>

          <Modal.Body>
            <FormattedMessage
              {...confirmDeleteMessages[teamAssignment.teamRole]}
              values={{
                userName: formatUserFullName(user),
                teamName: team.name,
                b: (chunks) => <Typography variant="bodyBaseBold">{chunks}</Typography>,
              }}
            />
          </Modal.Body>
        </Modal.Content>

        <Modal.Actions>
          <Modal.CancelAction />

          <Modal.MainAction
            isLoading={isPending}
            onClick={handleDeleteTeamAssignment}
          >
            <FormattedMessage defaultMessage="Delete" />
          </Modal.MainAction>
        </Modal.Actions>
      </Modal>
    </Fragment>
  );
});