Skip to content
Snippets Groups Projects
Commit 8a8a3480 authored by Anris Ceta's avatar Anris Ceta :speech_balloon:
Browse files

Outsource comment-create-component

parent d04541c7
Branches
Tags
No related merge requests found
Showing with 141 additions and 5 deletions
app-comment-list {
width: 100%;
max-width: 800px;
}
mat-card {
margin-bottom: 10px;
background-color: #4db6ac;
border-radius: 8px;
width: 100%;
max-width: 800px;
}
app-comment {
......@@ -10,7 +13,7 @@ app-comment {
input {
box-sizing: border-box;
padding: 0 10px 0 20px;
padding: 0 10px 0 20px;
width: 100%;
background-color: #4db6ac;
border: none;
......
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<div fxLayout="row" fxLayoutAlign="center">
<form>
<mat-form-field class="input-block">
<input matInput #commentSubject type="text" maxlength="25"
placeholder="{{ 'comment-page.enter-title' | translate}}" onkeypress="return event.keyCode !=13;"
[formControl]="subjectForm">
<mat-hint align="end">{{commentSubject.value.length}} / 25</mat-hint>
</mat-form-field>
<mat-form-field class="input-block">
<textarea matInput #commentBody placeholder="{{ 'comment-page.enter-comment' | translate}}"
matAutosizeMinRows=2 matAutosizeMaxRows=5 maxlength="255" [formControl]="bodyForm"></textarea>
<mat-hint align="end">{{commentBody.value.length}} / 255</mat-hint>
</mat-form-field>
<button mat-raised-button color="accent"
(click)="send(commentSubject.value, commentBody.value)">{{ 'comment-page.send' | translate}}</button>
</form>
</div>
<div fxLayout="row" fxLayoutAlign="center">
</div>
</div>
form {
display: block;
width: 100%;
max-width: 800px;
margin-bottom: 50px;
}
button {
margin-right: 20px;
min-width: 80px;
}
textarea {
line-height: 120%;
}
/* import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CommentsCreatorSharedComponent } from './comments-creator-shared.component';
describe('CommentsCreatorSharedComponent', () => {
let component: CommentsCreatorSharedComponent;
let fixture: ComponentFixture<CommentsCreatorSharedComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CommentsCreatorSharedComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CommentsCreatorSharedComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
}); */
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FormControl, Validators } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { Comment } from '../../../models/comment';
import { CommentService } from '../../../services/http/comment.service';
import { NotificationService } from '../../../services/util/notification.service';
import { AuthenticationService } from '../../../services/http/authentication.service';
import { User } from '../../../models/user';
import { CommentListComponent } from '../comment-list/comment-list.component';
@Component({
selector: 'app-comments-creator-shared',
templateUrl: './comments-creator-shared.component.html',
styleUrls: ['./comments-creator-shared.component.scss']
})
export class CommentsCreatorSharedComponent implements OnInit {
@ViewChild(CommentListComponent) child: CommentListComponent;
roomId: string;
roomShortId: string;
user: User;
private date = new Date(Date.now());
subjectForm = new FormControl('', [Validators.required]);
bodyForm = new FormControl('', [Validators.required]);
constructor(
protected authenticationService: AuthenticationService,
private route: ActivatedRoute,
private commentService: CommentService,
private notification: NotificationService,
private translationService: TranslateService) { }
ngOnInit(): void {
this.user = this.authenticationService.getUser();
this.roomShortId = this.route.snapshot.paramMap.get('roomId');
this.roomId = localStorage.getItem(`roomId`);
}
send(subject: string, body: string): void {
subject = subject.trim();
body = body.trim();
if (!subject && !body) {
this.translationService.get('comment-page.error-both-fields').subscribe(message => {
this.notification.show(message);
});
return;
}
if (!subject) {
this.translationService.get('comment-page.error-title').subscribe(message => {
this.notification.show(message);
});
return;
}
if (!body) {
this.translationService.get('comment-page.error-comment').subscribe(message => {
this.notification.show(message);
});
return;
}
this.commentService.addComment({
id: '',
roomId: this.roomId,
userId: this.user.id,
subject: subject,
body: body,
creationTimestamp: this.date.getTime(),
read: false,
revision: ''
} as Comment).subscribe(() => {
this.child.getComments();
this.notification.show(`Comment '${subject}' successfully created.`);
});
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment