Skip to content

Commit bc92162

Browse files
jissereitsmajissereitsma
committed
WIP with columns selection and view selector
1 parent 304c61c commit bc92162

9 files changed

Lines changed: 187 additions & 2 deletions

File tree

‎Component/Grid/GridViewModel.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ public function getJsData(): array
150150
...$this->getState()->toArray(),
151151
'namespace' => $this->getNamespace(),
152152
'gridFilters' => $this->getGridFilterStateValues(),
153+
'columns' => $this->getColumns(),
153154
'columnPositions' => $this->getColumnPositions(),
154155
'newUrl' => $this->getNewUrl(),
155156
'indexUrl' => $this->getIndexUrl(),
@@ -171,7 +172,7 @@ public function getColumnPositions(): array
171172
/**
172173
* @return Column[]
173174
*/
174-
private function getAvailableColumns(): array
175+
public function getAvailableColumns(): array
175176
{
176177
$columns = $this->columnLoader->getColumns($this->getNamespace());
177178
if (!empty($columns)) {

‎Grid/Column/Column.php‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
use Magento\Framework\DataObject;
66

7-
class Column extends DataObject
7+
class Column extends DataObject implements \JsonSerializable
88
{
99
public function getLabel(): string
1010
{
@@ -45,4 +45,13 @@ public function __toString(): string
4545
{
4646
return $this->getCode();
4747
}
48+
49+
public function jsonSerialize(): mixed
50+
{
51+
return [
52+
'code' => $this->getCode(),
53+
'label' => $this->getLabel(),
54+
'position' => $this->getPosition(),
55+
];
56+
}
4857
}

‎view/adminhtml/layout/loki_admin_components_grid.xml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,16 @@
4747
template="Loki_AdminComponents::grid/records.phtml">
4848
</block>
4949

50+
<block
51+
name="loki-admin.grid.view-selector"
52+
template="Loki_AdminComponents::grid/view-selector.phtml">
53+
</block>
54+
55+
<block
56+
name="loki-admin.grid.columns-selector"
57+
template="Loki_AdminComponents::grid/columns-selector.phtml">
58+
</block>
59+
5060
<block
5161
name="loki-admin.grid.filters"
5262
template="Loki_AdminComponents::grid/filters.phtml">
@@ -71,6 +81,12 @@
7181
<block
7282
name="loki-admin.script.component-partials.filters" as="filters"
7383
template="Loki_AdminComponents::script/component-partial/filters-component-partial.phtml"/>
84+
<block
85+
name="loki-admin.script.component-partials.view-selector" as="view-selector"
86+
template="Loki_AdminComponents::script/component-partial/view-selector-component-partial.phtml"/>
87+
<block
88+
name="loki-admin.script.component-partials.columns-selector" as="columns-selector"
89+
template="Loki_AdminComponents::script/component-partial/columns-selector-component-partial.phtml"/>
7490
</referenceBlock>
7591

7692
<referenceBlock name="loki.script.component-type">

‎view/adminhtml/templates/grid.phtml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ if (!isset($viewModel)) {
2626

2727
<div class="admin__data-grid-header">
2828
<div class="admin__data-grid-header-row">
29+
<div class="admin__data-grid-actions-wrap">
30+
<?= /* @noEscape */ $blockRenderer->html( $block, 'loki-admin.grid.view-selector') ?>
31+
<?= /* @noEscape */ $blockRenderer->html( $block, 'loki-admin.grid.columns-selector') ?>
32+
</div>
2933
<?= /* @noEscape */ $blockRenderer->html( $block, 'loki-admin.grid.filters') ?>
3034
</div>
3135
<div class="admin__data-grid-header-row">

‎view/adminhtml/templates/grid/columns-selector.phtml‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Magento\Framework\Escaper;
5+
use Magento\Framework\Data\Collection\AbstractDb;
6+
use Magento\Framework\View\Element\Template;
7+
use Loki\AdminComponents\Component\Grid\GridViewModel;
8+
use Loki\Components\Util\Block\TemplateRenderer;
9+
10+
/** @var Escaper $escaper */
11+
/** @var Template $block */
12+
/** @var GridViewModel $viewModel */
13+
/** @var TemplateRenderer $templateRenderer */
14+
15+
$viewModel = $block->getViewModel();
16+
$availableColumns = $viewModel->getAvailableColumns();
17+
$columns = $viewModel->getColumns();
18+
$state = $viewModel->getState();
19+
?>
20+
21+
<div class="admin__action-dropdown-wrap admin__data-grid-action-columns">
22+
<button class="admin__action-dropdown" type="button" @click="toggleColumnsSelector">
23+
<span class="admin__action-dropdown-text">
24+
<?= __('Columns') ?>
25+
</span>
26+
</button>
27+
<div class="admin__action-dropdown-menu admin__data-grid-action-columns-menu _overflow" x-show="showColumnsSelector">
28+
<div class="admin__action-dropdown-menu-header">
29+
<?= __(
30+
'%1 out of %1 visible',
31+
count($columns),
32+
count($availableColumns),
33+
) ?>
34+
</div>
35+
<div class="admin__action-dropdown-menu-content">
36+
<?php foreach($availableColumns as $name => $column): ?>
37+
<div class="admin__field-option">
38+
<input
39+
class="admin__control-checkbox"
40+
type="checkbox"
41+
id="col-<?= $column->getCode() ?>"
42+
data-column="<?= $column->getCode() ?>"
43+
:checked="isColumnActive"
44+
@change="toggleActiveColumn"
45+
>
46+
<label class="admin__field-label" for="col-<?= $column->getCode() ?>">
47+
<?= $column->getLabel() ?>
48+
</label>
49+
</div>
50+
<?php endforeach; ?>
51+
</div>
52+
<div class="admin__action-dropdown-menu-footer">
53+
<div class="admin__action-dropdown-footer-secondary-actions">
54+
<button class="action-tertiary" type="button">
55+
<?= __('Reset') ?>
56+
</button>
57+
</div>
58+
<div class="admin__action-dropdown-footer-main-actions">
59+
<button class="action-tertiary" type="button" @click="toggleColumnsSelector">
60+
<?= __('Cancel') ?>
61+
</button>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
67+
<style>
68+
.admin__data-grid-action-columns .admin__action-dropdown-menu {
69+
display: block;
70+
z-index: 2;
71+
}
72+
</style>

‎view/adminhtml/templates/grid/view-selector.phtml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div class="admin__action-dropdown-wrap admin__data-grid-action-bookmarks">
2+
<button class="admin__action-dropdown" type="button" @click="toggleViewSelector">
3+
<span class="admin__action-dropdown-text">Default View</span>
4+
</button>
5+
<ul class="admin__action-dropdown-menu" x-show="showViewSelector">
6+
<li>
7+
<div class="action-dropdown-menu-item">
8+
<a class="action-dropdown-menu-link">Default View</a>
9+
</div>
10+
</li>
11+
12+
<li class="action-dropdown-menu-action action-dropdown-menu-item-last" style="display: none;">
13+
<a href="">Save View As...</a>
14+
<div class="action-dropdown-menu-item-edit" style="display: none;">
15+
<input class="admin__control-text" type="text" aria-label="New View">
16+
<div class="action-dropdown-menu-item-actions">
17+
<button class="action-submit" type="button" title="Save all changes">
18+
<span>Submit</span>
19+
</button>
20+
</div>
21+
</div>
22+
</li>
23+
</ul>
24+
</div>
25+
26+
<style>
27+
.admin__data-grid-action-bookmarks .admin__action-dropdown-menu {
28+
display: block;
29+
z-index: 1;
30+
}
31+
</style>

‎view/adminhtml/templates/script/component-partial/columns-selector-component-partial.phtml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Magento\Framework\View\Element\Template;
5+
6+
/** @var Template $block */
7+
?>
8+
<script>
9+
const LokiAdminColumnsSelectorComponentPartial = {
10+
activeColumns: null,
11+
initActiveColumns() {
12+
this.activeColumns = new Set();
13+
this.columns.forEach(column => {
14+
this.activeColumns.add(column.code);
15+
})
16+
},
17+
isColumnActive() {
18+
const columnName = this.$el.getAttribute('data-column');
19+
return this.activeColumns.has(columnName);
20+
},
21+
showColumnsSelector: false,
22+
toggleColumnsSelector() {
23+
this.showColumnsSelector = !this.showColumnsSelector;
24+
},
25+
toggleActiveColumn() {
26+
const columnName = this.$el.getAttribute('data-column');
27+
if (this.activeColumns.has(columnName)) {
28+
this.activeColumns.delete(columnName);
29+
} else {
30+
this.activeColumns.add(columnName);
31+
}
32+
}
33+
}
34+
</script>

‎view/adminhtml/templates/script/component-partial/view-selector-component-partial.phtml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Magento\Framework\View\Element\Template;
5+
6+
/** @var Template $block */
7+
?>
8+
<script>
9+
const LokiAdminViewSelectorComponentPartial = {
10+
showViewSelector: false,
11+
toggleViewSelector() {
12+
this.showViewSelector = !this.showViewSelector;
13+
}
14+
}
15+
</script>

‎view/adminhtml/templates/script/component-type/grid-component-type.phtml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,12 @@ use Magento\Framework\View\Element\Template;
1212
...LokiAdminLimitComponentPartial,
1313
...LokiAdminInlineEditComponentPartial,
1414
...LokiAdminSelectedComponentPartial,
15+
...LokiAdminColumnsSelectorComponentPartial,
16+
...LokiAdminViewSelectorComponentPartial,
1517
...LokiAdminFiltersComponentPartial,
1618
...LokiAdminMassActionsComponentPartial,
1719
...LokiComponentType,
20+
columns: {},
1821
columnPositions: {},
1922
showOtherActions: false,
2023
gridFilters: {},

0 commit comments

Comments
 (0)