All files / projects/organization-management/src/app/components/cost-center-users-list cost-center-users-list.component.html

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
125
126
127
128
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div *ngIf="costCenter">
  <ng-container *ngIf="costCenter.buyers?.length > 0; else emptyList">
    <table
      cdk-table
      [dataSource]="costCenter.buyers"
      class="table table-lg mobile-optimized"
      data-testing-id="costCenterBuyers-list"
    >
      <!-- Buyer Name -->
      <ng-container cdkColumnDef="buyerName">
        <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-buyer-name">
          {{ 'account.costcenter.details.buyers.list.header.name' | translate }}
        </th>
        <td
          cdk-cell
          *cdkCellDef="let buyer"
          [attr.data-label]="'account.costcenter.details.buyers.list.header.name' | translate"
        >
          <a *ishIsAuthorizedTo="'APP_B2B_MANAGE_USERS'" [routerLink]="'../../users/' + buyer.login"
            >{{ buyer.firstName }} {{ buyer.lastName }}</a
          >
          <ng-container *ishHasNotRole="'APP_B2B_ACCOUNT_OWNER'">
            {{ buyer.firstName }} {{ buyer.lastName }}
          </ng-container>
          <span *ngIf="buyer.active === false" class="input-help">
            <br />{{ 'account.user.list.status.inactive' | translate }}
          </span>
        </td>
      </ng-container>
 
      <!-- Orders -->
      <ng-container cdkColumnDef="orders">
        <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-orders">
          {{ 'account.costcenter.details.buyers.list.header.approvedorders' | translate }}
        </th>
        <td
          cdk-cell
          *cdkCellDef="let buyer"
          [attr.data-label]="'account.costcenter.details.buyers.list.header.approvedorders' | translate"
        >
          {{ buyer.approvedOrders }}
        </td>
      </ng-container>
 
      <!-- Pending Orders -->
      <ng-container cdkColumnDef="pendingOrders">
        <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-pending-orders">
          {{ 'account.costcenter.details.buyers.list.header.pendingorders' | translate }}
        </th>
        <td
          cdk-cell
          *cdkCellDef="let buyer"
          [attr.data-label]="'account.costcenter.details.buyers.list.header.pendingorders' | translate"
        >
          {{ buyer.pendingOrders }}
        </td>
      </ng-container>
 
      <!-- Budget -->
      <ng-container cdkColumnDef="budget">
        <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-user-budget">
          {{ 'account.costcenter.details.buyers.list.header.orderspendlimit' | translate }}
        </th>
        <td
          cdk-cell
          *cdkCellDef="let buyer"
          [attr.data-label]="'account.costcenter.details.buyers.list.header.orderspendlimit' | translate"
        >
          {{ buyer.budget | ishPrice }} ({{
            'account.costcenter.details.buyers.list.orderspendlimit.period' | translate : { '0': buyer.budgetPeriod }
          }})
        </td>
      </ng-container>
 
      <ng-container cdkColumnDef="actions">
        <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-cost-center-buyers-actions"></th>
        <td cdk-cell *cdkCellDef="let buyer" class="column-price">
          <button
            type="button"
            class="btn-tool btn-link"
            [title]="'account.costcenter.details.action.edit' | translate"
            data-testing-id="cost-center-buyer-edit"
            (click)="openEditCostCenterBuyerDialog(buyer, editCostCenterBuyerDialog)"
          >
            <fa-icon icon="pencil-alt" />
          </button>
 
          <!-- Remove buyer -->
          <button
            type="button"
            class="btn-tool btn-link"
            title="{{ 'account.costcenter.remove.button.label' | translate }}"
            (click)="removeBuyerConfirmation(buyer, removeBuyerDialog)"
            data-testing-id="cost-center-buyer-remove"
          >
            <fa-icon [icon]="['fas', 'trash-alt']" />
          </button>
        </td>
      </ng-container>
 
      <!-- Header and Row Declarations -->
      <tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
      <tr cdk-row *cdkRowDef="let row; columns: columnsToDisplay"></tr>
    </table>
  </ng-container>
 
  <ish-cost-center-buyer-edit-dialog #editCostCenterBuyerDialog />
 
  <!-- Empty List -->
  <ng-template #emptyList>
    <p data-testing-id="emptyBuyerList">{{ 'account.costcenter.details.buyers.list.nobuyers' | translate }}</p>
  </ng-template>
</div>
 
<ish-modal-dialog
  #removeBuyerDialog
  [options]="{
    confirmText: 'account.costcenter.remove.button.label' | translate,
    rejectText: 'account.cancel.button.label' | translate,
    titleText:
      'account.costcenter.remove_buyer_dialog.header'
      | translate : { '0': selectedBuyer?.firstName + ' ' + selectedBuyer?.lastName }
  }"
  (confirmed)="removeBuyerFromCostCenter()"
>
  <p [ishServerHtml]="'account.costcenter.remove_buyer.question' | translate"></p>
</ish-modal-dialog>