Fixed issue.

3 days ago · 14eb61b75d
--- a/angular/src/app/modules/custom-identity/custom-roles/custom-roles.component.html
+++ b/angular/src/app/modules/custom-identity/custom-roles/custom-roles.component.html
@ -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>
@ -22,11 +22,11 @@
            <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-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>
  
--- a/angular/src/app/modules/custom-identity/custom-roles/custom-roles.component.ts
+++ b/angular/src/app/modules/custom-identity/custom-roles/custom-roles.component.ts
@ -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,49 +90,97 @@ 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() {
    this.buildForm();
    this.isModalVisible = true;
  }

  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)
    )
      .pipe(finalize(() => (this.modalBusy = false)))
  
    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', {
--- a/angular/src/app/modules/custom-identity/custom-users/custom-users.component.html
+++ b/angular/src/app/modules/custom-identity/custom-users/custom-users.component.html
@ -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>
        
          <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>

              </td>
            </tr>
          </ng-template>
        </p-table>
        
        
      </div>
      <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>
  
    <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
      <ng-template #abpHeader>
        <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : '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>
  
              <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>
  
      <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()">{{
  </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>
  
        }}</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>
--- a/angular/src/app/modules/custom-identity/custom-users/custom-users.component.ts
+++ b/angular/src/app/modules/custom-identity/custom-users/custom-users.component.ts
@ -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,
  //               ],
  //             }),
  //           ),
  //         ),
  //       );
  //     }
  //   });
  // }

  buildForm() {
    debugger
    const data = new FormPropData(this.injector, this.selected);
    this.form = generateFormFromProps(data);
  // 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;
      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]) || [];

    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();
      });
    // 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) {
@ -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(() => {