List Table

import { Component, OnInit, Input } from '@angular/core';
import { MatDialog, MatSnackBar } from '@angular/material';
import { FuseProgressBarService } from '@fuse/components/progress-bar/progress-bar.service';
import { EventService } from 'aig-common/event-manager/event.service';
import { CityDTO } from 'aig-generic';
import { CityResourceService } from 'aig-standard';
import { AigCityNewUpdateModalComponent } from 'app/main/api-gest-console/modules/aig-standard/components/city-new-update-modal/city-new-update-modal.component';

@Component({
    selector: 'aig-city-list-table',
    templateUrl: './city-list-table.component.html',
    styleUrls: ['./city-list-table.component.scss']
})
export class AigCityListTableComponent implements OnInit {
    constructor(
        private cityResourceService: CityResourceService,
        private eventService: EventService,
        private _fuseProgressBarService: FuseProgressBarService,
        private _snackBar: MatSnackBar,
        private dialog: MatDialog,
    ) { }

    @Input()
    error: any;
    @Input()
    displayedColumns: string[];
    @Input()
    dataSource: any[];

    ngOnInit(): void { }

    async deleteCity(id: number) {
        this._fuseProgressBarService.show();

        try {
            await this.cityResourceService.deleteCityUsingDELETE(id).toPromise();
            this._snackBar.open(`City: '${id}' deleted.`, null, { duration: 2000, });

            this.eventService.reloadCurrentPage();
        } catch (e) {
            this._snackBar.open(`Error during deleting city: '${id}'. (${e.message})`, null, { duration: 5000, });
        }
        this._fuseProgressBarService.hide();
    }

    editCity(cityDTO: CityDTO) {
        this.dialog.open(AigCityNewUpdateModalComponent, { data: { city: cityDTO } });
    }
}

<div *ngIf="error != null" class="p-48" fxLayout="row" fxLayoutAlign="center center" fxFlex>
    <span *ngIf="error.status == 401">No access to this info</span>
</div>
<div *ngIf="error == null && dataSource == null" class="p-48">
    <div fxLayout="row" fxLayoutAlign="center center" fxFlex>
        <mat-spinner></mat-spinner>
    </div>
</div>
<div *ngIf="error == null && dataSource != null">

    <mat-table #table [dataSource]="dataSource">

        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
            <mat-cell *matCellDef="let e"> {{ e.id }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="code">
            <mat-header-cell *matHeaderCellDef> Code </mat-header-cell>
            <mat-cell *matCellDef="let e"> {{ e.code }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
            <mat-cell *matCellDef="let e"> {{ e.name }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="wikiCode">
            <mat-header-cell *matHeaderCellDef> Wiki Code </mat-header-cell>
            <mat-cell *matCellDef="let e"> {{ e.wikiCode }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="buttons">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let e">
                <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
                    <mat-icon>more_vert</mat-icon>
                  </button>
                  <mat-menu #menu="matMenu">
                    <button mat-menu-item [routerLink]="'/s6d/city/detail/' + e.id">
                      <mat-icon>details</mat-icon>
                      <span>Details</span>
                    </button>
                    <button mat-menu-item (click)="editCity(e)">
                        <mat-icon>edit</mat-icon>
                        <span>Edit</span>
                      </button>
                    <button mat-menu-item (click)="deleteCity(e.id)">
                      <mat-icon>delete</mat-icon>
                      <span>Delete</span>
                    </button>
                  </mat-menu>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let dataSource; columns: displayedColumns;"></mat-row>

    </mat-table>

</div>