Smile-SA/elasticsuite

<?php
/**
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Smile ElasticSuite to newer
 * versions in the future.
 *
 * @category  Smile
 * @package   Smile\ElasticsuiteAnalytics
 * @author    Richard Bayet <richard.bayet@smile.fr>
 * @copyright 2020 Smile
 * @license   Open Software License ("OSL") v. 3.0
 */
?>

<?php
/**
 * @var Smile\ElasticsuiteAnalytics\Block\Adminhtml\Search\Usage\SearchTerms $block
 * @var \Magento\Framework\Escaper $escaper
 */
$maxVisibleTerms    = $block->getMaxVisibleTerms();
$termsData          = $block->getTermsData();
$visibleTermsData   = array_slice($termsData, 0, $maxVisibleTerms);
$hiddenTermsData    = array_slice($termsData, $maxVisibleTerms);
?>
<div class="dashboard-item" id="<?= $block->getJsId() ?>">
    <div class="dashboard-item-title">
        <span><?= $block->getTitle() ;?></span>
        <?php if ($block->hasHelp()) :?>
            <div class="admin__field-tooltip tooltip">
                <a href="#<?= $block->getJsId() ?>_help"
                   title="<?= $block->escapeHtml(__('What is this ?')) ?>" class="admin__field-tooltip-action action-help">
                    <span style="display: inline-block"><?= __('What is this ?') ?></span>
                </a>
            </div>
        <?php endif; ?>
    </div>
    <?php if ($block->hasHelp()) :?>
        <div class="dashboard-item-help dashboard-data" id="<?= $block->getJsId() ?>_help">
            <p><?= $block->getHelp() ?></p>
        </div>
    <?php endif; ?>
    <div class="dashboard-item-content">
        <table class="admin__table-primary dashboard-data terms-report">
            <thead>
            <tr>
                <th class="data-grid-th no-link col-search-query"><span><?= __('Term');?></span></th>
                <th class="data-grid-th no-link"><span><?= __('Sessions');?></span></th>
                <th class="data-grid-th no-link"><span><?= __('Visitors');?></span></th>
            </thead>
            <?php if (empty($termsData)) : ?>
                <tbody>
                <tr>
                    <td colspan="3" style="text-align:center; padding: 20px;">
                        <em><?= __('No data over the selected period.'); ?></em>
                    </td>
                </tr>
                </tbody>
            <?php else : ?>
                <tbody>
                <?php foreach ($visibleTermsData as $termData) : ?>
                    <tr>
                        <td class="col-search-query"><?php if ($termData['url']) : ?>
                                <a href=<?= $termData['url']; ?> target="_blank">
                                    <span title="<?= $escaper->escapeHtmlAttr($termData['term']); ?>"><?= $escaper->escapeHtml($termData['term']); ?></span>
                                </a>
                            <?php else : ?>
                                <span title="<?= $escaper->escapeHtmlAttr($termData['term']); ?>"><?= $escaper->escapeHtml($termData['term']); ?></span>
                            <?php endif; ?>
                        </td>
                        <td class="col-number"><?= $termData['sessions']; ?></td>
                        <td class="col-number"><?= $termData['visitors']; ?></td>
                    </tr>
                <?php endforeach; ?>
                </tbody>
                <tbody class="extra" id="<?php echo $block->getJsId() ?>_extra">
                <?php foreach ($hiddenTermsData as $termData) : ?>
                    <tr>
                        <td class="col-search-query"><?php if ($termData['url']) : ?>
                                <a href=<?= $termData['url']; ?> target="_blank">
                                    <span title="<?= $escaper->escapeHtmlAttr($termData['term']); ?>"><?= $escaper->escapeHtml($termData['term']); ?></span>
                                </a>
                            <?php else : ?>
                                <span title="<?= $escaper->escapeHtmlAttr($termData['term']); ?>"><?= $escaper->escapeHtml($termData['term']); ?></span>
                            <?php endif; ?>
                        </td>
                        <td class="col-number"><?= $termData['sessions']; ?></td>
                        <td class="col-number"><?= $termData['visitors']; ?></td>
                    </tr>
                <?php endforeach; ?>
                </tbody>
            <?php endif; ?>
            <?php if (!empty($hiddenTermsData)) : ?>
                <tfoot>
                <tr>
                    <td colspan="3" style="text-align:right; padding: 20px;">
                        <a href="javascript:void(0)" id="<?= $block->getJsId() ?>_toggle"><?= __('Show more...'); ?></a>
                    </td>
                </tr>
                </tfoot>
            <?php endif; ?>
        </table>
    </div>
</div>

<script>
    require([
        'jquery'
    ], function($){
        $(function() {
            $("#<?= $block->getJsId() ?> .action-help").on('click', function(event) {
                event.preventDefault();
                $("#<?= $block->getJsId() ?> .dashboard-item-help").slideToggle();
            });

            $("#<?= $block->getJsId() ?>_toggle").on('click', function() {
                if ($("#<?= $block->getJsId() ?>_extra").is(":hidden")) {
                    $(this).text('<?= $block->escapeJs(__('Show less...')) ?>');
                } else {
                    $(this).text('<?= $block->escapeJs(__('Show more...')) ?>');
                }
                $("#<?= $block->getJsId() ?>_extra").slideToggle();
                return false;
            });
        });
    });
</script>