feat: show description counter

farscrl · Dec 4, 2023 · 4ca3a68 · 4ca3a68
1 parent 2a27e1a
commit 4ca3a68
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/src/app/user-area/pages/new-event/new-event.component.html b/src/app/user-area/pages/new-event/new-event.component.html
@@ -26,6 +26,7 @@ <h1>Registrar in’occurrenza</h1>
                 *</label>
             <textarea formControlName="description" class="form-control" id="description" style="height: 150px"
                       [class.is-invalid]="isFieldInvalid('description')"></textarea>
+            <span id="description-size">{{ descriptionSize }}</span>
             <div class="invalid-feedback" *ngIf="isFieldInvalid('description')">
                 <ng-container *ngIf="isFieldError('description', 'required')">
                     Endatescha p.pl. ina descripziun.

diff --git a/src/app/user-area/pages/new-event/new-event.component.scss b/src/app/user-area/pages/new-event/new-event.component.scss
@@ -9,6 +9,14 @@ h2 {
     margin-top: 36px;
 }
 
+#description-size {
+    float: right;
+    margin-top: -30px;
+    margin-right: 10px;
+    font-size: .8rem;
+    color: #667080;
+}
+
 .occurrence-item {
     border-left: 3px solid black;
     margin-bottom: 16px;

diff --git a/src/app/user-area/pages/new-event/new-event.component.ts b/src/app/user-area/pages/new-event/new-event.component.ts
@@ -311,6 +311,10 @@ export class NewEventComponent implements OnInit {
         this.modalService.open(NetiquetteComponent, {size: 'xl', centered: true});
     }
 
+    get descriptionSize(): string {
+        return this.f.get('description')?.value.length + ' / 750';
+    }
+
     private transformToEventDto(isDraft: boolean): EventDto {
         let newState: EventStatusTypes = 'DRAFT';
         if (!isDraft) {