Skip to content

Commit 9be9a20

Browse files
toxiktoxik
authored
Merge pull request #297 from UiPath/feat/SW-5987
feat(grid): add card view to grid
2 parents 979e27f + 0f9588d commit 9be9a20

File tree

16 files changed

+369
-20
lines changed

16 files changed

+369
-20
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
# v14.5.0 (2023-03-02)
2+
* **grid** add card view support
3+
14
# v14.4.1 (2023-02-15)
25
* **dateformat** use luxon for absolute time if enabled
36

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-components",
3-
"version": "14.4.1",
3+
"version": "14.5.0",
44
"author": {
55
"name": "UiPath Inc",
66
"url": "https://uipath.com"

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
5252
}
5353

5454
&.ui-grid-state-loading {
55-
.ui-grid-row {
55+
.ui-grid-row,
56+
.ui-grid-card-wrapper {
5657
pointer-events: none;
5758
opacity: 0.5;
5859
}
@@ -150,6 +151,10 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
150151
border-bottom-color: $ui-grid-border-color;
151152
transition: $ui-grid-opacity-transition;
152153
}
154+
155+
&-card-wrapper {
156+
transition: $ui-grid-opacity-transition;
157+
}
153158
}
154159

155160
.ui-grid-row {

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {
2+
ContentChild,
3+
Directive, TemplateRef,
4+
} from '@angular/core';
5+
6+
export interface IGridRowCardViewContext<T> {
7+
index: number;
8+
last: boolean;
9+
data: T;
10+
}
11+
12+
@Directive({ selector: '[uiGridRowCardView], ui-grid-row-card-view' })
13+
export class UiGridRowCardViewDirective<T> {
14+
@ContentChild(TemplateRef, {
15+
static: true,
16+
})
17+
html?: TemplateRef<IGridRowCardViewContext<T>>;
18+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export { UiGridColumnDirective } from './body/ui-grid-column.directive';
1515
export { UiGridExpandedRowDirective } from './body/ui-grid-expanded-row.directive';
1616
export { UiGridRowActionDirective } from './body/ui-grid-row-action.directive';
1717
export { UiGridRowConfigDirective } from './body/ui-grid-row-config.directive';
18+
export { UiGridRowCardViewDirective } from './body/ui-grid-row-card-view.directive';
1819
export { UiGridLoadingDirective } from './body/ui-grid-loading.directive';
1920
export { UiGridNoContentDirective } from './body/ui-grid-no-content.directive';
2021
export { UiGridSearchComponent } from './components/ui-grid-search/ui-grid-search.component';

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

Lines changed: 101 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@
183183
</div>
184184
</div>
185185

186-
<div *ngIf="column.resizeable && !last"
186+
<div *ngIf="column.resizeable && !last && !useCardView"
187187
(mousedown)="resizeManager.startResize($event, column, columnIndex)"
188188
class="ui-grid-resize-anchor">
189189
<mat-icon>
@@ -232,31 +232,65 @@
232232
[itemSize]="rowSize"
233233
uiVirtualScrollViewportResize
234234
class="ui-grid-viewport">
235-
<ng-container *cdkVirtualFor="let row of dataManager.data$ | async;
235+
<ng-container *ngIf="useCardView">
236+
<div class="ui-grid-cards-container">
237+
<ng-container *cdkVirtualFor="let row of dataManager.data$ | async;
238+
let last = last;
239+
let index = index;
240+
trackBy: dataManager.hashTrack">
241+
<ng-container *ngTemplateOutlet="rowCardTemplate; context: {
242+
data: row,
243+
index: index,
244+
expanded: expandedEntries,
245+
last: last
246+
}"></ng-container>
247+
</ng-container>
248+
</div>
249+
</ng-container>
250+
<ng-container *ngIf="!useCardView">
251+
<ng-container *cdkVirtualFor="let row of dataManager.data$ | async;
236252
let last = last;
237253
let index = index;
238254
trackBy: dataManager.hashTrack">
239-
<ng-container *ngTemplateOutlet="rowTemplate; context: {
240-
data: row,
241-
index: index,
242-
expanded: expandedEntries,
243-
last: last
244-
}">
255+
<ng-container *ngTemplateOutlet="rowTemplate; context: {
256+
data: row,
257+
index: index,
258+
expanded: expandedEntries,
259+
last: last
260+
}">
261+
</ng-container>
245262
</ng-container>
246263
</ng-container>
247264
</cdk-virtual-scroll-viewport>
248265
</ng-container>
249266

