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

feature(identity): add abpSort pipe

pull/1866/head
TheDiaval 7 years ago
parent
4fa105bb77
commit
d78000144e
4 changed files with 71 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
  2. 36
      npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
  3. 18
      npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
  4. 50
      npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

8
npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
View File

@ -24,7 +24,7 @@
</div>
<p-table
*ngIf="[130, 200] as columnWidths"
[value]="data$ | async"
[value]="data$ | async | abpSort: sortOrder:sortKey"
[lazy]="true"
[lazyLoadOnInit]="false"
[paginator]="true"
@ -51,11 +51,9 @@
<ng-template pTemplate="header" let-columns>
<tr>
<th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
<th pResizableColumn (click)="changeSortOrder()">
<th pResizableColumn (click)="sortByKey('name')">
{{ 'AbpIdentity::RoleName' | abpLocalization }}
<span class="float-right"
><i [ngClass]="['fa', sortOrder === 'desc' ? 'fa-sort-desc' : 'fa-sort-asc']"></i
></span>
<abp-sort-order-icon key="name" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
</th>
</tr>
</ng-template>

36
npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
View File

@ -11,7 +11,7 @@ import { IdentityState } from '../../states/identity.state';
@Component({
selector: 'abp-roles',
templateUrl: './roles.component.html'
templateUrl: './roles.component.html',
})
export class RolesComponent {
@Select(IdentityState.getRoles)
@ -30,15 +30,15 @@ export class RolesComponent {
providerKey: string;
pageQuery: ABP.PageQueryParams = {
sorting: 'name'
};
pageQuery: ABP.PageQueryParams = {};
loading = false;
modalBusy = false;
sortOrder = 'asc';
sortOrder: string = '';
sortKey: string = '';
@ViewChild('modalContent', { static: false })
modalContent: TemplateRef<any>;
@ -54,10 +54,10 @@ export class RolesComponent {
this.form = this.fb.group({
name: new FormControl({ value: this.selected.name || '', disabled: this.selected.isStatic }, [
Validators.required,
Validators.maxLength(256)
Validators.maxLength(256),
]),
isDefault: [this.selected.isDefault || false],
isPublic: [this.selected.isPublic || false]
isPublic: [this.selected.isPublic || false],
});
}
@ -89,7 +89,7 @@ export class RolesComponent {
.dispatch(
this.selected.id
? new UpdateRole({ ...this.form.value, id: this.selected.id })
: new CreateRole(this.form.value)
: new CreateRole(this.form.value),
)
.subscribe(() => {
this.modalBusy = false;
@ -100,7 +100,7 @@ export class RolesComponent {
delete(id: string, name: string) {
this.confirmationService
.warn('AbpIdentity::RoleDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', {
messageLocalizationParams: [name]
messageLocalizationParams: [name],
})
.subscribe((status: Toaster.Status) => {
if (status === Toaster.Status.confirm) {
@ -124,7 +124,21 @@ export class RolesComponent {
.subscribe();
}
changeSortOrder() {
this.sortOrder = this.sortOrder.toLowerCase() === 'asc' ? 'desc' : 'asc';
sortByKey(sortKey: string) {
this.sortKey = sortKey;
switch (this.sortOrder) {
case '':
this.sortOrder = 'asc';
break;
case 'asc':
this.sortOrder = 'desc';
break;
case 'desc':
this.sortOrder = '';
this.sortKey = '';
break;
default:
break;
}
}
}

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

@ -30,7 +30,7 @@
</div>
<p-table
*ngIf="[130, 200, 200, 200] as columnWidths"
[value]="data$ | async"
[value]="data$ | async | abpSort: sortOrder:sortKey"
[lazy]="true"
[lazyLoadOnInit]="false"
[paginator]="true"
@ -57,14 +57,18 @@
<ng-template pTemplate="header">
<tr>
<th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
<th pResizableColumn (click)="changeSortOrder()">
<th pResizableColumn (click)="sortByKey('userName')">
{{ 'AbpIdentity::UserName' | abpLocalization }}
<span class="float-right"
><i [ngClass]="['fa', sortOrder === 'desc' ? 'fa-sort-desc' : 'fa-sort-asc']"></i
></span>
<abp-sort-order-icon key="userName" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
</th>
<th pResizableColumn (click)="sortByKey('email')">
{{ 'AbpIdentity::EmailAddress' | abpLocalization }}
<abp-sort-order-icon key="email" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
</th>
<th pResizableColumn (click)="sortByKey('phoneNumber')">
{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}
<abp-sort-order-icon key="phoneNumber" [selectedKey]="sortKey" [order]="sortOrder"></abp-sort-order-icon>
</th>
<th pResizableColumn>{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</th>
<th pResizableColumn>{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-data>

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

@ -12,13 +12,13 @@ import {
GetUserById,
GetUserRoles,
GetUsers,
UpdateUser
UpdateUser,
} from '../../actions/identity.actions';
import { Identity } from '../../models/identity';
import { IdentityState } from '../../states/identity.state';
@Component({
selector: 'abp-users',
templateUrl: './users.component.html'
templateUrl: './users.component.html',
})
export class UsersComponent {
@Select(IdentityState.getUsers)
@ -42,9 +42,7 @@ export class UsersComponent {
providerKey: string;
pageQuery: ABP.PageQueryParams = {
sorting: 'userName'
};
pageQuery: ABP.PageQueryParams = {};
isModalVisible: boolean;
@ -52,7 +50,9 @@ export class UsersComponent {
modalBusy = false;
sortOrder = 'asc';
sortOrder: string = '';
sortKey: string = '';
trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
@ -80,10 +80,10 @@ export class UsersComponent {
roleNames: this.fb.array(
this.roles.map(role =>
this.fb.group({
[role.name]: [!!snq(() => this.selectedUserRoles.find(userRole => userRole.id === role.id))]
})
)
)
[role.name]: [!!snq(() => this.selectedUserRoles.find(userRole => userRole.id === role.id))],
}),
),
),
});
if (!this.selected.userName) {
this.form.addControl('password', new FormControl('', [Validators.required, Validators.maxLength(32)]));
@ -107,7 +107,7 @@ export class UsersComponent {
.pipe(
switchMap(() => this.store.dispatch(new GetUserRoles(id))),
pluck('IdentityState'),
take(1)
take(1),
)
.subscribe((state: Identity.State) => {
this.selected = state.selectedUser;
@ -123,7 +123,7 @@ export class UsersComponent {
const { roleNames } = this.form.value;
const mappedRoleNames = snq(
() => roleNames.filter(role => !!role[Object.keys(role)[0]]).map(role => Object.keys(role)[0]),
[]
[],
);
this.store
@ -132,12 +132,12 @@ export class UsersComponent {
? new UpdateUser({
...this.form.value,
id: this.selected.id,
roleNames: mappedRoleNames
roleNames: mappedRoleNames,
})
: new CreateUser({
...this.form.value,
roleNames: mappedRoleNames
})
roleNames: mappedRoleNames,
}),
)
.subscribe(() => {
this.modalBusy = false;
@ -148,7 +148,7 @@ export class UsersComponent {
delete(id: string, userName: string) {
this.confirmationService
.warn('AbpIdentity::UserDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', {
messageLocalizationParams: [userName]
messageLocalizationParams: [userName],
})
.subscribe((status: Toaster.Status) => {
if (status === Toaster.Status.confirm) {
@ -172,7 +172,21 @@ export class UsersComponent {
.subscribe();
}
changeSortOrder() {
this.sortOrder = this.sortOrder.toLowerCase() === 'asc' ? 'desc' : 'asc';
sortByKey(sortKey: string) {
this.sortKey = sortKey;
switch (this.sortOrder) {
case '':
this.sortOrder = 'asc';
break;
case 'asc':
this.sortOrder = 'desc';
break;
case 'desc':
this.sortOrder = '';
this.sortKey = '';
break;
default:
break;
}
}
}

Write Preview
Loading…
Cancel
Save