mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
7 years ago
34 changed files with 686 additions and 238 deletions
@ -0,0 +1 @@ |
|||||
|
<sqx-comments [commentsId]="commentsId"></sqx-comments> |
||||
@ -0,0 +1,2 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
@ -0,0 +1,30 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Component, OnInit } from '@angular/core'; |
||||
|
import { ActivatedRoute } from '@angular/router'; |
||||
|
|
||||
|
import { allParams } from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-comments-page', |
||||
|
styleUrls: ['./comments-page.component.scss'], |
||||
|
templateUrl: './comments-page.component.html' |
||||
|
}) |
||||
|
export class CommentsPageComponent implements OnInit { |
||||
|
public commentsId: string; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly route: ActivatedRoute |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.commentsId = allParams(this.route)['contentId']; |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,19 @@ |
|||||
|
<div class="comment row no-gutters"> |
||||
|
<div class="col col-auto"> |
||||
|
<img class="user-picture" [attr.title]="comment.user | sqxUserNameRef:null" [attr.src]="comment.user | sqxUserPictureRef" /> |
||||
|
</div> |
||||
|
<div class="col pl-2"> |
||||
|
<div class="comment-message"> |
||||
|
<div class="user-row"> |
||||
|
<div class="user-ref">{{comment.user | sqxUserNameRef:null}}</div> |
||||
|
|
||||
|
<button *ngIf="comment.user === userId" type="button" class="btn btn-sm btn-link btn-danger item-remove" (click)="deleting.emit()!"> |
||||
|
<i class="icon-bin2"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div>{{comment.text}}</div> |
||||
|
<div class="comment-created text-muted">{{comment.time | sqxFromNow}}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,43 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
.user-ref { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.item-remove { |
||||
|
@include absolute(-5px, -15px, auto, auto); |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.user-row { |
||||
|
& { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
.item-remove { |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment { |
||||
|
& { |
||||
|
font-size: .9rem; |
||||
|
font-weight: normal; |
||||
|
margin-bottom: .75rem; |
||||
|
} |
||||
|
|
||||
|
&-message { |
||||
|
margin-bottom: .375rem; |
||||
|
} |
||||
|
|
||||
|
&-created { |
||||
|
font-size: .75rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text-muted { |
||||
|
color: $color-history; |
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; |
||||
|
import { FormBuilder } from '@angular/forms'; |
||||
|
|
||||
|
import { CommentDto, UpsertCommentForm } from '@app/shared/internal'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-comment', |
||||
|
styleUrls: ['./comment.component.scss'], |
||||
|
templateUrl: './comment.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class CommentComponent { |
||||
|
public editForm = new UpsertCommentForm(this.formBuilder); |
||||
|
|
||||
|
@Input() |
||||
|
public comment: CommentDto; |
||||
|
|
||||
|
@Input() |
||||
|
public userId: string; |
||||
|
|
||||
|
@Output() |
||||
|
public deleting = new EventEmitter(); |
||||
|
|
||||
|
@Output() |
||||
|
public updated = new EventEmitter<string>(); |
||||
|
|
||||
|
constructor( |
||||
|
private readonly formBuilder: FormBuilder |
||||
|
) { |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,26 @@ |
|||||
|
<sqx-panel desiredWidth="20rem" isBlank="true" [isLazyLoaded]="false" contentClass="grid"> |
||||
|
<ng-container title> |
||||
|
Comments |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container content> |
||||
|
<div class="grid-content" #scrollMe [scrollTop]="scrollMe.scrollHeight"> |
||||
|
<sqx-comment *ngFor="let comment of state.comments | async; trackBy: trackByComment" |
||||
|
[comment]="comment" |
||||
|
[userId]="userId" |
||||
|
(updated)="update(comment, $event)" |
||||
|
(deleting)="delete(comment)"> |
||||
|
</sqx-comment> |
||||
|
</div> |
||||
|
|
||||
|
<div class="grid-footer"> |
||||
|
<form [formGroup]="commentForm.form" (submit)="comment()"> |
||||
|
<input class="form-control" name="text" formControlName="text" placeholder="Create a comment" /> |
||||
|
</form> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</sqx-panel> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,11 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
.grid-footer { |
||||
|
border-top-width: 1px; |
||||
|
} |
||||
|
|
||||
|
.grid-body, |
||||
|
.grid-footer { |
||||
|
padding: 1rem; |
||||
|
} |
||||
@ -0,0 +1,84 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Component, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { FormBuilder } from '@angular/forms'; |
||||
|
import { Subscription, timer } from 'rxjs'; |
||||
|
import { onErrorResumeNext, switchMap } from 'rxjs/operators'; |
||||
|
|
||||
|
import { |
||||
|
AppsState, |
||||
|
AuthService, |
||||
|
CommentDto, |
||||
|
CommentsService, |
||||
|
CommentsState, |
||||
|
DialogService, |
||||
|
fadeAnimation, |
||||
|
UpsertCommentForm |
||||
|
} from '@app/shared/internal'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-comments', |
||||
|
styleUrls: ['./comments.component.scss'], |
||||
|
templateUrl: './comments.component.html', |
||||
|
animations: [ |
||||
|
fadeAnimation |
||||
|
] |
||||
|
}) |
||||
|
export class CommentsComponent implements OnDestroy, OnInit { |
||||
|
private timer: Subscription; |
||||
|
|
||||
|
public state: CommentsState; |
||||
|
|
||||
|
public userId: string; |
||||
|
|
||||
|
public commentForm = new UpsertCommentForm(this.formBuilder); |
||||
|
|
||||
|
@Input() |
||||
|
public commentsId: string; |
||||
|
|
||||
|
constructor(authService: AuthService, |
||||
|
private readonly appsState: AppsState, |
||||
|
private readonly commentsService: CommentsService, |
||||
|
private readonly dialogs: DialogService, |
||||
|
private readonly formBuilder: FormBuilder |
||||
|
) { |
||||
|
this.userId = authService.user!.token; |
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
this.timer.unsubscribe(); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.state = new CommentsState(this.appsState, this.commentsId, this.commentsService, this.dialogs); |
||||
|
|
||||
|
this.timer = timer(0, 4000).pipe(switchMap(() => this.state.load()), onErrorResumeNext()).subscribe(); |
||||
|
} |
||||
|
|
||||
|
public delete(comment: CommentDto) { |
||||
|
this.state.delete(comment.id).pipe(onErrorResumeNext()).subscribe(); |
||||
|
} |
||||
|
|
||||
|
public update(comment: CommentDto, text: string) { |
||||
|
this.state.update(comment.id, text).pipe(onErrorResumeNext()).subscribe(); |
||||
|
} |
||||
|
|
||||
|
public comment() { |
||||
|
const value = this.commentForm.submit(); |
||||
|
|
||||
|
if (value) { |
||||
|
this.state.create(value.text).pipe(onErrorResumeNext()).subscribe(); |
||||
|
|
||||
|
this.commentForm.submitCompleted({}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public trackByComment(index: number, comment: CommentDto) { |
||||
|
return comment.id; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
|
||||
|
import { Form } from '@app/framework'; |
||||
|
|
||||
|
export class UpsertCommentForm extends Form<FormGroup> { |
||||
|
constructor(formBuilder: FormBuilder) { |
||||
|
super(formBuilder.group({ |
||||
|
text: ['', |
||||
|
[ |
||||
|
Validators.required |
||||
|
] |
||||
|
] |
||||
|
})); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,119 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { of } from 'rxjs'; |
||||
|
import { IMock, It, Mock, Times } from 'typemoq'; |
||||
|
|
||||
|
import { |
||||
|
AppsState, |
||||
|
CommentDto, |
||||
|
CommentsDto, |
||||
|
CommentsService, |
||||
|
CommentsState, |
||||
|
DateTime, |
||||
|
DialogService, |
||||
|
ImmutableArray, |
||||
|
UpsertCommentDto, |
||||
|
Version |
||||
|
} from '@app/shared'; |
||||
|
|
||||
|
describe('CommentsState', () => { |
||||
|
const app = 'my-app'; |
||||
|
const commentsId = 'my-comments'; |
||||
|
const now = DateTime.today(); |
||||
|
const user = 'not-me'; |
||||
|
|
||||
|
const oldComments = new CommentsDto([ |
||||
|
new CommentDto('1', now, 'text1', user), |
||||
|
new CommentDto('2', now, 'text2', user) |
||||
|
], [], [], new Version('1')); |
||||
|
|
||||
|
let dialogs: IMock<DialogService>; |
||||
|
let appsState: IMock<AppsState>; |
||||
|
let commentsService: IMock<CommentsService>; |
||||
|
let commentsState: CommentsState; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
dialogs = Mock.ofType<DialogService>(); |
||||
|
|
||||
|
appsState = Mock.ofType<AppsState>(); |
||||
|
|
||||
|
appsState.setup(x => x.appName) |
||||
|
.returns(() => app); |
||||
|
|
||||
|
commentsService = Mock.ofType<CommentsService>(); |
||||
|
|
||||
|
commentsService.setup(x => x.getComments(app, commentsId, new Version(''))) |
||||
|
.returns(() => of(oldComments)); |
||||
|
|
||||
|
commentsState = new CommentsState(appsState.object, commentsId, commentsService.object, dialogs.object); |
||||
|
commentsState.load().subscribe(); |
||||
|
}); |
||||
|
|
||||
|
it('should load and merge comments', () => { |
||||
|
const newComments = new CommentsDto([ |
||||
|
new CommentDto('3', now, 'text3', user) |
||||
|
], [ |
||||
|
new CommentDto('2', now, 'text2_2', user) |
||||
|
], ['1'], new Version('2')); |
||||
|
|
||||
|
commentsService.setup(x => x.getComments(app, commentsId, new Version('1'))) |
||||
|
.returns(() => of(newComments)); |
||||
|
|
||||
|
commentsState.load().subscribe(); |
||||
|
|
||||
|
expect(commentsState.snapshot.isLoaded).toBeTruthy(); |
||||
|
expect(commentsState.snapshot.comments).toEqual(ImmutableArray.of([ |
||||
|
new CommentDto('2', now, 'text2_2', user), |
||||
|
new CommentDto('3', now, 'text3', user) |
||||
|
])); |
||||
|
|
||||
|
commentsService.verify(x => x.getComments(app, commentsId, It.isAny()), Times.exactly(2)); |
||||
|
}); |
||||
|
|
||||
|
it('should add comment to snapshot when created', () => { |
||||
|
const newComment = new CommentDto('3', now, 'text3', user); |
||||
|
|
||||
|
commentsService.setup(x => x.postComment(app, commentsId, new UpsertCommentDto('text3'))) |
||||
|
.returns(() => of(newComment)); |
||||
|
|
||||
|
commentsState.create('text3').subscribe(); |
||||
|
|
||||
|
expect(commentsState.snapshot.comments).toEqual(ImmutableArray.of([ |
||||
|
new CommentDto('1', now, 'text1', user), |
||||
|
new CommentDto('2', now, 'text2', user), |
||||
|
new CommentDto('3', now, 'text3', user) |
||||
|
])); |
||||
|
}); |
||||
|
|
||||
|
it('should update properties when updated', () => { |
||||
|
commentsService.setup(x => x.putComment(app, commentsId, '2', new UpsertCommentDto('text2_2'))) |
||||
|
.returns(() => of({})); |
||||
|
|
||||
|
commentsState.update('2', 'text2_2', now).subscribe(); |
||||
|
|
||||
|
expect(commentsState.snapshot.comments).toEqual(ImmutableArray.of([ |
||||
|
new CommentDto('1', now, 'text1', user), |
||||
|
new CommentDto('2', now, 'text2_2', user) |
||||
|
])); |
||||
|
|
||||
|
commentsService.verify(x => x.putComment(app, commentsId, '2', new UpsertCommentDto('text2_2')), Times.once()); |
||||
|
}); |
||||
|
|
||||
|
it('should remove comment from snapshot when deleted', () => { |
||||
|
commentsService.setup(x => x.deleteComment(app, commentsId, '2')) |
||||
|
.returns(() => of({})); |
||||
|
|
||||
|
commentsState.delete('2').subscribe(); |
||||
|
|
||||
|
expect(commentsState.snapshot.comments).toEqual(ImmutableArray.of([ |
||||
|
new CommentDto('1', now, 'text1', user) |
||||
|
])); |
||||
|
|
||||
|
commentsService.verify(x => x.deleteComment(app, commentsId, '2'), Times.once()); |
||||
|
}); |
||||
|
}); |
||||
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue