Merge branch 'feature/visibilityconditions' into feature/structural_edits

Author: jfparie

layouts/shortcodes/dynamic_form_engine.html

@@ -41,9 +41,10 @@ <h3>{{.title}}</h3>
       {{ end }}
 
 
-      <div class="score-card__question" {{if $visibilityCondition}}data-show-when="{{$visibilityCondition}}" {{end}}>
+      <div class="score-card__question" {{if $visibilityCondition}}data-show-when="{{$visibilityCondition}}" {{end}}
+        {{if .isOutput }} data-is-output="true" {{end}}>
         <h4>
-          {{ .title }}
+          <div class="csv-title d-inline">{{ .title }}</div>
           {{if .required}}*{{end}}
           {{ if .tooltip }}
           <button class="remove-on-pdf information-button mt-0" data-toggle="tooltip" data-placement="right"
@@ -53,7 +54,7 @@ <h4>
           {{ end }}
         </h4>
 
-        <p>
+        <p class="csv-explanation">
           {{ .content | markdownify }}
         </p>
 
@@ -98,8 +99,8 @@ <h6 class="d-inline mb-0 ml-2">{{ .title | markdownify }}</h6>
           {{ range .options }}
           <div class="col-md-4 col-sm-12">
             <label>
-              <input type="radio" id="{{$input.identifier}}_{{.value}}" name={{$input.identifier}} class="card-input-element" value={{.value}} {{if
-                $input.required}} required {{end}} />
+              <input type="radio" id="{{$input.identifier}}_{{.value}}" name={{$input.identifier}}
+                class="card-input-element" value={{.value}} {{if $input.required}} required {{end}} />
               <div class="card card-input">
                 <div class="card-body {{ if not .content }}d-flex justify-content-center{{end}}">
                   <h6 class="card-title">{{.title}}</h6>
@@ -115,9 +116,9 @@ <h6 class="card-title">{{.title}}</h6>
           {{ range .options }}
           <div class="col-12">
             <label class="my-2">
-              <input type="radio" id="{{$input.identifier}}_{{.value}}" name={{$input.identifier}} class="" value={{.value}} {{if
-                $input.required}} required {{end}} />
-              <h6 class="d-inline ml-1" >{{.title}}</h6>
+              <input type="radio" id="{{$input.identifier}}_{{.value}}" name={{$input.identifier}} class=""
+                value={{.value}} {{if $input.required}} required {{end}} />
+              <h6 class="d-inline ml-1">{{.title}}</h6>
               {{ if .content }}
               <p class="mb-0">
                 {{.content | markdownify}}
@@ -144,7 +145,7 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
 
       {{ end }}
 
-      <div class="row mt-5">
+      <div class="row mt-5 formSubmissionSection">
         <div class="col-xl col-sm-12">
 
           {{ with .complete_form_options }}
@@ -157,6 +158,9 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
             <button id="score-card-print-button" class="btn btn-primary remove-on-pdf"><i class="fas fa-print"></i>
               {{ .button_text | markdownify }}
             </button>
+            <button id="score-card-csv-button" class="btn btn-primary remove-on-pdf"><i class="fas fa-file-excel"></i>
+              {{ .button_text_csv | markdownify }}
+            </button>
           </div>
           {{ end }}
           {{ end }}
