Skip to content

Commit

Permalink
Merge pull request #246 from DigitalExcellence/bug/project-details-in…
Browse files Browse the repository at this point in the history 
…valid-string

Bug: project details invalid string
  • Loading branch information
@StijnGroenen
StijnGroenen authored Jun 22, 2020
2 parents 6244425 + 87112fc commit 10f2643
Show file tree
Hide file tree
Showing 8 changed files with 146 additions and 97 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Added localStorage Utils class to access the localStorage and it's keys from one central piece of code - [#238](https://github.com/DigitalExcellence/dex-frontend/issues/238)
- Changed the wizard requests, fixed URL not supported error and added message - [#236](https://github.com/DigitalExcellence/dex-frontend/issues/236)
- Changed styling of project overview filters and project add collaborators to match the designs - [#242](https://github.com/DigitalExcellence/dex-frontend/issues/242)
- Changed when Sentry logs http errors - [#231](https://github.com/DigitalExcellence/dex-frontend/issues/231)
- Changed text when there are no Highlights - [#221](https://github.com/DigitalExcellence/dex-frontend/issues/221)

### Deprecated

Expand All @@ -74,5 +76,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fixed the layout of project embed pages breaking on smaller viewports - [#223](https://github.com/DigitalExcellence/dex-frontend/issues/223)
- Fixed issue where beta banner was not dismissible - [#239](#https://github.com/DigitalExcellence/dex-frontend/issues/239)
- Fixed styling to match the designs, replaced images on home and sign in - [#233](https://github.com/DigitalExcellence/dex-frontend/issues/233)
- Fixed issue where invalid project id would trigger error - [#235](https://github.com/DigitalExcellence/dex-frontend/issues/235)

### Security
20 changes: 17 additions & 3 deletions src/app/interceptors/http.interceptor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ enum HttpMethods {
'PATCH'
}


/**
* Interceptor which handles error handling and displaying for http requests.
*/
Expand All @@ -56,10 +57,15 @@ export class HttpErrorInterceptor implements HttpInterceptor {
* This can be used to not display error message for certain requests.
*/
private readonly ignoredEndpoints: IgnoredRequests[] = [
{ endpoint: 'highlight', method: HttpMethods.GET },
{ endpoint: 'highlight/project/', method: HttpMethods.GET },
{ endpoint: 'wizard', method: HttpMethods.GET },
];

private readonly ignoredStatusCodes: number[] = [
404
];

constructor(
private alertService: AlertService
) { }
Expand Down Expand Up @@ -105,10 +111,18 @@ export class HttpErrorInterceptor implements HttpInterceptor {
this.alertService.pushAlert(this.createErrorAlertConfig(httpErrorResponse.error.title, httpErrorResponse.error.detail));
}

if (environment.production) {
// Log error to sentry.
Sentry.captureException(new Error(` http error:${httpErrorResponse.status} - ${httpErrorResponse.message}`));
// Return if the status codes are ignored.
if (this.ignoredStatusCodes.includes(httpErrorResponse.status)) {
return EMPTY;
}

// Stop error from continuing if application is not run in production.
if (!environment.production) {
return EMPTY;
}

// Log error to sentry.
Sentry.captureException(new Error(` http error:${httpErrorResponse.status} - ${httpErrorResponse.message}`));
// Stop error from continuing.
return EMPTY;
})
Expand Down
12 changes: 11 additions & 1 deletion src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,21 @@
-->
<div class="highlights">

<div class="row">
<div class="col-12">
<h2>Highlighted projects</h2>
<p class="large">Our top {{highlights.length}} projects</p>

<ng-container *ngIf="highlights && highlights.length > 0; else noHighlights">
<p class="large">Our top {{highlights.length}} projects</p>
</ng-container>
<ng-template #noHighlights>
<p class="large">Currently there are no highlighted projects</p>
</ng-template>

</div>
</div>

<div class="row">
<div *ngFor="let highlight of highlights" class="col-md-12 col-lg-4">
<div class="card" routerLink="/project/details/{{highlight.projectId}}">
Expand All @@ -34,4 +43,5 @@ <h3>{{highlight.project.name}}</h3>
</div>
</div>
</div>

</div>
15 changes: 4 additions & 11 deletions src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,15 @@ export class TopHighlightCardsComponent implements OnInit {
* Boolean to determine whether the component is loading the information from the api.
*/
public highlightsLoading = true;
constructor(private router: Router, private projectService: HighlightService) {}
constructor(private router: Router, private projectService: HighlightService) { }

ngOnInit(): void {
this.projectService
.getAll()
.pipe(finalize(() => (this.highlightsLoading = false)))
.subscribe(
(result) => {
this.highlights = this.generateSampleSizeOf(result, 3);
},
(error: HttpErrorResponse) => {
if (error.status !== 404) {
console.log('Could not retrieve the highlights');
}
}
);
.subscribe((result) => {
this.highlights = this.generateSampleSizeOf(result, 3);
});
}
private generateSampleSizeOf(population: string | any[], k: number) {
/*
Expand Down
14 changes: 12 additions & 2 deletions src/app/modules/project/details/details.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
-->

<div *ngIf="project">
<div *ngIf="project; else noProject">
<div class="row">
<div class="col-3 project-metadata">
<div class="project-icon"><img alt="Code project" src="assets/images/code.svg"></div>
Expand Down Expand Up @@ -104,4 +104,14 @@ <h1 class="project-title">{{ project.name }}</h1>
</div>
</div>
</div>
</div>
</div>

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

</div>
</div>
</ng-template>
8 changes: 7 additions & 1 deletion src/app/modules/project/details/details.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,11 @@ export class DetailsComponent implements OnInit {
public displayHighlightButton = false;
public displayEmbedButton = false;

/**
* Property for storting the invalidId if an invalid project id was entered.
*/
public invalidId: string;

private currentUser: User;

constructor(
Expand All @@ -77,7 +82,8 @@ export class DetailsComponent implements OnInit {
return;
}
const id = Number(routeId);
if (id < 1) {
if (id == null || Number.isNaN(id) || id < 1) {
this.invalidId = routeId;
return;
}

Expand Down
163 changes: 85 additions & 78 deletions src/app/modules/project/edit/edit.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,113 +17,120 @@
-->


<div class="row">
<div class="offset-2 col-8">
<h1>Edit project</h1>
<form [formGroup]="editProjectForm" class="project-form">

<div class="row">
<div class="col-6">
<div>
<h3>Project name*</h3>
<input placeholder="Digital Excellence" formControlName="name" required [ngModel]="project?.name">

<ng-container *ngIf="project; else noProject">
<form [formGroup]="editProjectForm" class="project-form">

<div class="row">
<div class="col-6">
<div>
<h3>Project name*</h3>
<input placeholder="Digital Excellence" formControlName="name" required [ngModel]="project?.name">
</div>
</div>
</div>

<div class="col-6">
<div>
<h3>Project link*</h3>
<input placeholder="https://github.com/fontys/digitalexcellence" formControlName="uri" required
[ngModel]="project?.uri">
<div class="col-6">
<div>
<h3>Project link*</h3>
<input placeholder="https://github.com/fontys/digitalexcellence" formControlName="uri" required
[ngModel]="project?.uri">
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-12">
<div>
<h3>Short description*</h3>
<input formControlName="shortDescription" required [ngModel]="project?.shortDescription">
<div class="row">
<div class="col-12">
<div>
<h3>Short description*</h3>
<input formControlName="shortDescription" required [ngModel]="project?.shortDescription">
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-12">
<div>
<p class="form-footnote">Describe your project in one sentence or 170 characters.</p>
<div class="row">
<div class="col-12">
<div>
<p class="form-footnote">Describe your project in one sentence or 170 characters.</p>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-12">
<div class="long-description-editor">
<h3>Description*</h3>
<quill-editor class="dex-quill-editor" [styles]="{height: '350px'}" [modules]="modulesConfigration"
formControlName="description" placeholder="" [ngModel]="project?.description">
</quill-editor>
<div class="row">
<div class="col-12">
<div class="long-description-editor">
<h3>Description*</h3>
<quill-editor class="dex-quill-editor" [styles]="{height: '350px'}" [modules]="modulesConfigration"
formControlName="description" placeholder="" [ngModel]="project?.description">
</quill-editor>
</div>
</div>
</div>
</div>
</form>


<form [formGroup]="editCollaboratorForm" class="project-form">
<div class="row">
<div class="col-12">
<h3 class="title-spacing">Add project collaborators</h3>
<div class="row">
<div class="col-5">
<div>
<h3>Collaborator full name</h3>
<input formControlName="fullName" required>
</form>


<form [formGroup]="editCollaboratorForm" class="project-form">
<div class="row">
<div class="col-12">
<h3 class="title-spacing">Add project collaborators</h3>
<div class="row">
<div class="col-5">
<div>
<h3>Collaborator full name</h3>
<input formControlName="fullName" required>
</div>
</div>
</div>
<div class="col-5">
<div>
<h3>Collaborator role</h3>
<input formControlName="role" required>
<div class="col-5">
<div>
<h3>Collaborator role</h3>
<input formControlName="role" required>
</div>
</div>

<div class="col-2 add-collaborator-col">
<button type="button" class="btn btn-icon btn-primary add-collaborator-button" aria-label="settings"
(click)="onClickAddCollaborator()" [disabled]="!editCollaboratorForm.valid">
+
</button>
</div>
</div>

<div class="col-2 add-collaborator-col">
<button type="button" class="btn btn-icon btn-primary add-collaborator-button" aria-label="settings"
(click)="onClickAddCollaborator()" [disabled]="!editCollaboratorForm.valid">
+
</button>
<div class="offset-5 col-5">
<p class="form-footnote">e.g.: developer, designer, etc...</p>
</div>
</div>

<div class="offset-5 col-5">
<p class="form-footnote">e.g.: developer, designer, etc...</p>
</div>

</div>
</div>
</form>
</form>

<div class="row collaborator-overview" *ngIf="collaborators.length > 0">
<div class="row collaborator-overview" *ngIf="collaborators.length > 0">

<div class="col-12">
<h3>Collaborators</h3>
</div>
<div class="col-12">
<h3>Collaborators</h3>
</div>

<div *ngFor="let collaborator of collaborators" 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>
<hr class="dashed">
<div *ngFor="let collaborator of collaborators" 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>
<hr class="dashed">
</div>
</div>
</div>

<div class="row">
<div class="col-12">
<button class="btn btn-success" type="submit" (click)="onClickSubmit()" [disabled]="!editProjectForm.valid">Edit
project</button>
<div class="row">
<div class="col-12">
<button class="btn btn-success" type="submit" (click)="onClickSubmit()"
[disabled]="!editProjectForm.valid">Edit
project</button>
</div>
</div>
</div>
</ng-container>
<ng-template #noProject>
<p>No project could be found with id: {{invalidId}}</p>
</ng-template>
</div>
</div>
</div>
8 changes: 7 additions & 1 deletion src/app/modules/project/edit/edit.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,11 @@ export class EditComponent implements OnInit {
*/
public modulesConfigration = QuillUtils.getDefaultModulesConfiguration();

/**
* Property for storting the invalidId if an invalid project id was entered.
*/
public invalidId: string;

constructor(
private router: Router,
private formBuilder: FormBuilder,
Expand All @@ -85,7 +90,8 @@ export class EditComponent implements OnInit {
return;
}
const id = Number(routeId);
if (id < 1) {
if (id == null || Number.isNaN(id) || id < 1) {
this.invalidId = routeId;
return;
}

Expand Down

0 comments on commit 10f2643

Please sign in to comment.