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"
/>
 
<div *ngIf="selectedPunchoutType$ | async as selectedType" 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>
 
  <ng-container *ngIf="punchoutUsers$ | async as users; else emptyList">
    <div *ngIf="users.length; else emptyList" class="list-body" data-testing-id="user-list">
      <ng-container *ngFor="let user of users">
        <div *ngIf="user" class="list-item-row row mx-0">
          <div class="col-10 list-item">
            <p>
              <span class="d-block">{{ user.login }}</span>
              <span *ngIf="user.active === false" class="input-help">{{
                'account.user.list.status.inactive' | translate
              }}</span>
            </p>
          </div>
          <div class="col-2 list-item text-right">
            <div class="float-right">
              <a
                *ngIf="selectedType === 'cxml' && ('punchout.cxmlUserConfigurationEnabled' | ishServerSetting)"
                [routerLink]="['cxmlConfiguration', user.id]"
                [queryParams]="{ format: selectedType }"
                class="btn-tool"
                title="{{ 'account.punchout.configure.link' | translate : { '0': user.login } }}"
              >
                <fa-icon [icon]="['fas', 'cog']" />
              </a>
              <a
                [routerLink]="[user.login]"
                [queryParams]="{ format: selectedType }"
                class="btn-tool"
                title="{{ 'account.profile.update.link' | translate }}"
                data-testing-id="edit-user"
              >
                <fa-icon [icon]="['fas', 'pencil-alt']" />
              </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"
              >
                <fa-icon [icon]="['fas', 'trash-alt']" />
              </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>
      </ng-container>
    </div>
    <ng-container [ngSwitch]="selectedType">
      <ng-template [ngSwitchCase]="'oci'">
        <p>
          {{ 'account.punchout.oci.info.url.helptext' | translate }}
        </p>
        <p>{{ ociPunchoutUrl }}</p>
      </ng-template>
      <ng-template [ngSwitchCase]="'cxml'">
        <p>
          {{ 'account.punchout.cxml.info.url.helptext' | translate }}
        </p>
        <p>{{ cxmlPunchoutUrl$ | async }}</p>
      </ng-template>
    </ng-container>
  </ng-container>
  <ng-template #emptyList>
    <p data-testing-id="empty-user-list">
      {{ 'account.punchout.no_user.text' | translate : { '0': selectedType } }}
    </p>
  </ng-template>
</div>
 
<ish-loading *ngIf="loading$ | async" />