navigation update

src/app/_modules/layout/header/header.component.html

@@ -1,15 +1,14 @@
 <div class="header">
   <a class="burger" (click)="openMobileMenu()">
     <ico ico="burger_blue_40dp" [size]="36"></ico>
-
   </a>
-  <a [routerLink]="'glavnaia'" class="logo" >
+  <a [routerLink]="rootPage?.link" class="logo">
     <img src="">
     LOGO
   </a>
-  <pages-menu class="top-menu"></pages-menu>
+  <div class="locales">
+    <a [routerLink]="locale.link" *ngFor="let locale of locales">{{locale.name}}</a>
+  </div>
+  <pages-menu *ngIf="rootPage" [root]="rootPage" class="top-menu"></pages-menu>
   <a class="btn vnii" href="" target="_blank">!!!!!!!!!!</a>
 </div>
-  
-
-

src/app/_modules/layout/header/header.component.scss

@@ -0,0 +1,3 @@
+a.active {
+  color: #000000;
+}

src/app/_modules/layout/header/header.component.ts

@@ -1,9 +1,7 @@
 import {Component} from '@angular/core';
-import {PagesService} from "@app/_services/pages.service";
-import {AuthenticationService, ListsService} from "@app/_services";
+import {AuthenticationService} from "@app/_services";
 import {Router} from "@angular/router";
