Assistance with Right hand side current user menu #178

4 Answer(s)

• 

  1

  liangshiwei created 5 years ago

  Support Team Fullstack Developer

  What UI are you using?

  Save Cancel
• 

  0

  ThomasA created 5 years ago

  We are using Angular.

  Save Cancel
• 

  0

  Mehmet created 5 years ago

  Hi @ThomasA

  After v2.8 is released, you can update the app.component.ts file to replace user nav element as shown below:

  import {
    ABP, // imported
    ApplicationConfiguration, // imported
    AuthService, // imported
    ConfigState, // imported
    LazyLoadService,
    LOADING_STRATEGY,
    SessionState, // imported
  } from '@abp/ng.core';
  import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; // imported TemplateRef and ViewChild
  import { Router } from '@angular/router'; // added this line
  import { Select, Store } from '@ngxs/store'; // added this line
  import { forkJoin, Observable } from 'rxjs'; // imported Observable
  import { AddNavigationElement, eNavigationElementNames } from '@volo/abp.ng.theme.lepton'; // added this line
  
  @Component({
    selector: 'app-root',
    template: `
      <abp-loader-bar></abp-loader-bar>
      <router-outlet></router-outlet>
  
      <!-- Added below template -->
      <ng-template #currentUser>
        <li class="nav-item" *ngIf="currentUser$ | async as user">
          <ng-template #loginBtn>
            <a role="button" routerLink="/account/login" class="btn ">{{
              'AbpAccount::Login' | abpLocalization
            }}</a>
          </ng-template>
          <div *ngIf="user.isAuthenticated; else loginBtn" class="dropdown btn-group" ngbDropdown>
            <a ngbDropdownToggle class="btn pointer">
              <abp-current-user-image
                [currentUser]="user"
                classes="user-avatar"
              ></abp-current-user-image>
              <span class="d-lg-none 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
                    [currentUser]="user"
                    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.userName }}</strong>
                </div>
              </div>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item pointer" routerLink="/account/manage-profile">{{
                'AbpAccount::ManageYourProfile' | abpLocalization
              }}</a>
  
              <a class="dropdown-item pointer"> New menu item</a>
  
              <a class="dropdown-item pointer" id="logout" (click)="logout()">{{
                'AbpUi::Logout' | abpLocalization
              }}</a>
            </div>
          </div>
        </li>
      </ng-template>
    `,
  })
  export class AppComponent implements OnInit {
    // added
    @Select(ConfigState.getOne('currentUser'))
    currentUser$: Observable<ApplicationConfiguration.CurrentUser>;
  
    // added
    @Select(SessionState.getTenant)
    selectedTenant$: Observable<ABP.BasicItem>;
  
    // added
    @ViewChild('currentUser', { static: false })
    currentUserTemplate: TemplateRef<any>;
  
    constructor(
      private lazyLoadService: LazyLoadService,
      private router: Router, // injected
      private authService: AuthService, // injected
      private store: Store, // injected
    ) {}
  
    ngOnInit() {
      forkJoin([
        this.lazyLoadService.load(LOADING_STRATEGY.PrependAnonymousStyleToHead('flag-icon.min.css')),
        this.lazyLoadService.load(
          LOADING_STRATEGY.PrependAnonymousStyleToHead('fontawesome-v4-shims.min.css'),
        ),
        this.lazyLoadService.load(
          LOADING_STRATEGY.PrependAnonymousStyleToHead('fontawesome-all.min.css'),
        ),
      ]).subscribe();
    }
  
    // added
    ngAfterViewInit() {
      this.store.dispatch(
        new AddNavigationElement({
          element: this.currentUserTemplate,
          name: eNavigationElementNames.User,
          order: 5,
        }),
      );
    }
  
    // added
    logout() {
      this.authService.logout().subscribe(() => {
        this.router.navigate(['/'], { state: { redirectUrl: this.router.url } });
      });
    }
  }
  

  We will work to replace the menu elements easily. Probably this document will be updated and covered the new way for replacement in v2.9.

  Save Cancel
• 

  0

  Mehmet created 5 years ago

  Another and recommended way

  ---

  

  I created a GitHub gist to explain how to replace NavItemsComponent: https://gist.github.com/mehmet-erim/eb6e4c082dde5271778d1c55918298f1

  You should update the packages to v2.8.

  Save Cancel