Ontica/Empiria.Land.Intranet

View on GitHub
src/app/shared/directives/currency.directive.ts

Summary

Maintainability
A
30 mins
Test Coverage
/**
 * @license
 * Copyright (c) La Vía Óntica SC, Ontica LLC and contributors. All rights reserved.
 *
 * See LICENSE.txt in the project root for complete license information.
 */

import { Directive, ElementRef, HostListener, Input, OnChanges, Optional } from '@angular/core';

import { CurrencyPipe } from '@angular/common';

import { NgControl } from '@angular/forms';


@Directive({
  selector: 'input[empNgCurrency]'
})
export class EmpCurrencyDirective implements OnChanges {

  @Input() empNgCurrencyCode = 'MXN';

  @Input() empNgCurrencyDisplaySymbol: 'symbol-narrow' | '' = '';

  @Input() empNgCurrencyFractionDigitMin = 2;

  @Input() empNgCurrencyFractionDigitMax = 2;

  constructor(private el: ElementRef,
              private currencyPipe: CurrencyPipe,
              @Optional() private control: NgControl) { }


  ngOnChanges() {
    this.format();
  }


  @HostListener('input', ['$event']) onInputChange(event) {
    const initalValue = this.el.nativeElement.value;
    const formattedValue = initalValue.replace(/[^0-9.,$€]*/g, '');

    this.setValue(formattedValue);

    if (initalValue !== this.el.nativeElement.value) {
      event.stopPropagation();
    }
  }


  @HostListener('focusout', ['$event']) onBlur() {
    this.format();
  }


  @HostListener('keydown', ['$event']) onKeyDown(event) {
    if (event.keyCode === 13) {
      this.format();
    }
  }


  format() {
    const initalValue = this.el.nativeElement.value;

    const numberValue = parseFloat(String(initalValue).replace(/[,$€]*/g, ''));

    const digitsInfo = `1.${this.empNgCurrencyFractionDigitMin}-${this.empNgCurrencyFractionDigitMax}`;

    const formattedValue = this.currencyPipe.transform(numberValue,
                                                       this.empNgCurrencyCode,
                                                       this.empNgCurrencyDisplaySymbol,
                                                       digitsInfo);

    this.setValue(formattedValue);
  }


  setValue(value) {
    if (this.control?.control) {
      this.control.control.setValue(value);
    } else {
      this.el.nativeElement.value = value;
    }
  }

}