add loader and a few other usability tweaks

agilesix · Mar 10, 2018 · 95024d0 · 95024d0
1 parent 68f848b
commit 95024d0
Show file tree

Hide file tree

Showing 16 changed files with 114 additions and 39 deletions.
diff --git a/frontend/src/app/article-edit/article-edit.component.html b/frontend/src/app/article-edit/article-edit.component.html
@@ -1,3 +1,6 @@
+<div *ngIf="submitting || loading" id="loading" class="loading">
+    <span class="fa fa-spinner fa-pulse fa-3x fa-fw"></span>
+</div>
 <div class="a2-header grey lighten-4">
         <div class="usa-grid">
             <div class="usa-width-one-half">
@@ -72,13 +75,9 @@ <h2>Edit the knowledge article <i class="blue-text">{{knowledgeArticle.title}}</
                 <br><hr/><br>
                 <fieldset class="grey lighten-4">
                     <div class="usa-grid">
-                            <div class="grey lighten-4">
-                                <h3>
-                                    Content
-                                </h3> 
-
+                            <div class="grey lighten-4">    
                                 <div *ngIf="edit">
-                                    <label for="body">Content <span class="red-text text-lighten-1">(*Required)</span></label>
+                                    <label for="body">Content</label>
                                     <md-editor id="body" name="body" [(ngModel)]="knowledgeArticle.body"></md-editor>
                                 </div>
                                 <div *ngIf="!edit">

diff --git a/frontend/src/app/article-edit/article-edit.component.ts b/frontend/src/app/article-edit/article-edit.component.ts
@@ -19,7 +19,7 @@ export class ArticleEditComponent implements OnInit {
   private sub: any;
   loading: boolean;
   stepLoading: boolean;
-  submitting: boolean;
+  submitting: boolean = false;
   public article;
   baseUrl: string = environment.token_auth_config.apiBase;
   public step;

diff --git a/frontend/src/app/article-new/article-new.component.html b/frontend/src/app/article-new/article-new.component.html
@@ -1,3 +1,6 @@
+<div *ngIf="submitting || loading" id="loading" class="loading">
+    <span class="fa fa-spinner fa-pulse fa-3x fa-fw"></span>
+</div>
 <div class="a2-header grey lighten-4">
     <div class="usa-grid">
         <div class="usa-width-one-half">
@@ -42,7 +45,13 @@ <h2>Add a new knowledge article</h2><br/>
                             <div class="file-field input-field">
                               <div class="btn blue">
                                 <span>Files</span>
-                                <input type="file" name="file_attachments" (change)="onFileInputChange($event)" multiple>
+                                <input 
+                                    type="file" 
+                                    name="file_attachments" 
+                                    (change)="onFileInputChange($event)" 
+                                    accept=".doc, .docx, .xls, .xlsx, application/pdf, .txt, .csv, .rtf, .htm, .msg, .ppt, .pptx, .tif, .xlsb, .jpg, .jpeg, .png"
+                                    multiple
+                                >
                               </div>
                               <div class="file-path-wrapper">
                                 <input class="file-path validate" type="text" placeholder="Upload one or more files">
@@ -54,12 +63,8 @@ <h2>Add a new knowledge article</h2><br/>
                     <fieldset class="grey lighten-4">
                         <div class="usa-grid">
                                 <div class="">
-                                    <h3>
-                                        Content
-                                    </h3>
-
                                     <div *ngIf="edit">
-                                        <label for="body">Content <span class="red-text text-lighten-1">(*Required)</span></label>
+                                        <label for="body">Content</label>
                                         <md-editor id="body" name="body" [(ngModel)]="knowledgeArticle.body"></md-editor>
                                     </div>
                                     <div *ngIf="!edit">

diff --git a/frontend/src/app/article-new/article-new.component.ts b/frontend/src/app/article-new/article-new.component.ts
@@ -15,7 +15,7 @@ export class ArticleNewComponent implements OnInit {
   stepId: number;
   private sub: any;
   loading: boolean;
-  submitting: boolean;
+  submitting: boolean = false;
   public article;
   baseUrl: string = environment.token_auth_config.apiBase;
   public step;
@@ -72,8 +72,7 @@ export class ArticleNewComponent implements OnInit {
           this.router.navigate(['/step/'+ this.stepId + '/article/' + this.article.id]);
         }
       },
-      err => console.error(err),
-      () => console.log('article: ', this.article)
+      err => console.error(err)
     );
   }
 
@@ -84,8 +83,7 @@ export class ArticleNewComponent implements OnInit {
         this.step = JSON.parse(data['_body']);
         this.loading = false;
       },
-      err => console.error(err),
-      () => console.log('step: ', this.step)
+      err => console.error(err)
     );
   } 
 

diff --git a/frontend/src/app/article/article.component.html b/frontend/src/app/article/article.component.html
@@ -1,3 +1,6 @@
+<div *ngIf="submitting || loading" id="loading" class="loading">
+    <span class="fa fa-spinner fa-pulse fa-3x fa-fw"></span>
+</div>
 <div class="a2-header grey lighten-4">
     <div class="usa-grid">
         <div class="usa-width-one-half">
