As shown below when editing a row in a primeng p-table element the edit allows for duplicate rows to be saved.
demo.component.html
<p-table [value]="blockOutRows" dataKey="id" [columns]="blockOutCols" editMode="row" [reorderableColumns]="true">
...
<ng-template pTemplate="body" let-rowData let-columns="columns" let-editing="editing" let-index="rowIndex">
<tr [pEditableRow]="rowData" pEditing="editing">
<td>
...
</td>
<td>
<p-cellEditor>
<ng-template pTemplate="input">
<span class="p-float-label" style="margin-bottom: 1rem;">
<p-calendar id="editStartTime" name="editStartTime" appendTo="body" [timeOnly]="true" [showSeconds]="false"
[showIcon]="true" [(ngModel)]="rowData.startTime" icon="pi pi-clock" dataType="string"
[required]="isRequired">
</p-calendar>
<label>Start Time</label>
</span>
</ng-template>
<ng-template pTemplate="output">
{{rowData.startTime}}
</ng-template>
</p-cellEditor>
</td>
// EndTime column removed as stackoverflow was complaining about me having too much code in my question & not enough content.
<td>
<div class="flex align-items-center justify-content-center gap-2 inline-item">
<button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(rowData)" class="p-button-rounded p-button-text"></button>
<button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(rowData)" class="p-button-rounded p-button-text p-button-success mr-2"></button>
<button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(rowData, index)" class="p-button-rounded p-button-text p-button-danger"></button>
</div>
<button pButton pRipple icon="pi pi-trash" class="p-button-rounded"
(click)="deleteBlockOutDiary(rowData)" [disabled]="false"></button>
</td>
</tr>
</ng-template>
</p-table>
...
demo.component.ts
...
clinicDiaryBlockOut!: ClinicianDiaryBlockOut;
clonedBlockOutRows: { [s: string]: ClinicianDiaryBlockOutRow } = {};
blockOutRows: Array<ClinicianDiaryBlockOutRow> = new Array<ClinicianDiaryBlockOutRow>();
...
The issue is here, as the onRowEditSave accepts duplicate startTime & endTime. How do I only allow the record to be saved if the startTime & endTime does not exist.
onRowEditSave(row: ClinicianDiaryBlockOutRow) {
let found = false;
this.blockOutRows.forEach(function(value) {
if (row.startTime === value.startTime && row.stopTime === value.stopTime) {
found = true;
return;
}
});
if (found) {
this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Please choose a different start & end time, as the start & end time chosen already exists!' });
} else {
if (row.startTime !== "" && row.stopTime !== "") {
delete this.clonedBlockOutRows[row.id as string];
this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Block Out time updated' });
} else {
this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Invalid Block Out time' });
}
}
}
As seen in the image below the edit allows duplicate rows to be saved:
