Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 9b0ed22

Browse files
author
Sam Graber
authored
Merge pull request #356 from SamGraber/observable_card_container
Observable card container
2 parents abe56c3 + 01239cb commit 9b0ed22

File tree

144 files changed

+5998
-16366
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

144 files changed

+5998
-16366
lines changed

‎bootstrapper/app.routing.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { PopupBootstrapper } from './popup/popupNg2Bootstrapper';
1313
import { CardsRootComponent } from './cards/cardRoot';
1414
import { CardsNg1BootstrapperComponent } from './cards/cardContainerBootstrapper';
1515
import { CardsBootstrapper } from './cards/cardsNg2Bootstrapper';
16+
import { CardsSmartDataBootstrapper } from './cards/cardsSmartDataBootstrapper';
1617
import { TabsRootComponent } from './tabs/tabRoot';
1718
import { TabsNg1BootstrapperComponent } from './tabs/tabsBootstrapper';
1819
import { TabsBootstrapper } from './tabs/tabsNg2Bootstrapper';
@@ -57,6 +58,7 @@ const appRoutes: Routes = [
5758
children: [
5859
{ path: 'ng1', component: CardsNg1BootstrapperComponent },
5960
{ path: 'ng2', component: CardsBootstrapper },
61+
{ path: 'smart', component: CardsSmartDataBootstrapper },
6062
],
6163
},
6264
{

‎bootstrapper/app.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { PopupBootstrapper } from './popup/popupNg2Bootstrapper';
3333
import { CardsRootComponent } from './cards/cardRoot';
3434
import { CardsNg1BootstrapperComponent } from './cards/cardContainerBootstrapper';
3535
import { CardsBootstrapper } from './cards/cardsNg2Bootstrapper';
36+
import { CardsSmartDataBootstrapper } from './cards/cardsSmartDataBootstrapper';
3637
import { TabsRootComponent } from './tabs/tabRoot';
3738
import { TabsNg1BootstrapperComponent } from './tabs/tabsBootstrapper';
3839
import { TabsBootstrapper } from './tabs/tabsNg2Bootstrapper';
@@ -99,6 +100,7 @@ angular.module(moduleName, [
99100
CardsRootComponent,
100101
CardsNg1BootstrapperComponent,
101102
CardsBootstrapper,
103+
CardsSmartDataBootstrapper,
102104
upgradeAdapter.upgradeNg1Component('tsCardsNg1'),
103105

104106
TabsRootComponent,

‎bootstrapper/cards/cardContainerBootstrapper.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import * as angular from 'angular';
33
import * as _ from 'lodash';
44
import * as moment from 'moment';
55

6-
import { ICardContainerBuilder } from '../../source/components/cardContainer/builder/index';
7-
import { IDataSource } from '../../source/components/cardContainer/dataSources/index';
8-
import { ISelectFilter, IDateFilter } from '../../source/components/cardContainer/filters/index';
6+
import { ICardContainerBuilderOld } from '../../source/components/cardContainer/builder/index';
7+
import { IDataSourceOld } from '../../source/components/cardContainer/dataSources/index';
8+
import { ISelectFilterOld, IDateFilterOld, } from '../../source/components/cardContainer/filters/index';
99
import { cardContainerBuilderServiceName } from '../../source/componentsDowngrade';
1010

1111
export const moduleName: string = 'CardTestModule';
@@ -17,14 +17,14 @@ interface ICardItem {
1717
}
1818

1919
class CardTestController {
20-
builder: ICardContainerBuilder;
21-
builderWithSelectFilter: ICardContainerBuilder;
22-
builderWithDateFilter: ICardContainerBuilder;
23-
builderWithSearch: ICardContainerBuilder;
20+
builder: ICardContainerBuilderOld;
21+
builderWithSelectFilter: ICardContainerBuilderOld;
22+
builderWithDateFilter: ICardContainerBuilderOld;
23+
builderWithSearch: ICardContainerBuilderOld;
2424
options: number[];
25-
selectFilter: ISelectFilter<number>;
26-
dateFilter: IDateFilter;
27-
dataSource: IDataSource<ICardItem>;
25+
selectFilter: ISelectFilterOld<number>;
26+
dateFilter: IDateFilterOld;
27+
dataSource: IDataSourceOld<ICardItem>;
2828

2929
static $inject: string[] = [cardContainerBuilderServiceName];
3030
constructor(cardContainerBuilderFactory: any) {

‎bootstrapper/cards/cards.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<ul class="nav nav-tabs">
22
<li role="presentation"><a routerLink="ng1">Angular 1</a></li>
33
<li role="presentation"><a routerLink="ng2">Angular 2</a></li>
4+
<li role="presentation"><a routerLink="smart">Smart Data Source</a></li>
45
</ul>
56
<router-outlet></router-outlet>

‎bootstrapper/cards/cardsNg2.html

Lines changed: 55 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,17 @@ <h3>Cards</h3>
2626
</div>
2727
</rlSimpleCard>
2828
</div>
29+
<div>
30+
<label>Simple card container:</label>
31+
<rlSimpleCardContainer [data]="data" [columns]="columns" [options]="{ paging: true, search: true }">
32+
<div *rlColumnHeader="let value; name 'value'">Number</div>
33+
<div *rlColumnContent="let value; name 'value'">#{{value}}</div>
34+
<div *rlCardContent="let myItem">
35+
Name: {{myItem.name}}
36+
Value: {{myItem.value}}
37+
</div>
38+
</rlSimpleCardContainer>
39+
</div>
2940
<div>
3041
<label>Card container:</label>
3142
<rlCardContainer [builder]="builder">
@@ -39,7 +50,7 @@ <h3>Cards</h3>
3950
</div>
4051
<div>
4152
<label>Selectable card container:</label>
42-
<rlSelectableCardContainer [builder]="builder">
53+
<rlSelectableCardContainer [builder]="selectBuilder">
4354
<div *rlColumnHeader="let value; name 'value'">Number</div>
4455
<div *rlColumnContent="let value; name 'value'">#{{value}}</div>
4556
<div *rlCardContent="let myItem">
@@ -50,7 +61,7 @@ <h3>Cards</h3>
5061
</div>
5162
<div>
5263
<label>Card container with search:</label>
53-
<rlCardContainer [builder]="builder" [searchPlaceholder]="'Custom Placeholder'">
64+
<rlCardContainer [builder]="searchBuilder">
5465
<div *rlColumnHeader="let value; name 'value'">Number</div>
5566
<div *rlColumnContent="let value; name 'value'">#{{value}}</div>
5667
<div *rlCardContent="let myItem">
@@ -68,13 +79,13 @@ <h3>Cards</h3>
6879
</div>
6980
<div class="row">
7081
<div class="col-sm-2">
71-
<rlFilterGroup [filterGroup]="modeFilterGroup" [dataSource]="builderWithFilters._dataSource"></rlFilterGroup>
72-
<rlFilterGroup [filterGroup]="rangeFilterGroup" [dataSource]="builderWithFilters._dataSource"></rlFilterGroup>
73-
<rlFilterGroup [filterGroup]="disabledFilterGroup" [dataSource]="builderWithFilters._dataSource" [disabled]="true"></rlFilterGroup>
82+
<rlFilterGroup [filterGroup]="modeFilterGroup"></rlFilterGroup>
83+
<rlFilterGroup [filterGroup]="rangeFilterGroup"></rlFilterGroup>
84+
<rlFilterGroup [filterGroup]="disabledFilterGroup" [disabled]="true"></rlFilterGroup>
7485
</div>
7586
<div class="col-sm-10">
76-
<label>Card Container with Filters:</label>
77-
<rlCardContainer [builder]="builderWithFilters">
87+
<label>Card Container with filter groups:</label>
88+
<rlCardContainer [builder]="builderWithFilterGroups">
7889
<div *rlColumnContent="let value; name 'value'">#{{value}}</div>
7990
<div *rlCardContent="let myItem">
8091
Name: {{myItem.name}}
@@ -83,11 +94,41 @@ <h3>Cards</h3>
8394
</rlCardContainer>
8495
</div>
8596
</div>
86-
<div>
87-
<rlSelectFilter [filter]="selectFilter"
88-
label="Select filter"
89-
[options]="options"
90-
nullOption="All">
91-
<template let-option>#{{option}}</template>
92-
</rlSelectFilter>
97+
<div class="row">
98+
<div class="col-sm-2">
99+
<rlSelectFilter [filter]="selectFilter"
100+
label="Select filter"
101+
[options]="options"
102+
nullOption="All">
103+
<template let-option>#{{option}}</template>
104+
</rlSelectFilter>
105+
</div>
106+
<div class="col-sm-10">
107+
<label>Card Container with select filter:</label>
108+
<rlCardContainer [builder]="builderWithSelectFilter">
109+
<div *rlColumnContent="let value; name 'value'">#{{value}}</div>
110+
<div *rlCardContent="let myItem">
111+
Name: {{myItem.name}}
112+
Value: {{myItem.value}}
113+
</div>
114+
</rlCardContainer>
115+
</div>
116+
</div>
117+
<div class="row">
118+
<div class="col-sm-2">
119+
<rlDateFilter [filter]="dateFilter"
120+
label="Date filter"
121+
[showClear]="true"
122+
[useDateRange]="true"
123+
[useTime]="true"></rlDateFilter>
124+
</div>
125+
<div class="col-sm-10">
126+
<label>Card Container with date filter:</label>
127+
<rlCardContainer [builder]="builderWithDateFilter">
128+
<div *rlCardContent="let myItem">
129+
Name: {{myItem.name}}
130+
Date: {{myItem.date}}
131+
</div>
132+
</rlCardContainer>
133+
</div>
93134
</div>

0 commit comments

Comments
 (0)