Skip to content
Snippets Groups Projects
Commit e976f2d7 authored by Angapay Divin's avatar Angapay Divin
Browse files

add column drag and drop with cdk to change order

parent b7c91232
No related branches found
No related tags found
1 merge request!44Draft: Resolve "Changer l'ordre des colonnes datatable"
Hide whitespace changes
Inline Side-by-side
client/src/app/instance/search/components/result/datatable.component.html
+ 35
− 26
View file @ e976f2d7
<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
+ 39
− 5
View file @ e976f2d7
......@@ -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,
......@@ -30,7 +30,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[];
......@@ -45,12 +46,17 @@ export class DatatableComponent implements OnInit {
@Output() addSelectedData: EventEmitter<number | string> = new EventEmitter();
@Output() deleteSelectedData: EventEmitter<number | 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;
ngOnInit(): void {
this.sortedCol = this.attributeList.find(a => a.primary_key).id;
Promise.resolve(null).then(() => this.retrieveData.emit({
......@@ -60,6 +66,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;
}
}
/**
......@@ -186,4 +203,21 @@ export class DatatableComponent implements OnInit {
}
this.changePage(1);
}
dropCol(event) {
moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
console.log(this.columns)
}
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
+ 5
− 1
View file @ e976f2d7
......@@ -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,
......
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