@ieeesa-npm/tenants 0.4.2 → 0.4.4

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

@@ -0,0 +1,109 @@
+import { Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as screenText from '../../assets/constants.json';
+import { TenantApplicationsService } from '../../services/tenant-applications.service';
+import { BreakpointObserverService } from '@ieeesa-npm/utility';
+import { Subject, takeUntil } from 'rxjs';
+import {
+  FileUploadService,
+  ImagePreviewComponent,
+} from '@ieeesa-npm/presentation';
+import { SharedService } from '@ieeesa-npm/shared';
+import { TenantBasicInfo } from '../../models/tenant.model';
+
+@Component({
+  selector: 'ieeesa-tenant-basic-details',
+  standalone: true,
+  imports: [CommonModule, ImagePreviewComponent],
+  templateUrl: './tenant-basic-details.component.html',
+  styleUrls: ['./tenant-basic-details.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class TenantBasicDetailsComponent implements OnDestroy {
+  destroy$: Subject<boolean> = new Subject<boolean>();
+  isMobileView = false;
+  constants = screenText;
+  basicDetailTexts = this.constants?.viewTenants?.tenantBasicDetails?.label;
+  tenantBackgroundColor!: string;
+  selectedAppType!: string;
+  selectedAppTypeLabel!: string;
+  logo!: string;
+  basicInfo!: TenantBasicInfo;
+  imageUrl!: string;
+  @Input()
+  set tenantDetails(value: TenantBasicInfo) {
+    this.basicInfo = value;
+    this.logo = this.basicInfo?.appLogo as string;
+    this.selectedAppType = this.basicInfo?.appType as string;
+    if (this.basicInfo) {
+      this.getAppType();
+      this.getFileDownloadPresignedUrls(this.logo);
+    }
+  }
+
+  constructor(
+    // eslint-disable-next-line no-unused-vars
+    public tenantAppService: TenantApplicationsService,
+    // eslint-disable-next-line no-unused-vars
+    private breakpointObserverService: BreakpointObserverService,
+    // eslint-disable-next-line no-unused-vars
+    private fileUploadService: FileUploadService,
+    // eslint-disable-next-line no-unused-vars
+    private sharedService: SharedService
+  ) {
+    this.breakpointObserverService
+      .getBreakpoint()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((result: { matches: boolean }) => {
+        this.isMobileView = result?.matches;
+      });
+    this.tenantAppService.getApplicationType();
+    this.fileUploadService.setApiBaseUrl(this.tenantAppService?.apiBaseUrl);
+  }
+
+  /**
+   * Gets the application types.
+   * @memberof TenantBasicDetailsComponent
+   */
+  getAppType(): void {
+    const appTypes = this.tenantAppService.getApplicationType();
+    if (this.basicInfo) {
+      const selectedType = appTypes?.find(
+        ({ id }) => id === this.basicInfo?.appType
+      );
+      this.selectedAppTypeLabel = selectedType?.label as string;
+    }
+  }
+
+  /**
+   * Retrieves presigned URL for downloading files from Amazon S3 bucket.
+   * @memberof TenantBasicDetailsComponent
+   */
+  getFileDownloadPresignedUrls(fileName: string): void {
+    this.fileUploadService
+      .getFileDownloadPresignedUrls(fileName)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        next: (response: any) => {
+          this.imageUrl = response?.body;
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.constants?.viewTenants?.errors
+          );
+        },
+      });
+  }
+
+  /**
+   * Performs necessary cleanup tasks, such as unsubscribing from subscription when the component is being destroyed.
+   * @memberof ViewTenantDetailsComponent
+   */
+  ngOnDestroy(): void {
+    this.destroy$?.next(true);
+    this.destroy$?.unsubscribe();
+  }
+}

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

