pages tree functionality updated

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

@@ -1,7 +1,7 @@
-<div class="item" [class.active]="active" [class.red]="isDeleted" [class.hidden]="isDeleted && !showDeleted" [class.home]="!parent" (click)="touched = true">
+<div class="item" [class.active]="active" [class.deleted]="isDeleted" [class.hidden]="isHidden" [class.home]="!parent" (click)="touched = true">
   <div class="bar">
     <div class="left">
-      <button *ngIf="page.hasChildren" type="button" class="toggle" (click)="toggle()"></button>
+      <button *ngIf="hasChildren" type="button" class="toggle" (click)="toggle()"></button>
     </div>
     <div class="mid">
       <div class="info">
@@ -12,9 +12,10 @@
     <div class="right">
       <div class="menu">
         <!--div class="move" title="Переместить"></div-->
-        <button type="button" class="clear clone" title="Копировать" (click)="clone()" *ngIf="parent"></button>
+        <button type="button" class="clear clone" title="Копировать" (click)="clone()" *ngIf="parent">C</button>
         <button type="button" class="clear add-child" title="Добавить страницу" (click)="add()"></button>
         <button type="button" class="clear edit" title="Редактировать" (click)="edit()"  [class.orphan]="!parent"></button>
+        <button type="button" class="clear restore" title="Восстановить" (click)="restore()" *ngIf="isDeleted">R</button>
         <button type="button" class="clear close-blue" title="Удалить" (click)="delete()" *ngIf="page.slug"></button>
       </div>
     </div>

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

@@ -1,2 +1,2 @@
-.red {color: #ff0000;}
+.deleted {opacity: 0.5;}
 .hidden {display: none;}

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

@@ -52,14 +52,21 @@ export class PagesTreeItemComponent {
   get isDeleted() {
     return !!this.page.deletedAt;
   }
+  get isHidden() {
+    return this.isDeleted && !this.showDeleted;
+  }
   get showDeleted() {
     return this.pagesService.showDeleted;
   }
 
+  get hasChildren() {
+    return this.showDeleted ? this.children?.length : this.children?.filter(page => {return !page.deletedAt}).length;
+  }
+
 
   fetch() {
     let include = ['children'];
-    this.pagesService.show(this.page.id, {include: include.join(',')}).subscribe(res => {
+    this.pagesService.show(this.page.id, {include: include.join(','), withTrashed: true}).subscribe(res => {
       this.page = res.data;
     });
   }
@@ -79,6 +86,12 @@ export class PagesTreeItemComponent {
     });
   }
 
+  restore() {
+    if (confirm(`Восстановить страницу ${this.page.name}?`)) this.pagesService.restore(this.page.id, {}).subscribe(res => {
+      this.listsService.refresh(this.parentListId);
+    });
+  }
+
   clone() {
     if (confirm(`Копировать страницу ${this.page.name}?`)) this.pagesService.clone(this.page.id, {recursive: true}).subscribe(res => {
       this.listsService.refresh(this.parentListId);

src/app/_modules/pages/tree/pages-tree.component.scss

@@ -124,6 +124,10 @@
           width: 24px;
           background-color: #dedede;
         }
+        &.restore {
+          width: 24px;
+          background-color: #dedede;
+        }
       }
       .orphan{
         margin-right: 48px;

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

@@ -50,14 +50,14 @@ export class PagesTreeComponent {
   }
 
   fetchRootPages() {
-    let include = ['children'];
+    let include = ['children.children'];
     this.pagesService.root({include: include.join(','), withTrashed: true}).subscribe(res => {
       this.pages = res.data;
     });
   }
 
   fetchSubpages() {
-    let include = ['children'];
+    let include = ['children.children'];
     this.pagesService.show(this.parent.id, {include: include.join(','), withTrashed: true}).subscribe(res => {
       this.pages = res.data?.children?.data;
     });

src/app/_services/pages.service.ts

@@ -69,6 +69,10 @@ export class PagesService {
     return this.http.delete(`${environment.apiUrl}/api/pages/${id}`);
   }
 
+  restore(id: string, data: any): Observable<any> {
+    return  this.http.patch(`${environment.apiUrl}/api/pages/restore/${id}`, data);
+  }
+
   deleteBackground(id: string): Observable<any> {
     return this.http.delete(`${environment.apiUrl}/api/pages/background/${id}`);
   }