Commit 66b5be61 authored by Andreas Fernandez's avatar Andreas Fernandez Committed by Wouter Wolters
Browse files

[TASK] Record List: Change toggle state with AJAX

The tables in the Record List are now toggled by an AJAX call.

Resolves: #69446
Releases: master
Change-Id: I507e0945dc3dc8e8658ae769afedcb9d64a92d26
Reviewed-on: http://review.typo3.org/42952

Reviewed-by: Alexander Opitz's avatarAlexander Opitz <opitz.alexander@googlemail.com>
Tested-by: Alexander Opitz's avatarAlexander Opitz <opitz.alexander@googlemail.com>
Reviewed-by: Wouter Wolters's avatarWouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters's avatarWouter Wolters <typo3@wouterwolters.nl>
parent 415c203d
......@@ -193,6 +193,7 @@ class RecordList {
$this->pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
$this->pageRenderer->loadJquery();
$this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Recordlist/FieldSelectBox');
$this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Recordlist/Recordlist');
}
/**
......
......@@ -503,9 +503,8 @@ class DatabaseRecordList extends AbstractDatabaseRecordList {
// If the count query returned any number of records, we perform the real query,
// selecting records.
if ($this->totalItems) {
// Fetch records only if not in single table mode or if in multi table mode and
// not collapsed
if ($listOnlyInSingleTableMode || !$this->table && $tableCollapsed) {
// Fetch records only if not in single table mode
if ($listOnlyInSingleTableMode) {
$dbCount = $this->totalItems;
} else {
// Set the showLimit to the number of records when outputting as CSV
......@@ -547,14 +546,13 @@ class DatabaseRecordList extends AbstractDatabaseRecordList {
$icon = $tableCollapsed
? IconUtility::getSpriteIcon('actions-view-list-expand', array('class' => 'collapseIcon'))
: IconUtility::getSpriteIcon('actions-view-list-collapse', array('class' => 'collapseIcon'));
$collapseIcon = '<a href="' . $href . '" title="' . $title . '" class="pull-right">' . $icon . '</a>';
$collapseIcon = '<a href="' . $href . '" title="' . $title . '" class="pull-right t3js-toggle-recordlist" data-table="' . htmlspecialchars($table) . '" data-toggle="collapse" data-target="#recordlist-' . htmlspecialchars($table) . '">' . $icon . '</a>';
}
$tableHeader .= $theData[$titleCol] . $collapseIcon;
}
// Render table rows only if in multi table view and not collapsed or if in
// single table view
// Render table rows only if in multi table view or if in single table view
$rowOutput = '';
if (!$listOnlyInSingleTableMode && (!$tableCollapsed || $this->table)) {
if (!$listOnlyInSingleTableMode || $this->table) {
// Fixing an order table for sortby tables
$this->currentTable = array();
$currentIdList = array();
......@@ -654,6 +652,10 @@ class DatabaseRecordList extends AbstractDatabaseRecordList {
// The header row for the table is now created:
$out .= $this->renderListHeader($table, $currentIdList);
}
$collapseClass = $tableCollapsed && !$this->table ? 'collapse' : 'collapse in';
$dataState = $tableCollapsed && !$this->table ? 'collapsed' : 'expanded';
// The list of records is added after the header:
$out .= $rowOutput;
// ... and it is all wrapped in a table:
......@@ -668,7 +670,7 @@ class DatabaseRecordList extends AbstractDatabaseRecordList {
<div class="panel-heading">
' . $tableHeader . '
</div>
<div class="table-fit">
<div class="table-fit ' . $collapseClass . '" id="recordlist-' . htmlspecialchars($table) . '" data-state="' . $dataState . '">
<table data-table="' . htmlspecialchars($table) . '" class="table table-striped table-hover' . ($listOnlyInSingleTableMode ? ' typo3-dblist-overview' : '') . '">
' . $out . '
</table>
......
/*
* This file is part of the TYPO3 CMS project.
*
* It is free software; you can redistribute it and/or modify it under
* the terms of the GNU General Public License, either version 2
* of the License, or any later version.
*
* For the full copyright and license information, please read the
* LICENSE.txt file that was distributed with this source code.
*
* The TYPO3 project - inspiring people to share!
*/
/**
* Usability improvements for the record list
*/
define('TYPO3/CMS/Recordlist/Recordlist', ['jquery', 'TYPO3/CMS/Backend/Storage'], function($, Storage) {
var Recordlist = {
identifier: {
toggle: '.t3js-toggle-recordlist'
},
classes: {
toggleIconState: {
collapsed: 'fa-chevron-down',
expanded: 'fa-chevron-up'
}
}
};
Recordlist.initialize = function() {
$(document).on('click', Recordlist.identifier.toggle, function(e) {
e.preventDefault();
var $me = $(this),
table = $me.data('table'),
$target = $($me.data('target')),
isExpanded = $target.data('state') === 'expanded';
$me.find('.t3-icon').toggleClass(Recordlist.classes.toggleIconState.collapsed).toggleClass(Recordlist.classes.toggleIconState.expanded);
// Store collapse state in UC
var storedModuleDataList = {};
if (Storage.Persistent.isset('moduleData.list')) {
storedModuleDataList = Storage.Persistent.get('moduleData.list');
}
var collapseConfig = {};
collapseConfig[table] = isExpanded ? 1 : 0;
$.extend(true, storedModuleDataList, collapseConfig);
Storage.Persistent.set('moduleData.list', storedModuleDataList).done(function() {
$target.data('state', isExpanded ? 'collapsed' : 'expanded');
});
});
};
$(document).ready(function() {
Recordlist.initialize();
});
});
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment