Started converted uses of ngx-datatable to patternfly-ng table

- converted selected table card expansion to use patternfly-ng table
- minor style changes
- fixed some tslint errors
- got breadcrumbs showing

ngapp/src/app/connections/connections-cards/connection-card/connection-card.component.ts

@@ -54,7 +54,7 @@ export class ConnectionCardComponent implements DoCheck, OnInit {
   }
 
   private get detailsIconStyle(): string {
-    return this.showDetails ? "fa fa-close" : "fa fa-angle-right";
+    return this.showDetails ? "fa fa-close card-footer-action-icon" : "fa fa-angle-right card-footer-action-icon";
   }
 
   /**

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

@@ -1,11 +1,3 @@
 .connection-details-properties {
   padding-left: 40px;
 }
-
-.pfng-list-expansion .list-pf-content {
-  width: 100%;
-}
-
-.pfng-list-expansion .pfng-list-content {
-  width: 100%;
-}

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

@@ -127,6 +127,10 @@ export class ConnectionsListComponent implements OnInit {
    */
   public handleAction( action: Action,
                        item: any ): void {
+    // first select the connection
+    this.connectionSelected.emit( item );
+
+    // now perform action
     if ( action.id === this.deleteActionId ) {
       this.onDeleteConnection( this.selectedConnections[ 0 ].getId() );
     } else if ( action.id === this.editActionId ) {

ngapp/src/app/connections/connections.component.html

@@ -10,7 +10,7 @@
 
   <div class="container-fluid connection-list-connections" *ngIf="!pageError">
     <div class="col-sm-12">
-      <h2 i18n="@@connections.connections">Connections</h2>
+      <h2 class="app-feature-title" i18n="@@connections.connections">Connections</h2>
     </div>
     <div class="row toolbar-pf">
       <div class="col-sm-12">

ngapp/src/app/connections/connections.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewChild} from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Connection } from "@connections/shared/connection.model";
 import { ConnectionService } from "@connections/shared/connection.service";
@@ -41,26 +41,23 @@ import { SortEvent } from "patternfly-ng";
   templateUrl: "./connections.component.html",
   styleUrls: ["./connections.component.css"]
 })