@@ -175,9 +179,13 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
     }
 
     var calculateVisibleFields = function () {
+
+      {{ if .complete_form_options.onlyShowWithOutput }}
+      $('#{{.id}} .formSubmissionSection').addClass('d-none');
+      {{ end }}
       // this is what the data attribute looks like: data-show-when=="||&&data1==medium&&data2=medium||&&data1==low"
       // 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.
-      $('.score-card__question').each(function () {
+      $('#{{.id}} .score-card__question').each(function () {
         const showWhen = $(this).attr('data-show-when');
         // check if the attribute is there, otherwise always keep it as is.
         if (showWhen) {
@@ -203,14 +211,14 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
               }
 
               // Check for radio button
-              let input = document.querySelector(`.score-card__question:not(.d-none) input[name=${name}]:checked`);
+              let input = document.querySelector(`#{{.id}} .score-card__question:not(.d-none) input[name=${name}]:checked`);
               // Check for checkbox
               if (!input) {
-                input = document.querySelector(`.score-card__question:not(.d-none) input[id=${name}]:checked`);
+                input = document.querySelector(`#{{.id}} .score-card__question:not(.d-none) input[id=${name}]:checked`);
               }
-              if (!input 
-              || (checkForEquals && !valuesAreEqual(input.value, value))
-              || (checkForUnequal && valuesAreEqual(input.value, value))) {
+              if (!input
+                || (checkForEquals && !valuesAreEqual(input.value, value))
+                || (checkForUnequal && valuesAreEqual(input.value, value))) {
                 andShow = false;
               }
             });
@@ -226,6 +234,10 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
             if ($(this).find('textarea').attr('data-required')) {
               $(this).find('textarea').prop('required', true);
             }
+            if ($(this).attr('data-is-output')) {
+              console.log('showing form submission section');
+              $('#{{.id}} .formSubmissionSection').removeClass('d-none');
+            }
           } else {
             $(this).addClass("d-none");
             if ($(this).find('input').attr('data-required')) {
@@ -256,7 +268,7 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
     })
 
 
-    $('#score-card-print-button').click(function (event) {
+    $('#{{.id}} #score-card-print-button').click(function (event) {
       event.preventDefault();
       window.html2canvas = html2canvas;
       var element = document.getElementById("{{.id}}");
@@ -280,6 +292,43 @@ <h6 class="d-inline ml-1" >{{.title}}</h6>
 
       });
     });
+
+    $('#{{.id}} #score-card-csv-button').click(function (event) {
+      event.preventDefault();
+      const csv = [];
+      csv.push(['Title/Question', 'Explanation', 'Input', 'Input explanation']);
+      $('#{{.id}} .score-card__question:not(.d-none)').each(function () {
+        const question = $(this);
+        let title = question.find('.csv-title').text();
+        let explanation = question.find('.csv-explanation').text();
+        let input = question.find('input:checked').siblings('h6').text() || question.find('input').val() || question.find('textarea').val();
+        let inputExplanation = question.find('input:checked').siblings('p').text() || question.find('input').siblings('p').text() || question.find('textarea').siblings('p').text();
+        //exception for checkboxes
+        if (question.find('input:checked').length > 1) {
+          input = question.find('input:checked').map(function () {
+            return $(this).siblings('h6').text();
+          }).get().join('; ');
+
+          inputExplanation = question.find('input:checked').map(function () {
+            return $(this).siblings('p').text();
+          }).get().join('; ');
+        }
+        title = title?.replaceAll(',', ' ').replaceAll('\r\n', ' ')?.replaceAll('\n', ' ')?.replaceAll('  ', ' ')?.trim();
+        explanation = explanation?.replaceAll(',', ' ').replaceAll('\r\n', ' ')?.replaceAll('\n', ' ')?.replaceAll('  ', ' ')?.trim();
+        input = input?.replaceAll(',', ' ').replaceAll('\r\n', ' ')?.replaceAll('\n', ' ')?.replaceAll('  ', ' ')?.trim();
+        inputExplanation = inputExplanation?.replaceAll(',', ' ').replaceAll('\r\n', ' ')?.replaceAll('\n', ' ')?.replaceAll('  ', ' ')?.trim();
+        csv.push([title ?? '', explanation ?? '', input ?? '', inputExplanation ?? '']);
+      });
+
+      const csvContent = "data:text/csv;charset=utf-8," + csv.map(e => e.join(",")).join("\n");
+      const encodedUri = encodeURI(csvContent);
+      const link = document.createElement("a");
+      link.setAttribute("href", encodedUri);
+      link.setAttribute("download", "{{.complete_form_options.file_name}}.csv");
+      document.body.appendChild(link); // Required for FF
+
+      link.click(); // This will download the data file named "my_data.csv".
+    })
   });
 </script>
 

tina/collections/shared/page/building_blocks.ts

@@ -340,7 +340,11 @@ const building_blocks: TinaField[] = [
                     list: true,
                     ui: {
                       itemProps: (item) => {
-                        return { label: `${item?.identifier}=${item?.value}` };
+                        return {
+                          label: `${item?.identifier}${
+                            item?.compareSign ?? "=="
+                          }${item?.value}`,
+                        };
                       },
                     },
                     fields: [
@@ -381,6 +385,13 @@ const building_blocks: TinaField[] = [
                   },
                 ],
               },
+              {
+                type: "boolean",
+                name: "isOutput",
+                label: "Is output",
+                description:
+                  "Can be used to hide the save button, the button will show when an output field is shown.",
+              },
             ],
           },
         ],
@@ -418,6 +429,11 @@ const building_blocks: TinaField[] = [
             description: "",
             required: true,
           },
+          {
+            name: "button_text_csv",
+            label: "Button text for CSV download",
+            type: "string",
+          },
           {
             name: "backend_link",
             label: "Back end link (Required if you want to submit the data)",
@@ -431,6 +447,11 @@ const building_blocks: TinaField[] = [
             type: "string",
             required: false,
           },
+          {
+            name: "onlyShowWithOutput",
+            label: "Only show when an output field is shown",
+            type: "boolean",
+          },
         ],
       },
     ],