From 3d7cef34200b448d49e2b7a467f4fc206fd257f8 Mon Sep 17 00:00:00 2001 From: Justin White Date: Thu, 26 Oct 2023 09:48:02 -0500 Subject: [PATCH 01/40] Fix Chart docs --- src/app/showcase/doc/chart/chartjsdoc.ts | 6 +----- src/app/showcase/doc/chart/stackedbardoc.ts | 4 ++-- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/app/showcase/doc/chart/chartjsdoc.ts b/src/app/showcase/doc/chart/chartjsdoc.ts index bbfd651837a..91b856e93f5 100644 --- a/src/app/showcase/doc/chart/chartjsdoc.ts +++ b/src/app/showcase/doc/chart/chartjsdoc.ts @@ -18,10 +18,6 @@ export class ChartjsDoc { code: Code = { typescript: ` npm install chart.js --save - -"scripts": [ - "../node_modules/chart.js/dist/chart.js", - //..others -],` +` }; } diff --git a/src/app/showcase/doc/chart/stackedbardoc.ts b/src/app/showcase/doc/chart/stackedbardoc.ts index 54fe22919cb..cd04b1a6101 100644 --- a/src/app/showcase/doc/chart/stackedbardoc.ts +++ b/src/app/showcase/doc/chart/stackedbardoc.ts @@ -60,7 +60,7 @@ export class StackedBarDoc implements OnInit { maintainAspectRatio: false, aspectRatio: 0.8, plugins: { - tooltips: { + tooltip: { mode: 'index', intersect: false }, @@ -149,7 +149,7 @@ export class ChartStackedBarDemo implements OnInit { maintainAspectRatio: false, aspectRatio: 0.8, plugins: { - tooltips: { + tooltip: { mode: 'index', intersect: false }, From 57b32fc09115f5ac1b118e291598abf86bb8606f Mon Sep 17 00:00:00 2001 From: siddhareddy Date: Sat, 4 Nov 2023 15:45:07 +0530 Subject: [PATCH 02/40] Treetable: size,gridlines documentation --- .../showcase/doc/treetable/gridlinesdoc.ts | 118 +++++++++++++++ src/app/showcase/doc/treetable/sizedoc.ts | 143 ++++++++++++++++++ .../doc/treetable/treetabledoc.module.ts | 6 +- .../showcase/pages/treetable/treetabledemo.ts | 12 ++ 4 files changed, 278 insertions(+), 1 deletion(-) create mode 100644 src/app/showcase/doc/treetable/gridlinesdoc.ts create mode 100644 src/app/showcase/doc/treetable/sizedoc.ts diff --git a/src/app/showcase/doc/treetable/gridlinesdoc.ts b/src/app/showcase/doc/treetable/gridlinesdoc.ts new file mode 100644 index 00000000000..81282e35bfb --- /dev/null +++ b/src/app/showcase/doc/treetable/gridlinesdoc.ts @@ -0,0 +1,118 @@ +import { Component, Input, OnInit, ViewChild } from '@angular/core'; +import { TreeNode } from 'primeng/api'; +import { Code } from '../../domain/code'; +import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app.docsectiontext.component'; +import { NodeService } from '../../service/nodeservice'; + +@Component({ + selector: 'gridlines-doc', + template: `
+ +

Adding p-treetable-gridlines class displays grid lines.

+ +
+ + + + Name + Size + Type + + + + + + + {{ rowData.name }} + + {{ rowData.size }} + {{ rowData.type }} + + + +
+ +
` +}) +export class GridlinesDoc implements OnInit { + @Input() id: string; + + @Input() title: string; + + @ViewChild('docsectiontext', { static: true }) docsectiontext: AppDocSectionTextComponent; + + files!: TreeNode[]; + + constructor(private nodeService: NodeService) {} + + ngOnInit() { + this.nodeService.getFilesystem().then((files) => (this.files = files)); + } + + code: Code = { + basic: ` + + + + Name + Size + Type + + + + + + + {{ rowData.name }} + + {{ rowData.size }} + {{ rowData.type }} + + +`, + + html: ` +
+ + + + Name + Size + Type + + + + + + + {{ rowData.name }} + + {{ rowData.size }} + {{ rowData.type }} + + + +
`, + + typescript: ` +import { Component, OnInit } from '@angular/core'; +import { TreeNode } from 'primeng/api'; +import { NodeService } from '../../service/nodeservice'; + +@Component({ + selector: 'tree-table-gridlines-demo', + templateUrl: './tree-table-gridlines-demo.html' +}) +export class TreeTableGridlinesDemo implements OnInit { + files!: TreeNode[]; + + constructor(private nodeService: NodeService) {} + + ngOnInit() { + this.nodeService.getFilesystem().then((files) => (this.files = files)); + } +}`, + + service: ['NodeService'] + }; +} diff --git a/src/app/showcase/doc/treetable/sizedoc.ts b/src/app/showcase/doc/treetable/sizedoc.ts new file mode 100644 index 00000000000..8333dc7b633 --- /dev/null +++ b/src/app/showcase/doc/treetable/sizedoc.ts @@ -0,0 +1,143 @@ +import { Component, Input, OnInit, ViewChild } from '@angular/core'; +import { TreeNode } from 'primeng/api'; +import { Code } from '../../domain/code'; +import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app.docsectiontext.component'; +import { NodeService } from '../../service/nodeservice'; + +@Component({ + selector: 'size-doc', + template: `
+ +

In addition to a regular treetable, alternatives with alternative sizes are available. Add p-treetable-sm class to reduce the size of treetable or p-treetable-lg to enlarge it.

+ +
+
+ +
+ + + + Name + Size + Type + + + + + + + {{ rowData.name }} + + {{ rowData.size }} + {{ rowData.type }} + + + +
+ +
` +}) +export class SizeDoc implements OnInit { + @Input() id: string; + + @Input() title: string; + + @ViewChild('docsectiontext', { static: true }) docsectiontext: AppDocSectionTextComponent; + + files!: TreeNode[]; + + sizes!: any[]; + + selectedSize: any = ''; + + constructor(private nodeService: NodeService) {} + + ngOnInit() { + this.nodeService.getFilesystem().then((files) => (this.files = files)); + + this.sizes = [ + { name: 'Small', class: 'p-treetable-sm' }, + { name: 'Normal', class: '' }, + { name: 'Large', class: 'p-treetable-lg' } + ]; + } + + code: Code = { + basic: ` +
+ +
+ + + + Name + Size + Type + + + + + + + {{ rowData.name }} + + {{ rowData.size }} + {{ rowData.type }} + + +`, + + html: ` +
+ + + + Name + Size + Type + + + + + + + {{ rowData.name }} + + {{ rowData.size }} + {{ rowData.type }} + + + +
`, + + typescript: ` +import { Component, OnInit } from '@angular/core'; +import { TreeNode } from 'primeng/api'; +import { NodeService } from '../../service/nodeservice'; + +@Component({ + selector: 'tree-table-size-demo', + templateUrl: './tree-table-size-demo.html' +}) +export class TreeTableSizeDemo implements OnInit { + files!: TreeNode[]; + + sizes!: any[]; + + selectedSize: any = ''; + + constructor(private nodeService: NodeService) {} + + ngOnInit() { + this.nodeService.getFilesystem().then((files) => (this.files = files)); + this.sizes = [ + { name: 'Small', class: 'p-treetable-sm' }, + { name: 'Normal', class: '' }, + { name: 'Large', class: 'p-treetable-lg' } + ]; + } +}`, + + service: ['NodeService'] + }; +} diff --git a/src/app/showcase/doc/treetable/treetabledoc.module.ts b/src/app/showcase/doc/treetable/treetabledoc.module.ts index 56eb32ba1b1..42f2fa22d83 100644 --- a/src/app/showcase/doc/treetable/treetabledoc.module.ts +++ b/src/app/showcase/doc/treetable/treetabledoc.module.ts @@ -41,6 +41,8 @@ import { StyleDoc } from './styledoc'; import { ResizeScrollableDoc } from './columnresizescrollabledoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { PaginatorLocaleDoc } from './paginatorlocaledoc'; +import { SizeDoc } from './sizedoc'; +import { GridlinesDoc } from './gridlinesdoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, TreeTableModule, ButtonModule, RouterModule, InputTextModule, SelectButtonModule, FormsModule, InputSwitchModule, ToastModule, MultiSelectModule, ContextMenuModule], @@ -74,7 +76,9 @@ import { PaginatorLocaleDoc } from './paginatorlocaledoc'; StyleDoc, AccessibilityDoc, PaginatorLocaleDoc, - ResizeScrollableDoc + ResizeScrollableDoc, + SizeDoc, + GridlinesDoc ] }) export class TreeTableDocModule {} diff --git a/src/app/showcase/pages/treetable/treetabledemo.ts b/src/app/showcase/pages/treetable/treetabledemo.ts index 073da868fab..ec01f451981 100755 --- a/src/app/showcase/pages/treetable/treetabledemo.ts +++ b/src/app/showcase/pages/treetable/treetabledemo.ts @@ -28,6 +28,8 @@ import { StyleDoc } from '../../doc/treetable/styledoc'; import { AccessibilityDoc } from '../../doc/treetable/accessibilitydoc'; import { PaginatorLocaleDoc } from '../../doc/treetable/paginatorlocaledoc'; import { ResizeScrollableDoc } from '../../doc/treetable/columnresizescrollabledoc'; +import { SizeDoc } from '../../doc/treetable/sizedoc'; +import { GridlinesDoc } from '../../doc/treetable/gridlinesdoc'; @Component({ templateUrl: './treetabledemo.html' @@ -54,6 +56,16 @@ export class TreeTableDemo { label: 'Template', component: TemplateDoc }, + { + id: 'size', + label: 'Size', + component: SizeDoc + }, + { + id: 'gridlines', + label: 'Grid Lines', + component: GridlinesDoc + }, { id: 'paginator', label: 'Paginator', From f4c0b1bd8e0784b3ad4b914951c4461c512d357a Mon Sep 17 00:00:00 2001 From: G Vineeth Prakash Date: Mon, 27 Nov 2023 12:36:12 +0530 Subject: [PATCH 03/40] Added the rangeEnd while selecting the range --- src/app/components/table/table.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 6e47fd955e5..b57e3f1a8ff 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -1849,6 +1849,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable if (this.lazy && this.paginator) { (rangeStart as number) -= this.first; + (rangeEnd as number) -= this.first; } let rangeRowsData = []; From da53ec501fe3604654d0ece7838a049fb94fa762 Mon Sep 17 00:00:00 2001 From: Cr3aHal0 Date: Wed, 20 Dec 2023 18:02:51 +0100 Subject: [PATCH 04/40] fix: Do not take into account non exportable fields for csv separators --- src/app/components/table/table.ts | 57 +++++++++++++------------------ 1 file changed, 23 insertions(+), 34 deletions(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 5ce6a1a3722..4bb346f5f63 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -2263,43 +2263,32 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable } } - //headers - for (let i = 0; i < (columns).length; i++) { - let column = (columns)[i]; - if (column.exportable !== false && column.field) { - csv += '"' + this.getExportHeader(column) + '"'; + const exportableColumns: any[] = (columns).filter(column => column.exportable !== false && column.field); - if (i < (columns).length - 1) { - csv += this.csvSeparator; - } - } - } + //headers + csv += exportableColumns.map(column => '"' + this.getExportHeader(column) + '"').join(this.csvSeparator); //body - data.forEach((record: any, i: number) => { - csv += '\n'; - for (let i = 0; i < (columns).length; i++) { - let column = (columns)[i]; - if (column.exportable !== false && column.field) { - let cellData = ObjectUtils.resolveFieldData(record, column.field); - - if (cellData != null) { - if (this.exportFunction) { - cellData = this.exportFunction({ - data: cellData, - field: column.field - }); - } else cellData = String(cellData).replace(/"/g, '""'); - } else cellData = ''; - - csv += '"' + cellData + '"'; - - if (i < (columns).length - 1) { - csv += this.csvSeparator; - } - } - } - }); + const body = data.map((record: any) => + exportableColumns.map(column => { + let cellData = ObjectUtils.resolveFieldData(record, column.field); + + if (cellData != null) { + if (this.exportFunction) { + cellData = this.exportFunction({ + data: cellData, + field: column.field + }); + } else cellData = String(cellData).replace(/"/g, '""'); + } else cellData = ''; + + return '"' + cellData + '"'; + }).join(this.csvSeparator) + ).join('\n'); + + if (body.length) { + csv += '\n' + body; + } let blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' From 13bfd0795101f90772e1bdeed974023b90506f35 Mon Sep 17 00:00:00 2001 From: Cr3aHal0 Date: Wed, 20 Dec 2023 18:51:02 +0100 Subject: [PATCH 05/40] feat(toast): providing close callback to headless toast template --- src/app/components/toast/toast.ts | 4 +-- src/app/showcase/doc/toast/headlessdoc.ts | 40 ++++++++--------------- 2 files changed, 16 insertions(+), 28 deletions(-) diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts index f939d0177b4..e71eefe8d0a 100755 --- a/src/app/components/toast/toast.ts +++ b/src/app/components/toast/toast.ts @@ -51,7 +51,7 @@ import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast [attr.data-pc-section]="'root'" > - +
@@ -181,7 +181,7 @@ export class ToastItem implements AfterViewInit, OnDestroy { this.initTimeout(); } - onCloseIconClick(event: Event) { + onCloseIconClick = (event: Event) => { this.clearTimeout(); this.onClose.emit({ diff --git a/src/app/showcase/doc/toast/headlessdoc.ts b/src/app/showcase/doc/toast/headlessdoc.ts index ae76e129d9d..3e514df3396 100644 --- a/src/app/showcase/doc/toast/headlessdoc.ts +++ b/src/app/showcase/doc/toast/headlessdoc.ts @@ -9,8 +9,8 @@ import { Code } from '../../domain/code';

Headless mode allows you to customize the entire user interface instead of the default elements.

- - + +
@@ -21,8 +21,8 @@ import { Code } from '../../domain/code';
- - + +
@@ -67,19 +67,13 @@ export class HeadlessDoc { } } - onConfirm() { - this.messageService.clear('confirm'); - this.visible = false; - } - - onReject() { - this.messageService.clear('confirm'); + onClose() { this.visible = false; } code: Code = { - basic: ` - + basic: ` +
@@ -90,8 +84,8 @@ export class HeadlessDoc {
- - + +
@@ -99,8 +93,8 @@ export class HeadlessDoc { `, html: `
- - + +
@@ -111,8 +105,8 @@ export class HeadlessDoc {
- - + +
@@ -162,13 +156,7 @@ export class ToastHeadlessDemo { } } - onConfirm() { - this.messageService.clear('confirm'); - this.visible = false; - } - - onReject() { - this.messageService.clear('confirm'); + onClose() { this.visible = false; } }` From 310544a82d8dbbd376953125fdfd012010abaa41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Lucena=20Ribas?= Date: Tue, 26 Dec 2023 17:52:09 -0300 Subject: [PATCH 06/40] Fixed #14432 --- src/app/components/table/table.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 34ebf978bc7..cdcd70e7ad3 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -2033,7 +2033,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable clearTimeout(this.filterTimeout); } if (!this.isFilterBlank(value)) { - this.filters[field] = { value: value, matchMode: matchMode }; + this.filters[field] = field == 'global'? { value: value, matchMode: matchMode } : [{ value: value, matchMode: matchMode }]; } else if (this.filters[field]) { delete this.filters[field]; } From 0259b3f492d8102105f581bf9675e9fdcfbbff06 Mon Sep 17 00:00:00 2001 From: Alhajras Algdairy Date: Wed, 27 Dec 2023 18:13:05 +0100 Subject: [PATCH 07/40] Fix the tree checkbox css issue and make it clearer when it is disabled --- src/app/components/tree/tree.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts index 41f08ac5c4f..ae259f1f780 100755 --- a/src/app/components/tree/tree.ts +++ b/src/app/components/tree/tree.ts @@ -103,7 +103,7 @@ import { -