Skip to content

Commit ccecad1

Browse files
Erik2609Erik2609
committed
add csv options
1 parent 23bea47 commit ccecad1

File tree

3 files changed

+65
-19
lines changed

3 files changed

+65
-19
lines changed

‎layouts/shortcodes/dynamic_form_engine.html‎

Lines changed: 59 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,10 @@ <h3>{{.title}}</h3>
4141
{{ end }}
4242

4343

44-
<div class="score-card__question" {{if $visibilityCondition}}data-show-when="{{$visibilityCondition}}" {{end}} {{if .isOutput }} data-is-output="true" {{end}}>
44+
<div class="score-card__question" {{if $visibilityCondition}}data-show-when="{{$visibilityCondition}}" {{end}}
45+
{{if .isOutput }} data-is-output="true" {{end}}>
4546
<h4>
46-
{{ .title }}
47+
<div class="csv-title d-inline">{{ .title }}</div>
4748
{{if .required}}*{{end}}
4849
{{ if .tooltip }}
4950
<button class="remove-on-pdf information-button mt-0" data-toggle="tooltip" data-placement="right"
@@ -53,7 +54,7 @@ <h4>
5354
{{ end }}
5455
</h4>
5556

56-
<p>
57+
<p class="csv-explanation">
5758
{{ .content | markdownify }}
5859
</p>
5960

@@ -98,8 +99,8 @@ <h6 class="d-inline mb-0 ml-2">{{ .title | markdownify }}</h6>
9899
{{ range .options }}
99100
<div class="col-md-4 col-sm-12">
100101
<label>
101-
<input type="radio" id="{{$input.identifier}}_{{.value}}" name={{$input.identifier}} class="card-input-element" value={{.value}} {{if
102-
$input.required}} required {{end}} />
102+
<input type="radio" id="{{$input.identifier}}_{{.value}}" name={{$input.identifier}}
103+
class="card-input-element" value={{.value}} {{if $input.required}} required {{end}} />
103104
<div class="card card-input">
104105
<div class="card-body {{ if not .content }}d-flex justify-content-center{{end}}">
105106
<h6 class="card-title">{{.title}}</h6>
@@ -115,9 +116,9 @@ <h6 class="card-title">{{.title}}</h6>
115116
{{ range .options }}
116117
<div class="col-12">
117118
<label class="my-2">
118-
<input type="radio" id="{{$input.identifier}}_{{.value}}" name={{$input.identifier}} class="" value={{.value}} {{if
119-
$input.required}} required {{end}} />
120-
<h6 class="d-inline ml-1" >{{.title}}</h6>
119+
<input type="radio" id="{{$input.identifier}}_{{.value}}" name={{$input.identifier}} class=""
120+
value={{.value}} {{if $input.required}} required {{end}} />
121+
<h6 class="d-inline ml-1">{{.title}}</h6>
121122
{{ if .content }}
122123
<p class="mb-0">
123124
{{.content | markdownify}}
@@ -157,6 +158,9 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
157158
<button id="score-card-print-button" class="btn btn-primary remove-on-pdf"><i class="fas fa-print"></i>
158159
{{ .button_text | markdownify }}
159160
</button>
161+
<button id="score-card-csv-button" class="btn btn-primary remove-on-pdf"><i class="fas fa-file-excel"></i>
162+
{{ .button_text_csv | markdownify }}
163+
</button>
160164
</div>
161165
{{ end }}
162166
{{ end }}
@@ -176,12 +180,12 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
176180

