Fixed issue.

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>
   

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', {

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>

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(() => {