Skip to content

Commit

Permalink
[TASK] Update Datatables
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjaminkott
benjaminkott committed May 23, 2023
1 parent ef00e7a commit 4e606be
Show file tree
Hide file tree
Showing 17 changed files with 4,337 additions and 3,054 deletions.
87 changes: 50 additions & 37 deletions Resources/Private/JavaScript/backend/Datatables.js
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,64 @@
/**
* Module: TYPO3/CMS/Blog/DataTables
*/
import 'datatables.net-bs/css/dataTables.bootstrap.min.css';

import $ from 'jquery';
import 'datatables.net';
import 'datatables.net-bs';

$(function() {
$('.dataTables').DataTable({
"columns": function () {
return $(this).data('columns')
},
"pageLength": 25,
"initComplete": function () {
import 'datatables.net-bs5/css/dataTables.bootstrap5.min.css';
import '../../Scss/backend/datatables.scss'

import DataTable from 'datatables.net-bs5';

const datatables = document.querySelectorAll('.dataTables');
datatables.forEach((datatable) => {

const columnConfig = JSON.parse(datatable.dataset.columns);
new DataTable(datatable, {
dom:
"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<'table-fit'tr>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
pageLength: 25,
columns: columnConfig,
initComplete: function () {
this.api().columns().every(function () {
var column = this;
if ($(column.header()).data('filter') === true) {
var select = $('<select><option value="">' + $(column.header()).text() + '</option></select>')
.appendTo($(column.header()).empty())
.on('click', function (e) {
e.stopPropagation();
})
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column.search(val ? val : '', true, false).draw();
});

var values = [];
column.nodes().each(function (content) {
var filter = $(content).data('filter');
const column = this;
if (column.header().dataset.filter === 'true') {

const select = document.createElement('select');
select.classList.add('form-select', 'form-select-sm');
select.addEventListener('click', (event) => {
event.stopPropagation();
});
select.addEventListener('change', (event) => {
const element = event.target;
const value = element.value;
column.search(value ? value : '', true, false).draw();
});

const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.innerText = column.header().innerText;
select.appendChild(defaultOption);

let values = [];
column.nodes().each((content) => {
const filter = content.dataset.filter;
if (typeof filter !== "undefined") {
var entries = filter.split(',');
entries.forEach(function (entry) {
entries.forEach((entry) => {
if (entry.trim() !== '') values.push(entry.trim());
});
}
});
values = values.filter(function (value, index, self) {
return self.indexOf(value) === index;
});
$(values).sort().each(function () {
var value = this;
select.append('<option value="' + value + '">' + value + '</option>')
values = values.filter((value, index, array) => array.indexOf(value) === index);
values.sort().forEach((value) => {
const option = document.createElement('option');
option.value = value;
option.innerText = value;
select.append(option);
});

column.header().innerHTML = '';
column.header().append(select);

}
});
}
Expand Down
4 changes: 2 additions & 2 deletions Resources/Private/Partials/Post/Meta.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
<f:if condition="{post.categories}">
<span class="sep">·</span>
<f:for each="{post.categories}" as="postCategory">
<blogvh:link.category category="{postCategory}" class="label label-default label-category" />
<blogvh:link.category category="{postCategory}" class="badge badge-default badge-category" />
</f:for>
</f:if>
<f:if condition="{post.tags}">
<span class="sep">·</span>
<span itemprop="keywords">
<f:for each="{post.tags}" as="postTag">
<blogvh:link.tag tag="{postTag}" class="label label-default label-tag">
<blogvh:link.tag tag="{postTag}" class="badge badge-default badge-tag">
<span class="blogicon"><f:render partial="General/BlogIcons" section="Tag" optional="true" /></span>
<span>{postTag.title}</span>
</blogvh:link.tag>
Expand Down
4 changes: 4 additions & 0 deletions Resources/Private/Scss/backend/datatables.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.table.dataTable {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
6 changes: 3 additions & 3 deletions Resources/Private/Templates/Backend/Comments.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ <h1><f:translate key="backend.headline.comments" /></h1>
<td class="actions">
<f:render section="Actions" arguments="{_all}" />
</td>
<td data-search="{comment.name}" data-filter="{comment.name}">
<td data-order="{comment.name}" data-search="{comment.name}" data-filter="{comment.name}">
{comment.name}
</td>
<td>{comment.comment}</td>
<td data-search="{comment.post.title}" data-filter="{comment.post.title}">
<td data-order="{comment.comment}">{comment.comment}</td>
<td data-order="{comment.post.title}" data-search="{comment.post.title}" data-filter="{comment.post.title}">
<f:if condition="{comment.post}">
<f:then><blogvh:link.be.post post="{comment.post}" /></f:then>
<f:else><f:translate key="backend.message.nopost" /></f:else>
Expand Down
14 changes: 7 additions & 7 deletions Resources/Private/Templates/Backend/Posts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h1><f:translate key="backend.headline.posts" /></h1>
<f:for each="{posts}" as="post">
<tr>

<td class="nowrap" data-search="{post.title}" data-filter="{post.title}">
<td class="nowrap" data-order="{post.title}" data-search="{post.title}" data-filter="{post.title}">
<blogvh:link.be.post post="{post}">
<core:iconForRecord table="pages" row="{post.asArray}" />
{post.title}
Expand All @@ -32,7 +32,7 @@ <h1><f:translate key="backend.headline.posts" /></h1>

<f:variable name="hiddenString" value="{f:if(condition: post.hidden, then: 'yes', else: 'no')}" />
<f:variable name="hiddenString" value="{f:translate(key: 'backend.table.hidden.{hiddenString}')}" />
<td class="nowrap" data-search="{hiddenString}" data-filter="{hiddenString}">
<td class="nowrap" data-order="{hiddenString}" data-search="{hiddenString}" data-filter="{hiddenString}">
{hiddenString}
</td>

Expand All @@ -45,7 +45,7 @@ <h1><f:translate key="backend.headline.posts" /></h1>
</f:if>
</f:for>
</f:if>
<td class="nowrap" data-search="{authorString}" data-filter="{authorString}">
<td class="nowrap" data-order="{authorString}" data-search="{authorString}" data-filter="{authorString}">
<f:for each="{post.authors}" as="author" iteration="iteration">
<blogvh:link.be.author author="{author}" /><f:if condition="{iteration.isLast}"><f:else>, </f:else></f:if>
</f:for>
Expand All @@ -60,9 +60,9 @@ <h1><f:translate key="backend.headline.posts" /></h1>
</f:if>
</f:for>
</f:if>
<td data-search="{categoryString}" data-filter="{categoryString}">
<td data-order="{categoryString}" data-search="{categoryString}" data-filter="{categoryString}">
<f:for each="{post.categories}" as="category" iteration="iteration">
<blogvh:link.be.category category="{category}" class="label label-info" />
<blogvh:link.be.category category="{category}" class="badge badge-info" />
</f:for>
</td>

Expand All @@ -75,9 +75,9 @@ <h1><f:translate key="backend.headline.posts" /></h1>
</f:if>
</f:for>
</f:if>
<td data-search="{tagString}" data-filter="{tagString}">
<td data-order="{tagString}" data-search="{tagString}" data-filter="{tagString}">
<f:for each="{post.tags}" as="tag" iteration="iteration">
<blogvh:link.be.tag tag="{tag}" class="label label-info" />
<blogvh:link.be.tag tag="{tag}" class="badge badge-info" />
</f:for>
</td>

Expand Down
2 changes: 1 addition & 1 deletion Resources/Private/Templates/Backend/SetupWizard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h1><f:translate key="backend.headline.setup_wizard" /></h1>
<tbody>
<f:for each="{blogSetups}" as="blog">
<tr>
<td class="col-title col-responsive nowrap">
<td data-order="{blog.path}" class="col-title col-responsive nowrap">
<a href="{be:moduleLink(route: 'web_list', arguments: '{id: blog.uid}')}">
<core:icon identifier="record-folder-contains-blog" />
{blog.path}
Expand Down
4 changes: 2 additions & 2 deletions Resources/Private/Templates/PageLayout/Header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ <h3 class="blog-pageheader-section-title"><f:translate key="pagelayout.section.t
<div class="blog-pageheader-section-content">
<ul class="blog-pageheader-list-inline">
<f:for each="{post.tags}" as="tag">
<li><span class="label label-info">{tag.title}</span></li>
<li><span class="badge badge-info">{tag.title}</span></li>
</f:for>
</ul>
</div>
Expand All @@ -71,7 +71,7 @@ <h3 class="blog-pageheader-section-title"><f:translate key="pagelayout.section.c
<div class="blog-pageheader-section-content">
<ul class="blog-pageheader-list-inline">
<f:for each="{post.categories}" as="category">
<li><span class="label label-info">{category.title}</span></li>
<li><span class="badge badge-info">{category.title}</span></li>
</f:for>
</ul>
</div>
Expand Down
Loading

0 comments on commit 4e606be

Please sign in to comment.