mardi 4 août 2020

How to make checkbox disabled on condition when using ngPrime multiselect

I am using the below structure to show the data table and I have used checkboxes as multiple selectable. How to disable the checkbox if some value in the grid cell matches or don't matches the requirements.

I am using onSelect($event) on the data-table which gives me access to the table data. How to write a function to make the checkbox disable if the field "dtShippedToDatabank" is not empty? Here is my data-table:

 <data-table #toolChangeTable [columns]="columns" [data]="data" [loading]="loading"  (lazyLoad)="onLazyLoad($event)"  [lazy]="true"
    [lazyLoadOnInit]="false" [pageSize]="pageOptions.size" [multiselect]="true"  [paging] = "true" [totalRecords]="total" 
       defaultSortField="necLec" (edit)="updateToolChange($event)" (select)="onSelect($event)">
       <ng-container actionStart>
          <button mat-button (click)="onMultiRowUpdateClick()" (keypress.enter)="onMultiRowUpdateClick()"
             [disabled]="this.resourced || hasSelectedNone">Multi-Edit</button>
          <button mat-button (click)="clearSelections()" (keypress.enter)="clearSelections()">Clear All</button>
          <button mat-button (click)="onAddToolChangeClick()" [disabled]="this.resourced">Add Tool Change</button>
          <button mat-button (click)="onDeleteToolChangeClick()" (keypress.enter)="onDeleteToolChangeClick()"
                  [disabled]="!hasSelectedSingle">Delete Tool Change</button>
          <button mat-button [disabled]="!hasSelectedSingle" (click)="onEditAuthoritiesClick()"
             (keypress.enter)="onEditAuthoritiesClick()">Edit Tool Change
             Authorities</button>
       </ng-container>
    </data-table>

And here is my component file:

export class EcmToolChangeComponent implements OnInit, OnDestroy {

   pageOptions: PageOptions = {
      page: 0,
      order: 'asc',
      size: 10,
      sort: 'toolId',
   };

   shippedToDatabank = true;
   private designSources: any[] = null;
   data: EcmToolChange[];
   loading = false;
   readonly defaultSize = 10;
   private readonly defaultOrder = 'asc';
   private readonly defaultSortField = 'partNumber';
   total = 0;
   toolId: number;
   columns: ColumnDef[] = [
      { field: 'partNumber', name: 'Lead Part #', tooltip: 'tooltip', editable: false, width: '7em' },
      { field: 'oppositePart', name: 'Opp Part #', editable: false, width: '7em' },
      { field: 'fileType', name: 'File Type', editable: false, width: '6.5em' },
      { field: 'releaseLevel', name: 'Rel Lvl', editable: false, width: '5.5em' },
      { field: 'necLec', name: 'NEC LEC', width: '6.5em' },
      { field: 'toolAffected', name: 'TL Affected?', type: 'checkbox', width: '7.5em' },
      { field: 'certDataAffected', name: 'Cert Data?', type: 'checkbox', width: '7.5em' },
      { field: 'tlLeadRelLvl', name: 'TL Lead Rel Lvl', width: '9em' },
      { field: 'dtShippedToDatabank', name: 'Shipped to Databank', type: 'date', width: '13em' },
      { field: 'necCompleteDate', name: 'NEC Compl Date', type: 'date', width: '13em' },
      { field: 'designSourceId', name: 'Design Source', type: 'dropdown', optionsListField: 'id', optionsList: this.designSources, optionsListName: 'sourceName', width: '10em' },
      { field: 'authNumber', name: 'Auth. # (alpha)', width: '9.5em', editable: false },
      { field: 'authNumberN', name: 'Auth. # (numeric)', width: '10em', editable: false },
      { field: 'authTypeName', name: 'Auth. Type', width: '7em', editable: false },
      { field: 'programName', name: 'Program Name', width: '22em', editable: false },
      { field: 'pdi', name: 'PDI', width: '7em', editable: false },
      { field: 'lhStablePartCode', name: 'LH CSPC', width: '7em', editable: false },
      { field: 'rhStablePartCode', name: 'RH CSPC', width: '7em', editable: false },
   ];

   @Input() resourced = false;
   @Input() selectedEcmTool$: BehaviorSubject<any>;

   @ViewChild('toolChangeTable') toolChangeTable: DataTableComponent;

   constructor(
      private readonly ecmToolChangeService: EcmToolChangeService,
      private readonly ecmService: EcmService,
      private readonly dialog: MatDialog,
      private readonly toastr: ToastrService,
      private readonly confirmation: CgpConfirmationDialogService
   ) { }

   get hasSelectedNone(): boolean {
      return (this.toolChangeTable.selections || [])
         .filter((row) => Object.keys(row).length !== 0).length === 0;
   }

   get hasSelectedMultiple(): boolean {
      return (this.toolChangeTable.selections || [])
         .filter((row) => Object.keys(row).length !== 0).length >= 2;
   }
   get hasSelectedSingle(): boolean {
      return (this.toolChangeTable.selections || [])
         .filter((row) => Object.keys(row).length !== 0).length === 1;
   }

   onSelect(selectedEcmTool) {
      this.selectedEcmTool$.next(selectedEcmTool);
      this.shippedToDatabank = (!selectedEcmTool.fmtdtShippedToDatabank) ? false : true;
   }

   

   ngOnInit() {
      if (this.resourced) {
         this.columns.forEach((val) => val.editable = false);
      }

      this.selectedEcmTool$.subscribe(
         (selectedEcmTool) => {
            if (selectedEcmTool) {
               const toolId = selectedEcmTool.toolId;
               this.updateSelectedEcmTool(toolId);
               this.updateDesignSources();
            } else {
               this.data = [];
            }
         }
      );
   }

   ngOnDestroy() {
      if (this.selectedEcmTool$) { this.selectedEcmTool$.unsubscribe(); }
   }

   onMultiRowUpdateClick() {
      this.dialog.open(EtcMultiRowUpdateComponent,
         {
            autoFocus: true,
            width: '450px',
            data: {
               selections: this.toolChangeTable.selections,
               designSources: this.designSources
            }
         }).afterClosed().subscribe((val) => {
            if (val && val.reload) { this.updateSelectedEcmTool(this.toolId); }
         });
   }

   onAddToolChangeClick() {
      this.dialog.open(EtcAddToolChangeComponent,
         {
            autoFocus: true,
            width: '450px',
            data: {
               toolId: this.toolId,
               selections: this.toolChangeTable.selections,
               designSources: this.designSources
            }
         }).afterClosed().subscribe((val) => {
            if (val && val.reload) { this.updateSelectedEcmTool(this.toolId); }
         });
   }



Aucun commentaire:

Enregistrer un commentaire