Getting started

Introduction

Module created with a series of components, services, pipes and directives with the particularity that they are elements that can be used individually or in conjunction with other components of other @fad-producto-portal/* modules.

The purpose is to put together what is needed based on these elements and based on personal elements if applicable.

Prerequisites

Token request for installation of private FAD modules

Installation

npm install @fad-producto-portal/ng-fad-shared

Assets

Add into the assets array (angular.json) the next lines:

{
  "glob": "**/*",
  "input": "node_modules/@fad-producto-portal/ng-fad-shared/assets",
  "output": "./assets/"
}

Import

In the file necessary example.module.ts import the module.

In this case app.module.ts

import { NgFadSharedModule} from '@fad-producto-portal/ng-fad-shared';
.
.
.
... imports: [
       ...,
       NgFadSharedModule
    ]...

Directives

Drag and drop

Description

Provides complete functionality for handling document drag and drop events, including file format validation and error handling.

Usage

HTML

<div class="drag-drop-container fad-portal-content"
  dragDropDocument
  [formatList]="formatList"
  [acceptMultipleFiles]="acceptMultipleFiles"
  (onfiledropped)="onfiledropped($event)"
  (onerror)="onerror($event)">
    <p>Drag and drop your file</p>
    <p>{{ leyend }}</p>
</div>

Typescript

import { ResponseError } from '@fad-producto-portal/ng-fad-shared';

.
.
.

  leyend = '';
  formatList = ['jpeg', 'pdf'];
  acceptMultipleFiles = true;

  constructor() { }

  ngOnInit() {
  }

  onfiledropped(files: FileList) {
    console.log(files);
    this.leyend = 'File:' + ' ' + files[0].name + ' ' + 'was dropped';
  }

  onerror(event: ResponseError) {
    if (event.code === -1) {
      this.leyend = event.error;
    } else if (event.code === -2) {
      this.leyend = event.error + ' ';
      this.formatList.forEach(format => {
        this.leyend += format + ' '
      });
    }
  }

Inputs

Name	Type	Required	Default	Description
formatList	string[]	true	undefined	List of supported file formats
acceptMultipleFiles	boolean	false	false	Whether it accepts multiple files or not

Outputs

Name	Return	Description
onerror	ResponseError	It is called when an error occurs

Outside click

Description

It is used to detect when a user clicks away from a specific element. This is useful in cases like closing a dropdown or modal when the user clicks outside of them.

Usage

HTML

<div class="container" >
  <button (click)="showModal()">Click to show modal</button>
  <div class="modal" *ngIf="show" clickOutside (onclickoutside)="onclickoutside()">
    Text example
  </div>
</div>

Typescript

import { ResponseError } from '@fad-producto-portal/ng-fad-shared';

.
.
.

  show = false

  showModal(){
    this.show = true
  }

  onclickoutside() {
    this.show = false;
  }

Outputs

Name	Return	Description
onclickoutside	void	It is called when user clicks outside of element

Tooltip

Description

Tooltip to be placed on a parent element.

Usage

CSS

Set absolute position property to the parent element on which the tooltip will be placed.

.tooltip {
  .
  .
  .
  position: absolute;
}

HTML

<div
  class="tooltip fad-portal-content"
  ngFadPortalSharedTooltip
  [tooltipContent]="tooltipContent"
  [tooltipPosition]="tooltipPosition">
    Place cursor to see tooltip
</div>

Typescript

import { TOOLTIP_POSITION } from '@fad-producto-portal/ng-fad-shared';
.
.
.
  tooltipContent = `<div class="fad-portal-content" style="width: 300px; border-radius: 5px; padding: 5px;">
    <h2>Tooltip sample</h2>
    <p>Content</p>
  </div>`;
  tooltipPosition = TOOLTIP_POSITION.RIGHT_CENTER;

Inputs

Name	Type	Required	Default	Description
tooltipContent	string	true	undefined	HTML to be displayed on tooltip
tooltipPosition	TOOLTIP_POSITION	true	undefined	Tooltip position

Pipes

Sanitizer

Description

It is used to sanitize different types of content and avoid security problems

Usage

HTML

