From 3d3bac234db1747e65d92fbd5f9a240fb03f95fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anthony=20Qu=C3=A9r=C3=A9?= <47711333+Anthony-Jhoiro@users.noreply.github.com> Date: Mon, 19 Aug 2019 15:16:02 +0200 Subject: [PATCH] #9 Rework --- .../datatable-page.component.html | 28 ++-- .../datatable-page.component.ts | 51 ++++--- .../datatable/datatable.component.html | 1 - .../datatable/datatable.component.ts | 134 ++++++++++++------ .../filters/filters.component.ts | 67 +++++---- 5 files changed, 176 insertions(+), 105 deletions(-) diff --git a/src/app/shared/datatable-page/datatable-page.component.html b/src/app/shared/datatable-page/datatable-page.component.html index 6831ba75..c48f2cd2 100644 --- a/src/app/shared/datatable-page/datatable-page.component.html +++ b/src/app/shared/datatable-page/datatable-page.component.html @@ -9,19 +9,15 @@ [selection]="selection"> - - - - - - + + diff --git a/src/app/shared/datatable-page/datatable-page.component.ts b/src/app/shared/datatable-page/datatable-page.component.ts index 20c78978..bf37c0f8 100644 --- a/src/app/shared/datatable-page/datatable-page.component.ts +++ b/src/app/shared/datatable-page/datatable-page.component.ts @@ -4,6 +4,7 @@ import { TestService } from 'src/app/core/services/crud/test.service'; import { FilterService } from 'src/app/core/services/crud/filter.service'; import { InvariantsService } from 'src/app/core/services/crud/invariants.service'; + @Component({ selector: 'app-datatable-page', templateUrl: './datatable-page.component.html', @@ -23,16 +24,18 @@ export class DatatablePageComponent implements OnInit { @Input() selection: boolean; @Input() selectedRows: Array; @Input() name?: string = 'none'; - cache: number = -1; + cache: number = -1; //number of displayed rows rows: Array; globalSearch: string - constructor(private testService: TestService, private filterService: FilterService, private invariantsService: InvariantsService) { } + constructor( + private testService: TestService, + private filterService: FilterService, + private invariantsService: InvariantsService) { } ngOnInit() { - // this.search(); this.invariantsService.observableSystemsSelected.subscribe(rep => { this.cache = -1; this.rows = null; @@ -41,15 +44,17 @@ export class DatatablePageComponent implements OnInit { }) } - search(globalSearch?: string) { - - - - + /** + * search + * * get rows corresponding to filters and page infomations + * @param globalSearch content of the gloabl search field (default: '') + */ + search(globalSearch?: string): void { + // if a servlet as been specified if (this.servlet) { this.globalSearch = (globalSearch) ? globalSearch : ''; - const a = this.page.number; - const delta = a - this.cache; + const currentPageNumber = this.page.number; + const delta = currentPageNumber - this.cache; const countWanted = delta * this.page.size; if (countWanted>0) { @@ -66,24 +71,32 @@ export class DatatablePageComponent implements OnInit { this.page.totalCount = length; }); - this.cache = a; - this.page.number = a; + this.cache = currentPageNumber; + this.page.number = currentPageNumber; } - - - } } - pageUpdate(newPage) { //When selecting a new page + /** + * pageUpdate + * * to call when a new page is selected or scrolled + * @param newPage new page number + */ + pageUpdate(newPage: number): void { //When selecting a new page this.page.number = newPage; this.search(); - } - applyFilters(globalSearch?: string) { + + /** + * applyFilters + * * update rows with new filters + * * reset cache, rows, page number and scroll + * @param globalSearch content of global search field + */ + applyFilters(globalSearch?: string): void { let a = document.getElementsByClassName("datatable-body")[0]; a.scroll(0,0); - a.scrollBy(0,0); + a.scrollBy(0,0); // scroll to the table top this.cache = -1; this.rows = null; this.page.number = 0; diff --git a/src/app/shared/datatable-page/datatable/datatable.component.html b/src/app/shared/datatable-page/datatable/datatable.component.html index cf952fcc..97e1afa3 100644 --- a/src/app/shared/datatable-page/datatable/datatable.component.html +++ b/src/app/shared/datatable-page/datatable/datatable.component.html @@ -5,7 +5,6 @@ [columnMode]="'flex'" [rowHeight]="50" [headerHeight]="50" - [loadingIndicator]="isLoading" [selected]="(selected)? selected : ''" [selectionType]="(selection)? 'checkbox' : ''" [selectAllRowsOnPage]="false" diff --git a/src/app/shared/datatable-page/datatable/datatable.component.ts b/src/app/shared/datatable-page/datatable/datatable.component.ts index aab074a6..43fd2461 100644 --- a/src/app/shared/datatable-page/datatable/datatable.component.ts +++ b/src/app/shared/datatable-page/datatable/datatable.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnInit, ViewChild, Output, EventEmitter, HostBinding} from '@angular/core'; +import { Component, Input, OnInit, ViewChild, Output, EventEmitter, HostBinding } from '@angular/core'; import { Column } from '../../model/column.model'; import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { DatalibTclistComponent } from '../utils/datalib-tclist/datalib-tclist.component'; @@ -28,74 +28,104 @@ export class DatatableComponent implements OnInit { @Input() selected: Array; @Output() pageUpdate = new EventEmitter(); @Output() sort = new EventEmitter(); - @ViewChild("dataTable", {static: true}) table: any; + @ViewChild("dataTable", { static: true }) table: any; @Input() name?: string; - - isLoading: boolean; columnActive: number; - constructor(private modalService: NgbModal, private sideContentService: SidecontentService, private testService: TestService) { } + constructor( + private modalService: NgbModal, + private sideContentService: SidecontentService, + private testService: TestService) { } - - - toggleColumn(column): void { - column.active = !column.active; + ngOnInit() { this.columnActive = this.columns.filter(a => a.active).length; } - - applyChange() { - this.pageUpdate.emit(this.page.number); - } - - ngOnInit() { + /** + * toggleColumn + * * toggle colmn display from column selector + * @param column column to toggle + */ + toggleColumn(column: Column): void { + column.active = !column.active; this.columnActive = this.columns.filter(a => a.active).length; } - onSelect({ selected }) { - if(selected) { - console.log('Select Event', selected, this.selected); + /** + * applyChange + * * Update changes + */ + applyChange(): void { + this.pageUpdate.emit(this.page.number); + } - this.selected.splice(0, this.selected.length); - this.selected.push(...selected); + /** + * onSelect + * * Add new selected event to the list + * @param param0 ? + */ + onSelect({ selected }): void { + if (selected) { + this.selected.splice(0, this.selected.length); + this.selected.push(...selected); } - } - addFilter(column) { + /** + * addFilter + * * Add a select filter corresponding to the column + * @param column column to filter + */ + addFilter(column: Column): void { column.dropActive = !column.dropActive; } - addFilterLike(column: Column) { + /** + * addFilterLike + * * Add a like filter corresponding to the column + * @param column column to filter + */ + addFilterLike(column: Column): void { column.fieldActive = !column.fieldActive; } - onSort(event) { - this.isLoading = true; - this.page.sort = event.sorts; - this.sort.emit(); - this.isLoading = false; - } - resetColumnDrop() { - this.columnActive = null; + /** + * onSort + * * emit column to sort and direction + * @param event (generate by angular) + */ + onSort(event): void { + this.page.sort = event.sorts; + this.sort.emit(); } - selectAll() { - for(let row of this.rows) { - if(!this.selected.includes(row)) { + /** + * selectAll + * * Select all charged columns + */ + selectAll(): void { + for (let row of this.rows) { + if (!this.selected.includes(row)) { this.selected.push(row); } } - + } - onPage(pageInfo) { + /** + * onPage + * * Change current page informations + * @param pageInfo + */ + onPage(pageInfo: any): void { this.page.number = pageInfo.offset; this.page.size = pageInfo.pageSize; this.applyChange(); } - openTCList(row) { + // *** TestCase Methods *** + + openTCList(row): void { this.sideContentService.addComponentToSideBlock(DatalibTclistComponent, { id: row.testDataLibID, name: row.name, @@ -103,7 +133,15 @@ export class DatatableComponent implements OnInit { }); this.sideContentService.openSideBlock(); } - editDataLib(row) { + + // *** Datalib Methods *** + + /** + * editDataLib + * * open side content to edit this datalib + * @param row datalib to edit + */ + editDataLib(row: any): void { this.sideContentService.addComponentToSideBlock(DatalibEditComponent, { datalib: row, type: 'EDIT', @@ -111,7 +149,13 @@ export class DatatableComponent implements OnInit { }); this.sideContentService.openSideBlock(); } - duplicateDataLib(row) { + + /** + * duplicateDataLib + * * open side content to duplpicate this datalib + * @param row datalib to duplicate + */ + duplicateDataLib(row: any): void { this.sideContentService.addComponentToSideBlock(DatalibEditComponent, { datalib: row, type: 'DUPLICATE', @@ -119,13 +163,19 @@ export class DatatableComponent implements OnInit { }); this.sideContentService.openSideBlock(); } - deleteDataLib(row) { + + /** + * deleteDataLib + * * open modal to delete datalib + * @param row datalib to delete + */ + deleteDataLib(row: any) { const modalRef = this.modalService.open(CustomModalComponent); modalRef.componentInstance.title = 'Delete Test Data Library Entry'; modalRef.componentInstance.text = "Do you want to delete Test Data Library '" + row.name + "' \ of system '" + row.system + "' (ID : " + row.testDataLibID + ") ?"; - modalRef.componentInstance.fct = () => {this.testService.deleteTestDataLib(row.testDataLibID, () =>this.sort.emit());}; + modalRef.componentInstance.fct = () => { this.testService.deleteTestDataLib(row.testDataLibID, () => this.sort.emit()); }; } - + } diff --git a/src/app/shared/datatable-page/filters/filters.component.ts b/src/app/shared/datatable-page/filters/filters.component.ts index ecdf579e..c2f37f78 100644 --- a/src/app/shared/datatable-page/filters/filters.component.ts +++ b/src/app/shared/datatable-page/filters/filters.component.ts @@ -31,12 +31,11 @@ export class FiltersComponent implements OnInit { this.columnActive = null; } - labelList: Array; - userSearch: any; - columnActive: number; - searchableColumns: Array; - gloabalSearchModel: string; - filterList = []; + private labelList: Array; + private userSearch: any; + private columnActive: number; + private searchableColumns: Array; + private gloabalSearchModel: string; constructor(private systemService: SystemService, private invariantService: InvariantsService, @@ -48,57 +47,71 @@ export class FiltersComponent implements OnInit { this.searchableColumns = this.columns.filter(a => a.searchable || a.like); } + /** + * toggleColumn + * * Change colmun activation from column selector + * @param column column to toggle + */ toggleColumn(column): void { column.active = !column.active; this.columnActive = this.columns.filter(a => a.active).length; } - applySystem() { - this.filterList = []; - this.columns.forEach(e => { - if(e.sSearch && e.contentName!=='description') { - e.sSearch.forEach(a => { - this.filterList.push({name: e.contentName, value: a}); - }); - } - }); + /** applySystem + * * emit filters + */ + applySystem(): void { this.systemApply.emit(this.gloabalSearchModel); } - applyPage() { + + /** applyPage + * * emit page modifications + */ + applyPage(): void { let a = document.getElementsByClassName("datatable-body")[0]; a.scroll(0,0); a.scrollBy(0, (this.page.number-1) * this.page.size * 50 + 50); this.pageApply.emit(this.page.number); } - remove(name: string, value: string) { - const columnIndex = this.columns.map(c => c.contentName).indexOf(name); - const index = this.columns[columnIndex].sSearch.indexOf(value); - if (index > -1) { - this.columns[columnIndex].sSearch.splice(index, 1); - } - this.applySystem(); - } - - onKeyUp() { + /** onKeyUp + * * In the gloabl search field, start search if there are more than 2 caracters and after 1/2 second + */ + onKeyUp(): void { if (this.gloabalSearchModel.length > 2){ setTimeout(() => this.applySystem(), 500); } } - addFilter(column) { + /** addFilter + * * Add select filter for that column + * @param column column to filter + */ + addFilter(column: Column) { if (!column.like) column.dropActive = !column.dropActive; else column.fieldActive = !column.fieldActive; } + /** addFilterLike + * * Add search field for that column + * @param column column to filter + */ addFilterLike(column: Column) { column.fieldActive = !column.fieldActive; } + + /** resetDefaultColumns + * * rest default column to display + */ resetDefaultColumns() { this.columns.forEach(c => c.active = c.defaultActive); this.columnActive = this.columns.filter(a => a.active).length; } + // *** Datalib methods *** + /** createDatalib + * * Open side content for datalib creation + */ createDatalib() { this.sideContentService.addComponentToSideBlock(DatalibEditComponent, { datalib: {},