DEV Community: Alejandro

JHipster: Create filters dynamically in Angular

Alejandro — Fri, 19 Feb 2021 20:31:28 +0000

Sometimes, there are cases in which you need to filter your entities according to some conditions. For instance:

if (!this.searchShowOverdue) {
  this.invoiceService
    .filterInvoices({
      page: pageToLoad - 1,
      size: this.itemsPerPage,
      sort: this.sort(),
      'type.equals': this.invoiceType,
    }).subscribe(
      (res: HttpResponse<IInvoice[]>) => this.onFilterSuccess(res.body, res.headers, this.page),
        () => this.onError()
  );
} else {
  this.invoiceService
  .filterInvoices({
    page: pageToLoad - 1,
    size: this.itemsPerPage,
    sort: this.sort(),
    'type.equals': this.invoiceType,
    'status.equals': Status.OVERDUE,
  }).subscribe(
    (res: HttpResponse<IInvoice[]>) => this.onFilterSuccess(res.body, res.headers, this.page),
    () => this.onError()
  );
}

Repeat this for as many conditions you need. So I started thinking about how much code that was and decided to do something about it.

As we all know, the service receives req: any like size: this.itemsPerPage in the example above.

What if I could fill that object according to our own conditions? Well, I did just that 😉

const req: Record<string, any>[] = [];
req.push({'page': pageToLoad - 1});
req.push({'size': this.itemsPerPage});
req.push({'sort': this.sort()});
req.push({'type.equals': this.invoiceType});
req.push({'active.equals': true});

if (this.searchShowOverdue) {
  req.push({'status.equals': 'OVERDUE'});
}
if (this.toDate && this.fromDate) {
  req.push({'date.lessOrEqualThan': this.toDate.format(DATE_FORMAT)});
  req.push({'date.greaterOrEqualThan': this.fromDate.format(DATE_FORMAT)});
}

const request = {};
(Object.values(req) as Array<any>).forEach(value => {
  request[Object.keys(value)[0]] = Object.values(value)[0];
});
this.invoiceService
  .filterInvoices(request)
  .subscribe(
    (res: HttpResponse<IInvoice[]>) => this.onFilterSuccess(res.body, res.headers, this.page),
    () => this.onError()
);

As you can see, the code is cleaner and easier to add more filters.

I know this might not be the best solution, but it did help me clean a lot of code in my project, so it will do for now. If you have a better solution, please let me know 😃

Automatically backup and upload to S3

Alejandro — Sun, 28 Jun 2020 23:29:20 +0000

Puedes leer este artículo en castellano aquí

Why?

Because who doesn't need a database backup? ;)

Background

For my personal project, FacturApp, I use PostgreSQL because it's awesome and also because is free. From time to time I need to restore the prod db to my local instance to have true data and make tests more reliable.

Because I love automation, I decided to have a daily backup just in case and when I need to have the current data, I would just download the file from S3.

How?

Steps

The TLDR part would be

Find the container's ID
Save current time in a variable called now
Save the db backup using the now variable for the name
Upload backup to S3
Locally delete files older than 30 days

The Code

#!/bin/bash
docker_id="$(docker ps -aqf 'name=postgres')"
echo "${docker_id}"
now=`date +%Y%m%d%H%M%S`
docker exec ${docker_id} /usr/local/bin/pg_dump -U theuser -Fc thedb > /root/backups/facturapp_${now}.backup
# Upload file to S3
/usr/local/bin/aws s3 cp /root/db_daily/facturapp_${now}.custom s3://db-backup-bucket/facturapp_${now}.custom --sse AES256
# Deleting old files
find /root/db_daily -type f -mtime +30 -exec rm {} \;

Automate it!

The final step would be to create a cron job by running crontab -e and adding something like
0 0 * * * /root/dailybackup >> /root/logs/backup.log
to have to script running each day at midnight.

And that's how I save a backup to an S3 bucket every day at midnight :)

The /root/logs/backup.log part is just in case you want to save the log for each time the script runs.

Formateando Selector de fechas en Angular

Alejandro — Wed, 15 Apr 2020 05:28:40 +0000

English version: https://dev.to/amatosg/customize-date-picker-in-angular-4323

Cuando se manejan fechas, el formato es crucial para que nos podamos entender correctamente: 12/01/2020 no es lo mismo que 01/12/2020.

Esto nos dice que un campo de fecha, es realmente importante. Con Angular, esto puede ser complicado, ya que NgbDateParserFormatter mostrará las fechas con el formato yyyy-MM-dd:

Estuve procastinando con esto durante mucho tiempo, así que decidí tomar cartas en el asunto y mostrar el formato correcto (el que todos deberían usar): dd/MM/yyyy

Custom Formatter

Lo que necesitamos hacer es crear un archivo, yo lo llamé shared/component/ngb-custom-date-parser-formatter.ts y puse el siguiente código:

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';
import * as moment from 'moment';

@Injectable()
export class NgbCustomDateParserFormatter extends NgbDateParserFormatter {

  constructor(private momentFormat: string) {
    super();
  };

  format(date: NgbDateStruct): string {
    if (date === null) {
      return '';
    }
    const d = moment({ year: date.year,
      month: date.month - 1,
      date: date.day });
    return d.isValid() ? d.format(this.momentFormat) : '';
  }