<div [innerHTML]="html | sanitizer: 'html'"></div>

<div [style]="style | sanitizer: 'style'">Style content</div>

<a class="fad-portal-content" [href]="url | sanitizer: 'url'">Url content => Go to page</a>

<div>
  <div class="fad-portal-content">Resourse Url content</div>
  <iframe [src]="resourceUrl | sanitizer: 'resourceUrl'" width="700" height="100"></iframe>
</div>

Typescript

.
.
.

  html = `<div>
    <div class="fad-portal-title-bold">Title</div>
    <div class="fad-portal-content">HTML content</div>
  </div>`;

  style = 'background-color: red; color: white; padding: 5px';

  url = 'https://uatclientes.firmaautografa.com/login';

  resourceUrl = 'https://uatclientes.firmaautografa.com/login';

Inputs

Name	Type	Required	Default	Description
value	any	true	undefined	Configuration component (styles, legends and behavior)
type	string	true	undefined	Configuration component (styles, legends and behavior)

Outputs

Return	Description
SafeHtml/SafeStyle/SafeScript/SafeUrl/SafeResourceUrl	Returns unsafe content in the DOM in a controlled manner

Services

Date

Description

Service that helps manage dates.

Usage

import { DateService } from '@fad-producto-portal/ng-fad-shared';
.
.
.

  constructor(private date: DateService) { }

  formatDate() {
    const formatedDate = this.date.getFormatDate(1719360840931, '-', 'short');
    console.log(formatedDate);
  }

  getMonth() {
    const date = new Date();
    const shortMonth = this.date.getMonth(date, 'es', 'short');
    const longMonth = this.date.getMonth(date, 'pt', 'long');

    console.log(shortMonth);
    console.log(longMonth);
  }

Translate

Description

Service that is responsible for managing the language. You can configure the language or have the value based on the language of the browser.

Help with date management and help with using project translation files.

Usage

Typescript

import { TranslateService } from '@fad-producto-portal/ng-fad-shared';
.
.
.

  constructor(private translate: TranslateService) { }
  
  configureLanguage() {
    this.translate.language = 'en';
    const language = this.translate.getlanguage();
    console.log(language);
  }

  getBrowserLanguage() {
    const language = this.translate.getlanguage();
    console.log(language);
  }

Render

Description

The service is responsible for the creation and dynamic management of components.

Usage

Typescript

import { AfterViewInit, Component, ComponentRef, EventEmitter, ViewChild, ViewContainerRef } from '@angular/core';
import { PaginatorComponent, RenderGeneratorComponent, RenderService, ResponseError } from '@fad-producto-portal/ng-fad-shared';
import { Subject } from 'rxjs';
.
.
.

  @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(private render: RenderService) { }

  ngAfterViewInit(): void {
    this.renderComponent();
  }

  renderComponent() {
    const component: RenderGeneratorComponent = {
      component: () => PaginatorComponent,
      inputs: { paginator: { first: true, last: true, number: 0, numberOfElements: 6, size: 10, totalElements: 6, totalPages: 1 } },
      outputs: {
        onresearch: new Subject<any>(),
        onerror: new Subject<ResponseError>()
      },
      show: true
    }
    
    const reference: any = this.render.createComponent(this.container, component.component());
    this.render.setInputs(reference, component.inputs);
    this.render.subscribeOutputs(reference, component.outputs);

    component.outputs['onresearch'].subscribe((value: any) => {
      console.log('Research:', value);
    });

    component.outputs['onerror'].subscribe((value: any) => {
      console.log('Error:', value);
    });
  }

Components

- Button Group

Description

Presents related options or grouped actions that the user can select or activate.

Usage

HTML

<ng-fad-portal-shared-button-group
  [configuration]="configuration"
  [items]="items"
  [reference]="reference"
  [disabled]="disabled"
  (onchange)="onchange($event)">
</ng-fad-portal-shared-button-group>

Typescript

import { ButtonGroup, IButtonGroupConfiguration } from '@fad-producto-portal/ng-fad-shared';

