feat(group results): Group results by source in a collapsible compone…

…nt (#98)

* feat(group results): Group results by source in a collapsible component

src/app/pages/navigator/navigator.component.html

@@ -81,13 +81,13 @@
               panelLeftIcon
               (click)="resizeMenu()">
               <ng-container *ngIf="menu.state === 'initial'">
-                expand_less
+                arrow_upward
               </ng-container>
               <ng-container *ngIf="menu.state === 'collapsed'">
-                expand_more
+                arrow_downward
               </ng-container>
               <ng-container *ngIf="menu.state === 'expanded'">
-                expand_less
+                arrow_upward
               </ng-container>
             </md-icon>
 

src/app/pages/navigator/navigator.component.styl

@@ -25,7 +25,7 @@ md-sidenav-container {
 }
 
 :host >>> igo-sidenav .igo-sidenav {
-  background-color: $igo-white;
+  background-color: $igo-tertiary-color;
 }
 
 /*--- Menu button ---*/

src/app/search/search-bar/search-bar.component.styl

@@ -1,7 +1,7 @@
 @require '../../../css/theme.styl';
 
 .igo-search-bar {
-  background-color: $igo-white;
+  background-color: $igo-tertiary-color;
 }
 
 :host >>> .md-input-wrapper {

src/app/search/search-result-details/search-result-details.component.html

@@ -1,6 +1,6 @@
 <table class="igo-striped">
   <tbody>
-    <tr *ngFor="let property of result.properties | keyvalue">           
+    <tr *ngFor="let property of result.properties | keyvalue">
       <td>
         {{property.key}}
       </td>

src/app/search/search-result-details/search-result-details.component.spec.ts

@@ -30,7 +30,8 @@ describe('SearchResultDetailsComponent', () => {
     component.result = {
       id: '1',
       title: 'foo',
-      icon: 'bar'
+      icon: 'bar',
+      source: 'test'
     };
     expect(component).toBeTruthy();
   });

src/app/search/search-result/search-result.component.html

@@ -1,4 +1,4 @@
 <md-list-item>
   <md-icon md-list-avatar>{{result.icon}}</md-icon>
-  <h4 md-line>{{result.source}} - {{result.title}}</h4>
+  <h4 md-line>{{result.title}}</h4>
 </md-list-item>

src/app/search/search-result/search-result.component.spec.ts

@@ -31,7 +31,8 @@ describe('SearchResultComponent', () => {
     component.result = {
       id: '1',
       title: 'foo',
-      icon: 'bar'
+      icon: 'bar',
+      source: 'test'
     };
     expect(component).toBeTruthy();
   });

src/app/search/search-tool/search-tool.component.html

@@ -1,12 +1,20 @@
 <igo-list [navigation]="true"> 
-  <template ngFor let-result [ngForOf]="results" let-i="index">
-    <igo-search-result
-      igoListItem
-      tabindex="{{i}}"
-      [focused]="focusedResult && focusedResult.id === result.id"
-      [result]="result"
-      (focusItem)="focusResult(result)"
-      (selectItem)="selectResult(result)">
-    </igo-search-result>
+  <template ngFor let-sourceResult [ngForOf]="sourceResults">
+    <igo-collapsible
+        title="{{sourceResult[0]}} ({{sourceResult[1].length}})">
+
+      <template ngFor let-result [ngForOf]="sourceResult[1]" let-i="index">
+        <igo-search-result
+          igoListItem
+          tabindex="{{i}}"
+          [focused]="focusedResult && focusedResult.id === result.id
+                     && focusedResult.source === sourceResults[0]"
+          [result]="result"
+          (focusItem)="focusResult(result)"
+          (selectItem)="selectResult(result)">
+        </igo-search-result>
+      </template>
+
+    </igo-collapsible>
   </template>
 </igo-list>

src/app/search/search-tool/search-tool.component.ts

@@ -20,7 +20,7 @@ export class SearchToolComponent implements ToolComponent, OnInit {
   static icon: string = 'search';
   static defaultOptions: any = {};
 
-  private results: SearchResult[];
+  private sourceResults: [string, SearchResult[]];
   focusedResult?: SearchResult;
 
   constructor(private store: Store<AppStore>) { }
@@ -44,23 +44,24 @@ export class SearchToolComponent implements ToolComponent, OnInit {
   }
 
   private handleSearchResults(results: SearchResult[]) {
-    const results_ = results.map((result, index) => {
-      return {index: index, data: result};
-    });
-
-    results_.sort((r1, r2) => {
-      if (r1.data.source < r2.data.source) {
-        return -1;
+    const groupedResults = {};
+    results.forEach((result: SearchResult) => {
+      const source = result.source;
+      if (groupedResults[source] === undefined) {
+        groupedResults[source] = [];
       }
 
-      if (r1.data.source > r2.data.source) {
-        return 1;
-      }
-
-      return r1.index - r2.index;
+      groupedResults[source].push(result);
     });
 
-    this.results = results_.map(result_ => result_.data);
+    const sourceResults = [];
+    Object.keys(groupedResults)
+      .sort()
+      .forEach((source: string) => {
+        sourceResults.push([source, groupedResults[source]]);
+      });
+
+    this.sourceResults = sourceResults as [string, SearchResult[]];
   }
 
 }

src/app/search/sources/search-source-msp.ts

@@ -7,7 +7,7 @@ import { SearchResult } from '../shared/search-result.interface';
 export class SearchSourceMSP extends SearchSource {
 
   static name_: string = 'MSP';
-  static searchUrl: string = 'icherche/v1/geocodingMaxScore';
+  static searchUrl: string = '/icherche/v1/geocodingMaxScore';
 
   constructor(private jsonp: Jsonp) {
     super();

src/app/shared/collapsible/collapsible.component.html

@@ -0,0 +1,24 @@
+<div class="igo-collapsible-header">
+  <h4>
+  	<md-icon
+  	  (click)="handleClick()">
+      <ng-container *ngIf="state === 'collapsed'">
+        expand_more
+      </ng-container>
+      <ng-container *ngIf="state !== 'collapsed'">
+        expand_less
+      </ng-container>
+    </md-icon>
+    <div class="igo-collapsible-title">{{title}}</div>
+  </h4>
+</div>
+<ng-content></ng-content>
+<igo-flex
+  #content
+  direction="column"
+  initial="auto"
+  collapsed="0"
+  expanded="auto"
+  [state]="state">
+  <ng-content></ng-content>
+</igo-flex>

src/app/shared/collapsible/collapsible.component.spec.ts

@@ -0,0 +1,36 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { MaterialModule } from '@angular/material';
+
+import { FlexComponent } from '../flex/flex.component';
+import { CollapsibleComponent } from './collapsible.component';
+
+describe('CollapsibleComponent', () => {
+  let component: CollapsibleComponent;
+  let fixture: ComponentFixture<CollapsibleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MaterialModule.forRoot()
+      ],
+      declarations: [
+        FlexComponent,
+        CollapsibleComponent
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CollapsibleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/collapsible/collapsible.component.styl

@@ -0,0 +1,38 @@
+@require '../../../css/theme.styl';
+
+$igo-collapsible-header-height = 40px;
+
+.igo-collapsible-header {
+  color: $igo-primary-font-color;
+  height: $igo-collapsible-header-height;
+  padding: 8px;
+  text-align: center;
+}
+
+.igo-collapsible-header h4 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.igo-collapsible-header md-icon {
+  float: left;
+}
+
+.igo-collapsible-header >>> md-icon {
+  cursor: pointer;
+}
+
+.igo-collapsible-content {
+  padding-left: $igo-padding;
+}
+
+.igo-collapsible-title {
+  display: inline-block;
+  max-width: "calc(100% - 30px - %s)" % $igo-margin;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-left: $igo-margin;
+  float: left;
+  padding: 4px 0;
+}

src/app/shared/collapsible/collapsible.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, ViewChild } from '@angular/core';
+
+import { FlexState, FlexComponent } from '../flex/flex.component';
+
+@Component({
+  selector: 'igo-collapsible',
+  templateUrl: './collapsible.component.html',
+  styleUrls: ['./collapsible.component.styl']
+})
+export class CollapsibleComponent {
+
+  @ViewChild('content') content: FlexComponent;
+
+  @Input() state: FlexState = 'expanded';
+  @Input() title: string;
+
+  constructor() { }
+
+  handleClick() {
+    if (this.state !== 'collapsed') {
+      this.state = 'collapsed';
+    } else {
+      this.state = 'expanded';
+    }
+  }
+
+}

src/app/shared/flex/flex.component.html

@@ -1,4 +1,4 @@
-<div #flexMain class="igo-flex-main" [ngClass]="state">
+<div #flexMain class="igo-flex-main {{state}} {{direction}}">
   <ng-content></ng-content>
 </div>
 <div class="igo-flex-fill">

src/app/shared/flex/flex.component.styl

@@ -8,10 +8,17 @@
   flex: 0 0 auto;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto; 
-  transition: height 0.25s ease-in;
   overflow: hidden;
 }
 
+.igo-flex-main.column {
+  transition: height 0.25s ease-in;
+}
+
+.igo-flex-main.row {
+  transition: width 0.25s ease-in;
+}
+
 .igo-flex-fill {
   flex: 1 1 auto;
   -webkit-flex: 1 1 auto;

src/app/shared/list/list.component.ts

@@ -19,7 +19,8 @@ export class ListComponent implements AfterViewInit, OnDestroy, OnInit {
 
   @Input('navigation') navigation: boolean = true;
 
-  @ContentChildren(ListItemDirective) listItems: QueryList<ListItemDirective>;
+  @ContentChildren(ListItemDirective, {descendants: true})
+  listItems: QueryList<ListItemDirective>;
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {

src/app/shared/panel/panel.component.html

@@ -1,8 +1,8 @@
 <div class="igo-panel-header">
   <h3>
-  	<ng-content select="[panelLeftIcon]"></ng-content>
-  	<div class="igo-panel-title">{{title}}</div>
-  	<ng-content select="[panelRightIcon]"></ng-content>
+    <ng-content select="[panelLeftIcon]"></ng-content>
+    <div class="igo-panel-title">{{title}}</div>
+    <ng-content select="[panelRightIcon]"></ng-content>
   </h3>
 </div>
 <div class="igo-panel-content">

src/app/shared/panel/panel.component.styl

@@ -4,7 +4,7 @@ $igo-panel-header-height = 40px;
 
 .igo-panel-header {
   background-color: $igo-primary-color;
-  color: $igo-white;
+  color: $igo-secondary-font-color;
   height: $igo-panel-header-height;
   padding: 8px;
   text-align: center;

src/app/shared/shared.module.ts

@@ -8,6 +8,7 @@ import { BackdropComponent } from './backdrop/backdrop.component';
 import { FlexComponent } from './flex/flex.component';
 import { SidenavComponent } from './sidenav/sidenav.component';
 import { PanelComponent } from './panel/panel.component';
+import { CollapsibleComponent } from './collapsible/collapsible.component';
 import { ListComponent } from './list/list.component';
 import { ListItemDirective } from './list/list-item.directive';
 import { ClickoutDirective } from './directives/clickout.directive';
@@ -26,6 +27,7 @@ import { KeyvaluePipe } from './pipes/keyvalue.pipe';
     FlexComponent,
     SidenavComponent,
     PanelComponent,
+    CollapsibleComponent,
     ListComponent,
     ListItemDirective,
     ClickoutDirective,
@@ -40,6 +42,7 @@ import { KeyvaluePipe } from './pipes/keyvalue.pipe';
     FlexComponent,
     SidenavComponent,
     PanelComponent,
+    CollapsibleComponent,
     ListComponent,
     ListItemDirective,
     ClickoutDirective,

src/css/styles.styl

@@ -36,11 +36,11 @@ button[md-icon-button] {
   min-width: $igo-icon-button-width;
   margin: 0;
   padding: 0;
-  background-color: $igo-white;
+  background-color: $igo-tertiary-color;
 }
 
 button {
-  background-color: $igo-white;
+  background-color: $igo-tertiary-color;
 }
 
 .igo-container {

src/css/theme.styl

@@ -1,6 +1,7 @@
 $igo-icon-button-width = 40px;
 
-$igo-white = #fff;
+$igo-primary-font-color = rgb(0, 0, 0);
+$igo-secondary-font-color = rgb(255, 255, 255);
 
 $igo-margin = 5px;
 
@@ -12,6 +13,8 @@ $igo-primary-color-hover = rgba(103, 58, 183, 0.1);
 $igo-secondary-color = rgb(0, 161, 222);
 $igo-secondary-color-hover = rgba(0, 161, 222, 0.1);
 
+$igo-tertiary-color = rgb(255, 255, 255);
+
 $igo-border-width = 1px ;
 $igo-border-style = solid;
 $igo-border-color = rgba(0, 0, 0, .2);