piątek, 11 maja 2018

How to include <jhi-*></jhi-*> selector on home page in JHipster 4

Create panel.component.html:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 <div class="row">
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
 </div>


Create panel.component.ts:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { Component, OnDestroy, OnInit } from '@angular/core';

@Component({
    selector: 'jhi-panel',
  templateUrl: './panel.component.html',
})
export class PanelComponent implements OnInit, OnDestroy {
    alerts: any[];

    constructor() { }

    ngOnInit() {
    }

    ngOnDestroy() {
    }

}


Add PanelComponent to app/shared/shared.common.module.ts in:

  • declarations
  • exports


Add 

    <jhi-panel></jhi-panel>

anywhere in home.component.html.



Autor: o Brak komentarzy:

piątek, 20 kwietnia 2018

How to determine user browser language in JHipster

In navbar.component.ts add:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
findBrowserLanguage() {
    let browserLang = navigator.language;
      switch (browserLang) {
        case 'pl-PL': {
          browserLang = 'pl';
          this.changeLanguage(browserLang);
          break;
        }
       }
  }

and in ngOnInit() fuction add:

1
this.findBrowserLanguage();


Autor: o Brak komentarzy:

wtorek, 27 lutego 2018

How to reload current page by clicking link again in Angular

In .component.ts file add to constructor:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    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









Autor:



o





Brak komentarzy:
  


































          

        

          

        

ś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:








1
2
3
4
5


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










to:








1
2
3
4
5
6
7
8
9


            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:










1
2
3
4
5


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










to:








1
2
3
4
5
6
7
8
9


  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');
    });
  }























Autor:



o





Brak komentarzy:
  


































          

        

          

        

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();

















Autor:



o





Brak komentarzy:
  


































          

        

          

        

ś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");


































Autor:



o





Brak komentarzy:
  


































          

        

          

        

ś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:














 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


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:










 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


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:














 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


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>






























Autor:



o





5 komentarzy:
  


































        

      









Subskrybuj:
Posty (Atom)