tildeverse
/
cryptpad
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor form results display 

* improve table component reusability for the rest of the platform
* display count of empty results at the top of each section
* remove unused styles
* fix incorrect methods for counting empty answers for multi-checkbox questions
This commit is contained in:
ansuz 2021-08-19 16:17:59 +05:30
parent 15b935eadc
commit e414524eab
3 changed files with 117 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
customize.dist/src/less2/include/charts.less
View File

@ -50,4 +50,56 @@
}
}
}
.cp-charts-cell {
border: 1px solid @cp_form-border;
display: table-cell;
padding: 5px 10px;
background: @cp_form-bg2;
}
.cp-form-results-type-radio {
.cp-form-results-type-multiradio-data {
display: flex;
flex-flow: column;
}
.cp-form-results-type-radio-data {
display: table-row;
border: 1px solid @cp_form-border;
& > span {
.cp-charts-cell();
}
}
}
.cp-charts.cp-bar-table, .cp-charts.cp-text-table {
display: table;
width: 100%;
.cp-charts-row {
display: table-row;
border: 1px solid @cp_form-border;
&.full {
display: flex;
flex-flow: column;
}
& > span {
.cp-charts-cell();
display: table-cell;
&.cp-value {
min-width: 200px;
}
&.cp-bar-container {
width: 99%;
padding: 0px;
position: relative;
.cp-bar {
position: absolute;
background: @cryptpad_color_brand;
height: 100%;
}
}
}
}
}
}

64
www/form/app-form.less
View File

