feat: adding grouped style (#733)

* feat: adding grouped style

* refactor: remove unused style

* refactor: remove console log

* refactor: removing unused import

* Update projects/observability/src/shared/components/card-list/card-list.component.scss

Co-authored-by: Aaron Steinfeld <[email protected]>

* refactor: fix formatting

* refactor: updating tests

Co-authored-by: Aaron Steinfeld <[email protected]>

Author: anandtiwary

projects/observability/src/shared/components/card-list/card-list.component.scss

@@ -1,5 +1,9 @@
 @import 'mixins';
 
+@mixin grouped-style($color) {
+  box-shadow: 0 3px 0 -1px $color, 0 4px 0 -1px $gray-2;
+}
+
 .ht-card-list {
   display: flex;
   flex-direction: column;
@@ -23,16 +27,31 @@
       background: $blue-1;
       border: 1px solid $blue-2;
 
+      &.grouped-style {
+        margin-bottom: 8px;
+        @include grouped-style($blue-1);
+      }
+
       &:hover {
         background: $blue-2;
         border: 1px solid $blue-5;
+
+        &.grouped-style {
+          margin-bottom: 8px;
+          @include grouped-style($blue-2);
+        }
       }
     }
 
     &:hover {
       background: $gray-1;
       border: 1px solid $gray-2;
     }
+
+    &.grouped-style {
+      margin-bottom: 8px;
+      @include grouped-style($gray-1);
+    }
   }
 
   .list {

projects/observability/src/shared/components/card-list/card-list.component.test.ts

@@ -62,4 +62,46 @@ describe('Card List component', () => {
     expect(spectator.query('.selected-card')).not.toBe(cardElements[1]);
     expect(spectator.query('.selected-card')).not.toBe(cardElements[2]);
   });
+
+  test('should apply grouped style class', () => {
+    const data = [
+      {
+        name: 'first',
+        grouped: true
+      },
+      {
+        name: 'second',
+        grouped: false
+      },
+      {
+        name: 'third',
+        grouped: false
+      }
+    ];
+
+    spectator = createHost(
+      `
+    <ht-card-list [mode]="mode">
+      <ht-card-container *ngFor="let cardData of this.data; first" showGroupedStyle="cardData.grouped">
+        <div class="custom-card">
+          <div class="title">{{cardData.name}}</div>
+        </div>
+      </ht-card-container>
+    </ht-card-list>
+    `,
+      {
+        hostProps: {
+          data: data,
+          mode: CardListMode.Card
+        }
+      }
+    );
+
+    // Test selection style
+    const cardElements = spectator.queryAll('.card');
+    spectator.click(cardElements[0]);
+    expect(spectator.query('.grouped-style')).toBe(cardElements[0]);
+    expect(spectator.query('.grouped-style')).not.toBe(cardElements[1]);
+    expect(spectator.query('.grouped-style')).not.toBe(cardElements[2]);
+  });
 });

projects/observability/src/shared/components/card-list/card-list.component.ts

@@ -1,4 +1,7 @@
-import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList } from '@angular/core';
+import { queryListAndChanges$ } from '@hypertrace/common';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { CardContainerComponent } from './container/card-container.component';
 
 @Component({
@@ -7,8 +10,13 @@ import { CardContainerComponent } from './container/card-container.component';
     <div class="ht-card-list">
       <div
         class="content"
-        [ngClass]="this.getCardStyle(card)"
-        *ngFor="let card of this.cards"
+        [ngClass]="{
+          card: this.mode === '${CardListMode.Card}',
+          list: this.mode === '${CardListMode.List}',
+          'selected-card': this.selectedCard === card,
+          'grouped-style': card.showGroupedStyle
+        }"
+        *ngFor="let card of this.cards$ | async"
         (click)="this.onCardClicked(card)"
       >
         <ng-container *ngTemplateOutlet="card.content"></ng-container>
@@ -18,27 +26,23 @@ import { CardContainerComponent } from './container/card-container.component';
   styleUrls: ['./card-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CardListComponent {
-  @ContentChildren(CardContainerComponent)
-  public readonly cards!: QueryList<CardContainerComponent>;
-
+export class CardListComponent implements AfterContentInit {
   @Input()
   public mode?: CardListMode = CardListMode.List;
 
-  public selectedCard?: CardContainerComponent;
+  @ContentChildren(CardContainerComponent)
+  private readonly cards!: QueryList<CardContainerComponent>;
 
-  public onCardClicked(card: CardContainerComponent): void {
-    this.selectedCard = this.selectedCard === card ? undefined : card;
-  }
+  public cards$!: Observable<CardContainerComponent[]>;
 
-  public getCardStyle(card: CardContainerComponent): string[] {
-    const classes: string[] = [this.mode ?? CardListMode.List];
+  public ngAfterContentInit(): void {
+    this.cards$ = queryListAndChanges$(this.cards).pipe(map(list => list.toArray()));
+  }
 
-    if (this.selectedCard === card) {
-      classes.push('selected-card');
-    }
+  public selectedCard?: CardContainerComponent;
 
-    return classes;
+  public onCardClicked(card: CardContainerComponent): void {
+    this.selectedCard = this.selectedCard === card ? undefined : card;
   }
 }
 

projects/observability/src/shared/components/card-list/container/card-container.component.ts

@@ -1,9 +1,12 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ContentHolder, CONTENT_HOLDER_TEMPLATE } from '@hypertrace/components';
 
 @Component({
   selector: 'ht-card-container',
   template: CONTENT_HOLDER_TEMPLATE,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CardContainerComponent extends ContentHolder {}
+export class CardContainerComponent extends ContentHolder {
+  @Input()
+  public showGroupedStyle: boolean = false;
+}