Compare commits
No commits in common. "62a1030bd411262b73e401dc3d5bae6eb20f8092" and "0e14f4e199700d882cada58fd517138fddcf140d" have entirely different histories.
62a1030bd4
...
0e14f4e199
@ -20,7 +20,7 @@
|
||||
"@abp/ng.setting-management": "~9.0.2",
|
||||
"@abp/ng.tenant-management": "~9.0.2",
|
||||
"@abp/ng.theme.lepton-x": "~4.0.3",
|
||||
"@abp/ng.theme.shared": "^9.0.4",
|
||||
"@abp/ng.theme.shared": "~9.0.2",
|
||||
"@angular/animations": "~18.1.0",
|
||||
"@angular/common": "~18.1.0",
|
||||
"@angular/compiler": "~18.1.0",
|
||||
@ -34,7 +34,7 @@
|
||||
"@fullcalendar/core": "^6.1.15",
|
||||
"@fullcalendar/daygrid": "^6.1.15",
|
||||
"@fullcalendar/interaction": "^6.1.15",
|
||||
"@swimlane/ngx-datatable": "^20.1.0", "bootstrap-icons": "~1.8.0",
|
||||
"bootstrap-icons": "~1.8.0",
|
||||
"primeflex": "^3.3.1",
|
||||
"primeicons": "^6.0.1",
|
||||
"primeng": "^17.18.0",
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { CustomUsersComponent } from './modules/custom-identity/custom-users/custom-users.component';
|
||||
import { CustomRolesComponent } from './modules/custom-identity/custom-roles/custom-roles.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
@ -13,12 +11,10 @@ const routes: Routes = [
|
||||
path: 'account',
|
||||
loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()),
|
||||
},
|
||||
{ path: 'identity/users', component: CustomUsersComponent },
|
||||
{ path: 'identity/roles', component: CustomRolesComponent },
|
||||
// {
|
||||
// path: 'identity',
|
||||
// loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy()),
|
||||
// },
|
||||
{
|
||||
path: 'identity',
|
||||
loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy()),
|
||||
},
|
||||
{
|
||||
path: 'tenant-management',
|
||||
loadChildren: () =>
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { IdentityModule } from '@abp/ng.identity';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CustomRolesComponent } from './custom-roles/custom-roles.component';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
CommonModule,
|
||||
IdentityModule,
|
||||
TableModule,
|
||||
ButtonModule,
|
||||
CustomRolesComponent
|
||||
],
|
||||
exports:[
|
||||
CustomRolesComponent
|
||||
]
|
||||
})
|
||||
export class CustomIdentityModule { }
|
||||
@ -1,125 +0,0 @@
|
||||
<abp-page [title]="'AbpIdentity::Roles' | abpLocalization" [toolbar]="data.items">
|
||||
<div id="identity-roles-wrapper" class="card">
|
||||
<div class="card-body">
|
||||
<!-- <abp-extensible-table
|
||||
[data]="data.items"
|
||||
[recordsTotal]="data.totalCount"
|
||||
[list]="list"
|
||||
></abp-extensible-table> -->
|
||||
<div class="flex justify-content-between align-items-center mb-3">
|
||||
<button pButton icon="pi pi-plus" label="Add Roles" class="p-button-success" (click)="add()"></button>
|
||||
</div>
|
||||
<p-table [value]="data.items" [paginator]="true" [rows]="5" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="name">Role name <p-sortIcon field="name"></p-sortIcon></th>
|
||||
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template pTemplate="body" let-role>
|
||||
<tr>
|
||||
<td>{{ role.name }}</td>
|
||||
|
||||
|
||||
<td>
|
||||
<button pButton icon="pi pi-pencil" class="p-button-text p-button-primary" (click)="edit(role.id)"></button>
|
||||
<button pButton icon="pi pi-trash" class="p-button-text p-button-danger" (click)="delete(role.id,role.name)"></button>
|
||||
<button pButton icon="pi pi-lock" class="p-button-text p-button-success" (click)="openPermissionsModal(role.name)"></button>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
|
||||
<ng-template #abpHeader>
|
||||
<h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
|
||||
</ng-template>
|
||||
|
||||
<!-- <ng-template #abpBody>
|
||||
<form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
|
||||
<abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
|
||||
</form>
|
||||
</ng-template> -->
|
||||
|
||||
<ng-template #abpBody>
|
||||
<form #roleForm="ngForm" (ngSubmit)="save()" validateOnSubmit>
|
||||
<!-- Name Field -->
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
[(ngModel)]="selected.name"
|
||||
name="name"
|
||||
required
|
||||
#nameCtrl="ngModel"
|
||||
/>
|
||||
<small class="text-danger" *ngIf="nameCtrl.invalid && nameCtrl.touched">Name is required</small>
|
||||
</div>
|
||||
|
||||
<!-- Is Default Checkbox -->
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="isDefault"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
[(ngModel)]="selected.isDefault"
|
||||
name="isDefault"
|
||||
/>
|
||||
<label for="isDefault" class="form-check-label">Default</label>
|
||||
</div>
|
||||
|
||||
<!-- Is Public Checkbox -->
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="isPublic"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
[(ngModel)]="selected.isPublic"
|
||||
name="isPublic"
|
||||
/>
|
||||
<label for="isPublic" class="form-check-label">Public</label>
|
||||
</div>
|
||||
<br>
|
||||
<abp-button iconClass="fa fa-check" [disabled]="roleForm.invalid" (click)="save()">{{
|
||||
'AbpIdentity::Save' | abpLocalization
|
||||
}}</abp-button>
|
||||
</form>
|
||||
</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]="roleForm?.invalid" (click)="save()">{{
|
||||
'AbpIdentity::Save' | abpLocalization
|
||||
}}</abp-button> -->
|
||||
</ng-template>
|
||||
</abp-modal>
|
||||
|
||||
<abp-permission-management
|
||||
#abpPermissionManagement="abpPermissionManagement"
|
||||
*abpReplaceableTemplate="
|
||||
{
|
||||
inputs: {
|
||||
providerName: { value: 'R' },
|
||||
providerKey: { value: providerKey },
|
||||
visible: { value: visiblePermissions, twoWay: true },
|
||||
hideBadges: { value: true }
|
||||
},
|
||||
outputs: { visibleChange: onVisiblePermissionChange },
|
||||
componentKey: permissionManagementKey
|
||||
};
|
||||
let init = initTemplate
|
||||
"
|
||||
(abpInit)="init(abpPermissionManagement)"
|
||||
>
|
||||
</abp-permission-management>
|
||||
</abp-page>
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CustomRolesComponent } from './custom-roles.component';
|
||||
|
||||
describe('CustomRolesComponent', () => {
|
||||
let component: CustomRolesComponent;
|
||||
let fixture: ComponentFixture<CustomRolesComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CustomRolesComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CustomRolesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,213 +0,0 @@
|
||||
import {
|
||||
ExtensibleModule,
|
||||
EXTENSIONS_IDENTIFIER,
|
||||
FormPropData,
|
||||
generateFormFromProps,
|
||||
} from '@abp/ng.components/extensible';
|
||||
import { PageModule } from '@abp/ng.components/page';
|
||||
import {
|
||||
CoreModule,
|
||||
ListResultDto,
|
||||
ListService,
|
||||
LocalizationModule,
|
||||
PagedAndSortedResultRequestDto,
|
||||
PagedResultDto,
|
||||
} from '@abp/ng.core';
|
||||
import { IdentityRoleCreateDto, IdentityRoleDto, IdentityRoleService, IdentityRoleUpdateDto } from '@abp/ng.identity/proxy';
|
||||
import {
|
||||
ThemeSharedModule,
|
||||
ConfirmationService,
|
||||
ToasterService,
|
||||
Confirmation,
|
||||
} from '@abp/ng.theme.shared';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, inject, Injector, OnInit } from '@angular/core';
|
||||
import { FormControl, FormGroup, FormsModule, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { finalize } from 'rxjs';
|
||||
import { ePermissionManagementComponents } from '@abp/ng.permission-management';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
import { eIdentityComponents } from '@abp/ng.identity';
|
||||
import { PermissionManagementModule } from '@abp/ng.permission-management';
|
||||
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
import { Dropdown, DropdownModule } from 'primeng/dropdown';
|
||||
|
||||
@Component({
|
||||
selector: 'app-custom-roles',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
TableModule,
|
||||
ButtonModule,
|
||||
PageModule,
|
||||
LocalizationModule,
|
||||
ThemeSharedModule,
|
||||
NgxDatatableModule,
|
||||
ExtensibleModule,
|
||||
PermissionManagementModule,
|
||||
CoreModule,
|
||||
NgbNavModule,
|
||||
DropdownModule
|
||||
],
|
||||
templateUrl: './custom-roles.component.html',
|
||||
providers: [
|
||||
ListService,
|
||||
{
|
||||
provide: EXTENSIONS_IDENTIFIER,
|
||||
useValue: eIdentityComponents.Roles,
|
||||
},
|
||||
],
|
||||
styleUrl: './custom-roles.component.scss',
|
||||
})
|
||||
export class CustomRolesComponent implements OnInit {
|
||||
protected readonly list = inject(ListService<PagedAndSortedResultRequestDto>);
|
||||
protected readonly confirmationService = inject(ConfirmationService);
|
||||
protected readonly toasterService = inject(ToasterService);
|
||||
private readonly injector = inject(Injector);
|
||||
protected readonly service = inject(IdentityRoleService);
|
||||
|
||||
data: PagedResultDto<IdentityRoleDto> = { items: [], totalCount: 0 };
|
||||
|
||||
form!: UntypedFormGroup;
|
||||
|
||||
selected?: IdentityRoleDto;
|
||||
|
||||
isModalVisible!: boolean;
|
||||
|
||||
visiblePermissions = false;
|
||||
|
||||
providerKey?: string;
|
||||
|
||||
modalBusy = false;
|
||||
|
||||
permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
|
||||
|
||||
onVisiblePermissionChange = (event: boolean) => {
|
||||
this.visiblePermissions = event;
|
||||
};
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.hookToQuery();
|
||||
}
|
||||
|
||||
// buildForm() {
|
||||
// const data = new FormPropData(this.injector, this.selected);
|
||||
// this.form = generateFormFromProps(data);
|
||||
// }
|
||||
buildForm() {
|
||||
this.form = new FormGroup({
|
||||
name: new FormControl(this.selected?.name || '', Validators.required),
|
||||
isDefault: new FormControl(this.selected?.isDefault || false),
|
||||
isPublic: new FormControl(this.selected?.isPublic || false)
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
openModal() {
|
||||
this.buildForm();
|
||||
this.isModalVisible = true;
|
||||
}
|
||||
|
||||
add() {
|
||||
debugger
|
||||
// this.selected = {} as IdentityRoleDto;
|
||||
// this.openModal();
|
||||
this.selected = { name: '', isDefault: false, isPublic: false } as IdentityRoleDto;
|
||||
this.isModalVisible = true;
|
||||
}
|
||||
|
||||
edit(id: string) {
|
||||
debugger
|
||||
// this.service.get(id).subscribe(res => {
|
||||
// this.selected = res;
|
||||
// this.openModal();
|
||||
// });
|
||||
this.service.get(id).subscribe(res => {
|
||||
this.selected = res;
|
||||
this.isModalVisible = true;
|
||||
});
|
||||
}
|
||||
|
||||
// save() {
|
||||
// debugger
|
||||
// if (!this.form.valid) return;
|
||||
// this.modalBusy = true;
|
||||
|
||||
// const { id } = this.selected || {};
|
||||
// (id
|
||||
// ? this.service.update(id, { ...this.selected, ...this.form.value })
|
||||
// : this.service.create(this.form.value)
|
||||
// )
|
||||
// .pipe(finalize(() => (this.modalBusy = false)))
|
||||
// .subscribe(() => {
|
||||
// this.isModalVisible = false;
|
||||
// this.toasterService.success('AbpUi::SavedSuccessfully');
|
||||
// this.list.get();
|
||||
// });
|
||||
// }
|
||||
save() {
|
||||
debugger
|
||||
if (!this.selected?.name) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.modalBusy = true;
|
||||
|
||||
const { id, name, isDefault, isPublic, concurrencyStamp } = this.selected;
|
||||
|
||||
const roleDto = {
|
||||
name,
|
||||
isDefault,
|
||||
isPublic,
|
||||
concurrencyStamp
|
||||
};
|
||||
|
||||
const saveObservable = id
|
||||
? this.service.update(id, roleDto) // Update call
|
||||
: this.service.create(roleDto); // Create call
|
||||
|
||||
saveObservable
|
||||
.pipe(finalize(() => (this.modalBusy = false)))
|
||||
.subscribe(() => {
|
||||
this.isModalVisible = false;
|
||||
this.toasterService.success('AbpUi::SavedSuccessfully');
|
||||
this.list.get();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
delete(id: string, name: string) {
|
||||
this.confirmationService
|
||||
.warn('AbpIdentity::RoleDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', {
|
||||
messageLocalizationParams: [name],
|
||||
})
|
||||
.subscribe((status: Confirmation.Status) => {
|
||||
if (status === Confirmation.Status.confirm) {
|
||||
this.toasterService.success('AbpUi::DeletedSuccessfully');
|
||||
this.service.delete(id).subscribe(() => this.list.get());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private hookToQuery() {
|
||||
this.list.hookToQuery(query => this.service.getList(query)).subscribe(res => (this.data = res));
|
||||
}
|
||||
|
||||
openPermissionsModal(providerKey: string) {
|
||||
this.providerKey = providerKey;
|
||||
setTimeout(() => {
|
||||
this.visiblePermissions = true;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
sort(data: any) {
|
||||
const { prop, dir } = data.sorts[0];
|
||||
this.list.sortKey = prop;
|
||||
this.list.sortOrder = dir;
|
||||
}
|
||||
}
|
||||
@ -1,332 +0,0 @@
|
||||
<!-- <div>
|
||||
<h3>Total Users: {{ data.totalCount }}</h3>
|
||||
<ul>
|
||||
<li *ngFor="let user of data.items">
|
||||
<strong>{{ user.userName }}</strong> ({{ user.email }})
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
|
||||
<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="flex justify-content-between align-items-center mb-3">
|
||||
<button
|
||||
pButton
|
||||
icon="pi pi-plus"
|
||||
label="Add User"
|
||||
class="p-button-success"
|
||||
(click)="add()"
|
||||
></button>
|
||||
</div>
|
||||
<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> -->
|
||||
<p-table
|
||||
[value]="data.items"
|
||||
[tableStyle]="{ 'min-width': '60rem' }"
|
||||
[paginator]="true"
|
||||
[rows]="5"
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="userName">Username <p-sortIcon field="userName"></p-sortIcon></th>
|
||||
<th pSortableColumn="name">First Name <p-sortIcon field="name"></p-sortIcon></th>
|
||||
<th pSortableColumn="surname">Last Name <p-sortIcon field="surname"></p-sortIcon></th>
|
||||
<th pSortableColumn="email">Email <p-sortIcon field="email"></p-sortIcon></th>
|
||||
<th pSortableColumn="Phone">Phone No <p-sortIcon field="Phone"></p-sortIcon></th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template pTemplate="body" let-user>
|
||||
<tr>
|
||||
<td>{{ user.userName }}</td>
|
||||
<td>{{ user.name }}</td>
|
||||
<td>{{ user.surname }}</td>
|
||||
<td>{{ user.email }}</td>
|
||||
<td>{{ user.phoneNumber }}</td>
|
||||
<td>
|
||||
<p-tag
|
||||
[value]="user.isActive ? 'Active' : 'Inactive'"
|
||||
[severity]="user.isActive ? 'success' : 'danger'"
|
||||
></p-tag>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group" dropdown placement="bottom left" container="body">
|
||||
<p-splitButton
|
||||
label="Actions"
|
||||
icon="pi pi-cog"
|
||||
class="p-button-sm p-button-primary"
|
||||
[model]="actionItems"
|
||||
(onClick)="editUser(user.id)"
|
||||
>
|
||||
</p-splitButton>
|
||||
</div>
|
||||
<!-- <button
|
||||
pButton
|
||||
icon="pi pi-pencil"
|
||||
class="p-button-text p-button-primary"
|
||||
(click)="edit(user.id)"
|
||||
></button>
|
||||
<button
|
||||
pButton
|
||||
icon="pi pi-trash"
|
||||
class="p-button-text p-button-danger"
|
||||
(click)="delete(user.id, user.userName)"
|
||||
></button>
|
||||
<button
|
||||
pButton
|
||||
icon="pi pi-lock"
|
||||
class="p-button-text p-button-success"
|
||||
(click)="openPermissionsModal(user.id, user.userName)"
|
||||
></button> -->
|
||||
<!-- <div class="btn-group" dropdown placement="bottom left" container="body">
|
||||
<button
|
||||
id="dropdownButton"
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm dropdown-toggle"
|
||||
dropdownToggle
|
||||
aria-controls="dropdownMenu"
|
||||
(click)="toggleDropdown()"
|
||||
>
|
||||
<i class="fa fa-cog"></i>
|
||||
<span class="caret"></span>
|
||||
Actions
|
||||
</button>
|
||||
<ul
|
||||
id="dropdownMenu"
|
||||
#dropdownMenu
|
||||
class="dropdown-menu"
|
||||
role="menu"
|
||||
aria-labelledby="dropdownButton"
|
||||
|
||||
>
|
||||
<li role="menuitem" tabindex="0">
|
||||
<a
|
||||
#firstDropdownItem
|
||||
class="dropdown-item"
|
||||
href="javascript:;"
|
||||
(click)="edit(user.id)"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div> -->
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
|
||||
<ng-template #abpHeader>
|
||||
<h3>
|
||||
{{ (selected?.id ? 'AbpIdentity::EditUser' : 'AbpIdentity::NewUser') | abpLocalization }}
|
||||
</h3>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #abpBody>
|
||||
<form #userForm="ngForm" (ngSubmit)="save(userForm)">
|
||||
<!-- User Information Tab -->
|
||||
<ul ngbNav #nav="ngbNav" class="nav-tabs">
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
|
||||
<ng-template ngbNavContent>
|
||||
<div class="form-group">
|
||||
<label for="userName">{{ 'User Name' | abpLocalization }}</label>
|
||||
<input
|
||||
id="userName"
|
||||
type="text"
|
||||
class="form-control"
|
||||
[(ngModel)]="selected.userName"
|
||||
name="userName"
|
||||
required
|
||||
#userName="ngModel"
|
||||
/>
|
||||
<div *ngIf="userName.invalid && userName.touched" class="text-danger">
|
||||
User Name is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="form-group" *ngIf="!selected.id">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
class="form-control"
|
||||
[(ngModel)]="password"
|
||||
name="password"
|
||||
required
|
||||
#passwordField="ngModel"
|
||||
/>
|
||||
<div *ngIf="passwordField.invalid && passwordField.touched" class="text-danger">
|
||||
Password is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Name -->
|
||||
<div class="form-group">
|
||||
<label for="name">{{ 'Name' | abpLocalization }}</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
[(ngModel)]="selected.name"
|
||||
name="name"
|
||||
#name="ngModel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Surname -->
|
||||
<div class="form-group">
|
||||
<label for="surname">{{ 'Surname' | abpLocalization }}</label>
|
||||
<input
|
||||
id="surname"
|
||||
type="text"
|
||||
class="form-control"
|
||||
[(ngModel)]="selected.surname"
|
||||
name="surname"
|
||||
#surname="ngModel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="form-group">
|
||||
<label for="email">{{ 'Email' | abpLocalization }}</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
class="form-control"
|
||||
[(ngModel)]="selected.email"
|
||||
name="email"
|
||||
required
|
||||
#email="ngModel"
|
||||
/>
|
||||
<div *ngIf="email.invalid && email.touched" class="text-danger">
|
||||
Valid Email is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone Number -->
|
||||
<div class="form-group">
|
||||
<label for="phoneNumber">{{ 'Phone Number' | abpLocalization }}</label>
|
||||
<input
|
||||
id="phoneNumber"
|
||||
type="text"
|
||||
class="form-control"
|
||||
[(ngModel)]="selected.phoneNumber"
|
||||
name="phoneNumber"
|
||||
#phoneNumber="ngModel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Active Account (Checkbox) -->
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="isActive"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
[(ngModel)]="selected.isActive"
|
||||
name="isActive"
|
||||
/>
|
||||
<label for="isActive" class="form-check-label">{{
|
||||
'Active' | abpLocalization
|
||||
}}</label>
|
||||
</div>
|
||||
|
||||
<!-- Lockout Enabled (Checkbox) -->
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="lockoutEnabled"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
[(ngModel)]="selected.lockoutEnabled"
|
||||
name="lockoutEnabled"
|
||||
/>
|
||||
<label for="lockoutEnabled" class="form-check-label">{{
|
||||
'Lockout Enabled' | abpLocalization
|
||||
}}</label>
|
||||
</div>
|
||||
</ng-template>
|
||||
</li>
|
||||
|
||||
<!-- Roles Tab -->
|
||||
<li ngbNavItem>
|
||||
<a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
|
||||
<ng-template ngbNavContent>
|
||||
<div *ngFor="let role of roles; let i = index">
|
||||
<div class="form-check mb-2">
|
||||
<label class="form-check-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
[(ngModel)]="role.selected"
|
||||
name="role-{{ i }}"
|
||||
/>
|
||||
{{ role.name }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
|
||||
|
||||
<div class="mt-3">
|
||||
<button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
@ -1,23 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CustomUsersComponent } from './custom-users.component';
|
||||
|
||||
describe('CustomUsersComponent', () => {
|
||||
let component: CustomUsersComponent;
|
||||
let fixture: ComponentFixture<CustomUsersComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CustomUsersComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CustomUsersComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,395 +0,0 @@
|
||||
import {
|
||||
FormPropData,
|
||||
EXTENSIONS_IDENTIFIER,
|
||||
generateFormFromProps,
|
||||
ExtensibleModule,
|
||||
} from '@abp/ng.components/extensible';
|
||||
import { PageModule } from '@abp/ng.components/page';
|
||||
import {
|
||||
CoreModule,
|
||||
ListResultDto,
|
||||
ListService,
|
||||
LocalizationModule,
|
||||
PagedResultDto,
|
||||
} from '@abp/ng.core';
|
||||
import { eIdentityComponents } from '@abp/ng.identity';
|
||||
import {
|
||||
GetIdentityUsersInput,
|
||||
IdentityRoleDto,
|
||||
IdentityUserDto,
|
||||
IdentityUserService,
|
||||
IdentityUserUpdateDto,
|
||||
} from '@abp/ng.identity/proxy';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
Component,
|
||||
ElementRef,
|
||||
HostListener,
|
||||
inject,
|
||||
Injector,
|
||||
OnInit,
|
||||
TemplateRef,
|
||||
TrackByFunction,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
AbstractControl,
|
||||
FormsModule,
|
||||
NgForm,
|
||||
UntypedFormArray,
|
||||
UntypedFormBuilder,
|
||||
UntypedFormGroup,
|
||||
} from '@angular/forms';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import {
|
||||
Confirmation,
|
||||
eFormComponets,
|
||||
ThemeSharedModule,
|
||||
ToasterService,
|
||||
ConfirmationService,
|
||||
} from '@abp/ng.theme.shared';
|
||||
import { finalize, switchMap, tap } from 'rxjs';
|
||||
import {
|
||||
ePermissionManagementComponents,
|
||||
PermissionManagementModule,
|
||||
} from '@abp/ng.permission-management';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { PaginatorModule } from 'primeng/paginator';
|
||||
import { TagModule } from 'primeng/tag'; // For active/inactive status
|
||||
import { SplitButtonModule } from 'primeng/splitbutton';
|
||||
|
||||
@Component({
|
||||
selector: 'app-custom-users',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
TableModule,
|
||||
ButtonModule,
|
||||
PageModule,
|
||||
LocalizationModule,
|
||||
ThemeSharedModule,
|
||||
NgxDatatableModule,
|
||||
ExtensibleModule,
|
||||
PermissionManagementModule,
|
||||
CoreModule,
|
||||
NgbNavModule,
|
||||
PaginatorModule,
|
||||
TagModule,SplitButtonModule
|
||||
],
|
||||
templateUrl: './custom-users.component.html',
|
||||
providers: [
|
||||
ListService,
|
||||
{
|
||||
provide: EXTENSIONS_IDENTIFIER,
|
||||
useValue: eIdentityComponents.Users,
|
||||
},
|
||||
],
|
||||
styleUrl: './custom-users.component.scss',
|
||||
})
|
||||
export class CustomUsersComponent implements OnInit {
|
||||
protected readonly list = inject(ListService<GetIdentityUsersInput>);
|
||||
protected readonly confirmationService = inject(ConfirmationService);
|
||||
protected readonly service = inject(IdentityUserService);
|
||||
protected readonly toasterService = inject(ToasterService);
|
||||
private readonly fb = inject(UntypedFormBuilder);
|
||||
private readonly injector = inject(Injector);
|
||||
@ViewChild('firstDropdownItem') firstDropdownItem: ElementRef;
|
||||
|
||||
data: PagedResultDto<IdentityUserDto> = { items: [], totalCount: 0 };
|
||||
|
||||
@ViewChild('modalContent', { static: false })
|
||||
modalContent!: TemplateRef<any>;
|
||||
|
||||
form!: UntypedFormGroup;
|
||||
password:string;
|
||||
selected?: IdentityUserDto;
|
||||
|
||||
selectedUserRoles?: IdentityRoleDto[];
|
||||
|
||||
// roles?: IdentityRoleDto[];
|
||||
roles: (IdentityRoleDto & { selected: boolean })[] = []; // Use intersection type to add 'selected'
|
||||
|
||||
visiblePermissions = false;
|
||||
|
||||
providerKey?: string;
|
||||
|
||||
isModalVisible?: boolean;
|
||||
|
||||
modalBusy = false;
|
||||
|
||||
permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
|
||||
|
||||
entityDisplayName: string;
|
||||
|
||||
inputKey = eFormComponets.FormCheckboxComponent;
|
||||
|
||||
trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
|
||||
isDropdownOpen = false;
|
||||
|
||||
toggleDropdown() {
|
||||
this.isDropdownOpen = !this.isDropdownOpen;
|
||||
|
||||
// After the dropdown is shown, focus the first item in the dropdown
|
||||
setTimeout(() => {
|
||||
if (this.firstDropdownItem) {
|
||||
this.firstDropdownItem.nativeElement.focus();
|
||||
}
|
||||
}, 100); // Delay to ensure dropdown is rendered
|
||||
}
|
||||
|
||||
closeDropdown() {
|
||||
this.isDropdownOpen = false;
|
||||
}
|
||||
actionItems = [
|
||||
{ label: 'Edit', icon: 'pi pi-pencil', command: () => this.edit("") },
|
||||
{ label: 'Delete', icon: 'pi pi-trash', command: () => this.delete("","") },
|
||||
// { label: 'Permissions', icon: 'pi pi-shield', command: () => this.openPermissionsModal("") },
|
||||
];
|
||||
|
||||
|
||||
|
||||
onVisiblePermissionChange = (event: boolean) => {
|
||||
debugger
|
||||
this.visiblePermissions = event;
|
||||
};
|
||||
|
||||
get roleGroups(): UntypedFormGroup[] {
|
||||
return ((this.form.get('roleNames') as UntypedFormArray)?.controls as UntypedFormGroup[]) || [];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.hookToQuery();
|
||||
}
|
||||
formValid() {
|
||||
return true;
|
||||
}
|
||||
// buildForm() {
|
||||
// debugger
|
||||
// const data = new FormPropData(this.injector, this.selected);
|
||||
// this.form = generateFormFromProps(data);
|
||||
|
||||
// this.service.getAssignableRoles().subscribe(({ items }) => {
|
||||
// this.roles = items;
|
||||
// if (this.roles) {
|
||||
// this.form.addControl(
|
||||
// 'roleNames',
|
||||
// this.fb.array(
|
||||
// this.roles.map(role =>
|
||||
// this.fb.group({
|
||||
// [role.name as string]: [
|
||||
// this.selected?.id
|
||||
// ? !!this.selectedUserRoles?.find(userRole => userRole.id === role.id)
|
||||
// : role.isDefault,
|
||||
// ],
|
||||
// }),
|
||||
// ),
|
||||
// ),
|
||||
// );
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// openModal() {
|
||||
// this.buildForm();
|
||||
// this.isModalVisible = true;
|
||||
// }
|
||||
|
||||
// add() {
|
||||
// debugger
|
||||
// this.selected = {} as IdentityUserDto;
|
||||
// this.selectedUserRoles = [] as IdentityRoleDto[];
|
||||
// this.openModal();
|
||||
// }
|
||||
|
||||
// edit(id: string) {
|
||||
// debugger
|
||||
// this.service
|
||||
// .get(id)
|
||||
// .pipe(
|
||||
// tap(user => (this.selected = user)),
|
||||
// switchMap(() => this.service.getRoles(id)),
|
||||
// )
|
||||
// .subscribe(userRole => {
|
||||
// debugger
|
||||
|
||||
// this.selectedUserRoles = userRole.items || [];
|
||||
// this.openModal();
|
||||
// });
|
||||
// }
|
||||
|
||||
// save() {
|
||||
// if (!this.form.valid || this.modalBusy) return;
|
||||
// this.modalBusy = true;
|
||||
|
||||
// const { roleNames = [] } = this.form.value;
|
||||
// const mappedRoleNames =
|
||||
// roleNames
|
||||
// .filter((role: { [key: string]: any }) => !!role[Object.keys(role)[0]])
|
||||
// .map((role: { [key: string]: any }) => Object.keys(role)[0]) || [];
|
||||
|
||||
// const { id } = this.selected || {};
|
||||
|
||||
// (id
|
||||
// ? this.service.update(id, {
|
||||
// ...this.selected,
|
||||
// ...this.form.value,
|
||||
// roleNames: mappedRoleNames,
|
||||
// })
|
||||
// : this.service.create({ ...this.form.value, roleNames: mappedRoleNames })
|
||||
// )
|
||||
// .pipe(finalize(() => (this.modalBusy = false)))
|
||||
// .subscribe(() => {
|
||||
// this.isModalVisible = false;
|
||||
// this.toasterService.success('AbpUi::SavedSuccessfully');
|
||||
// this.list.get();
|
||||
// });
|
||||
// }
|
||||
buildForm() {
|
||||
this.service.getAssignableRoles().subscribe(({ items }) => {
|
||||
this.roles = items.map(role => ({
|
||||
...role,
|
||||
selected: this.selectedUserRoles.some(userRole => userRole.id === role.id),
|
||||
}));
|
||||
|
||||
// Initialize the selected roles based on existing data for selected user
|
||||
if (this.selected?.id) {
|
||||
this.roles.forEach(role => {
|
||||
role.selected = this.selectedUserRoles.some(userRole => userRole.id === role.id);
|
||||
});
|
||||
} else {
|
||||
// Default values when creating a new user
|
||||
this.roles.forEach(role => {
|
||||
role.selected = role.isDefault;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openModal() {
|
||||
this.loadRoles(); // Load roles when modal opens
|
||||
this.isModalVisible = true;
|
||||
}
|
||||
loadRoles() {
|
||||
this.service.getAssignableRoles().subscribe(({ items }) => {
|
||||
this.roles = items.map(role => ({
|
||||
...role, // spread IdentityRoleDto properties
|
||||
selected: false, // Initially no role is selected
|
||||
}));
|
||||
});
|
||||
}
|
||||
add() {
|
||||
this.selected = {} as IdentityUserDto;
|
||||
this.selectedUserRoles = [] as IdentityRoleDto[];
|
||||
this.password = ''; // Store password separately
|
||||
|
||||
this.openModal();
|
||||
}
|
||||
|
||||
edit(id: string) {
|
||||
this.service
|
||||
.get(id)
|
||||
.pipe(finalize(() => this.buildForm()))
|
||||
.subscribe(user => {
|
||||
this.selected = user;
|
||||
this.service.getRoles(id).subscribe(userRoles => {
|
||||
this.selectedUserRoles = userRoles.items || [];
|
||||
});
|
||||
});
|
||||
this.openModal();
|
||||
}
|
||||
|
||||
// Save user data (either create or update)
|
||||
save(form: NgForm) {
|
||||
debugger;
|
||||
if (this.modalBusy || form.invalid) return;
|
||||
|
||||
this.modalBusy = true;
|
||||
|
||||
// Prepare roleNames array
|
||||
// Prepare roleNames array
|
||||
const selectedRoleNames = this.roles
|
||||
.filter(role => role.selected) // Only include selected roles
|
||||
.map(role => role.name); // Extract role names
|
||||
|
||||
// Create user payload
|
||||
|
||||
const userPayload: any = {
|
||||
userName: this.selected.userName,
|
||||
name: this.selected.name,
|
||||
surname: this.selected.surname,
|
||||
email: this.selected.email,
|
||||
phoneNumber: this.selected.phoneNumber,
|
||||
isActive: this.selected.isActive,
|
||||
lockoutEnabled: this.selected.lockoutEnabled,
|
||||
roleNames: selectedRoleNames, // Include selected roles
|
||||
|
||||
};
|
||||
|
||||
// Only include password if creating a new user
|
||||
if (!this.selected.id && this.password) {
|
||||
userPayload.password = this.password;
|
||||
}
|
||||
// Handle create or update
|
||||
const saveObservable = this.selected.id
|
||||
? this.service.update(this.selected.id, userPayload) // Update if id exists
|
||||
: this.service.create(userPayload); // Create if no id
|
||||
|
||||
saveObservable.pipe(finalize(() => (this.modalBusy = false))).subscribe(() => {
|
||||
this.isModalVisible = false;
|
||||
this.toasterService.success('AbpUi::SavedSuccessfully');
|
||||
this.list.get(); // Reload the list if needed
|
||||
});
|
||||
}
|
||||
|
||||
private getRoleNames() {
|
||||
return this.roles.filter(role => role.selected).map(role => role.name);
|
||||
}
|
||||
|
||||
delete(id: string, userName: string) {
|
||||
this.confirmationService
|
||||
.warn('AbpIdentity::UserDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', {
|
||||
messageLocalizationParams: [userName],
|
||||
})
|
||||
.subscribe((status: Confirmation.Status) => {
|
||||
if (status === Confirmation.Status.confirm) {
|
||||
this.service.delete(id).subscribe(() => {
|
||||
this.toasterService.success('AbpUi::DeletedSuccessfully');
|
||||
this.list.get();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
sort(data: any) {
|
||||
const { prop, dir } = data.sorts[0];
|
||||
this.list.sortKey = prop;
|
||||
this.list.sortOrder = dir;
|
||||
}
|
||||
|
||||
// private hookToQuery() {
|
||||
// this.list.hookToQuery(query => this.service.getList(query)).subscribe(res => (this.data = res));
|
||||
// }
|
||||
private hookToQuery() {
|
||||
this.list
|
||||
.hookToQuery(query => {
|
||||
console.log('Query:', query); // Log the query
|
||||
return this.service.getList(query);
|
||||
})
|
||||
.subscribe(res => {
|
||||
debugger;
|
||||
this.data = res;
|
||||
});
|
||||
}
|
||||
|
||||
openPermissionsModal(providerKey: string, entityDisplayName?: string) {
|
||||
debugger;
|
||||
this.providerKey = providerKey;
|
||||
this.entityDisplayName = entityDisplayName;
|
||||
setTimeout(() => {
|
||||
this.visiblePermissions = true;
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,6 @@ export const APP_ROUTE_PROVIDER = [
|
||||
|
||||
function configureRoutes(routesService: RoutesService) {
|
||||
return () => {
|
||||
|
||||
routesService.add([
|
||||
{
|
||||
path: '/',
|
||||
@ -16,7 +15,6 @@ function configureRoutes(routesService: RoutesService) {
|
||||
order: 1,
|
||||
layout: eLayoutType.application,
|
||||
},
|
||||
|
||||
{
|
||||
path: '/appointment',
|
||||
name: 'Appointments',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user