-export class ConnectionsComponent extends AbstractPageComponent implements OnInit{
+export class ConnectionsComponent extends AbstractPageComponent implements OnInit {
 
   public connectionNameForDelete: string;
 
   public filterConfig: FilterConfig;
   public filtersText = "";
-  public separator: object;
-  public allItems: Connection[];
   public items: Connection[];
   public sortConfig: SortConfig;
   public currentSortField: SortField;
-  public isAscendingSort: boolean = true;
+  public isAscendingSort = true;
 
   private allConns: Connection[] = [];
   private filteredConns: Connection[] = [];
   private selectedConns: Connection[] = [];
   private router: Router;
   private appSettingsService: AppSettingsService;
   private connectionService: ConnectionService;
-  private layout: LayoutType = LayoutType.CARD;
   private wizardService: WizardService;
 
   @ViewChild(ConfirmDeleteComponent) private confirmDeleteDialog: ConfirmDeleteComponent;

ngapp/src/app/core/vertical-nav/vertical-nav.component.css

@@ -4,8 +4,13 @@
 }
 
 .app-feature-content {
-  margin-top: 2em;
-  margin-left: 200px;
+  margin-top: 60px;
+  margin-left: 190px;
+}
+
+.app-feature-title {
+  margin: 0 0 10px 0;
+  padding: 0;
 }
 
 .navbar-brand-title {

ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.ts

@@ -77,7 +77,7 @@ export class DataserviceCardComponent implements DoCheck, OnInit {
   }
 
   private get detailsIconStyle(): string {
-    return this.showDetails ? "fa fa-close" : "fa fa-angle-right";
+    return this.showDetails ? "fa fa-close card-footer-action-icon" : "fa fa-angle-right card-footer-action-icon";
   }
 
   /**

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

@@ -18,3 +18,9 @@
   content: "\f021";
   font-family: "FontAwesome";
 }
+
+a.list-pf-title.view-name {
+  cursor: pointer;
+  color: var(--card-body-color);
+  margin-left: 10px !important;
+}

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

@@ -36,13 +36,6 @@ import { Action, ActionConfig, ListConfig } from "patternfly-ng";
  })
 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";
-
   private static readonly activateActionId = "activate";
   private static readonly deleteActionId = "delete";
   private static readonly editActionId = "edit";
@@ -174,21 +167,12 @@ export class DataservicesListComponent implements OnInit {
     this.listConfig = {
       dblClick: false,
       multiSelect: false,
-      selectItems: false,
-      selectionMatchProp: "name",
+      selectItems: true,
       showCheckbox: false,
       useExpandItems: true
     } as ListConfig;
   }
 
-  public toggleDataserviceSelected(dataservice: Dataservice): void {
-    if (this.isSelected(dataservice)) {
-      this.dataserviceDeselected.emit(dataservice);
-    } else {
-      this.dataserviceSelected.emit(dataservice);
-    }
-  }
-
   public isSelected(dataservice: Dataservice): boolean {
     return this.selectedDataservices.indexOf(dataservice) !== -1;
   }
@@ -226,28 +210,28 @@ export class DataservicesListComponent implements OnInit {
     this.editDataservice.emit(dataserviceName);
   }
 
-  public onQuickLookDataservice(dataserviceName: string): void {
+  public onPreviewDataservice( dataserviceName: string): void {
     this.quickLookDataservice.emit(dataserviceName);
   }
 
   public handleAction($event: Action, item: any): void {
     switch ( $event.id ) {
-      case DataservicesListComponent.activateDataserviceEvent:
+      case DataservicesListComponent.activateActionId:
         this.onActivateDataservice( item.getId() );
         break;
-      case DataservicesListComponent.deleteDataserviceEvent:
+      case DataservicesListComponent.deleteActionId:
         this.onDeleteDataservice( item.getId() );
         break;
-      case DataservicesListComponent.editDataserviceEvent:
+      case DataservicesListComponent.editActionId:
         this.onEditDataservice( item.getId() );
         break;
-      case DataservicesListComponent.publishDataserviceEvent:
+      case DataservicesListComponent.publishActionId:
         this.onPublishDataservice( item.getId() );
         break;
-      case DataservicesListComponent.quickLookDataserviceEvent:
-        this.onQuickLookDataservice( item.getId() );
+      case DataservicesListComponent.previewActionId:
+        this.onPreviewDataservice( item.getId() );
         break;
-      case DataservicesListComponent.testDataserviceEvent:
+      case DataservicesListComponent.testActionId:
         this.onTestDataservice( item.getId() );
         break;
       default:

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

@@ -8,7 +8,8 @@
         [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 object-inline-icon"></span>{{ item }}</a>
+            <span class="fa fa-table object-inline-icon"></span>
+            <a class="list-pf-title view-name">{{ item }}</a>
           </div>
         </ng-template>
         <ng-template #expandTemplate let-item="item" let-index="index">

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

@@ -10,7 +10,7 @@
 
   <div class="container-fluid dataservice-list-dataservices" *ngIf="!pageError">
     <div class="col-sm-12">
-      <h2 i18n="@@dataservices.dataservices">Dataservices</h2>
+      <h2 class="app-feature-title" i18n="@@dataservices.dataservices">Dataservices</h2>
     </div>
     <div class="row toolbar-pf">
       <div class="col-sm-12">

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

@@ -19,7 +19,6 @@ import { Component, OnInit, ViewChild } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { AppSettingsService } from "@core/app-settings.service";
 import { LoggerService } from "@core/logger.service";
-import { ArrayUtils } from "@core/utils/array-utils";
 import { Dataservice } from "@dataservices/shared/dataservice.model";
 import { DataserviceService } from "@dataservices/shared/dataservice.service";
 import { DataservicesConstants } from "@dataservices/shared/dataservices-constants";
@@ -31,7 +30,6 @@ import { WizardService } from "@dataservices/shared/wizard.service";
 import { SqlControlComponent } from "@dataservices/sql-control/sql-control.component";
 import { AbstractPageComponent } from "@shared/abstract-page.component";
 import { ConfirmDeleteComponent } from "@shared/confirm-delete/confirm-delete.component";
-import { IdFilter } from "@shared/id-filter";
 import { LayoutType } from "@shared/layout-type.enum";
 import { SortDirection } from "@shared/sort-direction.enum";
 import { NotificationType } from "patternfly-ng";
@@ -59,12 +57,10 @@ export class DataservicesComponent extends AbstractPageComponent implements OnIn
   public readonly exportFailedHeader: string = "Publish Failed:  ";
   public filterConfig: FilterConfig;
   public filtersText = "";
-  public separator: object;
-  public allItems: Dataservice[];
   public items: Dataservice[];
   public sortConfig: SortConfig;
   public currentSortField: SortField;
-  public isAscendingSort: boolean = true;
+  public isAscendingSort = true;
 
   private cardListAreaCss = "dataservice-summary-top-area-no-results";
   private resultsAreaCss = "dataservice-summary-bottom-area-no-results";
@@ -80,7 +76,6 @@ export class DataservicesComponent extends AbstractPageComponent implements OnIn
   private appSettingsService: AppSettingsService;
   private dataserviceService: DataserviceService;
   private vdbService: VdbService;
-  private filter: IdFilter = new IdFilter();
   private sortDirection: SortDirection = SortDirection.ASC;
   private exportNotificationHeader: string;
   private exportNotificationMessage: string;

ngapp/src/app/dataservices/selected-table/selected-table.component.css

@@ -1,84 +1,20 @@
-:root {
-  --body-background-color: #f5f5f5;
-  --body-main-color: #72767b;
-}
-
-.card-pf .card-pf-body {
-  background-color: var(--body-background-color);
-  margin: 0;
-  padding: 0 10px 0 10px;
-}
-
-.card-pf-heading {
-  margin: 0;
-  padding: 0 20px;
-}
-
 .selected-table-card .card-pf {
-  background-color: #def3ff;
-  margin: 0 0 4px 0;
-  min-height: 40px;
-  padding: 0;
-}
-
-.selected-table-name:before {
-  display: inline-block;
-  margin-bottom: 0;
-  margin-right: 10px;
-  margin-top: 0;
-  font-family: "FontAwesome";
-  content: "\f0ce";
-}
-
-.selected-table-name .card-pf-title {
-  margin-bottom: 0;
-  margin-left: 5px;
-  margin-top: 0;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.selected-table-connection:before {
-  display: inline-block;
-  margin: 0 10px 0 20px;
-  font-family: "FontAwesome";
-  content: "\f1e6";
-  color: #666666;
-}
-
-.selected-table-connection .card-pf-subtitle {
-  color: #666666;
-  margin-bottom: 0;
-  margin-left: 5px;
-  margin-top: 0;
-  font-size: 14px;
-}
-
-.selected-table-close-icon {
-  cursor: pointer;
-  color: darkred;
-}
-
-.selected-table-body .card-pf-body {
-  background-color: var(--body-background-color);
-  margin-top: 10px !important;
+  background-color: var(--card-hover-color);
 }
 
 .selected-table-column-selection {
-  background-color: var(--body-main-color);
+  background-color: var(--card-body-color);
   color: white;
   margin: 4px 0;
   text-align: center;
 }
 
-.selected-table-card .pfng-card .card-pf-footer  {
-  background-color: #ececec;
-  margin: 0 !important;
-  min-height: 20px;
-  padding: 10px 0 5px 20px;
+.selected-table-columns {
+  height: 10vh;
+  overflow-y: auto;
+  overflow-x: auto;
 }
 
 .selected-tables-container {
-  margin-top: 0;
-  padding-top: 4px;
+  background-color: var(--page-background-color);
 }