-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Common Details Overview Section Card Content (#1599)
* Created a reusable component for content in common section card * Removed Data array processing in CommonSectionCardContentComponent and refactored its html --------- Co-authored-by: khanjan <[email protected]>
- Loading branch information
Showing
9 changed files
with
94 additions
and
13 deletions.
There are no files selected for viewing
13 changes: 9 additions & 4 deletions
13
...s-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,12 @@ | ||
| <app-common-section-card-list> | ||
| <app-feature-flag-overview-details-section-card section-card></app-feature-flag-overview-details-section-card> | ||
| <app-feature-flag-inclusions-section-card *ngIf="(activeTabIndex$ | async) === 0" section-card>inclusions-card</app-feature-flag-inclusions-section-card> | ||
| <app-feature-flag-exclusions-section-card *ngIf="(activeTabIndex$ | async) === 0" section-card>exclusions-card</app-feature-flag-exclusions-section-card> | ||
| <app-feature-flag-exposures-section-card *ngIf="(activeTabIndex$ | async) === 1" section-card>exposures-card</app-feature-flag-exposures-section-card> | ||
| <app-feature-flag-inclusions-section-card *ngIf="(activeTabIndex$ | async) === 0" section-card | ||
| >inclusions-card</app-feature-flag-inclusions-section-card | ||
| > | ||
| <app-feature-flag-exclusions-section-card *ngIf="(activeTabIndex$ | async) === 0" section-card | ||
| >exclusions-card</app-feature-flag-exclusions-section-card | ||
| > | ||
| <app-feature-flag-exposures-section-card *ngIf="(activeTabIndex$ | async) === 1" section-card | ||
| >exposures-card</app-feature-flag-exposures-section-card | ||
| > | ||
| </app-common-section-card-list> | ||
|
|
2 changes: 1 addition & 1 deletion
2
.../feature-flag-overview-details-footer/feature-flag-overview-details-footer.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| <app-common-tabbed-section-card-footer | ||
| [tabLabels]="tabLabels" | ||
| (selectedTabChange)="onSelectedTabChange($event)" | ||
| ></app-common-tabbed-section-card-footer> | ||
| ></app-common-tabbed-section-card-footer> |
12 changes: 6 additions & 6 deletions
12
...g-overview-details-section-card/feature-flag-overview-details-section-card.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| <app-common-section-card class="details-overview-card"> | ||
| <div header-left style="background-color: beige; height: 90px; width: 100%">header-left</div> | ||
| <div header-right style="background-color: beige; height: 90px; width: 100%">header-right</div> | ||
| <div content style="background-color: beige; height: 90px; width: 100%">content: Details Overview</div> | ||
| <app-feature-flag-overview-details-footer footer></app-feature-flag-overview-details-footer> | ||
| </app-common-section-card> | ||
| <app-common-section-card class="details-overview-card"> | ||
| <div header-left style="background-color: beige; height: 90px; width: 100%">header-left</div> | ||
| <div header-right style="background-color: beige; height: 90px; width: 100%">header-right</div> | ||
| <div content style="background-color: beige; height: 90px; width: 100%">content: Details Overview</div> | ||
| <app-feature-flag-overview-details-footer footer></app-feature-flag-overview-details-footer> | ||
| </app-common-section-card> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -62,4 +62,4 @@ | |
| color: var(--dark-grey); | ||
| padding: 16px; | ||
| } | ||
| } | ||
| } | ||
16 changes: 16 additions & 0 deletions
16
...ent-lib/components/common-section-card-content/common-section-card-content.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <div class="content-section"> | ||
| <div *ngFor="let obj of data"> | ||
| <div *ngFor="let item of obj | keyvalue"> | ||
| <span style="font-weight: bold">{{ item.key }}:</span> | ||
| <ng-container *ngIf="item.key !== 'tags'; else chipSection"> | ||
| <span>{{ item.value }}</span> | ||
| </ng-container> | ||
|
|
||
| <ng-template #chipSection> | ||
| <mat-chip-list> | ||
| <mat-chip *ngFor="let tag of item.value">{{ tag }}</mat-chip> | ||
| </mat-chip-list> | ||
| </ng-template> | ||
| </div> | ||
| </div> | ||
| </div> |
7 changes: 7 additions & 0 deletions
7
...ent-lib/components/common-section-card-content/common-section-card-content.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .content-section { | ||
| width: 100%; | ||
| border: 1px solid var(--light-grey); | ||
| border-radius: 4px; | ||
| background-color: var(--white); | ||
| padding: 0 32px; | ||
| } |
22 changes: 22 additions & 0 deletions
22
...-lib/components/common-section-card-content/common-section-card-content.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { CommonSectionCardContentComponent } from './common-section-card-content.component'; | ||
|
|
||
| describe('CommonSectionCardContentComponent', () => { | ||
| let component: CommonSectionCardContentComponent; | ||
| let fixture: ComponentFixture<CommonSectionCardContentComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [CommonSectionCardContentComponent], | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(CommonSectionCardContentComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
31 changes: 31 additions & 0 deletions
31
...onent-lib/components/common-section-card-content/common-section-card-content.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; | ||
| import { SharedModule } from '../../../shared/shared.module'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-common-section-card-content', | ||
| standalone: true, | ||
| //Here imported SharedModule which exports CommonModule and MatChipModule | ||
| imports: [SharedModule], | ||
|
|
||
| templateUrl: './common-section-card-content.component.html', | ||
| styleUrl: './common-section-card-content.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
|
|
||
| // This component processes the provided data and splits it into two arrays: 'keys' and 'values'. | ||
| // It then maps and displays the content from these arrays. | ||
| // | ||
| // Example Usage: | ||
| // | ||
| // contentDetails = [ | ||
| // { key: 'name' }, | ||
| // { description: 'something' }, | ||
| // { tags: ['Tag1', 'Tag2'] }, | ||
| // { Appcontext: 'Context1' }, | ||
| // ]; | ||
| // | ||
| // Simply pass the data to the component as shown below: | ||
| // <app-common-section-card-content [data]="contentDetails"></app-common-section-card-content> | ||
| export class CommonSectionCardContentComponent { | ||
| @Input() data: { key: string; value: string }[] = []; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -243,4 +243,4 @@ export interface CaliperEnvelope { | |
| export interface IMenuButtonItem { | ||
| name: string; | ||
| disabled: boolean; | ||
| } | ||
| } | ||