diff --git a/src/app/_modules/layout/left-content/left-content.component.html b/src/app/_modules/layout/left-content/left-content.component.html
index e69de29..30b99f9 100644
--- a/src/app/_modules/layout/left-content/left-content.component.html
+++ b/src/app/_modules/layout/left-content/left-content.component.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/app/_modules/layout/left-content/left-content.component.ts b/src/app/_modules/layout/left-content/left-content.component.ts
index b6b1732..54b7b27 100644
--- a/src/app/_modules/layout/left-content/left-content.component.ts
+++ b/src/app/_modules/layout/left-content/left-content.component.ts
@@ -1,8 +1,6 @@
-import { Component } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
-import { Subscription } from "rxjs";
-import { PagesService } from "@app/_services/pages.service";
-import { FormsService } from '@app/_services';
+import {Component} from '@angular/core';
+import {Router} from "@angular/router";
+import {PagesService} from "@app/_services/pages.service";
@Component({
selector: 'left-content',
@@ -11,61 +9,18 @@ import { FormsService } from '@app/_services';
})
export class LeftContentComponent {
- public url: string = "";
- public background:string;
- public pageName:string;
- public editable:string;
- public editMode: boolean = false;
- private pageID: string;
- private routeSubscription: Subscription;
-
-
-
constructor(
private router: Router,
- private pagesService:PagesService,
- private formsService: FormsService) {
-
+ public pagesService: PagesService
+ ) {
}
- ngOnInit(){
- this.pagesService.editMode.subscribe(
- mode => {
- this.editMode = mode;
- }
- );
- this.pagesService.currentPageSubject.subscribe(
- page => this.fetch(page)
- )
+ get rootPage() {
+ return this.pagesService.rootPage;
}
- fetch(page:any){
- if (page){
- this.background = page.image?.data?.links?.full;
- if (this.background) this.background = `url(${this.background})`;
- this.pageName = (page.parents?.data[2]||page).name;
- this.editable = page.permissions?.edit || page.permissions?.anything;
- this.pageID = page.id
- }else{
- this.pageName = null;
- this.editable = null;
- this.pagesService.editMode.next(false)
- }
- }
-
- toggleEditMode(){
- this.pagesService.editMode.next(!this.editMode)
- }
-
- editBackground() {
- this.formsService.createModel('page-background', {extraProps: {attach: {pageId: this.pageID}}});
- }
-
- removeBackground() {
- if (confirm('Вы деествительно хотите удалить этот фон?')) {
- this.pagesService.deleteBackground(this.pageID).subscribe(res => {
- });
- }
+ openMobileMenu(){
+ this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then();
}
}
diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.html b/src/app/_modules/pages/menu/item/pages-menu-item.component.html
index 1f83bc4..345fb6a 100644
--- a/src/app/_modules/pages/menu/item/pages-menu-item.component.html
+++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.html
@@ -1,4 +1,5 @@
-
-
{{item.name}}
+
-
+
diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.scss b/src/app/_modules/pages/menu/item/pages-menu-item.component.scss
index 2ad8e90..e69de29 100644
--- a/src/app/_modules/pages/menu/item/pages-menu-item.component.scss
+++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.scss
@@ -1,20 +0,0 @@
-:host{
- display: flex;
- flex-direction: column;
-
-}
-
-.item{
- display: flex;
- align-items: flex-start;
- drop-down{
- margin-left: -24px;
- }
- min-height: 24px;
- >a{
- margin-top: 4px;
- &.active {
- color: #000000;
- }
- }
-}
diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.ts b/src/app/_modules/pages/menu/item/pages-menu-item.component.ts
index 2e83bb2..75e1f50 100644
--- a/src/app/_modules/pages/menu/item/pages-menu-item.component.ts
+++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.ts
@@ -1,4 +1,7 @@
import {Component, Input} from '@angular/core';
+import { MenuService } from '@app/_services/menu.service';
+import { PagesService } from '@app/_services/pages.service';
+import { Router } from '@angular/router';
@Component({
selector: 'pages-menu-item',
@@ -8,15 +11,91 @@ import {Component, Input} from '@angular/core';
export class PagesMenuItemComponent {
@Input() item: any;
@Input() level: number;
+ open=false
- constructor() {
- }
+ constructor(
+ private menuService: MenuService,
+ private pagesService: PagesService,
+ private router: Router
+ ) {}
get children() {
return this.item.children?.data;
}
+ get hasChildren(){
+ return this.item.hasChildren
+ }
+
+ get current(){
+ return this.item.link == this.pagesService.currentPage.link
+ }
+
+ get selected(){
+ return this.item.link == this.pagesService.menuSelectedLink
+ }
+
+ get parent(){
+ return !this.current && this.pagesService.currentPage.link.startsWith(this.item.link)
+ }
+
+ get itemClass(){
+ let resp = {
+ 'current': this.current,
+ 'parent': this.parent,
+ 'open': this.open,
+ 'selected': this.selected
+ }
+ resp['lvl-'+this.level] = true;
+ return resp
+ }
+
+ get menuClass(){
+ let resp = {
+ 'current': this.current,
+ 'parent': this.parent,
+ 'open': this.open,
+ 'selected': this.selected
+ }
+ resp['lvl-'+(this.level+1)] = true;
+ return resp
+ }
+
+ findChildren(){
+ if (this.item.hasChildren && !this.item.children){
+ let include = [
+ 'children'
+ ];
+ this.pagesService.find(this.item.link, {include: include.join(',')}).subscribe(resp => {
+ this.item.children = resp.data.children
+ }, error => {
+ console.log('error')
+ });
+ }
+ }
+
+
+
+ toggle(event){
+
+ this.open = event;
+ if(event){
+ this.findChildren()
+ }
+ }
+
+ select(){
+ console.log(this.item)
+ this.pagesService.menuSelectedLink = this.item.link
+ if (this.item.type.name == 'nav-page'){
+ this.toggle(!this.open)
+ }else{
+ this.router.navigateByUrl(this.item.link)
+ }
+ }
+
ngOnInit(){
+ this.open = this.current || this.parent || this.selected
}
}
diff --git a/src/app/_modules/pages/menu/pages-menu.component.html b/src/app/_modules/pages/menu/pages-menu.component.html
index f9b326a..9d325be 100644
--- a/src/app/_modules/pages/menu/pages-menu.component.html
+++ b/src/app/_modules/pages/menu/pages-menu.component.html
@@ -1 +1 @@
-
+
diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts
index 2fcdebc..caa1eb4 100644
--- a/src/app/_modules/pages/menu/pages-menu.component.ts
+++ b/src/app/_modules/pages/menu/pages-menu.component.ts
@@ -1,5 +1,7 @@
import {Component, Input, OnInit} from '@angular/core';
import {PagesService} from "@app/_services/pages.service";
+import { combineLatest } from 'rxjs';
+import { Subscription } from 'rxjs';
@Component({
selector: 'pages-menu',
@@ -7,26 +9,45 @@ import {PagesService} from "@app/_services/pages.service";
styleUrls: ['pages-menu.component.scss']
})
export class PagesMenuComponent implements OnInit {
- @Input() root: any;
@Input() level = 0;
+ @Input() items:any;
+ private subscription: Subscription
- constructor(private pagesService: PagesService) {
+ constructor(
+ private pagesService: PagesService,
+
+ ) {
}
- get children() {
- return this.root?.children?.data;
- }
-
-
ngOnInit() {
- if (this.root && this.root?.hasChildren && !this.children) this.fetch();
+ if(!this.items){
+
+ this.subscription = combineLatest([
+ this.pagesService.currentPageSubject,
+ this.pagesService.rootPageSubject
+ ]).subscribe(
+ resp=>{
+ let [currentPage, rootPage] = resp
+ if(currentPage){
+ let menuTree = currentPage.parents.data.reduceRight(
+ (menuTree,item)=>{
+ let fothersSonID = item.children.data.findIndex(
+ child => child.id == menuTree.id
+ )
+ item.children.data[fothersSonID] = menuTree
+ return item
+ }, currentPage);
+ this.items = menuTree.children.data;
+ }else{
+ this.items = rootPage?.data[0].children.data
+ }
+ }
+ )
+ }
}
- fetch() {
- let include = ['children'];
- this.pagesService.show(this.root.id, {include: include.join(',')}).subscribe(res => {
- this.root = res.data;
- });
+ ngOnDestroy(){
+ this.subscription?.unsubscribe()
}
-}
+}
\ No newline at end of file
diff --git a/src/app/_services/pages.service.ts b/src/app/_services/pages.service.ts
index 077c960..dce46ab 100644
--- a/src/app/_services/pages.service.ts
+++ b/src/app/_services/pages.service.ts
@@ -10,6 +10,7 @@ export class PagesService {
public rootPageSubject = new BehaviorSubject
(null);
public metaSubject = new BehaviorSubject({title: '', description: '', keywords: ''});
public editMode = new BehaviorSubject(false);
+ public menuSelectedLink: string;
constructor(private http: HttpClient) {
//this.find('/').subscribe(res => {this.rootPage = res.data});
diff --git a/src/assets/css/_grid.scss b/src/assets/css/_grid.scss
index 15b2890..9327f97 100644
--- a/src/assets/css/_grid.scss
+++ b/src/assets/css/_grid.scss
@@ -53,6 +53,22 @@ jumbotron{
}
}
+
+left-content{
+ pages-menu:not(.lvl-0,.open){
+ display: none;
+ }
+}
+
+right-content{
+ .item{display: none;}
+ pages-menu.selected{
+ pages-menu-item>.item{
+ display: flex;
+ }
+ }
+}
+
.content-sapce{
flex-grow: 1;
.content-grid{
@@ -133,4 +149,30 @@ footer{
.footer{
padding: 40px 24px;
}
-}
\ No newline at end of file
+}
+
+
+
+
+
+pages-menu-item{
+ display: flex;
+ flex-direction: column;
+
+}
+
+.item{
+ display: flex;
+ align-items: flex-start;
+ drop-down{
+ margin-left: -24px;
+ }
+ min-height: 24px;
+ >a{
+ margin-top: 4px;
+ &.active {
+ color: #000000;
+ }
+ }
+}
+
diff --git a/src/assets/css/_main-menu.scss b/src/assets/css/_main-menu.scss
index 69b97ba..22c1bc3 100644
--- a/src/assets/css/_main-menu.scss
+++ b/src/assets/css/_main-menu.scss
@@ -8,7 +8,14 @@ header{
align-items: center;
justify-content: space-between;
-
+ pages-menu{
+ flex-direction: row;
+ gap:24px;
+ &:not(.lvl-0){display: none;}
+ drop-down{
+ display: none;
+ }
+ }
}
};