feat(ui): account description

src/app/profile/edit/edit.component.html

@@ -187,16 +187,12 @@
       </app-v3-modal>
 
       <div *ngIf="currentTab === tabsEnum.description" class="descriptionTab">
-        <p class="subTitle">Description</p>
-        <div class="textareaBlock" fxLayout="column">
-          <textarea
-            rows="8"
-            placeholder="Exemple : formateur depuis 2 ans, je participe tous les ans à Super Demain."
-            maxlength="500"
-            [(ngModel)]="userProfile.description"
-          ></textarea>
-          <p class="descriptionLength">{{ userProfile.description?.length || 0 }}&nbsp;/&nbsp;500</p>
-        </div>
+        <app-textarea
+          [id]="'description'"
+          [label]="'Description'"
+          [placeholder]="'Exemple : formateur depuis 2 ans, je participe tous les ans à Super Demain.'"
+          [(value)]="userProfile.description"
+        />
       </div>
 
       <!-- <div *ngIf="currentTab === tabsEnum.avatar">Avater container</div> -->

src/app/shared/components/v3/textarea/textarea.component.html

@@ -3,12 +3,13 @@
 
   <span *ngIf="description" class="description" [ngClass]="{ disabled: disabled }">{{ description }}</span>
   <textarea
-    rows="5"
+    rows="8"
     [value]="value"
     [maxLength]="maxLength"
     [id]="id"
     [disabled]="disabled"
     [ngClass]="status"
+    [placeholder]="placeholder"
     (input)="onValueChange($event)"
   ></textarea>
 

src/app/shared/components/v3/textarea/textarea.component.scss

@@ -4,7 +4,7 @@
 .inputContainer {
   display: flex;
   flex-direction: column;
-  max-width: 300px;
+  width: 600px;
   &.disabled {
     cursor: not-allowed;
     label {
@@ -35,7 +35,6 @@
   textarea {
     margin-top: 8px;
     box-sizing: border-box;
-    max-width: 300px;
     border-radius: 4px;
     border: 1px solid $grey-4;
     padding: 8px 0 8px 16px;

src/app/shared/components/v3/textarea/textarea.component.ts

@@ -7,7 +7,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 })
 export class TextareaV3Component {
   /** HTML id associated with for */
-  @Input() id: string;
+  @Input({ required: true }) id: string;
 
   @Input() disabled = false;
 
@@ -26,12 +26,15 @@ export class TextareaV3Component {
   /** Additional text to display */
   @Input() statusText?: string;
 
+  @Input() placeholder?: string;
+
   /** Value */
   @Input() value = '';
 
   @Output() valueChange = new EventEmitter<string>();
 
   public onValueChange(event: Event): void {
-    this.valueChange.emit((event.target as HTMLTextAreaElement).value);
+    this.value = (event.target as HTMLTextAreaElement).value;
+    this.valueChange.emit(this.value);
   }
 }