Products.cmfplone: datatables only available for logged in users

[pbauer]

To reproduce add the following html to a page and publish it.
When you are logged in you can see datatables in action when viewing the page. As anonymous you only see the plain table.

<table class="pat-datatables listing">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
    </tbody>
</table>

I could not figure out (e.g. by reading registry.xml) why it only works for logged in users. So I'm not sure if this is a bug or intentional. It happens in 5.1.4 and 5.1.x coredev.

[pbauer]

@thet Could you comment on this issue?

[jensens]

Well, I would like to see the anon bundle shrinking an not blowing up.
Is it possible to add the resource on request for this case? I think the feature was added for this cases.

[pbauer]

When I add it to my view I get a js error. My view now looks like this:

class MyList(FolderView):

    def __call__(self):
        add_resource_on_request(self.request, 'mockup-patterns-datatables')
        return super(MyList, self).__call__()

Here is the error:

require.js:168 Uncaught Error: Mismatched anonymous define() module: function($, Base, Dt) {
  'use strict';

  var DataTables = Base.extend({
    // The name for this pattern
    name: 'datatables',
    trigger: '.pat-datatables',
    parser: 'mockup',
    table: null,

    defaults: {
      // Default values for attributes
    },

    init: function() {
      // The init code for your pattern goes here
      var self = this;
      // self.$el contains the html element
      self.table = self.$el.DataTable(self.options);

    }
  });

  return DataTables;

}
https://requirejs.org/docs/errors.html#mismatch
    at makeError (require.js:168)
    at intakeDefines (require.js:1254)
    at require.js:1452
makeError @ require.js:168
intakeDefines @ require.js:1254
(anonymous) @ require.js:1452
setTimeout (async)
req.nextTick @ require.js:1815
localRequire @ require.js:1449
requirejs @ require.js:1797
req.config @ require.js:1805
(anonymous) @ config.js:1

[robbuh]

Same issue for me and could't get any solutions at the moment.
Any suggestions on how to make "mockup-patterns-datatables" available for anonymous users?

[pbauer]

I talked to @thet about this at the Alpine City Sprint. He suggested that the Mismatched anonymous define() Error is not really easy to fix and thus the easiest solution would be to register your own bundle with the required resources. I have not tried that yet so I have no code to copy and paste for you.

On the other hand I really like datatables and think it would be good to have it work for anonymous users out-of-the-box.

[robbuh]

As a test I tried to use requirement statement in the template and it seemed datatables works also for anonymous users, or rather, only Chrome (71.0.35) do the trick but not most of the other browsers..

<script>
      require(['mockup-patterns-datatables']);
</script>

<table class="pat-datatables listing">

      ...

</table>

So I think I'll have to register my own bundle as suggested.

I love datatables too and I agree It would be cool to have "mockup-patterns-datatables" pattern available also for anonymous users

[jensens]

Better fix the JS and use bundle on request (and that not only here). All that blows up the anon bundle must be avoided.

[pbauer]

I still want to use the datatables we ship with Plone and still have no way to use it for anonymous users.

I tried the following again with Plone 5.2:

class MyList(BrowserView):

    def __call__(self):
        # enable datatables for anonymous users
        if api.user.is_anonymous:
            from Products.CMFPlone.resources import add_resource_on_request
            add_resource_on_request(self.request, 'mockup-patterns-datatables')
        return self.index()

But that got me the error described above (Mismatched anonymous define() module) at least most of the time. Sometimes it works in Chrome but more often than not it breaks.

@thet: What exactly would be required to fix the js?

I also tried to to find out how to register the required resources for datatables in my own bundle and add this to the request with add_bundle_on_request but I got nowhere. I can't find where the datatables-resources are added to the bundle plone-logged-in so I have no idea where to peek for a solution.

I then tried to force the whole plone-logged-in bundle into my view but that resultes in nothing because that bundle has the condition python: member is not None which is evaluated before the bundle is added.

Very annoying.

[agitator]

As far as I remember, datatables uses it's own way of bundling...
And we had to use a define/undefine/define workaround https://github.com/collective/collective.js.datatables/blob/master/collective/js/datatables/resources/media/js/jquery.dataTables.min.js#L5

Not sure though if this is still necessary

[pbauer]

@agitator so you are saying that https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/static/components/datatables.net/js/jquery.dataTables.min.js does not have this workaround but if it did the solution add_resource_on_request(self.request, 'mockup-patterns-datatables') would work?

@thet can we add it there?

The only way I found that really got it to work was to add the following to my template:

<script
    tal:condition="portal_state/anonymous"
    type="text/javascript"
    src="${portal_url}/++plone++static/plone-logged-in-compiled.min.js"
    data-bundle="plone-logged-in">
</script>

I feel dirty now.

[agitator]

fixed in https://github.com/plone/plone.staticresources/pull/46 with optional datatables bundle

[pbauer]

I can confirm that with this branch the following approach works fine:

def __call__(self):
    if api.user.is_anonymous:
        # enable datatables for anonymous users
        from Products.CMFPlone.resources import add_bundle_on_request
        add_bundle_on_request(self.request, 'plone-datatables')
    return self.index()