[ADF-2753] Error Component throwing default error fixed (#3364)

* [ADF-1938] Overflowing text in reports section fidex

* [ADF-1938] Long names in report section now fit

* [ADF-1938] Reverted changes in container widget

* [ADF-2753] New error component created

* [ADF-2753] Unit test for Error Content Component

* Deleting unused files

* Deleting unused files

* Deleting unused files

* [ADF-2753] Documentation added

* [ADF-2753] Error Component throwing default error fixed

* [ADF-2753] White space removed

* [ADF-2753] Removed unnecessary files and updated trnaslation file

* [ADF-2753] Changed link for button in error component

* [ADF-2753] Updated doc file

* [ADF-2753] Removed fdescribe

* [ADF-2753] Improved code coverage
This commit is contained in:
davidcanonieto
2018-05-30 12:51:04 +01:00
committed by Eugenio Romano
parent 39f76a11c4
commit fa2613f096
8 changed files with 127 additions and 79 deletions

View File

@@ -12,13 +12,26 @@ this.router.navigate(['/error', errorCode]);
```html
<div class="adf-error-content">
<p class="adf-error-content-code">{{ errorCode }}</p>
<p class="adf-error-content-code">
{{ errorCode }}
</p>
<div class="adf-error-content-shadow"></div>
<p class="adf-error-content-title">{{ errorTitle | translate }}</p>
<p class="adf-error-content-description">{{ errorDescription | translate }}
<a href="{{errorLinkUrl}}" *ngIf="errorLinkText"
class="adf-error-content-description-link" > {{ errorLinkText | translate }}</a></p>
<button mat-raised-button color="primary" routerLink="/home">{{ homeButton | translate}}</button>
<p class="adf-error-content-title">
{{ 'ERROR_CONTENT.' + errorCode + '.TITLE' | translate }}
</p>
<p class="adf-error-content-description">
{{ 'ERROR_CONTENT.' + errorCode + '.DESCRIPTION' | translate }}
</p>
<div class="adf-error-content-buttons">
<a href="/" mat-raised-button color="primary"
*ngIf="secondaryButtonText" (click)="onSecondButton()"
class="adf-error-content-description-link">
{{ 'ERROR_CONTENT.' + errorCode + '.SECONDARY_BUTTON.TEXT' | translate | uppercase }}
</a>
<a href="/" mat-raised-button color="primary" (click)="onReturnButton()">
{{ 'ERROR_CONTENT.' + this.errorCode + '.RETURN_BUTTON.TEXT' | translate | uppercase }}
</a>
</div>
</div>
```
@@ -29,31 +42,28 @@ this.router.navigate(['/error', errorCode]);
| Name | Type | Description |
| ---- | ---- | ----------- |
| errorCode | string | Error code |
| errorTitle | string | Error title |
| errorDescription | string | Short description about the error |
| errorLink | string | (Optional) This link will be attached at the end of the error description and itt will be highlighted. |
| returnButtonUrl | string | This is the text that will be displayed inside the secondary button |
| secondaryButtonText | string | (Optional) This is the text that will be displayed inside the secondary button |
| secondaryButtonUrl | string | (Optional) This is the link for the secondary button |
Notice that you will also have to provide values for the variables used in the view template.
## Details
You can customize your errors by adding them to the tranlate files inside `lib/core/i18n`.
You can customize your errors by adding them to the translate files inside `lib/core/i18n`.
```json
"ERROR_CONTENT": {
"HOME_BUTTON": "Back to home",
"403": {
"TITLE": "Error 403 forbidden!",
"DESCRIPTION": "Sorry, access to this resource on the server is denied. Either check URL or feel free to",
"LINK": {
"TEXT": "report this issue.",
"URL": ""
}
},
"404": {
"TITLE": "Whoops!",
"TITLE": "An error occurred.",
"DESCRIPTION": "We couldnt find the page you were looking for.",
"LINK": {
"SECONDARY_BUTTON": {
"TEXT": "",
"URL": ""
},
"RETURN_BUTTON": {
"TEXT": "Back to home",
"ROUTE": "home"
}
}
}