fix: Add support override with @input (#30, #31)

rucken · Mar 7, 2019 · c9ca04b · c9ca04b
1 parent bd9fddb
commit c9ca04b
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 35 deletions.
diff --git a/libs/rucken/ionic/src/lib/components/entity-list/entity-list.component.html b/libs/rucken/ionic/src/lib/components/entity-list/entity-list.component.html
@@ -4,7 +4,7 @@
     animated></ion-searchbar>
 <ion-list>
     <ng-container *ngFor="let item of (filteredItems$ | async); trackBy: trackByFn;">
-        <ng-container *ngTemplateOutlet="gridCellTemplate ? gridCellTemplate : defaultGridCellTemplate, context: { $implicit: {item:item} }"></ng-container>
+        <ng-container *ngTemplateOutlet="(gridCellTemplate ? gridCellTemplate : defaultGridCellTemplate), context: { $implicit: {item:item} }"></ng-container>
     </ng-container>
 </ion-list>
 <ion-infinite-scroll
@@ -77,27 +77,27 @@
             (click)="slidingItem.close();onView(ctx.item)"
             class="activated"
             *ngIf="viewLink===undefined">
-            <ng-container *ngTemplateOutlet="itemLabelTemplate, context: {$implicit: ctx}"></ng-container>
+            <ng-container *ngTemplateOutlet="(itemLabelTemplate?itemLabelTemplate:defaultItemLabelTemplate), context: {$implicit: ctx}"></ng-container>
         </ion-item>
         <ion-item
             detail
             class="activated"
             *ngIf="viewLink!==undefined"
             (click)="slidingItem.close()"
             [routerLink]="[viewLink+'/'+ctx.item.id]">
-            <ng-container *ngTemplateOutlet="itemLabelTemplate, context: {$implicit: ctx}"></ng-container>
+            <ng-container *ngTemplateOutlet="(itemLabelTemplate?itemLabelTemplate:defaultItemLabelTemplate), context: {$implicit: ctx}"></ng-container>
         </ion-item>
         <ion-item-options
             side="start"
             class="sliding-enabled"
             *ngIf="(filtredColumns$ | async)?.indexOf('action')!==-1">
-            <ng-container *ngTemplateOutlet="defaultGridCellActionContent, context: { $implicit: {item:ctx.item,slidingItem:slidingItem} }"></ng-container>
+            <ng-container *ngTemplateOutlet="(gridCellActionContent?gridCellActionContent:defaultGridCellActionContent), context: { $implicit: {item:ctx.item,slidingItem:slidingItem} }"></ng-container>
         </ion-item-options>
     </ion-item-sliding>
 </ng-template>
 <ng-template
     let-ctx
-    #itemLabelTemplate>
+    #defaultItemLabelTemplate>
     <ion-label text-wrap>
         <ng-container *ngIf="(filtredColumns$ | async) as columns">
             <h2 *ngIf="ctx.item[columns[1]]">

diff --git a/libs/rucken/ionic/src/lib/components/entity-list/entity-list.component.ts b/libs/rucken/ionic/src/lib/components/entity-list/entity-list.component.ts
@@ -16,43 +16,56 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EntityListComponent<TModel extends IModel> implements OnChanges {
+
+  @ContentChild('#defaultItemLabelTemplate')
+  defaultItemLabelTemplate: TemplateRef<any>;
+  @Input()
+  itemLabelTemplate: TemplateRef<any> = undefined;
+
   @ContentChild('#defaultGridFieldContent')
   defaultGridFieldContent: TemplateRef<any>;
-  @ContentChild('#defaultGridFieldActionContent')
-  defaultGridFieldActionContent: TemplateRef<any>;
+  @Input()
+  gridFieldContent: TemplateRef<any> = undefined;
+
   @ContentChild('#defaultGridCellContent')
   defaultGridCellContent: TemplateRef<any>;
-  @ContentChild('#defaultGridCellTranslatedContent')
-  defaultGridCellTranslatedContent: TemplateRef<any>;
-  @ContentChild('#defaultGridCellActionContent')
-  defaultGridCellActionContent: TemplateRef<any>;
-  @ContentChild('#defaultSearchFieldTemplate')
-  defaultSearchFieldTemplate: TemplateRef<any>;
-  @ContentChild('#defaultEntityListFooterTemplate')
-  defaultEntityListFooterTemplate: TemplateRef<any>;
+  @Input()
+  gridCellContent: TemplateRef<any> = undefined;
+
   @ContentChild('#defaultEntityListHeaderTemplate')
   defaultEntityListHeaderTemplate: TemplateRef<any>;
-
-  @Input()
-  gridFieldTemplate: TemplateRef<any> = undefined;
   @Input()
-  gridCellTemplate: TemplateRef<any> = undefined;
-  @Input()
-  gridFieldContent: TemplateRef<any> = undefined;
-  @Input()
-  gridFieldActionContent: TemplateRef<any> = undefined;
+  entityListHeaderTemplate: TemplateRef<any> = undefined;
+
+  @ContentChild('#defaultEntityListFooterTemplate')
+  defaultEntityListFooterTemplate: TemplateRef<any>;
   @Input()
-  gridCellContent: TemplateRef<any> = undefined;
+  entityListFooterTemplate: TemplateRef<any> = undefined;
+
+  @ContentChild('#defaultSearchFieldTemplate')
+  defaultSearchFieldTemplate: TemplateRef<any>;
   @Input()
-  gridCellTranslatedContent: TemplateRef<any> = undefined;
+  searchFieldTemplate: TemplateRef<any> = undefined;
+
+  @ContentChild('#defaultGridCellActionContent')
+  defaultGridCellActionContent: TemplateRef<any>;
   @Input()
   gridCellActionContent: TemplateRef<any> = undefined;
+
+  @ContentChild('#defaultGridCellTranslatedContent')
+  defaultGridCellTranslatedContent: TemplateRef<any>;
   @Input()
-  searchFieldTemplate: TemplateRef<any> = undefined;
+  gridCellTranslatedContent: TemplateRef<any> = undefined;
+
+  @ContentChild('#defaultGridFieldActionContent')
+  defaultGridFieldActionContent: TemplateRef<any>;
   @Input()
-  entityListFooterTemplate: TemplateRef<any> = undefined;
+  gridFieldActionContent: TemplateRef<any> = undefined;
+
+  @ContentChild('#defaultGridCellTemplate')
+  defaultGridCellTemplate: TemplateRef<any>;
   @Input()
-  entityListHeaderTemplate: TemplateRef<any> = undefined;
+  gridCellTemplate: TemplateRef<any> = undefined;
 
   @Input()
   viewLink: string = undefined;

diff --git a/libs/rucken/ionic/src/lib/components/form-group/form-group.component.html b/libs/rucken/ionic/src/lib/components/form-group/form-group.component.html
@@ -9,10 +9,7 @@
             position="floating">
             {{title | translate}}
         </ion-label>
-        <ng-container *ngTemplateOutlet="contentWrapper"></ng-container>
+        <ng-content></ng-content>
         <p *ngIf="(errors$ | async)[0]">{{(errors$ | async)[0] | translate}}</p>
     </ion-item>
 </div>
-<ng-template #contentWrapper>
-    <ng-content></ng-content>
-</ng-template>
diff --git a/libs/rucken/ionic/src/lib/components/navbar/navbar.component.html b/libs/rucken/ionic/src/lib/components/navbar/navbar.component.html
@@ -2,7 +2,7 @@
     <ion-menu-toggle
         auto-hide="false"
         *ngFor="let item of leftRoutes$ | async">
-        <ng-container *ngTemplateOutlet="menuItemRef;context:{item:item}"></ng-container>
+        <ng-container *ngTemplateOutlet="(menuItemTemplate?menuItemTemplate:defaultMenuItemTemplate);context:{item:item}"></ng-container>
     </ion-menu-toggle>
     <ion-menu-toggle auto-hide="false">
         <ion-item
@@ -31,7 +31,7 @@
 </ion-list>
 <ng-template
     let-item="item"
-    #menuItemRef>
+    #defaultMenuItemTemplate>
     <ion-item
         *ngIf="item && (!item?.permissions?.only || (item?.permissions?.only | perm:false | async))"
         [ngClass]="{'active': router.isActive(item.url, false)}"

diff --git a/libs/rucken/ionic/src/lib/components/navbar/navbar.component.ts b/libs/rucken/ionic/src/lib/components/navbar/navbar.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, isDevMode, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, isDevMode, Output, TemplateRef } from '@angular/core';
 import { Router } from '@angular/router';
 import { BindObservable } from 'bind-observable';
 import { BindIoInner } from 'ngx-bind-io';
@@ -11,6 +11,12 @@ import { Observable } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NavbarComponent {
+
+  @ContentChild('#defaultMenuItemTemplate')
+  defaultMenuItemTemplate: TemplateRef<any>;
+  @Input()
+  menuItemTemplate: TemplateRef<any> = undefined;
+
   @Input()
   showSignIn: boolean = undefined;
   @Input()