refactor: move languages and current user logics to related components

npm/ng-packs/packages/theme-basic/src/lib/components/index.ts

@@ -2,6 +2,8 @@ export * from './account-layout/account-layout.component';
 export * from './application-layout/application-layout.component';
 export * from './empty-layout/empty-layout.component';
 export * from './logo/logo.component';
+export * from './nav-items/current-user.component';
+export * from './nav-items/languages.component';
 export * from './nav-items/nav-items.component';
 export * from './routes/routes.component';
 export * from './validation-error/validation-error.component';

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html

@@ -1,81 +1,16 @@
 <ul class="navbar-nav">
-  <ng-container
-    *ngFor="let element of rightPartElements; trackBy: trackByFn"
-    [ngTemplateOutlet]="element"
-    [ngTemplateOutletContext]="{ smallScreen: smallScreen }"
-  ></ng-container>
-</ul>
-
-<ng-template #language let-smallScreen="smallScreen">
-  <li *ngIf="(dropdownLanguages$ | async)?.length > 0" class="nav-item">
-    <div class="dropdown" ngbDropdown #languageDropdown="ngbDropdown" display="static">
-      <a
-        ngbDropdownToggle
-        class="nav-link"
-        href="javascript:void(0)"
-        role="button"
-        id="dropdownMenuLink"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
-      >
-        {{ defaultLanguage$ | async }}
-      </a>
-      <div
-        class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
-        aria-labelledby="dropdownMenuLink"
-        [class.d-block]="smallScreen && languageDropdown.isOpen()"
-      >
-        <a
-          *ngFor="let lang of dropdownLanguages$ | async"
-          href="javascript:void(0)"
-          class="dropdown-item"
-          (click)="onChangeLang(lang.cultureName)"
-          >{{ lang?.displayName }}</a
-        >
-      </div>
-    </div>
-  </li>
-</ng-template>
+  <li
+    class="nav-item d-flex align-items-center"
+    *ngFor="let item of navItems.items$ | async; trackBy: trackByFn"
+    [abpPermission]="item.requiredPolicy"
+  >
+    <ng-container
+      *ngIf="item.component; else htmlTemplate"
+      [ngComponentOutlet]="item.component"
+    ></ng-container>
 
-<ng-template #currentUser let-smallScreen="smallScreen">
-  <li class="nav-item">
-    <ng-template #loginBtn>
-      <a role="button" class="nav-link" routerLink="/account/login">{{
-        'AbpAccount::Login' | abpLocalization
-      }}</a>
+    <ng-template #htmlTemplate>
+      <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
     </ng-template>
