Continue
+ (click)="navToNextStep()">Import Repository
Cancel
diff --git a/src/app/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.less b/src/app/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.less
index ebb0f3a2..aca65d37 100644
--- a/src/app/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.less
+++ b/src/app/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.less
@@ -7,6 +7,14 @@
padding-left: 0;
padding-right: 0;
box-shadow: .5px 1px 0 rgba(0, 0, 0, .3), 0 -.5px 1px 0 rgba(0, 0, 0, .3);
+ &-toolbar {
+ margin-right: 20px;
+ margin-left: 20px;
+ .toolbar-pf-actions {
+ display: inline-flex;
+ justify-content: flex-end;
+ }
+ }
&-icon {
min-height: 300px;
background-color: @color-pf-black-200;
@@ -20,26 +28,14 @@
}
}
&-information {
- padding-left: 15px;
+ padding-top: 25px;
padding-right: 15px;
+ padding-bottom: 25px;
+ padding-left: 15px;
min-height: 300px;
h3 {
font-weight: 600;
}
- &-authorize {
- padding-top: 10px;
- margin-bottom: 65px;
- .f8launcher {
- &-username {
- vertical-align: bottom;
- font-style: italic;
- font-size: 1.4em;
- }
- &-authorize-account {
- float: right;
- }
- }
- }
}
}
}
diff --git a/src/app/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.ts b/src/app/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.ts
index 1c740a30..17e1a8ad 100644
--- a/src/app/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.ts
+++ b/src/app/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.ts
@@ -8,6 +8,19 @@ import {
ViewChild,
ViewEncapsulation
} from '@angular/core';
+
+import {
+ Filter,
+ FilterConfig,
+ FilterField,
+ FilterEvent,
+ FilterType,
+ SortConfig,
+ SortField,
+ SortEvent,
+ ToolbarConfig
+} from 'patternfly-ng';
+
import { Subscription } from 'rxjs/Subscription';
import { GitProviderService } from '../../service/git-provider.service';
@@ -24,6 +37,12 @@ import { LauncherStep } from '../../launcher-step';
export class GitproviderImportappStepComponent extends LauncherStep implements AfterViewInit, OnDestroy, OnInit {
@ViewChild('versionSelect') versionSelect: ElementRef;
+ toolbarConfig: ToolbarConfig;
+
+ private currentSortField: SortField;
+ private filterConfig: FilterConfig;
+ private isAscendingSort: boolean = true;
+ private sortConfig: SortConfig;
private subscriptions: Subscription[] = [];
constructor(@Host() public launcherComponent: LauncherComponent,
@@ -40,6 +59,30 @@ export class GitproviderImportappStepComponent extends LauncherStep implements A
}
ngOnInit() {
+ this.filterConfig = {
+ fields: [{
+ id: 'name',
+ title: 'Name',
+ placeholder: 'Filter by Name...',
+ type: FilterType.TEXT
+ }] as FilterField[],
+ appliedFilters: []
+ } as FilterConfig;
+
+ this.sortConfig = {
+ fields: [{
+ id: 'name',
+ title: 'Name',
+ sortType: 'alpha'
+ }],
+ isAscending: this.isAscendingSort
+ } as SortConfig;
+
+ this.toolbarConfig = {
+ filterConfig: this.filterConfig,
+ sortConfig: this.sortConfig
+ } as ToolbarConfig;
+
this.launcherComponent.addStep(this);
this.subscriptions.push(this.gitProviderService.getGitHubDetails().subscribe((val) => {
@@ -83,6 +126,53 @@ export class GitproviderImportappStepComponent extends LauncherStep implements A
&& this.launcherComponent.summary.gitHubDetails.repositoryAvailable === true);
}
+ // Filter
+
+ applyFilters(filters: Filter[]): void { }
+
+ // Handle filter changes
+ filterChanged($event: FilterEvent): void {
+ this.applyFilters($event.appliedFilters);
+ }
+
+ matchesFilter(item: any, filter: Filter): boolean {
+ let match = true;
+ if (filter.field.id === 'name') {
+ match = item.name.match(filter.value) !== null;
+ }
+ return match;
+ }
+
+ matchesFilters(item: any, filters: Filter[]): boolean {
+ let matches = true;
+ filters.forEach((filter) => {
+ if (!this.matchesFilter(item, filter)) {
+ matches = false;
+ return matches;
+ }
+ });
+ return matches;
+ }
+
+ // Sort
+
+ compare(item1: any, item2: any): number {
+ let compValue = 0;
+ if (this.currentSortField.id === 'name') {
+ compValue = item1.name.localeCompare(item2.name);
+ }
+ if (!this.isAscendingSort) {
+ compValue = compValue * -1;
+ }
+ return compValue;
+ }
+
+ // Handle sort changes
+ sortChanged($event: SortEvent): void {
+ this.currentSortField = $event.field;
+ this.isAscendingSort = $event.isAscending;
+ }
+
// Steps
/**
diff --git a/src/app/launcher/import-app/project-summary-importapp-step/project-summary-importapp-step.component.html b/src/app/launcher/import-app/project-summary-importapp-step/project-summary-importapp-step.component.html
index 5ddf1d87..db949002 100644
--- a/src/app/launcher/import-app/project-summary-importapp-step/project-summary-importapp-step.component.html
+++ b/src/app/launcher/import-app/project-summary-importapp-step/project-summary-importapp-step.component.html
@@ -76,64 +76,83 @@