feat(#22): show error on change, add to tag dialog

src/app/components/_documents/createNewDirOrFile/createNewDirOrFile.component.ts

@@ -1,5 +1,5 @@
 // Copyright (c) 2020 s-blu
-// 
+//
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
@@ -47,6 +47,7 @@ export class CreateNewDirOrFileComponent implements OnInit, OnDestroy {
   createNewItem() {
     const dialogRef = this.dialog.open(CreateNewItemDialogComponent, {
       data: { dirPath: this.path, typeOfDialog: this.type },
+      minWidth: 500,
     });
     zip(dialogRef.afterClosed(), this.directoryStore.tree$)
       .pipe(
@@ -61,7 +62,6 @@ export class CreateNewDirOrFileComponent implements OnInit, OnDestroy {
               return this.stripFileEndingPipe.transform(file.name).toLowerCase() === name.toLowerCase();
             });
             if (!existing) createObservable = this.documentService.createDocument(this.path, name);
-
           } else if (this.type === 'dir') {
             const existing = containingDir.dirs.find(dir => dir.name.toLowerCase() === name.toLowerCase());
             if (!existing) createObservable = this.directoryService.createDirectory(this.path, name);

src/app/components/_snapshots/tagDialog/tagDialog.component.html

@@ -8,16 +8,24 @@
 
 <span *transloco="let t; read: 'tagDialog'">
   <h1 mat-dialog-title>{{ t('title') }}</h1>
-  <div mat-dialog-content>
-    <p>{{ t('message', { date: data.lastSnapshotDate }) }}</p>
-    <mat-form-field>
-      <mat-label>{{ t('input') }}</mat-label>
-      <input matInput [(ngModel)]="data.tagname" />
-      <mat-error *ngIf="!isTagNameValid">BOOOOH!</mat-error>
-    </mat-form-field>
-  </div>
-  <div mat-dialog-actions>
-    <button mat-button (click)="cancel()">{{ t('cancel') }}</button>
-    <button mat-button [mat-dialog-close]="data.tagname">{{ t('create') }}</button>
-  </div>
+  <form [formGroup]="form" (ngSubmit)="submit(form.value)">
+    <div mat-dialog-content>
+      <p>{{ t('message', { date: data.lastSnapshotDate }) }}</p>
+      <mat-form-field>
+        <mat-label>{{ t('input') }}</mat-label>
+        <input
+          matInput
+          required
+          formControlName="name"
+          (keyup.enter)="submit(form.value)"
+          [errorStateMatcher]="matcher"
+        />
+        <mat-error *ngIf="form.get('name').errors?.forbiddenName">{{ t('forbiddenName') }}</mat-error>
+      </mat-form-field>
+    </div>
+    <div mat-dialog-actions>
+      <button mat-button type="button" (click)="cancel()">{{ t('cancel') }}</button>
+      <button mat-raised-button color="primary" type="submit" [disabled]="form.invalid">{{ t('create') }}</button>
+    </div>
+  </form>
 </span>

src/app/components/_snapshots/tagDialog/tagDialog.component.scss

@@ -1,6 +1,10 @@
 // Copyright (c) 2020 s-blu
-// 
+//
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+.mat-form-field,
+input {
+  width: 100%;
+}

src/app/components/_snapshots/tagDialog/tagDialog.component.ts

@@ -1,3 +1,4 @@
+import { OnChangeErrorMatcher } from './../../../utils/form.utils';
 // Copyright (c) 2020 s-blu
 // 
 // This Source Code Form is subject to the terms of the Mozilla Public
@@ -6,24 +7,33 @@
 
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormBuilder, FormControl } from '@angular/forms';
+import { NameSafetyValidator } from 'src/app/directives/nameSafetyValidator';
 
 @Component({
   selector: 'wy-tagDialog',
   templateUrl: './tagDialog.component.html',
   styleUrls: ['./tagDialog.component.scss'],
 })
 export class TagDialogComponent implements OnInit {
-  constructor(public dialogRef: MatDialogRef<TagDialogComponent>, @Inject(MAT_DIALOG_DATA) public data) {}
 
-  ngOnInit() {}
+  form; 
+  matcher = new OnChangeErrorMatcher();
+
+  constructor(private formBuilder: FormBuilder, public dialogRef: MatDialogRef<TagDialogComponent>, @Inject(MAT_DIALOG_DATA) public data) {}
 
-  isTagNameValid() {
-    console.log('isTagNameValid', this.data.tagName);
-    if (!this.data.tagName || this.data.tagName === '') return true;
-    return this.data.tagName.match(/(0-9A-Za-z:\/)/);
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      name: new FormControl('', [NameSafetyValidator('tag')]),
+    });
   }
 
   cancel(): void {
     this.dialogRef.close();
   }
+
+  submit(values) {
+    if (this.form.invalid) return;
+    this.dialogRef.close(values.name);
+  }
 }

