teiidtools-339: Upgraded dataservices list to pfng and fixed layout i…

…ssues related to pfng upgrade.

ngapp/src/app/dataservices/dataservices-list/basic-content.component.html

@@ -0,0 +1,16 @@
+<div class="row">
+  <div class="col-lg-12">
+    <p>
+      <span class="list-pf-title">Name</span>
+    </p>
+    <p>
+      <span class="dataservice-list-name">{{item.getId()}}</span>
+    </p>
+    <p>
+      <span class="list-pf-title">Description</span>
+    </p>
+    <p>
+      <span class="dataservice-list-description">{{item.getDescription()}}</span>
+    </p>
+  </div>
+</div>

ngapp/src/app/dataservices/dataservices-list/basic-content.component.ts

@@ -0,0 +1,24 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  ViewEncapsulation
+} from '@angular/core';
+
+@Component({
+  encapsulation: ViewEncapsulation.None,
+  selector: 'basic-content',
+  templateUrl: 'basic-content.component.html'
+})
+export class BasicContentComponent implements OnInit {
+  @Input() item: any;
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngDoCheck(): void {
+  }
+}

ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.css

@@ -3,6 +3,14 @@
   font-size: 1.7em;
 }
 
+.dataservice-list-description {
+  color: black;
+}
+
+.dataservice-list-name {
+  color: black;
+}
+
 .dataservice-list-quicklook-icon {
   margin-left: 20px;
   font-size: 1.3em;
@@ -54,3 +62,14 @@
   border-color: #00659c;
   color: white;
 }
