tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat: use extensible components in user page

pull/6628/head
Arman Ozak 6 years ago
parent
35f4c95548
commit
b0182a5f04
2 changed files with 39 additions and 205 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 179
      npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
  2. 65
      npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

179
npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
View File

@ -5,16 +5,7 @@
<h5 class="card-title">{{ 'AbpIdentity::Users' | abpLocalization }}</h5> <h5 class="card-title">{{ 'AbpIdentity::Users' | abpLocalization }}</h5>
</div> </div>
<div class="text-right col col-md-6"> <div class="text-right col col-md-6">
<button <abp-page-toolbar [record]="data$ | async"></abp-page-toolbar>
*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>
</div> </div>
</div> </div>
</div> </div>
@ -30,170 +21,22 @@
</div> </div>
</div> </div>
<ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [list]="list" default> <abp-extensible-table
<ngx-datatable-column [data]="data$ | async"
[name]="'AbpIdentity::Actions' | abpLocalization" [recordsTotal]="totalCount$ | async"
[maxWidth]="150" [list]="list"
[sortable]="false" ></abp-extensible-table>
>
<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>
</div> </div>
</div> </div>
<abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy" (disappear)="form = null"> <abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
<ng-template #abpHeader> <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>
<ng-template #abpBody> <ng-template #abpBody>
<ng-template #loaderRef <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
><div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
></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> </form>
</ng-template> </ng-template>
@ -201,7 +44,7 @@
<button type="button" class="btn btn-secondary" #abpClose> <button type="button" class="btn btn-secondary" #abpClose>
{{ 'AbpIdentity::Cancel' | abpLocalization }} {{ 'AbpIdentity::Cancel' | abpLocalization }}
</button> </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 'AbpIdentity::Save' | abpLocalization
}}</abp-button> }}</abp-button>
</ng-template> </ng-template>

65
npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
View File

@ -1,6 +1,11 @@
import { ListService } from '@abp/ng.core'; import { ListService } from '@abp/ng.core';
import { ePermissionManagementComponents } from '@abp/ng.permission-management'; 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 { import {
Component, Component,
Injector, Injector,
@ -9,14 +14,7 @@ import {
TrackByFunction, TrackByFunction,
ViewChild, ViewChild,
} from '@angular/core'; } from '@angular/core';
import { import { AbstractControl, FormArray, FormBuilder, FormGroup } from '@angular/forms';
AbstractControl,
FormArray,
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import { Select, Store } from '@ngxs/store'; import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { finalize, pluck, switchMap, take } from 'rxjs/operators'; import { finalize, pluck, switchMap, take } from 'rxjs/operators';
@ -29,6 +27,7 @@ import {
GetUsers, GetUsers,
UpdateUser, UpdateUser,
} from '../../actions/identity.actions'; } from '../../actions/identity.actions';
import { eIdentityComponents } from '../../enums/components';
import { Identity } from '../../models/identity'; import { Identity } from '../../models/identity';
import { IdentityUserService } from '../../proxy/identity/identity-user.service'; import { IdentityUserService } from '../../proxy/identity/identity-user.service';
import { import {
@ -41,7 +40,13 @@ import { IdentityState } from '../../states/identity.state';
@Component({ @Component({
selector: 'abp-users', selector: 'abp-users',
templateUrl: './users.component.html', templateUrl: './users.component.html',
providers: [ListService], providers: [
ListService,
{
provide: EXTENSIONS_IDENTIFIER,
useValue: eIdentityComponents.Users,
},
],
}) })
export class UsersComponent implements OnInit { export class UsersComponent implements OnInit {
@Select(IdentityState.getUsers) @Select(IdentityState.getUsers)
@ -83,11 +88,11 @@ export class UsersComponent implements OnInit {
constructor( constructor(
public readonly list: ListService<GetIdentityUsersInput>, public readonly list: ListService<GetIdentityUsersInput>,
private injector: Injector, protected confirmationService: ConfirmationService,
private confirmationService: ConfirmationService, protected userService: IdentityUserService,
private fb: FormBuilder, protected fb: FormBuilder,
private store: Store, protected store: Store,
private identityUserService: IdentityUserService, protected injector: Injector,
) {} ) {}
ngOnInit() { ngOnInit() {
@ -95,19 +100,14 @@ export class UsersComponent implements OnInit {
} }
buildForm() { 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.roles = items;
this.form = this.fb.group({ this.form.addControl(
userName: [this.selected.userName || '', [Validators.required, Validators.maxLength(256)]], 'roleNames',
email: [ this.fb.array(
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.roles.map(role => this.roles.map(role =>
this.fb.group({ this.fb.group({
[role.name]: [ [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();
}
}); });
} }

Write Preview
Loading…
Cancel
Save