Skip to content

Commit

Permalink
build(feat): create pipe to format form title from info
Browse files Browse the repository at this point in the history 
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 #3735
  • Loading branch information
Evans Dianga committed Jan 12, 2025
1 parent fe05493 commit 5c21cba
Show file tree
Hide file tree
Showing 7 changed files with 50 additions and 15 deletions.
2 changes: 1 addition & 1 deletion editor/src/app/groups/csv-data-set-detail/csv-data-set-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
8 changes: 4 additions & 4 deletions editor/src/app/groups/download-statistical-file/download-statistical-file.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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;">
Expand All @@ -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>
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions editor/src/app/groups/group-forms-csv/group-forms-csv.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions editor/src/app/groups/group-forms/group-forms.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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}}">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions editor/src/app/groups/new-csv-data-set/new-csv-data-set.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand Down
32 changes: 32 additions & 0 deletions editor/src/app/pipes/format-form-title-from-info.pipe.ts
View file
Original file line number Diff line number Diff line change
@@ -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
}
}
}
}
3 changes: 3 additions & 0 deletions editor/src/app/shared/shared.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand All @@ -48,6 +49,7 @@ import {MatProgressBarModule} from "@angular/material/progress-bar";
TangyLoadingComponent,
BreadcrumbComponent,
UnsanitizeHtmlPipe,
FormTitleFromInfoPipe,
NgxPermissionsModule,
HasAPermissionDirective,
HasSomePermissionsDirective,
Expand All @@ -57,6 +59,7 @@ import {MatProgressBarModule} from "@angular/material/progress-bar";
declarations: [
TangyLoadingComponent,
UnsanitizeHtmlPipe,
FormTitleFromInfoPipe,
BreadcrumbComponent,
HasAPermissionDirective,
HasSomePermissionsDirective,
Expand Down

0 comments on commit 5c21cba

Please sign in to comment.