diff --git a/src/app/profile/edit/edit.component.html b/src/app/profile/edit/edit.component.html index 5cdc807977179fc107ceb277814fe96ac77ceec1..4624dda06c7a49e445b4d2d93d3b27a620c5a83f 100644 --- a/src/app/profile/edit/edit.component.html +++ b/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 }} / 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> --> diff --git a/src/app/shared/components/v3/textarea/textarea.component.html b/src/app/shared/components/v3/textarea/textarea.component.html index e0b00999ac8f9c7c4259a5b0092edfd5eb162b3a..a1a687f29705798353ac392b7d550abe251b5fba 100644 --- a/src/app/shared/components/v3/textarea/textarea.component.html +++ b/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> diff --git a/src/app/shared/components/v3/textarea/textarea.component.scss b/src/app/shared/components/v3/textarea/textarea.component.scss index bf9e173516e7433052fcf0a7c20f4a3fbcd4ac7e..e8c4a66c7f6a76144fc783734c47c82778703d07 100644 --- a/src/app/shared/components/v3/textarea/textarea.component.scss +++ b/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; diff --git a/src/app/shared/components/v3/textarea/textarea.component.ts b/src/app/shared/components/v3/textarea/textarea.component.ts index efb0cb024962421fdc09da18e937f26da1f642f4..21bfa724cdf2cc01fc3b2c91d09710f7cf4811ab 100644 --- a/src/app/shared/components/v3/textarea/textarea.component.ts +++ b/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); } }