From e89d90480d704a182f84086ba1f1d455a5bded6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 28 Nov 2023 14:50:04 +0300 Subject: [PATCH] Fixed #14214 - Remove PrimeFlex from DataView --- src/app/components/dataview/dataview.ts | 34 +-- src/app/showcase/doc/dataview/basicdoc.ts | 119 +++++----- .../doc/dataview/dataviewdoc.module.ts | 3 +- src/app/showcase/doc/dataview/layoutdoc.ts | 210 +++++++++--------- .../showcase/doc/dataview/paginationdoc.ts | 114 +++++----- src/app/showcase/doc/dataview/primeflexdoc.ts | 17 -- src/app/showcase/doc/dataview/sortingdoc.ts | 114 +++++----- .../showcase/pages/dataview/dataviewdemo.ts | 6 - 8 files changed, 310 insertions(+), 307 deletions(-) delete mode 100644 src/app/showcase/doc/dataview/primeflexdoc.ts diff --git a/src/app/components/dataview/dataview.ts b/src/app/components/dataview/dataview.ts index bddf241b0ab..0808ac847c4 100755 --- a/src/app/components/dataview/dataview.ts +++ b/src/app/components/dataview/dataview.ts @@ -72,18 +72,16 @@ import { DataViewLayoutChangeEvent, DataViewLazyLoadEvent, DataViewPageEvent, Da [showPageLinks]="showPageLinks" [styleClass]="paginatorStyleClass" > +
-
- - - -
-
- - {{ emptyMessageLabel }} - - -
+ + +
+
+ + {{ emptyMessageLabel }} + +
@@ -320,9 +318,9 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU _value: Nullable; - listItemTemplate: Nullable>; + listTemplate: Nullable>; - gridItemTemplate: Nullable>; + gridTemplate: Nullable>; itemTemplate: Nullable>; @@ -393,11 +391,13 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU (this.templates as QueryList).forEach((item) => { switch (item.getType()) { case 'listItem': - this.listItemTemplate = item.template; + case 'list': + this.listTemplate = item.template; break; case 'gridItem': - this.gridItemTemplate = item.template; + case 'grid': + this.gridTemplate = item.template; break; case 'paginatorleft': @@ -444,11 +444,11 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU updateItemTemplate() { switch (this.layout) { case 'list': - this.itemTemplate = this.listItemTemplate; + this.itemTemplate = this.listTemplate; break; case 'grid': - this.itemTemplate = this.gridItemTemplate; + this.itemTemplate = this.gridTemplate; break; } } diff --git a/src/app/showcase/doc/dataview/basicdoc.ts b/src/app/showcase/doc/dataview/basicdoc.ts index 1b72bd99b4c..1b7f375535e 100644 --- a/src/app/showcase/doc/dataview/basicdoc.ts +++ b/src/app/showcase/doc/dataview/basicdoc.ts @@ -7,32 +7,31 @@ import { ProductService } from '../../service/productservice'; selector: 'data-view-basic-demo', template: ` -

- DataView requires a value to display along with an pTemplate that receives an object in the collection to return content. The root element should have the PrimeFlex Grid classes e.g. col-12 to define how items are - displayed. -

+

DataView requires a value to display along with a list template that receives an object in the collection to return content.
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
@@ -71,25 +70,27 @@ export class BasicDoc { code: Code = { basic: ` - -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{'$'+ product.price }} -
@@ -100,25 +101,27 @@ export class BasicDoc { html: `
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{'$'+ product.price }} -
diff --git a/src/app/showcase/doc/dataview/dataviewdoc.module.ts b/src/app/showcase/doc/dataview/dataviewdoc.module.ts index b4d6e557ab3..8dc0680aed5 100644 --- a/src/app/showcase/doc/dataview/dataviewdoc.module.ts +++ b/src/app/showcase/doc/dataview/dataviewdoc.module.ts @@ -14,13 +14,12 @@ import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { LayoutDoc } from './layoutdoc'; import { PaginationDoc } from './paginationdoc'; -import { PrimeflexDoc } from './primeflexdoc'; import { SortingDoc } from './sortingdoc'; import { StyleDoc } from './styledoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, DataViewModule, DropdownModule, ButtonModule, RouterModule, RatingModule, TagModule, FormsModule], exports: [AppDocModule], - declarations: [ImportDoc, PrimeflexDoc, BasicDoc, PaginationDoc, SortingDoc, LayoutDoc, StyleDoc, AccessibilityDoc] + declarations: [ImportDoc, BasicDoc, PaginationDoc, SortingDoc, LayoutDoc, StyleDoc, AccessibilityDoc] }) export class DataViewDocModule {} diff --git a/src/app/showcase/doc/dataview/layoutdoc.ts b/src/app/showcase/doc/dataview/layoutdoc.ts index 704ddd7a433..2c4f0160feb 100644 --- a/src/app/showcase/doc/dataview/layoutdoc.ts +++ b/src/app/showcase/doc/dataview/layoutdoc.ts @@ -9,7 +9,7 @@ import { ProductService } from '../../service/productservice';

DataView supports list and grid display modes defined with the layout property. The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you - may use your own UI to switch modes as well. As in list layout, the grid layout also requires PrimeFlex Grid classes to define how the grid is displayed per screen sizes. + may use your own UI to switch modes as well.

@@ -19,48 +19,52 @@ import { ProductService } from '../../service/productservice';
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ product.name }}
+ +
+ + + {{ product.category }} + + +
+
+
+ {{ '$' + product.price }} +
-
-
- {{ '$' + product.price }} -
- -
-
-
- - - {{ product.category }} - - -
-
- -
{{ product.name }}
- -
-
- {{ '$' + product.price }} - + +
+
+
+
+ + + {{ product.category }} + + +
+
+ +
{{ product.name }}
+ +
+
+ {{ '$' + product.price }} + +
@@ -105,65 +109,10 @@ export class LayoutDoc {
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - -
-
-
- {{ '$' + product.price }} - -
-
-
-
- - -
-
-
- - - {{ product.category }} - - -
-
- -
{{ product.name }}
- -
-
- {{ '$' + product.price }} - -
-
-
- -`, - - html: ` -
- - -
- -
- - -
-
+ +
+
+
@@ -184,9 +133,11 @@ export class LayoutDoc {
- - -
+
+ + +
+
@@ -206,6 +157,67 @@ export class LayoutDoc {
+
+ +`, + + html: ` +
+ + +
+ +
+ + +
+
+
+ +
+
+
{{ product.name }}
+ +
+ + + {{ product.category }} + + +
+
+
+ {{ '$' + product.price }} + +
+
+
+
+
+ + +
+
+
+
+ + + {{ product.category }} + + +
+
+ +
{{ product.name }}
+ +
+
+ {{ '$' + product.price }} + +
+
+
+
`, diff --git a/src/app/showcase/doc/dataview/paginationdoc.ts b/src/app/showcase/doc/dataview/paginationdoc.ts index 8a0edcae731..8faaf6aba1c 100644 --- a/src/app/showcase/doc/dataview/paginationdoc.ts +++ b/src/app/showcase/doc/dataview/paginationdoc.ts @@ -11,25 +11,27 @@ import { ProductService } from '../../service/productservice';
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
@@ -68,25 +70,27 @@ export class PaginationDoc { code: Code = { basic: ` - -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
@@ -97,25 +101,27 @@ export class PaginationDoc { html: `
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
diff --git a/src/app/showcase/doc/dataview/primeflexdoc.ts b/src/app/showcase/doc/dataview/primeflexdoc.ts deleted file mode 100644 index bddeab87de4..00000000000 --- a/src/app/showcase/doc/dataview/primeflexdoc.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'primeflex-doc', - template: ` - -

DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.

- - - ` -}) -export class PrimeflexDoc { - code: Code = { - basic: `npm install primeflex` - }; -} diff --git a/src/app/showcase/doc/dataview/sortingdoc.ts b/src/app/showcase/doc/dataview/sortingdoc.ts index 0f512522c3f..ca8bdd84225 100644 --- a/src/app/showcase/doc/dataview/sortingdoc.ts +++ b/src/app/showcase/doc/dataview/sortingdoc.ts @@ -17,25 +17,27 @@ import { ProductService } from '../../service/productservice';
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
@@ -102,25 +104,27 @@ export class SortingDoc {
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
@@ -136,25 +140,27 @@ export class SortingDoc {
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
diff --git a/src/app/showcase/pages/dataview/dataviewdemo.ts b/src/app/showcase/pages/dataview/dataviewdemo.ts index de44faa6346..eacbce447f5 100755 --- a/src/app/showcase/pages/dataview/dataviewdemo.ts +++ b/src/app/showcase/pages/dataview/dataviewdemo.ts @@ -4,7 +4,6 @@ import { BasicDoc } from '../../doc/dataview/basicdoc'; import { ImportDoc } from '../../doc/dataview/importdoc'; import { LayoutDoc } from '../../doc/dataview/layoutdoc'; import { PaginationDoc } from '../../doc/dataview/paginationdoc'; -import { PrimeflexDoc } from '../../doc/dataview/primeflexdoc'; import { SortingDoc } from '../../doc/dataview/sortingdoc'; import { AccessibilityDoc } from '../../doc/dataview/accessibilitydoc'; @@ -19,11 +18,6 @@ export class DataViewDemo { label: 'Import', component: ImportDoc }, - { - id: 'primeflex', - label: 'PrimeFlex', - component: PrimeflexDoc - }, { id: 'basic', label: 'Basic',