Add documentation to the helpers module.

This commit is contained in:
Spencer Ofwiti
2021-05-11 14:34:23 +03:00
parent c9f73899c3
commit e0c045cdfa
37 changed files with 1403 additions and 585 deletions

View File

@@ -63,6 +63,13 @@
<code>src/app/_helpers/custom-error-state-matcher.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Custom provider that defines how form controls behave with regards to displaying error messages.</p>
</p>
<p class="comment">
@@ -72,6 +79,11 @@
<code>ErrorStateMatcher</code>
</p>
<p class="comment">
<h3>Example</h3>
</p>
<div class="io-description">
</div>
<section>
<h3 id="index">Index</h3>
@@ -130,14 +142,16 @@
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="5"
class="link-to-prism">src/app/_helpers/custom-error-state-matcher.ts:5</a></div>
<div class="io-line">Defined in <a href="" data-line="18"
class="link-to-prism">src/app/_helpers/custom-error-state-matcher.ts:18</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Checks whether an invalid input has been made and an error should be made.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
@@ -147,6 +161,7 @@
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
@@ -161,6 +176,12 @@
</td>
<td>
<ul>
<li>Tracks the value and validation status of an individual form control.</li>
</ul>
</td>
</tr>
<tr>
<td>form</td>
@@ -173,6 +194,12 @@
</td>
<td>
<ul>
<li>Binding of an existing FormGroup to a DOM element.</li>
</ul>
</td>
</tr>
</tbody>
</table>
@@ -184,7 +211,8 @@
</div>
<div class="io-description">
<p>true - If an invalid input has been made to the form control.</p>
</div>
</td>
</tr>
@@ -200,10 +228,22 @@
<div class="tab-pane fade tab-source-code" id="c-source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {ErrorStateMatcher} from &#x27;@angular/material/core&#x27;;
import {FormControl, FormGroupDirective, NgForm} from &#x27;@angular/forms&#x27;;
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {FormControl, FormGroupDirective, NgForm} from &#x27;@angular/forms&#x27;;
import {ErrorStateMatcher} from &#x27;@angular/material/core&#x27;;
/**
* Custom provider that defines how form controls behave with regards to displaying error messages.
*
* @implements ErrorStateMatcher
*/
export class CustomErrorStateMatcher implements ErrorStateMatcher{
/**
* Checks whether an invalid input has been made and an error should be made.
*
* @param control - Tracks the value and validation status of an individual form control.
* @param form - Binding of an existing FormGroup to a DOM element.
* @returns true - If an invalid input has been made to the form control.
*/
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted: boolean &#x3D; form &amp;&amp; form.submitted;
return !!(control &amp;&amp; control.invalid &amp;&amp; (control.dirty || control.touched || isSubmitted));

View File

@@ -63,6 +63,13 @@
<code>src/app/_helpers/custom.validator.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Provides methods to perform custom validation to form inputs.</p>
</p>
@@ -131,14 +138,16 @@
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="4"
class="link-to-prism">src/app/_helpers/custom.validator.ts:4</a></div>
<div class="io-line">Defined in <a href="" data-line="13"
class="link-to-prism">src/app/_helpers/custom.validator.ts:13</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Sets errors to the confirm password input field if it does not match with the value in the password input field.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
@@ -148,6 +157,7 @@
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
@@ -162,6 +172,12 @@
</td>
<td>
<ul>
<li>The control object of the form being validated.</li>
</ul>
</td>
</tr>
</tbody>
</table>
@@ -203,14 +219,16 @@
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="12"
class="link-to-prism">src/app/_helpers/custom.validator.ts:12</a></div>
<div class="io-line">Defined in <a href="" data-line="28"
class="link-to-prism">src/app/_helpers/custom.validator.ts:28</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Sets errors to a form field if it does not match with the regular expression given.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
@@ -220,6 +238,7 @@
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
@@ -234,6 +253,12 @@
</td>
<td>
<ul>
<li>The regular expression to match with the form field.</li>
</ul>
</td>
</tr>
<tr>
<td>error</td>
@@ -246,6 +271,12 @@
</td>
<td>
<ul>
<li>Defines the map of errors to return from failed validation checks.</li>
</ul>
</td>
</tr>
</tbody>
</table>
@@ -257,7 +288,8 @@
</div>
<div class="io-description">
<p>The map of errors returned from failed validation checks.</p>
</div>
</td>
</tr>
@@ -275,7 +307,15 @@
<div class="tab-pane fade tab-source-code" id="c-source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {AbstractControl, ValidationErrors} from &#x27;@angular/forms&#x27;;
/**
* Provides methods to perform custom validation to form inputs.
*/
export class CustomValidator {
/**
* Sets errors to the confirm password input field if it does not match with the value in the password input field.
*
* @param control - The control object of the form being validated.
*/
static passwordMatchValidator(control: AbstractControl): void {
const password: string &#x3D; control.get(&#x27;password&#x27;).value;
const confirmPassword: string &#x3D; control.get(&#x27;confirmPassword&#x27;).value;
@@ -284,6 +324,13 @@ export class CustomValidator {
}
}
/**
* Sets errors to a form field if it does not match with the regular expression given.
*
* @param regex - The regular expression to match with the form field.
* @param error - Defines the map of errors to return from failed validation checks.
* @returns The map of errors returned from failed validation checks.
*/
static patternValidator(regex: RegExp, error: ValidationErrors): ValidationErrors | null {
return (control: AbstractControl): { [key: string]: any } &#x3D;&gt; {
if (!control.value) {

View File

@@ -63,6 +63,13 @@
<code>src/app/_helpers/global-error-handler.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>A generalized http response error.</p>
</p>
<p class="comment">
<h3>Extends</h3>
@@ -72,6 +79,11 @@
</p>
<p class="comment">
<h3>Example</h3>
</p>
<div class="io-description">
</div>
<section>
<h3 id="index">Index</h3>
@@ -113,12 +125,14 @@
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="8" class="link-to-prism">src/app/_helpers/global-error-handler.ts:8</a></div>
<div class="io-line">Defined in <a href="" data-line="16" class="link-to-prism">src/app/_helpers/global-error-handler.ts:16</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Initialize the HttpError class.</p>
</div>
<div>
<b>Parameters :</b>
<table class="params">
@@ -127,6 +141,7 @@
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
@@ -141,6 +156,12 @@
No
</td>
<td>
<code><ul>
<li>The message given by the error.</li>
</ul>
</code>
</td>
</tr>
<tr>
<td>status</td>
@@ -153,6 +174,12 @@
No
</td>
<td>
<code><ul>
<li>The status code given by the error.</li>
</ul>
</code>
</td>
</tr>
</tbody>
</table>
@@ -189,10 +216,16 @@
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="8" class="link-to-prism">src/app/_helpers/global-error-handler.ts:8</a></div>
<div class="io-line">Defined in <a href="" data-line="16" class="link-to-prism">src/app/_helpers/global-error-handler.ts:16</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The error&#39;s status code. </p>
</div>
</td>
</tr>
</tbody>
</table>
@@ -208,14 +241,28 @@
<div class="tab-pane fade tab-source-code" id="c-source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {ErrorHandler, Injectable} from &#x27;@angular/core&#x27;;
import {LoggingService} from &#x27;@app/_services/logging.service&#x27;;
import {HttpErrorResponse} from &#x27;@angular/common/http&#x27;;
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {HttpErrorResponse} from &#x27;@angular/common/http&#x27;;
import {ErrorHandler, Injectable} from &#x27;@angular/core&#x27;;
import {Router} from &#x27;@angular/router&#x27;;
// A generalized http response error
// Application imports
import {LoggingService} from &#x27;@app/_services/logging.service&#x27;;
/**
* A generalized http response error.
*
* @extends Error
*/
export class HttpError extends Error {
/** The error&#x27;s status code. */
public status: number;
/**
* Initialize the HttpError class.
*
* @param message - The message given by the error.
* @param status - The status code given by the error.
*/
constructor(message: string, status: number) {
super(message);
this.status &#x3D; status;
@@ -223,10 +270,25 @@ export class HttpError extends Error {
}
}
/**
* Provides a hook for centralized exception handling.
*
* @extends ErrorHandler
*/
@Injectable()
export class GlobalErrorHandler extends ErrorHandler {
/**
* An array of sentence sections that denote warnings.
* @private
*/
private sentencesForWarningLogging: Array&lt;string&gt; &#x3D; [];
/**
* Initialization of the Global Error Handler.
*
* @param loggingService - A service that provides logging capabilities.
* @param router - A service that provides navigation among views and URL manipulation capabilities.
*/
constructor(
private loggingService: LoggingService,
private router: Router
@@ -234,6 +296,11 @@ export class GlobalErrorHandler extends ErrorHandler {
super();
}
/**
* Handles different types of errors.
*
* @param error - An error objects thrown when a runtime errors occurs.
*/
handleError(error: Error): void {
this.logError(error);
const message: string &#x3D; error.message ? error.message : error.toString();
@@ -254,24 +321,11 @@ export class GlobalErrorHandler extends ErrorHandler {
throw error;
}
logError(error: any): void {
const route: string &#x3D; this.router.url;
if (error instanceof HttpErrorResponse) {
this.loggingService.sendErrorLevelMessage(
&#x60;There was an HTTP error on route ${route}.\n${error.message}.\nStatus code: ${(error as HttpErrorResponse).status}&#x60;,
this, {error});
} else if (error instanceof TypeError) {
this.loggingService.sendErrorLevelMessage(&#x60;There was a Type error on route ${route}.\n${error.message}&#x60;, this, {error});
} else if (error instanceof Error) {
this.loggingService.sendErrorLevelMessage(&#x60;There was a general error on route ${route}.\n${error.message}&#x60;, this, {error});
} else {
this.loggingService.sendErrorLevelMessage(&#x60;Nobody threw an error but something happened on route ${route}!&#x60;, this, {error});
}
}
/**
* Checks if an error is of type warning.
*
* @param errorTraceString
* @param errorTraceString - A description of the error and it&#x27;s stack trace.
* @returns true - If the error is of type warning.
* @private
*/
private isWarning(errorTraceString: string): boolean {
@@ -288,6 +342,26 @@ export class GlobalErrorHandler extends ErrorHandler {
return isWarning;
}
/**
* Write appropriate logs according to the type of error.
*
* @param error - An error objects thrown when a runtime errors occurs.
*/
logError(error: any): void {
const route: string &#x3D; this.router.url;
if (error instanceof HttpErrorResponse) {
this.loggingService.sendErrorLevelMessage(
&#x60;There was an HTTP error on route ${route}.\n${error.message}.\nStatus code: ${(error as HttpErrorResponse).status}&#x60;,
this, {error});
} else if (error instanceof TypeError) {
this.loggingService.sendErrorLevelMessage(&#x60;There was a Type error on route ${route}.\n${error.message}&#x60;, this, {error});
} else if (error instanceof Error) {
this.loggingService.sendErrorLevelMessage(&#x60;There was a general error on route ${route}.\n${error.message}&#x60;, this, {error});
} else {
this.loggingService.sendErrorLevelMessage(&#x60;Nobody threw an error but something happened on route ${route}!&#x60;, this, {error});
}
}
}
</code></pre>
</div>