How to cause index.view to be updated when the Save command is executed in an open dialog-CodePudding

When executing the Save command in an open dialog, the parent index.view is not updated. For the SaveAndClose command, everything is fine. Tested at https://github.com/alex-kukhtin/A2v10.Web.Sample.git on the Product object. Platform A2v10, unfortunately I can't tag yet.

<Dialog xmlns="clr-namespace:A2v10.Xaml;assembly=A2v10.Xaml" 
        Title="{Bind Product.Id, Format='@[Product] [{0}]'}">
    <Dialog.Buttons>
        <Button Content="@[SaveAndClose]" Command="{BindCmd SaveAndClose, ValidRequired=True}"/>
        <Button Content="@[Save]" Command="{BindCmd Save, ValidRequired=True}"/>
        <Button Content="@[Cancel]" Command="{BindCmd Close}"/>
    </Dialog.Buttons>
    <TabPanel>
        <Tab Header="@[General]">
            <Grid>
                <TextBox Label="@[Name]" Value="{Bind Product.Name}"/>
                <TextBox Label="@[BarCode]" Value="{Bind Product.BarCode}" Width="20rem"/>
                <TextBox Label="@[Article]" Value="{Bind Product.Article}" Width="20rem"/>
                <TextBox Label="@[Memo]" Value="{Bind Product.Memo}" Multiline="True" Rows="3"/>
            </Grid>
        </Tab>
        <Tab Header="@[Images]" Padding="1rem">
            <Image Source="{Bind Product.Picture}" Limit="100"
                Base="/catalog/product" Height="18rem"/>
        </Tab>
    </TabPanel>
</Dialog>

PS: Called by the Edit command


I try: executing the Save command in an open dialog
I expecting: The parent index.view is update

CodePudding user response：

This behavior is by design.

The update depends on how the dialog is invoked.

If the Edit command is called, the index updates the editing element after the dialog returns with the SaveAndClose command.

The Save command does not close the dialog, so the calling code does not take control.

The easiest way to solve the problem is to use events.

Specify that when the element is saved, you want to raise an event and catch it in the index.

For example like this:

    <Dialog SaveEvent="app.element.saved">

Inside index.template.ts

const template: Template = {
    events: {
        'app.element.saved': elementSaved
    }
};

export default template;

function elementSaved(elem) {
   const ctrl: IController = this.$ctrl;
   // Find the element in the list and update if found or add if not.
   let found = this.Items.find(x => x.Id === elem.Id);
   if (found)
      found.$merge(elem);
   else
      this.Items.$append(elem); 
}

And last but not least. If you are using events, invoke the dialog with the Show command, not the Edit command. This will avoid unnecessary updates.