WIP: design criteria part

src/app/search/components/result/reminder.component .ts

 import { Component, Input } from '@angular/core';
 
 import { Criterion, ConeSearch } from '../../store/model';
-import {Attribute, Category, Family} from 'src/app/metamodel/model';
+import { Attribute, Category, Family } from 'src/app/metamodel/model';
 import { printCriterion as print } from '../../../shared/utils'
 
 @Component({
     selector: 'app-reminder',
-    templateUrl: 'reminder.component.html'
+    templateUrl: 'reminder.component.html',
+    styleUrls: ['reminder.component.css']
 })
 export class ReminderComponent {
     @Input() datasetAttributeList: Attribute[];
     @Input() coneSearch: ConeSearch;
     @Input() criteriaList: Criterion[];
+    @Input() criteriaFamilyList: Family[];
     @Input() outputFamilyList: Family[];
     @Input() categoryList: Category[];
     @Input() outputList: number[];

src/app/search/components/result/reminder.component.css

+.custom-jumbotron {
+    background-color: transparent;
+}
+
+.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%;
+}
\ No newline at end of file

src/app/search/components/result/reminder.component.html

-<div class="jumbotron py-4">
+<div class="jumbotron py-4 custom-jumbotron theme-border">
     <div class="lead">
         Reminder
     </div>
     <hr class="my-4">
-    <div class="row">
-        <div *ngIf="noCriteria()" class="col-12 font-weight-bold">
-            No criteria selected
-        </div>
-        <div *ngIf="!noCriteria()" class="col-auto">
-            <dl class="row mb-2 mb-lg-0">
-                <dt class="col-auto">
+        <tabset [justified]="true">
+            <tab>
+                <ng-template tabHeading>
                     Criteria <span class="badge badge-secondary">{{ criteriaList.length }}</span>
-                </dt>
-                <div class="w-100 d-block d-sm-none"></div>
-                <dd class="col mb-0">
-                    <span *ngIf="coneSearch !== null" class="mb-0">
-                        Cone search:
-                        <ul class="pl-4 list-unstyled">
-                            <li>RA = {{ coneSearch.ra }}°</li>
-                            <li>DEC = {{ coneSearch.dec }}°</li>
-                            <li>radius = {{ coneSearch.radius }}</li>
-                        </ul>
-                    </span>
-                    <ng-container *ngIf="criteriaList.length > 0">
-                        <p *ngFor="let criterion of criteriaList" class="mb-0">
-                            {{ getAttribute(criterion.id).form_label }} {{ printCriterion(criterion) }}
-                        </p>
-                    </ng-container>
-                </dd>
-            </dl>
-        </div>
-        <div class="col">
-            <span class="font-weight-bold">Output list</span>
-            <tabset>
-                <tab *ngFor="let family of outputFamilyList" [heading]="family.label">
-                    {{ family.label }}
-                </tab>
-            </tabset>
-        </div>
-    </div>
+                </ng-template>
+                <div class="tab-content">
+                    <div *ngIf="noCriteria()" class="text-center font-weight-bold pt-5">
+                        No selected criteria
+                    </div>
+
+                    <div *ngIf="!noCriteria()" class="container-fluid">
+                        <div class="row">
+                            <div *ngIf="coneSearch !== null" class="col">
+                                <span class="title">Cone search</span>
+                                <ul class="pl-4 list-unstyled">
+                                    <li>RA = {{ coneSearch.ra }}°</li>
+                                    <li>DEC = {{ coneSearch.dec }}°</li>
+                                    <li>radius = {{ coneSearch.radius }}</li>
+                                </ul>
+                            </div>
+
+                            <div *ngFor="let family of criteriaFamilyList" class="col">
+                                <span class="title">{{ family.label }}</span>
+<!--                                <ul>-->
+<!--                                    <li *ngFor="let criterion of criteriaByFamily(family.id)"></li>-->
+<!--                                </ul>-->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </tab>
+            <tab>
+                <ng-template tabHeading>
+                    Outputs <span class="badge badge-secondary">{{ outputList.length }}</span>
+                </ng-template>
+                <div class="tab-content">
+                    I've got an HTML heading. Pretty cool!cdeacdreacfrdea
+                </div>
+            </tab>
+        </tabset>
 </div>
\ No newline at end of file

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

@@ -16,6 +16,7 @@
         <app-reminder
             [datasetAttributeList]="datasetAttributeList | async" 
             [coneSearch]="coneSearch | async"
+            [criteriaFamilyList]="criteriaFamilyList | async"
             [criteriaList]="criteriaList | async"
             [outputFamilyList]="outputFamilyList | async"
             [categoryList]="categoryList | async"

src/app/search/containers/result.component.ts

@@ -31,6 +31,7 @@ export class ResultComponent implements OnInit, OnDestroy {
     public currentStep: Observable<string>;
     public datasetList: Observable<Dataset[]>;
     public datasetAttributeList: Observable<Attribute[]>;
+    public criteriaFamilyList: Observable<Family[]>;
     public criteriaList: Observable<Criterion[]>;
     public coneSearch: Observable<ConeSearch>;
     public outputFamilyList: Observable<Family[]>;
@@ -53,6 +54,7 @@ export class ResultComponent implements OnInit, OnDestroy {
         this.currentStep = store.select(searchSelector.getCurrentStep);
         this.datasetList = store.select(metamodelSelector.getDatasetList);
         this.datasetAttributeList = this.store.select(metamodelSelector.getDatasetAttributeList);
+        this.criteriaFamilyList = this.store.select(metamodelSelector.getCriteriaFamilyList);
         this.criteriaList = this.store.select(searchSelector.getCriteriaList);
         this.coneSearch = this.store.select(searchSelector.getConeSearch);
         this.outputFamilyList = this.store.select(metamodelSelector.getOutputFamilyList);

src/styles.css

@@ -4,6 +4,10 @@
     color: #7AC29A;
 }
 
+.theme-border {
+    border: #7AC29A solid 1px;
+}
+
 .dl-btn {
     fill: white;
     background-color: #50a44b;