Skip to content

Commit

Permalink
table layout selector #376
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rello
Rello committed Feb 21, 2024
1 parent 0c53748 commit 1db66e3
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 65 deletions.
8 changes: 7 additions & 1 deletion css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -495,6 +495,11 @@ table.dataTable tbody tr {
filter: var(--background-invert-if-dark);
}

.icon-analytics-tableOptions {
background-image: url(../img/tableOptions.svg);
filter: var(--background-invert-if-dark);
}

.filterVisualizationItem {
background-color: var(--color-background-dark);
padding: 5px;
Expand Down Expand Up @@ -709,7 +714,8 @@ table.dataTable tbody tr {
grid-template-areas:
"dummy columns"
"rows measures"
"dummy2 totals";
"dummy2 totals"
"hidden hidden";
grid-template-columns: 1fr 2fr;
grid-template-rows: auto; /* Define the height for rows and measures */
gap: 10px;
Expand Down
7 changes: 7 additions & 0 deletions img/tableOptions.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
84 changes: 30 additions & 54 deletions js/filter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,54 +293,25 @@ OCA.Analytics.Filter = {
OCA.Analytics.Filter.processTableOptionsDialog
);

/* // Total row setting
(tableOptions.footer ? option1 : option2).selected = true;
*/

let layoutRaw = '<div class="tableOptionsLayout">\n' +
'<div class="dummy"></div>' +
'<div class="dummy2"></div>' +
'<div id="tableOptionsLayoutRows">\n' +
' <p>Rows</p>\n' +
' <div id="rows" class="columnSection"></div>\n' +
' </div>\n' +
' <div id="tableOptionsLayoutColumns">\n' +
' <p>Columns</p>\n' +
' <div id="columns" class="columnSection"></div>\n' +
' </div>\n' +
' <div id="tableOptionsLayoutMeasures">\n' +
' <p>Measures</p>\n' +
' <div id="measures" class="columnSection"></div>\n' +
' </div>\n' +
' <div id="tableOptionsLayoutTotals">\n' +
' <p>Show column totals</p>\n' +
' <div id="totalsSwitch">' +
' <label class="toggle-option">\n' +
' <input type="radio" name="totalOption" value="true" checked> Yes\n' +
' </label>\n' +
' <label class="toggle-option">\n' +
' <input type="radio" name="totalOption" value="false"> No\n' +
' </label></div>\n' +
' </div>\n' +
'</div>';

let parser = new DOMParser();
let layout = parser.parseFromString(layoutRaw, 'text/html');
let container = layout.querySelector('.tableOptionsLayout');

// add the final content to the modal
let content = document.createDocumentFragment();
content.appendChild(container.cloneNode(true)); // Clone the container with event listeners
// clone the DOM template
let container = document.getElementById('templateTableOptions').content;
container = document.importNode(container, true);

// Attach event listeners programmatically
content.querySelectorAll('.columnSection').forEach(section => {
container.querySelectorAll('.columnSection').forEach(section => {
section.addEventListener('drop', OCA.Analytics.Filter.Drag.drop);
section.addEventListener('dragover', OCA.Analytics.Filter.Drag.allowDrop);
});

if (tableOptions && tableOptions.footer) {
container.querySelector('input[name="totalOption"][value="true"]').checked = true;
} else {
container.querySelector('input[name="totalOption"][value="false"]').checked = true;
}

OCA.Analytics.Notification.htmlDialogUpdate(
content,
t('analytics', 'The table can be customized by selecting the rows and columns. <br>If a classic list view is required, all fields need to be placed in the rows section.')
container,
t('analytics', 'The table can be customized by positioning the rows and columns. <br>If a classic list view is required, all fields need to be placed in the rows section.')
);

OCA.Analytics.Filter.Drag.initialize();
Expand All @@ -350,27 +321,23 @@ OCA.Analytics.Filter = {
let tableOptions;
try {
tableOptions = JSON.parse(OCA.Analytics.currentReportData.options.tableoptions);
if (tableOptions === null) {
tableOptions = {};
}
} catch (e) {
tableOptions = [];
tableOptions = {};
}

let tableOptionTotalRow;
let radios = document.getElementsByName('totalOption');
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
tableOptionTotalRow = radios[i].value;
}
}
const selectedRadio = document.querySelector('input[name="totalOption"]:checked');
const tableOptionTotalRow = selectedRadio ? selectedRadio.value : null;

//let tableOptionTotalRow = document.getElementById('tableOptionTotalRow').value;
if (tableOptionTotalRow === 'true') {
tableOptions.footer = true;
} else {
} else if (tableOptions) {
delete tableOptions.footer;
}

let layout = {};

document.querySelectorAll('.columnSection').forEach(function (section) {
var sectionId = section.id;
// Initialize the layout[sectionId] as an empty array if undefined
Expand All @@ -384,7 +351,16 @@ OCA.Analytics.Filter = {
}
});

tableOptions.layout = layout;
const isSequential = (arr) => arr.every((val, i, array) => i === 0 || (val === array[i - 1] + 1));
if (layout.columns.length === 0 && layout.measures.length === 0 && layout.hidden.length === 0) {
if (!isSequential(layout.rows)) {
tableOptions.layout = layout;
} else if (tableOptions && tableOptions.layout) {
delete tableOptions.layout;
}
} else {
tableOptions.layout = layout;
}

OCA.Analytics.currentReportData.options.tableoptions = JSON.stringify(tableOptions);
OCA.Analytics.unsavedFilters = true;
Expand Down Expand Up @@ -735,7 +711,7 @@ OCA.Analytics.Filter.Drag = {
const createPlaceholder = () => {
let placeholderDiv = document.createElement('div');
placeholderDiv.className = 'dragAndDropPlaceholder';
placeholderDiv.textContent = 'Please drag content here';
placeholderDiv.textContent = t('analytics', 'Drag fields here');
return placeholderDiv;
};

Expand Down
2 changes: 1 addition & 1 deletion templates/part.menu.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
</li>
<li>
<button id="reportMenuTableOptions">
<span class="icon-analytics-chart-options"></span>
<span class="icon-analytics-tableOptions"></span>
<span><?php p($l->t('Table options')); ?></span>
</button>
</li>
Expand Down
59 changes: 50 additions & 9 deletions templates/part.templates.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,13 @@ class="sidebarPointer"><?php p($l->t('Visualization')); ?></h3>
p($l->t('Bar')); ?></option>
<option value="columnSt">&nbsp;<?php // TRANSLATORS Short description for a 'Stacked bar Chart'
p($l->t('Bar - Stacked')); ?></option>
<option value="columnSt100">&nbsp;<?php // TRANSLATORS Short description for a 'Stacked bar Chart with 100% relations'
<option value="columnSt100">
&nbsp;<?php // TRANSLATORS Short description for a 'Stacked bar Chart with 100% relations'
p($l->t('Bar - Stacked 100%%')); ?></option>
<option value="area"><?php // TRANSLATORS Short description for an 'Area Chart'
<option value="area"><?php // TRANSLATORS Short description for an 'Area Chart'
p($l->t('Area')); ?></option>
<option value="areaSt100">&nbsp;<?php // TRANSLATORS Short description for an 'Area Chart with 100% relations'
<option value="areaSt100">
&nbsp;<?php // TRANSLATORS Short description for an 'Area Chart with 100% relations'
p($l->t('Area - 100%%')); ?></option>
<option value="doughnut"><?php // TRANSLATORS Short description for a 'Doughnut Chart'
p($l->t('Doughnut')); ?></option>
Expand Down Expand Up @@ -215,15 +217,17 @@ class="sidebarPointer"><?php p($l->t('Manual entry')); ?></h3></div>
<div style="display: table-row;">
<div id="DataTextDimension1"
style="display: table-cell; width: 100%;"><?php p($l->t('Object')); ?></div>
<input style="display: table-cell;" class="sidebarInput" id="DataDimension1" autocomplete="off" data-dropDownListIndex="0">
<input style="display: table-cell;" class="sidebarInput" id="DataDimension1" autocomplete="off"
data-dropDownListIndex="0">
<div style="display: table-cell;">
<a id="sidebarDataDimension1Hint" title="<?php p($l->t('Variables')); ?>">
<div class="icon-info" style="opacity: 0.5;padding: 0 10px;"></div>
</a></div>
</div>
<div style="display: table-row;">
<div id="DataTextDimension2" style="display: table-cell; width: 120px;"><?php p($l->t('Date')); ?></div>
<input style="display: table-cell;" class="sidebarInput" id="DataDimension2" autocomplete="off" data-dropDownListIndex="1">
<input style="display: table-cell;" class="sidebarInput" id="DataDimension2" autocomplete="off"
data-dropDownListIndex="1">
<div style="display: table-cell;">
<a id="sidebarDataDimension2Hint" title="<?php p($l->t('Variables')); ?>">
<div class="icon-info" style="opacity: 0.5;padding: 0 10px;"></div>
Expand Down Expand Up @@ -293,7 +297,8 @@ class="sidebarPointer"><?php p($l->t('Data load')); ?></h3></div>
style="display: table-cell; width: 100%;"><?php p($l->t('Object')); ?></div>
<div style="display: table-cell;">
<input id="sidebarThresholdDimension1" class="sidebarInput"
placeholder="<?php p($l->t('single value or *')); ?>" autocomplete="off" data-dropDownListIndex="0"></div>
placeholder="<?php p($l->t('single value or *')); ?>" autocomplete="off"
data-dropDownListIndex="0"></div>
<div style="display: table-cell;">
<a id="sidebarThresholdHint" title="<?php p($l->t('Variables')); ?>">
<div class="icon-info" style="opacity: 0.5;padding: 0 10px;"></div>
Expand Down Expand Up @@ -418,9 +423,12 @@ class="sidebarPointer"><?php p($l->t('Data load')); ?></h3></div>
</div>
</div>
<div id="dataloadDetailButtons" hidden>
<button id="dataloadDeleteButton" style="padding: 15px;" title="<?php p($l->t('Delete')); ?>" class="icon-delete"></button>
<button id="dataloadCopyButton" style="padding: 15px;" title="<?php p($l->t('Copy')); ?>" class="icon-analytics-copy"></button>
<button id="dataloadUpdateButton" style="padding: 15px;" title="<?php p($l->t('Update')); ?>" class="icon-checkmark"></button>
<button id="dataloadDeleteButton" style="padding: 15px;" title="<?php p($l->t('Delete')); ?>"
class="icon-delete"></button>
<button id="dataloadCopyButton" style="padding: 15px;" title="<?php p($l->t('Copy')); ?>"
class="icon-analytics-copy"></button>
<button id="dataloadUpdateButton" style="padding: 15px;" title="<?php p($l->t('Update')); ?>"
class="icon-checkmark"></button>
</div>
</div>
</div>
Expand Down Expand Up @@ -601,4 +609,37 @@ class="icon-confirm share-pass-submit"
</div>
</span>
</li>
</template>

<template id="templateTableOptions">
<div class="tableOptionsLayout">
<div class="dummy"></div>
<div class="dummy2"></div>
<div id="tableOptionsLayoutRows">
<p><?php p($l->t('Rows')); ?></p>
<div id="rows" class="columnSection"></div>
</div>
<div id="tableOptionsLayoutColumns">
<p><?php p($l->t('Columns')); ?></p>
<div id="columns" class="columnSection"></div>
</div>
<div id="tableOptionsLayoutMeasures">
<p><?php p($l->t('Measures')); ?></p>
<div id="measures" class="columnSection"></div>
</div>
<div id="tableOptionsLayoutTotals">
<p><?php p($l->t('Show totals')); ?></p>
<div id="totalsSwitch">
<label class="toggle-option">
<input type="radio" name="totalOption" value="true" checked><?php p($l->t('Yes')); ?>
</label>
<label class="toggle-option">
<input type="radio" name="totalOption" value="false"><?php p($l->t('No')); ?>
</label></div>
</div>
<div id="tableOptionsLayoutAvailable">
<p><?php p($l->t('Not required')); ?></p>
<div id="hidden" class="columnSection"></div>
</div>
</div>
</template>

0 comments on commit 1db66e3

Please sign in to comment.