Added collapsible functionality to toggle all section cards (#1741)

Co-authored-by: Yagnik Hingrajiya <[email protected]>
CarnegieLearningWeb · Jul 10, 2024 · 8016750 · 8016750
1 parent e9c7029
commit 8016750
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 13 deletions.
diff --git a/...s-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html b/...s-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html
@@ -3,21 +3,29 @@
     <app-common-section-card-list class="common-section-card-list">
       <app-feature-flag-overview-details-section-card
         [data]="featureFlag"
+        [isSectionCardExpanded]="isSectionCardExpanded"
+        (sectionCardExpandChange)="onSectionCardExpandChange($event)"
         section-card
       ></app-feature-flag-overview-details-section-card>
       <app-feature-flag-inclusions-section-card
         [data]="featureFlag"
+        [isSectionCardExpanded]="isSectionCardExpanded"
         *ngIf="(activeTabIndex$ | async) === 0"
         section-card
         >inclusions-card</app-feature-flag-inclusions-section-card
       >
       <app-feature-flag-exclusions-section-card
         [data]="featureFlag"
+        [isSectionCardExpanded]="isSectionCardExpanded"
         *ngIf="(activeTabIndex$ | async) === 0"
         section-card
         >exclusions-card</app-feature-flag-exclusions-section-card
       >
-      <app-feature-flag-exposures-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 1" section-card
+      <app-feature-flag-exposures-section-card
+        [data]="featureFlag"
+        [isSectionCardExpanded]="isSectionCardExpanded"
+        *ngIf="(activeTabIndex$ | async) === 1"
+        section-card
         >exposures-card</app-feature-flag-exposures-section-card
       >
     </app-common-section-card-list>

diff --git a/...ils-page/feature-flag-details-page-content/feature-flag-details-page-content.component.ts b/...ils-page/feature-flag-details-page-content/feature-flag-details-page-content.component.ts
@@ -28,6 +28,7 @@ import { SharedModule } from '../../../../../../shared/shared.module';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagDetailsPageContentComponent implements OnInit, OnDestroy {
+  isSectionCardExpanded = true;
   activeTabIndex$ = this.featureFlagsService.activeDetailsTabIndex$;
   featureFlag$: Observable<FeatureFlag>;
 
@@ -42,6 +43,11 @@ export class FeatureFlagDetailsPageContentComponent implements OnInit, OnDestroy
 
     this.featureFlag$ = this.featureFlagsService.selectedFeatureFlag$;
   }
+
+  onSectionCardExpandChange(expanded: boolean) {
+    this.isSectionCardExpanded = expanded;
+  }
+
   ngOnDestroy() {
     this.featureFlagIdSub.unsubscribe();
   }

diff --git a/...nt/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts b/...nt/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts
@@ -26,8 +26,8 @@ import { FeatureFlagsService } from '../../../../../../../core/feature-flags/fea
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagExclusionsSectionCardComponent {
+  @Input() isSectionCardExpanded;
   tableRowCount$ = this.featureFlagService.selectFeatureFlagExclusionsLength$;
-  isSectionCardExpanded = true;
 
   constructor(private featureFlagService: FeatureFlagsService) {}
 

diff --git a/...tent/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.ts b/...tent/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.ts
@@ -1,5 +1,9 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { CommonSectionCardActionButtonsComponent, CommonSectionCardComponent, CommonSectionCardTitleHeaderComponent } from '../../../../../../../shared-standalone-component-lib/components';
+import {
+  CommonSectionCardActionButtonsComponent,
+  CommonSectionCardComponent,
+  CommonSectionCardTitleHeaderComponent,
+} from '../../../../../../../shared-standalone-component-lib/components';
 import { FeatureFlag } from '../../../../../../../core/feature-flags/store/feature-flags.model';
 import { TranslateModule } from '@ngx-translate/core';
 import { FeatureFlagExposuresDataComponent } from './feature-flag-exposures-data/feature-flag-exposures-data.component';
@@ -8,14 +12,21 @@ import { CommonModule } from '@angular/common';
 @Component({
   selector: 'app-feature-flag-exposures-section-card',
   standalone: true,
-  imports: [CommonSectionCardComponent, CommonSectionCardTitleHeaderComponent, CommonSectionCardActionButtonsComponent, CommonModule, TranslateModule, FeatureFlagExposuresDataComponent],
+  imports: [
+    CommonSectionCardComponent,
+    CommonSectionCardTitleHeaderComponent,
+    CommonSectionCardActionButtonsComponent,
+    CommonModule,
+    TranslateModule,
+    FeatureFlagExposuresDataComponent,
+  ],
   templateUrl: './feature-flag-exposures-section-card.component.html',
   styleUrl: './feature-flag-exposures-section-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagExposuresSectionCardComponent {
   @Input() data: FeatureFlag;
-  isSectionCardExpanded = true;
+  @Input() isSectionCardExpanded;
 
   onSectionCardExpandChange(isSectionCardExpanded: boolean) {
     this.isSectionCardExpanded = isSectionCardExpanded;

diff --git a/...nt/feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component.ts b/...nt/feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component.ts
@@ -26,6 +26,7 @@ import { FeatureFlagsService } from '../../../../../../../core/feature-flags/fea
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagInclusionsSectionCardComponent {
+  @Input() isSectionCardExpanded;
   tableRowCount$ = this.featureFlagService.selectFeatureFlagInclusionsLength$;
 
   constructor(private featureFlagService: FeatureFlagsService) {}
@@ -35,8 +36,6 @@ export class FeatureFlagInclusionsSectionCardComponent {
     { name: 'Delete', disabled: false },
   ];
 
-  isSectionCardExpanded = true;
-
   addIncludeListClicked() {
     console.log('add Include List Clicked');
   }

diff --git a/...lag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts b/...lag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 import {
   CommonSectionCardActionButtonsComponent,
   CommonSectionCardComponent,
@@ -28,19 +28,17 @@ import { DialogService } from '../../../../../../../shared/services/common-dialo
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagOverviewDetailsSectionCardComponent {
+  isSectionCardExpanded = true;
+  @Output() sectionCardExpandChange = new EventEmitter<boolean>();
   featureFlag$ = this.featureFlagService.selectedFeatureFlag$;
   flagOverviewDetails$ = this.featureFlagService.selectedFlagOverviewDetails;
 
   menuButtonItems: IMenuButtonItem[] = [
     { name: 'Edit', disabled: false },
     { name: 'Delete', disabled: false },
   ];
-  isSectionCardExpanded = true;
 
-  constructor(
-    private dialogService: DialogService,
-    private featureFlagService: FeatureFlagsService,
-  ) {}
+  constructor(private dialogService: DialogService, private featureFlagService: FeatureFlagsService) {}
 
   get FEATURE_FLAG_STATUS() {
     return FEATURE_FLAG_STATUS;
@@ -82,5 +80,6 @@ export class FeatureFlagOverviewDetailsSectionCardComponent {
 
   onSectionCardExpandChange(isSectionCardExpanded: boolean) {
     this.isSectionCardExpanded = isSectionCardExpanded;
+    this.sectionCardExpandChange.emit(this.isSectionCardExpanded);
   }
 }