ranjit/Hospital_Management
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed issue.

Browse Source
This commit is contained in:
Sk Shaifat Murshed 2025-01-31 18:50:30 +05:30
parent ec91f9ee4f
commit 14eb61b75d
4 changed files with 698 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
angular/src/app/modules/custom-identity/custom-roles/custom-roles.component.html
View File

@ -12,7 +12,7 @@
<p-table [value]="data.items" [paginator]="true" [rows]="5" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="name">name <p-sortIcon field="name"></p-sortIcon></th>
<th pSortableColumn="name">Role name <p-sortIcon field="name"></p-sortIcon></th>
<th>Actions</th>
</tr>
@ -26,7 +26,7 @@
<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-external-link" class="p-button-text p-button-success" (click)="openPermissionsModal(role.name)"></button>
<button pButton icon="pi pi-lock" class="p-button-text p-button-success" (click)="openPermissionsModal(role.name)"></button>
</td>
</tr>
@ -40,19 +40,66 @@
<h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
</ng-template>
<ng-template #abpBody>
<!-- <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]="form?.invalid" (click)="save()">{{
<!-- <abp-button iconClass="fa fa-check" [disabled]="roleForm?.invalid" (click)="save()">{{
'AbpIdentity::Save' | abpLocalization
}}</abp-button>
}}</abp-button> -->
</ng-template>
</abp-modal>

79
angular/src/app/modules/custom-identity/custom-roles/custom-roles.component.ts
View File

