Merge branch 'main' into nana-dev

configure-manifest.json

@@ -31,12 +31,14 @@
     {
       "name": "retrieveDataFile",
       "httpMethod": "GET",
-      "urlTemplate": "/api/v1/access/datafile/{fileId}"
+      "urlTemplate": "/api/v1/access/datafile/{fileId}",
+      "timeOut": 270
     },
     {
       "name": "uploadDataFile",
       "httpMethod": "PUT",
-      "urlTemplate": "/api/v1/edit/{fileId}"
+      "urlTemplate": "/api/v1/edit/{fileId}",
+      "timeOut": 270
     }
   ]
 }

src/app/components/body/cross-tabulation/cross-chart/cross-chart.component.ts

@@ -9,13 +9,14 @@ import {
 import { NgClass } from '@angular/common';
 import { Chart } from 'chart.js/auto';
 import { join } from 'path';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'dct-cross-chart',
   standalone: true,
-  imports: [NgClass],
+  imports: [NgClass, TranslateModule],
   template: `
-    <h3 class="sr-only">Chart</h3>
+    <h3 class="sr-only">{{ 'CROSS_TABULATION.CHART' | translate }}</h3>
     <div class="flex h-full w2/3 mt-4">
       <canvas id="crossTabChart"> {{ chartJS }}</canvas>
     </div>

src/app/components/body/cross-tabulation/cross-table/cross-table.component.html

@@ -1,4 +1,6 @@
-<h3 class="sr-only">Table</h3>
+<h3 class="sr-only">
+  {{ 'CROSS_TABULATION.TABLE' | translate }}
+</h3>
 <div
   #output
   [ngClass]="tableClass()"

src/app/components/body/cross-tabulation/cross-table/cross-table.component.ts

@@ -10,12 +10,14 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+
 declare const jQuery: any;
 
 @Component({
   selector: 'dct-cross-table',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TranslateModule],
   encapsulation: ViewEncapsulation.None,
   template: `
     <div class="[&_table]:w-full">
@@ -33,7 +35,7 @@ export class CrossTableComponent {
   selectedViewOption = input<string>('Count');
   element: ElementRef = inject(ElementRef);
 
-  constructor(private liveAnnouncer: LiveAnnouncer) {
+  constructor(private liveAnnouncer: LiveAnnouncer, private translate: TranslateService) {
     effect(() => {
       if (this.data() && (this.rows() || this.cols())) {
         this.createTable();
@@ -71,7 +73,10 @@ export class CrossTableComponent {
       rendererName: 'Table',
       showUI: false,
     });
-
-    this.liveAnnouncer.announce('Your table is ready below.');
+    let txt: string = "";
+    this.translate.get("CROSS_TABULATION.TABLE_MESSAGE").subscribe((res: string) => {
+      txt = res;
+    });
+    setTimeout(() => {this.liveAnnouncer.announce(txt);},2000);
   }
 }

src/app/components/body/cross-tabulation/cross-tabulation.component.html

@@ -21,13 +21,14 @@
             stroke-linejoin="round"
           />
         </svg>
-        <span class="my-auto mx-2.5 font-medium">ADD VARIABLE</span>
+        <span class="my-auto mx-2.5 font-medium">
+          {{ 'CROSS_TABULATION.ADD_VARIABLE' | translate }}
+        </span>
       </button>
     </div>
     <div [ngClass]="{ hidden: !hasData() }" class="flex flex-row mr-5 md:mr-0">
       <div class="sr-only">
-        Select whether to generate a table or a chart. Charts display the table
-        data in a bar graph and are not screen reader compatible.
+        {{ 'CROSS_TABULATION.CHART_OR_TABLE' | translate }}
       </div>
       <p-selectButton
         [(ngModel)]="defaultDataView"
@@ -50,52 +51,55 @@
   @if (defaultDataView() === 'Table') {
     <div class="ml-5 mb-5 md:ml-0">
       <div class="sr-only">
-        Select a value to use as a weight for your data.
+        {{ 'CROSS_TABULATION.SELECT_WEIGHT' | translate }}
       </div>
       <p-dropdown
         [ngModel]="selectedWeightVariable()"
         [options]="variablesWithWeightedOnTop()"
         (onChange)="onWeightChange($event)"
-        placeholder="Select Weight"
-        styleClass="select bg-primary text-primary-content focus:text-base-content w-1/5 py-1.5 mr-0 md:mr-5"
+        placeholder="{{ 'CROSS_TABULATION.SELECT' | translate }}"
+        styleClass="select border w-1/5 py-1.5 mr-0 md:mr-5"
         panelStyleClass="rounded border rounded-t-none w-full h-full text-base-content bg-base-100"
       >
         <ng-template let-item pTemplate="item">
           <span class="flex flex-row w-full px-2.5 py-0.5 hover:bg-base-300">
             {{ item.labl['#text'] }}
             @if (item['@_wgt'] === 'wgt') {
               <span class="rounded px-1 mx-2 bg-primary text-base-100"
-                >weight</span
+                >{{ 'CROSS_TABULATION.WEIGHT' | translate }}</span
               >
             }
           </span>
         </ng-template>
       </p-dropdown>
       <div class="sr-only">
-        How would you like to display the values in the table?
+        {{ 'CROSS_TABULATION.SELECT_DISPLAY' | translate }}
       </div>
       <p-dropdown
         [(ngModel)]="selectedOption"
         [options]="options()"
         panelStyleClass="rounded border w-full h-full bg-base-100"
         styleClass="select rounded border mt-2 py-1.5 mr-5 md:mr-0"
       >
+        <ng-template pTemplate="selectedItem" let-item>
+          {{ 'CROSS_TABULATION.'+item | translate }}
+        </ng-template>
         <ng-template let-value pTemplate="item">
           <span
             [ngClass]="{
               'bg-base-300 hover:bg-base-100': selectedOption() === value,
             }"
             class="w-full my-5 px-2.5 py-0.5 hover:bg-base-300"
           >
-            {{ value }}
+          {{ 'CROSS_TABULATION.'+value | translate }}
           </span>
         </ng-template>
       </p-dropdown>
       <button
         class="btn btn-secondary float-right mt-2"
         (click)="exportTableAsCSV()"
       >
-        <span>Export table as CSV</span>
+        <span>{{ 'CROSS_TABULATION.EXPORT_TABLE' | translate }}</span>
       </button>
     </div>
     <dct-cross-table
@@ -108,7 +112,7 @@
   } @else if (defaultDataView() === 'Chart') {
     <dct-cross-chart [data]="tableChart()" [cols]="cols()" [rows]="rows()" />
     <div class="sr-only" role="alert" aria-atomic="true" aria-live="polite">
-      Your chart has been generated below.
+      {{ 'CROSS_TABULATION.CHART_MESSAGE' | translate }}
     </div>
   } @else {
     <div class="h-full mx-5 md:mx-auto my-auto">
@@ -120,7 +124,7 @@
             aria-atomic="true"
             aria-live="polite"
           >
-            No Data yet. Start adding variables to generate your table.
+            {{ 'CROSS_TABULATION.NO_DATA_YET' | translate }}
           </div>
         }
       } @else if (isFetching()) {
@@ -131,7 +135,7 @@
             aria-atomic="true"
             aria-live="polite"
           >
-            Loading dataset ...
+          {{ 'COMMON.LOADING_DATASET' | translate }}...
           </div>
         } @else if (loadingStatus === 'delayed') {
           <div
@@ -140,7 +144,7 @@
             aria-atomic="true"
             aria-live="polite"
           >
-            Still loading... One moment please
+            {{ 'CROSS_TABULATION.STILL_LOADING' | translate }}
           </div>
         }
       }

src/app/components/body/cross-tabulation/cross-tabulation.component.ts

@@ -6,6 +6,7 @@ import {
   effect,
   inject,
   signal,
+  OnInit
 } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { CrossTableComponent } from './cross-table/cross-table.component';
@@ -31,7 +32,7 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { selectDatasetProcessedVariables } from 'src/app/new.state/xml/xml.selectors';
 import { Variable } from 'src/app/new.state/xml/xml.interface';
 import { generateCrossTabCSV } from '../../../new.state/ui/util';
-
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 @Component({
   selector: 'dct-cross-tabulation',
   standalone: true,
@@ -43,12 +44,13 @@ import { generateCrossTabCSV } from '../../../new.state/ui/util';
     FormsModule,
     CrossChartComponent,
     SelectButtonModule,
+    TranslateModule
   ],
   templateUrl: './cross-tabulation.component.html',
   styleUrl: './cross-tabulation.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CrossTabulationComponent {
+export class CrossTabulationComponent implements OnInit {
   loadingStatus: 'init' | 'delayed' | '' = '';
   store = inject(Store);
   variables = this.store.selectSignal(selectDatasetProcessedVariables);
@@ -83,30 +85,35 @@ export class CrossTabulationComponent {
   chartOrTable = signal(['Chart', 'Table']);
   defaultDataView = signal('Table');
   table = computed(() => this.tableData().pivotData);
+
+  opt1 = 'test';
+
   options = signal([
-    'Show Value',
+    'SHOW_VALUE',
     // 'Weighted Value',
-    'Row Percentage',
-    'Column Percentage',
-    'Total Percentage',
+    'ROW_PERC',
+    'COL_PERC',
+    'TOTAL_PERC',
   ]);
-  selectedOption = signal('Show Value');
+
+  selectedOption = signal('SHOW_VALUE');
+
   selectedOptionComputed = computed(() => {
     switch (this.selectedOption()) {
-      case 'Show Value':
+      case 'SHOW_VALUE':
         return 'Count';
-      case 'Row Percentage':
+      case 'ROW_PERC':
         return 'Count as Fraction of Rows';
-      case 'Column Percentage':
+      case 'COL_PERC':
         return 'Count as Fraction of Columns';
-      case 'Total Percentage':
+      case 'TOTAL_PERC':
         return 'Count as Fraction of Total';
       default:
         return 'Count';
     }
   });
 
-  constructor(private liveAnnouncer: LiveAnnouncer) {
+  constructor(private liveAnnouncer: LiveAnnouncer, private translate: TranslateService) {
     effect(() => {
       if (this.isFetching()) {
         this.fetchingCheck();
@@ -116,6 +123,12 @@ export class CrossTabulationComponent {
     });
   }
 
+  ngOnInit(): void {
+    this.translate.get("CROSS_TABULATION.SHOW_VALUE").subscribe((res: string) => {
+      this.opt1 = res;
+    });
+  }
+
   fetchingCheck() {
     this.loadingStatus = 'init';
     setTimeout(() => {
@@ -130,7 +143,11 @@ export class CrossTabulationComponent {
         orientation: '',
       }),
     );
-    this.liveAnnouncer.announce('New row added above.');
+    let txt: string = "";
+    this.translate.get("CROSS_TABULATION.NEW_ROW").subscribe((res: string) => {
+      txt = res;
+    });
+    this.liveAnnouncer.announce(txt);
   }
 
   onWeightChange(event: { value: Variable }) {