chg: [genericElements:index_table] Moved description to a tooltip
Description describing indexes are great when discovering an app for the first time but start taking important place and become useless when users gets to know the app better. Moving it to a tooltip makes sense in that regard.pull/93/head
Sami Mokaddem
parent
509b203591
commit
7cf7363009
|
|
@ -999,6 +999,8 @@ class BoostrapIcon extends BootstrapGeneric {
|
|||
private $icon = '';
|
||||
private $defaultOptions = [
|
||||
'class' => [],
|
||||
'title' => '',
|
||||
'params' => [],
|
||||
];
|
||||
|
||||
function __construct($icon, $options=[]) {
|
||||
|
|
@ -1019,12 +1021,13 @@ class BoostrapIcon extends BootstrapGeneric {
|
|||
|
||||
private function genIcon()
|
||||
{
|
||||
$html = $this->genNode('span', [
|
||||
$html = $this->genNode('span', array_merge([
|
||||
'class' => array_merge(
|
||||
is_array($this->options['class']) ? $this->options['class'] : [$this->options['class']],
|
||||
["fa fa-{$this->icon}"]
|
||||
),
|
||||
]);
|
||||
'title' => h($this->options['title'])
|
||||
], $this->options['params']));
|
||||
return $html;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<?php
|
||||
|
||||
use Cake\Utility\Text;
|
||||
/*
|
||||
* echo $this->element('/genericElements/IndexTable/index_table', [
|
||||
* 'top_bar' => (
|
||||
|
|
@ -17,131 +19,137 @@
|
|||
*
|
||||
*/
|
||||
|
||||
$newMetaFields = [];
|
||||
if (!empty($requestedMetaFields)) { // Create mapping for new index table fields on the fly
|
||||
foreach ($requestedMetaFields as $requestedMetaField) {
|
||||
$template_id = $requestedMetaField['template_id'];
|
||||
$meta_template_field_id = $requestedMetaField['meta_template_field_id'];
|
||||
$newMetaFields[] = [
|
||||
'name' => $meta_templates[$template_id]['meta_template_fields'][$meta_template_field_id]['field'],
|
||||
'data_path' => "MetaTemplates.{$template_id}.meta_template_fields.{$meta_template_field_id}.metaFields.{n}.value",
|
||||
'element' => 'generic_field',
|
||||
'_metafield' => true,
|
||||
'_automatic_field' => true,
|
||||
];
|
||||
}
|
||||
}
|
||||
$data['fields'] = array_merge($data['fields'], $newMetaFields);
|
||||
|
||||
$tableRandomValue = Cake\Utility\Security::randomString(8);
|
||||
echo '<div id="table-container-' . h($tableRandomValue) . '">';
|
||||
if (!empty($data['title'])) {
|
||||
echo sprintf('<h2 class="fw-light">%s</h2>', h($data['title']));
|
||||
}
|
||||
if (!empty($data['description'])) {
|
||||
echo sprintf(
|
||||
'<div class="fw-light">%s</div>',
|
||||
empty($data['description']) ? '' : h($data['description'])
|
||||
);
|
||||
}
|
||||
echo '<div class="panel">';
|
||||
if (!empty($data['html'])) {
|
||||
echo sprintf('<div>%s</div>', $data['html']);
|
||||
}
|
||||
$skipPagination = isset($data['skip_pagination']) ? $data['skip_pagination'] : 0;
|
||||
if (!$skipPagination) {
|
||||
$paginationData = !empty($data['paginatorOptions']) ? $data['paginatorOptions'] : [];
|
||||
echo $this->element(
|
||||
'/genericElements/IndexTable/pagination',
|
||||
[
|
||||
'paginationOptions' => $paginationData,
|
||||
'tableRandomValue' => $tableRandomValue
|
||||
]
|
||||
);
|
||||
echo $this->element(
|
||||
'/genericElements/IndexTable/pagination_links'
|
||||
);
|
||||
}
|
||||
$multiSelectData = getMultiSelectData($data['top_bar']);
|
||||
if (!empty($multiSelectData)) {
|
||||
$multiSelectField = [
|
||||
'element' => 'selector',
|
||||
'class' => 'short',
|
||||
'data' => $multiSelectData['data']
|
||||
$newMetaFields = [];
|
||||
if (!empty($requestedMetaFields)) { // Create mapping for new index table fields on the fly
|
||||
foreach ($requestedMetaFields as $requestedMetaField) {
|
||||
$template_id = $requestedMetaField['template_id'];
|
||||
$meta_template_field_id = $requestedMetaField['meta_template_field_id'];
|
||||
$newMetaFields[] = [
|
||||
'name' => $meta_templates[$template_id]['meta_template_fields'][$meta_template_field_id]['field'],
|
||||
'data_path' => "MetaTemplates.{$template_id}.meta_template_fields.{$meta_template_field_id}.metaFields.{n}.value",
|
||||
'element' => 'generic_field',
|
||||
'_metafield' => true,
|
||||
'_automatic_field' => true,
|
||||
];
|
||||
array_unshift($data['fields'], $multiSelectField);
|
||||
}
|
||||
if (!empty($data['top_bar'])) {
|
||||
echo $this->element(
|
||||
'/genericElements/ListTopBar/scaffold',
|
||||
[
|
||||
'data' => $data['top_bar'],
|
||||
'table_data' => $data,
|
||||
'tableRandomValue' => $tableRandomValue
|
||||
]
|
||||
);
|
||||
}
|
||||
$rows = '';
|
||||
$row_element = isset($data['row_element']) ? $data['row_element'] : 'row';
|
||||
$options = isset($data['options']) ? $data['options'] : [];
|
||||
$actions = isset($data['actions']) ? $data['actions'] : [];
|
||||
if ($this->request->getParam('prefix') === 'Open') {
|
||||
$actions = [];
|
||||
}
|
||||
$dblclickActionArray = !empty($actions) ? $this->Hash->extract($actions, '{n}[dbclickAction]') : [];
|
||||
$dbclickAction = '';
|
||||
foreach ($data['data'] as $k => $data_row) {
|
||||
$primary = null;
|
||||
if (!empty($data['primary_id_path'])) {
|
||||
$primary = $this->Hash->extract($data_row, $data['primary_id_path'])[0];
|
||||
}
|
||||
if (!empty($dblclickActionArray)) {
|
||||
$dbclickAction = sprintf("changeLocationFromIndexDblclick(%s)", $k);
|
||||
}
|
||||
$rows .= sprintf(
|
||||
'<tr data-row-id="%s" %s %s class="%s %s">%s</tr>',
|
||||
h($k),
|
||||
empty($dbclickAction) ? '' : 'ondblclick="' . $dbclickAction . '"',
|
||||
empty($primary) ? '' : 'data-primary-id="' . $primary . '"',
|
||||
empty($data['row_modifier']) ? '' : h($data['row_modifier']($data_row)),
|
||||
empty($data['class']) ? '' : h($data['row_class']),
|
||||
$this->element(
|
||||
'/genericElements/IndexTable/' . $row_element,
|
||||
[
|
||||
'k' => $k,
|
||||
'row' => $data_row,
|
||||
'fields' => $data['fields'],
|
||||
'options' => $options,
|
||||
'actions' => $actions,
|
||||
'primary' => $primary,
|
||||
'tableRandomValue' => $tableRandomValue
|
||||
}
|
||||
$data['fields'] = array_merge($data['fields'], $newMetaFields);
|
||||
|
||||
$tableRandomValue = Cake\Utility\Security::randomString(8);
|
||||
echo '<div id="table-container-' . h($tableRandomValue) . '">';
|
||||
if (!empty($data['title'])) {
|
||||
echo Text::insert(
|
||||
'<h2 class="fw-light">:title :help</h2>',
|
||||
[
|
||||
'title' => h($data['title']),
|
||||
'help' => $this->Bootstrap->icon('info', [
|
||||
'class' => ['fs-6', 'align-text-top',],
|
||||
'title' => empty($data['description']) ? '' : h($data['description']),
|
||||
'params' => [
|
||||
'data-bs-toggle' => 'tooltip',
|
||||
]
|
||||
)
|
||||
);
|
||||
]),
|
||||
]
|
||||
);
|
||||
}
|
||||
echo '<div class="panel">';
|
||||
if (!empty($data['html'])) {
|
||||
echo sprintf('<div>%s</div>', $data['html']);
|
||||
}
|
||||
$skipPagination = isset($data['skip_pagination']) ? $data['skip_pagination'] : 0;
|
||||
if (!$skipPagination) {
|
||||
$paginationData = !empty($data['paginatorOptions']) ? $data['paginatorOptions'] : [];
|
||||
echo $this->element(
|
||||
'/genericElements/IndexTable/pagination',
|
||||
[
|
||||
'paginationOptions' => $paginationData,
|
||||
'tableRandomValue' => $tableRandomValue
|
||||
]
|
||||
);
|
||||
echo $this->element(
|
||||
'/genericElements/IndexTable/pagination_links'
|
||||
);
|
||||
}
|
||||
$multiSelectData = getMultiSelectData($data['top_bar']);
|
||||
if (!empty($multiSelectData)) {
|
||||
$multiSelectField = [
|
||||
'element' => 'selector',
|
||||
'class' => 'short',
|
||||
'data' => $multiSelectData['data']
|
||||
];
|
||||
array_unshift($data['fields'], $multiSelectField);
|
||||
}
|
||||
if (!empty($data['top_bar'])) {
|
||||
echo $this->element(
|
||||
'/genericElements/ListTopBar/scaffold',
|
||||
[
|
||||
'data' => $data['top_bar'],
|
||||
'table_data' => $data,
|
||||
'tableRandomValue' => $tableRandomValue
|
||||
]
|
||||
);
|
||||
}
|
||||
$rows = '';
|
||||
$row_element = isset($data['row_element']) ? $data['row_element'] : 'row';
|
||||
$options = isset($data['options']) ? $data['options'] : [];
|
||||
$actions = isset($data['actions']) ? $data['actions'] : [];
|
||||
if ($this->request->getParam('prefix') === 'Open') {
|
||||
$actions = [];
|
||||
}
|
||||
$dblclickActionArray = !empty($actions) ? $this->Hash->extract($actions, '{n}[dbclickAction]') : [];
|
||||
$dbclickAction = '';
|
||||
foreach ($data['data'] as $k => $data_row) {
|
||||
$primary = null;
|
||||
if (!empty($data['primary_id_path'])) {
|
||||
$primary = $this->Hash->extract($data_row, $data['primary_id_path'])[0];
|
||||
}
|
||||
$tbody = '<tbody>' . $rows . '</tbody>';
|
||||
echo sprintf(
|
||||
'<table class="table table-hover" id="index-table-%s" data-table-random-value="%s" data-reload-url="%s">%s%s</table>',
|
||||
$tableRandomValue,
|
||||
$tableRandomValue,
|
||||
h($this->Url->build(['action' => $this->request->getParam('action'),])),
|
||||
if (!empty($dblclickActionArray)) {
|
||||
$dbclickAction = sprintf("changeLocationFromIndexDblclick(%s)", $k);
|
||||
}
|
||||
$rows .= sprintf(
|
||||
'<tr data-row-id="%s" %s %s class="%s %s">%s</tr>',
|
||||
h($k),
|
||||
empty($dbclickAction) ? '' : 'ondblclick="' . $dbclickAction . '"',
|
||||
empty($primary) ? '' : 'data-primary-id="' . $primary . '"',
|
||||
empty($data['row_modifier']) ? '' : h($data['row_modifier']($data_row)),
|
||||
empty($data['class']) ? '' : h($data['row_class']),
|
||||
$this->element(
|
||||
'/genericElements/IndexTable/headers',
|
||||
'/genericElements/IndexTable/' . $row_element,
|
||||
[
|
||||
'k' => $k,
|
||||
'row' => $data_row,
|
||||
'fields' => $data['fields'],
|
||||
'paginator' => $this->Paginator,
|
||||
'actions' => (empty($actions) ? false : true),
|
||||
'options' => $options,
|
||||
'actions' => $actions,
|
||||
'primary' => $primary,
|
||||
'tableRandomValue' => $tableRandomValue
|
||||
]
|
||||
),
|
||||
$tbody
|
||||
)
|
||||
);
|
||||
if (!$skipPagination) {
|
||||
echo $this->element('/genericElements/IndexTable/pagination_counter', $paginationData);
|
||||
echo $this->element('/genericElements/IndexTable/pagination_links');
|
||||
}
|
||||
echo '</div>';
|
||||
echo '</div>';
|
||||
}
|
||||
$tbody = '<tbody>' . $rows . '</tbody>';
|
||||
echo sprintf(
|
||||
'<table class="table table-hover" id="index-table-%s" data-table-random-value="%s" data-reload-url="%s">%s%s</table>',
|
||||
$tableRandomValue,
|
||||
$tableRandomValue,
|
||||
h($this->Url->build(['action' => $this->request->getParam('action'),])),
|
||||
$this->element(
|
||||
'/genericElements/IndexTable/headers',
|
||||
[
|
||||
'fields' => $data['fields'],
|
||||
'paginator' => $this->Paginator,
|
||||
'actions' => (empty($actions) ? false : true),
|
||||
'tableRandomValue' => $tableRandomValue
|
||||
]
|
||||
),
|
||||
$tbody
|
||||
);
|
||||
if (!$skipPagination) {
|
||||
echo $this->element('/genericElements/IndexTable/pagination_counter', $paginationData);
|
||||
echo $this->element('/genericElements/IndexTable/pagination_links');
|
||||
}
|
||||
echo '</div>';
|
||||
echo '</div>';
|
||||
?>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
|
|
@ -158,11 +166,18 @@
|
|||
$(this).addClass('fa-eye');
|
||||
}
|
||||
});
|
||||
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php
|
||||
function getMultiSelectData($topbar) {
|
||||
function getMultiSelectData($topbar)
|
||||
{
|
||||
foreach ($topbar['children'] as $child) {
|
||||
if (!empty($child['type']) && $child['type'] == 'multi_select_actions') {
|
||||
return $child;
|
||||
|
|
|
|||
Loading…
Reference in New Issue