@ieeesa-npm/tenants 0.4.2 → 0.4.4

package/src/lib/components/create-tenant-application/create-tenant-application.component.ts

@@ -0,0 +1,638 @@
+import {
+  Component,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  AlignType,
+  CheckboxOption,
+  FormGrid,
+  FormControlType,
+  AllowedFileTypes,
+  FileUploadPresignedUrl,
+  RadioOption,
+  DynamicFormComponent,
+  FormModel,
+  FileUploadService,
+} from '@ieeesa-npm/presentation';
+import { Subject, takeUntil } from 'rxjs';
+import * as screenTexts from '../../assets/constants.json';
+import { FormArray, FormGroup, Validators } from '@angular/forms';
+import { TenantsValidationPatterns } from '../../assets/tenant-validations';
+import { CommonModule } from '@angular/common';
+import { FormStatus } from '../../models/form-status.model';
+import { validColorValidator } from 'ngx-colors';
+import { Features, GetFeaturesResponse } from '../../models/features.model';
+import { TenantApplicationsService } from '../../services/tenant-applications.service';
+import {
+  AppTypeConfig,
+  GetAppTypesResponse,
+} from '../../models/app-type-config.model';
+import {
+  CreateTenantRequestPayload,
+  CreateTenantResponse,
+  NewTenantInfo,
+  TenantBasicInfo,
+} from '../../models/tenant.model';
+import { SharedService } from '@ieeesa-npm/shared';
+import { TenantFunctionType } from '../../models/tenant-function-type.model';
+
+@Component({
+  selector: 'ieeesa-create-tenant-application',
+  standalone: true,
+  imports: [CommonModule, DynamicFormComponent],
+  templateUrl: './create-tenant-application.component.html',
+  styleUrls: ['./create-tenant-application.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class CreateTenantApplicationComponent implements OnInit, OnDestroy {
+  destroy$ = new Subject<boolean>();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constants: any = screenTexts;
+  createTenantTexts = this.constants?.createTenant;
+  leftButtonLabel = this.createTenantTexts?.label?.leftButtonLabel;
+  rightButtonLabel = this.createTenantTexts?.label?.rightButtonLabel;
+  colWidth: FormGrid = { xs: 12, xl: 12, sm: 12, md: 12, lg: 12 };
+  createTenantFormGroup!: FormModel;
+  actionButtonAlign = AlignType.LEFT;
+  createTenantFormGroupRef!: FormGroup;
+  @ViewChild(DynamicFormComponent)
+  dynamicFormComponent!: DynamicFormComponent;
+  @Output() submitFormResponse = new EventEmitter();
+  @Output() formCancel = new EventEmitter();
+  featuresOptions!: CheckboxOption[];
+  appTypeOptions!: RadioOption[];
+  createTenantPayload!: CreateTenantRequestPayload;
+  fileUploadPresignedUrl!: string;
+  fileDownloadPresignedUrl!: string;
+  file!: File | FileList;
+  allowedFileTypes = [
+    AllowedFileTypes.JPG,
+    AllowedFileTypes.PNG,
+    AllowedFileTypes.SVG,
+  ];
+  selectedColor!: string;
+  selectedAppTypeOption!: RadioOption;
+  tenantFunctionType!: TenantFunctionType;
+  selectedTenantInfo!: TenantBasicInfo | undefined;
+  isAppLogoModified = false;
+  updatedTenantBasicInfo!: NewTenantInfo;
+  constructor(
+    // eslint-disable-next-line no-unused-vars
+    public fileUploadService: FileUploadService,
+    // eslint-disable-next-line no-unused-vars
+    private tenantAppService: TenantApplicationsService,
+    // eslint-disable-next-line no-unused-vars
+    private sharedService: SharedService // eslint-disable-next-line no-empty-function
+  ) {}
+  ngOnInit(): void {
+    this.tenantFunctionType = this.tenantAppService?.getTenantFunctionType();
+    this.selectedTenantInfo =
+      this.tenantAppService?.getSelectedTenantInformation();
+    this.fileUploadService.setApiBaseUrl(this.tenantAppService?.apiBaseUrl);
+    this.getFeatures();
+  }
+  /**
+   * Gets the list of features and updates the form control.
+   * @memberof CreateTenantApplicationComponent
+   */
+  getFeatures(): void {
+    this.tenantAppService
+      .getFeatures()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: GetFeaturesResponse) => {
+          if (response?.status) {
+            this.featuresOptions = this.tenantAppService.getFeatureOptions(
+              response?.body as Features[]
+            );
+            if (this.tenantFunctionType === TenantFunctionType.EDIT)
+              this.featuresOptions?.forEach((option: CheckboxOption) => {
+                if (
+                  this.selectedTenantInfo?.features?.some(
+                    (feature: Features) => feature?.featureId === option?.id
+                  )
+                ) {
+                  option.checked = true;
+                }
+              });
+            this.getApplicationTypes();
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.createTenantTexts?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Gets the application/tenant types and updates the form control.
+   * @memberof CreateTenantApplicationComponent
+   */
+  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[]
+              );
+            if (this.tenantFunctionType === TenantFunctionType.EDIT) {
+              this.appTypeOptions?.forEach((radioOption: RadioOption) => {
+                if (radioOption?.id === this.selectedTenantInfo?.appType) {
+                  radioOption.checked = true;
+                  this.selectedAppTypeOption = radioOption;
+                } else {
+                  radioOption.checked = false;
+                }
+              });
+            }
+            this.initializeCreateTenantFormGroup();
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.createTenantTexts?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Initialize the create tenant form group array.
+   * @memberof CreateTenantApplicationComponent
+   */
+  initializeCreateTenantFormGroup(): void {
+    this.createTenantFormGroup = {
+      formGroup: [
+        {
+          legend: '',
+          controls: [
+            {
+              type: FormControlType.INPUT,
+              label: this.createTenantTexts?.label?.appTitle + '*',
+              controlName: 'appTitle',
+              value:
+                this.tenantFunctionType === TenantFunctionType.EDIT
+                  ? this.selectedTenantInfo?.appTitle
+                  : '',
+              validation: [
+                Validators.required,
+                Validators.maxLength(
+                  TenantsValidationPatterns.appTitleMaxLength
+                ),
+              ],
+              supportMessage: this.createTenantTexts?.supportText?.appTitle,
+              requiredErrorMessage:
+                this.createTenantTexts?.message?.error?.required,
+              maxErrorMessage:
+                this.createTenantTexts?.message?.error?.limit?.appTitleMaxChars,
+              ariaLabel: this.createTenantTexts?.label?.ariaLabel?.appTitle,
+              ariaDescribedById:
+                this.createTenantTexts?.label?.ariaDescribedById?.appTitle,
+            },
+            {
+              type: FormControlType.INPUT,
+              label: `${this.createTenantTexts?.label?.appId}${
+                this.tenantFunctionType === TenantFunctionType.EDIT ? '' : '*'
+              }`,
+              controlName: 'appId',
+              value:
+                this.tenantFunctionType === TenantFunctionType.EDIT
+                  ? this.selectedTenantInfo?.appId
+                  : '',
+              validation: [
+                Validators.required,
+                Validators.maxLength(TenantsValidationPatterns.appIdMaxLength),
+                Validators.pattern(TenantsValidationPatterns.alphaNumeric),
+              ],
+              disabled: this.tenantFunctionType === TenantFunctionType.EDIT,
+              supportMessage:
+                this.tenantFunctionType === TenantFunctionType.EDIT
+                  ? ''
+                  : this.createTenantTexts?.supportText?.appId,
+              requiredErrorMessage:
+                this.createTenantTexts?.message?.error?.required,
+              maxErrorMessage:
+                this.createTenantTexts?.message?.error?.limit?.appIdMaxChars,
+              patternErrorMessage:
+                this.createTenantTexts?.message?.error?.pattern?.appId,
+              ariaLabel: this.createTenantTexts?.label?.ariaLabel?.appId,
+              ariaDescribedById:
+                this.createTenantTexts?.label?.ariaDescribedById?.appId,
+            },
+            {
+              type: FormControlType?.FILE_UPLOAD,
+              label: this.createTenantTexts?.label?.appLogo + '*',
+              controlName: 'appLogo',
+              requiredErrorMessage:
+                this.createTenantTexts?.message?.error?.required,
+              value:
+                this.tenantFunctionType === TenantFunctionType.EDIT
+                  ? this.selectedTenantInfo?.appLogo
+                  : '',
+              placeholder: '',
+              isFileSelected:
+                this.tenantFunctionType === TenantFunctionType.EDIT,
+              supportMessage: this.createTenantTexts?.supportText?.appLogo,
+              validation: [Validators.required],
+              ariaLabel: this.createTenantTexts?.label?.ariaLabel?.appLogo,
+              ariaDescribedById:
+                this.createTenantTexts?.label?.ariaDescribedById?.appLogo,
+              isMultiFileUpload: false,
+              maxUploadFileSize: 2,
+              maxFileSizeErrorMessage:
+                this.createTenantTexts?.message?.error?.limit?.appLogoMaxSize,
+              allowedFileTypeErrorMessage:
+                this.createTenantTexts?.message?.error?.invalidFile,
+              allowedFileTypes: this.allowedFileTypes,
+            },
+            {
+              type: FormControlType.INPUT,
+              label: this.createTenantTexts?.label?.appHeading + '*',
+              controlName: 'appHeading',
+              value:
+                this.tenantFunctionType === TenantFunctionType.EDIT
+                  ? this.selectedTenantInfo?.appHeading
+                  : '',
+              validation: [
+                Validators.required,
+                Validators.maxLength(
+                  TenantsValidationPatterns.appHeadingMaxLength
+                ),
+              ],
+              supportMessage: this.createTenantTexts?.supportText?.appHeading,
+              requiredErrorMessage:
+                this.createTenantTexts?.message?.error?.required,
+              maxErrorMessage:
+                this.createTenantTexts?.message?.error?.limit
+                  ?.appHeadingMaxChars,
+              patternErrorMessage:
+                this.createTenantTexts?.message?.error?.pattern?.email,
+              ariaLabel: this.createTenantTexts?.label?.ariaLabel?.appHeading,
+              ariaDescribedById:
+                this.createTenantTexts?.label?.ariaDescribedById?.appHeading,
+            },
+            {
+              type: FormControlType.TEXT_AREA,
+              label: this.createTenantTexts?.label?.appDescription + '*',
+              controlName: 'appDescription',
+              value:
+                this.tenantFunctionType === TenantFunctionType.EDIT
+                  ? this.selectedTenantInfo?.appDescription
+                  : '',
+              validation: [
+                Validators.required,
+                Validators.maxLength(
+                  TenantsValidationPatterns.appDescriptionMaxLength
+                ),
+              ],
+              supportMessage:
+                this.createTenantTexts?.supportText?.appDescription,
+              requiredErrorMessage:
+                this.createTenantTexts?.message?.error?.required,
+              maxErrorMessage:
+                this.createTenantTexts?.message?.error?.limit
+                  ?.appDescriptionMaxChars,
+              maxCharCount: TenantsValidationPatterns.appDescriptionMaxLength,
+              ariaLabel:
+                this.createTenantTexts?.label?.ariaLabel?.appDescription,
+              ariaDescribedById:
+                this.createTenantTexts?.label?.ariaDescribedById
+                  ?.appDescription,
+              ariaMultiline: true,
+              isResize: true,
+            },
+            {
+              type: FormControlType.COLOR_PICKER,
+              label: this.createTenantTexts?.label?.appBgColor + '*',
+              controlName: 'backgroundColor',
+              value: '',
+              defaultColor:
+                this.tenantFunctionType === TenantFunctionType.EDIT
+                  ? this.selectedTenantInfo?.backgroundColor
+                  : '',
+              placeholder: '',
+              supportMessage: this.createTenantTexts?.supportText?.appBgColor,
+              validation: [Validators.required, validColorValidator()],
+              requiredErrorMessage:
+                this.createTenantTexts?.message?.error?.required,
+              invalidColorErrorMessage:
+                this.createTenantTexts?.message?.error?.invalidColor,
+              ariaLabel: this.createTenantTexts?.supportText?.appBgColor,
+              ariaDescribedById:
+                this.createTenantTexts?.supportText?.appBgColor,
+            },
+            {
+              type: FormControlType.INPUT,
+              label: this.createTenantTexts?.label?.appHelpLink + '*',
+              controlName: 'appHelpLink',
+              value:
+                this.tenantFunctionType === TenantFunctionType.EDIT
+                  ? this.selectedTenantInfo?.appHelpLink
+                  : '',
+              validation: [
+                Validators.required,
+                Validators.pattern(TenantsValidationPatterns.url),
+              ],
+              supportMessage: this.createTenantTexts?.supportText?.appHelpLink,
+              requiredErrorMessage:
+                this.createTenantTexts?.message?.error?.required,
+              patternErrorMessage:
+                this.createTenantTexts?.message?.error?.pattern?.appHelpLink,
+              ariaLabel: this.createTenantTexts?.label?.ariaLabel?.appHelpLink,
+              ariaDescribedById:
+                this.createTenantTexts?.label?.ariaDescribedById?.appHelpLink,
+            },
+            {
+              type: FormControlType.CHECKBOX,
+              label: this.createTenantTexts?.label?.featuresList + '*',
+              controlName: 'features',
+              checkboxOptions: this.featuresOptions,
+              minSelectionRequired: 1,
+              ariaLabel: this.createTenantTexts?.label?.ariaLabel?.featuresList,
+              ariaDescribedById:
+                this.createTenantTexts?.label?.ariaDescribedById?.featuresList,
+              supportMessage: this.createTenantTexts?.supportText?.featuresList,
+              requiredErrorMessage:
+                this.createTenantTexts?.message?.error?.required,
+              validation: [Validators.required],
+            },
+            {
+              type: FormControlType.INPUT,
+              label: this.createTenantTexts?.label?.domainURL + '*',
+              controlName: 'appDomainUrl',
+              value:
+                this.tenantFunctionType === TenantFunctionType.EDIT
+                  ? this.selectedTenantInfo?.appDomainUrl
+                  : '',
+              validation: [
+                Validators.required,
+                Validators.pattern(TenantsValidationPatterns.url),
+              ],
+              supportMessage: this.createTenantTexts?.supportText?.domainURL,
+              requiredErrorMessage:
+                this.createTenantTexts?.message?.error?.required,
+              patternErrorMessage:
+                this.createTenantTexts?.message?.error?.pattern?.appDomainUrl,
+              ariaLabel: this.createTenantTexts?.label?.ariaLabel?.domainURL,
+              ariaDescribedById:
+                this.createTenantTexts?.label?.ariaDescribedById?.domainURL,
+            },
+            {
+              type: FormControlType.RADIO,
+              label: `${this.createTenantTexts?.label?.appType}${
+                this.tenantFunctionType === TenantFunctionType.EDIT ? '' : '*'
+              }`,
+              controlName: 'appType',
+              value:
+                this.tenantFunctionType === TenantFunctionType.EDIT
+                  ? this.selectedTenantInfo?.appType
+                  : '',
+              disabled: this.tenantFunctionType === TenantFunctionType.EDIT,
+              radioOptions: this.appTypeOptions,
+              validation: [Validators.required],
+              requiredErrorMessage:
+                this.createTenantTexts?.message?.error?.required,
+              ariaLabel: this.createTenantTexts?.label?.ariaLabel?.appType,
+              ariaDescribedById:
+                this.createTenantTexts?.label?.ariaDescribedById?.appType,
+            },
+          ],
+        },
+      ],
+    };
+  }
+
+  /**
+   * Creates Payload and gets presigned url for file upload on form submission.
+   * @param {FormGroup[]} form
+   * @memberof CreateTenantApplicationComponent
+   */
+  onCreateTenantFormSubmit(form: FormGroup[]): void {
+    form[0]?.markAllAsTouched();
+    if (form[0].status === FormStatus.VALID) {
+      this.createTenantPayload = this.getCreateTenantPayload(
+        form[0].getRawValue()
+      );
+      if (
+        this.tenantFunctionType === TenantFunctionType.EDIT &&
+        (!this.isAppLogoModified || !this.file)
+      ) {
+        this.editTenant();
+      } else if (this.file) {
+        this.getFileUploadPresignedUrl(
+          this.file,
+          form[0]?.controls['appId']?.value
+        );
+      } else {
+        this.createTenant();
+      }
+    }
+  }
+
+  /**
+   * Creates a new tenant on form submission.
+   * @memberof CreateTenantApplicationComponent
+   */
+  createTenant(): void {
+    this.tenantAppService
+      .createTenant(this.createTenantPayload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: CreateTenantResponse) => {
+          if (response.status) {
+            this.tenantAppService.setNewTenantInfo(
+              this.createTenantPayload?.payload
+            );
+            this.submitFormResponse.emit(response);
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.createTenantTexts?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Updates the modified tenant information on form submission.
+   * @memberof CreateTenantApplicationComponent
+   */
+  editTenant(): void {
+    this.tenantAppService
+      .editTenant(this.createTenantPayload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: CreateTenantResponse) => {
+          if (response?.status) {
+            this.updatedTenantBasicInfo = this.createTenantPayload?.payload;
+            this.updatedTenantBasicInfo.features =
+              this.tenantAppService.getFeaturesList(this.featuresOptions);
+            this.tenantAppService.setSelectedTenantInformation(
+              this.updatedTenantBasicInfo as TenantBasicInfo
+            );
+            this.submitFormResponse.emit(response);
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.createTenantTexts?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Constructs create tenant payload from the form data and returns.
+   * @param {*} formData
+   * @return {CreateTenantRequestPayload}
+   * @memberof CreateTenantApplicationComponent
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getCreateTenantPayload(formData: any): CreateTenantRequestPayload {
+    const payload: CreateTenantRequestPayload = {
+      payload: {
+        appTitle: formData?.appTitle,
+        appId: formData?.appId,
+        appHeading: formData?.appHeading,
+        appDescription: formData?.appDescription,
+        backgroundColor: formData?.backgroundColor,
+        appLogo: formData?.appLogo,
+        appDomainUrl: formData?.appDomainUrl,
+        appHelpLink: formData?.appHelpLink,
+        appType: this.selectedAppTypeOption?.id as string,
+        features: this.tenantAppService.getFeatureIds(this.featuresOptions),
+      },
+    };
+    return payload;
+  }
+
+  /**
+   * Gets create tenant form group reference and disables default features.
+   * @param {FormGroup[]} form
+   * @memberof CreateTenantApplicationComponent
+   */
+  getCreateTenantFormGroupRef(form: FormGroup[]): void {
+    this.createTenantFormGroupRef = form[0];
+    const featuresFormArray = this.createTenantFormGroupRef?.controls[
+      'features'
+    ] as FormArray;
+    this.featuresOptions?.forEach((option: CheckboxOption, index: number) => {
+      if (option?.disabled) {
+        featuresFormArray?.at(index).disable();
+      }
+    });
+  }
+  /**
+   * Updates createTenantFormGroupRef on add or edit tenant form change event.
+   * @param {FormGroup[]} form
+   * @memberof CreateTenantApplicationComponent
+   */
+  onCreateTenantFormChange(form: FormGroup[]): void {
+    this.createTenantFormGroupRef = form[0];
+    this.isAppLogoModified =
+      this.createTenantFormGroupRef?.controls['appLogo']?.dirty &&
+      this.tenantFunctionType === TenantFunctionType.EDIT;
+  }
+  /**
+   * Emits form cancel event.
+   * @memberof CreateTenantApplicationComponent
+   */
+  onFormCancel(): void {
+    this.formCancel.emit();
+  }
+
+  /**
+   * Gets the selected file when the file is browsed and on formFileUpload event is triggered.
+   * @param {File | FileList} file
+   */
+  onFormFileUpload(file: File | FileList): void {
+    this.file = file;
+  }
+  /**
+   * Gets pre-signed URL to upload the selected file to AWS S3 bucket.
+   * @param {File | FileList} file
+   */
+  getFileUploadPresignedUrl(file: File | FileList, appId: string): void {
+    this.fileUploadService
+      .getFileUploadPresignedUrl(file, appId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: FileUploadPresignedUrl) => {
+          this.fileUploadPresignedUrl = response?.body;
+          if (this.fileUploadPresignedUrl) this.uploadFileToS3(file);
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function, no-empty-function
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.createTenantTexts?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Uploads the file to AWS S3 bucket and submit the form data to API to create new tenant.
+   * @param {File | FileList} file
+   */
+  uploadFileToS3(file: File | FileList): void {
+    this.fileUploadService
+      .uploadFileToS3(this.fileUploadPresignedUrl, file)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+        next: (response: any) => {
+          this.fileUploadService.setFileUploadStatus(true);
+          // eslint-disable-next-line no-unused-expressions
+          this.tenantFunctionType === TenantFunctionType.EDIT
+            ? this.editTenant()
+            : this.createTenant();
+        },
+        // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.fileUploadService.setFileUploadStatus(false);
+          this.sharedService.handleErrors(
+            error,
+            this.createTenantTexts?.errors
+          );
+        },
+      });
+  }
+  /**
+   * Triggers when the color picker values has been changed.
+   * @param {string} color
+   */
+  onColorPickerChange(color: string): void {
+    this.selectedColor = color;
+  }
+  /**
+   * Triggers when the radio option has been changed.
+   * @param {RadioOption} radioOption
+   */
+  onRadioOptionSelected(radioOption: RadioOption): void {
+    this.selectedAppTypeOption = radioOption;
+  }
+  /**
+   * Implementation of ngOnDestroy lifecycle hook method to unsubscribe the open observable subscriptions.
+   * @memberof CreateTenantApplicationComponent
+   */
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.unsubscribe();
+  }
+}

package/src/lib/components/roles-and-permissions-mapping/roles-and-permissions-mapping.component.html

@@ -0,0 +1,22 @@
+<ieeesa-dynamic-form
+  [formGroups]="formGroup"
+  [colWidth]="colWidth"
+  [isSubmitButtonDisabled]="true"
+  [isLegendVisible]="true"
+  [leftButtonLabel]="leftButtonLabel"
+  [rightButtonLabel]="rightButtonLabel"
+  [isLeftButtonNeeded]="true"
+  [actionButtonAlign]="actionButtonAlign"
+  (dropdownChange)="onRoleOrPermissionSelected($event)"
+  (formSubmit)="onMapAndPermissionsFormSubmit()"
+  (formLeftButtonClicked)="onMapAndPermissionsFormCancel()"
+>
+  <ieeesa-data-table
+    component
+    *ngIf="tableData.length"
+    [columnSchemaInfo]="tableColumnSchema"
+    [tableColumnsHeaderText]="tableHeading"
+    [tableDataInfo]="tableData"
+    (rowSlideToggle)="roleOrPermissionStatusChange($event)"
+  ></ieeesa-data-table>
+</ieeesa-dynamic-form>