Merge pull request #170 from scholarsportal/nana-dev

Fixes for updating weights, cross-tabulation

Author: nana-boateng

angular.json

@@ -14,19 +14,12 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist",
-            "allowedCommonJsDependencies": [
-              "fast-xml-parser"
-            ],
+            "allowedCommonJsDependencies": ["fast-xml-parser"],
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "src/styles.css",
               "node_modules/primeng/resources/primeng.min.css"
@@ -92,38 +85,25 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "codeCoverage": true,
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": [],
             "karmaConfig": "karma.conf.js"
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
     }
   },
   "cli": {
     "analytics": false,
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "schematicCollections": ["@angular-eslint/schematics"]
   }
 }

src/app/app.component.ts

@@ -107,6 +107,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.route.queryParams
       .pipe(takeUntil(this.destroy$))
       .subscribe((params) => {
+        this.setTheme();
         const callback = (params['callback'] as string) || null;
         const siteURL = params['siteUrl'] as string;
         const fileID =
@@ -145,7 +146,6 @@ export class AppComponent implements OnInit, OnDestroy {
             }),
           );
         }
-        this.setTheme();
       });
   }
 

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

@@ -33,9 +33,13 @@ export class CrossTableComponent {
   cols = input.required<string[]>();
   hasData = input.required<boolean>();
   selectedViewOption = input<string>('Count');
+  aggregatorName = input.required<string>();
   element: ElementRef = inject(ElementRef);
 
-  constructor(private liveAnnouncer: LiveAnnouncer, private translate: TranslateService) {
+  constructor(
+    private liveAnnouncer: LiveAnnouncer,
+    private translate: TranslateService,
+  ) {
     effect(() => {
       if (this.data() && (this.rows() || this.cols())) {
         this.createTable();
@@ -73,10 +77,14 @@ export class CrossTableComponent {
       rendererName: 'Table',
       showUI: false,
     });
-    let txt: string = "";
-    this.translate.get("CROSS_TABULATION.TABLE_MESSAGE").subscribe((res: string) => {
-      txt = res;
-    });
-    setTimeout(() => {this.liveAnnouncer.announce(txt);},2000);
+    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

@@ -57,10 +57,14 @@
         [ngModel]="selectedWeightVariable()"
         [options]="variablesWithWeightedOnTop()"
         (onChange)="onWeightChange($event)"
+        [showClear]="!!this.selectedWeightVariable()"
         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 pTemplate="selectedItem">
+          {{ getSelectedWeightVariableToString() }}
+        </ng-template>
         <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'] }}
@@ -107,6 +111,7 @@
       [rows]="rows()"
       [cols]="cols()"
       [hasData]="hasData()"
+      [aggregatorName]="selectedOptionComputed()"
       class="my-auto graph-area"
     ></dct-cross-table>
   } @else if (defaultDataView() === 'Chart') {

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

@@ -3,10 +3,9 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  effect,
   inject,
   signal,
-  OnInit
+  OnInit,
 } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { CrossTableComponent } from './cross-table/cross-table.component';
@@ -44,15 +43,18 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
     FormsModule,
     CrossChartComponent,
     SelectButtonModule,
-    TranslateModule
+    TranslateModule,
   ],
   templateUrl: './cross-tabulation.component.html',
   styleUrl: './cross-tabulation.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CrossTabulationComponent implements OnInit {
   loadingStatus: 'init' | 'delayed' | '' = '';
+  filterValue: string = '';
   store = inject(Store);
+  liveAnnouncer = inject(LiveAnnouncer);
+  translate = inject(TranslateService);
   variables = this.store.selectSignal(selectDatasetProcessedVariables);
   crossTabVariables = this.store.selectSignal(
     selectDatasetVariableCrossTabValues,
@@ -87,7 +89,7 @@ export class CrossTabulationComponent implements OnInit {
   table = computed(() => this.tableData().pivotData);
 
   opt1 = 'test';
-  
+
   options = signal([
     'SHOW_VALUE',
     // 'Weighted Value',
@@ -97,7 +99,7 @@ export class CrossTabulationComponent implements OnInit {
   ]);
 
   selectedOption = signal('SHOW_VALUE');
-  
+
   selectedOptionComputed = computed(() => {
     switch (this.selectedOption()) {
       case 'SHOW_VALUE':
@@ -113,20 +115,17 @@ export class CrossTabulationComponent implements OnInit {
     }
   });
 
-  constructor(private liveAnnouncer: LiveAnnouncer, private translate: TranslateService) {
-    effect(() => {
-      if (this.isFetching()) {
-        this.fetchingCheck();
-      } else {
-        this.loadingStatus = '';
-      }
-    });
+  ngOnInit(): void {
+    this.translate
+      .get('CROSS_TABULATION.SHOW_VALUE')
+      .subscribe((res: string) => {
+        this.opt1 = res;
+      });
   }
 
-  ngOnInit(): void {
-    this.translate.get("CROSS_TABULATION.SHOW_VALUE").subscribe((res: string) => {
-      this.opt1 = res;
-    });
+  getSelectedWeightVariableToString() {
+    const fullVariable = this.variables()[this.selectedWeightVariable()];
+    return fullVariable['labl']['#text'];
   }
 
   fetchingCheck() {
@@ -143,20 +142,21 @@ export class CrossTabulationComponent implements OnInit {
         orientation: '',
       }),
     );
-    let txt: string = "";
-    this.translate.get("CROSS_TABULATION.NEW_ROW").subscribe((res: string) => {
+    let txt: string = '';
+    this.translate.get('CROSS_TABULATION.NEW_ROW').subscribe((res: string) => {
       txt = res;
     });
     this.liveAnnouncer.announce(txt);
   }
 
-  onWeightChange(event: { value: Variable }) {
-    const variable: Variable = event.value;
-    const variableID = variable['@_ID'];
+  onWeightChange(event: { value: Variable | null }) {
+    const variable: Variable | null = event?.value;
+    const variableID = variable?.['@_ID'];
     const crossTabValues = this.crossTabVariables();
+    console.log(event, 'variableID');
     this.store.dispatch(
-      CrossTabulationUIActions.startVariableWeightSelection({
-        variableID,
+      CrossTabulationUIActions.addWeightVariableToSelection({
+        variableID: variableID ?? null,
         crossTabValues,
       }),
     );

src/app/components/body/variables/data/data.component.html

@@ -29,7 +29,8 @@ import {
   selector: 'dct-data',
   standalone: true,
   imports: [TableComponent],
-  templateUrl: './data.component.html',
+  // templateUrl: './data.component.html',
+  template: ` <dct-table class="md:flex flex-col w-full table" /> `,
   styleUrl: './data.component.css',
   //changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/components/body/variables/data/data.component.ts

@@ -14,6 +14,8 @@ import { DropdownModule } from 'primeng/dropdown';
 import { XmlManipulationActions } from '../../../../../new.state/xml/xml.actions';
 import { BulkEditModalComponent } from '../table/bulk-edit-modal/bulk-edit-modal.component';
 import { TranslateModule } from '@ngx-translate/core';
+import { selectCrossTabSelection } from 'src/app/new.state/ui/ui.selectors';
+import { selectDatasetVariableCrossTabValues } from 'src/app/new.state/dataset/dataset.selectors';
 // import { Variable, VariableGroup } from 'src/app/state/interface';
 // import {
 //   bulkChangeGroupsAndWeight,
@@ -25,7 +27,6 @@ import { TranslateModule } from '@ngx-translate/core';
   standalone: true,
   imports: [
     CommonModule,
-    MultiselectDropdownComponent,
     MultiSelectModule,
     DropdownModule,
     ChipModule,
@@ -52,9 +53,10 @@ export class TableMenuComponent {
   selectedWeight: string = '';
   selectedGroups: string[] = [];
   allVariables = input.required<{ [variableID: string]: Variable }>();
-  variablesWithCrossTabMetadata = input.required<{
-    [variableID: string]: string[];
-  }>();
+  variablesWithCrossTabMetadata = this.store.selectSignal(
+    selectDatasetVariableCrossTabValues,
+  );
+  variablesInCrossTab = this.store.selectSignal(selectCrossTabSelection);
   weights = input.required<{ [weightID: string]: string }>();
   allGroups = input.required<{ [id: string]: VariableGroup }>();
   allGroupsArray = computed(() => {
@@ -93,13 +95,13 @@ export class TableMenuComponent {
   onApplyChanges() {
     if (this.selectedGroups.length > 0 || this.selectedWeight) {
       this.store.dispatch(
-        XmlManipulationActions.bulkSaveVariableInfo({
+        XmlManipulationActions.bulkSaveWeightAndGroupChange({
           variableIDs: this.selectedVariables(),
-          assignedWeight: this.selectedWeight,
-          groups: this.selectedGroups,
           allVariables: this.allVariables(),
-          variablesWithCrossTabMetadata: this.variablesWithCrossTabMetadata(),
-          typeOfChange: 'partial',
+          groupsToUpdate: this.selectedGroups,
+          weightToUpdate: this.selectedWeight,
+          allGroups: this.allGroups(),
+          crossTabMetadata: this.variablesWithCrossTabMetadata(),
         }),
       );
       this.saved = true;

src/app/components/body/variables/data/table-menu/table-menu.component.ts

@@ -60,12 +60,11 @@ export class BulkEditModalComponent {
       notes: this.variableForm.value.notes || '',
     };
     this.store.dispatch(
-      XmlManipulationActions.bulkSaveVariableInfo({
+      XmlManipulationActions.bulkSaveVariableModal({
         variableIDs: this.selectedVariables(),
         newVariableValue,
         allVariables: this.allVariables(),
         variablesWithCrossTabMetadata: this.variablesWithCrossTabMetadata(),
-        typeOfChange: 'full',
       }),
     );
 

src/app/components/body/variables/data/table/bulk-edit-modal/bulk-edit-modal.component.ts

@@ -28,7 +28,7 @@ import { TranslateModule } from '@ngx-translate/core';
     CommonModule,
     SummaryStatisticsComponent,
     VariableInformationComponent,
-    TranslateModule
+    TranslateModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './chart.component.html',
@@ -151,12 +151,12 @@ export class ChartComponent implements OnInit {
       this.chartJS.data.labels = chart.map((item) => item.y); // Update labels
       this.chartJS.data.datasets[0].data = chart.map((item) => item.x); // Update data
       this.chartJS.update();
-      
+
       const light = 'black';
       const dark = 'white';
       const neutral = '#c8c5d0';
       const theme = localStorage.getItem('theme');
-      
+
       if (theme === 'light') {
         this.chartJS.options.scales.x.grid.color = neutral;
         this.chartJS.options.scales.y.grid.color = neutral;