From b0182a5f048d4885ea9a82ff55e1520577c6ccb0 Mon Sep 17 00:00:00 2001
From: Arman Ozak <arman@armanozak.com>
Date: Mon, 14 Dec 2020 12:24:39 +0300
Subject: [PATCH] feat: use extensible components in user page

---
 .../lib/components/users/users.component.html | 179 ++----------------
 .../lib/components/users/users.component.ts   |  65 +++----
 2 files changed, 39 insertions(+), 205 deletions(-)

diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index 05dae5f0d9..a266dc717d 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@@ -5,16 +5,7 @@
         <h5 class="card-title">{{ 'AbpIdentity::Users' | abpLocalization }}</h5>
       </div>
       <div class="text-right col col-md-6">
-        <button
-          *abpPermission="'AbpIdentity.Users.Create'"
-          id="create-role"
-          class="btn btn-primary"
-          type="button"
-          (click)="add()"
-        >
-          <i class="fa fa-plus mr-1"></i>
-          <span>{{ 'AbpIdentity::NewUser' | abpLocalization }}</span>
-        </button>
+        <abp-page-toolbar [record]="data$ | async"></abp-page-toolbar>
       </div>
     </div>
   </div>
@@ -30,170 +21,22 @@
       </div>
     </div>
 
-    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default>
-      <ngx-datatable-column
-        [name]="'AbpIdentity::Actions' | abpLocalization"
-        [maxWidth]="150"
-        [sortable]="false"
-      >
-        <ng-template let-row="row" ngx-datatable-cell-template>
-          <div ngbDropdown container="body" class="d-inline-block">
-            <button
-              class="btn btn-primary btn-sm dropdown-toggle"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              ngbDropdownToggle
-            >
-              <i class="fa fa-cog mr-1"></i>{{ 'AbpIdentity::Actions' | abpLocalization }}
-            </button>
-            <div ngbDropdownMenu>
-              <button
-                *abpPermission="'AbpIdentity.Users.Update'"
-                ngbDropdownItem
-                (click)="edit(row.id)"
-              >
-                {{ 'AbpIdentity::Edit' | abpLocalization }}
-              </button>
-              <button
-                *abpPermission="'AbpIdentity.Users.ManagePermissions'"
-                ngbDropdownItem
-                (click)="openPermissionsModal(row.id)"
-              >
-                {{ 'AbpIdentity::Permissions' | abpLocalization }}
-              </button>
-              <button
-                *abpPermission="'AbpIdentity.Users.Delete'"
-                ngbDropdownItem
-                (click)="delete(row.id, row.userName)"
-              >
-                {{ 'AbpIdentity::Delete' | abpLocalization }}
-              </button>
-            </div>
-          </div>
-        </ng-template>
-      </ngx-datatable-column>
-      <ngx-datatable-column
-        [width]="200"
-        [name]="'AbpIdentity::UserName' | abpLocalization"
-        prop="userName"
-      ></ngx-datatable-column>
-      <ngx-datatable-column
-        [width]="200"
-        [name]="'AbpIdentity::EmailAddress' | abpLocalization"
-        prop="email"
-      ></ngx-datatable-column>
-      <ngx-datatable-column
-        [width]="200"
-        [name]="'AbpIdentity::PhoneNumber' | abpLocalization"
-        prop="phoneNumber"
-      ></ngx-datatable-column>
-    </ngx-datatable>
+    <abp-extensible-table
+      [data]="data$ | async"
+      [recordsTotal]="totalCount$ | async"
+      [list]="list"
+    ></abp-extensible-table>
   </div>
 </div>
 
-<abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy" (disappear)="form = null">
+<abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
   <ng-template #abpHeader>
-    <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
+    <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
   </ng-template>
 
   <ng-template #abpBody>
