How to Add route or component inside profile menu in navbar #1925

0

kaustubh.kale@ness.com created 2 years ago

Hi Team

Any Update On Above

0

kaustubh.kale@ness.com created 2 years ago

Hi Team

Kindly Give Update on above issue .Its required on urgent basis.

0

Mehmet created 2 years ago

Hi,

You need to replace the current user component to achieve this Follow the steps below to replace:

Create a module:

yarn ng generate module current-user --module app

Create a component:

yarn ng generate component current-user --export

Replace the generated current user module content with the following:

import { CoreModule } from '@abp/ng.core';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { ThemeLeptonModule } from '@volo/abp.ng.theme.lepton';
import { CurrentUserComponent } from './current-user.component';

@NgModule({
  declarations: [CurrentUserComponent],
  imports: [CommonModule, ThemeLeptonModule, CoreModule, NgbDropdownModule],
  exports: [CurrentUserComponent],
})
export class CurrentUserModule {}

Replace the generated current-user.component.ts with the following:

import {
  AuthService,
  ConfigStateService,
  EnvironmentService,
  NAVIGATE_TO_MANAGE_PROFILE,
  SessionStateService,
} from '@abp/ng.core';
import { Component, Inject, Optional } from '@angular/core';
import {
  NAVIGATE_TO_MY_SECURITY_LOGS,
  OPEN_MY_LINK_USERS_MODAL,
} from '@volo/abp.commercial.ng.ui/config';
import { eThemeLeptonComponents } from '@volo/abp.ng.theme.lepton';

@Component({
  selector: 'app-current-user',
  templateUrl: 'current-user.component.html',
})
export class CurrentUserComponent {
  currentUser$ = this.configState.getOne$('currentUser');

  selectedTenant$ = this.sessionState.getTenant$();

  currentUserImageComponentKey = eThemeLeptonComponents.CurrentUserImage;

  get smallScreen(): boolean {
    return window.innerWidth < 992;
  }

  get issuer() {
    return this.environment.getEnvironment().oAuthConfig.issuer;
  }

  constructor(
    @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile,
    @Inject(NAVIGATE_TO_MY_SECURITY_LOGS) public navigateToMySecurityLogs,
    @Optional() @Inject(OPEN_MY_LINK_USERS_MODAL) public openMyLinkUsersModal,
    private authService: AuthService,
    private sessionState: SessionStateService,
    private configState: ConfigStateService,
    private environment: EnvironmentService,
  ) {}

  navigateToLogin() {
    this.authService.navigateToLogin();
  }

  logout() {
    this.authService.logout().subscribe();
  }
}

Replace the generated current-user.component.html with the following:

<ng-container *ngIf="currentUser$ | async as user">
  <ng-template #loginBtn>
    <a role="button" class="btn" (click)="navigateToLogin()">
      <i class="fas fa-sign-in-alt mr-1"></i>
      {{ 'AbpAccount::Login' | abpLocalization }}</a
    >
  </ng-template>
  <div *ngIf="user.isAuthenticated; else loginBtn" class="dropdown btn-group" ngbDropdown>
    <a ngbDropdownToggle class="btn pointer d-flex">
      <abp-current-user-image
        *abpReplaceableTemplate="{
          componentKey: currentUserImageComponentKey,
          inputs: { currentUser: { value: user }, classes: { value: 'user-avatar' } }
        }"
        classes="user-avatar"
      ></abp-current-user-image>
      <span class="ml-1">
        <small *ngIf="(selectedTenant$ | async)?.name as tenantName"
          ><i>{{ tenantName }}</i
          >\</small
        >
        <span>{{ user.userName }}</span>
      </span>
    </a>
    <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
      <div class="p-2 row">
        <div class="pr-0 col col-auto">
          <abp-current-user-image
            *abpReplaceableTemplate="{
              componentKey: currentUserImageComponentKey,
              inputs: { currentUser: { value: user }, classes: { value: 'user-avatar-big' } }
            }"
            classes="user-avatar-big"
          ></abp-current-user-image>
        </div>
        <div class="pl-2 col">
          <span>{{ 'AbpAccount::Welcome' | abpLocalization }}</span
          ><br />
          <small *ngIf="(selectedTenant$ | async)?.name as tenantName"
            ><i>{{ tenantName }}</i
            >\</small
          >
          <strong>{{
            ((user.name || '') + ' ' + (user.surName || '')).trim() || user.userName
          }}</strong>
        </div>
      </div>
      <div class="dropdown-divider"></div>
      <a
        *ngIf="openMyLinkUsersModal"
        class="dropdown-item pointer"
        (click)="openMyLinkUsersModal()"
        >{{ 'AbpAccount::LinkedAccounts' | abpLocalization }}</a
      >
      <a class="dropdown-item pointer" (click)="navigateToManageProfile()">{{
        'AbpAccount::MyAccount' | abpLocalization
      }}</a>
      <a class="dropdown-item pointer" (click)="navigateToMySecurityLogs()">{{
        'AbpAccount::MySecurityLogs' | abpLocalization
      }}</a>   
      <a class="dropdown-item pointer" id="logout" (click)="logout()">{{
        'AbpUi::Logout' | abpLocalization
      }}</a>
    </div>
  </div>
</ng-container>

Replace the current user component like this:

import { NavItemsService } from '@abp/ng.theme.shared';
import { Component } from '@angular/core';
import { eThemeLeptonComponents } from '@volo/abp.ng.theme.lepton';
import { CurrentUserComponent } from './current-user/current-user.component';

@Component({
  selector: 'app-root',
  template: `
    &lt;abp-loader-bar&gt;&lt;/abp-loader-bar&gt;
    &lt;abp-dynamic-layout&gt;&lt;/abp-dynamic-layout&gt;
  `,
})
export class AppComponent {
  constructor(private navItems: NavItemsService) {
    this.navItems.patchItem(eThemeLeptonComponents.CurrentUser, {
      component: CurrentUserComponent,
    });
  }
}

After the replacement, you can modify the current user component as you wish. Sorry for the late response. Regards.

0

kaustubh.kale@ness.com created 2 years ago

Thanks Mehmat . Given Solution is worked for me.

4 Answer(s)