(feat): add comments limit to comments poster

src/app/modules/comments/poster/poster.component.html

-
 <div class="m-comment m-comment--poster minds-block" *ngIf="!readonly">
 
  <div class="minds-avatar">
@@ -8,8 +7,8 @@
  </div>
 
  <div class="minds-body">
-
  <div class="m-comments-composer">
+
  <form (submit)="post($event)">
  <minds-textarea
  #message="Textarea"
@@ -27,6 +26,7 @@
 
  <div class="mdl-card__actions">
  <!-- Attachements -->
+
  <div class="attachment-button" [ngClass]="{ 'mdl-color-text--amber-500': attachment.hasFile() }">
  <i class="material-icons">attachment</i>
  <input type="file" id="file" #file name="attachment" (change)="uploadAttachment(file, $event)"/>
@@ -47,6 +47,17 @@
  >
  <i class="material-icons">send</i>
  </a>
+
+ <div
+ [class.hidden]="content.length === 0"
+ class="m-commentPoster__limit"
+ [class.m-commentPoster__limit--maxed]="content.length > 1500"
+ >
+ <span class="m-commentPosterLimit__inputed">
+ {{ content.length }}
+ </span>
+ <span> / 1500</span>
+ </div>
  </div>
 
  <!-- Rich embed preview -->
@@ -79,7 +90,6 @@
  </div>
  </div>
  </div>
-
  </div>
 
 </div>

src/app/modules/comments/poster/poster.component.scss

+@import "themes";
+
+.m-commentPoster__limit {
+ font-size: 10px;
+ color: $grey-600;
+ padding: 8px 0;
+ cursor: default;
+}
+
+.m-commentPoster__limit--maxed {
+ @include m-theme() {
+ color: themed($m-red);
+ }
+}
+
+.m-commentPosterLimit__inputed {
+ font-weight: 600;
+}
+
+.m-comment--poster {
+ padding: 8px 12px 12px 12px;
+}

src/app/modules/comments/poster/poster.component.ts

@@ -46,6 +46,7 @@ export class CommentPosterComponent {
  comments: Array<any> = []; // TODO: remove this
  canPost: boolean = true;
  inProgress: boolean = false;
+ maxLength: number = 1500;
 
  constructor(
  public session: Session,
@@ -67,6 +68,10 @@ export class CommentPosterComponent {
  async post(e) {
  e.preventDefault();
 
+ if (this.content.length > this.maxLength) {
+ return;
+ }
+
  if (this.inProgress)
  return;
 
@@ -107,7 +112,6 @@ export class CommentPosterComponent {
  this.posted$.next({ comment, index: this.currentIndex });
  console.error('Error posting', e);
  }
-
  this.inProgress = false;
  this.detectChanges();
  }
@@ -176,6 +180,9 @@ export class CommentPosterComponent {
  }
 
  postEnabled() {
+ if (this.content.length > this.maxLength) {
+ return false;
+ }
  return true; // TODO: fix
  }