WIP: Add datasets result component

src/app/search-multiple/components/index.ts

@@ -3,11 +3,13 @@ import { SummaryMultipleComponent } from './summary-multiple.component';
 import { DatasetListComponent } from './datasets/dataset-list.component';
 import { DatasetsByProjetComponent } from './datasets/datasets-by-projet.component';
 import { OverviewComponent } from './result/overview.component';
+import { DatasetsResultComponent } from './result/datasets-result.component';
 
 export const dummiesComponents = [
     ProgressBarMultipleComponent,
     SummaryMultipleComponent,
     DatasetListComponent,
     DatasetsByProjetComponent,
-    OverviewComponent
+    OverviewComponent,
+    DatasetsResultComponent
 ];
\ No newline at end of file

src/app/search-multiple/components/result/datasets-result.component.html

+<div *ngIf="datasetsCountIsLoaded">
+    <div *ngFor="let dataset of getSelectedDatasetOrderedByProject()">
+        {{ dataset.label }}
+    </div>
+</div>
+
+
+<!--        <app-result-datatable-->
+<!--            [datasetName]="datasetName | async"-->
+<!--            [datasetList]="datasetList | async"-->
+<!--            [queryParams]="queryParams | async"-->
+<!--            [datasetAttributeList]="datasetAttributeList | async"-->
+<!--            [outputList]="outputList | async"-->
+<!--            [searchData]="searchData | async"-->
+<!--            [dataLength]="dataLength | async"-->
+<!--            [selectedData]="selectedData | async"-->
+<!--            (getSearchData)="getSearchData($event)"-->
+<!--            (addSelectedData)="addSearchData($event)"-->
+<!--            (deleteSelectedData)="deleteSearchData($event)"-->
+<!--            [processWip]="processWip | async"-->
+<!--            [processDone]="processDone | async"-->
+<!--            [processId]="processId | async"-->
+<!--            (executeProcess)="executeProcess($event)">-->
+<!--        </app-result-datatable>-->
\ No newline at end of file

src/app/search-multiple/components/result/datasets-result.component.spec.ts

+// import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+// import { RouterTestingModule } from '@angular/router/testing';
+// import { By } from '@angular/platform-browser';
+//
+// import { ProgressBarComponentMultiple } from './progress-bar.component';
+//
+// describe('[Search] Component: ProgressBarComponent', () => {
+//     let component: ProgressBarComponentMultiple;
+//     let fixture: ComponentFixture<ProgressBarComponentMultiple>;
+//
+//     beforeEach(async(() => {
+//         TestBed.configureTestingModule({
+//             declarations: [ProgressBarComponentMultiple],
+//             imports: [RouterTestingModule]
+//         }).compileComponents();
+//     }));
+//
+//     beforeEach(() => {
+//         fixture = TestBed.createComponent(ProgressBarComponentMultiple);
+//         component = fixture.componentInstance;
+//         fixture.detectChanges();
+//     });
+//
+//     it('should create the component', () => {
+//         expect(component).toBeTruthy();
+//     });
+//
+//     it('#getStepClass() should return correct step class', () => {
+//         let style = component.getStepClass();
+//         expect(style).toBe('datasetStep');
+//         component.currentStep = 'dataset';
+//         style = component.getStepClass();
+//         expect(style).toBe('datasetStep');
+//         component.currentStep = 'criteria';
+//         style = component.getStepClass();
+//         expect(style).toBe('criteriaStep');
+//         component.currentStep = 'output';
+//         style = component.getStepClass();
+//         expect(style).toBe('outputStep');
+//         component.currentStep = 'result';
+//         style = component.getStepClass();
+//         expect(style).toBe('resultStep');
+//     });
+//
+//     // TODO: Make test working
+//     // it('should apply the correct class', () => {
+//     //     component.currentStep = 'dataset';
+//     //     fixture.detectChanges();
+//     //     let style = fixture.debugElement.query(By.css('#criteriaStep')).nativeElement.getAttribute('class');
+//     //     expect(style).not.toContain('active');
+//     //     component.currentStep = 'criteria';
+//     //     fixture.detectChanges();
+//     //     style = fixture.debugElement.query(By.css('#criteriaStep')).nativeElement.getAttribute('class');
+//     //     console.log(style);
+//     //     expect(style).toContain('active');
+//     //     component.criteriaStepChecked = true;
+//     //     fixture.detectChanges();
+//     //     style = fixture.debugElement.query(By.css('#criteriaStep')).nativeElement.getAttribute('class');
+//     //     expect(style).toContain('checked');
+//     //     const template = fixture.nativeElement;
+//     //     expect(template.querySelector('#criteriaStep')).toBeTruthy();
+//     // });
+// });
+//

src/app/search-multiple/components/result/datasets-result.component.ts

+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+import { Dataset, Project } from "../../../metamodel/model";
+import { DatasetCount } from "../../store/model";
+import {sortByDisplay} from "../../../shared/utils";
+
+@Component({
+    selector: 'app-datasets-result',
+    templateUrl: 'datasets-result.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DatasetsResultComponent {
+    @Input() datasetsCountIsLoaded: boolean;
+    @Input() projectList: Project[];
+    @Input() datasetList: Dataset[];
+    @Input() selectedDatasets: string[];
+    @Input() datasetsCount: DatasetCount[];
+
+    getSelectedDatasetOrderedByProject(): Dataset[] {
+        let datasetsOrdered: Dataset[] = [];
+        const projectOrderedByName: Project[] = [...this.projectList].sort((a, b) => a.name.localeCompare(b.name));
+        console.log(projectOrderedByName);
+        // projectOrderedByName.map(p => {
+        //     this.datasetList.sort(sortByDisplay).map(d =>{
+        //         if (this.selectedDatasets.includes(d.name)) {
+        //             datasetsOrdered.push(d);
+        //         }
+        //     });
+        // });
+        return datasetsOrdered;
+    }
+}
\ No newline at end of file

src/app/search-multiple/components/result/overview.component.css

-.tab-content {
-    min-height: 150px;
-    border-bottom: #dee2e6 solid 1px;
-    border-left: #dee2e6 solid 1px;
-    border-right: #dee2e6 solid 1px;
-}
-
-.title {
-    color: #6c757d;
-    font-size: 90%;
-}

src/app/search-multiple/components/result/overview.component.ts

@@ -6,8 +6,7 @@ import { DatasetCount, SearchMultipleQueryParams } from "../../store/model";
 
 @Component({
     selector: 'app-overview',
-    templateUrl: 'overview.component.html',
-    styleUrls: ['overview.component.css']
+    templateUrl: 'overview.component.html'
 })
 export class OverviewComponent {
     @Input() set datasetSearchMetaIsLoaded(datasetSearchMetaIsLoaded: boolean) {

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

@@ -11,6 +11,13 @@
             [datasetsCount]="datasetsCount | async"
             (getDatasetCount)="getDatasetsCount()">
         </app-overview>
+        <app-datasets-result
+            [datasetsCountIsLoaded]="datasetsCountIsLoaded | async"
+            [projectList]="projectList | async"
+            [datasetList]="datasetList | async"
+            [selectedDatasets]="selectedDatasets | async"
+            [datasetsCount]="datasetsCount | async">
+        </app-datasets-result>
 <!--        <app-result-datatable-->
 <!--            [datasetName]="datasetName | async"-->
 <!--            [datasetList]="datasetList | async"-->