Angular 7 - Remove/Update objects from a list and update in DB (Primeng - Picklist)

Question

I’m using the Primeng picklist, just like this tutorial: picklist tutorial

I am using the event onMoveToTarget and onMoveToSource to get the object information:

<p-pickList [source]="listAnotherPermissoes" [target]="listPermissoesOfUser" 
              sourceHeader="Outras Permissoes" targetHeader="Permissoes do Usuario" 
              [responsive]="true" filterBy="nome_funcionalidade,nome_perfil,nome_componente" 
              dragdrop="true" 
              (onMoveToSource)="deletePermissaoOfUser($event)"
              sourceFilterPlaceholder="Formulário, componente ou funcionalidade" 
              targetFilterPlaceholder="Formulário, componente ou funcionalidade" 
              [sourceStyle]="{'height':'400px'}" [targetStyle]="{'height':'400px'}">
      <ng-template let-up pTemplate="item">
          <div class="ui-helper-clearfix">
            <div>{{ up.nome_formulario }} - {{up.nome_componente}} - {{ up.nome_funcionalidade }}</div>
          </div>
      </ng-template>
  </p-pickList>

Inside the Component, how can I remove the item (which comes from the event) and update the information on the page and in the database?

Answer 1

I decided as follows.

I got the information from $Event, then Filtreed the information I needed and sent the backend to do the rest of the work.

Inside the component is like this, two methods, one for each add button:

addPermissao(event) {
    event.items.forEach( x => {
      this.perfilPermissoesForm.patchValue({
        id_perfil: this.idPerfil,
        id_funcionalidade: x.id_funcionalidade,
        permissao: 0,
      });
    });
    this.perfilPermissoesService.create(this.perfilPermissoesForm.value).subscribe(
      (response) => {console.log(response); }
    );
  }

  removePermissao(event) {
    console.log(event.items);
    event.items.forEach( x => {
      this.perfilPermissoesForm.patchValue({
        id_perfil: this.idPerfil,
        id_funcionalidade: x.id_funcionalidade,
        id_perfil_permissao: x.id_perfil_permissao,
        permissao: 0,
      });
    });
    this.perfilPermissoesService.removePermissao(this.perfilPermissoesForm.value).subscribe(
      (response) => {console.log(response); }
    );
  }