@ -13,7 +13,7 @@ import {
PagedAndSortedResultRequestDto,
PagedResultDto,
} from '@abp/ng.core';
import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy';
import { IdentityRoleCreateDto, IdentityRoleDto, IdentityRoleService, IdentityRoleUpdateDto } from '@abp/ng.identity/proxy';
import {
ThemeSharedModule,
ConfirmationService,
@ -22,7 +22,7 @@ import {
} from '@abp/ng.theme.shared';
import { CommonModule } from '@angular/common';
import { Component, inject, Injector, OnInit } from '@angular/core';
import { FormsModule, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup, FormsModule, UntypedFormGroup, Validators } from '@angular/forms';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';
import { finalize } from 'rxjs';
@ -31,6 +31,8 @@ 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',
@ -47,7 +49,8 @@ import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
ExtensibleModule,
PermissionManagementModule,
CoreModule,
NgbNavModule
NgbNavModule,
DropdownModule
],
templateUrl: './custom-roles.component.html',
providers: [
@ -87,12 +90,21 @@ export class CustomRolesComponent implements OnInit {
};
ngOnInit() {
this.hookToQuery();
}
// buildForm() {
// const data = new FormPropData(this.injector, this.selected);
// this.form = generateFormFromProps(data);
// }
buildForm() {
const data = new FormPropData(this.injector, this.selected);
this.form = generateFormFromProps(data);
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() {
@ -101,27 +113,64 @@ export class CustomRolesComponent implements OnInit {
}
add() {
this.selected = {} as IdentityRoleDto;
this.openModal();
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.openModal();
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() {
if (!this.form.valid) return;
debugger
if (!this.selected?.name) {
return;
}
this.modalBusy = true;
const { id } = this.selected || {};
(id
? this.service.update(id, { ...this.selected, ...this.form.value })
: this.service.create(this.form.value)
)
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;
@ -130,6 +179,8 @@ export class CustomRolesComponent implements OnInit {
});
}
delete(id: string, name: string) {
this.confirmationService
.warn('AbpIdentity::RoleDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', {

421
angular/src/app/modules/custom-identity/custom-users/custom-users.component.html
View File

@ -8,24 +8,29 @@
</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 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"
@ -33,115 +38,295 @@
[list]="list"
></abp-extensible-table> -->
<p-table [value]="data.items" [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>Status</th>
<th>Actions</th>
</tr>
</ng-template>
<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>
<p-tag [value]="user.isActive ? 'Active' : 'Inactive'" [severity]="user.isActive ? 'success' : 'danger'"></p-tag>
</td>
<td>
<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-external-link" class="p-button-text p-button-success" (click)="openPermissionsModal(user.name,user.name)"></button>
<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"
</td>
</tr>
</ng-template>
</p-table>
>
<li role="menuitem" tabindex="0">
<a
#firstDropdownItem
class="dropdown-item"
href="javascript:;"
(click)="edit(user.id)"
>
Edit
</a>
</li>
</div>
</ul>
</div> -->
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
<ng-template #abpHeader>
<h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
</ng-template>
<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
<ng-template #abpHeader>
<h3>
{{ (selected?.id ? 'AbpIdentity::EditUser' : 'AbpIdentity::NewUser') | abpLocalization }}
</h3>
</ng-template>
<ng-template #abpBody>
@if (form) {
<form [formGroup]="form" (ngSubmit)="save()">
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem>
<a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
<ng-template ngbNavContent>
<abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
</ng-template>
</li>
<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>
<li ngbNavItem>
<a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
<ng-template ngbNavContent>
@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>
</li>
</ul>
<div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
</form>
} @else {
<div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
}
</ng-template>
<!-- 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>
<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()">{{
<!-- 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>
}}</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>

344
angular/src/app/modules/custom-identity/custom-users/custom-users.component.ts
View File

@ -1,29 +1,83 @@
import { FormPropData,EXTENSIONS_IDENTIFIER ,generateFormFromProps, ExtensibleModule} from '@abp/ng.components/extensible';
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 {
CoreModule,
ListResultDto,
ListService,
LocalizationModule,
PagedResultDto,
} from '@abp/ng.core';
import { eIdentityComponents } from '@abp/ng.identity';
import { GetIdentityUsersInput, IdentityRoleDto, IdentityUserDto, IdentityUserService } from '@abp/ng.identity/proxy';
import {
GetIdentityUsersInput,
IdentityRoleDto,
IdentityUserDto,
IdentityUserService,
IdentityUserUpdateDto,
} from '@abp/ng.identity/proxy';
import { CommonModule } from '@angular/common';
import { Component, inject, Injector, OnInit, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
import { AbstractControl, FormsModule, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
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 {
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 {
ePermissionManagementComponents,
PermissionManagementModule,
} from '@abp/ng.permission-management';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
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
imports: [
CommonModule,
FormsModule,
TableModule,
ButtonModule,
PageModule,
LocalizationModule,
ThemeSharedModule,
NgxDatatableModule,
ExtensibleModule,
PermissionManagementModule,
CoreModule,
NgbNavModule,
PaginatorModule,
TagModule,SplitButtonModule
],
templateUrl: './custom-users.component.html',
providers: [
@ -33,15 +87,16 @@ import { TagModule } from 'primeng/tag'; // For active/inactive status
useValue: eIdentityComponents.Users,
},
],
styleUrl: './custom-users.component.scss'
styleUrl: './custom-users.component.scss',
})
export class CustomUsersComponent implements OnInit{
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 };
@ -49,12 +104,13 @@ export class CustomUsersComponent implements OnInit{
modalContent!: TemplateRef<any>;
form!: UntypedFormGroup;
password:string;
selected?: IdentityUserDto;
selectedUserRoles?: IdentityRoleDto[];
roles?: IdentityRoleDto[];
// roles?: IdentityRoleDto[];
roles: (IdentityRoleDto & { selected: boolean })[] = []; // Use intersection type to add 'selected'
visiblePermissions = false;
@ -71,8 +127,32 @@ export class CustomUsersComponent implements OnInit{
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;
};
@ -83,87 +163,189 @@ export class CustomUsersComponent implements OnInit{
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() {
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,
],
}),
),
),
);
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.buildForm();
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() {
debugger
this.selected = {} as IdentityUserDto;
this.selectedUserRoles = [] as IdentityRoleDto[];
this.password = ''; // Store password separately
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();
.pipe(finalize(() => this.buildForm()))
.subscribe(user => {
this.selected = user;
this.service.getRoles(id).subscribe(userRoles => {
this.selectedUserRoles = userRoles.items || [];
});
});
this.openModal();
}
save() {
if (!this.form.valid || this.modalBusy) return;
// Save user data (either create or update)
save(form: NgForm) {
debugger;
if (this.modalBusy || form.invalid) 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]) || [];
// 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
const { id } = this.selected || {};
// Create user payload
(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();
});
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) {
@ -191,17 +373,19 @@ export class CustomUsersComponent implements OnInit{
// 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;
});
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
debugger;
this.providerKey = providerKey;
this.entityDisplayName = entityDisplayName;
setTimeout(() => {