+
+.list-pf-actions {
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+
+.close {
+  float: left;
+}
+
+

ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.html

@@ -1,52 +1,50 @@
-<div class="list-group list-view-pf">
-  <div class="list-group-item list-view-pf-stacked" *ngFor="let dataservice of dataservices" [class.active]="isSelected(dataservice)" (click)="toggleDataserviceSelected(dataservice)">
-    <div class="list-view-pf-main-info">
-      <div class="list-view-pf-left">
-        <span class="pull-left pficon-ok dataservice-list-state-icon" *ngIf="dataservice.serviceDeploymentActive"></span>
-        <span class="pull-left pficon-error-circle-o dataservice-list-state-icon" *ngIf="dataservice.serviceDeploymentFailed"></span>
-        <span class="pull-left pficon-warning-triangle-o dataservice-list-state-icon" *ngIf="dataservice.serviceDeploymentInactive"></span>
-        <span class="pull-left pficon-unknown dataservice-list-state-icon" *ngIf="dataservice.serviceDeploymentNotDeployed"></span>
-        <span class="pull-left fa fa-spinner fa-pulse dataservice-list-state-icon" *ngIf="dataservice.serviceDeploymentLoading"></span>
-        <span class="fa fa-table list-view-pf-icon-sm"></span>
-      </div>
-      <div class="list-view-pf-body">
-        <div class="list-view-pf-description">
-          <div class="list-group-item-heading">
-            <a [routerLink]="[dataservice.getId()]">{{ dataservice.getId() }}</a>
-          </div>
-          <div class="list-group-item-text">
-            {{ dataservice.getDescription() }}
-          </div>
-        </div>
-        <div class="list-view-pf-additional-info">
-          <div>
-            <span class="fa fa-database"></span>
-            <span *ngIf="dataservice.getServiceViewTables().length==1">{{dataservice.getServiceViewTables()[0]}}</span>
-            <span *ngIf="dataservice.getServiceViewTables().length==2">{{dataservice.getServiceViewTables()[0]}}, {{dataservice.getServiceViewTables()[1]}}</span>
+<div class="padding-15">
+  <div class="row">
+    <div class="col-sm-12">
+      <div class="list-group">
+        <pfng-list
+          [actionTemplate]="actionTemplate"
+          [config]="listConfig"
+          [expandTemplate]="expandTemplate"
+          [items]="items"
+          [itemTemplate]="itemTemplate"
+          (onActionSelect)="handleAction($event, null)">
+          <div class="list-pf-left">
+            <span class="fa fa-plug dataservice-list-icon"></span>
           </div>
-          <div>
-            <span *ngIf="dataservice.serviceDeploymentActive" class="fa fa-search dataservice-list-quicklook-icon" (click)="onQuickLookDataservice(dataservice.getId())"></span>
-            <span *ngIf="!dataservice.serviceDeploymentActive" class="fa fa-search dataservice-list-quicklook-disabled-icon"></span>
-          </div>
-          <!--
-          <div class="dataservice-tags" *ngIf="dataservice.tags && dataservice.tags.length > 0">
-            <span class="dataservice-tags-label">Tags:</span>
-            <span class="dataservice-tag" *ngFor="let tag of dataservice.tags" (click)="selectTag(tag, $event)">{{ tag }}</span>
-          </div>
-          -->
-        </div>
-      </div>
-      <div class="list-view-pf-actions">
-        <button i18n="@@dataservicesList.activate" class="btn btn-default" type="button"
-                (click)="onActivateDataservice(dataservice.getId())">Activate</button>
-        <button i18n="@@dataservicesList.test" class="btn btn-default" type="button"
-                (click)="onTestDataservice(dataservice.getId())" [disabled]="!dataservice.serviceDeploymentActive">Test</button>
-        <button i18n="@@dataservicesList.publish" class="btn btn-default" type="button"
-                (click)="onPublishDataservice(dataservice.getId())" [disabled]="dataservice.serviceDeploymentLoading">Publish</button>
-        <button i18n="@@dataservicesList.edit" class="btn btn-default" type="button"
-                (click)="onEditDataservice(dataservice.getId())" [disabled]="dataservice.serviceDeploymentLoading">Edit</button>
-        <button i18n="@@dataservicesList.delete" class="btn btn-danger" type="button"
-                (click)="onDeleteDataservice(dataservice.getId())" [disabled]="dataservice.serviceDeploymentLoading">Delete</button>
+          <ng-template #itemTemplate let-item="item">
+            <span class="pull-left pficon-ok dataservice-list-state-icon" *ngIf="item.serviceDeploymentActive"></span>
+            <span class="pull-left pficon-error-circle-o dataservice-list-state-icon" *ngIf="item.serviceDeploymentFailed"></span>
+            <span class="pull-left pficon-warning-triangle-o dataservice-list-state-icon" *ngIf="item.serviceDeploymentInactive"></span>
+            <span class="pull-left pficon-unknown dataservice-list-state-icon" *ngIf="item.serviceDeploymentNotDeployed"></span>
+            <span class="pull-left fa fa-spinner fa-pulse dataservice-list-state-icon" *ngIf="item.serviceDeploymentLoading"></span>
+            <span class="fa fa-table list-view-pf-icon-sm"></span>
+            <div class="list-pf-content-wrapper">
+              <div class="list-pf-main-content">
+                <div class="list-pf-title">{{item.getId()}}</div>
+                <div class="list-pf-description text-overflow-pf">{{item.getDescription()}}</div>
+              </div>
+              <div class="list-pf-additional-content">
+                <pfng-list-expand-toggle [expandId]="'views'" [item]="item" [template]="viewsTemplate">
+                <ng-template #viewsTemplate>
+                <span class="fa fa-table"></span>
+                <span class="list-pf-title">Views</span>
+                </ng-template>
+                </pfng-list-expand-toggle>
+              </div>
+            </div>
+          </ng-template>
+          <ng-template #actionTemplate let-item="item" let-index="index">
+            <pfng-action class="list-pf-actions"
+                         [config]="actionConfig"
+                         (onActionSelect)="handleAction($event, item)">
+            </pfng-action>
+          </ng-template>
+          <ng-template #expandTemplate let-item="item" let-index="index">
+            <basic-content [item]="item" *ngIf="item.expandId === undefined"></basic-content>
+            <views-content [item]="item" *ngIf="item.expandId === 'views'"></views-content>
+          </ng-template>
+        </pfng-list>
       </div>
     </div>
   </div>

ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.ts

@@ -15,18 +15,46 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { Router } from "@angular/router";
+import {
+  Component,
+  OnInit,
+  ViewEncapsulation,
+  EventEmitter,
+  Input,
+  Output
+} from '@angular/core';
 import { Dataservice } from "@dataservices/shared/dataservice.model";
+import { LoggerService } from "@core/logger.service";
+import { Action, ActionConfig, ListConfig, ListEvent } from "patternfly-ng";
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   moduleId: module.id,
   selector: "app-dataservices-list",
   templateUrl: "dataservices-list.component.html",
   styleUrls: ["dataservices-list.component.css"]
-})
-export class DataservicesListComponent {
+ })
+export class DataservicesListComponent implements OnInit {
 
+  public static readonly activateDataserviceEvent = "activate";
+  public static readonly deleteDataserviceEvent = "delete";
+  public static readonly editDataserviceEvent = "edit";
+  public static readonly publishDataserviceEvent = "publish";
+  public static readonly quickLookDataserviceEvent = "quickLook";
+  public static readonly testDataserviceEvent = "test";
+
+  public readonly activateEvent = DataservicesListComponent.activateDataserviceEvent;
+  public readonly deleteEvent = DataservicesListComponent.deleteDataserviceEvent;
+  public readonly editEvent = DataservicesListComponent.editDataserviceEvent;
+  public readonly publishEvent = DataservicesListComponent.publishDataserviceEvent;
+  public readonly quickLookEvent = DataservicesListComponent.quickLookDataserviceEvent;
+  public readonly testEvent = DataservicesListComponent.testDataserviceEvent;
+
+  actionConfig: ActionConfig;
+  actionsText: string = '';
+  allItems: Dataservice[];
+  items: Dataservice[];
+  listConfig: ListConfig;
   @Input() public dataservices: Dataservice[];
   @Input() public selectedDataservices: Dataservice[];
   @Output() public dataserviceSelected: EventEmitter<Dataservice> = new EventEmitter<Dataservice>();
@@ -39,16 +67,69 @@ export class DataservicesListComponent {
   @Output() public editDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public quickLookDataservice: EventEmitter<string> = new EventEmitter<string>();
 
-  private router: Router;
+  public logger: LoggerService;
 
   /**
-   * Constructor.
+   * @param {LoggerService} logger the logging service
    */
-  constructor(router: Router) {
-    this.router = router;
+  constructor( logger: LoggerService ) {
+    this.logger = logger;
+  }
+
+  ngOnInit(): void {
+
+    this.items = this.dataservices;
+
+    this.actionConfig = {
+      primaryActions: [{
+        id: 'edit',
+        title: 'Edit',
+        tooltip: 'Edit this data service'
+      },
+      {
+        id: 'test',
+        title: 'Test',
+        tooltip: 'Test this data service'
+      },
+      {
+        id: 'quickLook',
+        title: 'Preview',
+        tooltip: 'Preview this data service'
+      }],
+      moreActions: [{
+        disabled: false,
+        id: 'activate',
+        title: 'Activate',
+        tooltip: 'Activate this data service'
+        },
+        {
+          id: 'publish',
+          title: 'Publish',
+          tooltip: 'Publish this data service'
+        },
+        {
+          id: 'refresh',
+          title: 'Refresh',
+          tooltip: 'Refresh this data service'
+        },
+        {
+          id: 'delete',
+          title: 'Delete',
+          tooltip: 'Delete this data service'
+        }],
+    } as ActionConfig;
+
+    this.listConfig = {
+      dblClick: false,
+      multiSelect: false,
+      selectItems: false,
+      selectionMatchProp: 'name',
+      showCheckbox: false,
+      useExpandItems: true
+    } as ListConfig;
   }
 
-  public toggleDataserviceSelected(dataservice: Dataservice): void {
+    public toggleDataserviceSelected(dataservice: Dataservice): void {
     if (this.isSelected(dataservice)) {
       this.dataserviceDeselected.emit(dataservice);
     } else {
@@ -84,10 +165,39 @@ export class DataservicesListComponent {
     this.quickLookDataservice.emit(dataserviceName);
   }
 
-  // public onSelectTag(tag: string, event: MouseEvent): void {
-  //   event.stopPropagation();
-  //   event.preventDefault();
-  //   this.tagSelected.emit(tag);
-  // }
+  ngDoCheck(): void {
+  }
+
+  // Actions
+
+  handleAction($event: Action, item: any): void {
 
+    switch ( $event.id ) {
+      case DataservicesListComponent.activateDataserviceEvent:
+        this.activateDataservice.emit( item.getId() );
+        break;
+      case DataservicesListComponent.deleteDataserviceEvent:
+        this.deleteDataservice.emit( item.getId() );
+        break;
+      case DataservicesListComponent.editDataserviceEvent:
+        this.editDataservice.emit( item.getId() );
+        break;
+      case DataservicesListComponent.publishDataserviceEvent:
+        this.publishDataservice.emit( item.getId() );
+        break;
+      case DataservicesListComponent.quickLookDataserviceEvent:
+        this.quickLookDataservice.emit( item.getId() );
+        break;
+      case DataservicesListComponent.testDataserviceEvent:
+        this.testDataservice.emit( item.getId() );
+        break;
+      default:
+        this.logger.error( "Unhandled event type of '" + $event.title + "'" );
+        break;
+    }
+
+  //  handleClick($event: ListEvent): void {
+    //  this.actionsText = $event.item.name + ' clicked\r\n' + this.actionsText;
+  //  }
+  }
 }

ngapp/src/app/dataservices/dataservices-list/views-content.component.html

@@ -0,0 +1,24 @@
+<div class="row">
+  <div class="col-sm-12">
+    <div class="form-group">
+      <pfng-list
+        [config]="listConfig"
+        [itemTemplate]="itemTemplate"
+        [expandTemplate]="expandTemplate"
+        [items]="getViews( item )">
+        <ng-template #itemTemplate let-item="item">
+          <div class="list-pf-main-content">
+            <a class="list-pf-title view-name"><span class="fa fa-table dataservice-list-action-icon"></span>{{ item }}</a>
+          </div>
+        </ng-template>
+        <ng-template #expandTemplate let-item="item" let-index="index">
+          <div class="row" *ngFor="let connection of getConnections( item )">
+            <div class="col-sm-9 list-view-pf-icon-sm">
+              {{ connection.getId() }}
+            </div>
+          </div>
+        </ng-template>
+      </pfng-list>
+    </div>
+  </div>
+</div>