akveo / ng2-smart-table

Angular Smart Data Table component
https://akveo.github.io/ng2-smart-table/
MIT License
1.63k stars 877 forks source link

add with dropdown in smart table angular #1133

Open ahmedaltiade opened 4 years ago

ahmedaltiade commented 4 years ago

image

when i choose categorie in add sous categorie i cant find my categorie and when i refresh page i find 'it

image

this is my code

import { Component, OnInit } from '@angular/core'; import { SousCatService } from '../services/sous-cat.service'; import { Router } from '@angular/router'; import { Categorie } from '../models/categorie-model'; import { CategorieService } from '../services/categorie.service';

@Component({ selector: 'app-sous-cat', templateUrl: './sous-cat.component.html', styleUrls: ['../app.component.css'] }) export class SousCatComponent implements OnInit { public souscat; public categorie; source: any; constructor(private souscatService: SousCatService, private categorieService: CategorieService, private router: Router) { } settings = { columns: { id_souscat: { title: 'id Sous categorie' }, libelle_souscat: { title: 'libelle sous categorie' }, categorie: {

    title: 'categorie',
    editor:
    {
      type: 'list',
      config:
      {
        list: []
      },
    },
    filter: {
      type: 'list',
      config: {
        selectText: 'Chercher par categorie',
        list: []

  } 
    },
   valuePrepareFunction: (row) => { 

      return row.libelle_cat},

},

}, pager: { perPage: 5, }, actions: { position: 'right', // left|right }, edit: { editButtonContent: '', saveButtonContent: '', cancelButtonContent: '', confirmSave: true, }, delete: { deleteButtonContent: '', confirmDelete: true, }, add: { addButtonContent: '', createButtonContent: '', cancelButtonContent: '', confirmCreate: true } } ngOnInit() { this.souscatService.getAllsous_Cat().subscribe( data => { this.souscat = data;

    console.log(data);
  }, err => {
    console.log(err);
  }

)

// select option pour toutes les categories 
this.categorieService.getCategories().subscribe(
  data => {
    this.categorie = data;
    for (const l of this.categorie) {
      this.settings.columns.categorie.editor.config.list.push({value:l.id,title:l.libelle_cat});
      this.settings = Object.assign({}, this.settings);
    }
  }
)

}

//delete method onDeleteConfirm(event) {

if (window.confirm('Voulez-vous supprimez la sous  categorie')) {
  event.confirm.resolve();
  this.souscatService.deleteSous_Cat(event.data.id).subscribe(data => {
    console.log(data);
  },
    error => {
      console.log(error);
    })
}
else {
}

}

//ajouter methode ajouter(event) {

event.newData.categorie = { id: event.newData.categorie ,libelle_cat:event.newData.libelle_cat}

this.souscatService.addSous_Cat(event.newData).subscribe(
  newData => {

    event.confirm.resolve();      

    console.log(event.newData);
  }
  ,
  error => {
    console.log(error);
  }
)

}

modifier(event){

event.newData.categorie = { id: event.newData.categorie }
console.warn(event.newData)

  this.souscatService.updateSous_Cat(event.data.id,event.newData).subscribe(
    newData=>{
      event.confirm.resolve(); 
      console.log(event.newData);
      event.confirm.resolve();
    },
    error => {console.log(error);}

  ) 
}

}

pj-alvarado10 commented 1 year ago

Thank you!! You code was very useful for me! :)