List Page

import { Component } from '@angular/core';
import { GenericComponent } from 'app/main/api-gest-console/generic-component/generic-component';
import { AigGenericComponentService } from 'app/main/api-gest-console/generic-component/generic-component.service';
import { CityResourceService, CityDTO } from 'aig-standard';
import { MatDialog } from '@angular/material/dialog';
import { AigCityNewUpdateModalComponent } from '../city-new-update-modal/city-new-update-modal.component';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatSnackBar, PageEvent } from '@angular/material';

@Component({
	selector: 'aig-city-list-page',
    templateUrl: './city-list-page.component.html',
    styleUrls: ['./city-list-page.component.scss']
})
export class AigCityListPageComponent extends GenericComponent {
    constructor(
        private cityResourceService: CityResourceService,
        private _formBuilder: FormBuilder,
        private dialog: MatDialog,
		private _snackBar: MatSnackBar,
        aigGenericComponentService: AigGenericComponentService,
    ) { super(aigGenericComponentService) }

    loadPage() {
		this.initCitySearch();

		this.showAllCity();
	}

	reloadPage() {
		this.showAllCity();
	}

    //			---- CITY TABLE AND SEARCH SECTION ----
    
	cityDTOs: CityDTO[];
    cityDC: string[];
	cityError: any;

    citySearchFormGroup: FormGroup;
	cityFilters: any;

	cityPaginationSize: number;
	cityLength: number;

    
    private initCitySearch() {
		this.cityPaginationSize = 10;

		this.citySearchFormGroup = this._formBuilder.group({
			id: [''],
			name: [''],
			code: [''],
		});

		this.cityDC = ['id', 'code', 'name','wikiCode', 'buttons'];
    }
    
    private clearFiltersCity() {
		this.cityFilters = {
			idEquals: null,
			nameContains: null,
			codeEquals: null,
			page: 0,
		}
    }
    
    private async searchCity(page: number) {
		this.cityDTOs = null;

		this.cityFilters.page = page;
		this.cityFilters.size = this.cityPaginationSize;

		try {
			this.cityLength = await this.cityResourceService.countCitiesUsingGET(null, null, this.cityFilters.codeEquals, null, null, null, this.cityFilters.idEquals, null, null, null, null, null, null, null, this.cityFilters.nameContains, null, null, null, null, null, null, null, null, null, null, null, null, null).toPromise();

			if(this.cityLength == 0) {
				this._snackBar.open("Nessun valore trovato con questi parametri!", null, {duration: 2000,});
				this.cityDTOs = [];
				return;
			}

			this.cityDTOs = await this.cityResourceService.getAllCitiesUsingGET(null, null, this.cityFilters.codeEquals, null, null, null, this.cityFilters.idEquals, null, null, null, null, null, null, null, this.cityFilters.nameContains, null, null, null, null, null, this.cityFilters.page, null, null, null, null, null, null, null, null, null, null).toPromise();
		} catch (e) {
			this.cityError = e;
		}
    }
    
    showAllCity() {
		this.resetFiltersCity()
    }
    
    resetFiltersCity() {
		this.citySearchFormGroup.reset();
		this.clearFiltersCity();
		this.searchCity(0);
    }
    
    cityPaginationEvent(pageEvent: PageEvent) {
		this.cityPaginationSize = pageEvent.pageSize;
		this.searchCity(pageEvent.pageIndex);
	}

    citySearchWithFilter() {
		let searchedId = this.citySearchFormGroup.controls.id.value;

		if(searchedId != null) {
			this.clearFiltersCity();
			this.citySearchFormGroup.reset();
			this.cityFilters.idEquals = searchedId;
			this.searchCity(0);
			return;
		}

		this.cityFilters.idEquals = null;

		this.cityFilters.nameContains = this.citySearchFormGroup.controls.name.value;

		this.searchCity(0);
	}

    newCity(){
        this.dialog.open(AigCityNewUpdateModalComponent, { data: { city: {} } });
    }
    //			---- !CITY TABLE AND SEARCH SECTION ----
}

<div class="page-layout simple left-sidebar">
    <!-- SIDEBAR -->
    <fuse-sidebar class="sidebar" name="city-list-page-sidebar" position="left" lockedOpen="gt-md">
        <!-- SIDEBAR CONTENT -->
        <div class="content">
            <div>
                <div class="p-16 border-bottom" fxLayout="row" fxLayoutAlign="center top">
                    <button mat-raised-button (click)="showAllCity()">Resetta filtri</button>
                </div>
                <div class="header pl-16 mt-8" fxLayout="row" fxLayoutAlign="start center">
                    <span class="h3">Filtri</span>
                </div>
                <div class="content" fusePerfectScrollbar>
                    <div class="nav material2">
                        <div class="nav-item" aria-label="inbox">
                            <form [formGroup]="citySearchFormGroup" (ngSubmit)="citySearchWithFilter()" class="p-8">

                                <div fxLayout="row">
                                    <mat-form-field appearance="outline" fxFlex="100">
                                        <mat-label>Id</mat-label>
                                        <input matInput type="number" formControlName="id">
                                    </mat-form-field>
                                </div>
                                <div fxLayout="row">
                                    <mat-form-field appearance="outline" fxFlex="100">
                                        <mat-label>Name</mat-label>
                                        <input matInput type="text" formControlName="name">
                                    </mat-form-field>
                                </div>
                                <div fxLayout="row" fxLayoutAlign="end top">
                                    <button type="submit" mat-raised-button color="accent">Cerca</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / SIDEBAR CONTENT -->
    </fuse-sidebar>
    <!-- / SIDEBAR -->
    <!-- CENTER -->
    <div class="center">
        <!-- HEADER -->
        <div class="header p-24 primary" fxLayout="row" fxLayoutAlign="start center">
            <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
                (click)="toggleSidebar('city-list-page-sidebar')">
                <mat-icon>menu</mat-icon>
            </button>
            <h2>City</h2>
        </div>
        <!-- / HEADER -->
        <!-- CONTENT -->
        <div class="content mb-48">
            <aig-city-list-table [displayedColumns]="cityDC" [dataSource]="cityDTOs" [error]="cityError">
            </aig-city-list-table>

            <mat-paginator #paginator [length]="cityLength"
                [pageSize]="this.cityPaginationSize" [pageIndex]="this.cityFilters.page"
                [pageSizeOptions]="[10, 20, 50]" (page)="cityPaginationEvent($event)">
            </mat-paginator>

            <button mat-fab class="accent" id="add-city-button" (click)="newCity()" aria-label="add city">
                <mat-icon>add</mat-icon>
            </button>
        </div>
        <!-- / CONTENT -->
    </div>
    <!-- / CENTER -->
</div>

#add-city-button {
    position: fixed;
    bottom: 12px;
    right: 12px;
    padding: 0;
    z-index: 99;
}