Merge pull request #418 from DigitalExcellence/origin/bugfix/refactor-friday

Small bugfixes

Author: Yuqera

CHANGELOG.md

@@ -20,7 +20,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Changed the open graph tags in order to show a more appealing website preview [#405](https://github.com/DigitalExcellence/dex-frontend/issues/405)
+- Changed the open graph tags in order to show a more appealing website preview - [#405](https://github.com/DigitalExcellence/dex-frontend/issues/405)
+- Changed it so you can now clear query paramters like pagination or search by clicking on 'projects' again - [#401](https://github.com/DigitalExcellence/dex-frontend/issues/401)
 - Changed the design of the filtermenu on project overview page- [#287](https://github.com/DigitalExcellence/dex-frontend/issues/287)
 
 ### Deprecated
@@ -32,7 +33,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed issue where images in the project-details view would go outside the page - [#397](https://github.com/DigitalExcellence/dex-frontend/issues/397)
-- Fixed issue where builds failed due to Lighthouse budgets not being high enough [#411](https://github.com/DigitalExcellence/dex-backend/issues/411)
+- Fixed issue where builds failed due to Lighthouse budgets not being high enough - [#411](https://github.com/DigitalExcellence/dex-backend/issues/411)
+- Fixed issue where long collaborator names would mess up styling - [#354](https://github.com/DigitalExcellence/dex-frontend/issues/354)
+- Fixed issue where in some cases the alert banner would not disapear automatically - [#392](https://github.com/DigitalExcellence/dex-frontend/issues/392)
+- Fixed issue where opening a modal or long usernames would cause the page to get unaligned - [#400](https://github.com/DigitalExcellence/dex-frontend/issues/400)
 
 ### Security
 

src/app/components/app-layout/app-layout.component.html

@@ -29,8 +29,8 @@
     </button>
 
     <div class="collapse navbar-collapse" [ngClass]="{ 'show': navbarOpen }">
-      <div class="header-nav">
-        <a routerLink="project/overview" routerLinkActive="active" class="nav-link nav-text">Projects</a>
+      <div class="header-nav project-link">
+        <a (click)="onClickProjects()" routerLinkActive="active" class="nav-link nav-text">Projects</a>
         <a routerLink="project/add/source" routerLinkActive="active" class="nav-link nav-text">Add project</a>
       </div>
       <div class="header-nav account">

src/app/components/app-layout/app-layout.component.scss

@@ -129,6 +129,17 @@
     }
   }
 
+  .project-link a {
+    cursor: pointer;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+  }
+
   .account {
     display: flex;
     align-items: flex-start;

src/app/components/app-layout/app-layout.component.ts

@@ -88,6 +88,17 @@ export class AppLayoutComponent implements OnInit {
     this.displayBetaBanner = false;
   }
 
+  /**
+   * Navigate to project overview, if on project overview already reload page.
+   */
+  public onClickProjects() {
+    if (this.router.url === '/project/overview') {
+      location.reload();
+    } else {
+      this.router.navigate(['project/overview']);
+    }
+  }
+
   /**
    * Method which triggers when the user clicks the beta text in the header.
    * Displays the beta banner.

src/app/models/internal/alert-config.ts

@@ -23,5 +23,6 @@ export interface AlertConfig {
     preMessage?: string;
     mainMessage: string;
     dismissible?: boolean;
+    autoDismiss?: boolean;
     timeout?: number;
 }

src/app/modules/project/add/manual/manual.component.ts

@@ -172,6 +172,7 @@ export class ManualComponent implements OnInit {
         preMessage: 'The add project form is invalid',
         mainMessage: 'The project could not be saved, please fill all required fields',
         dismissible: true,
+        autoDismiss: true,
         timeout: this.alertService.defaultTimeout
       };
       this.alertService.pushAlert(alertConfig);
@@ -231,7 +232,8 @@ export class ManualComponent implements OnInit {
         type: AlertType.danger,
         preMessage: 'The add collaborator form is invalid',
         mainMessage: 'Collaborator could not be added',
-        dismissible: true
+        dismissible: true,
+        autoDismiss: true
       };
       this.alertService.pushAlert(alertConfig);
       return;
@@ -252,7 +254,8 @@ export class ManualComponent implements OnInit {
       const alertConfig: AlertConfig = {
         type: AlertType.danger,
         mainMessage: 'Collaborator could not be removed',
-        dismissible: true
+        dismissible: true,
+        autoDismiss: true
       };
       this.alertService.pushAlert(alertConfig);
       return;
@@ -270,6 +273,7 @@ export class ManualComponent implements OnInit {
             type: AlertType.success,
             mainMessage: 'Project was succesfully saved',
             dismissible: true,
+            autoDismiss: true,
             timeout: this.alertService.defaultTimeout
           };
           this.alertService.pushAlert(alertConfig);

src/app/modules/project/add/source/source.component.ts

@@ -105,6 +105,7 @@ export class SourceComponent implements OnInit {
           preMessage: 'Source uri/url was invalid',
           mainMessage: 'Source details could not be fetched',
           dismissible: true,
+          autoDismiss: true,
           timeout: this.alertService.defaultTimeout,
         };
         this.alertService.pushAlert(alertConfig);
@@ -137,6 +138,7 @@ export class SourceComponent implements OnInit {
             preMessage: 'You\'re not logged in!',
             mainMessage: 'You can only add a project when you\'re logged in.',
             dismissible: true,
+            autoDismiss: true,
             timeout: this.alertService.defaultTimeout,
           };
           this.alertService.pushAlert(alertConfig);

src/app/modules/project/details/details.component.html

@@ -149,7 +149,7 @@ <h2 class="project-title">{{ project.name }}</h2>
   </div>
 
   <ng-template #noProject>
-    <div class="row">
+    <div class="row not-found">
       <div class="offset-2 col-8">
         <h1>Project details</h1>
         <p>The project with the identifier "{{invalidId}}" could not be found.</p>

src/app/modules/project/details/details.component.scss

@@ -51,7 +51,7 @@
   }
 }
 
-.row {
+.not-found {
   margin: 0;
   max-width: 100%;
 }
@@ -74,6 +74,15 @@
   }
 }
 
+.modal-open {
+  .feedback-button-container {
+    right: 15.77%!important;
+  }
+  .background {
+    width: 101.8vw;
+  }
+}
+
 .project-modal-content {
   border: none;
   padding: 40px;

src/app/modules/project/details/details.component.ts

@@ -177,6 +177,7 @@ export class DetailsComponent implements OnInit {
         preMessage: 'Project could not be highlighted',
         mainMessage: 'Project id could not be found',
         dismissible: true,
+        autoDismiss: true,
         timeout: this.alertService.defaultTimeout
       };
       this.alertService.pushAlert(alertConfig);
@@ -209,6 +210,7 @@ export class DetailsComponent implements OnInit {
           type: AlertType.success,
           mainMessage: 'Project was successfully highlighted',
           dismissible: true,
+          autoDismiss: true,
           timeout: this.alertService.defaultTimeout
         };
         this.alertService.pushAlert(alertConfig);
@@ -275,6 +277,7 @@ export class DetailsComponent implements OnInit {
         mainMessage: 'Removal of project was successful',
         timeout: this.alertService.defaultTimeout,
         dismissible: true,
+        autoDismiss: true,
         type: AlertType.success
       });
       this.router.navigate(['project/overview']);
@@ -409,6 +412,7 @@ export class DetailsComponent implements OnInit {
         type: AlertType.warning,
         mainMessage: 'You need to be logged in to like a project',
         dismissible: true,
+        autoDismiss: true,
         timeout: this.alertService.defaultTimeout
       };
       this.alertService.pushAlert(alertConfig);
@@ -458,6 +462,7 @@ export class DetailsComponent implements OnInit {
           type: AlertType.success,
           mainMessage: 'Highlight was successfully updated',
           dismissible: true,
+          autoDismiss: true,
           timeout: this.alertService.defaultTimeout
         };
         this.alertService.pushAlert(alertConfig);

src/app/modules/project/edit/edit.component.html

@@ -163,11 +163,23 @@ <h3>Collaborator role</h3>
             <h3>Collaborators</h3>
           </div>
 
-          <div *ngFor="let collaborator of collaborators" class="col-5 collaborator-item">
+          <div *ngFor="let collaborator of collaborators; index as i" class="col-5 collaborator-item">
             <button type="button" class="btn btn-icon btn-danger" aria-label="error"
               (click)="onClickDeleteCollaborator(collaborator)"> <span aria-hidden="true"> &times; </span>
             </button>
-            <p class="collaborator-text large"><strong>{{collaborator?.fullName}}</strong>- {{collaborator?.role}}</p>
+            
+              <div class="collaborator-text-container w-100">
+
+                <div>
+                  <p class="collaborator-text large font-weight-bold" [tooltip]="collaborator?.fullName" delay="300">{{collaborator?.fullName}}</p>
+                </div>
+                <p class="collaborator-text large dash">-</p>
+                <div>
+                  <p class="collaborator-text large" [tooltip]="collaborator?.role" delay="300">{{collaborator?.role}}</p>
+                </div>     
+
+              </div>
+            
             <hr class="dashed">
           </div>
         </div>

src/app/modules/project/edit/edit.component.scss

@@ -95,11 +95,30 @@
       margin-left: 10px;
     }
 
-    .collaborator-text {
+    .collaborator-text-container {
       display: flex;
-      align-self: center;
-      margin: 0;
+      justify-content: flex-start;
     }
+      .collaborator-text-container .dash {
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+      .collaborator-text-container div {
+        max-width: 50%;
+      }
+        .collaborator-text.font-weight-bold {
+          margin-left: 10px;
+        }
+
+        .collaborator-text {
+          align-self: center;
+          margin: 0;
+          max-width: 100%;
+          
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
   }
 
   button {

src/app/modules/project/edit/edit.component.ts

@@ -15,10 +15,10 @@
  *   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
  */
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { catchError, finalize } from 'rxjs/operators';
+import { finalize } from 'rxjs/operators';
 import { CollaboratorAdd } from 'src/app/models/resources/collaborator-add';
 import { ProjectService } from 'src/app/services/project.service';
 import { Project } from 'src/app/models/domain/project';
@@ -186,7 +186,8 @@ export class EditComponent implements OnInit  {
         type: AlertType.danger,
         preMessage: 'The edit project form is invalid',
         mainMessage: 'The project could not be updated, please fill all required fields',
-        dismissible: true
+        dismissible: true,
+        autoDismiss: true
       };
       this.alertService.pushAlert(alertConfig);
       return;
@@ -258,7 +259,8 @@ export class EditComponent implements OnInit  {
         type: AlertType.danger,
         preMessage: 'The add collaborator form is invalid',
         mainMessage: 'Collaborator could not be added',
-        dismissible: true
+        dismissible: true,
+        autoDismiss: true
       };
       this.alertService.pushAlert(alertConfig);
       return;
@@ -279,7 +281,8 @@ export class EditComponent implements OnInit  {
       const alertConfig: AlertConfig = {
         type: AlertType.danger,
         mainMessage: 'Collaborator could not be removed',
-        dismissible: true
+        dismissible: true,
+        autoDismiss: true
       };
       this.alertService.pushAlert(alertConfig);
       return;
@@ -303,7 +306,9 @@ export class EditComponent implements OnInit  {
             type: AlertType.success,
             mainMessage: 'Project was succesfully updated',
             dismissible: true,
+            autoDismiss: true,
             timeout: this.alertService.defaultTimeout
+
           };
           this.alertService.pushAlert(alertConfig);
           this.router.navigate([`project/details/${this.project.id}`]);

src/app/modules/project/overview/project/project.component.html

@@ -93,9 +93,12 @@ <h3 class="project-name">{{project.name}}</h3>
         <em class='far fa-clock'></em>
         <div class="project-created-date">{{project.created | date: 'mediumDate'}}</div>
       </div>
-      <div (click)="userClicked($event)" class='item disabled'>
+      <div (click)="userClicked($event)" [tooltip]="projectUsername" class='item'>
         <em class='fa fa-user'></em>
         <div class="project-user-name">{{project.user.name}}</div>
+        <ng-template #projectUsername>
+          <p>{{project.user.name}}</p>
+        </ng-template>
       </div>
     </div>
   </div>

src/app/modules/project/overview/project/project.component.scss

@@ -238,6 +238,11 @@
           white-space: nowrap;
           text-overflow: ellipsis;
         }
+        .project-user-name {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
         i {
           justify-self: center;
           color: $light-mode-black;

src/app/services/alert.service.ts

@@ -49,8 +49,8 @@ export class AlertService {
 
     this.$activeAlerts.next(this.activeAlerts);
 
-    // Dismissible alerts with no timeout will not be automatically removed.
-    if (alertConfig.dismissible && (alertConfig.timeout == null || alertConfig.timeout <= 0)) {
+    // Alerts that aren't configured to auto dismiss will return.
+    if (alertConfig.autoDismiss == null || !alertConfig.autoDismiss) {
       return;
     }
 
@@ -69,13 +69,20 @@ export class AlertService {
     }
 
     timer(alertTimeOut).subscribe(() => {
-      const index = this.activeAlerts.findIndex(activeAlert => activeAlert === alertConfig);
-      if (index < 0) {
-        return;
-      }
-
-      this.activeAlerts.splice(index, 1);
-      this.$activeAlerts.next(this.activeAlerts);
+      this.removeAlert(alertConfig);
     });
   }
+
+  /**
+   * Method to remove an alert.
+   * @param alertConfig the alert to remove.
+   */
+  private removeAlert(alertConfig: AlertConfig): void {
+    const index = this.activeAlerts.findIndex(activeAlert => activeAlert === alertConfig);
+
+    if (index < 0) { return; }
+
+    this.activeAlerts.splice(index, 1);
+    this.$activeAlerts.next(this.activeAlerts);
+  }
 }