Skip to content

Commit 6307c05

Browse files
jissereitsmajissereitsma
committed
WIP with new entity select field
1 parent 8029a6d commit 6307c05

10 files changed

Lines changed: 252 additions & 0 deletions

File tree

‎Controller/Adminhtml/Index/Entity.php‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?php declare(strict_types=1);
2+
3+
namespace Loki\AdminComponents\Controller\Adminhtml\Index;
4+
5+
use Magento\Backend\Model\View\Result\Page;
6+
use Magento\Framework\App\Action\HttpGetActionInterface;
7+
use Magento\Framework\View\Result\PageFactory as ResultPageFactory;
8+
9+
class Entity implements HttpGetActionInterface
10+
{
11+
/**
12+
* ACL resource
13+
*/
14+
const ADMIN_RESOURCE = 'Loki_AdminComponents::grid';
15+
16+
public function __construct(
17+
private ResultPageFactory $resultPageFactory,
18+
) {
19+
}
20+
21+
public function execute(): Page
22+
{
23+
/** @var Page $resultPage */
24+
$resultPage = $this->resultPageFactory->create();
25+
$resultPage->getLayout()->getUpdate()->addHandle('loki_admin_components_entity');
26+
27+
return $resultPage;
28+
}
29+
}

‎Form/Field/FieldType/EntitySelect.php‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
namespace Loki\AdminComponents\Form\Field\FieldType;
5+
6+
use Loki\AdminComponents\Form\Field\FieldTypeInterface;
7+
8+
class EntitySelect implements FieldTypeInterface
9+
{
10+
public function getInputType(): string
11+
{
12+
return 'text';
13+
}
14+
15+
public function getTemplate(): string
16+
{
17+
return 'Loki_AdminComponents::form/field_type/entity_select.phtml';
18+
}
19+
}

‎etc/adminhtml/routes.xml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0"?>
2+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
3+
<router id="admin">
4+
<route id="loki_admin_components" frontName="loki_admin_components">
5+
<module name="Loki_AdminComponents" before="Magento_Backend" />
6+
</route>
7+
</router>
8+
</config>

‎etc/di.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
<item name="switch" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\Switcher</item>
4242
<item name="from_to" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\FromTo</item>
4343
<item name="product_id" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\ProductId</item>
44+
<item name="entity_select" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\EntitySelect</item>
4445
</argument>
4546
</arguments>
4647
</type>

‎etc/loki_components.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,10 @@
1111
viewModel="Loki\AdminComponents\Component\Form\FormViewModel"
1212
repository="Loki\AdminComponents\Component\Form\FormRepository">
1313
</group>
14+
15+
<component
16+
name="loki_admin_components.entity_select"
17+
viewModel="Loki\AdminComponents\Component\Grid\GridViewModel"
18+
repository="Loki\AdminComponents\Component\Grid\GridRepository"
19+
/>
1420
</components>

‎view/adminhtml/layout/loki_admin_components_entity.xml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<?xml version="1.0"?>
2+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
3+
<update handle="overlay_popup"/>
4+
<update handle="loki_admin_components_grid"/>
5+
6+
<body>
7+
<referenceContainer name="menu.wrapper" remove="true"/>
8+
<referenceContainer name="header" remove="true"/>
9+
<referenceContainer name="footer" remove="true"/>
10+
11+
<referenceContainer name="content">
12+
<block
13+
name="loki_admin_components.entity_select"
14+
template="Loki_AdminComponents::grid.phtml">
15+
<arguments>
16+
<argument name="provider" xsi:type="string">Magento\Customer\Model\ResourceModel\Customer\Collection</argument>
17+
<argument name="row_actions" xsi:type="array">
18+
<item name="select" xsi:type="array">
19+
<item name="label" xsi:type="string">Select</item>
20+
<item name="css_class" xsi:type="string">Select</item>
21+
<item name="jsMethod" xsi:type="string">onSelectEntity</item>
22+
</item>
23+
</argument>
24+
<argument name="skip_edit_action" xsi:type="boolean">true</argument>
25+
</arguments>
26+
</block>
27+
28+
<block
29+
name="loki_admin_components.script.entity_select"
30+
template="Loki_AdminComponents::script/entity-select.phtml">
31+
</block>
32+
</referenceContainer>
33+
</body>
34+
</page>

‎view/adminhtml/layout/loki_admin_components_form.xml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@
3333
<block
3434
name="loki-admin.script.component.editor-component" as="editor"
3535
template="Loki_AdminComponents::script/component/editor-component.phtml"/>
36+
37+
<block
38+
name="loki-admin.script.component.entity-select" as="entity-select"
39+
template="Loki_AdminComponents::script/component/entity-select-component.phtml"/>
3640
</referenceBlock>
3741
</body>
3842
</page>

