I am creating my own custom inline editable table. I am not able to show the dropdown assigned name. For example I have dropdown data like this:
statusDropdownData = [
{
statusId: 3,
name: "test 1",
},
{
statusId: 4,
name: "test 2",
},
];
On table I am able to see the ID, but I want to see the name, and based on id, when i click on edit button, that id should patch. But I am not able to do it. I tried this.
my custom component for table html
<a (click)="addNew()" class="mb-1 ml-1">Add New</a>
<table class="row-border table-bordered-no-confilct border-1 table">
<thead>
<tr>
<th *ngFor="let head of headers">
{{ head.name }} <span class="text-danger" *ngIf="head.required">*</span>
</th>
</tr>
</thead>
<tr *ngFor="let tableData of data; let i = index">
<td>
<ng-container *ngIf="tableData.buttonStatus === true">
<i
class="ace-icon fa fa-pencil-square-o bigger-150 text-success"
data-toggle="tooltip"
title="Edit"
*ngIf="!tableData.isEditable"
(click)="onEdit(tableData)"
></i>
<i
class="ace-icon fa fa-trash-o bigger text-danger ml-1"
data-toggle="tooltip"
title="Delete"
*ngIf="!tableData.isEditable"
(click)="onDelete(tableData)"
></i>
</ng-container>
<i
class="ace-icon fa fa-floppy-o bigger-150 text-success"
data-toggle="tooltip"
title="Save"
*ngIf="tableData.isEditable"
(click)="onSave(tableData)"
></i>
<i
class="ace-icon fa fa-times bigger-150 text-danger ml-1"
data-toggle="tooltip"
title="Cancel"
*ngIf="tableData.isEditable"
(click)="cancel(tableData, i)"
></i>
</td>
<td>{{ i + 1 }}</td>
<ng-container *ngIf="tableData.isEditable; else viewable">
<ng-container *ngFor="let head of headers">
<ng-container *ngIf="head.mappedProperty">
<td>
<input
*ngIf="
head.dataType === 'text' ||
head.dataType === 'number' ||
head.dataType === 'checkbox'
"
[type]="head.dataType"
[(ngModel)]="tableData[head.mappedProperty]"
[checked]="tableData[head.mappedProperty]"
/>
<my-custom-dropdown
*ngIf="head.dataType === 'dropdown'"
[data]="head.dropDownData"
[config]="head.dropdownConfig"
[(selectedModel)]="tableData[head.dropdownConfig.bindValue]"
></my-custom-dropdown>
</td>
</ng-container>
</ng-container>
</ng-container>
<ng-template #viewable>
<ng-container *ngFor="let head of headers">
<ng-container *ngIf="head.mappedProperty">
<td>{{ head.dataType ==='dropDown' ? tableData[head.mappedName]: tableData[head.mappedProperty] }}</td>
</ng-container>
</ng-container>
</ng-template>
</tr>
</table>
its ts
@Input() data;
@Input() headers;
@Output() modelData: EventEmitter<object> = new EventEmitter<object>();
@Output() deleteData: EventEmitter<object> = new EventEmitter<object>();
@Output() moveUpData: EventEmitter<object> = new EventEmitter<object>();
@Output() moveDownData: EventEmitter<object> = new EventEmitter<object>();
private newFieldCounter: number = 0;
isNew = false;
copyOfOriginalData;
constructor(
private alertService: ToasterService,
private confirmationDialogService: ConfirmDialogService
) {}
onEdit(data): void {
for (let i = 0; i < this.data.length; i++) {
if (i == data) {
this.data[i].buttonStatus = true;
} else {
this.data[i].buttonStatus = false;
}
}
this.isNew = false;
this.copyOfOriginalData = { ...data };
this.data.map((item) => {
item.isEditable = data.id === item.id;
});
console.log('selected', data);
console.log('data on edit', this.data )
}
onSave(data): void {
let requiredColumns = [];
this.headers.forEach((headers) => {
if (headers.required === true) {
requiredColumns.push(headers.mappedProperty);
}
});
let isEmpty = false;
requiredColumns.forEach((columnsData) => {
if (data[columnsData] === "" || !data[columnsData]) {
console.log("req", requiredColumns);
this.alertService.error(columnsData + " can not be empty");
isEmpty = true;
}
});
if (!isEmpty) {
this.modelData.emit(data);
data.isEditable = !data.isEditable;
}
}
onDelete(data): void {
this.confirmationDialogService
.confirm("", "Are you sure you want to remove this user?")
.subscribe((action) => {
if (action) {
this.deleteData.emit(data);
}
});
}
moveDown(data): void {
this.moveDownData.emit(data);
}
moveUp(data): void {
this.moveUpData.emit(data);
}
cancel(data, index): void {
if (this.isNew) this.data = this.data.filter((x) => !(x.id === data.id));
else this.data[index] = { ...this.copyOfOriginalData };
for (let i = 0; i < this.data.length; i++) {
this.data[i].buttonStatus = true;
}
data.isEditable = !data.isEditable;
}
addNew(): void {
this.isNew = true;
this.data.push({
id: "a" + this.newFieldCounter++,
isEditable: true,
});
}
addRequiredKeys(): void {
this.data = this.data.map((item) => ({
...item,
isEditable: false,
buttonStatus: true,
}));
console.log("key added", this.data);
}
ngOnInit(): void {
this.addRequiredKeys();
console.log("header", this.headers);
}
consuming component
data = [
{
id: 1,
name: "ashish",
mobile: "8788888888",
date: "11-10-2021",
statusId: 3,
jobReady: true,
},
{
id: 2,
name: "mishra",
mobile: "9788888888",
date: "11-11-2021",
statusId: 4,
jobReady: false,
},
// {
// id: 3,
// name: "demo",
// mobile: "9788888888",
// date: "11-11-2021",
// isEditable: false,
// },
];
statusDropdownData = [
{
statusId: 3,
name: "test 1",
},
{
statusId: 4,
name: "test 2",
},
];
jobDropDownConfig: DropdownConfig = {
bindLabel: "name",
bindValue: "id",
placeholder: "Select Job",
};
demoDropDownConfig: DropdownConfig = {
bindLabel: "name",
bindValue: "statusId",
placeholder: "Select Status",
};
//datePickerConfig: DatePickerConfig ;
datePickerConfig: DatePickerConfig = {
propertyConfig: {
datePicker: true,
rangePicker: false,
inlineDatePicker: false,
inlineDateRangePicker: false,
placeholder: "Date Picker",
hideOnScroll: true,
},
};
constructor() {
this.datePickerConfig = new DatePickerConfig();
}
headers: Array<TableHeaders> = [
{ name: "Edit" },
{ name: "Sr.No" },
{ name: "name", dataType: "text", mappedProperty: "name", required: true },
{
name: "mobile",
dataType: "number",
mappedProperty: "mobile",
required: true,
},
{
name: "date",
dataType: "date",
mappedProperty: "date",
datePickerConfig: this.datePickerConfig,
},
{
name: "job",
dataType: "dropdown",
mappedProperty: "id",
dropDownData: this.data,
dropdownConfig: this.jobDropDownConfig,
required: true,
},
{
name: "Status",
dataType: "dropdown",
mappedName:'name',
mappedProperty: "statusId",
dropDownData: this.statusDropdownData,
dropdownConfig: this.demoDropDownConfig,
},
{
name: "Job Ready",
dataType: "checkbox",
mappedProperty: "jobReady",
},
];
modelData(data) {
console.log("data", data);
}
deleteData(data) {
console.log("deleted data", data);
}