Load segment data asynchronously

[sadortun]

Segment QueryFilter can be quite complex and long to execute, this change allow to load the datagrid async, therefore allowing the page to load quickly

Require fix by #961
Related to #925

I am mostly sure that you wont merge this PR as is, but it give you a starting point to fix this issue

[Grygir]

Hello @sadortun,

Thank you for the improvement. The idea is great, but the solution needs to be enhanced:

1. inline JS is restricted to use
2. this code does not live in cycles of the application, it is not disposed properly
3. ComponentManager is not supposed to use standalone

Please consider of using https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/UIBundle/Resources/public/js/app/components/widget-component.js for rendering block with datagrid widget. It can be done with the help of oro_widget_render twig function, kind of

{{ oro_widget_render({
    'widgetType': 'block',
    'url': path('oro_datagrid_widget')
}) }}

The goal is to initiate block widget when it is necessary and dispose it properly when it is time.

[sadortun]

@Grygir Understandable, this was only a prrof of concept :) !

[sadortun]

@Grygir The goal of using an ajax request is to load the grid asynchronously, since in some case it can take up to a minute to load with very complex queries.

Using oro_widget_render seems to only be able to load the grid in a blocking way, therefore blocking the usage of the app until loading is completed.

I've found this example in the docs, but it seems outdated https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/UIBundle/Resources/doc/reference/widgets.md#interaction-example

The closest i got to making it work was with the DialogWidget. If i use that component the datagrid displays inside the dialog, but no luck with the BlockWidget

        <div id="poll-widget"></div>
        <script type="text/javascript">
          require(['oroui/js/widget-manager', 'oro/block-widget', 'oro/dialog-widget'],
            function(widgetManager, BlockWidget,DialogWidget ) {

              var blockWidget= new BlockWidget({
                title: 'test',
                el: '#poll-widget',
                url: '{{  path('oro_datagrid_widget', {gridName: gridName, params: params, renderParams : renderParams} ) }}',
              });
              blockWidget.render();

            //  widgetManager.addWidgetInstance(widgetInstance);
            });
        </script>`

Am i missing something ?

Thanks

[sadortun]

Ok, after some extensive digging, i noticed that the container option was required to render the grid.

        <div id="test-container"></div>
        <script type="text/javascript">
          require(['oroui/js/widget-manager', 'oro/block-widget', 'oro/dialog-widget'],
            function(widgetManager, BlockWidget,DialogWidget ) {

              var blockWidget = new BlockWidget({
                title: 'test',
                container: '#test-container',
                url: '{{  path('oro_datagrid_widget', {gridName: gridName, params: params, renderParams : renderParams} ) }}',
              });
              blockWidget.render();
            });
        </script>

This still show a full page loading spinner that prevent us from using the page, ill update this post if i find a solution.

EDIT

Solution found, see PR code

[Grygir]

No inline js-code should be used, this approach is prohibited. You can find it only in some legacy code, that we are going to refactor. Expect, the following code should do the same

{{ oro_widget_render({
    'widgetType': 'block',
    'url': path('oro_datagrid_widget', {
        gridName: gridName,
        params: params,
        renderParams: renderParams
    })
}) }}

could you check?

It should output empty <div/> element with options within data attributes. Those attributes will be processed in browser and the grid will be rendered as block widget.

[Grygir]

To solve issue with blocking rendering, it is better to extend WidgetComponent::_openWidget method

https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/UIBundle/Resources/public/js/app/components/widget-component.js#L140-L190

to resolve deferredOpen at once, in case there's some option passed that says to do so. And cover the block with loading mask until real widget.deferredRender gets resolved