Add maxLength when creating new plan or renaminf existing

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()

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()

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>

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,
+      ]),
     });
   }