make tables tabable

This commit is contained in:
Dennis Eichhorn 2020-05-31 18:03:29 +02:00
parent 45c9e60a59
commit 8d76845dbf
3 changed files with 94 additions and 23 deletions

View File

@ -36,7 +36,7 @@ class BaseView extends View
* @var string
* @since 1.0.0
*/
protected string $form = '';
protected string $id = '';
/**
* Virtual path of the media file
@ -54,6 +54,14 @@ class BaseView extends View
*/
protected string $name = '';
/**
* Is required?
*
* @var bool
* @since 1.0.0
*/
private bool $isRequired = false;
/**
* {@inheritdoc}
*/
@ -68,9 +76,46 @@ class BaseView extends View
*/
public function render(...$data) : string
{
$this->form = $data[0];
$this->id = $data[0];
$this->name = $data[1];
$this->virtualPath = $data[2] ?? '/';
$this->isRequired = $data[3] ?? false;
return parent::render();
}
/**
* Get selector id
*
* @return string
*
* @since 1.0.0
*/
public function getId() : string
{
return $this->id;
}
/**
* Get name
*
* @return string
*
* @since 1.0.0
*/
public function getName() : string
{
return $this->name;
}
/**
* Is required?
*
* @return bool
*
* @since 1.0.0
*/
public function isRequired() : bool
{
return $this->isRequired;
}
}

View File

@ -1,29 +1,55 @@
<div class="ipt-wrap">
<div class="ipt-first">
<div class="advancedInput wf-100" id="iMediaInput">
<input autocomplete="off" class="input" id="mediaInput" name="<?= $this->name; ?>-search" type="text" data-emptyAfter="true" data-autocomplete="false" data-src="api/media/find?search={#mediaInput}">
<div id="iMediaInput-dropdown" class="dropdown" data-active="true">
<table id="iMediaInput-table" class="default">
<thead>
<tr>
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Extension<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<tbody>
<template id="iMediaInput-rowElement" class="rowTemplate">
<tr tabindex="-1">
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
<td data-tpl-text="/name" data-tpl-value="/name" data-value=""></td>
<td data-tpl-text="/extension"></td>
</tr>
</template>
</tbody>
</table>
<span class="input">
<button type="button" id="<?= $this->printHtml($this->getId()); ?>-book-button" data-action='[
{
"key": 1, "listener": "click", "action": [
{"key": 1, "type": "dom.popup", "selector": "#acc-grp-tpl", "aniIn": "fadeIn", "id": "<?= $this->printHtml($this->getId()); ?>"},
{"key": 2, "type": "message.request", "uri": "<?= \phpOMS\Uri\UriFactory::build('{/prefix}admin/account?filter=some&limit=10'); ?>", "method": "GET", "request_type": "json"},
{"key": 3, "type": "dom.table.append", "id": "acc-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1},
{"key": 4, "type": "message.request", "uri": "<?= \phpOMS\Uri\UriFactory::build('{/prefix}admin/account?filter=some&limit=10'); ?>", "method": "GET", "request_type": "json"},
{"key": 5, "type": "dom.table.append", "id": "grp-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1}
]
}
]' formaction=""><i class="fa fa-book"></i></button>
<div class="advancedInput wf-100" id="<?= $this->printHtml($this->getId()); ?>">
<input autocomplete="off" class="input" type="text" id="i<?= $this->printHtml($this->getId()); ?>"
data-emptyAfter="true"
data-autocomplete="false"
data-src="api/media/find?search={#mediaInput}">
<div id="<?= $this->printHtml($this->getId()); ?>-dropdown" class="dropdown" data-active="true">
<table class="default">
<thead>
<tr>
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<td>Extension<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
<tbody>
<template id="<?= $this->printHtml($this->getId()); ?>-rowElement" class="rowTemplate">
<tr tabindex="-1">
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
<td data-tpl-text="/name" data-tpl-value="/name" data-value=""></td>
<td data-tpl-text="/extension"></td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</span>
</div>
<div class="ipt-second"><button><?= $this->getHtml('Select', 'Media') ?></button></div>
</div>
<div class="box" id="<?= $this->printHtml($this->getId()); ?>-tags" data-limit="0" data-active="true">
<template id="<?= $this->printHtml($this->getId()); ?>-tagTemplate">
<span class="tag red" data-tpl-value="/id" data-value="" data-uuid="" data-name="<?= $this->printHtml($this->getName()); ?>">
<i class="fa fa-times"></i>
<span style="display: none;" data-name="type_prefix" data-tpl-value="/type_prefix" data-value=""></span>
<span data-tpl-text="/id" data-name="id" data-tpl-value="/id" data-value=""></span>
<span data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></span>
</span>
</template>
</div>
<tr><td>
<input type="hidden" name="<?= $this->name; ?>-path" form="<?= $this->form; ?>" value="<?= $this->virtualPath; ?>">
<input type="file" id="i<?= $this->form; ?>-upload" class="preview" name="<?= $this->name; ?>" form="<?= $this->form; ?>" multiple>

View File

@ -88,7 +88,7 @@ $media = $this->getData('media');
$icon = $fileIconFunction(\phpOMS\System\File\FileUtils::getExtensionType($value->getExtension()));
?>
<tr data-href="<?= $url; ?>">
<tr tabindex="0" data-href="<?= $url; ?>">
<td data-label="<?= $this->getHtml('Type') ?>"><a href="<?= $url; ?>"><i class="fa fa-<?= $this->printHtml($icon); ?>"></i></a>
<td data-label="<?= $this->getHtml('Name') ?>"><a href="<?= $url; ?>"><?= $this->printHtml(
$value->getExtension() !== 'collection' ? $value->getName() . '.' . $value->getExtension() : $value->getName()); ?></a>