-import {Subscription} from "rxjs";
-import { MenuService } from '@app/_services/menu.service';
+import {PagesService} from "@app/_services/pages.service";
 
 @Component({
   selector: 'header',
@@ -12,61 +10,32 @@ import { MenuService } from '@app/_services/menu.service';
 })
 export class HeaderComponent {
   public menuItems = <any>[];
-
   public loading: boolean = false;
   public error: string = '';
 
-  showBottom = false;
+  public locales = <any>[];
 
-  controlsSubscriptionMenu: Subscription;
-  resultSubscriptionMenu: Subscription;
-
-  constructor(
-      private router: Router,
-      private pagesService: PagesService,
-      public authenticationService: AuthenticationService,
-      private listsService: ListsService,
-      private menuService: MenuService
-  ) {
+  constructor(private router: Router, public authenticationService: AuthenticationService, public pagesService: PagesService) {
+  }
 
+  get rootPage() {
+    return this.pagesService.rootPage;
   }
 
   ngOnInit() {
-    let showSettingSite = localStorage.getItem('showSettingSite');
-    if (showSettingSite === null || showSettingSite === 'no') {
-      localStorage.setItem('showSettingSite', 'no');
-      this.listsService.result('showSettingSite').next(false);
-    }
-    this.controlsSubscriptionMenu = this.listsService.controls('headerMenu').subscribe(controls => {
+    this.pagesService.root().subscribe(res => {
+      this.locales = res.data;
     });
-    this.resultSubscriptionMenu = this.listsService.result('headerMenu').subscribe(res => {
-      this.menuItems = res?.data || [];
-    });
-    this.menuService.setPagesTree()
   }
 
   ngOnDestroy() {
-
-    this.controlsSubscriptionMenu?.unsubscribe();
-    this.resultSubscriptionMenu?.unsubscribe();
   }
 
-  settingsSite() {
-    let showSettingSite = localStorage.getItem('showSettingSite');
-    showSettingSite = showSettingSite === 'yes' ? 'no' : 'yes';
-    localStorage.setItem('showSettingSite', showSettingSite);
-    this.listsService.result('showSettingSite').next(showSettingSite==='yes');
-  }
 
   login() {
     this.authenticationService.popup('login');
   }
 
-  itemSelect(event:any){
-    // if(!event.children?.data.length) 
-    this.showBottom = false;
-  }
-
   openMobileMenu(){
     this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then();
   }

src/app/_modules/layout/left-content/left-content.component.ts

@@ -25,7 +25,7 @@ export class LeftContentComponent {
     private router: Router,
     private pagesService:PagesService,
     private formsService: FormsService) {
-    
+
   }
 
   ngOnInit(){
@@ -34,7 +34,7 @@ export class LeftContentComponent {
         this.editMode = mode;
       }
     );
-    this.pagesService.currentPage.subscribe(
+    this.pagesService.currentPageSubject.subscribe(
       page => this.fetch(page)
     )
   }
@@ -70,5 +70,5 @@ export class LeftContentComponent {
 
 }
 
- 
+
 

src/app/_modules/pages/menu/item/pages-menu-item.component.html

@@ -1,11 +1,4 @@
-<div class="item" [ngClass]="itemClass">
-    <drop-down *ngIf="item.hasChildren" 
-        ico="chevron_right_24" [visible]="toggle" (toggle)="switching($event)" [target]="menu" [angle]="[0,90]">
-    </drop-down>
-    <a (click)="rout(item.link)">
-        {{item.name}}
-    </a>
+<div class="item">
+  <a [routerLink]="item.link" routerLinkActive="active">{{item.name}}</a>
 </div>
-<div #menu class="sub-menu" [ngClass]="itemClass">
-    <pages-menu  *ngIf="children?.length" [items]="children" [level]="level+1"></pages-menu>
-</div>
+<pages-menu *ngIf="children?.length" [root]="item" [level]="level + 1"></pages-menu>

src/app/_modules/pages/menu/item/pages-menu-item.component.scss

@@ -12,6 +12,9 @@
     }
     min-height: 24px;
     >a{
-        margin-top: 4px;
+      margin-top: 4px;
+      &.active {
+        color: #000000;
+      }
     }
-}
+}

src/app/_modules/pages/menu/item/pages-menu-item.component.ts

@@ -1,7 +1,4 @@
-import {Component, EventEmitter, Input, Output,OnInit} from '@angular/core';
-import { Router} from '@angular/router';
-import { MenuService } from '@app/_services/menu.service';
-import { PagesService } from '@app/_services/pages.service';
+import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'pages-menu-item',
@@ -11,83 +8,15 @@ import { PagesService } from '@app/_services/pages.service';
 export class PagesMenuItemComponent {
   @Input() item: any;
   @Input() level: number;
-  public toggle=false;
-  public selected=false;
 
-  currentURL:string;
-  constructor(
-    private router: Router,
-    private menuService: MenuService,
-    private pagesService: PagesService
-  ) {
-    
+  constructor() {
   }
 
-
   get children() {
-    return this.item?.children?.data;
+    return this.item.children?.data;
   }
 
   ngOnInit(){
-    this.toggle = this.current||this.parent;
-    if (this.toggle) this.menuService.findChildren(this.item)
   }
 
-  rout(link:string){
-    this.menuService.navURL = link;
-    if (this.item.type.name=='nav-page'){
-      this.selected = !this.selected;     
-      this.toggle=this.selected;
-      this.menuService.findChildren(link)
-    }else{
-      this.router.navigate([{outlets: {slider: null}}]).then(
-        ()=>this.router.navigate([link])
-      )
-    }
-  }
-
-  switching(event:boolean){
-    this.menuService.navURL = this.item.link;
-    this.toggle=event;
-    this.menuService.findChildren(this.item)
-  }
-
-  get parent(){
-    let parents:any;
-    let resp = false;
-    parents = this.pagesService.currentPage.value.parents?.data;
-    if (parents) {
-      resp = parents.map((item:any)=>item.link).includes(this.item.link)
-    }    
-    return resp
-  }
-
-  get current(){
-    return this.pagesService.currentPage.value.link == this.item.link;
-  }
-
-  get active(){
-    let resp = this.menuService.navURL == this.item.link;
-    if (!resp) this.selected = false
-    return  resp;
-  }
-
-  get menuClass(){
-    let menuClass = {}
-    menuClass['level-'+(this.level+1)] = true;
-    return  menuClass
-  }
-
-  get itemClass(){
-    let itemClass = {
-      unlock: this.toggle,
-      parent: this.parent&&!this.current,
-      current: this.current,
-      nav: this.item.type.name == "nav-page",
-      active: this.active,
-      selected: this.selected
-    }
-    itemClass['level-'+(this.level+1)] = true;
-    return itemClass
-  }
 }

src/app/_modules/pages/menu/pages-menu.component.html

@@ -1,3 +1 @@
-<pages-menu-item [item]="item" [level]="level"
-*ngFor="let item of visibleItems">
-</pages-menu-item>
+<pages-menu-item [item]="item" [level]="level" *ngFor="let item of children"></pages-menu-item>

src/app/_modules/pages/menu/pages-menu.component.ts

@@ -1,6 +1,5 @@
-import {Component, EventEmitter, Input, Output, OnInit} from '@angular/core';
-import { Router } from '@angular/router';
-import { MenuService } from '@app/_services/menu.service';
+import {Component, Input, OnInit} from '@angular/core';
+import {PagesService} from "@app/_services/pages.service";
 
 @Component({
   selector: 'pages-menu',
@@ -8,39 +7,26 @@ import { MenuService } from '@app/_services/menu.service';
   styleUrls: ['pages-menu.component.scss']
 })
 export class PagesMenuComponent implements OnInit {
-  @Input() items: any[];
+  @Input() root: any;
   @Input() level = 0;
 
-
-  private currentURL:string;
-  private root = false;
-
-  constructor(
-    private menuService: MenuService,
-    private router: Router,
-    
-  ){
-    router.events.subscribe((event:any)=>{
-      if(event.url)this.currentURL = event.url
-    })
-    this.currentURL = router.url
+  constructor(private pagesService: PagesService) {
   }
-  
 
-  private hiddenPages = ['/o-tsentre/protivodeistvie-korruptsii', '/o-tsentre/zashchita-personalnykh-dannykh', '/o-tsentre/okhrana-truda'];
-  get visibleItems() {
-    return this.items?.filter(item => {
-      return this.hiddenPages.indexOf(item.link) === -1;
+  get children() {
+    return this.root?.children?.data;
+  }
+
+
+  ngOnInit() {
+    if (this.root && this.root?.hasChildren && !this.children) this.fetch();
+  }
+
+  fetch() {
+    let include = ['children'];
+    this.pagesService.show(this.root.id, {include: include.join(',')}).subscribe(res => {
+      this.root = res.data;
     });
   }
 
-  ngOnInit() {
-
-    if (!this.items){
-      this.root = true;
-      this.menuService.pagesTree.subscribe(res=>{
-        this.items = res.data
-      }); 
-    }    
-  }
 }

src/app/_modules/pages/page/page.component.ts

@@ -63,20 +63,18 @@ export class PageComponent {
   fetch() {
     this.loading = true;
     let include = [
-      'parents',
+      'parents.children',
+      'children',
       'sections.type',
       'sections.groups.fields.value',
       'sections.objectables.groups.fields.value',
       'sidebars.groups.fields.value',
       'sidebars.type',
-      'permissions',
-      'children.children'
+      'permissions'
     ];
     this.pagesService.find(this.url, {include: include.join(',')}).subscribe(res => {
       this.page = res?.data;
-      this.pagesService.currentPage.next(this.page);
-      this.page = res?.data;
-      this.pagesService.setMetaFromPage(this.page);
+      if (this.page) this.pagesService.currentPage = this.page;
       this.loading = false;
     }, error => {
       this.loading = false;

src/app/_services/pages.service.ts

@@ -6,13 +6,30 @@ import {Observable, BehaviorSubject} from "rxjs";
 
 @Injectable({providedIn: 'root'})
 export class PagesService {
+  public currentPageSubject = new BehaviorSubject<any>(null);
+  public rootPageSubject = new BehaviorSubject<any>(null);
+  public metaSubject = new BehaviorSubject<any>({title: '', description: '', keywords: ''});
+  public editMode = new BehaviorSubject<boolean>(false);
+
   constructor(private http: HttpClient) {
-    this.pageMeta = new BehaviorSubject<any>({title: '', description: '', keywords: ''});
+    //this.find('/').subscribe(res => {this.rootPage = res.data});
+  }
+
+  get currentPage() {
+    return this.currentPageSubject.value;
+  }
+  set currentPage(val: any) {
+    this.currentPageSubject.next(val);
+    this.rootPage = val?.parents?.data[0] || val;
+    this.setMetaFromPage(val);
+  }
+  get rootPage() {
+    return this.rootPageSubject.value;
+  }
+  set rootPage(val: any) {
+    this.rootPageSubject.next(val);
   }
 
-  public currentPage = new BehaviorSubject<any>({data:[]});
-  public editMode = new BehaviorSubject<boolean>(false);
-  public pageMeta: BehaviorSubject<any>; 
 
 
   root(params?: {}): Observable<any> {
@@ -50,6 +67,6 @@ export class PagesService {
     this.setMeta({title: page?.title || page?.name, description: page?.description || '', keywords: page?.keywords || ''});
   }
   setMeta(meta: any) {
-    this.pageMeta.next(meta);
+    this.metaSubject.next(meta);
   }
 }

src/app/app.component.ts

@@ -1,12 +1,36 @@
 import {Component} from '@angular/core';
 import {AuthenticationService} from "@app/_services";
+import {PagesService} from "@app/_services/pages.service";
+import {Meta, Title} from "@angular/platform-browser";
+import {Subscription} from "rxjs";
 
 @Component({
   selector: 'app',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss']})
 export class AppComponent {
-  constructor(private authService: AuthenticationService) {
+  public subscription: Subscription;
+
+  constructor(private authService: AuthenticationService, private pagesService: PagesService, private titleService: Title, private metaService: Meta) {
     authService.checkUser();
+    this.subscription = this.pagesService.metaSubject.subscribe(data => {
+      this.applyMetaData(data);
+    });
+  }
+
+  ngOnDestroy() {
+    this.subscription?.unsubscribe();
+  }
+
+  applyMetaData(data: any) {
+    if (data?.title) {
+      this.titleService.setTitle(data.title);
+      this.metaService.updateTag({property: 'og:title', content: data.title}, "property='og:title'");
+    }
+    if (data?.description) {
+      this.metaService.updateTag({name: 'description', content: data?.description}, "name='description'");
+      this.metaService.updateTag({property: 'og:description', content: data.description}, "property='og:description'");
+    }
+    if (data?.keywords) this.metaService.updateTag({name: 'keywords', content: data?.keywords}, "name='keywords'");
   }
 }