Merge pull request #356 from SamGraber/observable_card_container

Observable card container
RenovoSolutions · Nov 8, 2016 · 9b0ed22 · 9b0ed22
2 parents abe56c3 + 01239cb
commit 9b0ed22
Show file tree

Hide file tree

Showing 144 changed files with 5,998 additions and 16,366 deletions.
diff --git a/bootstrapper/app.routing.ts b/bootstrapper/app.routing.ts
@@ -13,6 +13,7 @@ import { PopupBootstrapper } from './popup/popupNg2Bootstrapper';
 import { CardsRootComponent } from './cards/cardRoot';
 import { CardsNg1BootstrapperComponent } from './cards/cardContainerBootstrapper';
 import { CardsBootstrapper } from './cards/cardsNg2Bootstrapper';
+import { CardsSmartDataBootstrapper } from './cards/cardsSmartDataBootstrapper';
 import { TabsRootComponent } from './tabs/tabRoot';
 import { TabsNg1BootstrapperComponent } from './tabs/tabsBootstrapper';
 import { TabsBootstrapper } from './tabs/tabsNg2Bootstrapper';
@@ -57,6 +58,7 @@ const appRoutes: Routes = [
 		children: [
 			{ path: 'ng1', component: CardsNg1BootstrapperComponent },
 			{ path: 'ng2', component: CardsBootstrapper },
+			{ path: 'smart', component: CardsSmartDataBootstrapper },
 		],
 	},
 	{

diff --git a/bootstrapper/app.ts b/bootstrapper/app.ts
@@ -33,6 +33,7 @@ import { PopupBootstrapper } from './popup/popupNg2Bootstrapper';
 import { CardsRootComponent } from './cards/cardRoot';
 import { CardsNg1BootstrapperComponent } from './cards/cardContainerBootstrapper';
 import { CardsBootstrapper } from './cards/cardsNg2Bootstrapper';
+import { CardsSmartDataBootstrapper } from './cards/cardsSmartDataBootstrapper';
 import { TabsRootComponent } from './tabs/tabRoot';
 import { TabsNg1BootstrapperComponent } from './tabs/tabsBootstrapper';
 import { TabsBootstrapper } from './tabs/tabsNg2Bootstrapper';
@@ -99,6 +100,7 @@ angular.module(moduleName, [
 		CardsRootComponent,
 		CardsNg1BootstrapperComponent,
 		CardsBootstrapper,
+		CardsSmartDataBootstrapper,
 		upgradeAdapter.upgradeNg1Component('tsCardsNg1'),
 
 		TabsRootComponent,

diff --git a/bootstrapper/cards/cardContainerBootstrapper.ts b/bootstrapper/cards/cardContainerBootstrapper.ts
@@ -3,9 +3,9 @@ import * as angular from 'angular';
 import * as _ from 'lodash';
 import * as moment from 'moment';
 
-import { ICardContainerBuilder } from '../../source/components/cardContainer/builder/index';
-import { IDataSource } from '../../source/components/cardContainer/dataSources/index';
-import { ISelectFilter,	IDateFilter } from '../../source/components/cardContainer/filters/index';
+import { ICardContainerBuilderOld } from '../../source/components/cardContainer/builder/index';
+import { IDataSourceOld } from '../../source/components/cardContainer/dataSources/index';
+import { ISelectFilterOld, IDateFilterOld, } from '../../source/components/cardContainer/filters/index';
 import { cardContainerBuilderServiceName } from '../../source/componentsDowngrade';
 
 export const moduleName: string = 'CardTestModule';
@@ -17,14 +17,14 @@ interface ICardItem {
 }
 
 class CardTestController {
-	builder: ICardContainerBuilder;
-	builderWithSelectFilter: ICardContainerBuilder;
-	builderWithDateFilter: ICardContainerBuilder;
-	builderWithSearch: ICardContainerBuilder;
+	builder: ICardContainerBuilderOld;
+	builderWithSelectFilter: ICardContainerBuilderOld;
+	builderWithDateFilter: ICardContainerBuilderOld;
+	builderWithSearch: ICardContainerBuilderOld;
 	options: number[];
-	selectFilter: ISelectFilter<number>;
-	dateFilter: IDateFilter;
-	dataSource: IDataSource<ICardItem>;
+	selectFilter: ISelectFilterOld<number>;
+	dateFilter: IDateFilterOld;
+	dataSource: IDataSourceOld<ICardItem>;
 
 	static $inject: string[] = [cardContainerBuilderServiceName];
 	constructor(cardContainerBuilderFactory: any) {

diff --git a/bootstrapper/cards/cards.html b/bootstrapper/cards/cards.html
@@ -1,5 +1,6 @@
 <ul class="nav nav-tabs">
 	<li role="presentation"><a routerLink="ng1">Angular 1</a></li>
 	<li role="presentation"><a routerLink="ng2">Angular 2</a></li>
+	<li role="presentation"><a routerLink="smart">Smart Data Source</a></li>
 </ul>
 <router-outlet></router-outlet>
diff --git a/bootstrapper/cards/cardsNg2.html b/bootstrapper/cards/cardsNg2.html
@@ -26,6 +26,17 @@ <h3>Cards</h3>
 		</div>
 	</rlSimpleCard>
 </div>
+<div>
+	<label>Simple card container:</label>
+	<rlSimpleCardContainer [data]="data" [columns]="columns" [options]="{ paging: true, search: true }">
+		<div *rlColumnHeader="let value; name 'value'">Number</div>
+		<div *rlColumnContent="let value; name 'value'">#{{value}}</div>
+		<div *rlCardContent="let myItem">
+			Name: {{myItem.name}}
+			Value: {{myItem.value}}
+		</div>
+	</rlSimpleCardContainer>
+</div>
 <div>
 	<label>Card container:</label>
 	<rlCardContainer [builder]="builder">
@@ -39,7 +50,7 @@ <h3>Cards</h3>
 </div>
 <div>
 	<label>Selectable card container:</label>
-	<rlSelectableCardContainer [builder]="builder">
+	<rlSelectableCardContainer [builder]="selectBuilder">
 		<div *rlColumnHeader="let value; name 'value'">Number</div>
 		<div *rlColumnContent="let value; name 'value'">#{{value}}</div>
 		<div *rlCardContent="let myItem">
@@ -50,7 +61,7 @@ <h3>Cards</h3>
 </div>
 <div>
 	<label>Card container with search:</label>
-	<rlCardContainer [builder]="builder" [searchPlaceholder]="'Custom Placeholder'">
+	<rlCardContainer [builder]="searchBuilder">
 		<div *rlColumnHeader="let value; name 'value'">Number</div>
 		<div *rlColumnContent="let value; name 'value'">#{{value}}</div>
 		<div *rlCardContent="let myItem">
@@ -68,13 +79,13 @@ <h3>Cards</h3>
 </div>
 <div class="row">
 	<div class="col-sm-2">
-		<rlFilterGroup [filterGroup]="modeFilterGroup" [dataSource]="builderWithFilters._dataSource"></rlFilterGroup>
-		<rlFilterGroup [filterGroup]="rangeFilterGroup" [dataSource]="builderWithFilters._dataSource"></rlFilterGroup>
-		<rlFilterGroup [filterGroup]="disabledFilterGroup" [dataSource]="builderWithFilters._dataSource" [disabled]="true"></rlFilterGroup>
+		<rlFilterGroup [filterGroup]="modeFilterGroup"></rlFilterGroup>
+		<rlFilterGroup [filterGroup]="rangeFilterGroup"></rlFilterGroup>
+		<rlFilterGroup [filterGroup]="disabledFilterGroup" [disabled]="true"></rlFilterGroup>
 	</div>
 	<div class="col-sm-10">
-		<label>Card Container with Filters:</label>
-		<rlCardContainer [builder]="builderWithFilters">
+		<label>Card Container with filter groups:</label>
+		<rlCardContainer [builder]="builderWithFilterGroups">
 			<div *rlColumnContent="let value; name 'value'">#{{value}}</div>
 			<div *rlCardContent="let myItem">
 				Name: {{myItem.name}}
@@ -83,11 +94,41 @@ <h3>Cards</h3>
 		</rlCardContainer>
 	</div>
 </div>
-<div>
-	<rlSelectFilter [filter]="selectFilter"
-					label="Select filter"
-					[options]="options"
-					nullOption="All">
-		<template let-option>#{{option}}</template>
-	</rlSelectFilter>
+<div class="row">
+	<div class="col-sm-2">
+		<rlSelectFilter [filter]="selectFilter"
+						label="Select filter"
+						[options]="options"
+						nullOption="All">
+			<template let-option>#{{option}}</template>
+		</rlSelectFilter>
+	</div>
+	<div class="col-sm-10">
+		<label>Card Container with select filter:</label>
+		<rlCardContainer [builder]="builderWithSelectFilter">
+			<div *rlColumnContent="let value; name 'value'">#{{value}}</div>
+			<div *rlCardContent="let myItem">
+				Name: {{myItem.name}}
+				Value: {{myItem.value}}
+			</div>
+		</rlCardContainer>
+	</div>
+</div>
+<div class="row">
+	<div class="col-sm-2">
+		<rlDateFilter [filter]="dateFilter"
+					  label="Date filter"
+					  [showClear]="true"
+					  [useDateRange]="true"
+					  [useTime]="true"></rlDateFilter>
+	</div>
+	<div class="col-sm-10">
+		<label>Card Container with date filter:</label>
+		<rlCardContainer [builder]="builderWithDateFilter">
+			<div *rlCardContent="let myItem">
+				Name: {{myItem.name}}
+				Date: {{myItem.date}}
+			</div>
+		</rlCardContainer>
+	</div>
 </div>