# step frontend

## primeng

## installi e setti le librerie extra

auth
translation

## servizi utility

copi i core.services e imposti correttamente le cose app.componets

## design system

copi la cartella design
importi tutti i moduli primeng necessari
imposti routing e modules

//------------------------------------------------------------------------------------

# DISCOURSE

## Setup primeng

* cd frontend
* npm install
* temporary fix if needed npm install colors@1.4.0
* npm install primeflex --save
* npm install primeng --save
* npm install primeicons --save
* enable ripple effect in app.component.ts

import {Component, OnInit} from '@angular/core';
import {PrimeNGConfig} from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit{
  title = 'frontend';

  constructor(private primengConfig: PrimeNGConfig) {
  }

  ngOnInit(): void {
    this.primengConfig.ripple = true;
  }

}

* dal progetto primeNg designer copiare dalla cartella sass theme e designer all interno di scss/vendor ed eliminare all'interno di esse i temi non usati (I nostri progetti sono basati su Material light compact).

La struttura dovrebbe risultare come questa

* Aggiunge in scss anche i seguenti file copiati da un altro progetto

_container.scss
_functions.scss
_globals.scss
_primeng.scss
_vars.scss
styles.scss

* add scss folders and preprocessing to angular.json project.frontend.architect.build.options

  "styles": [
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeflex/primeflex.css",
              "src/scss/styles.scss"
            ],
  "stylePreprocessorOptions": {
              "includePaths": [
                "./src/scss/"
              ]
            },

* Container.scss è utilizzato da sass-mq, installare mediante npm i sass-mq

## Add fontawesome
* add .npmrc to frontend module, containing

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

* ng add @fortawesome/angular-fontawesome@0.10.1
* ng generate @schematics/angular:module shared
* add faIcons.ts to shared module, example:

import {IconDefinition} from '@fortawesome/fontawesome-svg-core';
import {faEllipsisV,} from '@fortawesome/pro-regular-svg-icons';

export const THEME_ICONS: { [k: string]: IconDefinition } = {
    farEllipsisV: faEllipsisV,

};

* ng generate @schematics/angular:module core
* ng generate @schematics/angular:module modules

## Add ToastService / Dialog Service / Translation Service

app.component.ts

import { Component, OnInit } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
import { LoadingService } from '@core/services/loading.service';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
    title = 'frontend';

    readonly loading$ = this.loadingService.loading$;
    constructor(private primengConfig: PrimeNGConfig, private loadingService: LoadingService, private translateService: TranslateService) {}

    ngOnInit(): void {
        this.primengConfig.ripple = true;
        this.translateService.get('primeng').subscribe((res) => this.primengConfig.setTranslation(res));
    }
}

app.component.html

<p-blockUI [blocked]="(loading$ | async) || false"></p-blockUI>
<p-toast></p-toast>
<p-confirmDialog [style]="{ width: '30vw', minWidth: '400px', maxWidth: '600px' }" [baseZIndex]="1000"></p-confirmDialog>

<router-outlet></router-outlet>

app.module.ts

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { MessageModule } from 'primeng/message';
import { MessagesModule } from 'primeng/messages';
import { ConfirmationService, MessageService } from 'primeng/api';
import { ToastModule } from 'primeng/toast';
import { BlockUIModule } from 'primeng/blockui';
import { TranslateLoader, TranslateModule, TranslatePipe } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ConfirmDialogModule } from 'primeng/confirmdialog';

export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    declarations: [AppComponent],
    imports: [
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader,
                deps: [HttpClient],
            },
            defaultLanguage: 'it',
        }),
        BrowserModule,
        AppRoutingModule,
        FontAwesomeModule,
        BrowserAnimationsModule,
        HttpClientModule,
        MessageModule,
        MessagesModule,
        ToastModule,
        BlockUIModule,
        ConfirmDialogModule,
    ],
    providers: [MessageService, ConfirmationService, TranslatePipe, { provide: LOCALE_ID, useValue: 'it' }],
    bootstrap: [AppComponent],
})
export class AppModule {}