From 5c21cbaa14e2dcdd196796b12bf4494fad9fb92e Mon Sep 17 00:00:00 2001
From: Evans Dianga <evans@itsevans.com>
Date: Sun, 12 Jan 2025 21:25:06 +0300
Subject: [PATCH] build(feat): create pipe to format form title from info

Create Angular Pipe to format form title
If the title doesnt contain `t-lang` tag, return the text
Otherwise, use the English translation if it exists or the first translation if there's no English version of the title

Refs Tangerine-Community/Tangerine#3735
---
 .../csv-data-set-detail.component.html        |  2 +-
 .../download-statistical-file.component.html  |  8 ++---
 .../group-forms-csv.component.html            |  8 ++---
 .../group-forms/group-forms.component.html    |  8 ++---
 .../new-csv-data-set.component.html           |  4 +--
 .../pipes/format-form-title-from-info.pipe.ts | 32 +++++++++++++++++++
 editor/src/app/shared/shared.module.ts        |  3 ++
 7 files changed, 50 insertions(+), 15 deletions(-)
 create mode 100644 editor/src/app/pipes/format-form-title-from-info.pipe.ts

diff --git a/editor/src/app/groups/csv-data-set-detail/csv-data-set-detail.component.html b/editor/src/app/groups/csv-data-set-detail/csv-data-set-detail.component.html
index a41a5510bf..4b8f0ea4c3 100644
--- a/editor/src/app/groups/csv-data-set-detail/csv-data-set-detail.component.html
+++ b/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>
 
diff --git a/editor/src/app/groups/download-statistical-file/download-statistical-file.component.html b/editor/src/app/groups/download-statistical-file/download-statistical-file.component.html
index 2980bb91ed..42b7f074a8 100644
--- a/editor/src/app/groups/download-statistical-file/download-statistical-file.component.html
+++ b/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>
diff --git a/editor/src/app/groups/group-forms-csv/group-forms-csv.component.html b/editor/src/app/groups/group-forms-csv/group-forms-csv.component.html
index 59d05d449a..d08e1cb028 100644
--- a/editor/src/app/groups/group-forms-csv/group-forms-csv.component.html
+++ b/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>
diff --git a/editor/src/app/groups/group-forms/group-forms.component.html b/editor/src/app/groups/group-forms/group-forms.component.html
index c41a71f764..f94ec906d8 100644
--- a/editor/src/app/groups/group-forms/group-forms.component.html
+++ b/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
diff --git a/editor/src/app/groups/new-csv-data-set/new-csv-data-set.component.html b/editor/src/app/groups/new-csv-data-set/new-csv-data-set.component.html
index ad289b7300..5284fe5021 100644
--- a/editor/src/app/groups/new-csv-data-set/new-csv-data-set.component.html
+++ b/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">
diff --git a/editor/src/app/pipes/format-form-title-from-info.pipe.ts b/editor/src/app/pipes/format-form-title-from-info.pipe.ts
new file mode 100644
index 0000000000..9e8e9ebeb4
--- /dev/null
+++ b/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
+          }
+    }
+  }
+}
\ No newline at end of file
diff --git a/editor/src/app/shared/shared.module.ts b/editor/src/app/shared/shared.module.ts
index 14307583f4..a1dc616ea1 100644
--- a/editor/src/app/shared/shared.module.ts
+++ b/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,