‎view/adminhtml/templates/form/field_type/entity_select.phtml‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Magento\Framework\Escaper;
5+
use Magento\Framework\View\Element\Template;
6+
use Loki\AdminComponents\Form\Field\Field;
7+
use Loki\AdminComponents\Form\Field\FieldType\Input;
8+
use Loki\Components\Util\Block\TemplateRenderer;
9+
10+
/** @version 0.4.1 */
11+
/** @var Escaper $escaper */
12+
/** @var Template $block */
13+
/** @var Field $field */
14+
/** @var Input $fieldType */
15+
/** @var TemplateRenderer $templateRenderer */
16+
17+
$field = $block->getField();
18+
$fieldAttributes = $field->getFieldAttributes();
19+
$fieldType = $field->getFieldType();
20+
$inputType = $fieldType->getInputType();
21+
if (isset($fieldAttributes['type'])) {
22+
$inputType = $fieldAttributes['type'];
23+
unset($fieldAttributes['type']);
24+
}
25+
26+
// @todo: Escape key does not close popup
27+
// @todo: Modal effect with _show does not animate
28+
29+
$iframeUrl = $block->getUrl('loki_admin_components/index/entity');
30+
?>
31+
<div x-data="LokiAdminFormEntitySelectComponent">
32+
<div class="input-with-button">
33+
<input
34+
class="admin__control-text"
35+
type="<?= $escaper->escapeHtml($inputType) ?>"
36+
name="<?= $escaper->escapeHtml($field->getCode()) ?>"
37+
data-name="<?= $escaper->escapeHtml($field->getCode()) ?>"
38+
<?php foreach ($fieldAttributes as $attributeName => $attributeValue) :?>
39+
<?= /* @noEscape */ $attributeName ?>="<?= /* @noEscape */ $attributeValue ?>"
40+
<?php endforeach; ?>
41+
:value="<?= $escaper->escapeHtml($field->getScope()) ?>
42+
.<?= $escaper->escapeHtml($field->getCode()) ?>"
43+
@change="<?= $escaper->escapeHtml($field->getAlpineSetter()) ?>"
44+
>
45+
46+
<button @click="showModalWrapper"><?= __('Select entity') ?></button>
47+
</div>
48+
49+
<template x-teleport="body">
50+
<div class="modals-wrapper" x-show="isModalWrapperVisible">
51+
<aside
52+
role="dialog"
53+
x-ref="aside"
54+
@keyup.esc="closeWrapper"
55+
class="modal-slide"
56+
data-role="modal"
57+
data-type="popup">
58+
<div class="modal-inner-wrap">
59+
<header class="modal-header">
60+
<h1 class="modal-title" data-role="title">
61+
Select an entity
62+
</h1>
63+
<button
64+
@click="closeWrapper"
65+
class="action-close"
66+
type="button">
67+
<span>Close</span>
68+
</button>
69+
</header>
70+
71+
<iframe src="<?= $iframeUrl ?>" class="entity-select-iframe"></iframe>
72+
</div>
73+
</aside>
74+
<div class="modals-overlay"></div>
75+
</div>
76+
</template>
77+
</div>
78+
79+
<style>
80+
.input-with-button {
81+
display: flex;
82+
}
83+
84+
.input-with-button .admin__control-text {
85+
width: auto !important;
86+
flex-grow: 1;
87+
margin-right: 4px;
88+
}
89+
90+
.entity-select-iframe {
91+
width: 100%;
92+
height: 100%;
93+
}
94+
</style>
95+
96+
<script>
97+
window.addEventListener("message", (event) => {
98+
if (event.data.type === "lokiAdminOnSelectEntity") {
99+
console.log("Signal received:", event.data.data);
100+
}
101+
});
102+
</script>
103+

‎view/adminhtml/templates/script/component/entity-select-component.phtml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Loki\AdminComponents\ViewModel\Form\Field\Editor;
5+
use Loki\Components\Factory\ViewModelFactory;
6+
use Magento\Framework\View\Element\Template;
7+
8+
/** @version 0.4.1 */
9+
/** @var Template $block */
10+
/** @var ViewModelFactory $viewModelFactory */
11+
/** @var Editor $editor */
12+
$editor = $viewModelFactory->create(Editor::class);
13+
?>
14+
<script>
15+
document.addEventListener('alpine:init', () => {
16+
Alpine.data('LokiAdminFormEntitySelectComponent', () => ({
17+
isModalWrapperVisible: false,
18+
init() {
19+
},
20+
showModalWrapper() {
21+
this.isModalWrapperVisible = true;
22+
document.getElementsByTagName('body')[0].classList.add('_has-modal');
23+
this.$refs.aside.classList.add('_show');
24+
},
25+
closeWrapper() {
26+
this.isModalWrapperVisible = false;
27+
document.getElementsByTagName('body')[0].classList.remove('_has-modal');
28+
this.$refs.aside.classList.remove('_show');
29+
},
30+
selectEntity() {
31+
console.log('selectEntity');
32+
}
33+
}));
34+
});
35+
</script>

‎view/adminhtml/templates/script/entity-select.phtml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
function onSelectEntity(event) {
3+
console.log('onSelectEntity', event);
4+
event.preventDefault();
5+
window.parent.postMessage({
6+
type: "lokiAdminOnSelectEntity",
7+
data: event
8+
}
9+
, "*"
10+
);
11+
}
12+
</script>
13+

0 commit comments

Comments
 (0)