#4 => done

src/app/login/store/login.action.ts

@@ -3,22 +3,22 @@ import { Action } from '@ngrx/store';
 import { Login, LoginToken, ChangePassword, } from '../store/model';
 import { AnisServerError } from '../../shared/model';
 
-export const LOGIN_LOCAL_STORAGE = 'Login Anis User By Local Storage';
-export const LOGIN_LOCAL_STORAGE_SUCCESS = 'Login Anis User By Local Storage Success';
-export const LOGIN = 'Login Anis User';
-export const LOGIN_SUCCESS = 'Login Anis User Success';
-export const LOGIN_FAIL = 'Login Anis User Fail';
-export const LOGOUT = 'Logout';
-export const LOGOUT_SUCCESS = 'Logout Success';
-export const REGISTER = 'Register Anis User';
-export const REGISTER_SUCCESS = 'Register Anis User Success';
-export const REGISTER_FAIL = 'Register Anis User Fail';
-export const FORGOT_PASSWORD = 'Forgot Anis User Password';
-export const FORGOT_PASSWORD_SUCCESS = 'Forgot Anis User Password Success';
-export const FORGOT_PASSWORD_FAIL = 'Forgot Anis User Password Fail';
-export const CHANGE_PASSWORD = 'Change Anis User Password';
-export const CHANGE_PASSWORD_SUCCESS = 'Change Anis User Password Success';
-export const CHANGE_PASSWORD_FAIL = 'Change Anis User Password Fail';
+export const LOGIN_LOCAL_STORAGE = '[Login] Login Anis User By Local Storage';
+export const LOGIN_LOCAL_STORAGE_SUCCESS = '[Login] Login Anis User By Local Storage Success';
+export const LOGIN = '[Login] Login Anis User';
+export const LOGIN_SUCCESS = '[Login] Login Anis User Success';
+export const LOGIN_FAIL = '[Login] Login Anis User Fail';
+export const LOGOUT = '[Login] Logout';
+export const LOGOUT_SUCCESS = '[Login] Logout Success';
+export const REGISTER = '[Login] Register Anis User';
+export const REGISTER_SUCCESS = '[Login] Register Anis User Success';
+export const REGISTER_FAIL = '[Login] Register Anis User Fail';
+export const FORGOT_PASSWORD = '[Login] Forgot Anis User Password';
+export const FORGOT_PASSWORD_SUCCESS = '[Login] Forgot Anis User Password Success';
+export const FORGOT_PASSWORD_FAIL = '[Login] Forgot Anis User Password Fail';
+export const CHANGE_PASSWORD = '[Login] Change Anis User Password';
+export const CHANGE_PASSWORD_SUCCESS = '[Login] Change Anis User Password Success';
+export const CHANGE_PASSWORD_FAIL = '[Login] Change Anis User Password Fail';
 
 export class LoginLocalStorageAction implements Action {
     type = LOGIN_LOCAL_STORAGE;

src/app/login/store/login.effects.ts

@@ -33,7 +33,7 @@ export class LoginEffects {
                     if (loginToken) {
                         return new loginActions.LoginLocalStorageSuccessAction(loginToken);
                     } else {
-                        return {type: 'No Action'};
+                        return {type: '[Login] No Action'};
                     }
                 })
             )

src/app/metamodel/effects/criteria.effects.ts

