Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pages tree bug fix

master
Boris Voropaev 2023-09-27 16:02:44 +03:00
parent d26e713fce
commit 52fd99fd08
10 changed files with 231 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/_modules/administration/site-pages/administrate-site-pages.component.html
View File

@ -1 +1,18 @@
<pages-tree></pages-tree>
<!-- <div class="item home active" >
<div class="bar">
<div class="left">
<button type="button" class="toggle"></button>
</div>
<div class="mid">
<div class="info">
<div class="logo"></div>
<div class="name"><p>Главная страница</p></div>
</div>
</div>
<div class="right right-home">
<div class="menu"><button type="button" class="clear add-child" title="Добавить страницу" (click)="add()"></button></div>
</div>
</div>
</div> -->
<!-- <pages-tree [parent]="mainPage" *ngIf="mainPage"></pages-tree> -->
<pages-tree-item [page]="mainPage" *ngIf="mainPage?.children"></pages-tree-item>

170
src/app/_modules/administration/site-pages/administrate-site-pages.component.scss
View File

@ -0,0 +1,170 @@
.item.home .bar .mid .info .logo::before{
background-image: url('~src/assets/images/icons/home_page_24dp.svg');
}
.item:not(.home){
.bar{
padding-left: 50px;
}
.item .bar{
padding-left: 100px;
}
.item .item .bar{
padding-left: 150px;
}
.item .item .item .bar{
padding-left: 200px;
}
.item .item .item .item .bar{
padding-left: 250px;
}
}
.item {
.bar {
display: flex;
flex-direction: row;
align-items: center;
padding: 16px 0;
border-bottom: #E0E0E0 solid 1px;
.left {
flex-shrink: 0;
width: 40px;
height: 24px;
cursor: pointer;
.toggle {
border:none;
width: 100%;
height: 100%;
background: transparent url("~src/assets/images/icons/expand_less_20.svg") 50% 50% no-repeat;
transform: rotate(90deg);
transition: transform .3s;
}
}
.mid {
flex-grow: 1;
padding: 0 16px;
.info {
display: flex;
flex-direction: row;
align-items: center;
.logo {
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
margin-right: 16px;
border-radius: 100px;
background-color: #0070BA;
color: #ffffff;
span{
display: none;
}
&::before {
content: "";
display: block;
background: transparent url("~src/assets/images/icons/web_page_24dp.svg")no-repeat;
width: 24px;
height: 24px;
}
img {
width: 100%;
height: 100%;
border-radius: 100px;
object-fit: cover;
background-color: #ffffff;
}
}
.name {
p {
margin: 0;
a {
color: var(--grey-7);
}
&.sub {
font-size: 0.875rem;
color: #7f7f7f;
}
}
}
}
}
.right {
display: flex;
flex-direction: row;
align-items: center;
flex-shrink: 1;
button {
margin-left: 24px;
&.edit {
background-image: url('~src/assets/images/icons/edit_24dp.svg');
}
&.add {
background-image: url('~src/assets/images/icons/add_library_dark_24.svg');
}
&.delete {
background-image: url('~src/assets/images/icons/close_24dp.svg');
}
&.move {
background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
cursor: move;
}
}
}
.right-home {
width: 144px;
}
}
.items {
display: none;
}
&.active {
>.bar {
.left {
.toggle {
transform: rotate(180deg);
}
}
}
>.items {
display: block;
}
}
}
@media screen and (max-width: 1330px) {
.item {
.bar {
.mid {
padding: 0 12px;
.info .logo {
display: none;
}
}
.right {
display: none;
}
}
.items {
padding-left: 16px;
}
&.company {
.items {
padding-left: 40px;
}
}
}
}

14
src/app/_modules/administration/site-pages/administrate-site-pages.component.ts
View File

@ -1,5 +1,6 @@
import {Component} from '@angular/core';
import {PagesService} from "@app/_services/pages.service";
import { FormsService } from '@app/_services';
@Component({
selector: 'administrate-site-pages',
@ -8,20 +9,21 @@ import {PagesService} from "@app/_services/pages.service";
})
export class AdministrateSitePagesComponent {
constructor(
private pagesService: PagesService
private pagesService: PagesService,
private formsService: FormsService,
) {}
public mainPage:any;
ngOnInit() {
this.fetchRootPages()
this.fetchRootPage();
}
fetchRootPages() {
let include = ['children','parent'];
fetchRootPage() {
let include = ['children.children','parent.children'];
this.pagesService.root({include: include}).subscribe(res => {
this.mainPage = res.data;
console.log('MAIN', this.mainPage)
this.mainPage = res.data[0].parent.data;
console.log('MAIN', this.mainPage);
});
}

1
src/app/_modules/pages/pages.module.ts
View File

@ -39,6 +39,7 @@ import {SortablejsModule} from "ngx-sortablejs";
PagesListComponent,
SearchSectionsComponent,
PagesTreeComponent,
PagesTreeItemComponent,
]
})
export class PagesModule {}

14
src/app/_modules/pages/tree/item/pages-tree-item.component.html
View File

