enhance: web builder

biaogebusy · Mar 23, 2024 · 18cdd1e · 18cdd1e
1 parent 83544a3
commit 18cdd1e
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 17 deletions.
diff --git a/src/app/modules/builder/data/samples-for-builder.ts b/src/app/modules/builder/data/samples-for-builder.ts
@@ -1,5 +1,5 @@
 export const samples = {
-  label: '构建示例',
+  label: '示例库',
   elements: [
     {
       label: '经典布局',

diff --git a/src/app/modules/builder/sidebar/builder-panel/builder-panel.component.ts b/src/app/modules/builder/sidebar/builder-panel/builder-panel.component.ts
@@ -3,23 +3,27 @@ import {
   ChangeDetectorRef,
   Component,
   Input,
+  OnDestroy,
   OnInit,
 } from '@angular/core';
 import type { IBuilderComponent } from '@core/interface/IBuilder';
 import { BuilderState } from '@core/state/BuilderState';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-builder-panel',
   templateUrl: './builder-panel.component.html',
   styleUrls: ['./builder-panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BuilderPanelComponent implements OnInit {
+export class BuilderPanelComponent implements OnInit, OnDestroy {
   @Input() content: IBuilderComponent[];
+  destroy$: Subject<boolean> = new Subject<boolean>();
   constructor(public builder: BuilderState, private cd: ChangeDetectorRef) {}
 
   ngOnInit(): void {
-    this.builder.fixedChange$.subscribe(() => {
+    this.builder.fixedChange$.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.cd.detectChanges();
     });
   }
@@ -73,4 +77,11 @@ export class BuilderPanelComponent implements OnInit {
   onAfterExpand(): void {
     this.builder.cancelFixedShowcase();
   }
+
+  ngOnDestroy(): void {
+    if (this.destroy$.next) {
+      this.destroy$.next(true);
+      this.destroy$.unsubscribe();
+    }
+  }
 }
diff --git a/src/app/modules/builder/sidebar/builder-settings/builder-settings.component.ts b/src/app/modules/builder/sidebar/builder-settings/builder-settings.component.ts
@@ -3,6 +3,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   Inject,
+  OnDestroy,
   OnInit,
 } from '@angular/core';
 import type { ICoreConfig } from '@core/interface/IAppConfig';
@@ -11,16 +12,21 @@ import { ContentService } from '@core/service/content.service';
 import { BuilderState } from '@core/state/BuilderState';
 import { CORE_CONFIG } from '@core/token/token-providers';
 import { settings } from '@modules/builder/data/settings-for-builder';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-builder-settings',
   templateUrl: './builder-settings.component.html',
   styleUrls: ['./builder-settings.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BuilderSettingsComponent implements OnInit, AfterViewInit {
+export class BuilderSettingsComponent
+  implements OnInit, AfterViewInit, OnDestroy
+{
   content = settings;
   branding: IBranding;
+  destroy$: Subject<boolean> = new Subject<boolean>();
   constructor(
     private builder: BuilderState,
     private contentService: ContentService,
@@ -30,9 +36,12 @@ export class BuilderSettingsComponent implements OnInit, AfterViewInit {
   ngOnInit(): void {}
 
   ngAfterViewInit(): void {
-    this.contentService.loadBranding().subscribe((res) => {
-      this.branding = res;
-    });
+    this.contentService
+      .loadBranding()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.branding = res;
+      });
   }
   onAfterExpand(): void {
     this.builder.cancelFixedShowcase();
@@ -67,4 +76,11 @@ export class BuilderSettingsComponent implements OnInit, AfterViewInit {
       ],
     });
   }
+
+  ngOnDestroy(): void {
+    if (this.destroy$.next) {
+      this.destroy$.next(true);
+      this.destroy$.unsubscribe();
+    }
+  }
 }
diff --git a/src/app/modules/builder/sidebar/builder-sidebar/builder-sidebar.component.html b/src/app/modules/builder/sidebar/builder-sidebar/builder-sidebar.component.html
@@ -12,7 +12,7 @@
       routerLink="./page-list">
       <app-icon [content]="{svg:'format-list-bulleted'}"></app-icon>
     </div>
-    <div class="item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [matTooltip]="'构建示例'"
+    <div class="item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [matTooltip]="'示例库'"
       routerLink="./samples">
       <app-icon [content]="{svg:'lightbulb-on-30'}"></app-icon>
     </div>

diff --git a/src/app/modules/builder/sidebar/page-list/page-list.component.ts b/src/app/modules/builder/sidebar/page-list/page-list.component.ts
@@ -54,7 +54,7 @@ export class PageListComponent implements OnInit, OnDestroy {
 
     apiParams
       .addPageLimit(10)
-      .addInclude(['uid'])
+      .addInclude(['uid', 'revision_uid'])
       .addSort('changed', 'DESC')
       .addFilter('status', '1');
     this.getContent(apiParams);
@@ -68,7 +68,7 @@ export class PageListComponent implements OnInit, OnDestroy {
 
     apiParams
       .addPageLimit(10)
-      .addInclude(['uid'])
+      .addInclude(['uid', 'revision_uid'])
       .addSort('changed', 'DESC')
       .addFilter('status', '1')
       .addFilter('title', title, 'CONTAINS');
@@ -108,7 +108,7 @@ export class PageListComponent implements OnInit, OnDestroy {
         id: item.id,
         nid: attributes.drupal_internal__nid,
         user: included.find(
-          (user: any) => user.id === item.relationships.uid.data.id
+          (user: any) => user.id === item.relationships.revision_uid.data.id
         ).attributes.display_name,
         href: attributes.path.alias
           ? attributes.path.alias

diff --git a/src/app/modules/builder/toolbar/builder-toolbar/builder-toolbar.component.ts b/src/app/modules/builder/toolbar/builder-toolbar/builder-toolbar.component.ts
@@ -59,7 +59,7 @@ export class BuilderToolbarComponent
   ) {}
 
   ngOnInit(): void {
-    this.currentPage$.subscribe((page) => {
+    this.currentPage$.pipe(takeUntil(this.destroy$)).subscribe((page) => {
       this.page = page;
     });
   }
@@ -117,17 +117,21 @@ export class BuilderToolbarComponent
     if (!this.user) {
       this.util.openSnackbar('请登录后提交！', 'ok');
       const dialogRef = this.dialog.open(LoginComponent);
-      dialogRef.afterClosed().subscribe(() => {
-        // TODO: refresh page
-        console.log(this.user);
-      });
+      dialogRef
+        .afterClosed()
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          // TODO: refresh page
+          console.log(this.user);
+        });
       return;
     }
     this.util.openSnackbar('正在提交！', 'ok');
     if (page.uuid && page.id) {
       // update page
       this.builderService
         .updateLandingPage(this.builder.currentPage)
+        .pipe(takeUntil(this.destroy$))
         .subscribe((res) => {
           const { status, message } = res;
           if (status) {
@@ -140,6 +144,7 @@ export class BuilderToolbarComponent
       // new page
       this.builderService
         .createLandingPage(this.builder.currentPage)
+        .pipe(takeUntil(this.destroy$))
         .subscribe((res) => {
           const { status, message } = res;
           if (status) {

diff --git a/src/stories/builder/data/sample/samples-for-story.ts b/src/stories/builder/data/sample/samples-for-story.ts
@@ -15,7 +15,7 @@ import { home_v8 } from './home-v8.builder';
 import { home_v9 } from './home-v9.builder';
 
 export const samples: IBuilderSamplePage = {
-  label: '构建示例',
+  label: '示例库',
   elements: [
     {
       label: '经典布局',