import { Component, OnInit } from '@angular/core';
import { DaoMockService } from '../../services/dao/dao-mock.service';
import { MatTableDataSource, } from '@angular/material';


@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {

  data;

  model =
        {
            label: "Table label",
            extra: [
                "edit",
                "select"
            ],
            columns: [
                'color',
                'desde',
                'nombre'
            ]
        }

        dataFields: any[] = this.model.columns
        tableColumns: any[] = this.model.columns


  constructor(private dao: DaoMockService) { }

  ngOnInit() {
    this.createTable()
  }

  createTable() {

    console.log("dataFields --->", this.dataFields)
    // output:
    // dataFields ---> (3) ["color", "desde", "nombre"]

    console.log("tableColumns --->",this.tableColumns)
    // output:
    // tableColumns ---> (3) ["color", "desde", "nombre"]

    this.tableColumns.unshift("edit")

    console.log("dataFields --->", this.dataFields)
    // output:
    // dataFields ---> (4) ["color", "desde", "nombre", "edit"]

    console.log("tableColumns --->",this.tableColumns)
    // output:
    // tableColumns ---> (4) ["color", "desde", "nombre", "edit"]

    this.dao.getAll().subscribe( (res:any) => this.data = new MatTableDataSource(res.data.content))
  }

}