Open Closed

Use user first name and last name on the menu profile instead of user name in ABPUSer table #5889

User avatar
0
madklm_16 created

ABP Framework version: v7.2.2

UI Type: Angular

Database System: EF Core (SQL Server)

Tiered (for MVC) or Auth Server Separated (for Angular): no

Exception message and full stack trace:

Steps to reproduce the issue:

We would like to override the user name displayed on the profile menu to use the first name and the last name of the user , instead of the user name . What is the best way to override it

Go to accepted answer
6 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Is the menu angular or mvc page?

  • User Avatar
    0
    madklm_16 created

    Hi this is angular

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Thanks. I will forward to angular team.

  • User Avatar
    0
    masum.ulu created
    Support Team Angular Developer

    Hello,

    You can use UserProfileService from @volo/ngx-lepton-x.core package for the patch userName property but it's not a good way

    Example

    import { Component, inject } from '@angular/core';
import { UserProfileService } from '@volo/ngx-lepton-x.core';

@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar></abp-loader-bar>
    <abp-dynamic-layout></abp-dynamic-layout>
    <abp-gdpr-cookie-consent></abp-gdpr-cookie-consent>
  `,
})
export class AppComponent {
  protected readonly userProfileService = inject(UserProfileService);

  constructor() {
    this.userProfileService.patchUser({
      userName: 'Masum ULU',
    });
  }
}

    2.Way

    You can extend toolbar-container and toolbar component and customize template

    Step 1 (Create extended ToolbarContainerComponent)

    import { Component } from '@angular/core';
import { AsyncPipe, NgFor, NgIf } from '@angular/common';
import {
  LpxCoreModule,
  LpxNavbarModule,
  LpxAvatarModule,
  LpxClickOutsideModule,
} from '@volo/ngx-lepton-x.core';
import { LpxContextMenuModule } from '@volosoft/ngx-lepton-x';
import { ToolbarContainerComponent } from '@volosoft/ngx-lepton-x/layouts';
import { MyToolbarComponent } from './toolbar.component';

@Component({
  standalone: true,
  selector: 'app-toolbar-container',
  template: `
    <lpx-toolbar [profileRef]="profileRef$" (profileClick)="toggleCtxMenu()">
      <ng-container
        *ngIf="{
          user: userProfileService.user$ | async,
          profileRef: profileRef$ | async
        } as data"
      >
        <lpx-context-menu
          *ngIf="data.profileRef"
          #menu="lpx-context-menu"
          (lpxClickOutside)="menu.close()"
          [exceptedRefs]="[data.profileRef]"
        >
          <lpx-context-menu-header>
            <div class="lpx-user-ctx-header">
              <div class="lpx-user-ctx-img">
                <lpx-avatar [avatar]="data.user?.avatar"></lpx-avatar>
              </div>
              <div class="lpx-user-ctx-info">
                <span class="lpx-context-menu-user-name">{{
                  data.user?.fullName || data.user?.userName
                }}</span>
                <span
                  *ngIf="data.user?.tenant?.name as tenantName"
                  class="lpx-context-menu-user-tenant"
                >
                  {{ tenantName }}
                </span>
                <span class="lpx-context-menu-user-email">{{ data.user?.email }}</span>
              </div>
            </div>
          </lpx-context-menu-header>

          <ng-container *ngFor="let actions of data.user?.userActionGroups">
            <lpx-context-menu-action-group>
              <lpx-navbar-routes [navbarItems]="actions" [routerItem]="false"></lpx-navbar-routes>
            </lpx-context-menu-action-group>
          </ng-container>
        </lpx-context-menu>
      </ng-container>
    </lpx-toolbar>
  `,
  imports: [
    NgIf,
    NgFor,
    AsyncPipe,
    LpxAvatarModule,
    LpxClickOutsideModule,
    LpxContextMenuModule,
    LpxCoreModule,
    LpxNavbarModule,
    MyToolbarComponent,
  ],
})
export class MyToolbarContainerComponent extends ToolbarContainerComponent {}

    Step 2 (Create extended ToolbarComponent)

    import { Component, ViewEncapsulation } from '@angular/core';
import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
import { LpxAvatarModule } from '@volo/ngx-lepton-x.core';
import { ToolbarComponent, LpxToolbarModule } from '@volosoft/ngx-lepton-x/layouts';

@Component({
  selector: 'lpx-toolbar',
  standalone: true,
  template: `
    <div class="lpx-toolbar">
      <ng-container *ngIf="userProfileService.user$ | async as user">
        <ng-content></ng-content>
        <nav class="lpx-toolbar">
          <ul class="lpx-nav-menu">
            <li
              *ngIf="authService.isUserExists$ | async; else loginBlock"
              #profileLink
              class="outer-menu-item lpx-user-menu"
              (click)="profileClick.emit()"
            >
              <a class="lpx-menu-item-link">
                <lpx-avatar [avatar]="user.avatar"></lpx-avatar>
                <!--UPDATE HERE-->
                <span class="lpx-menu-item-text">{{ user.fullName || user.userName }}</span>
                <!--UPDATE HERE-->
              </a>
            </li>
            <ng-template #loginBlock>
              <li class="outer-menu-item lpx-user-menu text-center">
                <a class="lpx-menu-item-link" (click)="navigateToLogin()">
                  <i class="bi bi-box-arrow-right"></i>
                </a>
              </li>
            </ng-template>
          </ul>

          <ng-container
            *ngTemplateOutlet="
              itemsTmp || defaultItemsTmp;
              context: { $implicit: toolbarService.items$ | async }
            "
          ></ng-container>
        </nav>
      </ng-container>
      <ng-template #defaultItemsTmp let-items>
        <lpx-toolbar-items [items]="items"></lpx-toolbar-items>
      </ng-template>
    </div>
  `,
  imports: [NgIf, AsyncPipe, NgTemplateOutlet, LpxAvatarModule, LpxToolbarModule],
  encapsulation: ViewEncapsulation.None,
})
export class MyToolbarComponent extends ToolbarComponent {}

    Step 3 (Replace component in app.component.ts)

    import { Component, inject } from '@angular/core';
import { ReplaceableComponentsService } from '@abp/ng.core';
import { eThemeLeptonXComponents } from '@volosoft/abp.ng.theme.lepton-x';
import { MyToolbarContainerComponent } from './lepton-x/components/toolbar/toolbar-container.component';

@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar></abp-loader-bar>
    <abp-dynamic-layout></abp-dynamic-layout>
    <abp-gdpr-cookie-consent></abp-gdpr-cookie-consent>
  `,
})
export class AppComponent {
  protected readonly replaceableService = inject(ReplaceableComponentsService);

  constructor() {
    this.replaceableService.add({
      key: eThemeLeptonXComponents.Toolbar,
      component: MyToolbarContainerComponent,
    });
  }
}
  • User Avatar
    0
    madklm_16 created

    I dont want to patch the user name property, I want to show a different property in there , instead of user name

  • User Avatar
    0
    masum.ulu created
    Support Team Angular Developer

    I dont want to patch the user name property, I want to show a different property in there , instead of user name

    Then you need to follow my 2.Way description. In that way you will be customize toolbar component

Assignee
User avatar masum.ulu
Labels
ui-angular
Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11