feat(grid): add card view to grid

CHANGELOG.md

@@ -1,3 +1,6 @@
+# v14.5.0 (2023-03-02)
+* **grid** add card view support
+
 # v14.4.1 (2023-02-15)
 * **dateformat** use luxon for absolute time if enabled
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "14.4.1",
+  "version": "14.5.0",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"

projects/angular/components/ui-grid/src/_ui-grid.theme.scss

@@ -52,7 +52,8 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
         }
 
         &.ui-grid-state-loading {
-            .ui-grid-row {
+            .ui-grid-row,
+            .ui-grid-card-wrapper {
                 pointer-events: none;
                 opacity: 0.5;
             }
@@ -150,6 +151,10 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
                 border-bottom-color: $ui-grid-border-color;
                 transition: $ui-grid-opacity-transition;
             }
+
+            &-card-wrapper {
+                transition: $ui-grid-opacity-transition;
+            }
         }
 
         .ui-grid-row {

projects/angular/components/ui-grid/src/body/ui-grid-row-card-view.directive.ts

@@ -0,0 +1,18 @@
+import {
+    ContentChild,
+ Directive, TemplateRef,
+} from '@angular/core';
+
+export interface IGridRowCardViewContext<T> {
+    index: number;
+    last: boolean;
+    data: T;
+}
+
+@Directive({ selector: '[uiGridRowCardView], ui-grid-row-card-view' })
+export class UiGridRowCardViewDirective<T> {
+    @ContentChild(TemplateRef, {
+        static: true,
+    })
+    html?: TemplateRef<IGridRowCardViewContext<T>>;
+}

projects/angular/components/ui-grid/src/public_api.ts

@@ -15,6 +15,7 @@ export { UiGridColumnDirective } from './body/ui-grid-column.directive';
 export { UiGridExpandedRowDirective } from './body/ui-grid-expanded-row.directive';
 export { UiGridRowActionDirective } from './body/ui-grid-row-action.directive';
 export { UiGridRowConfigDirective } from './body/ui-grid-row-config.directive';
+export { UiGridRowCardViewDirective } from './body/ui-grid-row-card-view.directive';
 export { UiGridLoadingDirective } from './body/ui-grid-loading.directive';
 export { UiGridNoContentDirective } from './body/ui-grid-no-content.directive';
 export { UiGridSearchComponent } from './components/ui-grid-search/ui-grid-search.component';

projects/angular/components/ui-grid/src/ui-grid.component.html

@@ -183,7 +183,7 @@
                             </div>
                         </div>
 
-                        <div *ngIf="column.resizeable && !last"
+                        <div *ngIf="column.resizeable && !last && !useCardView"
                              (mousedown)="resizeManager.startResize($event, column, columnIndex)"
                              class="ui-grid-resize-anchor">
                             <mat-icon>
@@ -232,31 +232,65 @@
                                                  [itemSize]="rowSize"
                                                  uiVirtualScrollViewportResize
                                                  class="ui-grid-viewport">
-                        <ng-container *cdkVirtualFor="let row of dataManager.data$ | async;
+                        <ng-container *ngIf="useCardView">
+                            <div class="ui-grid-cards-container">
+                                <ng-container *cdkVirtualFor="let row of dataManager.data$ | async;
+                                let last = last;
+                                let index = index;
+                                trackBy: dataManager.hashTrack">
+                                    <ng-container *ngTemplateOutlet="rowCardTemplate; context: {
+                                        data: row,
+                                        index: index,
+                                        expanded: expandedEntries,
+                                        last: last
+                                    }"></ng-container>
+                                </ng-container>
+                            </div>
+                        </ng-container>
+                        <ng-container *ngIf="!useCardView">
+                            <ng-container *cdkVirtualFor="let row of dataManager.data$ | async;
                                                       let last = last;
                                                       let index = index;
                                                       trackBy: dataManager.hashTrack">
-                            <ng-container *ngTemplateOutlet="rowTemplate; context: {
-                                    data: row,
-                                    index: index,
-                                    expanded: expandedEntries,
-                                    last: last
-                                }">
+                                <ng-container  *ngTemplateOutlet="rowTemplate; context: {
+                                        data: row,
+                                        index: index,
+                                        expanded: expandedEntries,
+                                        last: last
+                                    }">
+                                </ng-container>
                             </ng-container>
                         </ng-container>
                     </cdk-virtual-scroll-viewport>
                 </ng-container>
 
                 <ng-container *ngIf="!virtualScroll">
