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