From b9da5e41dba71fe480944684b4bb30882ef9f042 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Tue, 9 Oct 2018 21:49:10 +0200 Subject: [PATCH] Pipe for history message. --- .../content/content-history.component.html | 2 +- .../content/content-history.component.ts | 9 +--- .../angular/panel-container.directive.ts | 15 ++++-- .../app/framework/angular/panel.component.ts | 5 +- .../components/history-list.component.html | 2 +- .../components/history-list.component.ts | 16 +------ src/Squidex/app/shared/components/pipes.ts | 46 +++++++++++++++++++ src/Squidex/app/shared/module.ts | 3 ++ 8 files changed, 64 insertions(+), 34 deletions(-) diff --git a/src/Squidex/app/features/content/pages/content/content-history.component.html b/src/Squidex/app/features/content/pages/content/content-history.component.html index d2847fc45..a3d040461 100644 --- a/src/Squidex/app/features/content/pages/content/content-history.component.html +++ b/src/Squidex/app/features/content/pages/content/content-history.component.html @@ -11,7 +11,7 @@
{{event.actor | sqxUserNameRef:null}} - +
{{event.created | sqxFromNow}}
diff --git a/src/Squidex/app/features/content/pages/content/content-history.component.ts b/src/Squidex/app/features/content/pages/content/content-history.component.ts index 087690153..ad7718da9 100644 --- a/src/Squidex/app/features/content/pages/content/content-history.component.ts +++ b/src/Squidex/app/features/content/pages/content/content-history.component.ts @@ -13,12 +13,10 @@ import { delay, switchMap } from 'rxjs/operators'; import { allParams, AppsState, - formatHistoryMessage, HistoryChannelUpdated, HistoryEventDto, HistoryService, MessageBus, - UsersProviderService, Version } from '@app/shared'; @@ -59,8 +57,7 @@ export class ContentHistoryComponent { private readonly appsState: AppsState, private readonly historyService: HistoryService, private readonly messageBus: MessageBus, - private readonly route: ActivatedRoute, - private readonly users: UsersProviderService + private readonly route: ActivatedRoute ) { } @@ -68,10 +65,6 @@ export class ContentHistoryComponent { this.messageBus.emit(new ContentVersionSelected(new Version(version.toString()))); } - public format(message: string): Observable { - return formatHistoryMessage(message, this.users); - } - public trackByEvent(index: number, event: HistoryEventDto) { return event.eventId; } diff --git a/src/Squidex/app/framework/angular/panel-container.directive.ts b/src/Squidex/app/framework/angular/panel-container.directive.ts index 2f723f243..fd4bac69a 100644 --- a/src/Squidex/app/framework/angular/panel-container.directive.ts +++ b/src/Squidex/app/framework/angular/panel-container.directive.ts @@ -14,6 +14,7 @@ import { PanelComponent } from './panel.component'; }) export class PanelContainerDirective implements AfterViewInit { private readonly panels: PanelComponent[] = []; + private isViewInit = false; private containerWidth = 0; constructor( @@ -27,14 +28,14 @@ export class PanelContainerDirective implements AfterViewInit { this.invalidate(true); } - public ngAfterViewInit() { - this.invalidate(true); - } - public push(panel: PanelComponent) { this.panels.push(panel); + } - this.invalidate(); + public ngAfterViewInit() { + this.isViewInit = true; + + this.invalidate(true); } public pop() { @@ -44,6 +45,10 @@ export class PanelContainerDirective implements AfterViewInit { } public invalidate(resize = false) { + if (!this.isViewInit) { + return; + } + if (resize) { this.containerWidth = this.element.nativeElement.offsetWidth; } diff --git a/src/Squidex/app/framework/angular/panel.component.ts b/src/Squidex/app/framework/angular/panel.component.ts index 2237a161c..e73ce66a3 100644 --- a/src/Squidex/app/framework/angular/panel.component.ts +++ b/src/Squidex/app/framework/angular/panel.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; import { slideRightAnimation } from './animations'; @@ -63,7 +63,6 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit { constructor( private readonly container: PanelContainerDirective, - private readonly changeDetector: ChangeDetectorRef, private readonly renderer: Renderer2 ) { } @@ -86,8 +85,6 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit { this.renderer.setStyle(this.panel.nativeElement, 'width', size); this.renderWidth = this.panel.nativeElement.offsetWidth; - - this.changeDetector.detectChanges(); } } diff --git a/src/Squidex/app/shared/components/history-list.component.html b/src/Squidex/app/shared/components/history-list.component.html index 516f50197..06753ae23 100644 --- a/src/Squidex/app/shared/components/history-list.component.html +++ b/src/Squidex/app/shared/components/history-list.component.html @@ -6,7 +6,7 @@
{{event.actor | sqxUserNameRef:null}} - +
{{event.created | sqxFromNow}}
diff --git a/src/Squidex/app/shared/components/history-list.component.ts b/src/Squidex/app/shared/components/history-list.component.ts index bbb8417cd..b749cf094 100644 --- a/src/Squidex/app/shared/components/history-list.component.ts +++ b/src/Squidex/app/shared/components/history-list.component.ts @@ -6,13 +6,8 @@ */ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; -import { Observable } from 'rxjs'; -import { - formatHistoryMessage, - HistoryEventDto, - UsersProviderService -} from '@app/shared/internal'; +import { HistoryEventDto } from '@app/shared/internal'; @Component({ selector: 'sqx-history-list', @@ -24,15 +19,6 @@ export class HistoryListComponent { @Input() public events: HistoryEventDto; - constructor( - private readonly users: UsersProviderService - ) { - } - - public format(message: string): Observable { - return formatHistoryMessage(message, this.users); - } - public trackByEvent(index: number, event: HistoryEventDto) { return event.eventId; } diff --git a/src/Squidex/app/shared/components/pipes.ts b/src/Squidex/app/shared/components/pipes.ts index a5096bfe0..8e5e1351d 100644 --- a/src/Squidex/app/shared/components/pipes.ts +++ b/src/Squidex/app/shared/components/pipes.ts @@ -11,11 +11,57 @@ import { map } from 'rxjs/operators'; import { ApiUrlConfig, + formatHistoryMessage, + HistoryEventDto, MathHelper, UserDto, UsersProviderService } from '@app/shared/internal'; +@Pipe({ + name: 'sqxHistoryMessage', + pure: false +}) +export class HistoryMessagePipe implements OnDestroy, PipeTransform { + private subscription: Subscription; + private lastMessage: string; + private lastValue: string | null = null; + + constructor( + private readonly changeDetector: ChangeDetectorRef, + private readonly users: UsersProviderService + ) { + } + + public ngOnDestroy() { + if (this.subscription) { + this.subscription.unsubscribe(); + } + } + + public transform(event: HistoryEventDto): string | null { + if (!event) { + return this.lastValue; + } + + if (this.lastMessage !== event.message) { + this.lastMessage = event.message; + + if (this.subscription) { + this.subscription.unsubscribe(); + } + + this.subscription = formatHistoryMessage(event.message, this.users).subscribe(value => { + this.lastValue = value; + + this.changeDetector.detectChanges(); + }); + } + + return this.lastValue; + } +} + class UserAsyncPipe implements OnDestroy { private lastUserId: string; private lastValue: string | null = null; diff --git a/src/Squidex/app/shared/module.ts b/src/Squidex/app/shared/module.ts index 88e848859..3bcdc192d 100644 --- a/src/Squidex/app/shared/module.ts +++ b/src/Squidex/app/shared/module.ts @@ -45,6 +45,7 @@ import { HelpService, HistoryComponent, HistoryListComponent, + HistoryMessagePipe, HistoryService, LanguageSelectorComponent, LanguagesService, @@ -101,6 +102,7 @@ import { HelpComponent, HistoryComponent, HistoryListComponent, + HistoryMessagePipe, LanguageSelectorComponent, MarkdownEditorComponent, SchemaCategoryComponent, @@ -125,6 +127,7 @@ import { HelpComponent, HistoryComponent, HistoryListComponent, + HistoryMessagePipe, LanguageSelectorComponent, MarkdownEditorComponent, RouterModule,