@ -1,10 +1,12 @@
<div class="item" [class.active]="active" (click)="touched = true">
<div class="bar">
<div class="left"><button *ngIf="children?.length" type="button" class="toggle" (click)="toggle()"></button></div>
<div class="left">
<button *ngIf="children?.length" type="button" class="toggle" (click)="toggle()"></button>
</div>
<div class="mid">
<div class="info">
<div class="logo">
<img *ngIf="logo" src="{{logo}}" alt="" />
<div class="logo" [class.orphan]="!parent">
<img *ngIf="logo" [src]="logo" alt="" />
<span *ngIf="!logo">{{noLogoLetters}}</span>
</div>
<div class="name"><p><a [routerLink]="page.link" target="_blank" [innerHTML]="page.name"></a></p></div>
@ -12,11 +14,11 @@
</div>
<div class="right">
<div class="menu">
<div class="move" title="Переместить"></div>
<div class="move" title="Переместить" *ngIf="parent"></div>
<!-- <button type="button" class="clear move" title="Переместить"></button> -->
<button type="button" class="clear add-child" title="Добавить страницу" (click)="add()"></button>
<button type="button" class="clear edit" title="Редактировать" (click)="edit()"></button>
<button type="button" class="clear close-blue" title="Удалить" (click)="delete()"></button>
<button type="button" class="clear edit" title="Редактировать" (click)="edit()" [class.orphan]="!parent"></button>
<button type="button" class="clear close-blue" title="Удалить" (click)="delete()" *ngIf="parent"></button>
</div>
</div>
</div>

9
src/app/_modules/pages/tree/item/pages-tree-item.component.ts
View File

@ -16,13 +16,20 @@ export class PagesTreeItemComponent {
public touched = false;
public subscription: Subscription;
constructor(private router: Router, private pagesService: PagesService, private formsService: FormsService, private listsService: ListsService) {
constructor(
private router: Router,
private pagesService:
PagesService, private formsService: FormsService,
private listsService: ListsService) {
}
ngOnInit() {
this.subscription = this.listsService.controls(this.listId).subscribe(res => {
if (this.touched) this.fetch();
});
if(!this.parent){
this.active = true;
}
}

17
src/app/_modules/pages/tree/pages-tree.component.html
View File

@ -1,19 +1,4 @@
<div class="item home active" *ngIf="!parent">
<div class="bar">
<div class="left">
<button type="button" class="toggle"></button>
</div>
<div class="mid">
<div class="info">
<div class="logo"></div>
<div class="name"><p>Главная страница</p></div>
</div>
</div>
<div class="right right-home">
<div class="menu"><button type="button" class="clear add-child" title="Добавить страницу" (click)="add()"></button></div>
</div>
</div>
</div>
<div class="items" [sortablejs]="pages" [sortablejsOptions]="options">
<pages-tree-item [id]="page.id" [page]="page" [parent]="parent" *ngFor="let page of pages"></pages-tree-item>
</div>

11
src/app/_modules/pages/tree/pages-tree.component.scss
View File

@ -1,8 +1,4 @@
.item.home .bar .mid .info .logo::before{
background-image: url('~src/assets/images/icons/home_page_24dp.svg');
}
.item:not(.home){
.bar{
padding-left: 50px;
@ -76,7 +72,9 @@
width: 24px;
height: 24px;
}
&.orphan::before{
background-image: url('~src/assets/images/icons/home_page_24dp.svg');
}
img {
width: 100%;
height: 100%;
@ -120,6 +118,9 @@
cursor: move;
}
}
.orphan{
margin-right: 48px;
}
}
.right-home {
width: 144px;

14
src/app/_modules/pages/tree/pages-tree.component.ts
View File

@ -36,9 +36,10 @@ export class PagesTreeComponent {
ngOnInit() {
console.log('parent',this.parent)
if (!this.parent) this.subscription = this.listsService.controls(this.listId).subscribe(res => {
this.fetch();
});
this.fetchSubpages()
// if (!this.parent) this.subscription = this.listsService.controls(this.listId).subscribe(res => {
// this.fetch();
// });
}
ngOnChanges() {
@ -79,8 +80,11 @@ export class PagesTreeComponent {
console.log(parent)
console.log(event.item.id)
console.log({parent: this.parent?.id, ord: event.newIndex})
this.pagesService.move(event.item.id, {parent: this.parent?.id, ord: event.newIndex}).subscribe(res => {
});
if(this.parent?.id){
this.pagesService.move(event.item.id, {parent: this.parent?.id, ord: event.newIndex}).subscribe(res => {
});
}
}

4
src/environments/environment.ts
View File

@ -5,8 +5,8 @@
export const environment = {
production: false,
apiUrl: 'http://api.vniigazv2.lc',
clientId: 2,
clientSecret: 'Z4AOjzV1N676Yvudrm5SfpeFLxh00RigroxaBYCw',
clientId: 4,
clientSecret: 'KaeoKK3VEnfycWBdlcpAnIVS2BYtEr4rbVXXm9gd',
};
/*