verben-authentication-ui 1.0.12 → 1.0.13

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

@@ -1,1884 +0,0 @@
-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[] = [];
-  //dataCopy: CardData[] = [];
-
-  currentData: CardData | null = null;
-  currentExpandedCard: CardData | null = null;
-  cardContext: CardData | null = null;
-  cardContextHistory: CardData[] = [];
-  cardContextHistoryData: CardData[][] = [];
-  //dataCopyHistory: 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,
-    },
-  ];
-
-  searchContext: string = '';
-  searchContextHistory: string[] = [];
-  isInputFocused: boolean = 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();
-    const contextsRes = await this.getSavedContexts();
-    if (this.isGlobal) {
-      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);
-    if (
-      context.data.ChildrenType &&
-      context.data.ChildrenType != this.childPermissionRef
-    ) {
-      this.searchContextHistory.push(this.searchContext);
-      this.searchContext = '';
-    }
-    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();
-
-    if (this.searchContextHistory.length > 0) {
-      this.searchContext =
-        this.searchContextHistory[this.searchContextHistory.length - 1];
-      this.searchContextHistory.pop();
-    } else {
-      this.searchContext = '';
-    }
-
-    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);
-  }
-
-  onSearchFocus() {
-    this.isInputFocused = true;
-  }
-
-  onSearchBlur() {
-    this.isInputFocused = false;
-  }
-
-  onInputFocus() {
-    this.isInputFocused = true;
-  }
-
-  onInputBlur() {
-    this.isInputFocused = false;
-  }
-
-  // onSearch(event: any) {
-  //   const searchTerm = event.target.value;
-  //     // if (this.firstSearch == false) {
-  //     //   this.optionsCopy = cloneDeep(this._options);
-  //     //   this.firstSearch = true;
-  //     // }
-  //     if (searchTerm.trim().length == 0) {
-  //       this.cardData = JSON.parse(JSON.stringify(this.dataCopy));
-  //       //this.firstSearch = false;
-  //       return;
-  //     }
-  //     this.cardData = this.dataCopy.filter(
-  //       (x) => typeof x.data.Name == 'string' && new RegExp(searchTerm, 'i').test(x.data.Name)
-  //     );
-
-  // }
-
-  get filteredData(): CardData[] {
-    if (this.searchContext.trim().length == 0) {
-      return this.cardData;
-    }
-    return this.cardData.filter(
-      (x) =>
-        typeof x.data.Name == 'string' &&
-        new RegExp(this.searchContext, 'i').test(x.data.Name)
-    );
-  }
-}