Currently, I am in the process of developing a "config" page where users can add objects/devices. When a user adds an object, it opens a Dialog window displaying the properties/fields of that particular object. The window includes Save and Cancel buttons. Upon hitting Save, the object is added to an array/list and all added objects are displayed. Each array item has an edit button which opens the same dialog window for editing purposes.
My challenge lies in enabling users to edit data without making real-time changes to the list object until they hit the "save" button. To address this issue, I want to pass the entire object as a copy back and forth rather than just a single property like the object's name.
While adding items to the list poses no problem, editing them has proven to be more challenging. It's worth mentioning that I'm relatively new to Angular and JavaScript/Typescript, although I do have some experience with Object-Oriented Programming (OOP).
I've managed to make this work effectively by passing a single property, as shown in the first block of code below:
//This works as RoomGroup only has a name property.
export class RoomGroupDialogComponent implements OnInit {
tempGroup: ConfigRoomGroup;
newGroup = true;
constructor(public diaglogRef: MatDialogRef<RoomGroupDialogComponent>,
@Inject(MAT_DIALOG_DATA) private group: ConfigRoomGroup,
public config: ConfigService) { }
ngOnInit() {
if (this.group.name) {
this.newGroup = false;
} else {
this.newGroup = true;
this.group.name = 'New Group';
}
this.tempGroup = Object.assign({}, this.group);
}
onSaveClick(): void {
if (this.newGroup) {
this.config.configData.roomSetup.groups.push(this.tempGroup);
} else {
this.group.name = this.tempGroup.name;
console.log(this.group);
}
this.diaglogRef.close();
}
onCancelClick(): void {
this.diaglogRef.close();
}
}
///This does not work
export class RoomDialogComponent implements OnInit {
tempRoom: ConfigRoom;
newRoom = true;
constructor(public dialogRef: MatDialogRef<RoomDialogComponent>,
@Inject(MAT_DIALOG_DATA) private room: ConfigRoom,
public config: ConfigService) { }
ngOnInit() {
if ( this.room.name) {
this.newRoom = false;
} else {
this.newRoom = true;
this.room.name = 'New Room';
}
this.tempRoom = Object.assign({}, this.room);
}
onSaveClick(): void {
if (this.newRoom) {
console.log(this.tempRoom);
this.config.configData.roomSetup.rooms.push(this.tempRoom);
} else {
this.room = this.tempRoom;
console.log(this.tempRoom);
console.log(this.room);
console.log(this.config.configData.roomSetup.rooms);
}
this.dialogRef.close();
}
onCancelClick(): void {
this.dialogRef.close();
}
}