Question

0

79

Views

Value not changed back when canceled

This is in angular. There is a p-table that shows some data, like below:

When I clicked on the pencil icon to edit the table row, this pops up. I'll call this the edit dialog:

When I make any kind of edit in the text input box, the table row on p-table also change to the new value; example if I change the Download URL to "sss", the p-table also shows "sss" even though I haven't clicked the "Update" button yet. However, if I decide to cancel the change by clicking on the Cancel button, the new value ("sss") stays and the old value does not revert back. Any help on reverting it back is appreciated.

Here is how my code is currently set up: when I open the page the first time, it retrieves the data in the table from a database and display in the p-table. When I click on the pencil icon, it uses DynamicDialog to open the edit dialog that was created by another component.

Here's the typescript code to that it uses to open the edit dialog, which is called ModelDialogComponent:

this.ref = this.dialogService.open(ModelDialogComponent, {
                        data: {
                            record,
                        },
                        header: title,
                        width: '500px',
                        contentStyle: { 'max-height': '500px' },
                        baseZIndex: 10000,
                        dismissableMask: true,
                    })

ModelDialogComponent has five input text and two buttons. Each of the input text is create in this similar fashion. This is one of the html code for it:

<!--Applicationn Name-->
    <div class="p-field p-grid" style="padding: 10px">
        <label class="p-col-fixed" style="width: 150px">App Name </label>
        <div class="p-col">
            <input type="text" pInputText readonly [(ngModel)]="updateData.app" />
        </div>
    </div>

The Cancel button is tied to a function: (click) ="cancelUpdate()"

cancelUpdate() is this:

cancelUpdate(){
        this.config.data.record = this.clonedVersion;
        this.config.data.record = {...this.config.data.record};
        this.updateData = this.clonedVersion;
        this.updateData = {...this.updateData};
        this.ref.close(this.clonedVersion);
    }

Here is ModelDialogComponent init:

        ngOnInit() {
            this.updateData = this.config.data.record;
            this.clonedVersion = {...this.updateData};
        }

Canceling does not revert the value back to its original value, and how do I do that?

If you need more info, please let me know.

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T23:15:57.263Z

I figured out a way to get it to revert back. use onClose, and then get the original data from the database. This works good for now because the database is small. As it grows, I think I will need to figure out why cloning the table row and setting it back does not work. Here's my code for the solution I made:

this.ref.onClose.subscribe(() => {
                this.messageService.add({
                    severity:'info',
                    summary: 'Canceled Editing', 
                    detail:'User canceled edits', 
                    sticky: false,
                });
                this.ToolVersionService.getAllVersion().subscribe((data) => {
                    this.rowData = data;
                    this.loading = false;
                    this.EditDetails = false;
                },
                (err) => {
                    console.error(err)
                });
            });