-    <ng-template #loaderRef
-      ><div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
-    ></ng-template>
-
-    <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
-      <ul ngbNav #nav="ngbNav" class="nav-tabs">
-        <li ngbNavItem>
-          <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
-          <ng-template ngbNavContent>
-            <div class="form-group">
-              <label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
-              ><span> * </span>
-              <input
-                type="text"
-                id="user-name"
-                class="form-control"
-                formControlName="userName"
-                autofocus
-              />
-            </div>
-
-            <div class="form-group">
-              <label for="name">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label>
-              <input type="text" id="name" class="form-control" formControlName="name" />
-            </div>
-
-            <div class="form-group">
-              <label for="surname">{{
-                'AbpIdentity::DisplayName:Surname' | abpLocalization
-              }}</label>
-              <input type="text" id="surname" class="form-control" formControlName="surname" />
-            </div>
-
-            <div class="form-group">
-              <label for="password">{{ 'AbpIdentity::Password' | abpLocalization }}</label
-              ><span *ngIf="!selected.userName"> * </span>
-              <input
-                type="password"
-                id="password"
-                autocomplete="new-password"
-                class="form-control"
-                formControlName="password"
-              />
-            </div>
-
-            <div class="form-group">
-              <label for="email">{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</label
-              ><span> * </span>
-              <input type="text" id="email" class="form-control" formControlName="email" />
-            </div>
-
-            <div class="form-group">
-              <label for="phone-number">{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</label>
-              <input
-                type="text"
-                id="phone-number"
-                class="form-control"
-                formControlName="phoneNumber"
-              />
-            </div>
-
-            <div class="custom-checkbox custom-control mb-2">
-              <input
-                type="checkbox"
-                id="lockout-checkbox"
-                class="custom-control-input"
-                formControlName="lockoutEnabled"
-              />
-              <label class="custom-control-label" for="lockout-checkbox">{{
-                'AbpIdentity::DisplayName:LockoutEnabled' | abpLocalization
-              }}</label>
-            </div>
-          </ng-template>
-        </li>
-
-        <li ngbNavItem>
-          <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
-          <ng-template ngbNavContent>
-            <div
-              *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
-              class="custom-checkbox custom-control mb-2"
-            >
-              <input
-                type="checkbox"
-                class="custom-control-input"
-                [attr.id]="'roles-' + i"
-                [formControl]="roleGroup.controls[roles[i].name]"
-              />
-              <label class="custom-control-label" [attr.for]="'roles-' + i">{{
-                roles[i].name
-              }}</label>
-            </div>
-          </ng-template>
-        </li>
-      </ul>
-
-      <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
+    <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
+      <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
     </form>
   </ng-template>
 
@@ -201,7 +44,7 @@
     <button type="button" class="btn btn-secondary" #abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="form?.invalid">{{
+    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
       'AbpIdentity::Save' | abpLocalization
     }}</abp-button>
   </ng-template>
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
index 3588ad02b0..da533ba62a 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
@@ -1,6 +1,11 @@
 import { ListService } from '@abp/ng.core';
 import { ePermissionManagementComponents } from '@abp/ng.permission-management';
-import { Confirmation, ConfirmationService, getPasswordValidators } from '@abp/ng.theme.shared';
+import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
+import {
+  EXTENSIONS_IDENTIFIER,
+  FormPropData,
+  generateFormFromProps,
+} from '@abp/ng.theme.shared/extensions';
 import {
   Component,
   Injector,
@@ -9,14 +14,7 @@ import {
   TrackByFunction,
   ViewChild,
 } from '@angular/core';
-import {
-  AbstractControl,
-  FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
+import { AbstractControl, FormArray, FormBuilder, FormGroup } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { finalize, pluck, switchMap, take } from 'rxjs/operators';
@@ -29,6 +27,7 @@ import {
   GetUsers,
   UpdateUser,
 } from '../../actions/identity.actions';
+import { eIdentityComponents } from '../../enums/components';
 import { Identity } from '../../models/identity';
 import { IdentityUserService } from '../../proxy/identity/identity-user.service';
 import {
@@ -41,7 +40,13 @@ import { IdentityState } from '../../states/identity.state';
 @Component({
   selector: 'abp-users',
   templateUrl: './users.component.html',
-  providers: [ListService],
+  providers: [
+    ListService,
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: eIdentityComponents.Users,
+    },
+  ],
 })
 export class UsersComponent implements OnInit {
   @Select(IdentityState.getUsers)
@@ -83,11 +88,11 @@ export class UsersComponent implements OnInit {
 
   constructor(
     public readonly list: ListService<GetIdentityUsersInput>,
-    private injector: Injector,
-    private confirmationService: ConfirmationService,
-    private fb: FormBuilder,
-    private store: Store,
-    private identityUserService: IdentityUserService,
+    protected confirmationService: ConfirmationService,
+    protected userService: IdentityUserService,
+    protected fb: FormBuilder,
+    protected store: Store,
+    protected injector: Injector,
   ) {}
 
   ngOnInit() {
@@ -95,19 +100,14 @@ export class UsersComponent implements OnInit {
   }
 
   buildForm() {
-    this.identityUserService.getAssignableRoles().subscribe(({ items }) => {
+    const data = new FormPropData(this.injector, this.selected);
+    this.form = generateFormFromProps(data);
+
+    this.userService.getAssignableRoles().subscribe(({ items }) => {
       this.roles = items;
-      this.form = this.fb.group({
-        userName: [this.selected.userName || '', [Validators.required, Validators.maxLength(256)]],
-        email: [
-          this.selected.email || '',
-          [Validators.required, Validators.email, Validators.maxLength(256)],
-        ],
-        name: [this.selected.name || '', [Validators.maxLength(64)]],
-        surname: [this.selected.surname || '', [Validators.maxLength(64)]],
-        phoneNumber: [this.selected.phoneNumber || '', [Validators.maxLength(16)]],
-        lockoutEnabled: [this.selected.id ? this.selected.lockoutEnabled : true],
-        roleNames: this.fb.array(
+      this.form.addControl(
+        'roleNames',
+        this.fb.array(
           this.roles.map(role =>
             this.fb.group({
               [role.name]: [
@@ -118,16 +118,7 @@ export class UsersComponent implements OnInit {
             }),
           ),
         ),
-      });
-
-      const passwordValidators = getPasswordValidators(this.injector);
-
-      this.form.addControl('password', new FormControl('', [...passwordValidators]));
-
-      if (!this.selected.userName) {
-        this.form.get('password').setValidators([...passwordValidators, Validators.required]);
-        this.form.get('password').updateValueAndValidity();
-      }
+      );
     });
   }