devgroup / yii2-admin-modals
Display your admin actions in bootstrap modals with frames and callbacks
Installs: 42
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 4
Forks: 1
Open Issues: 0
Language:JavaScript
Type:yii2-extension
Requires
- yiisoft/yii2: ~2.0.6
- yiisoft/yii2-bootstrap: ~2.0.6
This package is auto-updated.
Last update: 2024-10-11 15:02:31 UTC
README
Display your admin actions in bootstrap modals with frames and callbacks.
Current status: Work in progress.
Installation
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist devgroup/yii2-admin-modals "*"
or add
"devgroup/yii2-admin-modals": "*"
to the require section of your composer.json
file.
Usage
1. Configure application
Add DevGroup\AdminModals\components\AdminModals
component with component id adminModals
.
Modify your main web application config:
return [ // your app config here // ... 'components' => [ 'adminModals' => [ 'class' => 'DevGroup\AdminModals\components\AdminModals', 'layoutFile' => '@app/actions/views/empty-layout', ], // your other app components ], ];
AdminModals
components has the following params:
- layoutFile(required) - The path to simplified layout file without your headers, footers, containers etc. This layout is used when your action is rendered inside modal's frame.
- magicParamKey and uniqueParamKey - Names of GET parameters that are used for communicating between JS part and yii2 backend.
2. Add admin-modals
action
Admin-modals action is used for displaying simple empty page inside modal's frame during loading the needed route.
You can show loader spinner there.
By default JS part of yii2-admin-modals will load '/site/admin-modal'. That could be configured later.
For adding action modify your Controller actions() function:
public function actions() { return [ // other actions here... 'admin-modal' => [ 'class' => DevGroup\AdminModals\actions\EmptyPageAction::class, 'viewFile' => '@DevGroup/AdminModals/views/admin-modal', 'layoutFile' => '@app/actions/views/empty-layout', ] ]; }
EmptyPageAction
takes the following params:
- layoutFile - The same as in
AdminModalsBehavior
but is not required. If not set - the default controller layout will be used. - viewFile - The view file location for empty page. By default sample view is used. The only requirement to this view file is to include form tag with
admin-modal__frame-form
class that would be used for loading actions with POST method.
3. Frontend configuration
At first you need to add dependency to DevGroup\AdminModals\assets\AdminModalsBundle
in you main application AssetBundle:
class AppAsset extends AssetBundle { // your stuff here public $depends = [ // add dependency DevGroup\AdminModals\assets\AdminModalsBundle::class, ]; }
If you need to configure JS-part of yii2-admin-modals - add javascript object before AdminModalsBundle loads(for example after opening body tag):
window.AdminModalsSettings = { modalActionSelector: '.admin-modal-trigger', dataAttribute: 'adminModals', adminModalPageUrl: '/site/admin-modal', adminModalFrameFormSelector: '.admin-modal__frame-form', magicParamKey: '__admin_modals', adminModalsUniqueParamKey: '__admin-modals__unique-id' }
4. Use your modals
All links and buttons with admin-modal-trigger
class assigned will automatically call opening modal windows instead of direct action performing.
Example code:
<a href="/admin/user/edit?id=1" class="btn btn-primary modal-test admin-modal-trigger"> Open user #1 edit form in modal! </a>
How to manually trigger modal?
An example for showing confirmation on deletion of jstree node:
function confirmDelete(node) { AdminModals.modalOpen({ url: '/category/delete', data: { id: $(node.reference[0]).data('id') }, method: 'GET', closeCallback: function() { alert('Thank you!'); } }); return false; }
That will display /category/delete?id=###
in modal.
Helpers
JsTreeHelper
A helper for jstree DevGroup\AdminModals\helpers\JsTreeHelper
has the following static functions:
- modalOpen($route, $method = 'GET', $attributesMapping = ['id' => 'id']) - Used for opening modals on context-menu actions. Attributes mappings describe additional data params to be added to request. Key is the name of target param, value is the key of data attribute of jstree node which stores target value.
TODO
- Implement callback
- Add more events in $ style
- Document all options
- Describe the main concept(iframe -> location|form.submit -> storage events -> extract buttons ...)
- Test app
- Simple modal demo
- GridView actions demo (test with pjax too)
- Deploy live version
- Codeception functional tests
- Screenshots and demo-video
- Add cool badges
- Remove console.log
- ???
- PROFIT!!! and spread the word