.
.
.

  configuration!: IButtonGroupConfiguration;
  disabled = false;
  reference = 'option1';
  items: ButtonGroup[] = [
    { reference: 'option1', text: 'Option 1' },
    { reference: 'option2', text: 'Option 2' },
    { reference: 'optionN', text: 'Option n' },
  ];

  onchange(status: string) {
    console.log(status);
    this.reference = status;
  }

Inputs

Name	Type	Required	Default	Description
configuration	IButtonGroupConfiguration	false	BUTTON_GROUP_CONFIGURATION_DEFAULT	Configuration component (styles, legends and behavior)
items	ButtonGroup[]	true	[]	Options to show
reference	string	true	undefined	Shows the selected option
disabled	boolean	false	false	Show disabled component

Outputs

Name	Return	Description
onchange	string	Called when an option is selected, returns the new reference

- Details

Description

Component that displays an asset that represents the details of something. It is a specific component to render in the GenericTableComponent.

Usage

HTML

<ng-fad-portal-shared-details
  [configuration]="configuration"
  [data]="data"
  (onevent)="clickDetails($event)">
</ng-fad-portal-shared-details>

Typescript

import { IDetailsConfiguration } from '@fad-producto-portal/ng-fad-shared';

.
.
.

  configuration!: IDetailsConfiguration;
  data: any;

  onevent(event: PortalEvent) {
    console.log(event);
  }

Inputs

Name	Type	Required	Default	Description
configuration	IDetailsConfiguration	false	DETAILS_CONFIGURATION_DEFAULT	Configuration component (styles, legends and behavior)
data	any	false	undefined	Any data that you want to be returned at the output onevent

Outputs

Name	Return	Description
onevent	PortalEvent	Called when asset is clicked

- Dynamic

Renders a dynamic component. It is a special component for the use of dynamic components within table cells.

Usage

HTML

<ng-fad-portal-shared-dynamic
  [configuration]="configuration"
  [component]="component"
  [data]="data"
  (onevent)="onevent($event)">
</ng-fad-portal-shared-dynamic>

Typescript

import { DynamicComponent as DynamicComponentLibrary } from '@fad-producto-portal/ng-fad-shared';
// component to render
import { MyComponent } from '...';
.
.
.

  // configuration of any component
  configuration!: any;
  component = MyComponent;
  // any data
  data: any = { a: 'a' };
  // example with ViewChildren
  @ViewChildren(MyComponent) childrenComponents!: QueryList<MyComponent>;

  onevent(event: any) {
    // do something after get event
    console.log(event);
  }

  // execute some method of rendered component
  doSomething() {
    this.childrenComponents.forEach(element => {
      // execute method with params
      element.executeSomething('methodName', 'string param example', MyComponent);
      
      // execute method without params
      element.executeSomething('methodName', null, MyComponent);
    });
  }

Inputs

Name	Type	Required	Default	Description
configuration	any	false	undefined	Configuration component (styles, legends and behavior)
component	any	false	undefined	Component to be rendered
data	any	false	undefined	Data with which the component will work and return data

Outputs

Name	Return	Description
onevent	any	It is called when component return some data or event

- FAD-paginator

Description

Component that displays pagination. FAD version.

Usage

HTML

<ng-fad-portal-shared-fad-paginator
  [paginator] = "paginator"
  [configuration] = "configuration"
  (onerror)="onerror($event)"
  (onresearch) = "onresearch($event)">
</ng-fad-portal-shared-fad-paginator>

Typescript

import { FadPaginator, IFadPaginatorConfiguration, ResearchPagination, ResponseError} from '@fad-producto-portal/ng-fad-shared';

.
.
.

  configuration!: IFadPaginatorConfiguration;
  paginator!: FadPaginator;

  onresearch(event: ResearchPagination) {
    // adjust page and size
    console.log(event);
  }

  onerror(event: ResponseError){
    console.log(event);
  }

Inputs

Name	Type	Required	Default	Description
configuration	IFadPaginatorConfiguration	false	FAD_PAGINATOR_CONFIGURATION_DEFAULT	Configuration component (styles, legends and behavior)
paginator	FadPaginator	true	undefined	Pagination data taht will be render

Outputs

Name	Return	Description
onerror	ResponseError	It is called when an error occurs
onresearch	ResponseError	It is called when you want to update the page or pagination size

