build(feat): format form title from info to show the appropriate title including when using t-lang

editor/src/app/groups/csv-data-set-detail/csv-data-set-detail.component.html

@@ -26,7 +26,7 @@
     <ng-container matColumnDef="formTitle">
       <th mat-header-cell *matHeaderCellDef>{{'Form'|translate}}</th>
       <td mat-cell *matCellDef="let dataSet">
-        {{ dataSet?.formTitle }}
+        {{ dataSet|formTitleFromInfo }}
       </td>
     </ng-container>
 

editor/src/app/groups/download-statistical-file/download-statistical-file.component.html

@@ -6,7 +6,7 @@ <h2 class="tangy-foreground-secondary">{{'Active Forms'|translate}}</h2>
       <mat-list-item>
         <span>{{index+1}}</span>
         <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        <span [innerHTML]="form.title|unsanitizeHtml"></span>
+        <span [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
         <span class="tangy-spacer-drag"></span>
 
         <span><a mat-icon-button>
@@ -17,7 +17,7 @@ <h2 class="tangy-foreground-secondary">{{'Active Forms'|translate}}</h2>
     </mat-list>
     <span>{{index+1}}</span>
     <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-    <span class="tangy-spacer" [innerHTML]="form.title|unsanitizeHtml"></span>
+    <span class="tangy-spacer" [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
     <span>
         <mat-select #downloadActiveForm>
           <mat-option style="width:180px;">
@@ -40,7 +40,7 @@ <h2 class="tangy-foreground-secondary">{{'Archived Forms'|translate}}</h2>
       <mat-list-item>
         <span>{{index+1}}</span>
         <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        <span [innerHTML]="form.title|unsanitizeHtml"></span>
+        <span [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
         <span class="tangy-spacer-drag"></span>
         <span><a mat-icon-button>
             <i class="material-icons mat-32 tangy-location-list-icon">get_app</i>
@@ -50,7 +50,7 @@ <h2 class="tangy-foreground-secondary">{{'Archived Forms'|translate}}</h2>
     </mat-list>
     <span>{{index+1}}</span>
     <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-    <span class="tangy-spacer" [innerHTML]="form.title|unsanitizeHtml"></span>
+    <span class="tangy-spacer" [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
 
     <span>
         <mat-select #downloadActiveForm>

editor/src/app/groups/group-forms-csv/group-forms-csv.component.html

@@ -6,7 +6,7 @@ <h2 class="tangy-foreground-secondary">{{'Active Forms'|translate}}</h2>
       <mat-list-item>
         <span>{{index+1}}</span>
         <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        <span [innerHTML]="form.title|unsanitizeHtml"></span>
+        <span [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
         <span class="tangy-spacer-drag"></span>
 
         <span><a mat-icon-button>
@@ -17,7 +17,7 @@ <h2 class="tangy-foreground-secondary">{{'Active Forms'|translate}}</h2>
     </mat-list>
     <span>{{index+1}}</span>
     <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-    <span class="tangy-spacer" [innerHTML]="form.title|unsanitizeHtml"></span>
+    <span class="tangy-spacer" [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
     <span><a mat-icon-button [routerLink]=" '/groups/'+groupId+ '/data/download-csv/'+form.id ">
         <i class="material-icons mat-32 tangy-location-list-icon">get_app</i>
       </a>
@@ -32,7 +32,7 @@ <h2 class="tangy-foreground-secondary">{{'Archived Forms'|translate}}</h2>
       <mat-list-item>
         <span>{{index+1}}</span>
         <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        <span [innerHTML]="form.title|unsanitizeHtml"></span>
+        <span [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
         <span class="tangy-spacer-drag"></span>
         <span><a mat-icon-button>
             <i class="material-icons mat-32 tangy-location-list-icon">get_app</i>
@@ -42,7 +42,7 @@ <h2 class="tangy-foreground-secondary">{{'Archived Forms'|translate}}</h2>
     </mat-list>
     <span>{{index+1}}</span>
     <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-    <span class="tangy-spacer" [innerHTML]="form.title|unsanitizeHtml"></span>
+    <span class="tangy-spacer" [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
 
     <span><a mat-icon-button [routerLink]=" '/groups/'+groupId+ '/data/download-csv/'+form.id  ">
         <i class="material-icons mat-32 tangy-location-list-icon">get_app</i>

editor/src/app/groups/group-forms/group-forms.component.html

@@ -27,7 +27,7 @@ <h2 class="tangy-foreground-secondary">{{'Active Forms'|translate}}</h2>
       <mat-list-item>
         <span>{{index+1}}</span>
         <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        <span [innerHTML]="form.title|unsanitizeHtml"></span>
+        <span [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
         <span class="tangy-spacer-drag"></span>
         <span *appHasAPermission="let i;group:group._id; permission:'can_manage_forms'">
           <a mat-icon-button>
@@ -58,7 +58,7 @@ <h2 class="tangy-foreground-secondary">{{'Active Forms'|translate}}</h2>
     </mat-list>
     <span>{{index+1}}</span>
     <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-    <span class="tangy-spacer" [innerHTML]="form.title|unsanitizeHtml"></span>
+    <span class="tangy-spacer" [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
 
     <span *appHasAPermission="let i;group:group._id; permission:'can_manage_forms'">
       <a mat-icon-button routerLink="edit/{{form.id}}">
@@ -129,7 +129,7 @@ <h2 class="tangy-foreground-secondary">{{'Archived Forms'|translate}}</h2>
       <mat-list-item>
         <span>{{index+1}}</span>
         <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        <span [innerHTML]="form.title|unsanitizeHtml"></span>
+        <span [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
         <span class="tangy-spacer-drag"></span>
         <span *appHasAPermission="let i;group:group._id; permission:'can_manage_forms'">
           <a mat-icon-button>
@@ -160,7 +160,7 @@ <h2 class="tangy-foreground-secondary">{{'Archived Forms'|translate}}</h2>
     </mat-list>
     <span>{{index+1}}</span>
     <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-    <span class="tangy-spacer" [innerHTML]="form.title|unsanitizeHtml"></span>
+    <span class="tangy-spacer" [innerHTML]="form|formTitleFromInfo|unsanitizeHtml"></span>
 
     <span *appHasAPermission="let i;group:group._id; permission:'can_manage_forms'">
       <a mat-icon-button

editor/src/app/groups/new-csv-data-set/new-csv-data-set.component.html

@@ -68,7 +68,7 @@
           <mat-checkbox [checked]="allFormsSelected" (change)="onFormCheckBoxChange(form.id, $event)"></mat-checkbox>
         </td>
         <td>
-          {{form.title}}
+          {{form|formTitleFromInfo}}
         </td>
         <td>
           <mat-form-field class="csv-template-selection" appearance="fill" color="primary">
@@ -87,7 +87,7 @@
           <mat-checkbox [checked]="allFormsSelected" (change)="onFormCheckBoxChange(form.id, $event)"></mat-checkbox>
         </td>
         <td>
-          {{form.title}}
+          {{form|formTitleFromInfo}}
         </td>
         <td>
           <mat-form-field class="csv-template-selection" appearance="fill" color="primary">

editor/src/app/groups/responses/responses.component.html

@@ -1,7 +1,7 @@
 <div id="filter" *ngIf="!hideFilterBy">
   <tangy-select name="form" label="Filter by form" (change)="filterByForm($event)">
     <option value="*">*</option>
-    <option *ngFor="let form of forms" value="{{form.id}}">{{form.id}}</option>
+    <option *ngFor="let form of forms" value="{{form.id}}">{{form|formTitleFromInfo}}</option>
   </tangy-select>
 </div>
 <div>

editor/src/app/pipes/format-form-title-from-info.pipe.ts

@@ -0,0 +1,32 @@
+import { Pipe, PipeTransform } from '@angular/core';
+@Pipe({
+  name: 'formTitleFromInfo',
+})
+export class FormTitleFromInfoPipe implements PipeTransform {
+  transform(formInfo) {
+    if(formInfo.id){
+        if(!formInfo.title){
+            return formInfo.id
+          }
+          if(!formInfo.title.includes('t-lang')) return formInfo.title;
+          if(formInfo.title.includes('t-lang')) {
+            const titleDomString = new DOMParser().parseFromString(formInfo.title, 'text/html')
+            const formTitleEnglish = titleDomString.querySelector('t-lang[en]')
+            formInfo.title = formTitleEnglish ? formTitleEnglish.textContent : titleDomString.querySelector('t-lang').textContent
+            return formInfo.title
+          }
+    }
+    if(formInfo.formId){
+        if(!formInfo.formTitle){
+            return formInfo.formId
+          }
+          if(!formInfo.formTitle.includes('t-lang')) return formInfo.formTitle;
+          if(formInfo.formTitle.includes('t-lang')) {
+            const titleDomString = new DOMParser().parseFromString(formInfo.formTitle, 'text/html')
+            const formTitleEnglish = titleDomString.querySelector('t-lang[en]')
+            formInfo.formTitle = formTitleEnglish ? formTitleEnglish.textContent : titleDomString.querySelector('t-lang').textContent
+            return formInfo.formTitle
+          }
+    }
+  }
+}

editor/src/app/shared/shared.module.ts

@@ -22,6 +22,7 @@ import {ProcessGuard} from "./_guards/process-guard.service";
 import { ProcessMonitorDialogComponent } from './_components/process-monitor-dialog/process-monitor-dialog.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import {MatProgressBarModule} from "@angular/material/progress-bar";
+import { FormTitleFromInfoPipe } from '../pipes/format-form-title-from-info.pipe';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -48,6 +49,7 @@ import {MatProgressBarModule} from "@angular/material/progress-bar";
     TangyLoadingComponent,
     BreadcrumbComponent,
     UnsanitizeHtmlPipe,
+    FormTitleFromInfoPipe,
     NgxPermissionsModule,
     HasAPermissionDirective,
     HasSomePermissionsDirective,
@@ -57,6 +59,7 @@ import {MatProgressBarModule} from "@angular/material/progress-bar";
   declarations: [
     TangyLoadingComponent,
     UnsanitizeHtmlPipe,
+    FormTitleFromInfoPipe,
     BreadcrumbComponent,
     HasAPermissionDirective,
     HasSomePermissionsDirective,

server/src/scripts/generate-csv-data-set/generate-csv-data-set.js

@@ -3,10 +3,16 @@ const spawn = require('child_process').spawn
 const exec = util.promisify(require('child_process').exec)
 const fs = require('fs-extra');
 const sanitize = require('sanitize-filename');
-const axios = require('axios')
+const axios = require('axios');
+const jsdom = require("jsdom");
 const writeFile = util.promisify(fs.writeFile);
 const log = require('tangy-log').log
-
+const { JSDOM } = jsdom;
+class NodeJSDOMParser {
+  parseFromString(s, contentType = 'text/html') {
+    return new JSDOM(s, {contentType}).window.document;
+  }
+}
 async function getUser1HttpInterface() {
   const body = await axios.post('http://localhost/login', {
     username: process.env.T_USER1,
@@ -98,9 +104,15 @@ async function generateCsvDataSet(groupId = '', formIds = [], outputPath = '', y
     } else {
       state.csvs.find(csv => csv.formId === formId).inProgress = true
       await writeState(state)
-      const formTitle = formInfo
-        ? formInfo.title.replace(/ /g, '_')
-        : formId
+      let formTitle;
+      if(!formInfo.title) formTitle = formId;
+      if(!formInfo.title.includes('t-lang')) formTitle = formInfo.title.replace(/ /g, '_');
+      if(formInfo.title.includes('t-lang')) {
+        const titleDomString = new NodeJSDOMParser().parseFromString(formInfo.title, 'text/html')
+        const formTitleEnglish = titleDomString.querySelector('t-lang[en]')
+        formInfo.title = formTitleEnglish ? formTitleEnglish.textContent : titleDomString.querySelector('t-lang').textContent
+        formTitle = formInfo.title.replace(/ /g, '_')
+      }
       const groupFormname = sanitize(groupLabel + '-' + formTitle, options)
       const fileName = `${groupFormname}${excludePii ? '-sanitized' : ''}-${Date.now()}.csv`.replace(/'/g, "_")
       const csvOutputPath = `/csv/${fileName.replace(/['",]/g, "_")}`