@ -519,69 +519,9 @@
i { margin-right: 5px; }
background: fade(@cryptpad_text_col, 15%);
}
.cp-form-results-type-text {
max-height: 300px;
.cp-form-results-contained {
max-height: 350px; // enough for 10 table entries
overflow: auto;
.cp-form-results-type-text-data {
padding: 5px 10px;
background: @cp_form-bg2;
&:not(:last-child) { margin-bottom: 1px; }
}
}
.cp-form-results-type-textarea-data {
white-space: pre-wrap;
padding: 5px 10px;
background: @cp_form-bg2;
&:not(:last-child) { margin-bottom: 1px; }
}
.cp-form-results-cell() {
border: 1px solid @cp_form-border;
display: table-cell;
padding: 5px 10px;
background: @cp_form-bg2;
}
.cp-form-results-type-multiradio-data {
.cp-mr-q {
font-weight: bold;
padding: 5px 10px;
.cp-form-results-cell();
}
&:not(:first-child) {
.cp-mr-q {
margin-top: 15px;
}
}
}
.cp-form-results-type-radio {
display: table;
width: 100%;
.cp-form-results-type-multiradio-data {
display: flex;
flex-flow: column;
}
.cp-form-results-type-radio-data {
display: table-row;
border: 1px solid @cp_form-border;
& > span {
.cp-form-results-cell();
&.cp-value {
min-width: 200px;
}
&.cp-bar-container {
width: 99%;
padding: 0px;
position: relative;
.cp-bar {
position: absolute;
background: @cryptpad_color_brand;
height: 100%;
}
}
}
}
}
.cp-form-individual {
background: @cp_form-bg1;

120
www/form/inner.js
View File

@ -803,10 +803,31 @@ define([
return total;
};
var getEmpty = function (empty) { // TODO don't include this in the scrollable area
if (empty) {
return UI.setHTML(h('div.cp-form-results-type-text-empty'), Messages._getKey('form_notAnswered', [empty]));
}
var multiAnswerSubHeading = function (content) {
return h('span.cp-charts-row', h('td.cp-charts-cell', {
colspan: 3,
style: 'font-weight: bold;',
}, content));
};
var getEmpty = function (empty) {
if (!empty) { return; }
var msg = UI.setHTML(h('span.cp-form-results-empty-text'), Messages._getKey('form_notAnswered', [empty]));
return multiAnswerSubHeading(msg);
};
var barGraphic = function (itemScale) {
return h('span.cp-bar-container', h('div.cp-bar', {
style: 'width: ' + (itemScale * 100) + '%',
}, ' '));
};
var barRow = function (value, count, max, showBar) {
return h('div.cp-charts-row', [
h('span.cp-value', value),
h('span.cp-count', count),
showBar? barGraphic((count / max)): undefined,
]);
};
var findItem = function (items, uid) {
@ -957,27 +978,21 @@ define([
return Array.isArray(A)? Math.max.apply(null, A): NaN;
};
var barGraphic = function (itemScale) {
return h('span.cp-bar-container', h('div.cp-bar', {
style: 'width: ' + (itemScale * 100) + '%',
}, ' '));
};
var renderTally = function (tally, empty, showBar) {
var rows = [];
var counts = Util.values(tally);
var max = arrayMax(counts);
if (empty) { rows.push(getEmpty(empty)); }
Object.keys(tally).forEach(function (value) {
var itemCount = tally[value];
var itemScale = (itemCount / max);
rows.push(h('div.cp-form-results-type-radio-data', [
rows.push(h('div.cp-charts-row', [
h('span.cp-value', value),
h('span.cp-count', itemCount),
showBar? barGraphic(itemScale): undefined,
]));
});
if (empty) { rows.push(getEmpty(empty)); }
return rows;
};
@ -1015,34 +1030,35 @@ define([
reset: function () { $tag.val(''); }
};
},
printResults: function (answers, uid) {
printResults: function (answers, uid) { // results text
var results = [];
var empty = 0;
var tally = {};
var isEmpty = function (answer) {
console.error("EMPTY?", JSON.stringify(answer));
return !answer || !answer.trim();
};
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
if (!answer || !answer.trim()) { return empty++; }
if (isEmpty(answer)) { return empty++; }
Util.inc(tally, answer);
});
//var counts = Util.values(tally);
//var max = arrayMax(counts);
//if (max < 2) { // there are no duplicates, so just return text
results.push(getEmpty(empty));
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
if (!answer || !answer.trim()) { return empty++; }
results.push(h('div.cp-form-results-type-text-data', answer));
results.push(h('div.cp-charts-row', h('span.cp-value', answer)));
});
results.push(getEmpty(empty));
return h('div.cp-form-results-type-text', results);
return h('div.cp-form-results-contained', h('div.cp-charts.cp-text-table', results));
//}
/*
var rendered = renderTally(tally, empty);
return h('div.cp-form-results-type-text', rendered);
*/
},
icon: h('i.cptools.cptools-form-text')
},
@ -1104,11 +1120,11 @@ define([
var obj = answers[author];
var answer = obj.msg[uid];
if (!answer || !answer.trim()) { return empty++; }
results.push(h('div.cp-form-results-type-textarea-data', answer));
results.push(h('div.cp-charts-row', h('span.cp-value', answer)));
});
results.push(getEmpty(empty));
results.unshift(getEmpty(empty));
return h('div.cp-form-results-type-text', results);
return h('div.cp-form-results-contained', h('div.cp-charts.cp-text-table', results));
},
icon: h('i.cptools.cptools-form-paragraph')
},
@ -1179,7 +1195,7 @@ define([
});
var rendered = renderTally(count, empty, showBars);
return h('div.cp-form-results-type-radio', rendered);
return h('div.cp-charts.cp-bar-table', rendered);
},
icon: h('i.cptools.cptools-form-list-radio')
},
@ -1285,26 +1301,17 @@ define([
max = arrayMax(counts);
});
results.push(getEmpty(empty));
count_keys.forEach(function (q_uid) {
var q = findItem(opts.items, q_uid);
var c = count[q_uid];
var values = Object.keys(c).map(function (res) {
var itemCount = c[res];
return h('div.cp-form-results-type-radio-data', [
h('span.cp-value', res),
h('span.cp-count', itemCount),
showBars? barGraphic((itemCount / max)): undefined,
]);
results.push(multiAnswerSubHeading(q));
Object.keys(c).forEach(function (res) {
results.push(barRow(res, c[res], max, showBars));
});
results.push(h('div.cp-form-results-type-multiradio-data', [
h('span.cp-mr-q', q),
h('span.cp-mr-value', values)
]));
});
results.push(getEmpty(empty));
return h('div.cp-form-results-type-radio', results);
return h('div.cp-charts.cp-bar-table', results);
},
exportCSV: function (answer, form) {
var opts = form.opts || {};
@ -1401,7 +1408,7 @@ define([
});
var rendered = renderTally(count, empty, showBars);
return h('div.cp-form-results-type-radio', rendered);
return h('div.cp-charts.cp-bar-table', rendered);
},
icon: h('i.cptools.cptools-form-list-check')
},
@ -1498,10 +1505,19 @@ define([
var empty = 0;
var count = {};
var showBars = Boolean(content);
var isEmpty = function (answer) {
if (!answer) { return true; }
return !Object.keys(answer).some(function (k) {
var A = answer[k];
return Array.isArray(A) && A.length;
});
};
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
if (!answer || !Object.keys(answer).length) { return empty++; }
if (isEmpty(answer)) { return empty++; }
Object.keys(answer).forEach(function (q_uid) {
var c = count[q_uid] = count[q_uid] || {};
var res = answer[q_uid];
@ -1520,26 +1536,17 @@ define([
max = arrayMax(counts);
});
results.push(getEmpty(empty));
count_keys.forEach(function (q_uid) {
var q = findItem(opts.items, q_uid);
var c = count[q_uid];
var values = Object.keys(c).map(function (res) {
var val = c[res];
return h('div.cp-form-results-type-radio-data', [
h('span.cp-value', res),
h('span.cp-count', val),
showBars? barGraphic(val / max) : undefined,
]);
results.push(multiAnswerSubHeading(q));
Object.keys(c).forEach(function (res) {
results.push(barRow(res, c[res], max, showBars));
});
results.push(h('div.cp-form-results-type-multiradio-data', [
h('span.cp-mr-q', q),
h('span.cp-mr-value', values),
]));
});
results.push(getEmpty(empty));
return h('div.cp-form-results-type-radio', results);
return h('div.cp-charts.cp-bar-table', results);
},
exportCSV: function (answer, form) {
var opts = form.opts || {};
@ -1658,7 +1665,6 @@ define([
// results sort
var opts = form[uid].opts || TYPES.sort.defaultOpts;
var l = (opts.values || []).length;
//var results = [];
var empty = 0;
var count = {};
var showBars = Boolean(content);
@ -1673,7 +1679,7 @@ define([
});
var rendered = renderTally(count, empty, showBars);
return h('div.cp-form-results-type-radio', rendered);
return h('div.cp-charts.cp-bar-table', rendered);
},
icon: h('i.cptools.cptools-form-list-ordered')
},