Created a component for defining a simple card container

One of the requests for the team was to make it easier to build a simple card container with less setup that has to go into it. We can do this by having a component that inputs the data, columns, and optional options, and sets up a card container builder for you. To allow for live data changes, we'll take the data input and convert it to a behavior subject, and provide this to an observable data source for the card container.

The biggest hurdle with this approach is that templates are kind of finicky. To get around this, we have to @ContentChild(ren) the templates into the simple container, then bind these into the card container as external templates. The card container then has to check to see if it needs to use external templates instead of the internal ones.

Author: KorinaGraber

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">

bootstrapper/cards/cardsNg2Bootstrapper.ts

@@ -10,6 +10,7 @@ import __transform = services.transform;
 import __timezone = services.timezone;
 import __object = services.object;
 
+import { IColumn } from '../../source/components/cardContainer/index';
 import { CardContainerBuilderService, ICardContainerInstance } from '../../source/components/cardContainer/builder/index';
 import {
 	IDateFilter,
@@ -19,7 +20,7 @@ import {
 	SelectFilter,
 } from '../../source/components/cardContainer/filters/index';
 
-interface ICardItem {
+export interface ICardItem {
 	id: number;
 	name: string;
 	value: number;
@@ -55,12 +56,30 @@ export class CardsBootstrapper {
 	disabledFilterGroup: IFilterGroup<any>;
 	selectFilter: SelectFilter<any, any>;
 
+	columns: IColumn<ICardItem>[];
+	data: ICardItem[] = items;
+
 	constructor(timezone: __timezone.TimezoneService
 			, cardContainerBuilder: CardContainerBuilderService) {
 		timezone.setCurrentTimezone('-05:00');
 
 		this.options = [1, 2, 3, 4, 5];
 
+		this.columns = [
+			{
+				name: 'name',
+				label: 'Name',
+				size: 6,
+				getValue: 'name',
+			},
+			{
+				name: 'value',
+				label: 'Value',
+				size: 6,
+				getValue: 'value',
+			},
+		];
+
 		this.builder = this.setupCardContainer(cardContainerBuilder);
 		this.selectBuilder = this.setupCardContainer(cardContainerBuilder);
 		this.searchBuilder = this.setupCardContainer(cardContainerBuilder);

source/components/cardContainer/cardContainer.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ContentChild, ContentChildren, ViewChildren, QueryList, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ContentChild, ContentChildren, ViewChildren, QueryList, OnInit, AfterContentInit, ChangeDetectionStrategy } from '@angular/core';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { isUndefined, isObject, each, map, find, take, every } from 'lodash';
 
@@ -34,7 +34,7 @@ export const defaultMaxColumnSorts: number = 2;
 	providers: [DataPager, SearchFilter, SortManagerService],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CardContainerComponent<T> implements OnInit {
+export class CardContainerComponent<T> implements OnInit, AfterContentInit {
 	builder: ICardContainerConstructor<T>;
 	save: ISaveAction<any>;
 
@@ -62,6 +62,13 @@ export class CardContainerComponent<T> implements OnInit {
 	@ContentChildren(ColumnContentTemplate) columnTemplates: QueryList<ColumnContentTemplate>;
 	@ContentChildren(ColumnHeaderTemplate) columnHeaders: QueryList<ColumnHeaderTemplate>;
 
+	@Input() externalContainerHeader: ContainerHeaderTemplate;
+	@Input() externalContainerFooter: ContainerFooterTemplate;
+	@Input() externalCardContent: CardContentTemplate;
+	@Input() externalCardFooter: CardFooterTemplate;
+	@Input() externalColumnTemplates: QueryList<ColumnContentTemplate>;
+	@Input() externalColumnHeaders: QueryList<ColumnHeaderTemplate>;
+
 	@ViewChildren(CardComponent) cardChildren: QueryList<CardComponent<T>>;
 
 	get cards(): CardComponent<T>[] {
@@ -112,6 +119,19 @@ export class CardContainerComponent<T> implements OnInit {
 		this.dataSource.init();
 	}
 
+	ngAfterContentInit(): void {
+		this.containerHeader = this.containerHeader || this.externalContainerHeader;
+		this.containerFooter = this.containerFooter || this.externalContainerFooter;
+		this.cardContent = this.cardContent || this.externalCardContent;
+		this.cardFooter = this.cardFooter || this.externalCardFooter;
+		if (!this.columnHeaders.length && this.externalColumnHeaders) {
+			this.columnHeaders = this.externalColumnHeaders;
+		}
+		if (!this.columnTemplates.length && this.externalColumnTemplates) {
+			this.columnTemplates = this.externalColumnTemplates;
+		}
+	}
+
 	openCard(): boolean {
 		return every(map(this.cards, card => card.close()));
 	}

source/components/simpleCardContainer/simpleCardContainer.html

@@ -0,0 +1,7 @@
+<rlCardContainer [builder]="builder"
+				 [externalContainerHeader]="containerHeader"
+				 [externalContainerFooter]="containerFooter"
+				 [externalCardContent]="cardContent"
+				 [externalCardFooter]="cardFooter"
+				 [externalColumnHeaders]="columnHeaders"
+				 [externalColumnTemplates]="columnTemplates"></rlCardContainer>

source/components/simpleCardContainer/simpleCardContainer.ts

@@ -0,0 +1,47 @@
+import { Component, Input, OnInit, ContentChild, ContentChildren, QueryList } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { each } from 'lodash';
+
+import { IColumn } from '../cardContainer/index';
+import { CardContainerBuilderService, ICardContainerInstance, ICardContainerSettings } from '../cardContainer/builder/index';
+import { CardContentTemplate, CardFooterTemplate } from '../cards/index';
+import { ContainerHeaderTemplate, ContainerFooterTemplate, ColumnContentTemplate } from '../cardContainer/templates/index';
+import { ColumnHeaderTemplate } from '../cardContainer/templates/columnHeader.template';
+
+@Component({
+	selector: 'rlSimpleCardContainer',
+	template: require('./simpleCardContainer.html'),
+})
+export class SimpleCardContainer<T> implements OnInit {
+	@Input() columns: IColumn<T>[];
+	@Input() options: ICardContainerSettings;
+
+	@Input()
+	set data(value: T[]) {
+		this.data$.next(value);
+	}
+
+	data$: BehaviorSubject<T[]>;
+	builder: ICardContainerInstance;
+	cardContainerBuilder: CardContainerBuilderService;
+
+	@ContentChild(ContainerHeaderTemplate) containerHeader: ContainerHeaderTemplate;
+	@ContentChild(ContainerFooterTemplate) containerFooter: ContainerFooterTemplate;
+	@ContentChild(CardContentTemplate) cardContent: CardContentTemplate;
+	@ContentChild(CardFooterTemplate) cardFooter: CardFooterTemplate;
+	@ContentChildren(ColumnContentTemplate) columnTemplates: QueryList<ColumnContentTemplate>;
+	@ContentChildren(ColumnHeaderTemplate) columnHeaders: QueryList<ColumnHeaderTemplate>;
+
+	constructor(cardContainerBuilder: CardContainerBuilderService) {
+		this.cardContainerBuilder = cardContainerBuilder;
+		this.data$ = new BehaviorSubject(null);
+	}
+
+	ngOnInit(): void {
+		this.builder = this.cardContainerBuilder.getInstance(this.options || {});
+		each(this.columns, column => {
+			this.cardContainerBuilder.addColumn(this.builder, column);
+		});
+		this.cardContainerBuilder.buildObservableDataSource(this.builder, this.data$);
+	}
+}

source/ui.module.ts

@@ -13,6 +13,7 @@ import { FormComponent } from'./components/form/form';
 import { INPUT_DIRECTIVES } from'./components/inputs/index';
 import { MultiStepIndicatorComponent } from'./components/multiStepIndicator/multiStepIndicator';
 import { RatingBarComponent } from'./components/ratingBar/ratingBar';
+import { SimpleCardContainer } from'./components/simpleCardContainer/simpleCardContainer';
 import { SIMPLE_CARD_DIRECTIVES } from'./components/simpleCardList/index';
 import { StringWithWatermarkComponent } from'./components/stringWithWatermark/stringWithWatermark';
 import { TABS_COMPONENT } from'./components/tabs/index';
@@ -42,6 +43,7 @@ export const componentsList: any[] = [
 	INPUT_DIRECTIVES,
 	MultiStepIndicatorComponent,
 	RatingBarComponent,
+	SimpleCardContainer,
 	SIMPLE_CARD_DIRECTIVES,
 	StringWithWatermarkComponent,
 	TABS_COMPONENT,