Skip to content

Commit

Permalink
Prototype picker updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@carlosvalle
carlosvalle committed Apr 2, 2018
1 parent abc996d commit 7ba1beb
Show file tree
Hide file tree
Showing 11 changed files with 604 additions and 570 deletions.
53 changes: 42 additions & 11 deletions src/patterns/pages/pages.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import {
Router,
NavigationEnd,
UrlTree,
UrlSegmentGroup,
UrlSegment,
PRIMARY_OUTLET
} from '@angular/router';

@Component({
template: `
Expand All @@ -10,9 +17,10 @@ import { Router } from '@angular/router';
<div class="patterns-menu">
<a routerLink="/patterns/latest/home">Patterns Home</a>
<span class="patterns-menu-divider"></span>
Page
<select class="sam transition" [(ngModel)]="selectedValue" (ngModelChange)="navigateTo()">
<option *ngFor="let page of pages" [ngValue]="page">{{ page.name }}</option>
<select class="sam transition" [(ngModel)]="selectedOption" (ngModelChange)="navigateTo()">
<option *ngFor="let option of options" [ngValue]="option">
{{ option.name }}
</option>
</select>
<span class="patterns-menu-divider"></span>
<a>Implementation</a>
Expand All @@ -21,19 +29,42 @@ import { Router } from '@angular/router';
})
export class PagesComponent {

constructor( private router: Router){}
selectedOption:any;

pages = [
{ name: "A", value: "a" },
{ name: "B", value: "b" }
options = [
{ name: "User Account", value: "a" },
{ name: "Award Domains", value: "b" }
];

selectedValue:any;
routerSubscription: any;

constructor(private router: Router){
this.routerSubscription = router.events.subscribe(event => {
if (event instanceof NavigationEnd ) {
const tree: UrlTree = router.parseUrl(event.url);
const group: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
const segment: UrlSegment[] = group.segments;
this.selectOption(segment[2].path);
}
});
}

selectOption(value){
this.options.forEach(option => {
if(option.value === value){
this.selectedOption = option;
}
});
}

navigateTo(){
if(this.selectedValue.value){
this.router.navigate([`/patterns/page/${this.selectedValue.value}`]);
if(this.selectedOption.value){
this.router.navigate([`/patterns/page/${this.selectedOption.value}`]);
}
}

ngOnDestroy() {
this.routerSubscription.unsubscribe();
}

}
17 changes: 15 additions & 2 deletions src/prototypes/components/picker/component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,22 @@
import { Component} from '@angular/core';
import { Component, HostListener} from '@angular/core';

@Component({
templateUrl: 'template.html'
})
export class PickerComponent {}
export class PickerComponent {

@HostListener('click', ['$event']) onClick($event) {
let target = $event.target.className;
this.showOverlay = target === "prototype-picker-overlay" ? false : true;
}

showOverlay: boolean = true;

openModal(){
this.showOverlay = true;
}

}


@Component({
Expand Down
175 changes: 76 additions & 99 deletions src/prototypes/components/picker/template-2.html
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,80 @@
<div class="gray-background">
<div class="prototype-picker-filter">
<label class="sam transition" for="agency-picker">
Federal Organizations
(<a (click)="openModal()">Unsure?</a>)
</label>
<select class="sam transition" id="agency-picker" name="agency">
<option value="" selected disabled hidden>Search...</option>
<option>Action</option>
<option>United States Information Agency</option>
<option>Office of Intergovernmental Relations</option>
<option>Bureau of Radiological Health</option>
<option>Office of Human Development Services</option>
<option>U.S. Postal Service</option>
<option>Old West Regional Commission</option>
<option>Health Care Financing Administration</option>
<option>Interstate Commerce Commission</option>
<option>Smithsonian Institution</option>
</select>
</div>


<div class="prototype-picker-overlay">


<div class="prototype-picker">

<sam-title importance="normal">
Picker
</sam-title>

<div class="sam search">
<input class="sam input" type="search" placeholder="Search">
<button routerLink="/prototypes/component/picker-5" class="sam button left attached">
<sam-icon name="search"></sam-icon>
</button>
</div>

<div class="picker-radios">
<span>
<input type="radio" id="search-all"name="search" value="all">
<label for="search-all">Search All</label>
</span>
<span>
<input type="radio" id="search-here" name="search" value="here" checked>
<label for="search-here">
Search this agency
</label>
</span>
</div>


<div class="picker-crumbs">
Office of Intergovernmental Relations
</div>

<div class="picker-results">
<div class="picker-results-wrapper">
<div class="picker-result">
<a>Homer</a>
</div>
<div class="picker-result">
<a routerLink="/prototypes/component/picker-3">Bart</a>
</div>
<div class="picker-result">
<a>Marge</a>
</div>
<div class="picker-result">
<a>Lisa</a>
</div>
<div class="picker-result">
<a>Mr. Burns</a>
</div>
<div class="picker-result">
<a>Apu</a>
</div>
<div class="picker-result">
<a>Milhouse</a>
</div>
<div class="picker-result">
<a>Moe</a>
</div>
<div class="picker-result">
<a>Ned</a>
</div>
<div class="picker-result">
<a>Nelson</a>
</div>
<div class="picker-result">
<a>Krusty</a>
</div>
<div class="picker-result">
<a>Barney</a>
</div>

<div class="picker-result">
<a>Ralph</a>
</div>
<div class="picker-result">
<a>Skinner</a>
</div>
<div class="picker-result">
<a>Edna</a>
</div>
<div class="picker-result">
<a>Fat Tony</a>
</div>
<div class="picker-result">
<a>Lenny</a>
</div>
<div class="picker-result">
<a>Carl</a>
</div>
</div>
</div>

<br>
<div class="picker-footer">
<a routerLink="/prototypes/component/picker">Reset</a> &nbsp;&nbsp;
<button class="sam button primary" type="button">Add Office of Intergovernmental Relations</button>
<div class="prototype-picker">

<sam-title importance="normal">
Search Federal Organizations
</sam-title>

<div class="sam search">
<input class="sam transition input" type="search" placeholder="Search">
<button class="sam transition button left attached">
<sam-icon name="search"></sam-icon>
</button>
</div>

<div class="picker-radios">
<span>
<input class="sam transition" type="radio" id="search-all"name="search" value="all">
<label class="sam transition" for="search-all">Search All</label>
</span>
<span>
<input class="sam transition" type="radio" id="search-here" name="search" value="here" checked>
<label class="sam transition" for="search-here">
Search here
</label>
</span>
</div>

<div class="picker-crumbs">
Department of Defense
</div>

<div class="picker-results">
<div class="picker-results-wrapper-2">
<a>
Departments
<span>3 found</span>
</a>
<a routerLink="/prototypes/component/picker-3">
Agencies
<span>20 found</span>
</a>
<a>
Field Activities
<span>8 found</span>
</a>
</div>

</div>

</div>
<br>

<div class="picker-footer">
<a routerLink="/prototypes/component/picker">Reset</a> &nbsp;&nbsp;
<button class="sam primary button" type="button">Add Department of Defense</button>
</div>

</div>

</div>
Loading

0 comments on commit 7ba1beb

Please sign in to comment.