@@ -26,7 +26,7 @@ export class CriteriaEffects {
         withLatestFrom(this.store$),
         switchMap(([action, state]) => {
             if (state.metamodel.criteria.criteriaSearchMetaIsLoaded) {
-                return of({ type: 'Criteria search meta is already loaded' });
+                return of({ type: '[No Action] [Criteria] Criteria search meta is already loaded' });
             } else {
                 return of(new criteriaActions.LoadCriteriaSearchMetaWipAction())
             }

src/app/metamodel/effects/dataset.effects.ts

@@ -26,7 +26,7 @@ export class DatasetEffects {
         withLatestFrom(this.store$),
         switchMap(([action, state]) => {
             if (state.metamodel.dataset.datasetSearchMetaIsLoaded) {
-                return of({ type: 'Dataset search meta is already loaded' });
+                return of({ type: '[No Action] [Dataset] Dataset search meta is already loaded' });
             } else {
                 return of(new datasetActions.LoadDatasetSearchMetaWipAction())
             }

src/app/metamodel/effects/output.effects.ts

@@ -26,7 +26,7 @@ export class OutputEffects {
         withLatestFrom(this.store$),
         switchMap(([action, state]) => {
             if (state.metamodel.output.outputSearchMetaIsLoaded) {
-                return of({ type: 'Output search meta is already loaded' });
+                return of({ type: '[No Action] [Output] Output search meta is already loaded' });
             } else {
                 return of(new outputActions.LoadOutputSearchMetaWipAction())
             }

src/app/metamodel/model/attribute.model.ts

+import { Option } from './option.model';
+
 export interface Attribute {
     id: number;
     name: string;
@@ -23,7 +25,7 @@ export interface Attribute {
     order_display: number;
     detail: boolean;
     renderer_detail: string;
-    options: string;
+    options: Option[];
     vo_utype: string;
     vo_ucd: string;
     vo_unit: string;

src/app/metamodel/model/option.model.ts

 export class Option {
-    id: number;
     label: string;
     value: string;
     display: number;

src/app/metamodel/reducers/criteria.reducer.ts

@@ -42,4 +42,6 @@ export function reducer(state: State = initialState, action: actions.Actions): S
     }
 }
 
+export const getCriteriaSearchMetaIsLoading = (state: State) => state.criteriaSearchMetaIsLoading;
+export const getCriteriaSearchMetaIsLoaded = (state: State) => state.criteriaSearchMetaIsLoaded;
 export const getCriteriaFamilyList = (state: State) => state.criteriaFamilyList.sort((a, b) => a.display - b.display);

src/app/metamodel/selectors/attribute.selector.ts

@@ -8,6 +8,16 @@ export const getAttributeState = createSelector(
     (state: metamodel.State) => state.attribute
 );
 
+export const getAttributeSearchMetaIsLoading = createSelector(
+    getAttributeState,
+    attribute.getAttributeSearchMetaIsLoading
+);
+
+export const getAttributeSearchMetaIsLoaded = createSelector(
+    getAttributeState,
+    attribute.getAttributeSearchMetaIsLoaded
+);
+
 export const getDatasetAttributeList = createSelector(
     getAttributeState,
     attribute.getDatasetAttributeList

src/app/metamodel/selectors/criteria.selector.ts

@@ -8,6 +8,16 @@ export const getCriteriaState = createSelector(
     (state: metamodel.State) => state.criteria
 );
 
+export const getCriteriaSearchMetaIsLoading = createSelector(
+    getCriteriaState,
+    criteria.getCriteriaSearchMetaIsLoading
+);
+
+export const getCriteriaSearchMetaIsLoaded = createSelector(
+    getCriteriaState,
+    criteria.getCriteriaSearchMetaIsLoaded
+);
+
 export const getCriteriaFamilyList = createSelector(
     getCriteriaState,
     criteria.getCriteriaFamilyList

src/app/metamodel/selectors/output.selector.ts

@@ -8,6 +8,16 @@ export const getOutputState = createSelector(
     (state: metamodel.State) => state.output
 );
 
+export const getOutputSearchMetaIsLoading = createSelector(
+    getOutputState,
+    output.getOutputSearchMetaIsLoading
+);
+
+export const getOutputSearchMetaIsLoaded = createSelector(
+    getOutputState,
+    output.getOutputSearchMetaIsLoaded
+);
+
 export const getOutputFamilyList = createSelector(
     getOutputState,
     output.getOutputFamilyList

src/app/search/components/criteria-tabs.component.html

-<div *ngIf="isLoading()" class="text-center">
-    <i class="fas fa-circle-notch fa-spin fa-3x"></i>
-    <span class="sr-only">Loading...</span>
-</div>
-
-<div *ngIf="!isLoading() && criteriaFamilyList.length == 1">
+<div *ngIf="criteriaFamilyList.length == 1">
     <div class="border rounded my-2">
         <p class="border-bottom bg-light text-primary py-4 pl-4">{{ criteriaFamilyList[0].label }}</p>
         <div class="px-3">
@@ -15,7 +10,7 @@
     </div>
 </div>
 
-<accordion *ngIf="!isLoading() && criteriaFamilyList.length > 1">
+<accordion *ngIf="criteriaFamilyList.length > 1">
     <accordion-group #ag *ngFor="let family of criteriaFamilyList" [panelClass]="'custom-accordion'" class="my-2"
         [isOpen]="true">
         <button class="btn btn-link btn-block clearfix" accordion-heading>

src/app/search/components/criteria-tabs.component.ts

@@ -15,14 +15,6 @@ export class CriteriaTabsComponent {
     @Input() criteriaList: Criterion[];
     @Output() addCriterion: EventEmitter<Criterion> = new EventEmitter();
 
-    isLoading() {
-        if (this.criteriaFamilyList.length > 0 && this.datasetAttributeList.length > 0) {
-            return false;
-        } else {
-            return true;
-        }
-    }
-
     add(criterion: Criterion): void {
         this.addCriterion.emit(criterion);
     }

src/app/search/components/criteria/checkbox.component.ts

 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { FormControl, FormArray } from '@angular/forms';
 
-import { Criterion, CheckboxCriterion } from '../../store/model';
+import { Criterion, SelectMultipleCriterion } from '../../store/model';
 import { Option } from '../../../metamodel/model';
 
 @Component({
@@ -22,9 +22,10 @@ export class CheckboxComponent {
     set criterion(criterion: Criterion) {
         this.getDefault(criterion);
     }
-    @Output() add: EventEmitter<CheckboxCriterion> = new EventEmitter();
+    @Output() add: EventEmitter<SelectMultipleCriterion> = new EventEmitter();
 
     checkboxes: FormArray;
+    checkboxesFormControls: {value: string, control: FormControl}[];
     _options: Option[];
 
     addCriterion() {
@@ -34,13 +35,16 @@ export class CheckboxComponent {
                 values.push(this._options[i]);
             }
         });
-        const cb = new CheckboxCriterion(this.id, this.operator, values);
+        const cb = new SelectMultipleCriterion(this.id, this.operator, values);
         this.add.emit(cb);
     }
 
     setCheckboxes(options: Option[]) {
-        this.checkboxes = new FormArray(options.map(() => {
-            return new FormControl(false);
+        this.checkboxesFormControls = [];
+        this.checkboxes = new FormArray(options.map((option: Option) => {
+            const control = new FormControl(false);
+            this.checkboxesFormControls.push({value: option.value, control});
+            return control;
         }));
     }
 
@@ -49,6 +53,10 @@ export class CheckboxComponent {
             this.checkboxes.reset();
             this.checkboxes.enable();
         } else {
+            const checkboxCriterion = criterion as SelectMultipleCriterion;
+            checkboxCriterion.options.map(option => {
+                this.checkboxesFormControls.find(formControl => formControl.value === option.value).control.setValue(true);
+            })
             this.checkboxes.disable();
         }
     }

src/app/search/components/output-tabs.component.html

-<div *ngIf="isLoading()" class="text-center">
-    <i class="fas fa-circle-notch fa-spin fa-3x"></i>
-    <span class="sr-only">Loading...</span>
-</div>
-
-<div *ngIf="!isLoading() && outputFamilyList.length == 1">
+<div *ngIf="outputFamilyList.length == 1">
     <div class="border rounded my-2">
         <p class="border-bottom bg-light text-primary py-4 pl-4">{{ outputFamilyList[0].label }}</p>
         <div class="p-3">
@@ -14,7 +9,7 @@
     </div>
 </div>
 
-<accordion *ngIf="!isLoading() && outputFamilyList.length > 1">
+<accordion *ngIf="outputFamilyList.length > 1">
     <accordion-group #ag *ngFor="let family of outputFamilyList" [panelClass]="'custom-accordion'" class="my-2"
         [isOpen]="true">
         <button class="btn btn-link btn-block clearfix" accordion-heading>

src/app/search/components/output-tabs.component.ts

@@ -15,17 +15,6 @@ export class OutputTabsComponent {
     @Input() outputList: number[];
     @Output() changed: EventEmitter<number[]> = new EventEmitter();
 
-    isLoading() {
-        if (this.outputFamilyList.length > 0 &&
-            this.categoryList.length > 0 &&
-            this.datasetAttributeList.length > 0
-        ) {
-            return false;
-        } else {
-            return true;
-        }
-    }
-
     change(clonedOutpuList: number[]): void {
         this.changed.emit(clonedOutpuList);
     }

src/app/search/components/summary.component.html

 <div class="border rounded">
-    <p class="lead text-center border-bottom bg-light py-2">Summary</p>
-    <p *ngIf="datasetName && datasetList.length > 0" class="text-center font-weight-bold">{{getDataset().label}}</p>
-    <hr *ngIf="criteriaList.length > 0">
-    <p *ngIf="criteriaList.length > 0" class="text-center font-italic">
-        <span *ngIf="currentStep === 'dataset'">Default</span> Criteria
+    <p class="lead text-center border-bottom bg-light py-2">Search summary</p>
+    <p class="text-center font-italic">
+        Dataset
+    </p>
+    <p *ngIf="datasetName && datasetList.length > 0" class="pl-5">{{getDataset().label}}</p>
+    <hr>
+    <p class="text-center font-italic">
+        Criteria
+    </p>
+    <p *ngIf="criteriaList.length < 1" class="pl-5 font-weight-bold">
+        No selected criteria
     </p>
     <ul *ngIf="criteriaList.length > 0" class="pl-5 list-unstyled">
         <li *ngFor="let criterion of criteriaList">
@@ -12,11 +18,11 @@
             {{getAttribute(criterion.id).form_label}} {{criterion.printCriterion()}}
         </li>
     </ul>
-    <hr *ngIf="outputList.length > 0">
-    <p *ngIf="outputList.length > 0" class="text-center font-italic">
-        <span *ngIf="currentStep === 'dataset'">Default</span> Output
+    <hr>
+    <p class="text-center font-italic">
+        Output
     </p>
-    <ul *ngIf="outputList.length > 0" class="pl-5 list-unstyled">
+    <ul class="pl-5 list-unstyled">
         <li *ngFor="let output of outputList">
             {{getAttribute(output).form_label}}
         </li>

src/app/search/components/url-display.component.html

@@ -9,11 +9,7 @@
             </div>
         </button>
         <div>
-            <div *ngIf="isLoading()" class="text-center">
-                <i class="fas fa-circle-notch fa-spin fa-3x"></i>
-                <span class="sr-only">Loading...</span>
-            </div>
-            <div *ngIf="!isLoading()" class="row">
+            <div class="row">
                 <div class="col">
                     <a target="_blank" [href]="getUrl()">{{ getUrl() }}</a>
                 </div>

src/app/search/components/url-display.component.ts

@@ -17,13 +17,6 @@ export class UrlDisplayComponent {
 
     constructor(private toastr: ToastrService) { }
 
-    isLoading(): boolean {
-        if (this.outputList.length > 0) {
-            return false;
-        }
-        return true;
-    }
-
     getUrl() {
         let query = this.apiPath + '/data/' + this.datasetName + '?a=' + this.outputList.join(';');
         if (this.criteriaList.length > 0) {

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

-<div class="row mt-4">
+<div *ngIf="(criteriaSearchMetaIsLoading | async) || (datasetSearchMetaIsLoading | async) || (attributeSearchMetaIsLoading | async)" 
+    class="row justify-content-center mt-5">
+    <i class="fas fa-circle-notch fa-spin fa-3x"></i>
+    <span class="sr-only">Loading...</span>
+</div>
+<div *ngIf="(criteriaSearchMetaIsLoaded | async) && (datasetSearchMetaIsLoaded | async) && (attributeSearchMetaIsLoaded | async)"
+    class="row mt-4">
     <div class="col-12 col-md-8">
         <app-criteria-tabs
             [criteriaFamilyList]="criteriaFamilyList | async"
@@ -22,9 +28,15 @@
 </div>
 <div class="row mt-5 justify-content-between">
     <div class="col">
-        <a routerLink="/search" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> Previous</a>
+        <a routerLink="/search" class="btn btn-outline-secondary">
+            <i class="fas fa-arrow-left"></i> Previous
+        </a>
     </div>
     <div class="col col-auto">
-        <a routerLink="/search/output/{{datasetName | async}}" [queryParams]="queryParams | async" class="btn btn-outline-primary">Next <i class="fas fa-arrow-right"></i></a>
+        <a routerLink="/search/output/{{datasetName | async}}" 
+            [queryParams]="queryParams | async" 
+            class="btn btn-outline-primary">
+            Next <i class="fas fa-arrow-right"></i>
+        </a>
     </div>
 </div>