@@ -0,0 +1,195 @@
+<div
+  class="ieeesa-view-tenant-info px-4 pb-4"
+  [ngClass]="
+    isMobileView
+      ? 'ieeesa-view-tenant-info--bg-white'
+      : 'ieeesa-view-tenant-info--bg-blue'
+  "
+>
+  <div
+    class="d-flex justify-content-between gap-lg-4 gap-md-3 gap-sm-2 gap-3"
+    [ngClass]="isMobileView ? 'flex-column gap-2 pb-3' : 'align-item-center'"
+  >
+    <div
+      class="d-flex gap-lg-4 gap-md-3 gap-sm-3 gap-3 ps-0 align-items-md-center align-items-xl-center"
+      [ngClass]="isMobileView ? 'flex-column' : ''"
+    >
+      <p
+        class="mb-0 ieeesa-headline-lg-32 py-3"
+        [ngClass]="isMobileView ? '' : 'ieeesa-view-tenant-info--title'"
+      >
+        {{ tenantDetails?.appTitle }}
+      </p>
+      <div class="d-flex gap-lg-2 gap-md-2 gap-sm-2 gap-2">
+        <span
+          class="mb-0 ieeesa-title-sm-14 mt-1"
+          [ngClass]="isMobileView ? 'p-0' : 'ieeesa-view-tenant-info--app-id'"
+        >
+          {{ tenantLabels?.appId }}:
+        </span>
+        {{ tenantDetails?.appId }}
+        <ng-container *ngIf="tenantDetails?.appId !== tenantLabels?.saAppId">
+          <mat-divider [vertical]="true"></mat-divider>
+          <span
+            class="mb-0 mt-1 ieeesa-title-sm-14 ieeesa-view-tenant-info--app-status"
+            [ngClass]="isMobileView ? 'p-0' : ''"
+          >
+            {{ tenantLabels?.status }}:
+          </span>
+          <ieeesa-slide-toggle
+            [slideToggle]="slideToggleOption"
+            (slideToggleChange)="onSlideToggleChange($event)"
+          ></ieeesa-slide-toggle>
+        </ng-container>
+      </div>
+    </div>
+    <a
+      class="ieeesa-btn-label-lg-bold-16 text-decoration-none mt-lg-3 mt-xl-6 p-sm-0 p-md-0"
+      href="javascript:void(0)"
+      rel="noopener noreferrer"
+      [routerLink]="viewTenantsRouteUrl"
+      [ngClass]="
+        isMobileView
+          ? 'ieeesa-view-tenant-info--link-mobile'
+          : 'ieeesa-view-tenant-info--link'
+      "
+      >{{ tenantLabels?.viewAllApps }}</a
+    >
+  </div>
+  <div
+    class="ieeesa-view-tenant-info__accordion ieeesa-view-tenant-info__accordion--blue-bg"
+    [ngClass]="isMobileView ? 'ieeesa-view-tenant-info__accordion--info' : ''"
+  >
+    <ng-container
+      *ngFor="
+        let accordionInfo of accordionInfoList;
+        trackBy: trackByAccordionFn
+      "
+    >
+      <ng-container [ngSwitch]="accordionInfo.id">
+        <ng-container *ngSwitchCase="accordionDetails.BASIC_DETAILS">
+          <ieeesa-accordion
+            [accordionInfo]="accordionInfo"
+            class="ieeesa-view-tenant-info__accordion-info"
+            (accordionOpened)="showTenantDetails(accordionInfo, $event)"
+          >
+            <ieeesa-icon-button
+              *ngIf="
+                isBasicDetailsExpanded &&
+                validateAccess(permissionType.MANAGE_TENANT)
+              "
+              actions
+              class="ieeesa-button"
+              [iconButton]="editButton"
+              (iconButtonClick)="openEditTenantForm()"
+            ></ieeesa-icon-button>
+            <ng-container component *ngIf="isBasicDetailsExpanded">
+              <ieeesa-tenant-basic-details
+                [tenantDetails]="tenantDetails"
+              ></ieeesa-tenant-basic-details>
+            </ng-container>
+          </ieeesa-accordion>
+        </ng-container>
+        <ng-container *ngSwitchCase="accordionDetails.ROLES_AND_PERMISSIONS">
+          <ieeesa-accordion
+            [accordionInfo]="accordionInfo"
+            class="ieeesa-view-tenant-info__roles-and-permissions"
+            (accordionOpened)="showTenantDetails(accordionInfo, $event)"
+          >
+            <div
+              actions
+              *ngIf="isRolesAndPermissionsExpanded"
+              class="d-flex gap-3"
+              [ngClass]="
+                isMobileView ? 'mb-3 px-4' : 'ieeesa-view-tenant-info__actions'
+              "
+            >
+              <button
+                mat-button
+                class="mat-tertiary-button"
+                [ngClass]="isMobileView ? 'p-0' : 'px-2 py-2'"
+                (click)="openCreateRoleForm()"
+                *ngIf="validateAccess(permissionType.MANAGE_TENANT)"
+              >
+                {{
+                  constants.viewRolesAndPermissions.actionButtonLabels.addRole
+                }}
+              </button>
+              <button
+                mat-button
+                class="mat-tertiary-button"
+                (click)="openMapRolesAndPermissionsForm()"
+                [ngClass]="isMobileView ? 'p-0' : 'px-2 py-2'"
+              >
+                {{
+                  constants.viewRolesAndPermissions.actionButtonLabels
+                    .mapPermissionsRoles
+                }}
+              </button>
+            </div>
+            <ng-container component *ngIf="isRolesAndPermissionsExpanded">
+              <mat-divider
+                class="ieeesa-view-tenant-info__roles-and-permissions__divider"
+              ></mat-divider>
+              <ieeesa-data-table
+                *ngIf="columnSchema.length"
+                [tableDataInfo]="tableData"
+                [headerElementClassName]="headerElementClassName"
+                [columnSchemaInfo]="columnSchema"
+                [caption]="rolesAndPermissionsTableCaption"
+                [paginatorConfig]="paginatorConfig"
+                [tableActions]="tableActions"
+                [isScrollSupportMessageNeeded]="true"
+                [tableColumnActionMenuSize]="iconSize"
+                [tableColumnActions]="menuItems"
+                [customStickyHeaderNeeded]="true"
+                [tableColumnsHeaderText]="rolesAndPermissionsTableHeaderName"
+                [scrollbarSupportMessage]="
+                  rolesAndPermissionsTableSupportMessage
+                "
+                [verticalColumnHeaderNumber]="permissionsColumnClassNumber"
+                (paginationChange)="onTablePaginationChange($event)"
+                (tableColumnMenuActionClick)="onRoleMenuClick($event)"
+                (tableColumnMenuToggleButton)="selectedRoleMenuElement($event)"
+              ></ieeesa-data-table>
+            </ng-container>
+          </ieeesa-accordion>
+        </ng-container>
+        <ng-container *ngSwitchCase="accordionDetails.GROUP_TYPES">
+          <ieeesa-accordion
+            [accordionInfo]="accordionInfo"
+            class="ieeesa-view-tenant-info__group-types"
+            (accordionOpened)="showTenantDetails(accordionInfo, $event)"
+          >
+            <div
+              actions
+              *ngIf="isGroupTypesExpanded"
+              class="d-flex gap-3"
+              [ngClass]="
+                isMobileView ? 'mb-3 px-4' : 'ieeesa-view-tenant-info__actions'
+              "
+            >
+              <button
+                mat-button
+                class="mat-tertiary-button p-2"
+                *ngIf="validateAccess(permissionType.MANAGE_TENANT)"
+                (click)="openCreateGroupTypeForm()"
+              >
+                {{ constants.viewGroupTypes.actionButtonLabels.addGroupType }}
+              </button>
+            </div>
+            <ng-container component *ngIf="isGroupTypesExpanded">
+              <ieeesa-view-tenant-group-types></ieeesa-view-tenant-group-types>
+            </ng-container>
+          </ieeesa-accordion>
+        </ng-container>
+        <ng-container *ngSwitchDefault>
+          <ieeesa-accordion
+            [accordionInfo]="accordionInfo"
+            (accordionOpened)="showTenantDetails(accordionInfo, $event)"
+          ></ieeesa-accordion>
+        </ng-container>
+      </ng-container>
+    </ng-container>
+  </div>
+</div>

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

