serenity-is / Serenity

Business Apps Made Simple with Asp.Net Core MVC / TypeScript
https://serenity.is
MIT License
2.61k stars 802 forks source link

Dialog shown in panel instead of popup mode #1901

Closed anonymous-erc20 closed 7 years ago

anonymous-erc20 commented 7 years ago

I have ADialog and BPanelDialog is extends ADialog. In LookupEditor, I add property InplaceAdd=true. However, when i click in icon for InplaceAdd=true function, the dialog is shown as a panel and appear at the bottom of the page instead of a popup Can you help me to fix it?

volkanceylan commented 7 years ago

Don't use "Panel" in class name, or Panel decorator, it probably thinks it is a panel

anonymous-erc20 commented 7 years ago

So, In AGrid, I use an panel to create or update ARow But, in CDialog(CRow is linked with ARow), with InplaceAdd=true, I want a popup of ARow Do I have to implement the same code lines without extends base dialog?

Estrusco commented 7 years ago

@volkanceylan I have the same issue reported on https://github.com/volkanceylan/Serenity/issues/1888 and I wait for your response if I can send a pull request

volkanceylan commented 7 years ago

I'll have to debug this, if there such an error all classes should have that weird behavior. Probably because of reading type in constructor.

volkanceylan commented 7 years ago

I can't reproduce this, paste code with actual name for your exact classes.

Estrusco commented 7 years ago

You can replicate by:

in Northwind -> RegionIndex.cshtml

@{
    ViewData["Title"] = Serenity.LocalText.Get("Db.Northwind.Region.EntityPlural");
}

<div id="TestBtn"><button>Open Dialog</button></div>

<div id="GridDiv"></div>

<script type="text/javascript">
    var myDialogAsPanel;
    jQuery(function () {
        myDialogAsPanel = new Serene.Northwind.SelezioneDialogPanel();
        myDialogAsPanel.load({}, () => {
            myDialogAsPanel.element.appendTo('#GridDiv');
        });

        $("#TestBtn").on('click', function (e) {
            var selDlg = new Serene.Northwind.SelezioneDialog();
            selDlg.loadNewAndOpenDialog();
        });
    });
</script>

Then add in new folder Selezione the files SelezioneDialog.ts

namespace Serene.Northwind {

    @Serenity.Decorators.registerClass()
    @Serenity.Decorators.responsive()
    @Serenity.Decorators.maximizable()
    export class SelezioneDialog extends Serenity.EntityDialog<SelezioneRow, any> {
        protected getFormKey() { return SelezioneForm.formKey; }
        protected getIdProperty() { return SelezioneRow.idProperty; }
        protected getLocalTextPrefix() { return SelezioneRow.localTextPrefix; }
        protected getService() { return SelezioneService.baseUrl; }

        private selPropGrid: Serenity.PropertyGrid;
        private radioSel: Serenity.RadioButtonEditor;

        protected form: SelezioneForm;

        protected isPanel: boolean;

        constructor() {
            super();

            this.form = new SelezioneForm(this.idPrefix);
            this.selPropGrid = new Serenity.PropertyGrid(this.byId("TipoSelezioneDiv"), {
                items: Q.getForm(Serene.Northwind.SelezioneForm.formKey).filter(x => x.name == 'IDTipoSel'),
                useCategories: false
            });

            this.radioSel = this.selPropGrid.get_editors()[0];
        }
    }
}

The SelezioneDialogPanel.ts

/// <reference path="SelezioneDialog.ts" />

namespace Serene.Northwind {

    @Serenity.Decorators.panel()
    export class SelezioneDialogPanel extends SelezioneDialog  {
       constructor() {
            super();

            this.element.addClass('flex-layout');
        }
   }
}

A template file SelezioneDialog.template.html

<div class="s-DialogContent">
    <div id="~_Toolbar" class="s-DialogToolbar">
    </div>
    <div class="s-Form">
        <form id="~_Form" action="">
            <div class="fieldset ui-widget ui-widget-content ui-corner-all">
                <div style="margin: 0 auto; border: 3px solid cornflowerblue; border-radius: 5px">
                    <table>
                        <tr>
                            <td>
                                <div id="~_TipoSelezioneDiv">
                                    <p style="text-align: center">Tipo selezione</p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <hr style="width: 100%; height: 1px; background-color: cornflowerblue;" />
                <p></p>
                <div class="clear"></div>
            </div>
        </form>
    </div>
</div>
edson commented 7 years ago

Have the same issue... but just wondering, why this doesn't happen with the OrderDialog Sample?

Best Regards

volkanceylan commented 7 years ago

Well, it's worser than just panel decorator issue. TypeScript extends function copies all static properties in basetype to subtype. Even though it is not wrong, it kills Saltaralle type system as metadata static property is an array which is supposed to be unique per type. Will hopefully be fixed in next version. I'm not sure how it did manage to work for some types though.