🐛Folders-Same-name-Documents

ngfire/angular/src/lib/auth/services/auth.service.ts

@@ -35,8 +35,8 @@ export class AuthService {
     firebase.auth().languageCode = langCode;
     return firebase.auth()
                .sendPasswordResetEmail( email )
-               .then(() => this._toastService.doSimpleToast('A password reset link has been sent to your email address.'))
-               .catch(() => this._toastService.doSimpleToast('An error occurred while attempting to reset your password. Please contact support.'));
+              //  .then(() => this._toastService.doSimpleToast('A password reset link has been sent to your email address.'))
+              //  .catch(() => this._toastService.doSimpleToast('An error occurred while attempting to reset your password. Please contact support.'));
   }
 
   public createUserWithEmailAndPassword(displayName: string, email: string, password: string, userProfile: UserProfile, roles: Roles)

ngfire/files/src/lib/file-manager/components/add-folder-modal/add-folder-modal.component.html

@@ -1,15 +1,21 @@
 <iote-modal>
   <div modalTitle>Add folder</div>
-
-  <form [formGroup]="createFolderForm" (ngSubmit)="createFolder(createFolderForm.value)">'
-
+    <div style="text-align: right"><span (click)="exitModal()" class="close-modal-btn"><i class="fas fa-times-circle"></i></span></div>
+    <div class="top-subtitle"></div>
+
+ <form [formGroup]="createFolderForm" (ngSubmit)="createFolder(createFolderForm.value)">'
     <mat-form-field>
       <mat-label>Name</mat-label>
       <input matInput type="text" formControlName="name" name="name" />
     </mat-form-field>
-
-    <div footer>
-      <button type="submit" [disabled]="!createFolderForm.valid"
+    <div *ngIf="(name.touched || name.dirty)" class="errorMessage">
+      <mat-error *ngIf="name.errors" >
+        "Name Already Exists"
+      </mat-error> 
+     </div> 
+
+     <div footer>
+      <button type="submit" [disabled]="!createFolderForm?.valid"
               fxLayoutAlign="end" mat-raised-button color="accent">
         Create
       </button>

ngfire/files/src/lib/file-manager/components/add-folder-modal/add-folder-modal.component.scss

@@ -0,0 +1,5 @@
+.errorMessage {
+    font-size: 13px;
+    padding-right: 45px;
+    margin-top: -10px;
+}

ngfire/files/src/lib/file-manager/components/add-folder-modal/add-folder-modal.component.ts

@@ -1,5 +1,6 @@
 import {Component, EventEmitter, OnInit, Input, Output, Inject } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators, ValidationErrors, ControlContainer } from '@angular/forms';
+import { ValidatorFn, AbstractControl } from '@angular/forms';
 
 import * as _ from 'lodash';
 import { Logger } from '@iote/bricks-angular';
@@ -18,29 +19,46 @@ export class AddFolderModalComponent implements OnInit
 
   // Form Data
   createFolderForm: FormGroup;
-
+  
   constructor(private _fb: FormBuilder,
               private _dialogRef: MatDialogRef<AddFolderModalComponent>,
               @Inject(MAT_DIALOG_DATA) private _data: any,
               private _logger: Logger)
   {}
-
+  
   ngOnInit()
   {
     this.createFolderForm = this._fb.group({
-      name: ['', [Validators.required]]
-    });
-  }
+      name: ['', [Validators.required, this.ValidateExisting(this._data.names) ]]
+      },
 
-  // --
-  // Create Bill
+    );
+
+  }
+
+// Create Bill
 
   createFolder(frm)
   {
     if(this.createFolderForm.valid)
     {
-      this._dialogRef.close(frm.name);
+       this._dialogRef.close(frm.name);
     }
   }
 
-}
+  exitModal = () => this._dialogRef.close();
+
+  ValidateExisting(names: string[]): ValidatorFn
+  {
+      return (control: AbstractControl): { [key: string]: any } | null => {
+          const returnVal = names.includes (control.value)
+                              ? { nameExists: true} as ValidationErrors
+                              : null;
+
+          return returnVal
+     }
+    }
+    get name(){
+      return this.createFolderForm.get('name');
+    }
+  }

ngfire/files/src/lib/file-manager/components/file-manager-breadcrumbs/file-manager-breadcrumbs.component.ts

@@ -8,6 +8,10 @@ import { MatDialog } from '@angular/material/dialog';
 import { AddFolderModalComponent } from '../add-folder-modal/add-folder-modal.component';
 import { DELETE_DIALOG_WIDTH } from '@iote/ui-workflows';
 import { SubSink } from 'subsink';
+import { ChildActivationEnd } from '@angular/router';
+
+import { BehaviorSubject } from 'rxjs';
+
 
 @Component({
   selector: 'ngfire-file-manager-breadcrumbs',
@@ -44,10 +48,13 @@ export class FileManagerCrumbComponent implements OnInit, OnDestroy
   filesSelected = (files: any) => this.curr.upload(files.target.files).subscribe();
 
   addFolder() {
-    this._sbS.sink = this._dialog.open(AddFolderModalComponent, { width: DELETE_DIALOG_WIDTH })
+    const names: string[] = this.curr.children.map(child => child.name)
+    this._sbS.sink = this._dialog.open(AddFolderModalComponent,
+                                          {width: DELETE_DIALOG_WIDTH, data: { names }})
                                 .afterClosed()
-                                .subscribe(name =>
-                                    this._sbS.sink = this.curr.addFolder(name).subscribe());
+                                .subscribe(
+                                   name =>
+                                       this._sbS.sink = this.curr.addFolder(name).subscribe());
   }
 
   private _toCrumbs(position: FolderIterator, first?: boolean) : FileManagerCrumb[]