177181
var calculateVisibleFields = function () {
178182

179-
{{if .complete_form_options.onlyShowWithOutput }}
183+
{{ if .complete_form_options.onlyShowWithOutput }}
180184
$('#{{.id}} .formSubmissionSection').addClass('d-none');
181-
{{end}}
185+
{{ end }}
182186
// this is what the data attribute looks like: data-show-when=="||&&data1==medium&&data2=medium||&&data1==low"
183187
// This field should be hidden when no input is selected, and shown if either data 1 and data 2 are medium or data 1 is low.
184-
$('.score-card__question').each(function () {
188+
$('#{{.id}} .score-card__question').each(function () {
185189
const showWhen = $(this).attr('data-show-when');
186190
// check if the attribute is there, otherwise always keep it as is.
187191
if (showWhen) {
@@ -207,14 +211,14 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
207211
}
208212

209213
// Check for radio button
210-
let input = document.querySelector(`.score-card__question:not(.d-none) input[name=${name}]:checked`);
214+
let input = document.querySelector(`#{{.id}} .score-card__question:not(.d-none) input[name=${name}]:checked`);
211215
// Check for checkbox
212216
if (!input) {
213-
input = document.querySelector(`.score-card__question:not(.d-none) input[id=${name}]:checked`);
217+
input = document.querySelector(`#{{.id}} .score-card__question:not(.d-none) input[id=${name}]:checked`);
214218
}
215-
if (!input
216-
|| (checkForEquals && !valuesAreEqual(input.value, value))
217-
|| (checkForUnequal && valuesAreEqual(input.value, value))) {
219+
if (!input
220+
|| (checkForEquals && !valuesAreEqual(input.value, value))
221+
|| (checkForUnequal && valuesAreEqual(input.value, value))) {
218222
andShow = false;
219223
}
220224
});
@@ -230,7 +234,7 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
230234
if ($(this).find('textarea').attr('data-required')) {
231235
$(this).find('textarea').prop('required', true);
232236
}
233-
if($(this).attr('data-is-output')) {
237+
if ($(this).attr('data-is-output')) {
234238
console.log('showing form submission section');
235239
$('#{{.id}} .formSubmissionSection').removeClass('d-none');
236240
}
@@ -264,7 +268,7 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
264268
})
265269

266270

267-
$('#score-card-print-button').click(function (event) {
271+
$('#{{.id}} #score-card-print-button').click(function (event) {
268272
event.preventDefault();
269273
window.html2canvas = html2canvas;
270274
var element = document.getElementById("{{.id}}");
@@ -288,6 +292,43 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
288292

289293
});
290294
});
295+
296+
$('#{{.id}} #score-card-csv-button').click(function (event) {
297+
event.preventDefault();
298+
const csv = [];
299+
csv.push(['Title/Question', 'Explanation', 'Input', 'Input explanation']);
300+
$('#{{.id}} .score-card__question:not(.d-none)').each(function () {
301+
const question = $(this);
302+
let title = question.find('.csv-title').text();
303+
let explanation = question.find('.csv-explanation').text();
304+
let input = question.find('input:checked').siblings('h6').text() || question.find('input').val() || question.find('textarea').val();
305+
let inputExplanation = question.find('input:checked').siblings('p').text() || question.find('input').siblings('p').text() || question.find('textarea').siblings('p').text();
306+
//exception for checkboxes
307+
if (question.find('input:checked').length > 1) {
308+
input = question.find('input:checked').map(function () {
309+
return $(this).siblings('h6').text();
310+
}).get().join('; ');
311+
312+
inputExplanation = question.find('input:checked').map(function () {
313+
return $(this).siblings('p').text();
314+
}).get().join('; ');
315+
}
316+
title = title?.replaceAll(',', ' ').replaceAll('\r\n', ' ')?.replaceAll('\n', ' ')?.replaceAll(' ', ' ')?.trim();
317+
explanation = explanation?.replaceAll(',', ' ').replaceAll('\r\n', ' ')?.replaceAll('\n', ' ')?.replaceAll(' ', ' ')?.trim();
318+
input = input?.replaceAll(',', ' ').replaceAll('\r\n', ' ')?.replaceAll('\n', ' ')?.replaceAll(' ', ' ')?.trim();
319+
inputExplanation = inputExplanation?.replaceAll(',', ' ').replaceAll('\r\n', ' ')?.replaceAll('\n', ' ')?.replaceAll(' ', ' ')?.trim();
320+
csv.push([title ?? '', explanation ?? '', input ?? '', inputExplanation ?? '']);
321+
});
322+
323+
const csvContent = "data:text/csv;charset=utf-8," + csv.map(e => e.join(",")).join("\n");
324+
const encodedUri = encodeURI(csvContent);
325+
const link = document.createElement("a");
326+
link.setAttribute("href", encodedUri);
327+
link.setAttribute("download", "{{.complete_form_options.file_name}}.csv");
328+
document.body.appendChild(link); // Required for FF
329+
330+
link.click(); // This will download the data file named "my_data.csv".
331+
})
291332
});
292333
</script>
293334

‎tina/collections/shared/page/building_blocks.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -429,6 +429,11 @@ const building_blocks: TinaField[] = [
429429
description: "",
430430
required: true,
431431
},
432+
{
433+
name: "button_text_csv",
434+
label: "Button text for CSV download",
435+
type: "string",
436+
},
432437
{
433438
name: "backend_link",
434439
label: "Back end link (Required if you want to submit the data)",

‎tina/tina-lock.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)