Skip to content

Commit

Permalink
feat(import): Update Import steps to match designs
Browse files Browse the repository at this point in the history 
related to fabric8-ui/fabric8-ux#893
  • Loading branch information
@AdamJ
AdamJ committed Feb 20, 2018
1 parent d644115 commit cbaa585
Show file tree
Hide file tree
Showing 10 changed files with 318 additions and 104 deletions.
54 changes: 34 additions & 20 deletions .../launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,45 @@
<div>
<div class="container-fluid">
<h1 snInViewport (onInViewportChange)="launcherComponent.onInViewportChange($event, 'GitProvider')"
[debounce]="500">Authorize Git Provider</h1>
[debounce]="500">Import Existing Application</h1>
<p>
Authorize your Git Provider account to connect the Launcher to your service.
To import an existing application, you must include the necessary GitHub information to complete the importing proces.
</p>
</div>
</div>
<div>
<div class="container-fluid">
<div class="col-xs-12 f8launcher-provider-card">
<div class="col-xs-4 f8launcher-provider-card-icon">
<h2>GitHub</h2>
<h2>GitHub Information</h2>
<i class="fa fa-github"></i>
</div>
<div class="col-xs-8 f8launcher-provider-card-information">
<!-- Enable Access-Conrtol-Expose-Headers for CORS to test -->
<h3>Authorized Account</h3>
<div class="f8launcher-provider-card-information-authorize">
<img height="30px" width="30px" [src]="launcherComponent.summary?.gitHubDetails?.avatar"
*ngIf="launcherComponent.summary?.gitHubDetails?.avatar !== undefined">
<span *ngIf="launcherComponent.summary?.gitHubDetails?.login !== undefined">
{{launcherComponent.summary?.gitHubDetails?.login}}
</span>
<i class="fa fa-ban fa-2x" *ngIf="launcherComponent.summary?.gitHubDetails?.avatar === undefined"></i>
<span class="f8launcher-username"
*ngIf="launcherComponent.summary?.gitHubDetails?.login === undefined"> None
</span>
<button class="btn btn-primary btn-lg f8launcher-authorize-account"
[disabled]="launcherComponent.summary?.gitHubDetails?.authenticated === true"
(click)="connectAccount($event)">Log In &amp; Authorize Account</button>
</div>
<form class="form-horizontal">
<div class="form-group">
<label for="ghAccount" class='col-sm-2 control-label'>Connected Account</label>
<!-- Enable Access-Conrtol-Expose-Headers for CORS to test -->
<!-- <div class="f8launcher-provider-card-information-authorize"> -->
<div class="col-sm-10">
<img height="30px" width="30px" [src]="launcherComponent.summary?.gitHubDetails?.avatar"
*ngIf="launcherComponent.summary?.gitHubDetails?.avatar !== undefined">
<span *ngIf="launcherComponent.summary?.gitHubDetails?.login !== undefined">
{{launcherComponent.summary?.gitHubDetails?.login}}
<i class="pficon pficon-ok padding-left-5"></i>
</span>
<!-- <i class="fa fa-ban" *ngIf="launcherComponent.summary?.gitHubDetails?.avatar === undefined"></i> -->
<!-- <span class="f8launcher-username"
*ngIf="launcherComponent.summary?.gitHubDetails?.login === undefined"> None
</span> -->
<button class="btn btn-link f8launcher-authorize-account"
*ngIf="launcherComponent.summary?.gitHubDetails?.login === undefined"
[disabled]="launcherComponent.summary?.gitHubDetails?.authenticated === true"
(click)="connectAccount($event)">Click here to authorize your GitHub account <i class="fa fa-external-link"></i></button>
<div class="has-error">
<span class="help-block">Something went wrong. Please try to reconnect your GitHub account.</span>
</div>
</div>
</div>
<div class="form-group">
<label for="ghOrg" class="col-sm-2 control-label">Organization</label>
<div class="col-sm-10">
Expand Down Expand Up @@ -69,13 +77,19 @@ <h3>Authorized Account</h3>
</div>
</div>
</div>
<div class="container-fluid f8launcher-provider-card-toolbar">
<pfng-toolbar [config]="toolbarConfig"
(onFilterChange)="filterChanged($event)"
(onSortChange)="sortChanged($event)">
</pfng-toolbar>
</div>
</div>
<div>
<div class="container-fluid">
<div class="f8launcher-continue">
<button class="btn btn-primary"
[disabled]="stepCompleted !== true"
(click)="navToNextStep()">Continue</button>
(click)="navToNextStep()">Import Repository</button>
<button class="btn btn-link">Cancel</button>
</div>
</div>
Expand Down
26 changes: 11 additions & 15 deletions .../launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
}
}
}
}
}
90 changes: 90 additions & 0 deletions ...pp/launcher/import-app/gitprovider-importapp-step/gitprovider-importapp-step.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand All @@ -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) => {
Expand Down Expand Up @@ -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

/**
Expand Down
119 changes: 69 additions & 50 deletions ...r/import-app/project-summary-importapp-step/project-summary-importapp-step.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,64 +76,83 @@ <h2 class="card-pf-title">
</div>
<div class="container-fluid container-cards-pf">
<div class="row row-cards-pf">
<div class="col-xs-12 col-md-6">
<div class="col-xs-12">
<div class="card-pf card-pf--small">
<div class="card-pf-heading">
<h2 class="card-pf-title">
Application Information
</h2>
</div>
<div class="card-pf-body card-column">
<div class="card-column-single">
<form class="form-horizontal">
<div class="form-group f8launcher-project-summary-data-form-group">
<label class="col-xs-4 control-label">Project Name</label>
<div class="col-xs-8 f8launcher-project-summary-data-field f8launcher-application-text-field">
<input class="f8launcher-project-summary-data-field_input f8launcher-application-text-field_input"
name="applicationTitle" placeholder="New Application" type="text"
[(ngModel)]="this.launcherComponent.summary.dependencyCheck.projectName"
(keyup.enter)="$event.target.blur();">
<div *ngIf="launcherComponent.summary?.gitHubDetails?.authenticated !== true
|| launcherComponent.summary?.gitHubDetails?.organization === undefined
|| launcherComponent.summary?.gitHubDetails?.repository === undefined
|| launcherComponent.summary?.gitHubDetails?.repositoryAvailable !== true;
then showNoGitHubTemplate else showGitHubTemplate"></div>
<ng-template #showNoGitHubTemplate>
<div class="card-pf-heading">
<h2 class="card-pf-title">
GitHub
</h2>
</div>
<div class="card-pf-body f8launcher-project-summary-data-unavailable">
<h2>
<b>Incomplete</b>
</h2>
<p>To proceed with setting up this application, this section must be completed.</p>
<button class="btn btn-default btn-lg f8launcher-authorize-account"
(click)="navToStep('GitProvider')">Complete Section</button>
</div>
</ng-template>
<ng-template #showGitHubTemplate>
<div class="card-pf-heading">
<h2 class="card-pf-title">
GitHub
</h2>
</div>
<div class="card-pf-body card-column">
<div class="card-column-single">
<form class="form-horizontal">
<div class="form-group f8launcher-project-summary-data-form-group">
<label class="col-xs-2 control-label">Authorized Account</label>
<div class="col-xs-8 f8launcher-project-summary-data-field">
<span>{{this.launcherComponent.summary.gitHubDetails.url}}</span>
</div>
</div>
</div>
<div class="form-group f8launcher-project-summary-data-form-group">
<label class="col-xs-4 control-label">Maven Artifact</label>
<div class="col-xs-8 f8launcher-project-summary-data-field">
<span>{{this.launcherComponent.summary?.dependencyCheck?.mavenArtifact}}</span>
<div class="form-group f8launcher-project-summary-data-form-group">
<label class="col-xs-2 control-label">Organization</label>
<div class="col-xs-8 f8launcher-project-summary-data-field">
<span>{{this.launcherComponent.summary.gitHubDetails.organization}}</span>
</div>
</div>
</div>
<div class="form-group f8launcher-project-summary-data-form-group">
<label class="col-xs-4 control-label">Version</label>
<div class="col-xs-8 f8launcher-project-summary-data-field f8launcher-application-text-field">
<input class="f8launcher-project-summary-data-field_input f8launcher-application-text-field_input"
name="version" placeholder="Version Number" type="text"
[(ngModel)]="this.launcherComponent.summary.dependencyCheck.projectVersion"
(keyup.enter)="$event.target.blur();">
<div class="form-group f8launcher-project-summary-data-form-group">
<label class="col-xs-2 control-label">Repository URL</label>
<div class="col-xs-8 f8launcher-project-summary-data-field">
<span>{{this.launcherComponent.summary.gitHubDetails.htmlUrl}}</span>
</div>
</div>
</div>
<div class="form-group f8launcher-project-summary-data-form-group">
<label class="col-xs-4 control-label">Group ID</label>
<div class="col-xs-8 f8launcher-project-summary-data-field f8launcher-application-text-field">
<input class="f8launcher-project-summary-data-field_input f8launcher-application-text-field_input"
name="groupId" placeholder="Group ID" type="text"
[(ngModel)]="this.launcherComponent.summary.dependencyCheck.groupId"
(keyup.enter)="$event.target.blur();">
<div class="form-group f8launcher-project-summary-data-form-group">
<label class="col-xs-2 control-label">Repository Description</label>
<div class="col-xs-8 f8launcher-project-summary-data-field">
<span *ngIf="launcherComponent.summary?.gitHubDetails?.description !== false">
{{this.launcherComponent.summary?.gitHubDetails?.description}}
</span>
</div>
</div>
</div>
<div class="form-group f8launcher-project-summary-data-form-group">
<label class="col-xs-4 control-label">Space Path</label>
<div class="col-xs-8 f8launcher-project-summary-data-field f8launcher-application-text-field">
<input class="f8launcher-project-summary-data-field_input f8launcher-application-text-field_input"
name="spacePath" placeholder="Space Path" type="text"
[(ngModel)]="this.launcherComponent.summary.dependencyCheck.spacePath"
(keyup.enter)="$event.target.blur();">
<div class="form-group f8launcher-project-summary-data-form-group">
<label class="col-xs-2 control-label">Repository Visibility</label>
<div class="col-xs-8 f8launcher-project-summary-data-field">
<span *ngIf="launcherComponent.summary?.gitHubDetails?.visibility !== false
then showGitHubPrivate else showGitHubPublic"></span>
<ng-template #showGitHubPrivate>
<span>Private</span>
</ng-template>
<ng-template #showGitHubPublic>
<span>Public</span>
</ng-template>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</ng-template>
</div>
</div>
<div class="col-xs-12 col-md-6">
<!-- <div class="col-xs-12 col-md-6">
<div class="card-pf card-pf--small">
<div *ngIf="launcherComponent.summary?.gitHubDetails?.authenticated !== true
|| launcherComponent.summary?.gitHubDetails?.organization === undefined
Expand Down Expand Up @@ -199,7 +218,7 @@ <h2 class="card-pf-title">
</div>
</ng-template>
</div>
</div>
</div> -->
</div>
</div>
<div class="container-fluid">
Expand Down
Loading

0 comments on commit cbaa585

Please sign in to comment.