-    <div
-      *ngIf="(currentUser$ | async)?.isAuthenticated; else loginBtn"
-      ngbDropdown
-      class="dropdown"
-      #currentUserDropdown="ngbDropdown"
-      display="static"
-    >
-      <a
-        ngbDropdownToggle
-        class="nav-link"
-        href="javascript:void(0)"
-        role="button"
-        id="dropdownMenuLink"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
-      >
-        {{ (currentUser$ | async)?.userName }}
-      </a>
-      <div
-        class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
-        aria-labelledby="dropdownMenuLink"
-        [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
-      >
-        <a class="dropdown-item" routerLink="/account/manage-profile"
-          ><i class="fa fa-cog mr-1"></i>{{ 'AbpAccount::ManageYourProfile' | abpLocalization }}</a
-        >
-        <a class="dropdown-item" href="javascript:void(0)" (click)="logout()"
-          ><i class="fa fa-power-off mr-1"></i>{{ 'AbpUi::Logout' | abpLocalization }}</a
-        >
-      </div>
-    </div>
   </li>
-</ng-template>
+</ul>

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts

@@ -1,125 +1,12 @@
-import {
-  ABP,
-  ApplicationConfiguration,
-  AuthService,
-  ConfigState,
-  SessionState,
-  SetLanguage,
-  takeUntilDestroy,
-} from '@abp/ng.core';
-import {
-  AfterViewInit,
-  Component,
-  Input,
-  OnDestroy,
-  TemplateRef,
-  TrackByFunction,
-  ViewChild,
-} from '@angular/core';
-import { Navigate, RouterState } from '@ngxs/router-plugin';
-import { Select, Store } from '@ngxs/store';
-import compare from 'just-compare';
-import { Observable } from 'rxjs';
-import { filter, map } from 'rxjs/operators';
-import snq from 'snq';
-import { AddNavigationElement } from '../../actions/layout.actions';
-import { eNavigationElementNames } from '../../enums/navigation-element-names';
-import { Layout } from '../../models/layout';
-import { LayoutState } from '../../states/layout.state';
+import { NavItem, NavItemsService } from '@abp/ng.theme.shared';
+import { Component, Input, TrackByFunction } from '@angular/core';
 
 @Component({
   selector: 'abp-nav-items',
   templateUrl: 'nav-items.component.html',
 })
-export class NavItemsComponent implements AfterViewInit, OnDestroy {
-  @Select(LayoutState.getNavigationElements)
-  navElements$: Observable<Layout.NavigationElement[]>;
+export class NavItemsComponent {
+  trackByFn: TrackByFunction<NavItem> = (_, element) => element.id;
 
-  @Select(ConfigState.getOne('currentUser'))
-  currentUser$: Observable<ApplicationConfiguration.CurrentUser>;
-
-  @Select(ConfigState.getDeep('localization.languages'))
-  languages$: Observable<ApplicationConfiguration.Language[]>;
-
-  @ViewChild('currentUser', { static: false, read: TemplateRef })
-  currentUserRef: TemplateRef<any>;
-
-  @ViewChild('language', { static: false, read: TemplateRef })
-  languageRef: TemplateRef<any>;
-
-  @Input()
-  smallScreen: boolean;
-
-  rightPartElements: TemplateRef<any>[] = [];
-
-  trackByFn: TrackByFunction<ABP.Route> = (_, element) => element.name;
-
-  get defaultLanguage$(): Observable<string> {
-    return this.languages$.pipe(
-      map(
-        languages =>
-          snq(
-            () => languages.find(lang => lang.cultureName === this.selectedLangCulture).displayName,
-          ),
-        '',
-      ),
-    );
-  }
-
-  get dropdownLanguages$(): Observable<ApplicationConfiguration.Language[]> {
-    return this.languages$.pipe(
-      map(
-        languages =>
-          snq(() => languages.filter(lang => lang.cultureName !== this.selectedLangCulture)),
-        [],
-      ),
-    );
-  }
-
-  get selectedLangCulture(): string {
-    return this.store.selectSnapshot(SessionState.getLanguage);
-  }
-
-  constructor(private store: Store, private authService: AuthService) {}
-
-  ngAfterViewInit() {
-    const navigations = this.store
-      .selectSnapshot(LayoutState.getNavigationElements)
-      .map(({ name }) => name);
-
-    if (navigations.indexOf(eNavigationElementNames.Language) < 0) {
-      this.store.dispatch(
-        new AddNavigationElement([
-          { element: this.languageRef, order: 4, name: eNavigationElementNames.Language },
-          { element: this.currentUserRef, order: 5, name: eNavigationElementNames.User },
-        ]),
-      );
-    }
-
-    this.navElements$
-      .pipe(
-        map(elements => elements.map(({ element }) => element)),
-        filter(elements => !compare(elements, this.rightPartElements)),
-        takeUntilDestroy(this),
-      )
-      .subscribe(elements => {
-        setTimeout(() => (this.rightPartElements = elements), 0);
-      });
-  }
-
-  ngOnDestroy() {}
-
-  onChangeLang(cultureName: string) {
-    this.store.dispatch(new SetLanguage(cultureName));
-  }
-
-  logout() {
-    this.authService.logout().subscribe(() => {
-      this.store.dispatch(
-        new Navigate(['/'], null, {
-          state: { redirectUrl: this.store.selectSnapshot(RouterState).state.url },
-        }),
-      );
-    });
-  }
+  constructor(public readonly navItems: NavItemsService) {}
 }