Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/primefaces/primeng
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Nov 28, 2023
2 parents dbf157d + 4098633 commit bde1958
Show file tree
Hide file tree
Showing 8 changed files with 314 additions and 309 deletions.
34 changes: 17 additions & 17 deletions src/app/components/dataview/dataview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,18 +72,16 @@ import { DataViewLayoutChangeEvent, DataViewLazyLoadEvent, DataViewPageEvent, Da
[showPageLinks]="showPageLinks"
[styleClass]="paginatorStyleClass"
></p-paginator>
<div class="p-dataview-content">
<div class="p-grid p-nogutter grid grid-nogutter" [ngClass]="gridStyleClass">
<ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="paginator ? (filteredValue || value | slice : (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value" [ngForTrackBy]="trackBy">
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: rowData, rowIndex: rowIndex }"></ng-container>
</ng-template>
<div *ngIf="isEmpty() && !loading" class="p-col col">
<div class="p-dataview-emptymessage">
<ng-container *ngIf="!emptyMessageTemplate; else emptyFilter">
{{ emptyMessageLabel }}
</ng-container>
<ng-container #emptyFilter *ngTemplateOutlet="emptyMessageTemplate"></ng-container>
</div>
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: paginator ? (filteredValue || value | slice : (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value }"></ng-container>
<div *ngIf="isEmpty() && !loading">
<div class="p-dataview-emptymessage">
<ng-container *ngIf="!emptyMessageTemplate; else empty">
{{ emptyMessageLabel }}
</ng-container>
<ng-container #empty *ngTemplateOutlet="emptyMessageTemplate"></ng-container>
</div>
</div>
</div>
Expand Down Expand Up @@ -320,9 +318,9 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU

_value: Nullable<any[]>;

listItemTemplate: Nullable<TemplateRef<any>>;
listTemplate: Nullable<TemplateRef<any>>;

gridItemTemplate: Nullable<TemplateRef<any>>;
gridTemplate: Nullable<TemplateRef<any>>;

itemTemplate: Nullable<TemplateRef<any>>;

Expand Down Expand Up @@ -393,11 +391,13 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU
(this.templates as QueryList<PrimeTemplate>).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':
Expand Down Expand Up @@ -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;
}
}
Expand Down
122 changes: 63 additions & 59 deletions src/app/showcase/doc/dataview/basicdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,31 @@ import { ProductService } from '../../service/productservice';
selector: 'data-view-basic-demo',
template: `
<app-docsectiontext>
<p>
DataView requires a <i>value</i> to display along with an <i>pTemplate</i> 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.
</p>
<p>DataView requires a value to display along with a <i>list</i> template that receives an object in the collection to return content.</p>
</app-docsectiontext>
<div class="card">
<p-dataView #dv [value]="products">
<ng-template let-product pTemplate="listItem">
<div class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3">
<div class="text-2xl font-bold text-900">{{ product.name }}</div>
<p-rating [(ngModel)]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
<div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ product.category }}</span>
</span>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product)"></p-tag>
<ng-template pTemplate="list" let-products>
<div class="grid grid-nogutter">
<div class="col-12" *ngFor="let item of products; let first = first">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" [ngClass]="{ 'border-top-1 surface-border': !first }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + item.image" [alt]="item.name" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3">
<div class="text-2xl font-bold text-900">{{ item.name }}</div>
<p-rating [(ngModel)]="item.rating" [readonly]="true" [cancel]="false"></p-rating>
<div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ item.category }}</span>
</span>
<p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)"></p-tag>
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">{{ '$' + item.price }}</span>
<button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'"></button>
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">{{ '$' + product.price }}</span>
<button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></button>
</div>
</div>
</div>
Expand Down Expand Up @@ -69,26 +68,29 @@ export class BasicDoc {
}

code: Code = {
basic: `<p-dataView #dv [value]="products">
<ng-template let-product pTemplate="listItem">
<div class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3">
<div class="text-2xl font-bold text-900">{{ product.name }}</div>
<p-rating [(ngModel)]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
<div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ product.category }}</span>
</span>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product)"></p-tag>
basic: `
<p-dataView #dv [value]="products">
<ng-template pTemplate="list" let-products>
<div class="grid grid-nogutter">
<div class="col-12" *ngFor="let item of products; let first = first">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" [ngClass]="{ 'border-top-1 surface-border': !first }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + item.image" [alt]="item.name" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3">
<div class="text-2xl font-bold text-900">{{ item.name }}</div>
<p-rating [(ngModel)]="item.rating" [readonly]="true" [cancel]="false"></p-rating>
<div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ item.category }}</span>
</span>
<p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)"></p-tag>
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">{{ '$' + item.price }}</span>
<button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'"></button>
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">{{'$'+ product.price }}</span>
<button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></button>
</div>
</div>
</div>
Expand All @@ -99,25 +101,27 @@ export class BasicDoc {
html: `
<div class="card">
<p-dataView #dv [value]="products">
<ng-template let-product pTemplate="listItem">
<div class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3">
<div class="text-2xl font-bold text-900">{{ product.name }}</div>
<p-rating [(ngModel)]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
<div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ product.category }}</span>
</span>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product)"></p-tag>
<ng-template pTemplate="list" let-products>
<div class="grid grid-nogutter">
<div class="col-12" *ngFor="let item of products; let first = first">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" [ngClass]="{ 'border-top-1 surface-border': !first }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + item.image" [alt]="item.name" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3">
<div class="text-2xl font-bold text-900">{{ item.name }}</div>
<p-rating [(ngModel)]="item.rating" [readonly]="true" [cancel]="false"></p-rating>
<div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ item.category }}</span>
</span>
<p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)"></p-tag>
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">{{ '$' + item.price }}</span>
<button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'"></button>
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">{{'$'+ product.price }}</span>
<button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></button>
</div>
</div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions src/app/showcase/doc/dataview/dataviewdoc.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {}
Loading

1 comment on commit bde1958

@vercel
Copy link

@vercel vercel bot commented on bde1958 Nov 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

primeng-ssr-test – ./

primeng-ssr-test-primeng-test.vercel.app
primeng-ssr-test-git-master-primeng-test.vercel.app
primeng-ssr-test.vercel.app

Please sign in to comment.