@ieeesa-npm/tenants 0.4.2 → 0.4.4

package/src/lib/components/view-tenant-details/view-tenant-details.component.ts

@@ -0,0 +1,876 @@
+import {
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  AlertType,
+  BreakpointObserverService,
+  GlobalErrorHandlerService,
+  ModalType,
+} from '@ieeesa-npm/utility';
+import {
+  AccordionInfo,
+  ModalComponent,
+  Menu,
+  PaginatorConfig,
+  SlideToggleComponent,
+  TableActions,
+  AlignType,
+  ModalConfirmationComponent,
+  IconButtonComponent,
+  RadioOption,
+  IconButton,
+  SlideToggleOption,
+  TableColumnSchema,
+  TableColumnType,
+  AccordionComponent,
+  AccordionDetails,
+  DataTableComponent,
+  TableColumnMenuInfo,
+} from '@ieeesa-npm/presentation';
+import { MatButtonModule } from '@angular/material/button';
+import { Subject, takeUntil } from 'rxjs';
+import * as screenText from '../../assets/constants.json';
+import { ActivatedRoute, Params, RouterModule } from '@angular/router';
+import { MatDividerModule } from '@angular/material/divider';
+import { TenantApplicationsService } from '../../services/tenant-applications.service';
+import {
+  TenantsPermissions,
+  UserPermission,
+} from '../../models/tenants-permission.model';
+import { SharedService } from '@ieeesa-npm/shared';
+import { TenantsRoutesConfig } from '../../models/route-config.model';
+import { Features } from '../../models/features.model';
+import {
+  TenantBasicInfo,
+  TenantDetailsResponse,
+} from '../../models/tenant.model';
+import { TenantFunctionType } from '../../models/tenant-function-type.model';
+import { CreateTenantApplicationComponent } from '../create-tenant-application/create-tenant-application.component';
+import { PageEvent } from '@angular/material/paginator';
+import { MatDialog } from '@angular/material/dialog';
+import {
+  UpdateTenantStatusRequestPayload,
+  UpdateTenantStatusResponse,
+} from '../../models/update-tenant-status.model';
+import { FeaturePermissionId } from '../../models/feature-permission-id.model';
+import {
+  AppTypeConfig,
+  GetAppTypesResponse,
+} from '../../models/app-type-config.model';
+import { TenantBasicDetailsComponent } from '../tenant-basic-details/tenant-basic-details.component';
+import {
+  GetRolesAndPermissionsPayload,
+  GetRolesAndPermissionsResponse,
+  GetRolesResponse,
+  Role,
+  RolesAndPermissionsMapping,
+  RolesAndPermissions,
+  DeleteRoleRequestPayload,
+  DeleteRoleResponse,
+  PaginationInfo,
+  RoleDetails,
+} from '../../models/roles-and-permissions.model';
+import { PermissionType } from '../../models/permission-type.model';
+import { CreateModifyRoleComponent } from '../create-modify-role/create-modify-role.component';
+import { RoleMenuAction } from '../../models/role-menu-action.model';
+import { RolesAndPermissionsMappingComponent } from '../roles-and-permissions-mapping/roles-and-permissions-mapping.component';
+import { ViewTenantGroupTypesComponent } from '../view-tenant-group-types/view-tenant-group-types.component';
+import {
+  GetRoleTypesPayload,
+  RoleTypeConfiguration,
+  RoleTypeOption,
+  RoleTypeResponse,
+} from '../../models/role-type.model';
+import { CreateModifyGroupTypeComponent } from '../create-modify-group-type/create-modify-group-type.component';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'ieeesa-view-tenant-details',
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    SlideToggleComponent,
+    AccordionComponent,
+    MatDividerModule,
+    TenantBasicDetailsComponent,
+    IconButtonComponent,
+    MatButtonModule,
+    DataTableComponent,
+    ViewTenantGroupTypesComponent,
+  ],
+  templateUrl: './view-tenant-details.component.html',
+  styleUrls: ['./view-tenant-details.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ViewTenantDetailsComponent implements OnInit, OnDestroy {
+  destroy$: Subject<boolean> = new Subject<boolean>();
+  @Input() apiBaseURL!: string;
+  @Input() userPermissions!: UserPermission[];
+  @Input() routePaths!: TenantsRoutesConfig;
+  isMobileView = false;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constants: any = screenText;
+  tenantLabels = this.constants?.viewTenants?.label;
+  slideToggleOption = {
+    id: 1,
+    label: this.constants?.viewTenants?.label?.active,
+    checked: true,
+    disabled: false,
+  };
+  editButton: IconButton = this.constants?.viewTenants?.buttons;
+  tenantDetails!: TenantBasicInfo;
+  accordionInfoList: AccordionInfo[] = JSON.parse(
+    JSON.stringify(this.constants?.viewTenants?.tenantAccordionInfo)
+  );
+  appId = '';
+  iconSize = this.constants?.viewRolesAndPermissions?.columnActionIconSize;
+  rolesAndPermissionsTableCaption =
+    this.constants?.viewRolesAndPermissions?.tableCaption;
+  rolesAndPermissionsTableHeaderName =
+    this.constants?.viewRolesAndPermissions?.tableColumnsHeaderText;
+  rolesAndPermissionsTableSupportMessage =
+    this.constants?.viewRolesAndPermissions?.scrollbarSupportMessage;
+  permissionsColumnClassNumber = 1;
+  menuItems: Menu[] =
+    this.constants?.viewRolesAndPermissions?.columnActionMenuItems;
+  columnSchema: TableColumnSchema[] = [];
+  tableData: RolesAndPermissions[] = [];
+  isRolesAndPermissionsExpanded = false;
+  paginatorConfig: PaginatorConfig = {
+    recordsPerPage: this.constants?.viewRolesAndPermissions?.pageSizeOptions[0],
+    pageSizeOptions: this.constants?.viewRolesAndPermissions?.pageSizeOptions,
+    totalRecords: 0,
+  };
+  tablePagination!: PaginationInfo;
+  rolesAndPermissionsClassName =
+    '.ieeesa-view-tenant-info__roles-and-permissions';
+  headerElementClassName = '.ieeesa-header';
+  tableActions: TableActions = {
+    isPaginationNeeded: true,
+  };
+  viewTenantsRouteUrl!: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dialogRef: any;
+  accordionDetails = AccordionDetails;
+  appTypeOptions!: RadioOption[];
+  isBasicDetailsExpanded = false;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  createGroupTypeScreenTexts: any = this.constants?.createGroupType;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editTenantScreenTexts: any = this.constants?.editTenant;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  deleteRoleScreenTexts: any = this.constants?.deleteRole;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mapRolesAndPermissionsScreenTexts: any =
+    this.constants?.mapRolesAndPermissions;
+  alignmentType = AlignType;
+  userTenantsPermissions!: TenantsPermissions[];
+  permissionType = PermissionType;
+  functionType!: TenantFunctionType;
+  createRoleScreenTexts = this.constants?.createRole;
+  roleMenuElement!: HTMLElement;
+  selectedRoleInfo: RoleDetails = {
+    roleId: '',
+    roleName: '',
+  };
+  isGroupTypesExpanded = false;
+  roleTypeOptions: RoleTypeOption[] = [];
+  constructor(
+    // eslint-disable-next-line no-unused-vars
+    public dialog: MatDialog,
+    // eslint-disable-next-line no-unused-vars
+    private breakpointObserverService: BreakpointObserverService,
+    // eslint-disable-next-line no-unused-vars
+    private tenantAppService: TenantApplicationsService,
+    // eslint-disable-next-line no-unused-vars
+    public globalErrorHandlerService: GlobalErrorHandlerService,
+    // eslint-disable-next-line no-unused-vars
+    private sharedService: SharedService,
+    // eslint-disable-next-line no-unused-vars
+    private activatedRoute: ActivatedRoute
+  ) {
+    this.breakpointObserverService
+      .getBreakpoint()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((result: { matches: boolean }) => {
+        this.isMobileView = result?.matches;
+      });
+  }
+
+  /**
+   * Initializes view tenant details component.
+   * @return -returns nothing
+   * @memberof ViewTenantDetailsComponent
+   */
+  ngOnInit(): void {
+    this.tenantDetails =
+      this.tenantAppService?.getSelectedTenantInformation() as TenantBasicInfo;
+    this.slideToggleOption.checked = this.tenantDetails?.status as boolean;
+    this.slideToggleOption.label = this.tenantDetails?.status
+      ? this.tenantLabels?.active
+      : this.tenantLabels?.inactive;
+    this.routePaths = this.routePaths ?? this.constants?.routeConfigPath;
+    this.viewTenantsRouteUrl = `/${this.routePaths?.viewTenants}`;
+    this.tenantAppService?.setAppConfig(this.apiBaseURL, this.userPermissions);
+    this.userTenantsPermissions = this.tenantAppService?.filterPermission(
+      this.userPermissions
+    );
+    this.appId = this.tenantAppService.getSelectedTenantInformation()
+      ?.appId as string;
+    this.tablePagination = {
+      offset: 0,
+      pageSize: this.paginatorConfig.pageSizeOptions[0],
+    };
+    this.getApplicationTypes();
+    this.activatedRoute?.queryParams
+      ?.pipe(takeUntil(this.destroy$))
+      ?.subscribe((params: Params) => {
+        this.appId = params['id'];
+        this.getTenantDetails(this.appId);
+      });
+  }
+  /**
+   * Gets the selected tenant details from server.
+   * @memberof ViewTenantDetailsComponent
+   */
+  getTenantDetails(appId: string): void {
+    this.tenantAppService
+      .getTenantDetails(appId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: TenantDetailsResponse) => {
+          if (response?.status) {
+            this.tenantDetails = response?.body as TenantBasicInfo;
+            this.tenantAppService.setSelectedTenantInformation(
+              this.tenantDetails
+            );
+            this.slideToggleOption.checked = this.tenantDetails
+              .status as boolean;
+            this.slideToggleOption.label = this.tenantDetails.status
+              ? this.tenantLabels?.active
+              : this.tenantLabels?.inactive;
+            const features = this.tenantDetails.features as Features[];
+            features.map((feature: Features) => {
+              if (
+                feature?.featureId ===
+                  FeaturePermissionId.MEETINGS_AND_EVENTS ||
+                feature?.featureId === FeaturePermissionId.BALLOTS
+              )
+                this.accordionInfoList.push({
+                  id: this.accordionInfoList.length + 1,
+                  isDisabled: false,
+                  title: feature?.featureName,
+                });
+            });
+          }
+        },
+        error: (error) => {
+          this.sharedService.handleErrors(
+            error,
+            this.constants?.viewTenants.errors
+          );
+        },
+      });
+  }
+
+  /**
+   * Display the corresponding tenant basic or feature details based on selected accordion.
+   * @param {AccordionInfo} accordionInfo
+   * @param {boolean} expanded
+   * @memberof ViewTenantDetailsComponent
+   */
+  showTenantDetails(accordionInfo: AccordionInfo, expanded: boolean): void {
+    const accordionId = accordionInfo.id as number;
+    switch (accordionId) {
+      case 1: {
+        this.isBasicDetailsExpanded = expanded;
+        if (expanded) {
+          this.getApplicationTypes();
+        }
+        break;
+      }
+      case 2: {
+        this.isRolesAndPermissionsExpanded = expanded;
+        if (expanded) {
+          this.columnSchema = [];
+          this.paginatorConfig.recordsPerPage =
+            this.constants?.viewRolesAndPermissions?.pageSizeOptions[0];
+          this.tablePagination.offset = 0;
+          this.tablePagination.pageSize = this.paginatorConfig.recordsPerPage;
+          this.getRolesAndInitializeTableSchema();
+        }
+        break;
+      }
+      case 3: {
+        this.isGroupTypesExpanded = expanded;
+        break;
+      }
+    }
+  }
+  /**
+   * Fetches the configured roles of the selected tenant and creates the column schema.
+   * @memberof ViewTenantDetailsComponent
+   */
+  getRolesAndInitializeTableSchema(): void {
+    this.tenantAppService
+      .getRoles(this.appId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: GetRolesResponse) => {
+          if (response?.status) {
+            this.getRolesAndPermissionsAndInitializeTableView({
+              payload: {
+                offset: this.tablePagination.offset,
+                pageSize: this.tablePagination.pageSize,
+              },
+            });
+            const rolesList = this.tenantAppService.sortRolesByRoleType(
+              response?.body as Role[]
+            );
+            this.tenantAppService.setRolesInfo(rolesList);
+            const cellValue =
+              this.constants.viewRolesAndPermissions.tableCellValue;
+            this.columnSchema = [
+              {
+                id: 0,
+                columnDef: 'permissions',
+                heading:
+                  this.constants.viewRolesAndPermissions.tableColumn
+                    .permissions,
+                columnType: TableColumnType.TEXT,
+                cellData: (rolesAndPermissions: RolesAndPermissions) =>
+                  rolesAndPermissions.permission,
+                isStickyColumn: true,
+              },
+            ];
+            rolesList.map((role: Role, index) => {
+              this.columnSchema.push({
+                id: index + 1,
+                columnDef: role.roleId,
+                heading: role.roleName,
+                columnType: TableColumnType.TEXT,
+                hasColumnActions: true,
+                cellData: (rolesAndPermissions: RolesAndPermissions) => {
+                  return rolesAndPermissions.roleIdsList.find(
+                    (roleId: string) => role.roleId === roleId
+                  )
+                    ? cellValue.yes
+                    : cellValue.no;
+                },
+              });
+            });
+          }
+        },
+        error: (error) => {
+          this.sharedService.handleErrors(
+            error,
+            this.constants?.viewTenants?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Fetches the roles and permissions mappings for the selected tenant and and initialize table view.
+   * @param {GetRolesAndPermissionsPayload} payload
+   * @memberof ViewTenantDetailsComponent
+   */
+  getRolesAndPermissionsAndInitializeTableView(
+    payload: GetRolesAndPermissionsPayload
+  ): void {
+    this.tenantAppService
+      .getRolesAndPermissionsMappings(this.appId, payload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: GetRolesAndPermissionsResponse) => {
+          if (response?.status) {
+            this.tableData = [];
+            this.paginatorConfig.totalRecords = response?.body
+              ?.totalRecords as number;
+            const rolesAndPermissionsList = response?.body
+              ?.rolePermissionDetails as RolesAndPermissionsMapping[];
+            rolesAndPermissionsList.map((permission) => {
+              let roleIdsList: string[] = [];
+              roleIdsList = permission.roleList.map((role) => role.roleId);
+              this.tableData.push({
+                permission: permission.permissionName,
+                roleIdsList: roleIdsList,
+              });
+            });
+          }
+        },
+        error: (error) => {
+          this.sharedService.handleErrors(
+            error,
+            this.constants?.viewTenants?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Fetch the roles and permissions records based on offset and page size while the pagination changes.
+   * @param {PageEvent} pageEvent
+   * @memberof ViewTenantDetailsComponent
+   */
+  onTablePaginationChange(pageEvent: PageEvent): void {
+    this.tablePagination = {
+      offset: pageEvent.pageIndex,
+      pageSize: pageEvent.pageSize,
+    };
+    this.getRolesAndPermissionsAndInitializeTableView({
+      payload: {
+        offset: pageEvent.pageIndex,
+        pageSize: pageEvent.pageSize,
+      },
+    });
+  }
+  /**
+   * Captures the selected role's information and performs edit or delete action basis on the selected menu item.
+   * @param {TableColumnMenuInfo} roleMenuInfo
+   * @memberof ViewTenantDetailsComponent
+   */
+  onRoleMenuClick(roleMenuInfo: TableColumnMenuInfo) {
+    this.selectedRoleInfo.roleId = roleMenuInfo?.tableColumnInfo?.columnDef;
+    this.selectedRoleInfo.roleName = roleMenuInfo?.tableColumnInfo?.heading;
+    this.tenantAppService?.setSelectedRoleInformation(this.selectedRoleInfo);
+    if (roleMenuInfo?.menuActionInfo?.id === RoleMenuAction.DELETE_ROLE) {
+      this.openDeleteRoleModal();
+    } else if (roleMenuInfo?.menuActionInfo?.id === RoleMenuAction.EDIT_ROLE) {
+      this.openEditRoleForm();
+    }
+  }
+  /**
+   * Keeps track of the accordion based on the element's ID in DOM tree.
+   * @memberof ViewTenantDetailsComponent
+   */
+  trackByAccordionFn(index: number, item: AccordionInfo): number {
+    return item?.id as number;
+  }
+  /**
+   * Gets the role types and updates the form control.
+   * @memberof ViewTenantDetailsComponent
+   */
+  getRoleTypes(): void {
+    const payload: GetRoleTypesPayload = {
+      payload: {
+        appId: this.tenantDetails?.appId as string,
+        configFieldName: 'role_type',
+      },
+    };
+    this.tenantAppService
+      .getRoleTypes(payload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: RoleTypeResponse) => {
+          if (response?.status) {
+            this.roleTypeOptions = this.tenantAppService.getRoleTypeOptions(
+              response?.body as RoleTypeConfiguration[]
+            );
+            this.tenantAppService?.setRoleTypeOption(this.roleTypeOptions);
+            if (this.functionType === TenantFunctionType.CREATE_ROLE) {
+              this.openCreateRoleForm();
+            }
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.createRoleScreenTexts?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Sets the dialog options for create role modal and calls openModal method.
+   * @return -returns nothing
+   * @memberof ViewTenantDetailsComponent
+   */
+  openCreateRoleForm(): void {
+    this.tenantAppService?.setTenantFunctionType(
+      TenantFunctionType?.CREATE_ROLE
+    );
+    this.functionType = TenantFunctionType.CREATE_ROLE;
+    if (this.roleTypeOptions.length > 0) {
+      const dialogOptions = {
+        heading: this.constants?.createRole?.heading,
+        isCloseNeeded: true,
+        componentReference: CreateModifyRoleComponent,
+        modalType: ModalType.FORM,
+      };
+      this.openModal(dialogOptions, 'ieeesa-create-modify-role');
+    } else {
+      this.getRoleTypes();
+    }
+  }
+  /**
+   * Sets the dialog options for create group type modal and calls openModal method.
+   * @return -returns nothing
+   * @memberof ViewTenantDetailsComponent
+   */
+  openCreateGroupTypeForm(): void {
+    this.tenantAppService?.setTenantFunctionType(
+      TenantFunctionType?.CREATE_GROUP_TYPE
+    );
+    this.functionType = TenantFunctionType.CREATE_GROUP_TYPE;
+    const dialogOptions = {
+      heading: this.constants?.createGroupType?.heading,
+      isCloseNeeded: true,
+      componentReference: CreateModifyGroupTypeComponent,
+      modalType: ModalType.FORM,
+    };
+    this.openModal(dialogOptions, 'ieeesa-create-modify-group-type');
+  }
+  /**
+   * Sets the dialog options for edit role modal and calls openModal method.
+   * @return -returns nothing
+   * @memberof ViewTenantDetailsComponent
+   */
+  openEditRoleForm(): void {
+    this.tenantAppService?.setTenantFunctionType(TenantFunctionType?.EDIT_ROLE);
+    this.functionType = TenantFunctionType.EDIT_ROLE;
+    const dialogOptions = {
+      heading: this.selectedRoleInfo?.roleName,
+      isCloseNeeded: true,
+      componentReference: CreateModifyRoleComponent,
+      modalType: ModalType.FORM,
+    };
+    this.openModal(dialogOptions, 'ieeesa-create-modify-role');
+  }
+  /**
+   * Sets the dialog options for edit tenant modal and calls openModal method.
+   * @return -returns nothing
+   * @memberof ViewTenantDetailsComponent
+   */
+  openEditTenantForm(): void {
+    this.tenantAppService?.setTenantFunctionType(TenantFunctionType?.EDIT);
+    this.functionType = TenantFunctionType.EDIT;
+    const dialogOptions = {
+      heading: this.tenantDetails?.appTitle,
+      isCloseNeeded: true,
+      componentReference: CreateTenantApplicationComponent,
+      modalType: ModalType.FORM,
+    };
+    this.openModal(dialogOptions, 'ieeesa-edit-tenant');
+  }
+
+  /**
+   * Opens modal component with received params and handles form submission success and errors.
+   * @param {*} dialogOptions
+   * @param {string} [className]
+   * @return -returns nothing
+   * @memberof ViewTenantsDetailsComponent
+   */
+  openModal(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    dialogOptions: any,
+    className?: string
+  ): void {
+    className = className ?? '';
+    this.dialogRef = this.dialog?.open(ModalComponent, {
+      data: dialogOptions,
+      width: '',
+      panelClass: ['ieeesa-modal-dialog', className],
+      ariaModal: true,
+    });
+    this.dialogRef?.componentInstance?.submitFormResponse
+      .pipe(takeUntil(this.destroy$))
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any, no-unused-vars
+      .subscribe((result: any) => {
+        this.dialogRef?.close();
+        switch (this.functionType) {
+          case TenantFunctionType?.EDIT: {
+            this.sharedService.showAlertMessage(
+              AlertType?.SUCCESS,
+              `${this.tenantDetails?.appTitle} ${this.editTenantScreenTexts?.message?.success?.submission}`
+            );
+            this.tenantDetails = {
+              ...(this.tenantAppService.getSelectedTenantInformation() as TenantBasicInfo),
+            };
+            break;
+          }
+          case TenantFunctionType?.CREATE_ROLE: {
+            const promptMessage = this.createRoleScreenTexts?.message?.success;
+            const roleInfo = this.tenantAppService?.getNewlyCreatedRoleInfo();
+            this.sharedService.showAlertMessage(
+              AlertType?.SUCCESS,
+              `${promptMessage?.submission1} ${roleInfo?.roleName} ${promptMessage?.submission2} ${this.tenantDetails?.appTitle}. ${promptMessage?.submission3}`
+            );
+            this.getRolesAndInitializeTableSchema();
+            break;
+          }
+          case TenantFunctionType?.EDIT_ROLE: {
+            const promptMessage = this.createRoleScreenTexts?.message?.success;
+            const roleInfo = this.tenantAppService?.getNewlyCreatedRoleInfo();
+            this.sharedService.showAlertMessage(
+              AlertType?.SUCCESS,
+              `${roleInfo?.roleName} ${promptMessage?.modify} ${this.tenantDetails?.appTitle}.`
+            );
+            this.getRolesAndInitializeTableSchema();
+            break;
+          }
+          case TenantFunctionType?.CREATE_GROUP_TYPE: {
+            this.sharedService.showAlertMessage(
+              AlertType?.SUCCESS,
+              `${this.createGroupTypeScreenTexts?.message?.success?.submissionPart1} ${this.tenantAppService.newlyCreatedGroupType.configFieldValue.name} ${this.createGroupTypeScreenTexts?.message?.success?.submissionPart2} ${this.tenantDetails?.appTitle}. `
+            );
+            this.tenantAppService.isGroupTypeAddedOrModified.next(true);
+            break;
+          }
+        }
+      });
+    this.dialogRef?.componentInstance?.formCancel
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.dialogRef?.close();
+        if (
+          this.tenantAppService.getTenantFunctionType() ===
+          TenantFunctionType.MAP_PERMISSION_AND_ROLE
+        )
+          this.getRolesAndInitializeTableSchema();
+      });
+    this.dialogRef?.componentInstance?.modalConfirm
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        if (
+          this.tenantAppService.getTenantFunctionType() ===
+          TenantFunctionType.MAP_PERMISSION_AND_ROLE
+        )
+          this.getRolesAndInitializeTableSchema();
+      });
+  }
+  /**
+   * Calls openTenantStatusConfirmationModal to change the status of tenant on slide toggle change.
+   * @param {SlideToggleOption} slideToggleOption
+   * @memberof ViewTenantDetailsComponent
+   */
+  onSlideToggleChange(slideToggleOption: SlideToggleOption): void {
+    this.openTenantStatusConfirmationModal(slideToggleOption?.checked);
+  }
+  /**
+   * Opens the confirmation modal to inactivate/reactivate the tenant.
+   * @param {boolean} isActivate
+   * @memberof ViewTenantDetailsComponent
+   */
+  openTenantStatusConfirmationModal(isActivate: boolean): void {
+    const confirmationInfo = this.constants?.viewTenants?.confirmationInfo;
+    const statusText = isActivate
+      ? confirmationInfo?.promptMessageActivate
+      : confirmationInfo?.promptMessageInactivate;
+    const updateTenantStatusModalOptions = {
+      leftButtonLabel: confirmationInfo?.leftButtonLabel,
+      rightButtonLabel: confirmationInfo?.rightButtonLabel,
+      promptMessage: `${confirmationInfo?.promptMessage} ${statusText} ${this.tenantDetails?.appTitle}?`,
+      actionButtonAlign: this.alignmentType?.MIDDLE,
+    };
+    this.dialogRef = this.dialog?.open(ModalConfirmationComponent, {
+      data: updateTenantStatusModalOptions,
+      width: 'auto',
+      autoFocus: 'dialog',
+      ariaLabel: confirmationInfo?.ariaLabel?.alert,
+    });
+    this.dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((result: boolean) => {
+        if (result) {
+          this.updateTenantStatus(isActivate);
+        } else {
+          this.setSlideToggleStatus(isActivate);
+        }
+      });
+  }
+  /**
+   * Opens the map permissions and roles modal.
+   * @memberof ViewTenantDetailsComponent
+   * @returns {void}
+   */
+  openMapRolesAndPermissionsForm(): void {
+    this.tenantAppService?.setTenantFunctionType(
+      TenantFunctionType?.MAP_PERMISSION_AND_ROLE
+    );
+    const dialogOptions = {
+      heading: this.mapRolesAndPermissionsScreenTexts.heading,
+      isCloseNeeded: true,
+      modalType: ModalType.FORM,
+      componentReference: RolesAndPermissionsMappingComponent,
+    };
+    this.openModal(dialogOptions, 'ieeesa-map-permissions-and-roles');
+  }
+  /**
+   * Updates the tenant status to the server using http request and display success/error message based on request response (success or failure).
+   * @param {boolean} isActivate
+   * @memberof ViewTenantDetailsComponent
+   */
+  updateTenantStatus(isActivate: boolean): void {
+    const updateTenantStatusRequestPayload: UpdateTenantStatusRequestPayload = {
+      payload: {
+        appId: this.tenantDetails?.appId,
+        status: isActivate,
+      },
+    };
+    this.tenantAppService
+      .updateTenantStatus(updateTenantStatusRequestPayload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: UpdateTenantStatusResponse) => {
+          this.dialogRef?.close();
+          if (res?.status) {
+            this.slideToggleOption.label = isActivate
+              ? this.tenantLabels?.active
+              : this.tenantLabels?.inactive;
+            this.tenantDetails.status = isActivate;
+            this.tenantDetails = Object.assign({}, this.tenantDetails);
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.setSlideToggleStatus(isActivate);
+          this.sharedService.handleErrors(
+            error,
+            this.constants?.viewTenants?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Sets slide toggle checked status and label.
+   * @param {boolean} isActivate
+   * @memberof ViewTenantDetailsComponent
+   */
+  setSlideToggleStatus(isActivate: boolean): void {
+    this.slideToggleOption.checked = !isActivate;
+    this.slideToggleOption.label = !isActivate
+      ? this.tenantLabels?.active
+      : this.tenantLabels?.inactive;
+  }
+
+  /**
+   * Gets the application/tenant types.
+   * @memberof ViewTenantDetailsComponent
+   */
+  getApplicationTypes(): void {
+    this.tenantAppService
+      .getApplicationTypes()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: GetAppTypesResponse) => {
+          if (response?.status) {
+            this.appTypeOptions =
+              this.tenantAppService.getApplicationTypeOptions(
+                response?.body as AppTypeConfig[]
+              );
+            this.tenantAppService.setApplicationType(
+              this.appTypeOptions as RadioOption[]
+            );
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.constants?.viewTenants?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Validates permission based access for provided feature.
+   * @param {PermissionType} permissionType
+   * @return {boolean}
+   * @memberof ViewTenantDetailsComponent
+   */
+  validateAccess(permissionType: PermissionType): boolean {
+    return this.tenantAppService.validateAccess(
+      permissionType,
+      this.userTenantsPermissions
+    );
+  }
+  /**
+   * Posts the details of the role to be deleted to the server using http request and display success/error message based on request response (success or failure).
+   * @memberof ViewTenantDetailsComponent
+   */
+  deleteRole(): void {
+    const deleteRoleRequestPayload: DeleteRoleRequestPayload = {
+      payload: {
+        appId: this.tenantDetails?.appId,
+        roleId: this.selectedRoleInfo?.roleId,
+      },
+    };
+    this.tenantAppService
+      .deleteRole(deleteRoleRequestPayload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: DeleteRoleResponse) => {
+          if (res?.status) {
+            this.sharedService.showAlertMessage(
+              AlertType?.SUCCESS,
+              `${this.selectedRoleInfo?.roleName} ${this.deleteRoleScreenTexts?.message?.success?.submission} ${this.tenantDetails?.appTitle}.`
+            );
+            this.getRolesAndInitializeTableSchema();
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.constants?.viewTenants?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Sets the role menu HTMLElement.
+   * @param {HTMLElement} menuButton
+   * @memberof ViewTenantDetailsComponent
+   */
+  selectedRoleMenuElement(menuButton: HTMLElement): void {
+    this.roleMenuElement = menuButton;
+  }
+  /**
+   * Opens the confirmation modal to get user confirmation to delete the role.
+   * @memberof ViewTenantDetailsComponent
+   */
+  openDeleteRoleModal(): void {
+    const confirmationInfo = this.constants?.viewTenants?.confirmationInfo;
+    const deleteRoleModalOptions = {
+      leftButtonLabel: confirmationInfo?.leftButtonLabel,
+      rightButtonLabel: confirmationInfo?.rightButtonLabel,
+      promptMessage: `${confirmationInfo?.deleteRoleConfirmationMessage} ${this.selectedRoleInfo?.roleName}? ${confirmationInfo?.deleteRolePromptMessage} ${this.tenantDetails?.appTitle}.`,
+      actionButtonAlign: this.alignmentType?.MIDDLE,
+    };
+    this.dialogRef = this.dialog?.open(ModalConfirmationComponent, {
+      data: deleteRoleModalOptions,
+      width: '25%',
+      panelClass: [
+        'ieeesa-modal-confirm-dialog',
+        'ieeesa-delete-role-confirm-dialog',
+      ],
+      autoFocus: 'dialog',
+      ariaLabel: confirmationInfo?.ariaLabel?.alert,
+    });
+    this.dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((result: boolean) => {
+        if (result) {
+          this.deleteRole();
+        } else this.roleMenuElement?.focus();
+      });
+  }
+  /**
+   * Performs necessary cleanup tasks, such as unsubscribing from subscription when the component is being destroyed.
+   * @memberof ViewTenantDetailsComponent
+   */
+  ngOnDestroy(): void {
+    this.roleTypeOptions = [];
+    this.tenantAppService?.setRoleTypeOption(this.roleTypeOptions);
+    this.destroy$?.next(true);
+    this.destroy$?.unsubscribe();
+  }
+}