Admin modal in front end

[MarkE]

This post is related to 

but is a different way of tackling the problem.

The idea is to use the JqueryUI.module in the front end to present a restricted access admin page in a modal (class pw-modal). However the JqueryUI module doesn't seem to work properly in the front end (I have it working in the back end OK). I'm guessing that this is because the front end page has not loaded all the .js that is needed (that would normally be loaded in the back end). My _main.php loads the following from the core at the moment:

'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit.min.js'
'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit-icons.min.js'
'wire/modules/Jquery/JqueryCore/JqueryCore.js'
'wire/modules/Jquery/JqueryUI/JqueryUI.js'

Any ideas what else I need, or have I got hold of the wrong end of the stick?

[dragan]

I see some more files which are loaded in the backend:

[bernhard]

Am I the only one preferring panels a LOT over modals? ? 

[MarkE]

 

1 hour ago, bernhard said:

Am I the only one preferring panels a LOT over modals? ? 

Maybe, maybe not. If I could do an admin panel in the front end then I might be able to have an opinion ?

 

[MarkE]

Well, whaddya know? Replace 'modal' by 'panel' and it works ... on a PC. But the iPad scrolling issue still persists (scrolls the background rather than the panel).

[MarkE]

9 hours ago, MarkE said:

But the iPad scrolling issue still persists

Actually this seems to be a problem with the admin theme generally - for example, the tree panel in the uikit theme does not scroll on an iPad either. So looks like a bug. 

[bernhard]

Could you maybe create a screencast of this issue and report it on github? ?

[Robin S]

If you load an admin page in a modal or panel from the front-end then there's not really any special PW magic there - it's just an iframe. So you don't have to use a JqueryUI modal or panel just because the PW admin does - you can use any JS modal library that supports iframes. There are a bazillion out there so there's bound to be something that doesn't cause this scrolling issue you're describing.

BTW I can confirm the tree panel scrolling issue on iPad - please do report it.

[bernhard]

@Robin S there are lots of modal libraries, but the only reliable that I've found for including admin pages (iframes, html content, videos etc) in a modal is http://fancyapps.com/fancybox/3/ (and maybe magnific popup).

What I've not found is a library that makes it easy to create panels just like the pw admin does. Where one can simply add class="pw-panel" and it loads in an iframe, sliding in from left or right, being resizable, hideable, reloadable etc...

[MarkE]

26 minutes ago, Robin S said:

use any JS modal library that supports iframes

Parallel to the approach I described above, I have also tried uikit's modal with an embedded iframe. This works adequately (and fixes the iPad issue with uk-overflow-auto), but there are a couple of snags - no doubt due to my incompetence:

1. I can't work out how to make the modal/iframe height match the height of the embedded admin page - I can set the iframe width to 100%, but have to set a "hard" pixel height of, say 800, which may then leave whitespace for a small page.
2. Because the target page for the iframe can vary (a range of pages may be edited), multiple modals/iframes are created via a loop (with toggle ids keyed to page ids). These then take  about 15-20 seconds to load, which is not really acceptable. No doubt there is some clever way of avoiding this using jQuery, but I haven't worked it out yet.

I will try some of the other suggestions as well. I also tried using the FEEL module, but that has the iPad problem too - see 

As mentioned there, I am not able to debug an iPad because I don't have a Mac. Similarly, @bernhard, I have no idea how to do a screencast on an iPad, but I can report the bug with a text description.

 

[bernhard]

3 minutes ago, MarkE said:

Similarly, @bernhard, I have no idea how to do a screencast on an iPad, but I can report the bug with a text description.

Well, just take a video with your phone ? 

[MarkE]

Fancybox works well on Windows and iOS. I have built a small module around it (a bit like a cut-down FEEL).

[webhoes]

@MarkE, did you get this working without giving user page-edit rights?

[MarkE]

2 hours ago, webhoes said:

did you get this working without giving user page-edit rights?

Obviously the user needs page-edit rights for the page in question. My approach to this was to write a hook after User::hasPagePermission which only gives them page-edit / page-add permission for the specific pages to which they are allowed access (i.e. in my app, their own membership records). If they try and access any other pages (e.g. directly in a browser, assuming they know the page-id or name, as the page in fancybox has modal=1, so no menu), they get a "You don't have access to edit" message.

[webhoes]

I made a similar something, but it increased the pageload by 3 seconds.  This is too much.

Do you give the user temporarily page-edits upon granted request of that page?

[MarkE]

The pageload is about 3 seconds, but the hook doesn't seem to affect it. Because fancybox loads almost instantly and displays a rotating wheel, I don't think the wait is a problem.

48 minutes ago, webhoes said:

Do you give the user temporarily page-edits upon granted request of that page?

The module checks page-editable before rendering. The hook then adds the permission.

[webhoes]

Interesting. Are you willing to share you module? I have not been able to get a secure setup myself.

The pageload in my case is my security setup. I check for referenced users from a parent page or parent parent page. This is really time consuming.

[MarkE]

The module can be found at https://github.com/MetaTunes/AdminInModal

Use at your own risk!

The hook is specific to my app, but I hope the following gives the general idea:

wire()->addHookAfter('User::hasPagePermission', function(HookEvent $event) {
    // Get the object the event occurred on, if needed
    $user = $event->object;

    // An 'after' hook can retrieve and/or modify the return value
    $return = $event->return;

    // Get values of arguments sent to hook (if needed)
    $permission = $event->arguments(0);
    $p = $event->arguments(1);

    /* Your code here, perhaps modifying the return value */
    // Is it a page we need to customise access for?
    $templates = ['Membership', 'Member', 'Profile', 'Subscription', 'Payment', 'MemberShop', 'Booking', 'NewsItem'];
    $permissions = ['page-edit', 'page-add'];
    if ($p and in_array($p->template, $templates) and $permission and in_array($permission, $permissions)) {
        // Get the member-user
        $currentUser = $this->users->getCurrentUser();
        if ($currentUser and $currentUser->isLoggedin()) {
            if ($currentUser->hasRole('member')) {
                $email = $currentUser->email;
                $memberPage = $this->pages->get("has_parent=/memberships/, template=Member, email=$email");
                if ($currentUser->memberOnly) $return = false; // Member-only users can only access pages as defined below
                if ($memberPage->id) {
                    $membershipPage = $memberPage->parent;
                    //... and a lot more like that ($profilePage etc.) ...
                    $editablePages = new PageArray();
                    $addablePages = new PageArray();
                    $editablePages = $editablePages->add($membershipPage)->add($profilePage)->add($siblings)->add($currentSub)->add($shops)->add($subsPaymentPages)->add($draftNewsPages)->add($bookingPages);
                    $addablePages = $addablePages->add($membershipPage)->add($memberPage);  // pages where creation of children is allowed
                    if ($editablePages->has($p) and $permission == 'page-edit') $return = true;
                    if ($addablePages->has($p) and $permission == 'page-add') $return = true;
                }
            }
        }
    }

    // Populate back return value, if you have modified it
    $event->return = $return;
});

 

[webhoes]

@MarkE, Thanks! This is a total different I was looking at and mine doesn't work.

I will play with this and see if I can get it to work in my setup.