  parse(value: string): NgbDateStruct {
    if (!value) {
      return null;
    }
    const d = moment(value, this.momentFormat);
    return d.isValid() ? { year: d.year(),
      month: d.month() + 1,
      day: d.date() } : null;
  }
}

Luego, en mi app.module.ts agregué lo siguiente en la sección providers:

{
    provide: NgbDateParserFormatter,
    useValue: new NgbCustomDateParserFormatter("DD/MM/YYYY") // <== formato!
}

Y voila, a tu manera :)

PD: con suerte y esto llega al siguiente release de JHipster ;)

Customize date picker in Angular

Alejandro — Wed, 15 Apr 2020 05:19:55 +0000

Versión en castellano: https://dev.to/amatosg/formateando-selector-de-fechas-en-angular-3p8i

When dealing with dates, formatting is crucial to understand each other: 12/01/2020 is not the same as 01/12/2020.

So an input field having the proper format is actually pretty important. With Angular this can be tricky as NgbDateParserFormatter will display dates using yyyy-MM-dd format:

I've been postponing this issue for too long, so I decided to fix it and display the proper dd/MM/yyyy format every region uses (if there is any region not using it, well...they should).

Custom Formatter

We need to create a new file, I called it shared/component/ngb-custom-date-parser-formatter.ts containing the following code:



import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';
import * as moment from 'moment';

@Injectable()
export class NgbCustomDateParserFormatter extends NgbDateParserFormatter {

  constructor(private momentFormat: string) {
    super();
  };

  format(date: NgbDateStruct): string {
    if (date === null) {
      return '';
    }
    const d = moment({ year: date.year,
      month: date.month - 1,
      date: date.day });
    return d.isValid() ? d.format(this.momentFormat) : '';
  }

  parse(value: string): NgbDateStruct {
    if (!value) {
      return null;
    }
    const d = moment(value, this.momentFormat);
    return d.isValid() ? { year: d.year(),
      month: d.month() + 1,
      day: d.date() } : null;
  }
}

Then, in my app.module.ts I added the following line to the providers section:



{
    provide: NgbDateParserFormatter,
    useValue: new NgbCustomDateParserFormatter("DD/MM/YYYY") // <== format!
}

Et voila, you will have it your way :)

PD: hopefully this will make it to the next release of JHipster ;)

Setting up environment for JHIpster

Alejandro — Mon, 22 Jul 2019 04:35:54 +0000

Photo by Maximilian Weisbecker on Unsplash
As my company approved my 2 days a week remote work, they just gave me a new (really amazing Dell Latitude) laptop with Ubuntu.

I had a lot of packages to install as it was a clean install, so I thought it would be a good idea to make a post so I don't have to search all over again every time I need to setup my box (it has happened several time before).

Docker CE

I think this doesn't need too much words.

Install the certificate

sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common

Add the source.list reporsitory

sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"

Update && Install

sudo apt-get update && sudo aptitude install docker-ce docker-ce-cli containerd.io

Docker Compose

Awesome to run the yml files JHipster generates (for databases, code analysis, monitoring and more).

Install Docker Compose

sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

Make it executable

sudo chmod +x /usr/local/bin/docker-compose

NodeJS && NPM

After installing nodejs from the official repositories, I found that they were kind of outdated, maybe I needed to modify something, but I found this option to work properly.

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs

JHipster

Everything is straigth forward and JHipster's installation is not different. Just run

sudo npm install -g generator-jhipster

Note: If you get an error mentioning Error: ENOSPC: System limit for number of file watchers reached, watch 'target/classes', there is an explanation for it:

Listen uses inotify by default on Linux to monitor directories for changes. It's not uncommon to encounter a system limit on the number of files you can monitor. For example, Ubuntu Lucid's (64bit) inotify limit is set to 8192.

You can solve this by running, which will persist on reboot:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Additional Packages

Gitter (chat for developers, Jhipster has its chat there too!)
Kitematic (Kitematic is a simple application for managing Docker containers on Mac, Linux and Windows.).
Gitkraken (Simply the best git client I've ever used)

That's it :)

Array.foreach vs for() 😰

Alejandro — Tue, 05 Mar 2019 22:43:15 +0000

La verdad es que siempre pensé que eran homónimos, no pensé que podría haber tanta diferencia entre una función y otra.

Pues resulta que realizar un foreach implica que la ejecución va a tardar nada más ni nada menos que un 96% más(!!!) que un for 😳 y para ejemplo un botón:

Benchmark.prototype.setup = function() {
    // Populate the base array
    var arr = [];

    for (var i = 0; i < 1000; i++) {
        arr[i] = i; 
    }

    function someFn(i) {
        return i * 3 * 8;
    }        
};

Al ejecutar esto, tenemos lo siguiente (puedes probar aquí):

Obviamente esto se puede notar cuando estamos trabajando con miles de registros, pero es mejor implementar buenas prácticas desde un principio 😌

Con esta evidencia, definitivamente quedo prohibido de utilizar foreach en cualquier desarrollo que haga en Angular en favor al simple y querido for de toda la vida ❤

Por cierto, eso no aplica a TypeScript ya que el foreach se compila al for que nos gusta 😬