diff --git a/pdb-js/src/app/dashboard-page/dashboard-page.component.ts b/pdb-js/src/app/dashboard-page/dashboard-page.component.ts index 9831b76..9f78b14 100644 --- a/pdb-js/src/app/dashboard-page/dashboard-page.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard-page.component.ts @@ -46,7 +46,8 @@ export class DashboardPageComponent implements OnInit { createNewDashboard() { const dialogRef = this.dialog.open(NewDashboardComponent, { - data: {name: "", description: ""} + data: {name: "", description: ""}, + width: '30em' }); dialogRef.afterClosed().subscribe((result: DashboardCreationData) => { diff --git a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.html b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.html index b9a6153..6e76fe3 100644 --- a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.html +++ b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.html @@ -3,18 +3,27 @@ overflow: hidden; } -

Create a new dashboard

-
- - Name - - - - Description - - -
-
- - -
+
+

Create a new dashboard

+
+ + Name + + Name must be between one and 64 characters. + + + Description + + +
+
+ + +
+
+ \ No newline at end of file diff --git a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts index dc3f0ea..99661ab 100644 --- a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts +++ b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts @@ -1,6 +1,7 @@ import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core'; import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; import { DashboardCreationData } from 'src/app/dashboard.service'; +import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; @Component({ selector: 'app-new-dashboard', @@ -8,6 +9,12 @@ import { DashboardCreationData } from 'src/app/dashboard.service'; }) export class NewDashboardComponent implements OnInit { + + registerForm = new FormGroup({ + name: new FormControl('', [Validators.pattern(/^[^\s]+.{0,63}$/), Validators.required]), + description: new FormControl('', [Validators.maxLength(65535)]), + }); + @ViewChild('name') nameInput!: ElementRef; constructor(public dialogRef: MatDialogRef, diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss index fe06b4a..0996baf 100644 --- a/pdb-js/src/styles.scss +++ b/pdb-js/src/styles.scss @@ -190,8 +190,8 @@ mat-form-field.pdb-form-mid { mat-form-field.pdb-form-wide { width: 10em; } -.mat-mdc-form-field-subscript-wrapper { - display: none; +pdb-visualization-page .mat-mdc-form-field-subscript-wrapper { + display: none;/**/ } .errorPanel {