Hide toolbar if empty
-<div class="row api-connector-list">
+<div class="api-connector-list">
+ <div class="row">
<div class="col-xs-12">
<h1>API Client Connector</h1>
- <p>Nullam quis risus eget urna mollis ornare vel eu leo. Find out more about this at <a href="https://access.redhat.com/documentation/en-us/red_hat_jboss_fuse/7.0-tp/html-single/fuse_ignite_sample_integration_tutorial/" rel="nofollow" target="_blank">{{ config.getSettings('branding', 'appName', 'Syndesis') }} Help</a>.</p>
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Find out more at <a>{{ config.getSettings('branding', 'appName', 'Syndesis') }} Help</a></p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-xs-12">
+ <syndesis-loading [loading]="loading | async">
+
+ <!-- List Toolbar -->
+
+ <syndesis-list-toolbar [items]="connectors"
+ [filterTags]="false"
+ [filteredItems]="filteredConnectors"
+ [viewTemplate]="viewTemplate"
+ *ngIf="connectors">
+ <ng-template #viewTemplate>
+ <div class="toolbar-pf-action-right">
+ <button type="button"
+ class="btn btn-primary"
+ [routerLink]="['/customizations/api-connectors']">
+ Create API Connector
+ </button>
+ </div>
+ </ng-template>
+ </syndesis-list-toolbar>
+
+ <!-- PatternFly List -->
+
+ <pfng-list [items]="filteredConnectors"
+ [config]="listConfig"
+ [itemTemplate]="itemTemplate"
+ [actionTemplate]="actionTemplate">
+ <ng-template #itemTemplate
+ let-item="item"
+ let-index="index">
+ <div class="list-pf-content-wrapper">
+ <div class="list-pf-main-content">
+ <div class="list-pf-title">{{ item.name }}</div>
+ <div class="list-pf-description" text-overflow-pf>
+ {{ item.description }}
+ </div>
+ </div>
+ <div class="list-pf-additional-content">
+ <div *ngIf="item.connectors">
+ <strong>Used by {{ item.connectors }}</strong>
+ </div>
+ </div>
+ </div>
+ </ng-template>
+ <ng-template #actionTemplate
+ let-item="item"
+ let-index="index">
+ <button type="button" class="btn btn-default">Update</button>
+ <button type="button" class="btn btn-default">Delete</button>
+ </ng-template>
+ </pfng-list>
+
+ </syndesis-loading>
+ </div>
</div>
</div>
