verben-authentication-ui 1.0.1 → 1.0.3

package/src/lib/components/role-control/role-control.component.ts

@@ -0,0 +1,1817 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
+import { RoleControlService } from './role-control.service';
+import {
+  CardData,
+  CardDataViewComponent,
+  ColumnDefinition,
+  DataFilterType,
+  DataTableComponent,
+  DataViewComponent,
+  IDataFilter,
+  VerbenPopUpComponent,
+} from 'verben-ng-ui';
+import { Role } from '../../models/Role';
+import { baseStyle } from './base-table-style';
+import { ObjectState } from '../../models/object-state';
+import { RoleContext } from '../../models/RoleContext';
+import { UIs } from './UIs';
+import { RoleAction } from '../../models/RoleAction';
+import { UIActions } from './UIActions';
+import { MappedRole } from './MappedRole';
+import {
+  AuthorizationConfig,
+  AuthorizationService,
+} from '../../services/authorization.service';
+import { MappedRoleContext } from './MappedRoleContext';
+import { MappedRoleAction } from './MappedRoleAction';
+import { ChildrenType } from './ChildrenType';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
+import { UtilService } from '../../services/util.service';
+import { HttpWebRequestService } from '../../services/http-web-request.service';
+import { ErrorResponse } from '../../models/ErrorResponse';
+import { PagedResult } from '../../models/PagedResult';
+import { SearchPropertyValue } from '../../models/SearchPropertyValue';
+import { SearchOperator } from '../../models/SearchOperator';
+import { SearchPropertySign } from '../../models/SearchPropertySign';
+import { EnvironmentService } from '../../services/environment.service';
+import { ApplicationRoleContext } from '../../models/ApplicationRoleContext';
+import { ApplicationRoleAction } from '../../models/ApplicationRoleAction';
+import { SearchPropertyValueType } from '../../models/SearchPropertyValueType';
+import { debounceTime, Subject } from 'rxjs';
+import { SortDirection } from '../../models/SortDirection';
+import { PermissionConfig } from '../../models/PermissionConfig';
+
+enum DateFilterTypes {
+  Before = SearchPropertySign.LT,
+  On = SearchPropertySign.EQ,
+  After = SearchPropertySign.GT,
+}
+
+@Component({
+  selector: 'lib-role-control',
+  templateUrl: './role-control.component.html',
+  styleUrl: './role-control.component.css',
+})
+export class RoleControlComponent implements OnInit {
+  visibleColumnDef: ColumnDefinition<MappedRole>[] = [];
+  styles = baseStyle;
+  data: MappedRole[] = [];
+  cardData: CardData[] = [];
+  currentData: CardData | null = null;
+  currentExpandedCard: CardData | null = null;
+  cardContext: CardData | null = null;
+  cardContextHistory: CardData[] = [];
+  cardContextHistoryData: CardData[][] = [];
+  @ViewChild('vdcv') cardDataView!: CardDataViewComponent;
+  @ViewChild('vdv') dataView!: DataViewComponent;
+  @ViewChildren('popup') popUps!: QueryList<VerbenPopUpComponent>;
+  @ViewChild('dt') tableView!: DataTableComponent<MappedRole>;
+  @Input() isGlobal: boolean = true;
+  @Input() serviceName: string | null = null;
+  @Input() application: string | null = null;
+  @Input() pageSize: number = 10;
+  @Input() searchDebounceTime: number = 500;
+  @Input() permissionConfig: PermissionConfig | null = null;
+  pageState: PagedResult<Role> | null = null;
+  sourceData: AuthorizationConfig[] = [];
+  isOpen: boolean = false;
+  openDropdownId: string | null = null;
+  currentFilters: IDataFilter[] = [];
+  currentSorts: IDataFilter[] = [];
+  searchTerm$ = new Subject<string>();
+
+  visibleColumns: IDataFilter[] = [];
+
+  filterArray: IDataFilter[] = [
+    {
+      name: 'CreatedAt',
+      type: DataFilterType.Date,
+      checked: false,
+    },
+    {
+      name: 'UpdatedAt',
+      type: DataFilterType.Date,
+      checked: false,
+    },
+  ];
+
+  sortOptions: IDataFilter[] = [
+    {
+      name: 'CreatedAt',
+      type: DataFilterType.Date,
+      checked: false,
+    },
+    {
+      name: 'UpdatedAt',
+      type: DataFilterType.Date,
+      checked: false,
+    },
+  ];
+
+  // private _searchItem: string = '';
+  // get searchItem(): string {
+  //   return this._searchItem
+  // }
+  // set searchItem(value: string) {
+  //   this._searchItem = value;
+  //   this.searchTerm$.next(value);
+  // }
+
+  // form: FormGroup;
+  childPermissionRef: ChildrenType = ChildrenType.Permission;
+
+  roleContextsStore: ApplicationRoleContext[] = [];
+  roleActionsStore: ApplicationRoleAction[] = [];
+  private currentSearchTerm: string = '';
+
+  constructor(
+    private authService: AuthorizationService,
+    private roleControlSvc: RoleControlService,
+    private utilService: UtilService,
+    private server: HttpWebRequestService,
+    private cdr: ChangeDetectorRef,
+    private fb: FormBuilder,
+    private envSvc: EnvironmentService
+  ) {
+    this.visibleColumnDef = roleControlSvc.roleColumns;
+    this.visibleColumns = roleControlSvc.roleColumns.map((col) => ({
+      checked: true,
+      name: typeof col.header === 'string' ? col.header : col.id,
+      type: DataFilterType.Bool,
+    }));
+    // this.form = this.fb.group({
+    //   Name: new FormControl<string | null>(null, Validators.required),
+    // });
+  }
+
+  async ngOnInit(): Promise<void> {
+    const mockData = this.getMockRoles();
+    const roles = await this.getAllRoles();
+    if (this.isGlobal) {
+      const contextsRes = await this.getSavedContexts();
+      if (contextsRes) {
+        this.roleContextsStore = contextsRes;
+        this.roleActionsStore = contextsRes.flatMap((x) => x.RoleActions);
+        const authConfig: AuthorizationConfig[] = contextsRes.map((x) => {
+          return {
+            Name: x.Name,
+            Actions: x.RoleActions.map((y) => {
+              return y.Name;
+            }),
+          };
+        });
+        this.sourceData = authConfig;
+      }
+    } else {
+      this.sourceData = this.authService.authorizationConfig;
+    }
+    if (roles) {
+      this.setUpMappedData(roles);
+      this.setUpCardData();
+    }
+    this.searchTerm$
+      .pipe(debounceTime(this.searchDebounceTime)) // Adjust debounce time here (in ms)
+      .subscribe(async (searchTerm) => {
+        this.currentSearchTerm = searchTerm;
+        this.updateFiltersAndSorts(true);
+      });
+  }
+
+  async getSavedContexts(): Promise<ApplicationRoleContext[] | undefined> {
+    if (!this.isGlobal || !this.application) {
+      return undefined;
+    }
+    var payload: SearchPropertyValue[] = [
+      {
+        PropertyName: 'Application',
+        EntityValue: this.application,
+        Operator: SearchOperator.And,
+        Sign: SearchPropertySign.EQ,
+      },
+      // {
+      //   PropertyName: 'APIKey',
+      //   EntityValue: this.envSvc.environment.APIKey,
+      //   Operator: SearchOperator.And,
+      //   Sign: SearchPropertySign.EQ,
+      // },
+    ];
+    this.utilService.sendBI(true);
+    const res = await this.server.post(
+      `Application/SearchApplicationRoleContexts/0/0`,
+      payload
+    );
+    this.utilService.sendBI(false);
+    if (res instanceof ErrorResponse) {
+      return undefined;
+    } else {
+      var result = (res as PagedResult<ApplicationRoleContext>).Result;
+      return result;
+    }
+  }
+  async getAllRoles(): Promise<Role[] | undefined> {
+    //   var payload: SearchPropertyValue[] = [
+    //     {
+    //       PropertyName: 'APIKey',
+    //       EntityValue: this.envSvc.environment.APIKey,
+    //       Operator: SearchOperator.And,
+    //       Sign: SearchPropertySign.EQ
+    //     }
+    // ]
+    this.utilService.sendBI(true);
+    const res = await this.server.get(`Role/GetRoles/0/${this.pageSize}`);
+    this.utilService.sendBI(false);
+    if (res instanceof ErrorResponse) {
+      return undefined;
+    } else {
+      this.pageState = res as PagedResult<Role>;
+      var result = (res as PagedResult<Role>).Result;
+      return result;
+    }
+  }
+
+  async loadMore() {
+    if (!this.pageState) {
+      return;
+    }
+    this.utilService.sendBI(true);
+    const res =
+      this.currentFilters.length > 0 ||
+      this.currentSorts.length > 0 ||
+      this.currentSearchTerm.trim().length > 0
+        ? await this.loadMoreFiltersAndSorts()
+        : await this.server.get(
+            `Role/GetRoles/${this.pageState.Skip}/${this.pageSize}`
+          );
+    this.utilService.sendBI(false);
+    if (res instanceof ErrorResponse) {
+      return;
+    } else {
+      this.pageState = res as PagedResult<Role>;
+      var result = (res as PagedResult<Role>).Result;
+      const data = this.setUpMappedDataExtra(result);
+      this.data = this.data.concat(data);
+      this.setUpCardDataExtra(data);
+    }
+  }
+
+  getApplicationContextCode(name: string): string {
+    const item = this.roleContextsStore.find((x) => x.Name == name);
+    return item ? item.Code : '';
+  }
+  getApplicationActionCode(name: string): string {
+    const item = this.roleActionsStore.find((x) => x.Name == name);
+    return item ? item.Code : '';
+  }
+
+  findParent(cardData: CardData[], target: CardData): CardData | null {
+    for (const item of cardData) {
+      if (item.children.includes(target)) {
+        return item; // Immediate parent found
+      }
+      const parent = this.findParent(item.children, target);
+      if (parent) {
+        return parent;
+      }
+    }
+    return null; // Not found
+  }
+
+  isAllSelected(item: CardData): boolean {
+    const parent =
+      this.cardContextHistoryData.length > 0
+        ? this.findParent(this.cardContextHistoryData[0], item)
+        : this.findParent(this.cardData, item);
+    if (
+      parent &&
+      parent.data.ChildrenType &&
+      parent.data.ChildrenType == ChildrenType.Action &&
+      (parent.data as MappedRoleContext).RoleActions.some((y) => !y.Selected)
+    ) {
+      return false;
+    }
+
+    if (
+      parent &&
+      parent.data.ChildrenType &&
+      parent.data.ChildrenType == ChildrenType.Permission &&
+      (parent.data as MappedRole).RoleContexts.some((y) => !y.Selected)
+    ) {
+      return false;
+    }
+    return true;
+  }
+
+  isCheckboxDisabled(item: CardData): boolean {
+    const parent =
+      this.cardContextHistoryData.length > 0
+        ? this.findParent(this.cardContextHistoryData[0], item)
+        : this.findParent(this.cardData, item);
+    if (
+      parent &&
+      parent.data.ChildrenType &&
+      parent.data.ChildrenType == ChildrenType.Action &&
+      (parent.data.Selected == false ||
+        (this.permissionConfig != null &&
+          !this.permissionConfig.Actions['AddAction']))
+    ) {
+      return true;
+    }
+
+    if (
+      parent &&
+      parent.data.ChildrenType &&
+      parent.data.ChildrenType == ChildrenType.Permission &&
+      this.permissionConfig != null &&
+      !this.permissionConfig.Actions['AddContext']
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  setUpMappedData(data: Role[]) {
+    this.data = data.map((x) => {
+      return {
+        ...x,
+        Id: x.Code,
+        ChildrenType: ChildrenType.Permission,
+        RoleContexts: this.sourceData.map((config) => {
+          const existingId = x.RoleContexts.findIndex(
+            (y) => y.Name == config.Name
+          );
+          var context: MappedRoleContext = {
+            ChildrenType: ChildrenType.Action,
+            Selected: existingId > -1 ? true : false,
+            RoleActions: config.Actions.map((action) => {
+              const existingAction =
+                existingId > -1
+                  ? x.RoleContexts[existingId].RoleActions.findIndex(
+                      (c) => c.Name == action
+                    )
+                  : -1;
+
+              var act: MappedRoleAction = {
+                Selected: existingAction > -1 ? true : false,
+                Name: action,
+                Role: x.Code,
+                Context: '',
+                id:
+                  existingAction > -1
+                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                        .Code
+                    : '',
+                Id:
+                  existingAction > -1
+                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                        .Code
+                    : '',
+                CreatedAt: new Date(),
+                UpdatedAt: new Date(),
+                DataState: ObjectState.New,
+                TenantId: x.TenantId,
+                Code:
+                  existingAction > -1
+                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                        .Code
+                    : '',
+                ServiceName:
+                  existingAction > -1
+                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                        .ServiceName
+                    : '',
+                APIKey:
+                  existingAction > -1
+                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                        .APIKey
+                    : this.envSvc.environment.APIKey,
+                ApplicationRoleAction: this.getApplicationActionCode(action),
+              };
+              return act;
+            }),
+            Name: config.Name,
+            Role: x.Code,
+            id: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+            Id: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+            CreatedAt: new Date(),
+            UpdatedAt: new Date(),
+            DataState: ObjectState.New,
+            TenantId: x.TenantId,
+            Code: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+            ServiceName:
+              existingId > -1 ? x.RoleContexts[existingId].ServiceName : '',
+            APIKey:
+              existingId > -1
+                ? x.RoleContexts[existingId].APIKey
+                : this.envSvc.environment.APIKey,
+            ApplicationRoleContext: this.getApplicationContextCode(config.Name),
+          };
+
+          return context;
+        }),
+      };
+    });
+  }
+  setUpMappedDataExtra(data: Role[]): MappedRole[] {
+    return data.map((x) => {
+      return {
+        ...x,
+        Id: x.Code,
+        ChildrenType: ChildrenType.Permission,
+        RoleContexts: this.sourceData.map((config) => {
+          const existingId = x.RoleContexts.findIndex(
+            (y) => y.Name == config.Name
+          );
+          var context: MappedRoleContext = {
+            ChildrenType: ChildrenType.Action,
+            Selected: existingId > -1 ? true : false,
+            RoleActions: config.Actions.map((action) => {
+              const existingAction =
+                existingId > -1
+                  ? x.RoleContexts[existingId].RoleActions.findIndex(
+                      (c) => c.Name == action
+                    )
+                  : -1;
+
+              var act: MappedRoleAction = {
+                Selected: existingAction > -1 ? true : false,
+                Name: action,
+                Role: x.Code,
+                Context: '',
+                id:
+                  existingAction > -1
+                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                        .Code
+                    : '',
+                Id:
+                  existingAction > -1
+                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                        .Code
+                    : '',
+                CreatedAt: new Date(),
+                UpdatedAt: new Date(),
+                DataState: ObjectState.New,
+                TenantId: x.TenantId,
+                Code:
+                  existingAction > -1
+                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                        .Code
+                    : '',
+                ServiceName:
+                  existingAction > -1
+                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                        .ServiceName
+                    : '',
+                APIKey:
+                  existingAction > -1
+                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                        .APIKey
+                    : this.envSvc.environment.APIKey,
+                ApplicationRoleAction: this.getApplicationActionCode(action),
+              };
+              return act;
+            }),
+            Name: config.Name,
+            Role: x.Code,
+            id: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+            Id: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+            CreatedAt: new Date(),
+            UpdatedAt: new Date(),
+            DataState: ObjectState.New,
+            TenantId: x.TenantId,
+            Code: existingId > -1 ? x.RoleContexts[existingId].Code : '',
+            ServiceName:
+              existingId > -1 ? x.RoleContexts[existingId].ServiceName : '',
+            APIKey:
+              existingId > -1
+                ? x.RoleContexts[existingId].APIKey
+                : this.envSvc.environment.APIKey,
+            ApplicationRoleContext: this.getApplicationContextCode(config.Name),
+          };
+
+          return context;
+        }),
+      };
+    });
+  }
+
+  setUpCardData() {
+    const cardData: CardData[] = this.data.map((x) => {
+      return {
+        selected: false,
+        title: x.Name,
+        data: x,
+        body: [],
+        children: x.RoleContexts.map((c) => {
+          return {
+            selected: false,
+            title: this.getFormattedName(c.Name),
+            data: c,
+            body: [],
+            children: c.RoleActions.map((a) => {
+              return {
+                selected: false,
+                title: this.getFormattedName(a.Name),
+                data: a,
+                body: [],
+                children: [],
+              };
+            }),
+          };
+        }),
+      };
+    });
+    this.cardData = cardData;
+  }
+  setUpCardDataExtra(baseData: MappedRole[]) {
+    const cardData: CardData[] = baseData.map((x) => {
+      return {
+        selected: false,
+        title: x.Name,
+        data: x,
+        body: [],
+        children: x.RoleContexts.map((c) => {
+          return {
+            selected: false,
+            title: this.getFormattedName(c.Name),
+            data: c,
+            body: [],
+            children: c.RoleActions.map((a) => {
+              return {
+                selected: false,
+                title: this.getFormattedName(a.Name),
+                data: a,
+                body: [],
+                children: [],
+              };
+            }),
+          };
+        }),
+      };
+    });
+    this.cardData = this.cardData.concat(cardData);
+  }
+
+  getFormattedName(name: string): string {
+    // Split the key on capital letters, handling "And" as lowercase
+    const words = name
+      .split(/(?=[A-Z])/)
+      .map((word) => (word === 'And' ? 'and' : word));
+    // Join the words with spaces
+    return words.join(' ');
+  }
+
+  viewDetailsFromTable(data: MappedRole) {
+    const cardData = this.cardData.find((x) => x.data == data);
+    console.log({ Data: data });
+    console.log({ CardData: this.cardData });
+    if (cardData) {
+      this.dataView.isTableView = false;
+      this.viewDetails(cardData);
+    }
+    this.closePopUp();
+  }
+
+  viewDetails(context: CardData) {
+    this.cardContextHistory.push(context);
+    this.cardContextHistoryData.push(this.cardData);
+    this.cardData = context.children;
+    this.cardDataView.clearData();
+  }
+  viewDetailsChild(context: CardData) {
+    if (this.currentExpandedCard) {
+      this.cardContextHistory.push(this.currentExpandedCard);
+      this.cardContextHistory.push(context);
+      this.cardContextHistoryData.push(this.cardData);
+      this.cardContextHistoryData.push(this.currentExpandedCard.children);
+      this.cardData = context.children;
+      this.cardDataView.clearData();
+    }
+  }
+
+  roleCardClicked(item: CardData) {
+    this.currentData = this.cardDataView.onItemClick(item);
+    // if (this.currentData) {
+    //   this.form.controls['Name'].setValue(this.currentData.data?.Name);
+    // }
+  }
+
+  toggleChildren(item: CardData) {
+    var currToggleState = item.isChildrenExpanded;
+    this.cardData.forEach((_) => {
+      _.isChildrenExpanded = false;
+    });
+    item.isChildrenExpanded = !currToggleState;
+    if (item.isChildrenExpanded) {
+      this.currentExpandedCard = item;
+    } else {
+      this.currentExpandedCard = null;
+    }
+  }
+
+  goToTableView() {
+    if (!this.currentData) {
+      return;
+    }
+    this.dataView.toggleView();
+    const id = this.currentData.data ? this.currentData.data.Id : '';
+    if (id.trim().length > 0 && !this.tableView.isRowEditing(id)) {
+      this.tableView.toggleRowEdit(id);
+    }
+  }
+  closeDetails() {
+    this.cardData =
+      this.cardContextHistoryData[this.cardContextHistoryData.length - 1];
+    this.cardContextHistoryData.pop();
+    this.cardContextHistory.pop();
+    setTimeout(() => {
+      if (this.dataView.isTableView) {
+        this.dataView.toggleView();
+      }
+    }, 200);
+  }
+
+  getCardSubCaption(item: CardData) {
+    const selected = item.children.filter((x) => x.data.Selected).length;
+    const total = item.children.length;
+    return `${selected} of ${total} ${
+      total > 1 ? item.data.ChildrenType + 's' : item.data.ChildrenType
+    }`;
+  }
+
+  getUpdatedRole(role: MappedRole): Role {
+    const newRole = role;
+    newRole.RoleContexts = role.RoleContexts.filter((x) => x.Selected).map(
+      (y) => {
+        y.RoleActions = y.RoleActions.filter((z) => z.Selected);
+        return y;
+      }
+    );
+    newRole.DataState =
+      newRole.DataState == ObjectState.New
+        ? ObjectState.New
+        : ObjectState.Changed;
+    newRole.Id = '';
+    return newRole as Role;
+  }
+  async saveRole() {
+    if (this.currentData) {
+      var role: MappedRole = this.currentData.data as MappedRole;
+      // role.Name = this.form.controls['Name'].value;
+      if (this.currentData.data.Name.trim().length == 0) {
+        this.utilService.showInfo('Role name cannot be empty');
+        return;
+      }
+      const mappedRole = this.getUpdatedRole(JSON.parse(JSON.stringify(role)));
+      this.utilService.sendBI(true);
+      const res = await this.server.post(`Role/SaveRoles`, [mappedRole]);
+      this.utilService.sendBI(false);
+      if (res instanceof ErrorResponse) {
+      } else {
+        this.utilService.showSuccess('Role saved successfully');
+        const result = res as Role[];
+        if (result.length > 0) {
+          var roleResult = result[0];
+          var mappedRoleSave: MappedRole = {
+            ...roleResult,
+            ChildrenType: ChildrenType.Permission,
+            RoleContexts: this.sourceData.map((config) => {
+              const existingId = roleResult.RoleContexts.findIndex(
+                (y) => y.Name == config.Name
+              );
+              var context: MappedRoleContext = {
+                ChildrenType: ChildrenType.Action,
+                Selected: existingId > -1 ? true : false,
+                RoleActions: config.Actions.map((action) => {
+                  const existingAction =
+                    existingId > -1
+                      ? roleResult.RoleContexts[
+                          existingId
+                        ].RoleActions.findIndex((c) => c.Name == action)
+                      : -1;
+
+                  var act: MappedRoleAction = {
+                    Selected: existingAction > -1 ? true : false,
+                    Name: action,
+                    Role: roleResult.Code,
+                    Context: '',
+                    id:
+                      existingAction > -1
+                        ? roleResult.RoleContexts[existingId].RoleActions[
+                            existingAction
+                          ].Code
+                        : '',
+                    Id:
+                      existingAction > -1
+                        ? roleResult.RoleContexts[existingId].RoleActions[
+                            existingAction
+                          ].Code
+                        : '',
+                    CreatedAt: new Date(),
+                    UpdatedAt: new Date(),
+                    DataState: ObjectState.New,
+                    TenantId: roleResult.TenantId,
+                    Code:
+                      existingAction > -1
+                        ? roleResult.RoleContexts[existingId].RoleActions[
+                            existingAction
+                          ].Code
+                        : '',
+                    ServiceName:
+                      existingAction > -1
+                        ? roleResult.RoleContexts[existingId].RoleActions[
+                            existingAction
+                          ].ServiceName
+                        : '',
+                    APIKey:
+                      existingAction > -1
+                        ? roleResult.RoleContexts[existingId].RoleActions[
+                            existingAction
+                          ].APIKey
+                        : this.envSvc.environment.APIKey,
+                    ApplicationRoleAction:
+                      this.getApplicationActionCode(action),
+                  };
+                  return act;
+                }),
+                Name: config.Name,
+                Role: roleResult.Code,
+                id:
+                  existingId > -1
+                    ? roleResult.RoleContexts[existingId].Code
+                    : '',
+                Id:
+                  existingId > -1
+                    ? roleResult.RoleContexts[existingId].Code
+                    : '',
+                CreatedAt: new Date(),
+                UpdatedAt: new Date(),
+                DataState: ObjectState.New,
+                TenantId: roleResult.TenantId,
+                Code:
+                  existingId > -1
+                    ? roleResult.RoleContexts[existingId].Code
+                    : '',
+                ServiceName:
+                  existingId > -1
+                    ? roleResult.RoleContexts[existingId].ServiceName
+                    : '',
+                APIKey:
+                  existingId > -1
+                    ? roleResult.RoleContexts[existingId].APIKey
+                    : this.envSvc.environment.APIKey,
+                ApplicationRoleContext: this.getApplicationContextCode(
+                  config.Name
+                ),
+              };
+
+              return context;
+            }),
+          };
+
+          const itemIndex = this.data.findIndex(
+            (x) => x == this.currentData?.data
+          );
+          if (itemIndex > -1) {
+            this.data[itemIndex].Code = mappedRoleSave.Code;
+            this.data[itemIndex].Id = mappedRoleSave.Code;
+            this.data[itemIndex].DataState = mappedRoleSave.DataState;
+            this.data[itemIndex].TenantId = mappedRoleSave.TenantId;
+            this.data[itemIndex].ServiceName = mappedRoleSave.ServiceName;
+            mappedRoleSave.RoleContexts.forEach((x, i) => {
+              this.data[itemIndex].RoleContexts[i].Role = mappedRoleSave.Code;
+              this.data[itemIndex].RoleContexts[i].Code = x.Code;
+              this.data[itemIndex].RoleContexts[i].ServiceName = x.ServiceName;
+              x.RoleActions.forEach((y, j) => {
+                this.data[itemIndex].RoleContexts[i].RoleActions[j].Role =
+                  mappedRoleSave.Code;
+                this.data[itemIndex].RoleContexts[i].RoleActions[j].Code =
+                  y.Code;
+                this.data[itemIndex].RoleContexts[i].RoleActions[
+                  j
+                ].ServiceName = y.ServiceName;
+              });
+            });
+            this.data = this.data.map((x) => x);
+            this.cacheItem(this.data[itemIndex]);
+            // this.currentData = {
+            //   selected: true,
+            //   title: mappedRoleSave.Name,
+            //   data: mappedRoleSave,
+            //   isChildrenExpanded: this.currentData.isChildrenExpanded,
+            //   body: [],
+            //   children: mappedRoleSave.RoleContexts.map((c) => {
+            //     return {
+            //       selected: false,
+            //       title: this.getFormattedName(c.Name),
+            //       data: c,
+            //       body: [],
+            //       children: c.RoleActions.map((a) => {
+            //         return {
+            //           selected: false,
+            //           title: this.getFormattedName(a.Name),
+            //           data: a,
+            //           body: [],
+            //           children: [],
+            //         };
+            //       }),
+            //     };
+            //   }),
+            // };
+          }
+        }
+      }
+    }
+  }
+  async tableSaveRole(role: MappedRole, callBack: () => any) {
+    if (role.Name.trim().length == 0) {
+      this.utilService.showInfo('Role name cannot be empty');
+      return;
+    }
+    const mappedRole = this.getUpdatedRole(JSON.parse(JSON.stringify(role)));
+    this.utilService.sendBI(true);
+    const res = await this.server.post(`Role/SaveRoles`, [mappedRole]);
+    this.utilService.sendBI(false);
+    if (res instanceof ErrorResponse) {
+    } else {
+      this.utilService.showSuccess('Role saved successfully');
+      const result = res as Role[];
+      if (result.length > 0) {
+        var roleResult = result[0];
+        var mappedRoleSave: MappedRole = {
+          ...roleResult,
+          ChildrenType: ChildrenType.Permission,
+          RoleContexts: this.sourceData.map((config) => {
+            const existingId = roleResult.RoleContexts.findIndex(
+              (y) => y.Name == config.Name
+            );
+            var context: MappedRoleContext = {
+              ChildrenType: ChildrenType.Action,
+              Selected: existingId > -1 ? true : false,
+              RoleActions: config.Actions.map((action) => {
+                const existingAction =
+                  existingId > -1
+                    ? roleResult.RoleContexts[existingId].RoleActions.findIndex(
+                        (c) => c.Name == action
+                      )
+                    : -1;
+
+                var act: MappedRoleAction = {
+                  Selected: existingAction > -1 ? true : false,
+                  Name: action,
+                  Role: roleResult.Code,
+                  Context: '',
+                  id:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].Code
+                      : '',
+                  Id:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].Code
+                      : '',
+                  CreatedAt: new Date(),
+                  UpdatedAt: new Date(),
+                  DataState: ObjectState.New,
+                  TenantId: roleResult.TenantId,
+                  Code:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].Code
+                      : '',
+                  ServiceName:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].ServiceName
+                      : '',
+                  APIKey:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].APIKey
+                      : this.envSvc.environment.APIKey,
+                  ApplicationRoleAction: this.getApplicationActionCode(action),
+                };
+                return act;
+              }),
+              Name: config.Name,
+              Role: roleResult.Code,
+              id:
+                existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+              Id:
+                existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+              CreatedAt: new Date(),
+              UpdatedAt: new Date(),
+              DataState: ObjectState.New,
+              TenantId: roleResult.TenantId,
+              Code:
+                existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+              ServiceName:
+                existingId > -1
+                  ? roleResult.RoleContexts[existingId].ServiceName
+                  : '',
+              APIKey:
+                existingId > -1
+                  ? roleResult.RoleContexts[existingId].APIKey
+                  : this.envSvc.environment.APIKey,
+              ApplicationRoleContext: this.getApplicationContextCode(
+                config.Name
+              ),
+            };
+
+            return context;
+          }),
+        };
+
+        const itemIndex = this.data.findIndex(
+          (x) => x == this.currentData?.data
+        );
+        if (itemIndex > -1) {
+          this.data[itemIndex].Code = mappedRoleSave.Code;
+          this.data[itemIndex].Id = mappedRoleSave.Code;
+          this.data[itemIndex].DataState = mappedRoleSave.DataState;
+          this.data[itemIndex].TenantId = mappedRoleSave.TenantId;
+          this.data[itemIndex].ServiceName = mappedRoleSave.ServiceName;
+          mappedRoleSave.RoleContexts.forEach((x, i) => {
+            this.data[itemIndex].RoleContexts[i].Role = mappedRoleSave.Code;
+            this.data[itemIndex].RoleContexts[i].Code = x.Code;
+            this.data[itemIndex].RoleContexts[i].ServiceName = x.ServiceName;
+            x.RoleActions.forEach((y, j) => {
+              this.data[itemIndex].RoleContexts[i].RoleActions[j].Role =
+                mappedRoleSave.Code;
+              this.data[itemIndex].RoleContexts[i].RoleActions[j].Code = y.Code;
+              this.data[itemIndex].RoleContexts[i].RoleActions[j].ServiceName =
+                y.ServiceName;
+            });
+          });
+          this.data = this.data.map((x) => x);
+          this.cacheItem(this.data[itemIndex]);
+        }
+        callBack();
+      }
+    }
+  }
+
+  async saveRoleDynamic(item: CardData) {
+    if (this.isCheckboxDisabled(item)) {
+      this.utilService.showInfo('Parent UI not selected');
+      return;
+    }
+
+    var role: CardData | null =
+      this.cardContextHistory.length > 0
+        ? this.cardContextHistory[0]
+        : this.currentExpandedCard
+        ? this.currentExpandedCard
+        : null;
+    var cardDataRef: CardData[] | null =
+      this.cardContextHistoryData.length > 0
+        ? this.cardContextHistoryData[0]
+        : this.currentExpandedCard
+        ? this.cardData
+        : null;
+    // const isExpandedCard: boolean =
+    //   this.cardContextHistory.length > 0
+    //     ? false
+    //     : this.currentExpandedCard
+    //     ? true
+    //     : false;
+    if (!role) {
+      return;
+    }
+    if (role.data.Name.trim().length == 0) {
+      item.data.Selected = false;
+      this.utilService.showInfo('Role name cannot be empty');
+      return;
+    }
+    item.data.Selected = !item.data.Selected;
+    const mappedRole = this.getUpdatedRole(
+      JSON.parse(JSON.stringify(role.data))
+    );
+    this.utilService.sendBI(true);
+    const res = await this.server.post(`Role/SaveRoles`, [mappedRole]);
+    this.utilService.sendBI(false);
+    if (res instanceof ErrorResponse) {
+      item.data.Selected = false;
+    } else {
+      this.utilService.showSuccess('Role saved successfully');
+      const result = res as Role[];
+      if (result.length > 0) {
+        var roleResult = result[0];
+        var mappedRoleSave: MappedRole = {
+          ...roleResult,
+          ChildrenType: ChildrenType.Permission,
+          RoleContexts: this.sourceData.map((config) => {
+            const existingId = roleResult.RoleContexts.findIndex(
+              (y) => y.Name == config.Name
+            );
+            var context: MappedRoleContext = {
+              ChildrenType: ChildrenType.Action,
+              Selected: existingId > -1 ? true : false,
+              RoleActions: config.Actions.map((action) => {
+                const existingAction =
+                  existingId > -1
+                    ? roleResult.RoleContexts[existingId].RoleActions.findIndex(
+                        (c) => c.Name == action
+                      )
+                    : -1;
+                var act: MappedRoleAction = {
+                  Selected: existingAction > -1 ? true : false,
+                  Name: action,
+                  Role: roleResult.Code,
+                  Context: '',
+                  id:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].Code
+                      : '',
+                  Id:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].Code
+                      : '',
+                  CreatedAt: new Date(),
+                  UpdatedAt: new Date(),
+                  DataState: ObjectState.New,
+                  TenantId: roleResult.TenantId,
+                  Code:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].Code
+                      : '',
+                  ServiceName:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].ServiceName
+                      : '',
+                  APIKey:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].APIKey
+                      : this.envSvc.environment.APIKey,
+                  ApplicationRoleAction: this.getApplicationActionCode(action),
+                };
+                return act;
+              }),
+              Name: config.Name,
+              Role: roleResult.Code,
+              id:
+                existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+              Id:
+                existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+              CreatedAt: new Date(),
+              UpdatedAt: new Date(),
+              DataState: ObjectState.New,
+              TenantId: roleResult.TenantId,
+              Code:
+                existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+              ServiceName:
+                existingId > -1
+                  ? roleResult.RoleContexts[existingId].ServiceName
+                  : '',
+              APIKey:
+                existingId > -1
+                  ? roleResult.RoleContexts[existingId].APIKey
+                  : this.envSvc.environment.APIKey,
+              ApplicationRoleContext: this.getApplicationContextCode(
+                config.Name
+              ),
+            };
+            return context;
+          }),
+        };
+        const itemIndex = cardDataRef
+          ? cardDataRef.findIndex((x) => x.data == role?.data)
+          : -1;
+        if (itemIndex > -1) {
+          this.data[itemIndex].Code = mappedRoleSave.Code;
+          this.data[itemIndex].Id = mappedRoleSave.Code;
+          this.data[itemIndex].DataState = mappedRoleSave.DataState;
+          this.data[itemIndex].TenantId = mappedRoleSave.TenantId;
+          this.data[itemIndex].ServiceName = mappedRoleSave.ServiceName;
+          mappedRoleSave.RoleContexts.forEach((x, i) => {
+            this.data[itemIndex].RoleContexts[i].Role = mappedRoleSave.Code;
+            this.data[itemIndex].RoleContexts[i].Code = x.Code;
+            this.data[itemIndex].RoleContexts[i].ServiceName = x.ServiceName;
+            x.RoleActions.forEach((y, j) => {
+              this.data[itemIndex].RoleContexts[i].RoleActions[j].Role =
+                mappedRoleSave.Code;
+              this.data[itemIndex].RoleContexts[i].RoleActions[j].Code = y.Code;
+              this.data[itemIndex].RoleContexts[i].RoleActions[j].ServiceName =
+                y.ServiceName;
+            });
+          });
+          // this.data[itemIndex].RoleContexts = mappedRoleSave.RoleContexts;
+
+          this.data = this.data.map((x) => x);
+          // if (cardDataRef) {
+          //   console.log({
+          //     XDataIsHere: JSON.parse(JSON.stringify(cardDataRef)),
+          //   });
+          //   cardDataRef[itemIndex] = {
+          //     selected: cardDataRef[itemIndex].selected,
+          //     isChildrenExpanded: cardDataRef[itemIndex].isChildrenExpanded,
+          //     title: mappedRoleSave.Name,
+          //     data: mappedRoleSave,
+          //     body: [],
+          //     children: mappedRoleSave.RoleContexts.map((c) => {
+          //       return {
+          //         selected: false,
+          //         title: this.getFormattedName(c.Name),
+          //         data: c,
+          //         body: [],
+          //         children: c.RoleActions.map((a) => {
+          //           return {
+          //             selected: false,
+          //             title: this.getFormattedName(a.Name),
+          //             data: a,
+          //             body: [],
+          //             children: [],
+          //           };
+          //         }),
+          //       };
+          //     }),
+          //   };
+          // }
+        }
+      }
+    }
+  }
+
+  async saveAllRoleDynamic(item: CardData) {
+    if (this.isCheckboxDisabled(item)) {
+      this.utilService.showInfo('Parent UI not selected');
+      return;
+    }
+
+    var role: CardData | null =
+      this.cardContextHistory.length > 0
+        ? this.cardContextHistory[0]
+        : this.currentExpandedCard
+        ? this.currentExpandedCard
+        : null;
+    var cardDataRef: CardData[] | null =
+      this.cardContextHistoryData.length > 0
+        ? this.cardContextHistoryData[0]
+        : this.currentExpandedCard
+        ? this.cardData
+        : null;
+    // const isExpandedCard: boolean =
+    //   this.cardContextHistory.length > 0
+    //     ? false
+    //     : this.currentExpandedCard
+    //     ? true
+    //     : false;
+    if (!role) {
+      return;
+    }
+    if (role.data.Name.trim().length == 0) {
+      this.utilService.showInfo('Role name cannot be empty');
+      return;
+    }
+
+    const isAllSelected = this.isAllSelected(item);
+
+    const parent =
+      this.cardContextHistoryData.length > 0
+        ? this.findParent(this.cardContextHistoryData[0], item)
+        : this.findParent(this.cardData, item);
+    if (
+      parent &&
+      parent.data.ChildrenType &&
+      parent.data.ChildrenType == ChildrenType.Action
+    ) {
+      (parent.data as MappedRoleContext).RoleActions.forEach((x) => {
+        x.Selected = !isAllSelected;
+      });
+    }
+
+    if (
+      parent &&
+      parent.data.ChildrenType &&
+      parent.data.ChildrenType == ChildrenType.Permission
+    ) {
+      (parent.data as MappedRole).RoleContexts.forEach((x) => {
+        x.Selected = !isAllSelected;
+      });
+    }
+
+    const mappedRole = this.getUpdatedRole(
+      JSON.parse(JSON.stringify(role.data))
+    );
+    this.utilService.sendBI(true);
+    const res = await this.server.post(`Role/SaveRoles`, [mappedRole]);
+    this.utilService.sendBI(false);
+    if (res instanceof ErrorResponse) {
+      item.data.Selected = false;
+    } else {
+      this.utilService.showSuccess('Role saved successfully');
+      const result = res as Role[];
+      if (result.length > 0) {
+        var roleResult = result[0];
+        var mappedRoleSave: MappedRole = {
+          ...roleResult,
+          ChildrenType: ChildrenType.Permission,
+          RoleContexts: this.sourceData.map((config) => {
+            const existingId = roleResult.RoleContexts.findIndex(
+              (y) => y.Name == config.Name
+            );
+            var context: MappedRoleContext = {
+              ChildrenType: ChildrenType.Action,
+              Selected: existingId > -1 ? true : false,
+              RoleActions: config.Actions.map((action) => {
+                const existingAction =
+                  existingId > -1
+                    ? roleResult.RoleContexts[existingId].RoleActions.findIndex(
+                        (c) => c.Name == action
+                      )
+                    : -1;
+                var act: MappedRoleAction = {
+                  Selected: existingAction > -1 ? true : false,
+                  Name: action,
+                  Role: roleResult.Code,
+                  Context: '',
+                  id:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].Code
+                      : '',
+                  Id:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].Code
+                      : '',
+                  CreatedAt: new Date(),
+                  UpdatedAt: new Date(),
+                  DataState: ObjectState.New,
+                  TenantId: roleResult.TenantId,
+                  Code:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].Code
+                      : '',
+                  ServiceName:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].ServiceName
+                      : '',
+                  APIKey:
+                    existingAction > -1
+                      ? roleResult.RoleContexts[existingId].RoleActions[
+                          existingAction
+                        ].APIKey
+                      : this.envSvc.environment.APIKey,
+                  ApplicationRoleAction: this.getApplicationActionCode(action),
+                };
+                return act;
+              }),
+              Name: config.Name,
+              Role: roleResult.Code,
+              id:
+                existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+              Id:
+                existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+              CreatedAt: new Date(),
+              UpdatedAt: new Date(),
+              DataState: ObjectState.New,
+              TenantId: roleResult.TenantId,
+              Code:
+                existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
+              ServiceName:
+                existingId > -1
+                  ? roleResult.RoleContexts[existingId].ServiceName
+                  : '',
+              APIKey:
+                existingId > -1
+                  ? roleResult.RoleContexts[existingId].APIKey
+                  : this.envSvc.environment.APIKey,
+              ApplicationRoleContext: this.getApplicationContextCode(
+                config.Name
+              ),
+            };
+            return context;
+          }),
+        };
+        const itemIndex = cardDataRef
+          ? cardDataRef.findIndex((x) => x.data == role?.data)
+          : -1;
+        if (itemIndex > -1) {
+          this.data[itemIndex].Code = mappedRoleSave.Code;
+          this.data[itemIndex].Id = mappedRoleSave.Code;
+          this.data[itemIndex].DataState = mappedRoleSave.DataState;
+          this.data[itemIndex].TenantId = mappedRoleSave.TenantId;
+          this.data[itemIndex].ServiceName = mappedRoleSave.ServiceName;
+          mappedRoleSave.RoleContexts.forEach((x, i) => {
+            this.data[itemIndex].RoleContexts[i].Role = mappedRoleSave.Code;
+            this.data[itemIndex].RoleContexts[i].Code = x.Code;
+            this.data[itemIndex].RoleContexts[i].ServiceName = x.ServiceName;
+            x.RoleActions.forEach((y, j) => {
+              this.data[itemIndex].RoleContexts[i].RoleActions[j].Role =
+                mappedRoleSave.Code;
+              this.data[itemIndex].RoleContexts[i].RoleActions[j].Code = y.Code;
+              this.data[itemIndex].RoleContexts[i].RoleActions[j].ServiceName =
+                y.ServiceName;
+            });
+          });
+          // this.data[itemIndex].RoleContexts = mappedRoleSave.RoleContexts;
+
+          this.data = this.data.map((x) => x);
+          // if (cardDataRef) {
+          //   console.log({
+          //     XDataIsHere: JSON.parse(JSON.stringify(cardDataRef)),
+          //   });
+          //   cardDataRef[itemIndex] = {
+          //     selected: cardDataRef[itemIndex].selected,
+          //     isChildrenExpanded: cardDataRef[itemIndex].isChildrenExpanded,
+          //     title: mappedRoleSave.Name,
+          //     data: mappedRoleSave,
+          //     body: [],
+          //     children: mappedRoleSave.RoleContexts.map((c) => {
+          //       return {
+          //         selected: false,
+          //         title: this.getFormattedName(c.Name),
+          //         data: c,
+          //         body: [],
+          //         children: c.RoleActions.map((a) => {
+          //           return {
+          //             selected: false,
+          //             title: this.getFormattedName(a.Name),
+          //             data: a,
+          //             body: [],
+          //             children: [],
+          //           };
+          //         }),
+          //       };
+          //     }),
+          //   };
+          // }
+        }
+      }
+    }
+  }
+
+  saveDataAll() {
+    const roles: Role[] = this.data.map((x) => {
+      return {
+        ...x,
+        RoleContexts: x.RoleContexts.filter((y) => y.Selected).map((z) => {
+          return {
+            ...z,
+            RoleActions: z.RoleActions.filter(
+              (a) => a.Selected
+            ) as RoleAction[],
+          };
+        }) as RoleContext[],
+      };
+    });
+  }
+
+  updateTable() {
+    this.data = this.data.map((x) => x);
+  }
+
+  onViewChange(isGridView: boolean): void {}
+  onStateChange(event: { key: string; value: boolean }): void {
+    switch (event.key) {
+      case 'create':
+        var newMappedRole: MappedRole = {
+          RoleContexts: this.sourceData.map((config) => {
+            var context: MappedRoleContext = {
+              ChildrenType: ChildrenType.Action,
+              Selected: false,
+              RoleActions: config.Actions.map((action) => {
+                var act: MappedRoleAction = {
+                  Selected: false,
+                  Name: action,
+                  Role: '',
+                  Context: '',
+                  id: '',
+                  Id: '',
+                  CreatedAt: new Date(),
+                  UpdatedAt: new Date(),
+                  DataState: ObjectState.New,
+                  TenantId: '',
+                  Code: '',
+                  ServiceName: '',
+                  APIKey: this.envSvc.environment.APIKey,
+                  ApplicationRoleAction: this.getApplicationActionCode(action),
+                };
+                return act;
+              }),
+              Name: config.Name,
+              Role: '',
+              id: '',
+              Id: '',
+              CreatedAt: new Date(),
+              UpdatedAt: new Date(),
+              DataState: ObjectState.New,
+              TenantId: '',
+              Code: '',
+              ServiceName: '',
+              APIKey: this.envSvc.environment.APIKey,
+              ApplicationRoleContext: this.getApplicationContextCode(
+                config.Name
+              ),
+            };
+
+            return context;
+          }),
+          ChildrenType: ChildrenType.Permission,
+          Name: '',
+          id: (this.cardData.length + 1).toString(),
+          Id: (this.cardData.length + 1).toString(),
+          CreatedAt: new Date(),
+          UpdatedAt: new Date(),
+          DataState: ObjectState.New,
+          TenantId: '',
+          Code: '',
+          ServiceName: '',
+          Application: this.application ? this.application : undefined,
+          APIKey: this.envSvc.environment.APIKey,
+        };
+        const cardData: CardData = {
+          selected: false,
+          title: newMappedRole.Name,
+          data: newMappedRole,
+          body: [],
+          children: newMappedRole.RoleContexts.map((c) => {
+            return {
+              selected: false,
+              title: this.getFormattedName(c.Name),
+              data: c,
+              body: [],
+              children: c.RoleActions.map((a) => {
+                return {
+                  selected: false,
+                  title: this.getFormattedName(a.Name),
+                  data: a,
+                  body: [],
+                  children: [],
+                };
+              }),
+            };
+          }),
+        };
+        this.data = this.data.concat([newMappedRole]);
+        this.cardData.push(cardData);
+        this.roleCardClicked(cardData);
+        this.dataView.isTableView = false;
+        break;
+      default:
+        break;
+    }
+  }
+
+  showTableView: boolean = false;
+  onSelectionChange(selectedRows: Role[]) {}
+  retryMessage() {}
+  onColumnsUpdated(updatedColumns: IDataFilter[]) {
+    const updatedColumnDef: ColumnDefinition<MappedRole>[] = [];
+    updatedColumns.forEach((col) => {
+      const matchingCol = this.roleControlSvc.roleColumns.find(
+        (column) => column.header === col.name || column.id === col.name
+      );
+      if (matchingCol) {
+        updatedColumnDef.push(matchingCol);
+      }
+    });
+
+    this.visibleColumnDef = [...updatedColumnDef];
+  }
+
+  async updateFiltersAndSorts(isSearch: boolean = false) {
+    if (!isSearch) {
+      this.dataView.onClearSearch();
+      this.currentSearchTerm = '';
+      this.cdr.detectChanges();
+      const clickEvent = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      });
+      document.dispatchEvent(clickEvent);
+    }
+    var payload: SearchPropertyValue[] = this.currentFilters.map((x) => {
+      return {
+        PropertyName: x.name,
+        EntityValue: x.value,
+        Operator: SearchOperator.And,
+        Sign:
+          x.condition && Object.keys(DateFilterTypes).includes(x.condition)
+            ? (DateFilterTypes[
+                x.condition as keyof typeof DateFilterTypes
+              ] as unknown as SearchPropertySign)
+            : SearchPropertySign.EQ,
+        Type: SearchPropertyValueType.Date,
+      };
+    });
+    payload.push({
+      PropertyName: 'APIKey',
+      EntityValue: this.envSvc.environment.APIKey,
+      Operator: SearchOperator.And,
+      Sign: SearchPropertySign.EQ,
+    });
+    for (let sort of this.currentSorts) {
+      payload.push({
+        PropertyName: sort.name,
+        EntityValue: '',
+        Operator: SearchOperator.And,
+        Sign: SearchPropertySign.EQ,
+        Sort:
+          sort.value.toLowerCase() == SortDirection.Asc.toLowerCase()
+            ? SortDirection.Asc
+            : sort.value.toLowerCase() == SortDirection.Desc.toLowerCase()
+            ? SortDirection.Desc
+            : SortDirection.None,
+      });
+    }
+    const searchTermExists = this.currentSearchTerm.trim().length > 0;
+    this.utilService.sendBI(true);
+    const res = searchTermExists
+      ? await this.server.get(
+          `Role/GetRolesWithParam/${this.currentSearchTerm.trim()}/0/${
+            this.pageSize
+          }`
+        )
+      : await this.server.post(`Role/SearchRoles/0/${this.pageSize}`, payload);
+    this.utilService.sendBI(false);
+    if (res instanceof ErrorResponse) {
+      this.currentFilters = [];
+      this.currentSorts = [];
+      return undefined;
+    } else {
+      this.cardDataView.clearData();
+      this.currentData = null;
+      this.pageState = res as PagedResult<Role>;
+      var result = (res as PagedResult<Role>).Result;
+      this.setUpMappedData(result);
+      this.setUpCardData();
+    }
+  }
+  async loadMoreFiltersAndSorts(): Promise<PagedResult<Role> | undefined> {
+    if (!this.pageState) {
+      return;
+    }
+    var payload: SearchPropertyValue[] = this.currentFilters.map((x) => {
+      return {
+        PropertyName: x.name,
+        EntityValue: x.value,
+        Operator: SearchOperator.And,
+        Sign:
+          x.condition && Object.keys(DateFilterTypes).includes(x.condition)
+            ? (DateFilterTypes[
+                x.condition as keyof typeof DateFilterTypes
+              ] as unknown as SearchPropertySign)
+            : SearchPropertySign.EQ,
+        Type: SearchPropertyValueType.Date,
+      };
+    });
+    payload.push({
+      PropertyName: 'APIKey',
+      EntityValue: this.envSvc.environment.APIKey,
+      Operator: SearchOperator.And,
+      Sign: SearchPropertySign.EQ,
+    });
+    for (let sort of this.currentSorts) {
+      payload.push({
+        PropertyName: sort.name,
+        EntityValue: '',
+        Operator: SearchOperator.And,
+        Sign: SearchPropertySign.EQ,
+        Sort:
+          sort.value.toLowerCase() == SortDirection.Asc.toLowerCase()
+            ? SortDirection.Asc
+            : sort.value.toLowerCase() == SortDirection.Desc.toLowerCase()
+            ? SortDirection.Desc
+            : SortDirection.None,
+      });
+    }
+    const searchTermExists = this.currentSearchTerm.trim().length > 0;
+    this.utilService.sendBI(true);
+    const res = searchTermExists
+      ? await this.server.get(
+          `Role/GetRolesWithParam/${this.currentSearchTerm.trim()}/${
+            this.pageState.Skip
+          }/${this.pageSize}`
+        )
+      : await this.server.post(
+          `Role/SearchRoles/${this.pageState.Skip}/${this.pageSize}`,
+          payload
+        );
+    this.utilService.sendBI(false);
+    if (res instanceof ErrorResponse) {
+      return undefined;
+    } else {
+      var result = res as PagedResult<Role>;
+      return result;
+    }
+  }
+  onFilterUpdated(updatedFilters: IDataFilter[] | string) {
+    // Ensure updatedFilters is an array
+    if (Array.isArray(updatedFilters)) {
+      this.currentFilters = updatedFilters;
+      this.updateFiltersAndSorts();
+    }
+  }
+  onSortUpdated(updatedSorts: IDataFilter[]) {
+    this.currentSorts = updatedSorts;
+    console.log({ CurrSorts: this.currentSorts });
+    this.updateFiltersAndSorts();
+  }
+
+  handleSearch(event: { key: string; value: string }) {
+    this.searchTerm$.next(event.value);
+  }
+
+  handleExport(exportedData: Partial<any>[]) {
+    // console.log('Exported data:', exportedData);
+    this.downloadCSV(exportedData);
+  }
+  private downloadCSV(data: Partial<any>[]) {
+    const headers = Object.keys(data[0]);
+    const csvContent = [
+      headers.join(','),
+      ...data.map((row) => headers.map((header) => row[header]).join(',')),
+    ].join('\n');
+
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    if (link.download !== undefined) {
+      const url = URL.createObjectURL(blob);
+      link.setAttribute('href', url);
+      link.setAttribute('download', 'export.csv');
+      link.style.visibility = 'hidden';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }
+
+  getMockRoles(): Role[] {
+    return new Array(10).fill(1).map((id, i) => ({
+      Id: id + i,
+      id: (id + i).toString(),
+      Name: this.mockNames[i] || '',
+      RoleContexts: this.randomContexts(),
+      CreatedAt: new Date(),
+      UpdatedAt: new Date(),
+      DataState: ObjectState.New,
+      TenantId: `Tenant${id + i}`,
+      Code: '',
+      ServiceName: '',
+      APIKey: '',
+    }));
+  }
+
+  mockNames: string[] = [
+    'Admin',
+    'Super Admin',
+    'Manager',
+    'Intern',
+    'Production Manager',
+    'CEO',
+    'CTO',
+    'COO',
+    'Developer',
+    'Engineer',
+  ];
+
+  randomName(): string {
+    const randomIndex = Math.floor(Math.random() * this.mockNames.length);
+    return this.mockNames[randomIndex];
+  }
+
+  randomContexts(): RoleContext[] {
+    const randomNumber = Math.floor(
+      Math.random() * Object.keys(UIs).length + 1
+    );
+    var returnArray: RoleContext[] = [];
+    const usedList: number[] = [];
+    for (let i = 0; i < randomNumber; i++) {
+      let randomIndex;
+      do {
+        randomIndex = Math.floor(Math.random() * Object.keys(UIs).length);
+      } while (usedList.includes(randomIndex));
+
+      returnArray.push({
+        Id: 'context' + i,
+        id: ('context' + i).toString(),
+        Name: Object.keys(UIs)[randomIndex],
+        Role: '',
+        RoleActions: this.randomActions(),
+        CreatedAt: new Date(),
+        UpdatedAt: new Date(),
+        DataState: ObjectState.New,
+        TenantId: `Tenant${'context' + i}`,
+        Code: '',
+        ServiceName: '',
+        APIKey: '',
+        ApplicationRoleContext: '',
+      });
+      usedList.push(randomIndex);
+    }
+    return returnArray;
+  }
+
+  randomActions(): RoleAction[] {
+    const randomNumber = Math.floor(
+      Math.random() * Object.keys(UIActions).length + 1
+    );
+    var returnArray: RoleAction[] = [];
+    const usedList: number[] = [];
+    for (let i = 0; i < randomNumber; i++) {
+      let randomIndex;
+      do {
+        randomIndex = Math.floor(Math.random() * Object.keys(UIActions).length);
+      } while (usedList.includes(randomIndex));
+
+      returnArray.push({
+        Id: 'action' + i,
+        id: ('action' + i).toString(),
+        Name: Object.keys(UIActions)[randomIndex],
+        Role: '',
+        Context: '',
+        CreatedAt: new Date(),
+        UpdatedAt: new Date(),
+        DataState: ObjectState.New,
+        TenantId: `Tenant${'action' + i}`,
+        Code: '',
+        ServiceName: '',
+        APIKey: '',
+        ApplicationRoleAction: '',
+      });
+      usedList.push(randomIndex);
+    }
+    return returnArray;
+  }
+
+  closePopUp() {
+    this.openDropdownId = null;
+    this.popUps.forEach((popUp) => {
+      if (popUp.dropdownOpen) {
+        popUp.toggleDropdown();
+      }
+    });
+  }
+
+  updateItem(value: any, key: string): any {
+    return {
+      [key]: value,
+    };
+  }
+
+  editValue(value: MappedRole) {
+    const card = this.cardData.find((x) => x.data.Id == value.Id);
+    if (card && this.cardDataView) {
+      this.dataView.toggleView();
+      card.selected = true;
+      this.currentData = this.cardDataView.onItemClick(card);
+      this.closePopUp();
+      // if (this.currentData) {
+      //   this.form.controls['Name'].setValue(this.currentData.data?.Name);
+      // }
+    }
+  }
+
+  tableCache = new Map<string, MappedRole>();
+
+  cacheItem(item: MappedRole) {
+    const cacheKey = item.Id;
+    this.tableCache.set(cacheKey, JSON.parse(JSON.stringify(item)));
+  }
+
+  restoreCache(item: Role) {
+    const cacheKey = item.Id;
+    const itemCache = this.tableCache.get(cacheKey);
+    if (itemCache) {
+      item.Name = itemCache.Name;
+    }
+    this.tableCache.delete(cacheKey);
+  }
+}