- Filter

Description

Component that renders the basic template for the project's filters. A form is injected into the component

Usage

HTML

<ng-fad-portal-shared-filter
  [configuration]="configuration"
  [formFilterTemplate]="formFilterTemplate"
  [form]="form"
  (onfilter)="onfilter($event)">
    <ng-template #formFilterTemplate>
      <app-filter-sample [form]="form"></app-filter-sample> <!-- Component with form -->
    </ng-template>
</ng-fad-portal-shared-filter>

Typescript

import { FilterComponent, IFilterConfiguration, ResponseError } from '@fad-producto-portal/ng-fad-shared';

.
.
.

  configuration!: IFilterConfiguration;
  form!: FormGroup;
  @ViewChild(FilterComponentModule) filterComponent!: FilterComponent;

  onfilter(data: any) {
    // form value
    console.log(data);
    // lock button if is required
    this.filterComponent.lockFilter(true);
    // unlock button if is required
    this.filterComponent.lockFilter(false);
  }

Inputs

Name	Type	Required	Default	Description
configuration *	IFilterConfiguration	false	FILTER_CONFIGURATION_DEFAULT	Configuration component (styles, legends and behavior)
formFilterTemplate	TemplateRef	true	undefined	Form to render
form	FormGroup	true	undefined	Reactive form variable

The following properties are for a more specific configuration of the component

Name	Type	Required	Default	Description
showActions	boolean	false	true	Shows the default buttons of the form
showExtraButton	boolean	false	false	Show an extra button on the form

Outputs

Name	Return	Description
onerror	ResponseError	It is called when an error occurs
oncleanform	void	It is called when the clear form button is clicked
onfilter	any	It is called when the search form button is clicked, return the value of the form

- Filter button

Description

Component that renders a button to display a filter

Usage

HTML

<ng-fad-portal-shared-filter-button
  [configuration]="configuration"
  (onclickfilter)="onclickfilter($event)">
</ng-fad-portal-shared-filter-button>

Typescript

import { IFilterButtonConfiguration } from '@fad-producto-portal/ng-fad-shared';

.
.
.

  configuration!: IFilterButtonConfiguration;

  onclickfilter(status: boolean) {
    // Do something whwn filter is clicked
    console.log('Filter button clicked');
  }

Inputs

Name	Type	Required	Default	Description
configuration	IFilterButtonConfiguration	false	FILTER_BUTTON_CONFIGURATION_DEFAULT	Configuration component (styles, legends and behavior)

Outputs

Name	Return	Description
onclickfilter	boolean	It is called when component is clcked

- Form errors

Description

Component responsible for displaying validation error messages for reactive forms

Usage

HTML

<div class="fad-portal-title-bold">Form error</div>

<form [formGroup]="form">
  <div class="fad-portal-container-input">
    <label for="email">Email</label>
    <input id="email" type="text" formControlName="email">
    <!-- ng-fad-portal-shared-form-errors -->
    <ng-fad-portal-shared-form-errors [formData]="email!"></ng-fad-portal-shared-form-errors>
  </div>

  <br>

  <div class="fad-portal-container-input">
    <label for="password">Password</label>
    <input id="password" type="text" formControlName="password">
    <!-- ng-fad-portal-shared-form-errors -->
    <ng-fad-portal-shared-form-errors [formData]="password!"></ng-fad-portal-shared-form-errors>
  </div>
</form>

Typescript

import { IFormErrorsConfiguration } from '@fad-producto-portal/ng-fad-shared';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

.
.
.

  configuration!: IFormErrorsConfiguration;
  form!: FormGroup

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required]]
    });
  }

  get email() {
    return this.form.get('email');
  }

  get password() {
    return this.form.get('password');
  }

Inputs

Name	Type	Required	Default	Description
configuration	IFormErrorsConfiguration	false	FORM_ERRORS_CONFIGURATION_DEFAULT	Configuration component (styles, legends and behavior)
formData	AbstractControlDirective/AbstractControl	true	undeifned	Form or form item reference

Outputs

Name	Return	Description
onerror	ResponseError	It is called when an error occurs

- Generic message

