diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts index 4858e43c5ffde65aca39971061420b2957aeb8cc..2dafbf4d3692a99f488dcc7646ae21c38cb2d31f 100644 --- a/src/app/degree-planner/degree-planner.component.ts +++ b/src/app/degree-planner/degree-planner.component.ts @@ -119,6 +119,7 @@ export class DegreePlannerComponent implements OnInit, OnDestroy { title: 'Add degree plan', confirmText: 'Save', inputName: 'Plan name', + maxLength: 100, }, }) .afterClosed() @@ -139,6 +140,7 @@ export class DegreePlannerComponent implements OnInit, OnDestroy { title: 'Rename plan', confirmText: 'Save', inputName: 'Plan name', + maxLength: 100, }, }) .afterClosed() diff --git a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts index cccb484d29ed09674dff42cc694491b904ff4099..73c2d74430e64bec19ec3979de16405e0300985f 100644 --- a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts +++ b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts @@ -60,6 +60,7 @@ export class SidenavMenuItemComponent implements OnDestroy { title: 'Add degree plan', confirmText: 'Save', inputName: 'Plan name', + maxLength: 100, }, }) .afterClosed() diff --git a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html index 6a1b72618e0fa09b74ae3e11fa631343a245c6b1..12401e5233e8039d7992b655f4cdb4356022c531 100644 --- a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html +++ b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html @@ -27,11 +27,17 @@ fxLayoutAlign="space-around none" style="padding: 12px 22px;"> <mat-form-field> - <input + <textarea cdkFocusInitial + formControlName="value" matInput - [placeholder]="inputName" - formControlName="value"/> + mat-autosize="true" + resizeToFitContent + [placeholder]="inputName"> + </textarea> + <mat-hint align="end"> + {{ inputForm.value.value.length }} / {{ maxLength }} + </mat-hint> </mat-form-field> </form> </mat-dialog-content> diff --git a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.ts b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.ts index 6a250e2e50013c959ea242805f8584962d460fc5..0207f1b37921e2b8f9bfa90f80a7d65a0644dae6 100644 --- a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.ts +++ b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.ts @@ -10,6 +10,7 @@ import { } from '@angular/forms'; import { Observable } from 'rxjs'; import { Year } from '@app/core/models/year'; +import { NgSwitch } from '@angular/common'; @Component({ selector: 'cse-prompt-dialog', @@ -24,6 +25,7 @@ export class PromptDialogComponent implements OnInit { tooltip?: string; cancelText: string; confirmText: string; + maxLength: number; confirmColor: string; public termsByYear$: Observable<Year[]>; @@ -31,7 +33,6 @@ export class PromptDialogComponent implements OnInit { initialValue: string; constructor( private dialogRef: MatDialogRef<PromptDialogComponent>, - private fb: FormBuilder, @Inject(MAT_DIALOG_DATA) data: any, ) { const { @@ -41,6 +42,7 @@ export class PromptDialogComponent implements OnInit { initialValue = '', placeholder, tooltip, + maxLength, cancelText = 'Cancel', confirmText = 'Confirm', confirmColor = 'primary', @@ -53,6 +55,7 @@ export class PromptDialogComponent implements OnInit { this.tooltip = tooltip; this.cancelText = cancelText; this.confirmText = confirmText; + this.maxLength = maxLength; this.confirmColor = confirmColor; this.initialValue = initialValue; @@ -63,8 +66,11 @@ export class PromptDialogComponent implements OnInit { ngOnInit() { // Deafults for input form - this.inputForm = this.fb.group({ - value: [this.initialValue, Validators.required], + this.inputForm = new FormGroup({ + value: new FormControl(this.initialValue || '', [ + Validators.maxLength(this.maxLength), + Validators.required, + ]), }); }