@@ -0,0 +1,163 @@
+@import "styles.scss";
+.ieeesa-view-tenant-info {
+  background-color: $ieeesa-background-color-gray;
+  &--bg-white {
+    background-color: $ieeesa-white;
+    padding: 1em 1.5em 0em 1.5em;
+  }
+  &__actions {
+    top: 15px;
+    margin-right: 20px;
+    position: absolute;
+    right: 0;
+  }
+  &--title,
+  &--action {
+    padding: 0.75em 0em;
+  }
+  &--link {
+    padding: 1em 0.75em 1.3em 0em !important;
+  }
+  &--link-mobile {
+    max-width: fit-content;
+  }
+  &--app-id,
+  &--app-status {
+    color: $ieeesa-on-surface-variant-color;
+  }
+  &__accordion {
+    background-color: $ieeesa-white;
+    box-shadow: $ieeesa-box-shadow-15;
+    padding: 1.5em 0.75em;
+    &--bg-white {
+      background-color: $ieeesa-white;
+      box-shadow: none;
+    }
+    &--info {
+      padding: 1em 1em 1.5em 1em;
+    }
+  }
+  &__accordion-info {
+    .mat-accordion {
+      .mat-expansion-panel-spacing.mat-expanded {
+        position: relative;
+      }
+      .mat-expansion-panel-body {
+        padding: 1.5em 1.5em 1.5em 2.25em;
+      }
+    }
+    .ieeesa-button {
+      position: absolute;
+      top: 1.25em;
+      right: 0;
+      svg {
+        width: 1.3em !important;
+        height: 1.3em !important;
+      }
+    }
+  }
+  .mat-divider-vertical {
+    margin: 0em;
+    height: 1.4em;
+    color: $ieeesa-outline-variant;
+    width: 0.063em;
+    border-right-color: $ieeesa-outline-variant;
+  }
+  .ieeesa-slide-toggle-field .mat-mdc-slide-toggle .mdc-label {
+    color: $ieeesa-black !important;
+  }
+  &__roles-and-permissions {
+    .ieeesa-accordion {
+      .mat-accordion {
+        .mat-expansion-panel-spacing.mat-expanded {
+          position: relative;
+        }
+      }
+    }
+    &__divider {
+      margin-top: 12px !important;
+      margin-bottom: 16px !important;
+      border-top: 1px solid $ieeesa-dark-gray !important;
+    }
+    .mat-mdc-header-cell {
+      white-space: nowrap;
+    }
+    .mat-expansion-panel-body,
+    .ieeesa-data-table {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+    .ieeesa-data-table {
+      .mat-column-permissions {
+        min-width: 12.5em;
+        padding: 16px !important;
+      }
+      &__content {
+        margin-top: 0px !important;
+      }
+      &__column-menu {
+        .mat-mdc-icon-button.mat-mdc-button-base {
+          padding: 6px;
+          width: 24px;
+          height: 24px;
+        }
+      }
+      &__columns-header-text {
+        padding: 8px 16px;
+        background: $ieeesa-data-table-columns-header;
+        box-shadow: $ieeesa-box-shadow-18;
+      }
+    }
+    .mat-mdc-paginator-container {
+      padding: 0;
+      flex-wrap: nowrap;
+    }
+    .mdc-notched-outline {
+      &__trailing,
+      &__notch,
+      &__leading {
+        border: none !important;
+      }
+    }
+    .mat-mdc-paginator-page-size,
+    .mat-mdc-paginator-page-size-label,
+    .mat-mdc-paginator-page-size-select,
+    .mat-mdc-paginator-range-label {
+      margin: 0;
+    }
+    .at-mdc-select-min-line,
+    .mat-mdc-paginator-range-label {
+      color: $ieeesa-brand-dark-grey;
+    }
+    .mat-mdc-paginator-page-size-label {
+      position: relative;
+      color: $ieeesa-dark-grey;
+      left: 2em;
+    }
+  }
+  &__group-types {
+    .ieeesa-accordion {
+      .mat-accordion {
+        .mat-expansion-panel-spacing.mat-expanded {
+          position: relative;
+        }
+      }
+    }
+    .mat-mdc-header-cell {
+      white-space: nowrap;
+    }
+    .mat-expansion-panel-body,
+    .ieeesa-data-table {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+  }
+}
+.ieeesa-menu {
+  &__item:not(:last-of-type) {
+    margin-bottom: 0px !important;
+  }
+  .mat-mdc-menu-item {
+    min-height: 35px !important;
+  }
+}