export class TableCrudDemo implements OnInit {

    displayDialog: boolean;

    car: Car = {};

    selectedCar: Car;

    newCar: boolean;

    cars: Car[];

    cols: any[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);

        this.cols = [
            { field: 'vin', header: 'Vin' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
        ];
    }

    showDialogToAdd() {
        this.newCar = true;
        this.car = {};
        this.displayDialog = true;
    }

    save() {
        let cars = [...this.cars];
        if (this.newCar)
            cars.push(this.car);
        else
            cars[this.cars.indexOf(this.selectedCar)] = this.car;

        this.cars = cars;
        this.car = null;
        this.displayDialog = false;
    }

    delete() {
        let index = this.cars.indexOf(this.selectedCar);
        this.cars = this.cars.filter((val, i) => i != index);
        this.car = null;
        this.displayDialog = false;
    }

    onRowSelect(event) {
        this.newCar = false;
        this.car = this.cloneCar(event.data);
        this.displayDialog = true;
    }

    cloneCar(c: Car): Car {
        let car = {};
        for (let prop in c) {
            car[prop] = c[prop];
        }
        return car;
    }
}

<p-table [columns]="cols" [value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [paginator]="true" rows="15">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>

    <ng-template pTemplate="summary" let-rowData>
        <div style="text-align:left">
            <button type="button" pButton icon="fa-plus" (click)="showDialogToAdd()" label="Add"></button>
        </div>
    </ng-template>
    
</p-table>

<p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" [width]="300">
    <div class="ui-g ui-fluid" *ngIf="car">
        <div class="ui-g-12">
            <div class="ui-g-4">
                <label for="vin">Vin</label>
            </div>
            <div class="ui-g-8">
                <input pInputText id="vin" [(ngModel)]="car.vin" />
            </div>
        </div>
        <div class="ui-g-12">
            <div class="ui-g-4">
                <label for="year">Year</label>
            </div>
            <div class="ui-g-8">
                <input pInputText id="year" [(ngModel)]="car.year" />
            </div>
        </div>
        <div class="ui-g-12">
            <div class="ui-g-4">
                <label for="brand">Brand</label>
            </div>
            <div class="ui-g-8">
                <input pInputText id="brand" [(ngModel)]="car.brand" />
            </div>
        </div>
        <div class="ui-g-12">
            <div class="ui-g-4">
                <label for="color">Color</label>
            </div>
            <div class="ui-g-8">
                <input pInputText id="color" [(ngModel)]="car.color" />
            </div>
        </div>
    </div>
    <p-footer>
        <div class="ui-dialog-buttonpane ui-helper-clearfix">
            <button type="button" pButton icon="fa-close" (click)="delete()" label="Delete"></button>
            <button type="button" pButton icon="fa-check" (click)="save()" label="Save"></button>
        </div>
    </p-footer>
</p-dialog>