abp/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html at f6fdf9822b99bc75a6a3de08738b59941f96f5db · abpframework/abp · GitHub

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
<abp-page [title]="'AbpIdentity::Users' | abpLocalization" [toolbar]="data.items">
  <div id="identity-roles-wrapper" class="card">
    <div class="card-body">
      <div id="data-tables-table-filter" class="data-tables-filter mb-3">
        <div class="input-group">
          <input
            type="search"
            class="form-control"
            [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
            [(ngModel)]="list.filter"
          />
        </div>
      </div>

      <abp-extensible-table
        [data]="data.items"
        [recordsTotal]="data.totalCount"
        [list]="list"
      ></abp-extensible-table>
    </div>
  </div>

  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
    <ng-template #abpHeader>
      <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
    </ng-template>

    <ng-template #abpBody>
      @if (form) {
        <form [formGroup]="form" (ngSubmit)="save()">
          <div ngTabs selectionMode="follow">
            <div ngTabList [(selectedTab)]="selectedTab" class="nav nav-tabs">
              <button ngTab #tabInfo="ngTab" [value]="'user-info'" class="nav-link" [class.active]="tabInfo.selected()" type="button">
                {{ 'AbpIdentity::UserInformations' | abpLocalization }}
              </button>
              <button ngTab #tabRoles="ngTab" [value]="'roles'" class="nav-link" [class.active]="tabRoles.selected()" type="button">
                {{ 'AbpIdentity::Roles' | abpLocalization }}
              </button>
            </div>

            <div class="mt-2 fade-in-top">
              <div ngTabPanel [value]="'user-info'">
                <ng-template ngTabContent>
                  <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
                </ng-template>
              </div>

              <div ngTabPanel [value]="'roles'">
                <ng-template ngTabContent>
                  @for (roleGroup of roleGroups; track $index; let i = $index) {
                    <div class="form-check mb-2">
                      <abp-checkbox
                        *abpReplaceableTemplate="{
                          inputs: {
                            checkboxId: 'roles-' + i,
                            label: roles[i].name,
                            formControl: roleGroup.controls[roles[i].name]
                          },
                          componentKey: inputKey
                        }"
                        [checkboxId]="'roles-' + i"
                        [formControl]="roleGroup.controls[roles[i].name]"
                        [label]="roles[i].name"
                      >
                      </abp-checkbox>
                    </div>
                  }
                </ng-template>
              </div>
            </div>
          </div>
        </form>
      } @else {
        <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
      }
    </ng-template>

    <ng-template #abpFooter>
      <button type="button" class="btn btn-outline-primary" abpClose>
        {{ 'AbpIdentity::Cancel' | abpLocalization }}
      </button>
      <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
        'AbpIdentity::Save' | abpLocalization
      }}</abp-button>
    </ng-template>
  </abp-modal>

  <abp-permission-management
    #abpPermissionManagement="abpPermissionManagement"
    *abpReplaceableTemplate="
      {
        inputs: {
          providerName: { value: 'U' },
          providerKey: { value: providerKey },
          visible: { value: visiblePermissions, twoWay: true }
        },
        outputs: { visibleChange: onVisiblePermissionChange },
        componentKey: permissionManagementKey
      };
      let init = initTemplate
    "
    [entityDisplayName]="entityDisplayName"
    (abpInit)="init(abpPermissionManagement)"
  >
  </abp-permission-management>
</abp-page>