feat: add spinner

Angular2Guy · Nov 19, 2023 · 3da90d7 · 3da90d7
1 parent fe1a0cf
commit 3da90d7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/frontend/src/angular/src/app/doc-import/doc-import.component.html b/frontend/src/angular/src/app/doc-import/doc-import.component.html
@@ -1,10 +1,8 @@
 <h1 mat-dialog-title i18n="@@docimportImportFile">Import file</h1>
 <div mat-dialog-content>
   <p i18n="@@docimportFileToImport">File to import</p>
-  <!--<mat-form-field>
-    <mat-label i18n="@@docimportFilename">Filename</mat-label>-->
-    <input type="file" (change)="onFileInputChange($event)">    
-  <!--</mat-form-field>-->
+    <input *ngIf="!uploading" type="file" (change)="onFileInputChange($event)">
+    <div class="upload-spinner"><mat-spinner *ngIf="uploading"></mat-spinner></div>    
   <div *ngIf="!!file">
 	<ul>
       <li>Name: {{file.name}}</li>
@@ -15,5 +13,5 @@ <h1 mat-dialog-title i18n="@@docimportImportFile">Import file</h1>
 </div>
 <div mat-dialog-actions>
   <button mat-button (click)="cancel()" i18n="@@cancel">Cancel</button>
-  <button mat-flat-button color="primary" [disabled]="!file" (click)="upload()" i18n="@@docimportUpload">Upload</button>
+  <button mat-flat-button color="primary" [disabled]="!file || uploading" (click)="upload()" i18n="@@docimportUpload">Upload</button>
 </div>
diff --git a/frontend/src/angular/src/app/doc-import/doc-import.component.scss b/frontend/src/angular/src/app/doc-import/doc-import.component.scss
@@ -10,4 +10,8 @@
    See the License for the specific language governing permissions and
    limitations under the License.
  */
-
+ .upload-spinner {
+	 display: flex;
+	 width: 100%;
+	 justify-content: center;
+ }
diff --git a/frontend/src/angular/src/app/doc-import/doc-import.component.ts b/frontend/src/angular/src/app/doc-import/doc-import.component.ts
@@ -12,7 +12,8 @@
  */
 import { Component, DestroyRef, Inject, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; 
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatButtonModule} from '@angular/material/button';
 import {FormsModule} from '@angular/forms';
@@ -28,7 +29,7 @@ export interface DocImportData {
 @Component({
   selector: 'app-docimport',
   standalone: true,
-  imports: [CommonModule,MatFormFieldModule, MatDialogModule,MatButtonModule, MatInputModule, FormsModule],
+  imports: [CommonModule,MatFormFieldModule, MatDialogModule,MatButtonModule, MatInputModule, FormsModule, MatProgressSpinnerModule],
   templateUrl: './doc-import.component.html',
   styleUrls: ['./doc-import.component.scss']
 })
@@ -45,12 +46,14 @@ export class DocImportComponent {
 	}
 
 	protected upload(): void {
-		console.log(this.file);
+		//console.log(this.file);
 		if(!!this.file) {
 		  const formData = new FormData();
           formData.append('file', this.file as Blob, this.file.name as string);
           this.documentService.postDocumentForm(formData).pipe(tap(() => {this.uploading = true;}), takeUntilDestroyed(this.destroyRef))
-            .subscribe(result => {this.uploading = false; console.log(result); this.dialogRef.close();});
+            .subscribe(result => {this.uploading = false; 
+            //console.log(result); 
+            this.dialogRef.close();});
         }
 	}