src/app/components/createNewItemDialog/createNewItemDialog.component.html

@@ -13,12 +13,12 @@ <h1 mat-dialog-title>{{ t('title') }}</h1>
       <p class="message">{{ t('message') }}</p>
       <mat-form-field>
         <mat-label>{{ t('input') }}</mat-label>
-        <input matInput (keyup.enter)="submit(form.value)" required formControlName="name" />
+        <input matInput (keyup.enter)="submit(form.value)" required formControlName="name" [errorStateMatcher]="matcher"/>
+        <mat-error *ngIf="form.get('name').errors?.forbiddenName"
+          >{{ 'createDirOrFile.forbiddenName' | transloco }}
+        </mat-error>
+        <mat-error *ngIf="form.get('name').errors?.required">{{ 'createDirOrFile.required' | transloco }} </mat-error>
       </mat-form-field>
-      <mat-error *ngIf="form.get('name').errors?.forbiddenName"
-        >{{ 'createDirOrFile.forbiddenName' | transloco }}
-      </mat-error>
-      <mat-error *ngIf="form.get('name').errors?.required">{{ 'createDirOrFile.required' | transloco }} </mat-error>
     </div>
     <div mat-dialog-actions>
       <button mat-button type="button" (click)="cancel()">{{ t('cancel') }}</button>

src/app/components/createNewItemDialog/createNewItemDialog.component.scss

@@ -11,9 +11,4 @@ input {
 
 .message {
   padding: 1em 0;
-}
-
-mat-error {
-  margin-top: -1.8em;
-  font-size: 10px;
-}
+}

src/app/components/createNewItemDialog/createNewItemDialog.component.ts

@@ -9,6 +9,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { FormControl, FormBuilder } from '@angular/forms';
 import { NameSafetyValidator } from 'src/app/directives/nameSafetyValidator';
 import { slideInDownAnimation, slideInDownOnEnterAnimation } from 'angular-animations';
+import { OnChangeErrorMatcher } from 'src/app/utils/form.utils';
 
 @Component({
   selector: 'wy-createNewFileDialog',
@@ -19,6 +20,7 @@ import { slideInDownAnimation, slideInDownOnEnterAnimation } from 'angular-anima
 export class CreateNewItemDialogComponent implements OnInit {
   typeOfDialog = '';
   form;
+  matcher = new OnChangeErrorMatcher();
 
   constructor(
     public dialogRef: MatDialogRef<CreateNewItemDialogComponent>,
@@ -52,6 +54,7 @@ export class CreateNewItemDialogComponent implements OnInit {
   }
 
   submit(values) {
+    if (this.form.invalid) return;
     this.dialogRef.close(values.name);
   }
 }

src/app/directives/nameSafetyValidator.ts

@@ -7,7 +7,7 @@
 import { AbstractControl, ValidatorFn } from '@angular/forms';
 
 export function NameSafetyValidator(typeToCheck = 'explorer') {
-  const nameValidator = (control: AbstractControl): { [key: string]: boolean } | null => {
+  const nameValidator: ValidatorFn = (control: AbstractControl): { [key: string]: boolean } | null => {
     const forbidden = regex.test(control.value);
     return forbidden ? { forbiddenName: true } : null;
   };

src/app/utils/form.utils.ts

@@ -0,0 +1,10 @@
+import { ErrorStateMatcher } from '@angular/material/core';
+import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
+
+// From https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown
+export class OnChangeErrorMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}

src/assets/i18n/de.json

@@ -204,10 +204,11 @@
   },
   "tagDialog": {
     "title": "Einen Tag erstellen",
-    "message": "Erstelle einen Tag, um deine letzte Sicherung von {{date}} zu markieren und jederzeit wiederzufinden. Bitte keine Leerzeichen verwenden.",
+    "message": "Erstelle einen Tag, um deine letzte Sicherung von {{date}} zu markieren und jederzeit wiederzufinden.",
     "input": "Tagname",
     "cancel": "Abbrechen",
-    "create": "Erstellen"
+    "create": "Erstellen",
+    "forbiddenName": "Folgende Zeichen dürfen nicht verwendet werden: Leerzeichen  ~.^:?*[]@\\"
   },
   "git": {
     "message": {

src/assets/i18n/en.json

@@ -207,7 +207,8 @@
     "message": "Create a tag to mark your latest snapshot from {{date}}",
     "input": "name of tag",
     "cancel": "Cancel",
-    "create": "Create"
+    "create": "Create",
+    "forbiddenName": "The following characters cannot be used: Spaces ~.^:?*[]@\\"
   },
   "git": {
     "message": {