feat(entity-table): add option to choose button style

infra-geo-ouverte · Aug 7, 2019 · d0d4aae · d0d4aae
1 parent b1083e8
commit d0d4aae
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/packages/common/src/lib/entity/entity-table/entity-table.component.html b/packages/common/src/lib/entity/entity-table/entity-table.component.html
@@ -66,13 +66,22 @@
           <ng-container *ngIf="columnRenderer === entityTableColumnRenderer.ButtonGroup">
             <td mat-cell *matCellDef="let entity" class="mat-cell-text"
               [ngClass]="getCellClass(entity, column)">
-              <button *ngFor="let button of getValue(entity, column)"
-                mat-mini-fab
-                igoStopPropagation
-                [color]="button.color"
-                (click)="onButtonClick(button.click, entity)">
-                <mat-icon svgIcon="{{button.icon}}"></mat-icon>
-              </button>
+              <span *ngFor="let button of getValue(entity, column)">
+                <button *ngIf="button.style === 'mat-icon-button'"
+                  igoStopPropagation
+                  mat-icon-button
+                  [color]="button.color"
+                  (click)="onButtonClick(button.click, entity)">
+                  <mat-icon svgIcon="{{button.icon}}"></mat-icon>
+                </button>
+                <button *ngIf="button.style !== 'mat-icon-button'"
+                  igoStopPropagation
+                  mat-mini-fab
+                  [color]="button.color"
+                  (click)="onButtonClick(button.click, entity)">
+                  <mat-icon svgIcon="{{button.icon}}"></mat-icon>
+                </button>
+              </span>
             </td>
           </ng-container>
       </ng-container>

diff --git a/packages/common/src/lib/entity/shared/entity.interfaces.ts b/packages/common/src/lib/entity/shared/entity.interfaces.ts
@@ -92,4 +92,5 @@ export interface EntityTableButton {
   icon: string;
   click: (entity: object) => void;
   color?: 'primary' | 'accent' | 'warn';
+  style?: 'mat-mini-fab' | 'mat-icon-button';
 }