Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • anis/anis-next
1 result
Show changes
Commits on Source (2)
Hide whitespace changes
Inline Side-by-side
client/src/app/instance/search/components/result/datatable.component.html
View file @ 307a1848
<app-spinner *ngIf="dataIsLoading"></app-spinner>
<div class="table-responsive" *ngIf="dataIsLoaded">
<table class="table table-hover" aria-describedby="List of results">
<table class="table table-hover" aria-describedby="List of results" mat-table>
<thead>
<tr>
<tr cdkDropList cdkDropListOrientation="horizontal" [cdkDropListData]="columns" (cdkDropListDropped)="dropCol($event)">
<th *ngIf="dataset.datatable_selectable_rows" scope="col" class="select">#</th>
<th *ngFor="let attribute of getOutputList()" scope="col">
<app-attribute-label [label]="attribute.label" [description]="attribute.description"></app-attribute-label>
<ng-container *ngFor="let attribute of columns" scope="col">
<th cdkDrag (mousedown)="mouseDown($event)" cdkDragLockAxis="x">
<div>
<app-attribute-label [label]="attribute.label" [description]="attribute.description"></app-attribute-label>
&nbsp;
<span *ngIf="attribute.id === sortedCol && attribute.order_by" class="pl-2" class="clickable" (click)="sort(attribute.id)">
<span [ngClass]="{'active': sortedOrder === 'a', 'inactive': sortedOrder === 'd'}">
......@@ -24,32 +27,37 @@
<span class="fas fa-fw fa-sort-amount-down-alt"></span>
</span>
</span>
</div>
<div class="placeholder" *cdkDragPlaceholder></div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let datum of data">
<tbody cdkDropList [cdkDropListData]="paginateData" (cdkDropListDropped)="dropRow($event)" >
<tr #tr cdkDragLockAxis="x" (mousedown)="mouseDown($event,tr)" *ngFor="let datum of paginateData" >
<td *ngIf="dataset.datatable_selectable_rows" class="data-selected"
(click)="toggleSelection(datum)">
<button class="btn btn-block text-left p-0 m-0">
<span *ngIf="!isSelected(datum)">
<span class="far fa-square fa-lg text-secondary"></span>
</span>
<span *ngIf="isSelected(datum)">
<span class="fas fa-check-square fa-lg" [ngStyle]="{ 'color': instance.design_color }"></span>
</span>
</button>
</td>
<td *ngFor="let attribute of getOutputList()" class="align-middle">
<app-renderer
[value]="datum[attribute.label]"
[dataset]="dataset"
[instance]="instance"
[attribute]="attribute"
[queryParams]="queryParams"
(downloadFile)="downloadFile.emit($event)">
</app-renderer>
</td>
(click)="toggleSelection(datum)">
<button class="btn btn-block text-left p-0 m-0">
<span *ngIf="!isSelected(datum)">
<span class="far fa-square fa-lg text-secondary"></span>
</span>
<span *ngIf="isSelected(datum)">
<span class="fas fa-check-square fa-lg" [ngStyle]="{ 'color': instance.design_color }"></span>
</span>
</button>
</td>
<td *ngFor="let attribute of columns" class="align-middle">
<app-renderer
[value]="datum[attribute.label]"
[dataset]="dataset"
[instance]="instance"
[attribute]="attribute"
[queryParams]="queryParams"
(downloadFile)="downloadFile.emit($event)">
</app-renderer>
</td>
</tr>
</tbody>
</table>
......@@ -77,4 +85,5 @@
(pageChanged)="changePage($event.page)">
</pagination>
</div>
</div>
client/src/app/instance/search/components/result/datatable.component.ts
View file @ 307a1848
......@@ -7,8 +7,8 @@
* file that was distributed with this source code.
*/
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
import { CdkDragDrop, moveItemInArray, CdkDragStart, CdkDragRelease } from '@angular/cdk/drag-drop';
import {
Instance,
Attribute,
......@@ -16,8 +16,11 @@ import {
DetailLinkRendererConfig,
DownloadRendererConfig,
ImageRendererConfig,
LinkRendererConfig } from 'src/app/metamodel/models';
LinkRendererConfig
} from 'src/app/metamodel/models';
import { Pagination, PaginationOrder, SearchQueryParams } from 'src/app/instance/store/models';
import * as searchActions from '../../../store/actions/search.actions';
import { Store } from '@ngrx/store';
/**
* @class
......@@ -30,7 +33,8 @@ import { Pagination, PaginationOrder, SearchQueryParams } from 'src/app/instance
templateUrl: 'datatable.component.html',
styleUrls: ['datatable.component.scss'],
})
export class DatatableComponent implements OnInit {
export class DatatableComponent implements OnInit, OnChanges {
@Input() dataset: Dataset;
@Input() instance: Instance;
@Input() attributeList: Attribute[];
......@@ -44,13 +48,21 @@ export class DatatableComponent implements OnInit {
@Output() retrieveData: EventEmitter<Pagination> = new EventEmitter();
@Output() addSelectedData: EventEmitter<number | string> = new EventEmitter();
@Output() deleteSelectedData: EventEmitter<number | string> = new EventEmitter();
@Output() downloadFile: EventEmitter<{url: string, filename: string}> = new EventEmitter();
@Output() downloadFile: EventEmitter<{ url: string, filename: string }> = new EventEmitter();
@ViewChild('table') el: ElementRef;
public page = 1;
public nbItems = 10;
public sortedCol: number = null;
public sortedOrder: PaginationOrder = PaginationOrder.a;
public columns: Attribute[];
paginateData: any[];
pos: any;
constructor(private store: Store) {
}
ngOnInit(): void {
this.sortedCol = this.attributeList.find(a => a.primary_key).id;
Promise.resolve(null).then(() => this.retrieveData.emit({
......@@ -60,6 +72,17 @@ export class DatatableComponent implements OnInit {
sortedCol: this.sortedCol,
order: this.sortedOrder
}));
this.paginateData = this.data;
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.attributeList) {
this.columns = this.getOutputList();
}
if (changes.data) {
this.paginateData = this.data;
}
}
/**
......@@ -69,7 +92,7 @@ export class DatatableComponent implements OnInit {
*/
getRendererConfig(attribute: Attribute) {
let config = null;
switch(attribute.renderer) {
switch (attribute.renderer) {
case 'detail-link':
config = attribute.renderer_config as DetailLinkRendererConfig;
break;
......@@ -186,4 +209,30 @@ export class DatatableComponent implements OnInit {
}
this.changePage(1);
}
dropCol(event) {
moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
let newOutPutList: number[] = [];
/*
update the output list with the columns order;
*/
this.columns.forEach(element => {
newOutPutList.push(element.id);
})
this.store.dispatch(searchActions.updateOutputList({ outputList: newOutPutList }));
}
mouseDown(event, el: any = null) {
el = el || event.target
this.pos = {
x: el.getBoundingClientRect().left - event.clientX + 'px',
y: el.getBoundingClientRect().top - event.clientY + 'px',
width: el.getBoundingClientRect().width + 'px'
}
}
dropRow(event: CdkDragDrop<string[]>) {
moveItemInArray(this.paginateData, event.previousIndex, event.currentIndex);
}
}
client/src/app/instance/search/search.module.ts
View file @ 307a1848
......@@ -15,6 +15,8 @@ import { ConeSearchModule } from '../cone-search/cone-search.module';
import { SearchRoutingModule, routedComponents } from './search-routing.module';
import { dummiesComponents } from './components';
import { searchPipes } from './pipes';
import { DragDropModule } from "@angular/cdk/drag-drop";
import { CdkTableModule } from '@angular/cdk/table';
/**
* @class
......@@ -25,7 +27,9 @@ import { searchPipes } from './pipes';
SharedModule,
//DynamicContentModule,
ConeSearchModule,
SearchRoutingModule
SearchRoutingModule,
DragDropModule,
CdkTableModule
],
declarations: [
routedComponents,
......