From 4f347cfbcb339264b23cd0a9d3a2433dcaf6ed5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20K=C3=A4sler?= <tom.kaesler@mni.thm.de>
Date: Mon, 11 Nov 2019 14:09:37 +0100
Subject: [PATCH] Add tag to comment
Add select menu on creating a comment
Add small section in comment mat card for displaying the comments
---
.../create-comment/create-comment.component.html | 13 +++++++++++--
.../create-comment/create-comment.component.scss | 5 +++++
.../create-comment/create-comment.component.ts | 7 +++++++
.../shared/comment-list/comment-list.component.ts | 1 +
.../shared/comment/comment.component.html | 13 +++++++++++--
.../shared/comment/comment.component.scss | 8 ++++++++
.../websockets/ws-comment-service.service.ts | 2 +-
src/assets/i18n/creator/de.json | 1 +
src/assets/i18n/creator/en.json | 1 +
src/assets/i18n/participant/de.json | 1 +
src/assets/i18n/participant/en.json | 1 +
11 files changed, 48 insertions(+), 5 deletions(-)
diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.html b/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
index 93a93e4ee..f6bf1e6e0 100644
--- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
+++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
@@ -1,9 +1,18 @@
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
- <mat-form-field class="input-block">
+ <mat-form-field>
<textarea (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()" matInput #commentBody matTextareaAutosize matAutosizeMinRows=5 matAutosizeMaxRows=10 maxlength="250"
[formControl]="bodyForm" aria-labelledby="ask-question-description"></textarea>
- <mat-placeholder class="placeholder">{{ 'comment-page.enter-comment' | translate}}</mat-placeholder>
+ <mat-placeholder class="placeholder">{{ 'comment-page.enter-comment' | translate }}</mat-placeholder>
<mat-hint align="end"><span aria-hidden="true">{{commentBody.value.length}} / 250</span></mat-hint>
+
+ </mat-form-field>
+ <mat-form-field *ngIf="tags !== null">
+
+ <mat-label>{{ 'comment-page.tag' || translate }}</mat-label>
+ <mat-select [(ngModel)]="selectedTag" class="comment-tag">
+ <mat-option *ngFor="let tag of tags" value="{{tag}}">{{tag}}</mat-option>
+ </mat-select>
+
</mat-form-field>
</div>
<app-dialog-action-buttons
diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss b/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss
index 2cf078505..980812d8b 100644
--- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss
+++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss
@@ -29,6 +29,11 @@ mat-hint {
color: var(--on-surface) !important;
}
+.mat-select-value-text {
+ color: var(--on-surface);
+ caret-color: var(--on-surface);
+}
+
.placeholder {
color: var(--on-surface);
}
diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts b/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts
index f48f539b3..769c05d39 100644
--- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts
+++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts
@@ -19,6 +19,8 @@ export class CreateCommentComponent implements OnInit {
user: User;
roomId: string;
+ tags: string[];
+ selectedTag: string;
bodyForm = new FormControl('', [Validators.required]);
@@ -58,6 +60,11 @@ export class CreateCommentComponent implements OnInit {
comment.body = body;
comment.creatorId = this.user.id;
comment.createdFromLecturer = this.user.role === 1;
+ if (this.selectedTag !== null) {
+ console.log("FUCK YOU");
+ console.log(this.selectedTag);
+ comment.tag = this.selectedTag;
+ }
this.dialogRef.close(comment);
}
}
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 04399c86b..ce1dd93a3 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -247,6 +247,7 @@ export class CommentListComponent implements OnInit {
});
dialogRef.componentInstance.user = this.user;
dialogRef.componentInstance.roomId = this.roomId;
+ dialogRef.componentInstance.tags = this.room.extensions['tags'].tags;
dialogRef.afterClosed()
.subscribe(result => {
if (result) {
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index c1834f3f1..ef428be7e 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -79,9 +79,18 @@
<mat-icon class="voting-icon" [ngClass]="{'downVoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
</button>
</div>
- <div *ngIf="!isStudent" fxLayout="column" fxLayoutAlign="center">
- <span class="scoreCreator">{{comment.score}}</span>
+ <div *ngIf="!isStudent" fxLayout="column" fxLayoutAlign="center">
+ <span class="scoreCreator">{{comment.score}}</span>
+ </div>
+
</div>
+ <div *ngIf="comment.tag !== null && comment.tag !== ''" class="comment-tags">
+ <span class="comment-tag-icon">
+ <mat-icon svgIcon="comment_tag"></mat-icon>
+ </span>
+ <span class="comment-tag">
+ {{comment.tag}}
+ </span>
</div>
</div>
</mat-card>
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 3aaa73bcb..8eaeaa156 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -107,3 +107,11 @@ user.role
.moderator {
background-color: var(--moderator)!important;
}
+
+.comment-tags {
+ margin-top: 1rem;
+}
+
+.comment-tag {
+ vertical-align: 5px;
+}
diff --git a/src/app/services/websockets/ws-comment-service.service.ts b/src/app/services/websockets/ws-comment-service.service.ts
index 4333dc741..f4b0ea9e1 100644
--- a/src/app/services/websockets/ws-comment-service.service.ts
+++ b/src/app/services/websockets/ws-comment-service.service.ts
@@ -20,7 +20,7 @@ export class WsCommentServiceService {
constructor(private wsConnector: WsConnectorService) { }
add(comment: Comment): void {
- const message = new CreateComment(comment.roomId, comment.creatorId, comment.body);
+ const message = new CreateComment(comment.roomId, comment.creatorId, comment.body, comment.tag);
this.wsConnector.send(`/queue/comment.command.create`, JSON.stringify(message));
}
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index 1b999d7d6..05f22db33 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -95,6 +95,7 @@
"semicolon": "CSV-Format",
"send": "Senden",
"send-description": "Frage abschicken",
+ "tag": "Kategorie",
"vote-down": "Frage abwerten",
"vote-up": "Frage aufwerten"
},
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index 589ad3e3b..a765fb322 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -96,6 +96,7 @@
"semicolon": "CSV format",
"send": "Send",
"send-description": "Send question",
+ "tag": "Tag",
"vote-down": "Vote down",
"vote-up": "Vote up"
},
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index 0846e41c1..d5c5baf72 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -85,6 +85,7 @@
"search-box-input-description": "Hier kannst du nach Fragen suchen.",
"send": "Senden",
"send-description": "Frage abschicken",
+ "tag": "Kategorie",
"vote-down": "Frage abwerten",
"vote-up": "Frage aufwerten"
},
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index 85d49a006..d1e10e926 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -85,6 +85,7 @@
"search-box-input-description": "Here you can search for questions.",
"send": "Send",
"send-description": "Send question",
+ "tag": "Tag",
"vote-down": "Vote down",
"vote-up": "Vote up"
},
--
GitLab