feat(entity): added column templates and sticky column options

xmlking · Dec 8, 2018 · 46abb0f · 46abb0f
1 parent e525738
commit 46abb0f
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 25 deletions.
diff --git a/libs/grid/src/lib/containers/accounts-table/accounts-table.component.ts b/libs/grid/src/lib/containers/accounts-table/accounts-table.component.ts
@@ -105,9 +105,12 @@ export class AccountsTableComponent extends EntitiesComponent<Account, AccountSe
    **/
   openPopUp(entity: Account) {
     let isNew = false;
+    let id;
     if (!entity) {
       isNew = true;
       entity = this.getNewEntity();
+    } else {
+      id = entity.id;
     }
     const title = isNew ? 'Add Member' : 'Update Member';
 
@@ -122,13 +125,7 @@ export class AccountsTableComponent extends EntitiesComponent<Account, AccountSe
       .pipe(
         filter(res => res !== false),
         // tap(res => console.log(res)),
-        map((res: Account) => {
-          if (!isNew) {
-            res.id = entity.id;
-          }
-          return res;
-        }),
-        concatMap((res: Account) => super.updateOrCreate(res, isNew)),
+        concatMap((res: Account) => super.updateOrCreate(res, id)),
       )
       .subscribe(
         _ => {

diff --git a/libs/shared/src/lib/containers/entity/entity.component.html b/libs/shared/src/lib/containers/entity/entity.component.html
@@ -1,7 +1,3 @@
-<!-- FIXME Only used for GRID Demo -->
-<ngx-breadcrumbs title="Grid" [crumbs]="crumbs"></ngx-breadcrumbs>
-<!-- FIXME End -->
-
 <div fxLayout="column">
   <mat-card class="mat-elevation-z8">
     <mat-toolbar *ngIf="showToolbar">
@@ -87,9 +83,21 @@
         </mat-cell>
       </ng-container>
 
-      <ng-container *ngFor="let column of columns" [matColumnDef]="column.property">
+      <ng-container
+        *ngFor="let column of columns"
+        [matColumnDef]="column.property"
+        [sticky]="column.sticky === 'start'"
+        [stickyEnd]="column.sticky === 'end'"
+      >
         <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.header }} </mat-header-cell>
-        <mat-cell *matCellDef="let row"> {{ column.displayFn(row) }} </mat-cell>
+        <mat-cell *matCellDef="let row">
+          <ng-container *ngIf="column.template; else noTemplate">
+            <ng-container
+              *ngTemplateOutlet="column.template; context: { $implicit: row, column: row[column.property] }"
+            ></ng-container>
+          </ng-container>
+          <ng-template #noTemplate> {{ column.displayFn(row) }} </ng-template>
+        </mat-cell>
       </ng-container>
 
       <ng-container *ngIf="showActionColumn" [matColumnDef]="actionColumn" sticky>

diff --git a/libs/shared/src/lib/containers/entity/entity.component.scss b/libs/shared/src/lib/containers/entity/entity.component.scss
@@ -1,9 +1,3 @@
-:host {
-  display: block;
-  padding: 1.5%;
-  position: relative;
-}
-
 mat-toolbar {
   padding: 8px 24px 0;
 }

diff --git a/libs/shared/src/lib/containers/entity/entity.component.ts b/libs/shared/src/lib/containers/entity/entity.component.ts
@@ -89,11 +89,11 @@ export abstract class EntitiesComponent<TEntity extends Entity, TService extends
     return this.entityService.delete(item.id).pipe(concatMap(_ => this.update()));
   }
 
-  updateOrCreate(entity: TEntity, isNew: boolean) {
-    if (isNew) {
-      return this.entityService.post(entity).pipe(concatMap(_ => this.update()));
+  updateOrCreate(entity: TEntity, id: number) {
+    if (id) {
+      return this.entityService.put(id, entity).pipe(concatMap(_ => this.update()));
     } else {
-      return this.entityService.put(entity).pipe(concatMap(_ => this.update()));
+      return this.entityService.post(entity).pipe(concatMap(_ => this.update()));
     }
   }
 

diff --git a/libs/shared/src/lib/containers/entity/entity.model.ts b/libs/shared/src/lib/containers/entity/entity.model.ts
@@ -1,3 +1,5 @@
+import { TemplateRef } from '@angular/core';
+
 export abstract class Entity {
   abstract get id(): number | string;
   [key: string]: any;
@@ -10,6 +12,8 @@ export class EntityColumnDef<T> {
   readonly property: string;
   readonly header = this.property;
   public visible = true;
+  readonly sticky?: 'start' | 'end';
+  readonly template?: TemplateRef<any>;
   readonly displayFn = (entity: T) => entity[this.property];
 
   public constructor(init?: Partial<EntityColumnDef<T>>) {

diff --git a/libs/shared/src/lib/containers/entity/entity.service.ts b/libs/shared/src/lib/containers/entity/entity.service.ts
@@ -68,10 +68,10 @@ export abstract class EntityService<T extends Entity> {
     );
   }
 
-  put(entity: T) {
+  put(id: number | string, entity: T) {
     console.log(entity);
     this.loadingSubject.next(true);
-    return this.httpClient.put(`${this.baseUrl}/${this.entityPath}`, entity).pipe(
+    return this.httpClient.put(`${this.baseUrl}/${this.entityPath}/${id}`, entity).pipe(
       catchError(this.handleError),
       finalize(() => this.loadingSubject.next(false)),
     );