rekomen by atribbute

import { Component, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { RepositoryService } from 'src/app/shared/services/repository.service';
import { samplingVoucherList } from 'src/app/shared/services/uji-tuntas/config';
import { ProductService } from '../../../../../../../../shared/services/products/productservice';
import { TableRequest } from '../model/simulasi-jumlah-sampling.model';
import icSearch from '@iconify/icons-ic/twotone-search';
import { Form, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { HttpParams } from '@angular/common/http';
@Component({
  selector: 'vex-rekomen-by-attribute',
  templateUrl: './rekomen-by-attribute.component.html',
  styleUrls: ['./rekomen-by-attribute.component.scss']
})
export class RekomenByAttributeComponent implements OnInit {
  icSearch = icSearch;
  public rows: Array<object> = [];
  public columns: Array<object>;
  public pageSize: number;
  public recordsTotal: number;
  public paramRequest: TableRequest;
  selectRow: any;
  sort: string;
  search: string;
  token: string;
  debounceTimer: any;
  debounceTime = 500;
  submitted=false
  isLoading = true;
  listAttribute: any;
  listRekapAttribute:any;
  listBalance: any;
  listPresentase:any;
  idAttr:any;
  isConfirmation = false;
  rekapByAttrForm:FormGroup
  loadTable= false
  idBalance:any
  idSelect:any;
  colsName: any = [];
  sortField: string;
  index: any;
  constructor(
    private productService: ProductService,
    private repositoryService: RepositoryService,
    private snackbar: MatSnackBar,
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
  ) {
    this.route.params.subscribe((params) => {
      this.idSelect = params['id'];
  });
  }

  ngOnInit(): void {
    this.sortField = 'id';
    this.token = localStorage.getItem('token');
    this.columns = [
      { name: 'No Rekening', field: 'noRekening' },
      { name: 'No Nasabah', field: 'noNasabah' },
      { name: 'Nama Kantor', field: 'namaKantor' },
      { name: 'Kd Kualitas', field: 'kdKualitas' },
      { name: 'Jumlah Laporan perBulan', field: 'jmlBulLap' },
      { name: 'Kd Gol Nasabah', field: 'kdGolNasabah' },
      { name: 'Gol Nasabah', field: 'golNasabah' },
      { name: 'Jenis Penggunaan', field: 'jenisPenggunaan' },
      { name: 'Jenis Kredit', field: 'jenisKredit' },
      { name: 'Jenis Valuta', field: 'jenisValuta' },
      // { name: 'Presentase Sampling', field: 'persentaseSampling' }
    ];

    this.pageSize = 10;
    this.paramRequest = {
      start: 0,
      length: this.pageSize,
    };
    this.getRekapAttribute();
   this.getDataJson1(this.paramRequest)
    this.initForm();
  }

  // BUAT SORT BALANCE
  items = [
    {
      id:0,
      name: 'Sort',

    }, {
      id:1,
      name: 'Random',
    }
  ];

  form: FormGroup = new FormGroup({
    name: new FormControl('',Validators.required),
    presentase: new FormControl('', Validators.required),
    // balance: new FormControl('',  Validators.required)
  });

  initForm() {
    this.rekapByAttrForm = this.formBuilder.group({
        name:['',[Validators.required]],
        presentase: ['', [Validators.required]],
        // balance: ['', [Validators.required]],
    });
     {
      this.f.presentase.setValue('')
    }
  }

  get f() {
    return this.rekapByAttrForm.controls;
}


onSubmit() {
  console.log('check', this.rekapByAttrForm, this.rekapByAttrForm.valid);
  this.submitted = true;
  if (this.rekapByAttrForm.invalid) {
    return;
  } else {
    this.isConfirmation = true;
  }
}

onChangeUser(evt:Event) {
  const index = this.listRekapAttribute.findIndex(item => item['id'] === evt);
  const modelDataUser = this.listRekapAttribute[index];
    this.idAttr = modelDataUser.id
    console.log(this.idAttr)
    this.getPresentase();
  }

  onChanges(evt:any) {
    const index = this.items.findIndex(item => item['name'] === evt);
    const modelDataUser = this.items[index];
      this.idBalance = modelDataUser.name
      console.log(this.idAttr)
}


  getAttribute() {
    this.isLoading = true;
    this.repositoryService.getDataWithToken(samplingVoucherList.attribut , this.token).subscribe(
      (value: any) => {
        this.listAttribute = value.data;
        this.isLoading = false;
      }, error => {
        this.isLoading = false;
        console.log('error', error);

        this.snackbar.open("Opss.. "+error['name'], 'Error', {
          duration: 7000
        });
      }
    );
  }

  getRekapAttribute() {
    // this.isLoading = true;
    this.repositoryService.getDataWithToken(samplingVoucherList.rekapAttribut , this.token).subscribe(
      (value: any) => {
        this.listRekapAttribute = value.data;
        this.isLoading = false;
      }, error => {
        this.isLoading = false;
        console.log('error', error);
        this.snackbar.open("Opss.. "+error['name'], 'Error', {
          duration: 7000
        });
      }
    );
  }



  getPresentase() {
    // this.isLoading = true;
    this.repositoryService.getDataWithToken(samplingVoucherList.presentaseAttribut + this.idAttr , this.token).subscribe(
      (value: any) => {
        this.listPresentase = value.data;
        this.isLoading = false;
      }, error => {
        this.isLoading = false;
        console.log('error', error);

        this.snackbar.open("Opss.. "+error['name'], 'Error', {
          duration: 7000
        });
      }
    );
  }




  getDataJson(param: TableRequest) {
    this.isLoading = true;
    const token = localStorage.getItem('token');
    const formData = new FormData();
    let params = new HttpParams();
    params = params.append('nominal', 5000);
    params = params.append('cmbRekapid', this.idAttr );
    params = params.append('cmbValue', this.f.presentase.value);
    formData.append('start', param.start.toString());
    formData.append('length', param.length.toString());
        formData.append('search[value]', this.search ? this.search.toString() : '');
        formData.append('search[regex]', 'false');
        formData.append('columns[0][data]', '1');
        formData.append('columns[0][orderable]', 'true');
        formData.append('columns[0][searchable]', 'true');
        formData.append('columns[0][name]', 'id');
        formData.append('order[0][column]', '1');
        formData.append('order[0][dir]', this.sort ? this.sort.toString() : 'desc');
        this.repositoryService.postDataWithToken(samplingVoucherList.sampleVouchingRekomenListAtttibute+ this.idSelect+'?'+params,formData, token, null).subscribe((res: any) => {
          this.recordsTotal = res.data.recordsFiltered as number;
          this.rows = res.data.data;
          this.isLoading = false;
        });
}

getDataJson1(param: TableRequest) {
  this.isLoading = true;
  const token = localStorage.getItem('token');
  const formData = new FormData();
  formData.append('start', param.start.toString());
  formData.append('length', param.length.toString());
  formData.append('search[value]', this.search ? this.search.toString() : '');
  formData.append('search[regex]', 'false');
  formData.append('columns[0][data]', '1');
  formData.append('columns[0][orderable]', 'true');
  formData.append('columns[0][searchable]', 'true');
  formData.append('columns[0][name]', 'id');
  formData.append('order[0][column]', '1');
  formData.append('order[0][dir]', this.sort ? this.sort.toString() : 'desc');
      this.repositoryService.postDataWithToken(samplingVoucherList.sampleVouchingRekomenListAtttibute+ this.idSelect,formData, token, null).subscribe((res: any) => {
        this.recordsTotal = res.data.recordsFiltered as number;
        this.rows = res.data.data;
        this.isLoading = false;
      });
}




sortPage(page: any) {
  this.index = this.colsName?.findIndex(item => item == page.sortField);
  this.sort = page?.sortOrder === 1 ? 'asc' : 'desc';
  this.sortField = page?.sortField ? page.sortField : 'id';
}

updatePage(page: any) {
  if (page && page.sortField && page.sortOrder) {
    this.sortPage(page);
  }

  this.paramRequest = {
    start: page.first / page.rows,
    length: page.rows,
  };

  this.getDataJson1(this.paramRequest);

}



  getBalance() {
    this.isLoading = true;
    this.repositoryService.getDataWithToken(samplingVoucherList.balance, this.token).subscribe(
      (value: any) => {
        this.listBalance = value.data;
        this.isLoading = false;
      }, error => {
        this.isLoading = false;
        console.log('error', error);

        this.snackbar.open("Opss.. "+error['name'], 'Error', {
          duration: 7000
        });
      }
    );
  }

  getAttributeTable(){
    this.loadTable = true
    this.pageSize = 10;
    this.paramRequest = {
      start: 0,
      length: this.pageSize,
    };
    this.getDataJson(this.paramRequest)
  }


  getAttr() {
    this.repositoryService.getDataWithToken(samplingVoucherList.attribut, this.token).subscribe((res: any) => {
        this.listAttribute = res.data

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

        this.snackbar.open(error['message'], 'Error', {
          duration: 7000,
        });
    })
}


onClear() {
  this.rekapByAttrForm.reset();
}



}