Codefitter2

piątek, 20 kwietnia 2018

How to determine user browser language in JHipster

In navbar.component.ts add:

findBrowserLanguage() {
    let browserLang = navigator.language;

      switch (browserLang) {
        case 'pl-PL': {
          browserLang = 'pl';
          this.changeLanguage(browserLang);
          break;
        }
       }
  }

and in ngOnInit() fuction add:

1	this.findBrowserLanguage();

wtorek, 27 lutego 2018

How to reload current page by clicking link again in Angular

In .component.ts file add to constructor:

    this.router.routeReuseStrategy.shouldReuseRoute = function() {
      return false;
    }
    this.router.events.subscribe((evt) => {
      if (evt instanceof NavigationEnd) {
        // trick the Router into believing it's last link wasn't previously loaded
        this.router.navigated = false;
        // if you need to scroll back to top, here is the right place
        window.scrollTo(0, 0);
      }
    });

Router and NavigationEnd must be imported:

1	import { Router, NavigationEnd } from '@angular/router';

source: https://github.com/angular/angular/issues/13831

środa, 21 lutego 2018

How to solve TypeError: date.split is not a function in JHipster

If you get:
ERROR TypeError: date.split is not a function
at JhiDateUtils.toDate

probably you have to add date transform in PopupService.

Date format should be like: 2018-02-12T13:05:54

Change:

            if (id) {
                this.barCashupService.find(id).subscribe((barCashup) => {
                    this.ngbModalRef = this.barCashupModalRef(component, barCashup);
                    resolve(this.ngbModalRef);
                });

to:

            if (id) {
                this.barCashupService.find(id).subscribe((barCashup) => {
                    barCashup.barmanLoginTime = this.datePipe
                        .transform(barCashup.barmanLoginTime, 'yyyy-MM-ddTHH:mm:ss');
                    barCashup.cashupTime = this.datePipe
                        .transform(barCashup.cashupTime, 'yyyy-MM-ddTHH:mm:ss');
                    this.ngbModalRef = this.barCashupModalRef(component, barCashup);
                    resolve(this.ngbModalRef);
                });

Or if you call entity from function, change:

  loadLastCashup() {
    this.newDayService.query().subscribe((cashup) => {
      this.lastCashup = cashup;
    });
  }

to:

  loadLastCashup() {
    this.newDayService.query().subscribe((cashup) => {
      this.lastCashup = cashup;
                    this.lastCashup.barmanLoginTime = this.datePipe
                        .transform(this.lastCashup.barmanLoginTime, 'yyyy-MM-ddTHH:mm:ss');
                    this.lastCashup.cashupTime = this.datePipe
                        .transform(this.lastCashup.cashupTime, 'yyyy-MM-ddTHH:mm:ss');
    });
  }

czwartek, 8 lutego 2018

How to pass current client datetime to database in JHipster

1 2	const nowDate = new Date(); const now = new Date(nowDate.getTime() - (nowDate.getTimezoneOffset() * 60000)).toISOString();

środa, 7 lutego 2018

How to add translated string to JHipster Angular5 .ts file

Let’s assume we have already language files in /src/main/webapp/i18n/

In .component.ts file import:

 import { TranslateService } from '@ngx-translate/core';

Add to constructor:

1	private translateService: TranslateService,

Then translated string is:

const translatedString=this.translateService.instant("global.menu.entities.substitute");

środa, 17 stycznia 2018

How to change date format and currency based on chosen language in JHipster

I declared two languages in my JHipster app: en and pl.

In AngularJS version, switching language in navbar menu, changing date format and currency.

In Angular 5 version, there is only one english version, currency is $.

To have it like in AngularJS, new custom pipes are necessarily.

For date format:

In src/main/webapp/app/shared/language create localizedDatepipe.ts:

import {DatePipe} from '@angular/common';
import {Pipe, PipeTransform} from '@angular/core';
import {JhiLanguageService} from 'ng-jhipster';
import {registerLocaleData} from '@angular/common';
import localePl from '@angular/common/locales/pl';
@Pipe({
  name: 'localizedDate'
})
export class LocalizedDatePipe implements PipeTransform {
  lang = 'en';
  constructor(
    private languageService: JhiLanguageService) {
    this.getlang();
  }
  getlang() {
    this.languageService.getCurrent().then(function(langKeyValue) {
      registerLocaleData(localePl, 'pl');
      switch (langKeyValue) {
        case 'en': {
          this.lang = 'en';
          break;
        }
        case 'pl': {
          this.lang = 'pl';
          break;
        }
      }
    }.bind(this));
  }
  transform(value: any, pattern = 'mediumDate'): any {
    const datePipe: DatePipe = new DatePipe(this.lang);
    return datePipe.transform(value, pattern);
  }
}

Import it in src/main/webapp/app/shared/shared-common.module.ts:

import { LocalizedDatePipe } from './language/localizedDate.pipe';
.
.
.
@NgModule({
declarations: [
.
.
.
LocalizedDatePipe
     ],
     providers: [
.
.
.
     ],
     exports: [
 .
.
 LocalizedDatePipe

Then in entity.component.html use pipe:

<td>{{testE.entDate | localizedDate:'medium'}}</td>

---------------------------------

For currency format:

In src/main/webapp/app/shared/language create localizedCurrency.ts:

import { CurrencyPipe  } from '@angular/common'
import {Pipe, PipeTransform} from '@angular/core';
import {JhiLanguageService} from 'ng-jhipster';
import {registerLocaleData} from '@angular/common';
import localePl from '@angular/common/locales/pl';
@Pipe({
  name: 'localizedCurrency'
})
export class LocalizedCurrencyPipe implements PipeTransform {
  lang = 'en';
  currency = '$';
  constructor(
    private languageService: JhiLanguageService) {
    this.getlang();
  }
  getlang() {
    this.languageService.getCurrent().then(function(langKeyValue) {
      registerLocaleData(localePl, 'pl');
      switch (langKeyValue) {
        case 'en': {
          this.lang = 'en';
          this.currency = '$';
          break;
        }
        case 'pl': {
          this.lang = 'pl';
          this.currency = 'zł';
          break;
        }
      }
    }.bind(this));
  }
  transform(value: any): any {
    const currencyPipe: CurrencyPipe = new CurrencyPipe(this.lang);
    return currencyPipe.transform(value, this.currency);
  }
}

And import it in src/main/webapp/app/shared/shared-common.module.ts as above for 'localizedDate'.

In html component use pipe like this:

<td>{{testE.price | localizedCurrency}}</td>

środa, 10 stycznia 2018

How to show different content based on URL in JHipster 4

I have category-dialog.component.html and category-dialog.component.ts.

In category.component.html, there is a list of categories with buttons Add subcategory and Edit. Both refer to category-dialog.component.

Add subcategory:

[routerLink]="['/', { outlets: { popup: 'barfitter-category/'+ category.id + '/newsub'} }]"

Edit:

[routerLink]="['/', { outlets: { popup: 'barfitter-category/'+ category.id + '/edit'} }]"

I needed different content in each.

In category-dialog.component.ts added:

On top:

import {Router} from '@angular/router';

On top of class:

location = '' ;

Constructor:

    constructor(
        public activeModal: NgbActiveModal,
        private jhiAlertService: JhiAlertService,
        private categoryService: CategoryService,
        private eventManager: JhiEventManager,
      
        private  _router : Router
    ) {
      this.location = _router.url;
    }

Then in category-dialog.component.html added:

<div *ngIf="_router.url.includes('newsub')">Show me something</div>