feat(sponsors): table component for the list

matheo · Jun 16, 2019 · 19ac14e · 19ac14e
1 parent be911c7
commit 19ac14e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 5 deletions.
diff --git a/src/app/features/sponsors/list/table/table.component.html b/src/app/features/sponsors/list/table/table.component.html
@@ -1,3 +1,44 @@
-<div>
-  TABLE
-</div>
+<mat-datasource [dataSource]="source">
+  <mat-table [dataSource]="source">
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row" fxLayout="row" fxLayoutAlign="start center">
+        <span>
+          {{ row.name }}
+        </span>
+      </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="tier">
+      <mat-header-cell *matHeaderCellDef>Tier</mat-header-cell>
+      <mat-cell *matCellDef="let row" fxLayout="row" fxLayoutAlign="start center">
+        <span>
+          <strong>${{ row.tier }}</strong> a month
+        </span>
+      </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="following">
+      <mat-header-cell *matHeaderCellDef>Following</mat-header-cell>
+      <mat-cell *matCellDef="let row" fxLayout="row" fxLayoutAlign="start center">
+        <span>
+          {{ row.following ? 'Yes' : 'No' }}
+        </span>
+      </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="visibility">
+      <mat-header-cell *matHeaderCellDef>Visibility</mat-header-cell>
+      <mat-cell *matCellDef="let row" fxLayout="row" fxLayoutAlign="start center">
+        <span>
+          {{ row.visibility }}
+        </span>
+      </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="columns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: columns"></mat-row>
+  </mat-table>
+
+  <ng-content></ng-content>
+</mat-datasource>
diff --git a/src/app/features/sponsors/list/table/table.component.ts b/src/app/features/sponsors/list/table/table.component.ts
@@ -1,11 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { SponsorsDatasource } from '../../data';
 
 @Component({
   selector: 'app-feat-sponsors-list-table',
   templateUrl: './table.component.html',
   styleUrls: ['./table.component.scss']
 })
 export class SponsorsListTableComponent implements OnInit {
+  @Input() source: SponsorsDatasource;
+  @Input() columns = ['name', 'tier', 'following', 'visibility'];
+
   constructor() {}
 
   ngOnInit() {}

diff --git a/src/app/features/sponsors/sponsors.barrel.ts b/src/app/features/sponsors/sponsors.barrel.ts
@@ -1,9 +1,12 @@
 import { AngularFirestoreModule } from '@angular/fire/firestore';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatTableModule } from '@angular/material/table';
+import { MatDataSourceModule } from '@matheo/datasource';
 import { SponsorsListComponent } from './list/list.component';
 import { SponsorsListFilterComponent } from './list/filter/filter.component';
 import { SponsorsListTableComponent } from './list/table/table.component';
 
-export const SponsorsImports = [AngularFirestoreModule];
+export const SponsorsImports = [AngularFirestoreModule, FlexLayoutModule, MatTableModule, MatDataSourceModule];
 
 export const SponsorsDeclarations = [SponsorsListFilterComponent, SponsorsListTableComponent];