Merge pull request #667 from GSA/HWFilters

HW filters

package.json

@@ -115,7 +115,7 @@
     "@angularclass/hmr-loader": "~3.0.2",
     "@code.gov/api-client": "^0.1.1",
     "@code.gov/code-gov-font": "0.6.3",
-    "@code.gov/code-gov-style": "1.9.2",
+    "@code.gov/code-gov-style": "1.9.5",
     "@ngx-meta/core": "^0.4.0-rc.2",
     "@types/jasminewd2": "^2.0.2",
     "angulartics2": "1.4.3",

src/app/components/base-filter-page/base-filter-page.component.ts

@@ -44,6 +44,7 @@ export class BaseFilterPageComponent {
   public languages = [];
   public hostElement: ElementRef;
   public filterTags = [];
+  public types = [];
 
   // added by children
   public sortOptions: String[];
@@ -53,14 +54,22 @@ export class BaseFilterPageComponent {
    * On removal from the DOM, unsubscribe from URL updates.
    */
   public ngOnDestroy() {
-    this.routeSubscription.unsubscribe();
+    if (this.routeSubscription) {
+      this.routeSubscription.unsubscribe();
+    }
   }
 
   public getFilterBoxValues(title) {
     try {
-      return this.hostElement.nativeElement.querySelector(`filter-box[title='${title}']`).values;
+      const element = this.hostElement.nativeElement.querySelector(`filter-box[title='${title}']`);
+      if (element) {
+        return element.values;
+      } else {
+        return [];
+      }
     } catch (error) {
-      console.error(`getFilterBoxValues caught the following error with ${title}`, error);
+      console.warn(`getFilterBoxValues caught the following error with ${title}`, error);
+      return [];
     }
   }
 
@@ -74,6 +83,16 @@ export class BaseFilterPageComponent {
     }
   }
 
+  public filterType(result) {
+    const selectedTypes = this.getFilterBoxValues('Type');
+
+    if (selectedTypes.length === 0) {
+      return true;
+    } else {
+      return selectedTypes.indexOf(result.type) > -1;
+    }
+  }
+
   public filterOrgType(result) {
     const orgTypes = this.getFilterBoxValues('Organization Type');
     if (orgTypes.length === 0) {
@@ -92,6 +111,24 @@ export class BaseFilterPageComponent {
     }
   }
 
+  public filterSkillLevel(result) {
+    const names = this.getFilterBoxValues('Skill Level');
+    if (names.length === 0) {
+      return true;
+    } else if (names.length > 0) {
+      return names.indexOf(result.skill) > -1;
+    }
+  }
+
+  public filterTimeRequired(result) {
+    const names = this.getFilterBoxValues('Time Required');
+    if (names.length === 0) {
+      return true;
+    } else if (names.length > 0) {
+      return names.indexOf(result.effort) > -1;
+    }
+  }
+
   public filterLanguages(result) {
     const selectedLangs = this.getFilterBoxValues('Language');
 
@@ -130,6 +167,9 @@ export class BaseFilterPageComponent {
       .filter(this.filterLicenses.bind(this))
       .filter(this.filterUsageType.bind(this))
     //  .filter(this.filterOrgType.bind(this))
+      .filter(this.filterType.bind(this))
+      .filter(this.filterSkillLevel.bind(this))
+      .filter(this.filterTimeRequired.bind(this))
       .filter(this.filterFederalAgency.bind(this));
   }
 
@@ -183,6 +223,16 @@ export class BaseFilterPageComponent {
       .sort((a, b) => a.name < b.name ? -1 : 1);
   }
 
+  public setTypes() {
+    let types = new Set();
+    this.results.forEach(result => {
+      if (result.type) {
+        types.add(result.type);
+      }
+    });
+    this.types = Array.from(types).sort();
+  }
+
   public onFilterBoxChange(event) {
     this.filterResults();
 

src/app/components/help-wanted/card/help-wanted-card.template.html

@@ -2,21 +2,21 @@
   <h3 class="card-title"><a [href]="item.issueURL ? item.issueURL : item.projectURL" target="_blank">{{ item.title }}</a></h3>
   <p class="card-description">{{ item.description | truncate : 250}}</p>
 
-  <dl *ngIf="!mobile">
+  <dl class="show-w-gt-900">
 
     <!-- <div *ngIf="item.projectURL">
       <dt>Project Name: </dt>
       <dd><a [href]="item.projectURL" *ngIf="item.projectURL" target="_blank">project name</a></dd>
     </div> -->
 
-    <div *ngIf="item?.agency_id">
-      <dt>Agency: 
-      <dd><a [routerLink]="['/browse-projects']" [queryParams]="{agencies:item?.agency_id}">{{item?.agency_id}}</a></dd>
+    <div *ngIf="item?.agency?.acronym">
+      <dt>Agency:
+      <dd><a [routerLink]="['/browse-projects']" [queryParams]="{agencies:item?.agency?.acronym}">{{item?.agency?.acronym}}</a></dd>
     </div>
 
-    <div *ngIf="item?.updated">
-      <dt>Last updated: 
-      <dd>{{item?.updated | date: "MMM d 'at' h':'mm a"}}</dd>
+    <div *ngIf="item?.date?.lastModified">
+      <dt>Last updated:
+      <dd>{{item?.date?.lastModified | date: "MMM d yyyy 'at' h':'mm a"}}</dd>
     </div>
 
     <hr>
@@ -27,9 +27,9 @@ <h3 class="card-title"><a [href]="item.issueURL ? item.issueURL : item.projectUR
     </div>
 
     <div *ngIf="item.type">
-        <dt>Type:</dt>
-        <dd>{{ item.type | capitalize }}</dd>
-      </div>
+      <dt>Type:</dt>
+      <dd>{{ item.type | capitalize }}</dd>
+    </div>
 
     <div *ngIf="item.skill">
       <dt>Skill Level:</dt>