Checkbox dinâmicos

Front-end
#1

Tenho alguns checkbox que são montados dinâmicos

<mat-checkbox
*ngIf="forneTudoMarcadoLista[j].marcado"
[id]="fornecedor.id"
[name]="fornecedor.id"
[checked]="false"
[value]="fornecedor.valorCorreto"
(change)="
defineFornecedoresValorCorreto(
$event,
fornecedor.idInsumo,
fornecedor.valorCorreto,
fornecedor.total,
fornecedor.idFornecedor
)
"
matTooltip="Escolher ou não este item para este fornecedor"
></mat-checkbox>

image
image.png1562×310 24 KB

Mas clicar na mesma linha, como fazer para apagar os outros checkbox ?

image
image.png1549×301 23.8 KB

#2

Vc quer apagar como assim? Limpar eles, ou remover eles da tela?

1 curtida
#3

Vamos supor que o usuário na linha do Peixe, primeiro ele marcou o fornecedor Carnes Atacado. Mas depois ele errou, e marcou o fornecedor teste cnpj. O que estou precisando, é que desmarque todos os checkbox da linha Peixe, menos o que ele marcou atual, entende ?

#4

Como está a estrutura dos dados dessa tabela? Imagino que vc tenha uma lista de fornecedores em algum lugar. Como está a implementação da função defineFornecedoresValorCorreto?

1 curtida
#5

Método: defineFornecedoresValorCorreto

defineFornecedoresValorCorreto(
    tipo: any,
    idInsumo: number,
    valorCorreto: number,
    total: number,
    idFornecedor: number
  ): void {
    console.log(tipo);
    console.log(valorCorreto);
    this.fornecedoresItens.forEach((fornecedorItem: any) => {
      fornecedorItem.fornecedores.forEach((fornecedor: any) => {
        if (
          fornecedor.valorCorreto !== null &&
          valorCorreto !== fornecedor.valorCorreto
        ) {
          //fornecedor.id.checked = false;
        }
      });
    });
    this.defineFornecedoresValorCorretoFornecedor(
      total,
      idFornecedor,
      idInsumo,
      tipo.checked
    );
    const objeto = {
      idInsumo: idInsumo,
      valorCorreto: valorCorreto,
    };
    const result = this.fornecedoresValorCorreto.filter(function (el: any) {
      return el.idInsumo == idInsumo;
    });
    for (let elemento of result) {
      let index = this.fornecedoresValorCorreto.indexOf(elemento);
      this.fornecedoresValorCorreto.splice(index, 1);
    }
    this.fornecedoresValorCorreto.push(objeto);
  }

Método: defineFornecedoresValorCorretoFornecedor

private defineFornecedoresValorCorretoFornecedor(
    total: number,
    idFornecedor: number,
    idInsumo: number,
    tipo: any
  ): void {
    this.totalPreco.forEach((obj: any) => {
      if (obj.idInsumo === idInsumo) {
        obj.marcado = false;
        obj.total = 0;
      }
    });
    this.totalPreco.forEach((obj: any) => {
      if (obj.idFornecedor === idFornecedor && obj.idInsumo === idInsumo) {
        obj.marcado = true;
      }
    });
    this.totalPreco.forEach((obj: any) => {
      if (
        obj.idFornecedor === idFornecedor &&
        obj.idInsumo === idInsumo &&
        obj.marcado &&
        tipo
      ) {
        obj.total = total + obj.total;
      }
    });
    this.valorPreco.forEach((objValorPreco: any) => {
      objValorPreco.valor = 0;
    });
    this.totalPreco.forEach((objTotalPreco: any) => {
      this.valorPreco.forEach((objValorPreco: any) => {
        if (objValorPreco.idFornecedor === objTotalPreco.idFornecedor) {
          objValorPreco.valor = objValorPreco.valor + objTotalPreco.total;
        }
      });
    });
  }
#6

Alguma ajuda …

#7

Qual o linha de código que deveria está desmarcando os checkboxes no evento change?

#8

Ao clicar no checkbox da linha, ele deve percorrer todos os checkbox existente na tela. Assim ele filtra todos os checkbox com o idInsumo igual a fornecedor.valorCorreto.substring(0,3). desmarcando eles. E só não desmarca o checkbox, atual, que value]=“fornecedor.valorCorreto”.

Entende ?

#9

Até entendi, mas soh o código com esses vários forEach que tah confundindo. Pelo que entendi, essa parte:

this.totalPreco.forEach((obj: any) => {
      if (obj.idInsumo === idInsumo) {
        obj.marcado = false;
        obj.total = 0;
      }
    });

está desmarcando todos os checkboxes. E essa outra:

this.totalPreco.forEach((obj: any) => {
      if (obj.idFornecedor === idFornecedor && obj.idInsumo === idInsumo) {
        obj.marcado = true;
      }
    });

marca apenas o do fornecedor que foi clicado por ultimo. É isso?

Achei estranho isso no componente: [checked]="false", não deveria está considerando a propriedade marcado?

1 curtida
#10

Estou melhorando esta parte, realmente está um pouco estranho.

Será que é isso ?

Vou testar

#11

Nesse componente, tu tem o insumo e os fornecedores. Se tu mantesse uma estrutura insumo X fornecedores, para controlar qual fornecedor foi selecionado para determinado insumo, acredito que iria facilitar a manipulação dos dados. Algo assim:

class InsumoFornecedor {
	insumo: number;
	fornecedor: number
}

// crie essa classe no momento em que os dados dos insumos forem carregados na tela
class ControleInsumoFornecedor {
	values: InsumoFornecedor[] = [];
	
	static criar(insumos: Insumo[]) {
		// aqui tu pega a lista de insumos e inicializa o array "insumoFornecedor"
		// com o id do insumo e o fornecedor (caso já tenha algum fornecedor marcado)
	}
	
	// nessa classe tu pode ter funções para controlar os fornecedores escolhidos para determinado insumo, ex.:
	
	// essa função pode ser chamada no "change" do checkbox
	alterarFornecedor(insumo: number, fornecedor number) {
		const value = values.find(el => el.insumo === insumo);
		value.fornecedor = fornecedor;
	}
	
	getDados(): InsumoFornecedor[] {
		return values;
	}
}

É soh uma ideia. Assim, vc irá separar o controle dos dados numa estrutura mais fácil de manusear.

1 curtida