aConnect-UX/src/app/menu/menu.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { PermissionNode } from '../utils/app.interfaces';
import { CredentialService } from '../services/credential.service';
import { I18NService } from '../services/i18n.service';
import { HttpURIService } from '../app.http.uri.service';
import { TranslateModule } from '@ngx-translate/core';
import { URIKey } from '../utils/uri-enums';
import { HttpErrorResponse, HttpParams } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { NgSelectModule } from '@ng-select/ng-select';
import { Observable } from 'rxjs';
import { SuccessMessages } from '../utils/enums';
import { URIService } from '../app.uri';

@Component({
  selector: 'app-menu',
  imports: [TranslateModule, ReactiveFormsModule, CommonModule, TranslateModule, NgSelectModule, FormsModule],
  templateUrl: './menu.component.html',
  styleUrl: './menu.component.scss'
})
export class MenuComponent {
  users: any[] = [];
  permission: FormGroup;
  showPermissions = false;
  permissions: PermissionNode[] = [];

  constructor(
    private credentialService: CredentialService,
    private fb: FormBuilder,
    private httpService: HttpURIService,
    private i18nService: I18NService,
    private uriService: URIService
  ) {
    this.permission = this.fb.group({
      allocation: [''],
      userCode: [null],
      userRole: [''],
    });

     this.defaultPermissions().subscribe((data: PermissionNode[]) => {
      this.permissions = data;
    });
  }

  ngOnInit() {
    this.getAllUsers();
  }
  defaultPermissions(): Observable<PermissionNode[]> {
      return this.httpService.requestGET<PermissionNode[]>('assets/data/sideMenu.json');
    }

  getAllUsers() {
    this.httpService.requestGET<any[]>(URIKey.GET_ALL_USER_URI).subscribe((response) => {
      console.log(URIKey.GET_ALL_USER_URI);
      if (!(response instanceof HttpErrorResponse)) {
        this.users = response.map(item => ({
          userName: item.userFullname,
          userId: item.userId,
        }));
      }
    });
  }

  onUserChange() {
  this.showPermissions = true;
  this.defaultPermissions().subscribe((data: PermissionNode[]) => {
    this.permissions = data;
    const params = new HttpParams().set('userId', this.permission.get('userCode')?.value);
    this.httpService.requestGET(URIKey.USER_GET_PERMISSIONS, params).subscribe((response: any) => {
      if (!(response instanceof HttpErrorResponse)) {
        // Step 4 - reverse map endpoints back to booleans
        const menuNode = this.permissions.find(x => x.name === 'menu');
        if (menuNode && response.transactionEndpoints) {
          menuNode.accountToAccount = response.transactionEndpoints.includes(this.uriService.getURIForRequest(URIKey.ACCOUNT_TO_ACCOUNT));
          menuNode.glToGl = response.transactionEndpoints.includes(this.uriService.getURIForRequest(URIKey.GL_TO_GL));
          menuNode.accountToGl = response.transactionEndpoints.includes(this.uriService.getURIForRequest(URIKey.ACCOUNT_TO_GL));
          menuNode.glToAccount = response.transactionEndpoints.includes(this.uriService.getURIForRequest(URIKey.GL_TO_ACCOUNT));
        }
      }
    });
  });
}

savePermissions() {
  // Step 3 - extract menu node and build endpoints array
  const menuNode = this.permissions.find(x => x.name === 'menu');
  if (!menuNode) return;

  const transactionEndpoints: string[] = [];

  // Step 2 - map booleans to endpoint strings
  if (menuNode.accountToAccount) transactionEndpoints.push(this.uriService.getURIForRequest(URIKey.ACCOUNT_TO_ACCOUNT));
  if (menuNode.glToGl) transactionEndpoints.push(this.uriService.getURIForRequest(URIKey.GL_TO_GL));
  if (menuNode.accountToGl) transactionEndpoints.push(this.uriService.getURIForRequest(URIKey.ACCOUNT_TO_GL));
  if (menuNode.glToAccount) transactionEndpoints.push(this.uriService.getURIForRequest(URIKey.GL_TO_ACCOUNT));

  // Step 1 - new payload structure
  const payload = {
    userId: this.permission.get('userCode')?.value,
    transactionEndpoints
  };

  this.httpService.requestPUT(URIKey.TRANSACTION_PERMISSIONS_ASSIGN, payload).subscribe((response: any) => {
    if (!(response instanceof HttpErrorResponse)) {
      this.i18nService.success(SuccessMessages.SAVED_SUCCESSFULLY, []);
      this.permission.get('userCode')?.setValue(null);
      this.showPermissions = false;
    }
  });

}

  updatePermissions(savedPermissions: PermissionNode[], existingPermissions: PermissionNode[]): void {
    for (const existingNode of existingPermissions) {
      const savedNode = savedPermissions.find(node => node.name === existingNode.name);

      if (savedNode) {
        // Update state from saved node
        existingNode.checked = savedNode.checked;
        //existingNode.expanded = savedNode.expanded;

        // Recursively update children if they exist
        if (existingNode.children) {
          this.updatePermissions(savedNode.children || [], existingNode.children);
        }
        if (existingNode.buttons) {
          this.updatePermissions(savedNode.buttons || [], existingNode.buttons);
        }
      }
    }
  }
}