Description

Component that displays a message and a series of buttons. It is used together to display a modal with an alert, informational or error message

Usage

HTML

<ng-fad-portal-shared-generic-message
  [configuration]="configuration"
  [buttons]="buttons"
  [message]="message"
  (onevent)="onevent($event)">
</ng-fad-portal-shared-generic-message>

Typescript

import { Dialog } from '@angular/cdk/dialog';
import { GenericMessageComponent, GenericModalComponent, GenericModalData, IGenericMessageConfiguration, MessageButton, PortalEvent } from '@fad-producto-portal/ng-fad-shared';
import { Subject } from 'rxjs';
.
.
.
configuration?: IGenericMessageConfiguration;
  message = 'Text message';
  buttons?: MessageButton[] = [
    {
      text: "Confirm",
      action : { data: null, event: 'ACCEPT'},
    },
  ];

  constructor(public dialog: Dialog) { }

  onevent(event: PortalEvent) {
    console.log('My event:', event);
    this.openDialog(event);
  }

  // Use with modal
  openDialog(data: PortalEvent) {
    console.log(data);

    const oneventsubject = new Subject<PortalEvent>();

    oneventsubject.subscribe(res => {
      console.log('My event:', res);
      dialog.close();
    });

    const dataModal: GenericModalData = {
      component: {
        class: GenericMessageComponent,
        inputs: {
          message: "Text message",
          buttons : [
            {
              text: "Confirm",
              action : { data: null, event: 'ACCEPT'},
            },
            {
              text: "Delete",
              action : { data: null, event: 'DELETE'},
            },
            {
              text: "Reload",
              action : { data: null, event: 'RELOAD'},
            }
          ]
        },
        outputs: {
          onevent: oneventsubject
        }
      },
      dialog: {
        configuration: {
          showHeader: true,
          clickOutside: true
        },
        title: 'Alert'
      }
    }

    const dialog = this.dialog.open(GenericModalComponent, { data: dataModal });
  }

Inputs

Name	Type	Required	Default	Description
configuration	IGenericMessageConfiguration	false	GENERIC_MESSAGE_CONFIGURATION_DEFAULT	Configuration component (styles, legends and behavior)
buttons	MessageButton[]	false	{ text: this.configuration?.customization?.moduleCustomization?.legends?.accept, action: { data: null, event: 'ACCEPT'} }	Action buttons
message	string	false	undefined	Message to display

Outputs

Name	Return	Description
onevent	PortalEvent	Called when any button has an action

- Generic modal

Description

Modal with a component that embeds another component to be rendered

Usage

Typescript

import { Dialog } from '@angular/cdk/dialog';
import { GenericModalComponent, GenericModalData } from '@fad-producto-portal/ng-fad-shared';
import { ChildModalComponent } from '...XXX'; // component example
import { Subject } from 'rxjs';

.
.
.

  constructor(public dialog: Dialog) { }

  openDialog(): void {
    // ouputs subscribe
    const oncustomeventsubject = new Subject<string>();
    oncustomeventsubject.subscribe(res => {
      // Do something after getting the event 
      console.log('event:', res);
      dialog.close();
    });

    // data modal configuration
    const dataModal: GenericModalData = {
      component: { // component configuration
        class: ChildModalComponent, // component to render
        inputs: { // inputs of component
          name: 'John Doe',
          lastName: 'Moris'
        },
        outputs: { // outputs of component
          oncustomevent: oncustomeventsubject // reference to subscribe
        }
      },
      dialog: { // modal configuration
        configuration: {
          showHeader: true,
          clickOutside: false
        },
        title: 'Title'
      }
    }

    // open modal
    const dialog = this.dialog.open(GenericModalComponent, {
      data: dataModal
    });

    // Event after closing the modal, in case of error this will be returned in the response
    dialog.closed.subscribe(res => {
      console.log(res);
    })
  }

- Generic table

Description

Component that renders the basic template for the project's tables

Usage

HTML

<ng-fad-portal-shared-generic-table
  [configuration]="configuration"
  [tableBody]="tableBody"
  [tableHead]="tableHead"
  [status]="status"
  (onvevent)="onevent($event)"
  (onerror)="onerror($event)"
  (onreorder)="onreorder($event)">
