From 4c2b8d1eb7a55de157014d0fb85737f0f387cf4b Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 21 Oct 2024 16:23:29 +0300
Subject: [PATCH] Implemented #483 - Multiple Textboxes - A Text in Tables
 visualizer doesn't display field titles/column headers

---
 src/text.scss      |  8 +++++
 src/text.ts        | 26 +++++++++++++--
 tests/text.test.ts | 79 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 tests/text.test.ts

diff --git a/src/text.scss b/src/text.scss
index 1becce3b0..27e0057c5 100644
--- a/src/text.scss
+++ b/src/text.scss
@@ -25,3 +25,11 @@
   background-color: $background-color;
   min-height: $form-element-height;
 }
+
+.sa-text-table__cell--number {
+  text-align: end;
+}
+
+th.sa-text-table__cell {
+  font-weight: 600;
+}
\ No newline at end of file
diff --git a/src/text.ts b/src/text.ts
index 6d1cda9a2..4cfdd3a5d 100644
--- a/src/text.ts
+++ b/src/text.ts
@@ -1,4 +1,4 @@
-import { Question } from "survey-core";
+import { Question, QuestionMultipleTextModel } from "survey-core";
 import { VisualizerBase } from "./visualizerBase";
 import { VisualizationManager } from "./visualizationManager";
 import { localization } from "./localizationManager";
@@ -27,10 +27,22 @@ export class TextTableAdapter {
     tableNode.style.backgroundColor = this.model.backgroundColor;
     container.appendChild(tableNode);
 
+    if(this.model.columns) {
+      var row = DocumentHelper.createElement("tr");
+      this.model.columns.forEach(column => {
+        var td = DocumentHelper.createElement("th", "sa-text-table__cell", {
+          textContent: column.title,
+        });
+        row.appendChild(td);
+      });
+      tableNode.appendChild(row);
+    }
+
     data.forEach((rowData) => {
       var row = DocumentHelper.createElement("tr");
       for (var i = 0; i < columnCount; i++) {
-        var td = DocumentHelper.createElement("td", "sa-text-table__cell", {
+        const column = this.model.columns[i];
+        var td = DocumentHelper.createElement("td", "sa-text-table__cell" + (column?.type == "number" ? " sa-text-table__cell--number" : ""), {
           textContent: rowData[i],
         });
         row.appendChild(td);
@@ -60,6 +72,16 @@ export class Text extends VisualizerBase {
     this._textTableAdapter = new TextTableAdapter(this);
   }
 
+  public get columns(): Array<{ name: string, title: string, type: string }> {
+    const columns = [];
+    if(this.question.getType() == "multipletext") {
+      (this.question as QuestionMultipleTextModel).items.forEach(item => {
+        columns.push({ name: item.name, title: item.title, type: item.inputType });
+      });
+    }
+    return columns;
+  }
+
   protected getCalculatedValuesCore(): any {
     let result: Array<Array<string>> = [];
     let columnCount = 0;
diff --git a/tests/text.test.ts b/tests/text.test.ts
new file mode 100644
index 000000000..dd28b7ef0
--- /dev/null
+++ b/tests/text.test.ts
@@ -0,0 +1,79 @@
+import { QuestionMultipleTextModel, QuestionTextModel } from "survey-core";
+import { Text, TextTableAdapter } from "../src/text";
+
+const multipleTextQuestionData = [{
+  "bloodPressure": {
+    "systolic": 90,
+    "diastolic": "100",
+    "pulse": "80"
+  }
+},
+{
+  "bloodPressure": {
+    "systolic": 80,
+    "diastolic": "110",
+    "pulse": "70"
+  }
+},
+{
+  "bloodPressure": {
+    "systolic": 85,
+    "diastolic": "120",
+    "pulse": "77"
+  }
+}];
+
+test("multiple text visualizer", async () => {
+  const question = new QuestionMultipleTextModel("bloodPressure");
+  question.fromJSON({
+    "type": "multipletext",
+    "name": "bloodPressure",
+    "title": "Blood Pressure",
+    "items": [
+      {
+        "name": "systolic",
+        "inputType": "number",
+        "title": "Systolic",
+      },
+      {
+        "name": "diastolic",
+        "title": "Diastolic",
+      },
+      {
+        "name": "pulse",
+        "title": "Pulse:"
+      }
+    ]
+  });
+  const text = new Text(question, multipleTextQuestionData);
+
+  const columns = text.columns;
+  expect(columns.length).toBe(3);
+  expect(columns[0].name).toBe("systolic");
+  expect(columns[0].title).toBe("Systolic");
+  expect(columns[0].type).toBe("number");
+  expect(columns[1].name).toBe("diastolic");
+  expect(columns[1].title).toBe("Diastolic");
+  expect(columns[1].type).toBe("text");
+
+  const { columnCount, data }: any = await text.getCalculatedValues();
+  expect(columnCount).toBe(3);
+  expect(data.length).toBe(3);
+});
+
+test("text visualizer - columns", async () => {
+  const question = new QuestionTextModel("systolic");
+  question.fromJSON({
+    "name": "systolic",
+    "type": "text",
+    "title": "Systolic",
+  });
+  const text = new Text(question, [{ "systolic": "83" }]);
+
+  const columns = text.columns;
+  expect(columns.length).toBe(0);
+
+  const { columnCount, data }: any = await text.getCalculatedValues();
+  expect(columnCount).toBe(1);
+  expect(data.length).toBe(1);
+});