@@ -21,7 +24,6 @@ <h6>
     </div>
 </div>
 <div class="usa-grid">
-    <div *ngIf="loading && !error" class="loading">Loading...</div>
     <div *ngIf="error" class="error">The requested article could not be found.</div>
     <div *ngIf="!loading" class="usa-width-two-thirds">
         <h2>{{article.title}}</h2>

diff --git a/frontend/src/app/article/article.component.ts b/frontend/src/app/article/article.component.ts
@@ -20,6 +20,7 @@ export class ArticleComponent implements OnInit {
   error: any;
   public article;
   baseUrl: string = environment.token_auth_config.apiBase;
+  submitting: boolean = false;
 
   constructor(public authTokenService:Angular2TokenService, private route: ActivatedRoute, private articleService: ArticleService) { }
 
@@ -47,6 +48,7 @@ export class ArticleComponent implements OnInit {
     });
 
     this.modal.fileSubmit.subscribe(submitFileData => {
+      this.submitting = true;
       let fileAttachmentData = {
         filename: submitFileData.filename, 
         knowledge_article_id: this.id, 
@@ -62,9 +64,11 @@ export class ArticleComponent implements OnInit {
             fileContents: null,
             fileInput: null
           }
+          this.submitting = false;
           this.modal.submitSuccess();
         },
         err => {
+          this.submitting = false;
           this.error = err;
           console.error(err);
         }
@@ -79,15 +83,18 @@ export class ArticleComponent implements OnInit {
 
   initModal() {
     this.modal.fileActions.subscribe(evt => {
+      this.submitting = true;
       switch (evt.action) {
         case 'approve': {
           this.articleService.approveFileAttachment(evt).subscribe(() => {
+            this.submitting = false;
             this.getKnowledgeArticle(this.article.id);
           });
           break;
         }
         case 'reject': {
           this.articleService.removeFileAttachment(evt).subscribe(() => {
+            this.submitting = false;
             this.getKnowledgeArticle(this.article.id);
           });
           break;

diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
@@ -1,7 +1,8 @@
 <!--<div *ngIf="hasRole('Admin')" class="usa-grid usa-grid-max-w usa-grid-top blue darken-2"></div>-->
+<div *ngIf="submitting || loading" id="loading" class="loading">
+    <span class="fa fa-spinner fa-pulse fa-3x fa-fw"></span>
+</div>
 <div *ngIf="(authService.userSignedIn$ | async)">
-
-
     <!-- ADMIN HOMEPAGE -->
 
     <div *ngIf="hasRole('Admin')" class="usa-grid usa-grid-max-w usa-grid-max-h blue darken-3">

diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
@@ -19,6 +19,7 @@ export class HomeComponent implements OnInit {
   public fileSubmissionCount;
   public workflow;
   public loading: boolean = true;
+  public submitting: boolean = false;
   public user = {
     filesLoading: true,
     fileAttachments:  {
@@ -56,7 +57,9 @@ export class HomeComponent implements OnInit {
   };
 
   refreshFileSubmissions() {
+    this.submitting = true;
     this.articleService.getFileAttachments({approved: false}).subscribe(data => {
+      this.submitting = false;
       this.modal['fileSubmissions'] = data.json();
       this.fileSubmissionCount = this.modal['fileSubmissions'].length;
     });
@@ -70,22 +73,26 @@ export class HomeComponent implements OnInit {
     this.refreshFileSubmissions();
     this.getUserFileAttachments();
     this.modal.fileActions.subscribe(evt => {
+      this.submitting = true;
       switch (evt.action) {
         case 'approve': {
           this.articleService.approveFileAttachment(evt).subscribe(() => {
+            this.submitting = true;
             this.refreshFileSubmissions();
             this.getWorkflow(1);
           });
           break;
         }
         case 'reject': {
           this.articleService.removeFileAttachment(evt).subscribe(() => {
+            this.submitting = false;
             this.refreshFileSubmissions();
             this.getWorkflow(1);
           });
           break;
         }
         case 'contributorDelete': {
+          this.submitting = false;
           this.getUserFileAttachments();
           break;
         }
@@ -94,12 +101,17 @@ export class HomeComponent implements OnInit {
 
     this.modal.packageFileSubmit.subscribe(
       packageFileAttachmentData => {
+        this.submitting = true;
         this.packageFileAttachmentService.createPackageFileAttachment(packageFileAttachmentData).subscribe(
           data => {
+            this.submitting = false;
             this.getWorkflowPackage(this.workflow.id);
             this.modal.submitSuccess();
           },
-          err => console.log(err)
+          err => {
+            this.submitting = false;
+            console.log(err)
+          }
         );
       }
     )
@@ -174,13 +186,16 @@ export class HomeComponent implements OnInit {
 
   removeFileAttachment(id) {
     if (confirm("Are you sure you want to delete this uploaded file? This cannot be undone.")) {
+      this.submitting = true;
       this.articleService.removeFileAttachment({file_attachment_id: id}).subscribe(
         data => {
+          this.submitting = false;
           this.getUserFileAttachments();
           this.getWorkflow(1);
         },
         err => {
           console.error('there is an error here');
+          this.submitting = false;
           this.modal.error = err;
         }
       );

diff --git a/frontend/src/app/login-form/login-form.component.html b/frontend/src/app/login-form/login-form.component.html
@@ -1,3 +1,6 @@
+<div *ngIf="submitting" id="loading" class="loading">
+    <span class="fa fa-spinner fa-pulse fa-3x fa-fw"></span>
+</div>
 <form (ngSubmit)="onSignInSubmit()" #f="ngForm" class="usa-form">
     <label for="email">Email</label>
     <input id="email"

diff --git a/frontend/src/app/login-form/login-form.component.ts b/frontend/src/app/login-form/login-form.component.ts
@@ -14,24 +14,26 @@ export class LoginFormComponent implements OnInit {
     email: '',
     password: ''
   };
-
+  submitting: boolean = false;
   @Output() onFormResult = new EventEmitter<any>();
 
   constructor(public authService: AuthService, public stepService: StepService, private router: Router) {}
 
   ngOnInit() {}
 
   onSignInSubmit() {
-
+    this.submitting = true;
     this.authService.logInUser(this.signInUser).subscribe(
         res => {
           if (res.status === 200) {
             this.onFormResult.emit({signedIn: true, res});
             this.router.navigate(['/home']);
             this.stepService.getWorkflowSteps();
+            this.submitting = false;
           }
         },
         err => {
+          this.submitting = false;
           console.log('err:', err);
           this.onFormResult.emit({signedIn: false, err});
         }

diff --git a/frontend/src/app/modal/modal.component.ts b/frontend/src/app/modal/modal.component.ts
@@ -9,7 +9,7 @@ import { ArticleService } from '../services/article.service';
 })
 export class ModalComponent implements OnInit {
   submitted: boolean;
-
+  submitting:boolean = false;
   @Input() modalContent;
 
   modalActions = new EventEmitter<string|MaterializeAction>();

diff --git a/frontend/src/app/register-form/register-form.component.html b/frontend/src/app/register-form/register-form.component.html
@@ -1,3 +1,6 @@
+<div *ngIf="submitting" id="loading" class="loading">
+    <span class="fa fa-spinner fa-pulse fa-3x fa-fw"></span>
+</div>
 <form (ngSubmit)="onSignUpSubmit()" #f="ngForm" class="usa-form">
     <label for="email">Email</label>
     <input id="email"

diff --git a/frontend/src/app/register-form/register-form.component.ts b/frontend/src/app/register-form/register-form.component.ts
@@ -9,8 +9,8 @@ import { Location } from '@angular/common';
   templateUrl: './register-form.component.html',
   styleUrls: ['./register-form.component.scss']
 })
-export class RegisterFormComponent implements OnInit {
-
+export class RegisterFormComponent implements OnInit { 
+  
   signUpUser = {
     email: '',
     name: '',
@@ -23,12 +23,12 @@ export class RegisterFormComponent implements OnInit {
   constructor(public authService: AuthService, public stepService: StepService, private router: Router, private location: Location) {}
 
   ngOnInit() {}
-
+  submitting:boolean = false; 
   onSignUpSubmit() {
-
-    this.authService.registerUser(this.signUpUser).subscribe(
+    this.submitting = true;
+    this.authService.registerUser(this.signUpUser).subscribe(      
         res => {
-          if (res.status === 200) {            
+          if (res.status === 200) {         
             this.onFormResult.emit({signedUp: true, res});
           }
         },

diff --git a/frontend/src/app/step/step.component.html b/frontend/src/app/step/step.component.html
@@ -1,7 +1,8 @@
 <br/><br/>
-
-<div class="usa-grid">
-    <div *ngIf="loading" class="loading">Loading...</div>
+<div *ngIf="submitting || loading" id="loading" class="loading">
+    <span class="fa fa-spinner fa-pulse fa-3x fa-fw"></span>
+</div>
+<div class="usa-grid">    
     <div class="usa-width-two-thirds">
         <div *ngIf="!loading">
             <div *ngIf="!edit">
@@ -71,7 +72,7 @@ <h2><small class="grey-text">Step {{step.id}}</small><br/>{{step.name}}</h2>
             <br/>
             <div role="search">
                 <form class="usa-search usa-search-big">
-                    <input id="search-field" type="search" name="search" class="browser-default" (click)="presentModal('comingSoon')">
+                    <input id="search-field" type="search" name="search" placeholder="Search for Knowledge Articles by name" class="browser-default" (click)="presentModal('comingSoon')">
                     <button type="submit" class="usa-button usa-button-secondary" (click)="presentModal('comingSoon')">
                         <span class="usa-search-submit-text"><i class="fa fa-search"></i></span>
                     </button>