CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Set autosize and min two rows in textarea controls (#1604)

Browse Source 
Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
This commit is contained in:
José Alberto Hernández
2022-12-23 01:01:53 -06:00
committed by GitHub
co-authored by Jose Alberto Hernandez
parent 7bbab6423e
commit 475059a974
111 changed files with 915 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/system/manage-surveys/create-survey/create-survey.component.html
+10 -10
View File
@@ -17,7 +17,7 @@
Key is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Name</mat-label>
<input matInput maxlength="255" required formControlName="name">
@@ -39,7 +39,7 @@
<mat-form-field fxFlex="98%">
<mat-label>Description</mat-label>
<textarea matInput formControlName="description"></textarea>
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
<div fxFlexFill fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="!questionDatas.length">
@@ -78,7 +78,7 @@
Key is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48">
<mat-label>Text</mat-label>
<input matInput maxlength="255" required formControlName="text">
@@ -89,7 +89,7 @@
<mat-form-field fxFlex="98%">
<mat-label>Description</mat-label>
<textarea matInput formControlName="description"></textarea>
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
<mat-divider [inset]="true"></mat-divider>
@@ -101,11 +101,11 @@
Add Option
</button>
</div>
<div cdkDropList (cdkDropListDropped)="dropResponse($event, questionIndex)" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%">
<div cdkDrag cdkDragLockAxis="y" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" formArrayName="responseDatas" *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index;">
<div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
<mat-form-field fxFlex="43%">
@@ -131,10 +131,10 @@
<div class="delete-wrapper">
<button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)" [disabled]="getResponseDatas(questionIndex).controls.length === 1">
<fa-icon icon="trash" size="lg"></fa-icon>
</button>
</button>
</div>
</div>
</div>
</div>
@@ -154,11 +154,11 @@
Add Question
</button>
<button mat-raised-button color="primary" [disabled]="!surveyForm.valid">Submit</button>
</mat-card-actions>
</mat-card-actions>
</div>
</mat-card>
</mat-card>
</div>
src/app/system/manage-surveys/edit-survey/edit-survey.component.html
+46 -46
View File
@@ -1,15 +1,15 @@
<div class="container">
<form [formGroup]="surveyForm" (ngSubmit)="submit()">
<div fxLayout="column" fxLayoutGap="4%">
<mat-card>
<mat-card-content>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<mat-label>Key</mat-label>
<input matInput maxlength="32" required formControlName="key">
@@ -17,7 +17,7 @@
Key is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Name</mat-label>
<input matInput maxlength="255" required formControlName="name">
@@ -25,7 +25,7 @@
Name is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Country Code</mat-label>
<input matInput maxlength="2" required formControlName="countryCode">
@@ -36,26 +36,26 @@
Country Code <strong>must consist of 2 alphabetic characters</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="98%">
<mat-label>Description</mat-label>
<textarea matInput formControlName="description"></textarea>
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
</div>
</mat-card-content>
</mat-card>
<div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
<mat-card cdkDrag cdkDragLockAxis="y" formArrayName="questionDatas" *ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast">
<mat-card-content>
<div fxFlexFill fxLayoutGap="2%" fxLayout.lt-md="column" fxLayout="row wrap" [formGroupName]="questionIndex">
<div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
<h2 class="mat-h2">Question {{ questionIndex + 1 }}</h2>
<button mat-raised-button color="warn" (click)="removeQuestion(questionIndex)" [disabled]="questionDatas.controls.length === 1">
@@ -63,7 +63,7 @@
Delete Question
</button>
</div>
<mat-form-field fxFlex="48%">
<mat-label>Key</mat-label>
<input matInput maxlength="32" required formControlName="key">
@@ -71,7 +71,7 @@
Key is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48">
<mat-label>Text</mat-label>
<input matInput maxlength="255" required formControlName="text">
@@ -79,14 +79,14 @@
Text is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="98%">
<mat-label>Description</mat-label>
<textarea matInput formControlName="description"></textarea>
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
<mat-divider [inset]="true"></mat-divider>
<div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
<h4 class="mat-h4">Options</h4>
<button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
@@ -94,13 +94,13 @@
Add Option
</button>
</div>
<div cdkDropList (cdkDropListDropped)="dropResponse($event, questionIndex)" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%">
<div cdkDrag cdkDragLockAxis="y" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" formArrayName="responseDatas" *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index;">
<div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
<mat-form-field fxFlex="43%">
<mat-label>Text</mat-label>
<input matInput required formControlName="text">
@@ -108,7 +108,7 @@
Text is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="43%">
<mat-label>Value</mat-label>
<input matInput required formControlName="value">
@@ -119,27 +119,27 @@
Value <strong>must be an integer between -9999 and 9999</strong>
</mat-error>
</mat-form-field>
<div fxFlex="8%">
<div class="delete-wrapper">
<button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)" [disabled]="getResponseDatas(questionIndex).controls.length === 1">
<fa-icon icon="trash" size="lg"></fa-icon>
</button>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</mat-card-content>
<div>
<mat-card-actions *ngIf="isLast" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
<button type="button" mat-raised-button (click)="cancelSurvey()">Cancel</button>
<button type="button" mat-raised-button color="primary" (click)="addQuestion()">
@@ -147,16 +147,16 @@
Add Question
</button>
<button mat-raised-button color="primary" [disabled]="!surveyForm.valid">Edit Survey</button>
</mat-card-actions>
</mat-card-actions>
</div>
</mat-card>
</mat-card>
</div>
</div>
</form>
</div>
</div>