All files / src/app/extensions/punchout/pages/account-punchout account-punchout-page.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
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<ish-account-punchout-header
  [punchoutTypes]="punchoutTypes$ | async"
  [selectedType]="selectedPunchoutType$ | async"
  [error]="error$ | async"
/>
 
@if (selectedPunchoutType$ | async; as selectedType) {
<div class="section">
  <h2 class="mt-1">
    {{ 'account.punchout.user.list.heading' | translate : { '0': selectedType } }}
    <a
      [routerLink]="['/account/punchout/create']"
      [queryParams]="{ format: selectedType }"
      class="btn btn-secondary"
      data-testing-id="add-user-button"
    >
      {{ 'account.punchout.user.add.button.label' | translate }}
    </a>
  </h2>
  @if (punchoutUsers$ | async; as users) { @if (users.length) {
  <div class="list-body" data-testing-id="user-list">
    @for (user of users; track user.id) { @if (user) {
    <div class="list-item-row row mx-0">
      <div class="col-9 col-sm-10 list-item">
        <p>
          <span class="d-block">{{ user.login }}</span>
          @if (user.active === false) {
          <span class="input-help">{{ 'account.user.list.status.inactive' | translate }}</span>
          }
        </p>
      </div>
      <div class="col-3 col-sm-2 list-item text-end">
        <div class="float-end">
          @if (selectedType === 'cxml' && ('punchout.cxmlUserConfigurationEnabled' | ishServerSetting)) {
          <a
            [routerLink]="['cxmlConfiguration', user.id]"
            [queryParams]="{ format: selectedType }"
            class="btn-tool"
            [title]="'account.punchout.configure.link' | translate : { '0': user.login }"
          >
            <i class="bi bi-gear-fill"></i>
          </a>
          }
          <a
            [routerLink]="[user.login]"
            [queryParams]="{ format: selectedType }"
            class="btn-tool"
            [title]="'account.profile.update.link' | translate : { '0': user.login }"
            data-testing-id="edit-user"
          >
            <i class="bi bi-pencil-fill"></i>
          </a>
          <button
            type="button"
            class="btn-tool btn-link"
            [title]="'account.user.delete_user_dialog.header' | translate : { '0': user.login }"
            (click)="modalDialog.show(user)"
            data-testing-id="delete-user"
          >
            <i class="bi bi-trash-fill"></i>
          </button>
          <ish-modal-dialog
            #modalDialog
            [options]="{
              titleText: 'account.user.delete_user_dialog.header' | translate : { '0': user.login },
              confirmText: 'account.user.delete_user_dialog.delete_button.text' | translate,
              rejectText: 'account.user.delete_user_dialog.cancel_button.text' | translate
            }"
            (confirmed)="deleteUser($event)"
          >
            <p>{{ 'account.punchout.user.delete.text' | translate }}</p>
          </ish-modal-dialog>
        </div>
      </div>
    </div>
    } }
  </div>
  } @else {
  <p data-testing-id="empty-user-list">
    {{ 'account.punchout.no_user.text' | translate : { '0': selectedType } }}
  </p>
  } @switch (selectedType) { @case ('oci') {
  <p>
    {{ 'account.punchout.oci.info.url.helptext' | translate }}
  </p>
  <p>{{ ociPunchoutUrl$ | async }}</p>
  } @case ('cxml') {
  <p>
    {{ 'account.punchout.cxml.info.url.helptext' | translate }}
  </p>
  <p>{{ cxmlPunchoutUrl$ | async }}</p>
  } } } @else {
  <p data-testing-id="empty-user-list">
    {{ 'account.punchout.no_user.text' | translate : { '0': selectedType } }}
  </p>
  }
</div>
} @if (loading$ | async) {
<ish-loading />
}