250267
<ng-container *ngIf="!virtualScroll">
251-
<ng-container *ngFor="let row of dataManager.data$ | async;
268+
<ng-container *ngIf="useCardView">
269+
<div class="ui-grid-cards-container">
270+
<ng-container *ngFor="let row of dataManager.data$ | async;
271+
let index = index;
272+
let last = last;">
273+
<ng-container *ngTemplateOutlet="rowCardTemplate; context: {
274+
data: row,
275+
index: index,
276+
expanded: expandedEntries,
277+
last: last
278+
}">
279+
</ng-container>
280+
</ng-container>
281+
</div>
282+
</ng-container>
283+
<ng-container *ngIf="!useCardView">
284+
<ng-container *ngFor="let row of dataManager.data$ | async;
252285
let index = index;
253286
let last = last;">
254-
<ng-container *ngTemplateOutlet="rowTemplate; context: {
255-
data: row,
256-
index: index,
257-
expanded: expandedEntries,
258-
last: last
259-
}">
287+
<ng-container *ngTemplateOutlet="rowTemplate; context: {
288+
data: row,
289+
index: index,
290+
expanded: expandedEntries,
291+
last: last
292+
}">
293+
</ng-container>
260294
</ng-container>
261295
</ng-container>
262296
</ng-container>
@@ -401,6 +435,58 @@
401435
[matTooltipDisabled]="resizeManager.isResizing">{{ dataManager.getProperty(row, property) }}</p>
402436
</ng-template>
403437

438+
<ng-template #rowCardTemplate
439+
let-row="data"
440+
let-expanded="expanded"
441+
let-last="last"
442+
let-index="index">
443+
<div cdkMonitorSubtreeFocus
444+
class="ui-grid-card-wrapper"
445+
[ngClass]="rowConfig?.ngClassFn(row) ?? ''"
446+
[tabIndex]="0"
447+
[attr.data-row-index]="index"
448+
(click)="onRowClick($event, row)"
449+
(keyup.enter)="onRowClick($event, row)"
450+
>
451+
<ng-container *ngIf="cardTemplate?.html; else defaultCardTemplate">
452+
<ng-container *ngTemplateOutlet="cardTemplate?.html || defaultCardTemplate;context: {
453+
data: row,
454+
index: index,
455+
expanded: expandedEntries,
456+
last: last
457+
}"></ng-container>
458+
</ng-container>
459+
</div>
460+
</ng-template>
461+
462+
<ng-template #defaultCardTemplate
463+
let-row="data"
464+
let-index="index">
465+
<div class="ui-grid-card-default">
466+
<ng-container *ngFor="let column of renderedColumns$ | async">
467+
<div [class.ui-grid-primary]="column.directive.primary"
468+
[class.ui-grid-secondary]="!column.directive.primary"
469+
[attr.data-property]="column.directive.property"
470+
[attr.data-identifier]="column.directive.identifier"
471+
[attr.role]="column.role"
472+
class="ui-grid-card-default-cell">
473+
<div *ngIf="isProjected"
474+
[matTooltip]="column.directive.title ?? ''"
475+
[matTooltipDisabled]="resizeManager.isResizing"
476+
class="ui-grid-card-default-cell-mobile-title">{{column.directive.title}}</div>
477+
<div class="ui-grid-card-default-cell-content">
478+
<b>{{ column.directive.title ?? column.directive.property }}:</b> <ng-container *ngTemplateOutlet="column.directive.html || textCellTemplate; context: {
479+
data: row,
480+
index: index,
481+
property: column.directive.property
482+
}">
483+
</ng-container>
484+
</div>
485+
</div>
486+
</ng-container>
487+
</div>
488+
</ng-template>
489+
404490
<ng-template #noData>
405491
<ng-container *ngIf="!loading">
406492
<ng-container *ngIf="noContent; else defaultNoData">

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -515,6 +515,34 @@ ui-grid {
515515
.ui-grid-header-cell-sortable {
516516
cursor: pointer;
517517
}
518+
519+
.ui-grid-cards-container {
520+
margin: 16px;
521+
display: flex;
522+
flex-direction: row;
523+
flex-wrap: wrap;
524+
525+
@supports (display: grid) {
526+
display: grid;
527+
grid-column-gap: 12px;
528+
grid-row-gap: 16px;
529+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
530+
}
531+
}
532+
533+
.ui-grid-card-default {
534+
border-radius: 5px;
535+
background: #ffffff;
536+
border: 1px solid #cfd8dd;
537+
color: #273139;
538+
padding: 16px;
539+
}
540+
541+
.ui-grid-card-default-cell-content {
542+
display: flex;
543+
align-items: center;
544+
gap: 8px;
545+
}
518546
}
519547
}
520548
}

0 commit comments

Comments
 (0)