</ng-fad-portal-shared-generic-table>

Typescript

import { GenericTableCol, GenericTableRow, IGenericTableConfiguration, PortalEvent, ResponseError, STATUS_COMPONENT, TOOLTIP_POSITION } from '@fad-producto-portal/ng-fad-shared';


.
.
.

  configuration!: IGenericTableConfiguration;
  tableHead!: GenericTableCol[];
  tableBody!: GenericTableRow[][];
  status: STATUS_COMPONENT = STATUS_COMPONENT.DATA;

  onevent(data: PortalEvent) {
    // do something after get event
    console.log(data);
  }

  onerror(e: ResponseError) {
    alert(e.error)
  }

  onreorder(reorder: string) {
    // logic to reorder GenericTableRow
    console.log(reorder);
  }

Inputs

Name	Type	Required	Default	Description
configuration	IGenericTableConfiguration	false	GENERIC_TABLE_CONFIGURATION_DEFAULT	Configuration component (styles, legends and behavior)
tableHead	GenericTableCol[]	true	[]	Cells as header in a table
tableBody	GenericTableRow[][]	true	[]	Row of cells in a table
status	STATUS_COMPONENT	true	undefined	Component status (data, error,loading)

Outputs

Name	Return	Description
onerror	ResponseError	It is called when an error occurs
onevent	PortalEvent	Called when any cell has an action
onreorder	string	It is called when you want to reorder the table, returns the variable by which the data will be reordered

Loader

Description

Component that displays a loader

Usage

HTML

<ng-fad-portal-shared-loader
  [configuration]="configuration">
</ng-fad-portal-shared-loader>

Typescript

import { ILoaderConfiguration } from '@fad-producto-portal/ng-fad-shared';

.
.
.

  configuration!: ILoaderConfiguration;

Inputs

Name	Type	Required	Default	Description
configuration	ILoaderConfiguration	false	LOADER_CONFIGURATION_DEFAULT	Configuration component (styles, legends and behavior)

Paginator

Description

Component that displays pagination. BA version.

Usage

HTML

<ng-fad-portal-shared-paginator
  (onresearch)="researchByPaginator($event)"
  (onerror)="onerror($event)"
  [paginator]="paginator"
  [configuration]="configuration">
</ng-fad-portal-shared-paginator>

Typescript

import { FadPaginator, IPaginatorConfiguration, ResearchPagination, ResponseError} from '@fad-producto-portal/ng-fad-shared';

.
.
.

  configuration!: IPaginatorConfiguration;
  paginator!: FadPaginator;

  onresearch(event: ResearchPagination) {
    // adjust page and size
    console.log(event);
  }

  onerror(event: ResponseError){
    console.log(event);
  }

Inputs

Name	Type	Required	Default	Description
configuration	IFadPaginatorConfiguration	false	FAD_PAGINATOR_CONFIGURATION_DEFAULT	Configuration component (styles, legends and behavior)
paginator	FadPaginator	true	undefined	Pagination data taht will be render

Outputs

Name	Return	Description
onerror	ResponseError	It is called when an error occurs
onresearch	ResponseError	It is called when you want to update the page or pagination size

Search engine

Description

component that is a search engine that allows users to enter text and emit a search event.

Usage

HTML

<ng-fad-portal-shared-search-engine
  [configuration]="configuration"
  [disabled]="disabled"
  (onsearch)="onsearch($event)">
</ng-fad-portal-shared-search-engine>

Typescript

import { ISearchEngineConfiguration } from '@fad-producto-portal/ng-fad-shared';

.
.
.

  configuration!: ISearchEngineConfiguration;
  disabled = false;

  onsearch(data: string) {
    // data to search
    console.log(data);
  }

Inputs

Name	Type	Required	Default	Description
configuration	ISearchEngineConfiguration	false	FAD_PAGINATOR_CONFIGURATION_DEFAULT	Configuration component (styles, legends and behavior)
disabled	FadPaginator	false	undefined	Show id the component is disabled or not

Outputs

Name	Return	Description
onsearch	string	It is called when user modify teh input