-                    <ng-container *ngFor="let row of dataManager.data$ | async;
+                    <ng-container *ngIf="useCardView">
+                        <div class="ui-grid-cards-container">
+                            <ng-container *ngFor="let row of dataManager.data$ | async;
+                                              let index = index;
+                                              let last = last;">
+                                <ng-container *ngTemplateOutlet="rowCardTemplate; context: {
+                                        data: row,
+                                        index: index,
+                                        expanded: expandedEntries,
+                                        last: last
+                                    }">
+                                </ng-container>
+                            </ng-container>
+                        </div>
+                    </ng-container>
+                    <ng-container *ngIf="!useCardView">
+                        <ng-container *ngFor="let row of dataManager.data$ | async;
                                           let index = index;
                                           let last = last;">
-                        <ng-container *ngTemplateOutlet="rowTemplate; context: {
-                                data: row,
-                                index: index,
-                                expanded: expandedEntries,
-                                last: last
-                            }">
+                            <ng-container  *ngTemplateOutlet="rowTemplate; context: {
+                                    data: row,
+                                    index: index,
+                                    expanded: expandedEntries,
+                                    last: last
+                                }">
+                            </ng-container>
                         </ng-container>
                     </ng-container>
                 </ng-container>
@@ -401,6 +435,58 @@
        [matTooltipDisabled]="resizeManager.isResizing">{{ dataManager.getProperty(row, property) }}</p>
 </ng-template>
 
+<ng-template #rowCardTemplate
+    let-row="data"
+    let-expanded="expanded"
+    let-last="last"
+    let-index="index">
+    <div cdkMonitorSubtreeFocus
+        class="ui-grid-card-wrapper"
+        [ngClass]="rowConfig?.ngClassFn(row) ?? ''"
+        [tabIndex]="0"
+        [attr.data-row-index]="index"
+        (click)="onRowClick($event, row)"
+        (keyup.enter)="onRowClick($event, row)"
+    >
+        <ng-container *ngIf="cardTemplate?.html; else defaultCardTemplate">
+            <ng-container *ngTemplateOutlet="cardTemplate?.html || defaultCardTemplate;context: {
+                data: row,
+                index: index,
+                expanded: expandedEntries,
+                last: last
+            }"></ng-container>
+        </ng-container>
+    </div>
+</ng-template>
+
+<ng-template #defaultCardTemplate
+    let-row="data"
+    let-index="index">
+    <div class="ui-grid-card-default">
+        <ng-container *ngFor="let column of renderedColumns$ | async">
+            <div [class.ui-grid-primary]="column.directive.primary"
+                 [class.ui-grid-secondary]="!column.directive.primary"
+                 [attr.data-property]="column.directive.property"
+                 [attr.data-identifier]="column.directive.identifier"
+                 [attr.role]="column.role"
+                 class="ui-grid-card-default-cell">
+                <div *ngIf="isProjected"
+                     [matTooltip]="column.directive.title ?? ''"
+                     [matTooltipDisabled]="resizeManager.isResizing"
+                     class="ui-grid-card-default-cell-mobile-title">{{column.directive.title}}</div>
+                <div class="ui-grid-card-default-cell-content">
+                    <b>{{ column.directive.title ?? column.directive.property }}:</b> <ng-container *ngTemplateOutlet="column.directive.html || textCellTemplate; context: {
+                            data: row,
+                            index: index,
+                            property: column.directive.property
+                        }">
+                    </ng-container>
+                </div>
+            </div>
+        </ng-container>
+    </div>
+</ng-template>
+
 <ng-template #noData>
     <ng-container *ngIf="!loading">
         <ng-container *ngIf="noContent; else defaultNoData">

projects/angular/components/ui-grid/src/ui-grid.component.scss

@@ -515,6 +515,34 @@ ui-grid {
             .ui-grid-header-cell-sortable {
                 cursor: pointer;
             }
+
+            .ui-grid-cards-container {
+                margin: 16px;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+
+                @supports (display: grid) {
+                    display: grid;
+                    grid-column-gap: 12px;
+                    grid-row-gap: 16px;
+                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+                }
+            }
+
+            .ui-grid-card-default {
+                border-radius: 5px;
+                background: #ffffff;
+                border: 1px solid #cfd8dd;
+                color: #273139;
+                padding: 16px;
+            }
+
+            .ui-grid-card-default-cell-content {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
         }
     }
 }