Тестовое задание на Angular. Создание admin лейаута.

В данной статье создадим Admin layout по аналогии с базовым layout’ом всего приложения.

В макете выведем admin menu и выделим место для вывода основного контента.

Реализация AdminLayout

Создадим модуль и компонент:

В шаблоне представлены два экрана мобильные устройства и персональные ПК.

<ng-container *ngIf="isDesktopScreen; then desktopTpl; else mobileTpl"></ng-container>

<ng-template #desktopTpl>
  <app-container mode="fluid" height="max-height">
    <app-row mode="md">
      <app-column class="admin-menu" [modes]="{ md: 4, lg: 3, xl: 2 }">
        <app-admin-desktop-menu automation-id="admin-desktop-menu"></app-admin-desktop-menu>
      </app-column>
      <app-column [modes]="{ md: 8, lg: 9, xl: 10 }">
        <router-outlet></router-outlet>
      </app-column>
    </app-row>
  </app-container>
</ng-template>

<ng-template #mobileTpl>
  <app-admin-mobile-menu class="admin-menu" automation-id="admin-mobile-menu"></app-admin-mobile-menu>
  <app-container mode="fluid" height="max-height">
    <router-outlet></router-outlet>
  </app-container>
</ng-template>

В данном случае, в мобильной версии показыватся админ меню сверху, а ниже будет идти контент. В десктопной версии, будут колонки, где слева будет выводиться меню, а справа соответствующий контент.

Для реализации определения типа устройства вновь используется BreakpontObservable из Angular CDK:

this.breakpointObserver
  .observe(mediaBreakpointUp(GridBreakpointType.Md))
  .pipe(
    tap((breakpoints) => {
      this.isDesktopScreen = breakpoints.matches;
      this.changeDetectorRef.markForCheck();
    }),
    takeUntil(this.destroy$)
  )
  .subscribe();

Реализация AdminMenu

Теперь реализуем admin menu, которое в мобильной и десктопной версиях будет отличаться.

Создадим мобильное меню:

Реализация меню тривиальна. Берем список ссылок и выводим его, использовав Angular Material Tabs:

<nav mat-tab-nav-bar>
  <a mat-tab-link automation-id="admin-mobile-menu-link" [routerLink]="link.route | navPath" *ngFor="let link of links">
    {{ link.label }}
  </a>
</nav>

Ссылки берутся из сервиса AdminMenuService:

Где в компоненте, при инициализации задаются ссылки:

ngOnInit(): void {
  this.links = this.adminMenuService.links();
}

Отметим, что это гипертрофированный случай использования сервисов. В данном случае можно просто определить ссылки в виде константы и использовать ее и создавать сервис явно не нужно.

В версии для настольных РС, меню создается аналогичным способом:

Так как по непонятным причинам, ссылка была вынесена в отдельный модуль, модуль ссылки:

Как и в случае с мобильным меню, просто перебираем ссылки и выводим их.

Данных компонентов достаточно, чтобы начать создавать страницу админ панели.

Ссылки

Вернуться к оглавлению — Введение.

Следующая статья — Создание страницы в админ панели.

Предыдущая статья — Навигация в приложении.

Все исходники на github/fafnur/barinb.

Fafnur/barinb

Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur