Skip to content

Commit a8ec036

Browse files
jissereitsmajissereitsma
committed
Working prototype of field type entity select
1 parent d818c41 commit a8ec036

4 files changed

Lines changed: 85 additions & 15 deletions

File tree

‎view/adminhtml/layout/loki_admin_components_entity.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,10 @@
3030
template="Loki_AdminComponents::script/entity-select.phtml">
3131
</block>
3232
</referenceContainer>
33+
34+
<block
35+
name="loki_admin_components.entity_select"
36+
template="Loki_AdminComponents::grid.phtml"
37+
/>
3338
</body>
3439
</page>

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

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,14 @@ $columns = $gridViewModel->getColumns();
5151
$currentId = 1;
5252
$currentItem = $gridViewModel->getCurrentItem($currentId);
5353

54-
// @todo: Escape key does not close popup
5554
// @todo: Modal effect with _show does not animate
5655
$valueCode = $field->getScope() . '.' . $field->getCode();
5756
?>
58-
<div x-data="LokiAdminFormEntitySelectComponent">
57+
<div
58+
x-data="LokiAdminFormEntitySelectComponent"
59+
@keyup.esc="closeWrapper"
60+
data-value-code="<?= $valueCode ?>"
61+
>
5962
<div class="input-with-button">
6063
<input
6164
class="admin__control-text"
@@ -77,11 +80,10 @@ $valueCode = $field->getScope() . '.' . $field->getCode();
7780
<aside
7881
role="dialog"
7982
x-ref="aside"
80-
@keyup.esc="closeWrapper"
8183
class="modal-slide"
8284
data-role="modal"
8385
data-type="popup">
84-
<div class="modal-inner-wrap">
86+
<div class="modal-inner-wrap" style="padding:20px;">
8587
<header class="modal-header">
8688
<h1 class="modal-title" data-role="title">
8789
Select an entity
@@ -92,13 +94,36 @@ $valueCode = $field->getScope() . '.' . $field->getCode();
9294
type="button">
9395
<span>Close</span>
9496
</button>
97+
98+
99+
95100
</header>
96101

97-
<template x-if="hasEntities">
98-
<div class="admin__data-grid-wrap" data-role="grid-wrapper">
102+
<div class="admin__data-grid-header">
103+
<div class="admin__data-grid-header-row">
104+
<div class="data-grid-search-control-wrap">
105+
<input
106+
class="admin__control-text data-grid-search-control"
107+
type="text"
108+
:value="search"
109+
@keyup="setSearch"
110+
placeholder="Search by keyword"
111+
aria-label="Search by keyword"
112+
/>
113+
114+
<button class="action-submit" type="button" data-bind="attr: {'aria-label': $t('Search')}, click: apply.bind($data, false)" aria-label="Search">
115+
<span data-bind="i18n: 'Search'">Search</span>
116+
</button>
117+
</div>
118+
</div>
119+
120+
<div class="admin__data-grid-wrap" data-role="grid-wrapper">
99121
<table class="data-grid" data-role="grid">
100122
<thead>
101123
<tr>
124+
<th class="data-grid-th">
125+
&nbsp;
126+
</th>
102127
<?php foreach ($columns as $column) : ?>
103128
<th class="data-grid-th">
104129
<span class="data-grid-cell-content">
@@ -109,6 +134,7 @@ $valueCode = $field->getScope() . '.' . $field->getCode();
109134
</tr>
110135
</thead>
111136
<tbody>
137+
<template x-if="hasEntities">
112138
<template x-for="entity in entities" :key="entity.entity_id">
113139
<tr class="data-row">
114140
<td class="data-grid-cell">
@@ -121,11 +147,18 @@ $valueCode = $field->getScope() . '.' . $field->getCode();
121147
<?php endforeach; ?>
122148
</tr>
123149
</template>
150+
</template>
151+
<template x-if="hasNoEntities">
152+
<tr class="data-row">
153+
<td class="data-grid-cell" colspan="<?= count($columns) + 1 ?>">
154+
No items found
155+
</td>
156+
</tr>
157+
</template>
124158
</tbody>
125159
</table>
126160
</div>
127-
</template>
128-
161+
</div>
129162
</div>
130163
</aside>
131164
<div class="modals-overlay"></div>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ $state = $viewModel->getState();
2121
<table class="data-grid" data-role="grid">
2222
<thead>
2323
<tr x-sort.ghost="repositionColumns">
24-
<th class="data-grid-multicheck-cell">
24+
<th class="">
25+
&nbsp;
26+
</th>
27+
<th class="">
2528
<div class="action-multicheck-wrap">
2629
<input
2730
class="admin__control-checkbox"

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

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<?php
22
declare(strict_types=1);
33

4-
use Loki\AdminComponents\Component\Grid\GridViewModel;
5-
use Loki\AdminComponents\ViewModel\Form\Field\Editor;
64
use Loki\Components\Factory\ViewModelFactory;
75
use Magento\Framework\View\Element\Template;
86

@@ -14,7 +12,6 @@ $ajaxUrl = $block->getUrl('mui/index/render') . '?'.http_build_query([
1412
'namespace' => 'customer_listing',
1513
'sorting[field]' => 'entity_id',
1614
'sorting[direction]' => 'asc',
17-
'search' => '',
1815
'keywordUpdated' => false,
1916
'filters[placeholder]' => true,
2017
'paging[pageSize]' => 20,
@@ -30,17 +27,36 @@ $ajaxUrl = $block->getUrl('mui/index/render') . '?'.http_build_query([
3027
currentEntityCode: '',
3128
currentEntityLabel: '',
3229
totalEntities: 0,
30+
valueCode: 'value',
31+
search: '',
3332
entities: [],
3433
init() {
34+
this.valueCode = this.$root.getAttribute('data-value-code');
35+
3536
if (this.isModalWrapperVisible) {
3637
this.loadEntities();
3738
}
39+
40+
this.$watch('search', () => {
41+
this.loadEntities();
42+
});
43+
},
44+
setSearch(event) {
45+
this.search = event.target.value;
3846
},
3947
hasEntities() {
4048
return this.totalEntities > 0;
4149
},
50+
hasNoEntities() {
51+
return !this.hasEntities();
52+
},
4253
loadEntities() {
43-
fetch(this.getAjaxUrl(), {
54+
let ajaxUrl = this.getAjaxUrl();
55+
if (this.search) {
56+
ajaxUrl += '&search=' + this.search;
57+
}
58+
59+
fetch(ajaxUrl, {
4460
method: 'GET',
4561
headers: {
4662
'Content-Type': 'application/json',
@@ -76,10 +92,23 @@ $ajaxUrl = $block->getUrl('mui/index/render') . '?'.http_build_query([
7692
document.getElementsByTagName('body')[0].classList.remove('_has-modal');
7793
this.$refs.aside.classList.remove('_show');
7894
},
95+
setNested(obj, path, value) {
96+
const parts = path.split(".");
97+
let current = obj;
98+
99+
for (let i = 0; i < parts.length - 1; i++) {
100+
if (current[parts[i]] == null) {
101+
current[parts[i]] = {};
102+
}
103+
current = current[parts[i]];
104+
}
105+
106+
current[parts[parts.length - 1]] = value;
107+
},
79108
selectEntity(entity) {
80-
this.value = entity[entity.id_field_name];
109+
const value = entity[entity.id_field_name];
110+
this.setNested(this, this.valueCode, value);
81111
this.currentEntityLabel = entity[entity.name];
82-
console.log('selectEntity', this.value);
83112
this.closeWrapper();
84113
}
85114
}));

0 commit comments

Comments
 (0)