Commit 10c1b38d authored by Tifenn Guillas's avatar Tifenn Guillas

WIP: save datatables state on search multiple section

parent e9449234
<div *ngIf="datasetsCountIsLoaded">
<accordion [isAnimated]="true">
<ng-container *ngFor="let dataset of getOrderedDatasetWithResults()">
<accordion-group (isOpenChange)="loadData($event, dataset.name)" #ag [panelClass]="'custom-accordion'" [isOpen]="false" class="my-2">
<accordion-group #ag
class="my-2"
[panelClass]="'custom-accordion'"
[isOpen]="false"
(isOpenChange)="changeAccordionState($event, dataset.name)">
<button class="btn btn-link btn-block clearfix" accordion-heading>
<span class="pull-left float-left">
{{ dataset.label }}
......
......@@ -37,9 +37,11 @@ export class DatasetsResultComponent {
@Input() allAttributeList: Dictionary<AttributesByDataset>;
@Input() datasetsWithData: (string | number) [];
@Input() allData: Dictionary<DataByDataset>;
@Input() datatableState: { dname: string, accordionIsOpen: boolean }[];
@Input() selectedData: { dname: string, data: (string | number)[] }[];
@Output() retrieveMeta: EventEmitter<string> = new EventEmitter();
@Output() retrieveData: EventEmitter<Pagination> = new EventEmitter();
@Output() updateDatatableState: EventEmitter<{ dname: string, accordionIsOpen: boolean }[]> = new EventEmitter();
@Output() updateSelectedData: EventEmitter<{ dname: string, data: (string | number)[] }[]> = new EventEmitter();
/**
......@@ -183,12 +185,32 @@ export class DatasetsResultComponent {
this.updateSelectedData.emit(updatedSelection);
}
/**
* When accordion state change, emits update datables state and calls loadData function.
*
* @param {boolean} isOpen - The accordion state.
* @param {string} dname - The dataset name.
*/
changeAccordionState(isOpen: boolean, dname: string) : void {
let updatedDatatableState: { dname: string, accordionIsOpen: boolean }[];
const datatableStatus: { dname: string, accordionIsOpen: boolean } = { dname: dname, accordionIsOpen: isOpen };
const index: number = this.datatableState.findIndex(ds => ds.dname === dname);
if (index === -1) {
updatedDatatableState = [...this.datatableState, datatableStatus];
} else {
updatedDatatableState = this.datatableState.filter(ds => ds.dname !== dname);
updatedDatatableState.push(datatableStatus);
}
this.updateDatatableState.emit(updatedDatatableState);
this.loadData(isOpen, dname);
}
/**
* When accordion opens, emits retrieve metadata for the
* given dataset name if not already loaded and emits retrieve
* data for the given dataset name otherwise.
*
* @param {boolean} isOpen - If the accordion is open.
* @param {boolean} isOpen - The accordion state.
* @param {string} dname - The dataset name.
*/
loadData(isOpen: boolean, dname: string) : void {
......
......@@ -22,9 +22,11 @@
[allAttributeList]="allAttributeList | async"
[datasetsWithData]="datasetsWithData | async"
[allData]="allData | async"
[datatableState]="datatableState | async"
[selectedData]="selectedData | async"
(retrieveMeta)="retrieveMeta($event)"
(retrieveData)="retrieveData($event)"
(updateDatatableState)="updateDatatableState($event)"
(updateSelectedData)="updateSelectedData($event)">
</app-datasets-result>
</div>
......
......@@ -65,6 +65,7 @@ export class ResultMultipleComponent implements OnInit, OnDestroy {
public data: Observable<{ dname: string, data: any[]}[]>;
public datasetsWithData: Observable<string[] | number[]>;
public allData: Observable<Dictionary<DataByDataset>>;
public datatableState: Observable<{ dname: string, accordionIsOpen: boolean }[]>;
public selectedData: Observable<{ dname: string, data: (number | string)[] }[]>;
constructor(private store: Store<StoreState>, private scrollTopService: ScrollTopService) {
......@@ -83,6 +84,7 @@ export class ResultMultipleComponent implements OnInit, OnDestroy {
this.allAttributeList = this.store.select(metamodelSelector.getAllAttributeList);
this.datasetsWithData = this.store.select(searchMultipleSelector.getDatasetsWithData);
this.allData = this.store.select(searchMultipleSelector.getAllData);
this.datatableState = store.select(searchMultipleSelector.getDatatableState);
this.selectedData = this.store.select(searchMultipleSelector.getSelectedData);
}
......@@ -120,6 +122,15 @@ export class ResultMultipleComponent implements OnInit, OnDestroy {
this.store.dispatch(new searchMultipleActions.RetrieveDataAction(params));
}
/**
* Dispatches action to update datatables state with the given updated datatables state.
*
* @param {{ dname: string, accordionIsOpen: boolean }[]} updatedDatatableState - The updated datatables state.
*/
updateDatatableState(updatedDatatableState: { dname: string, accordionIsOpen: boolean }[]): void {
this.store.dispatch(new searchMultipleActions.UpdateDatatableStateAction(updatedDatatableState));
}
/**
* Dispatches action to update data selection with the given updated selected data.
*
......
......@@ -150,6 +150,12 @@ export function reducer(state: State = initialState, action: actions.Actions): S
}
} as Update<DataByDataset>, state);
case actions.UPDATE_DATATABLE_STATE:
return {
...state,
datatableState: action.payload
};
case actions.UPDATE_SELECTED_DATA:
return {
...state,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment