Skip to content

Commit

Permalink
Remove DataViewLayoutOptions, doc refactor, fixes #16338
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Sep 3, 2024
1 parent 530f019 commit 9751348
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 86 deletions.
47 changes: 3 additions & 44 deletions src/app/components/dataview/dataview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ import { PaginatorModule } from 'primeng/paginator';
import { BlockableUI } from 'primeng/api';
import { Subscription } from 'rxjs';
import { SpinnerIcon } from 'primeng/icons/spinner';
import { ThLargeIcon } from 'primeng/icons/thlarge';
import { BarsIcon } from 'primeng/icons/bars';
import { Nullable } from 'primeng/ts-helpers';
import {
DataViewLayoutChangeEvent,
Expand Down Expand Up @@ -594,48 +592,9 @@ export class DataView extends BaseComponent implements OnInit, AfterContentInit,
}
}

@Component({
selector: 'p-dataViewLayoutOptions',
template: `
<div [ngClass]="'p-dataview-layout-options p-selectbutton p-buttonset'" [ngStyle]="style" [class]="styleClass">
<button
type="button"
class="p-button p-button-icon-only"
[ngClass]="{ 'p-highlight': dv.layout === 'list' }"
(click)="changeLayout($event, 'list')"
(keydown.enter)="changeLayout($event, 'list')"
>
<BarsIcon *ngIf="!dv.listIconTemplate" />
<ng-template *ngTemplateOutlet="dv.listIconTemplate"></ng-template></button
><button
type="button"
class="p-button p-button-icon-only"
[ngClass]="{ 'p-highlight': dv.layout === 'grid' }"
(click)="changeLayout($event, 'grid')"
(keydown.enter)="changeLayout($event, 'grid')"
>
<ThLargeIcon *ngIf="!dv.gridIconTemplate" />
<ng-template *ngTemplateOutlet="dv.gridIconTemplate"></ng-template>
</button>
</div>
`,
encapsulation: ViewEncapsulation.None,
})
export class DataViewLayoutOptions {
@Input() style: { [klass: string]: any } | null | undefined;

@Input() styleClass: string | undefined;

constructor(public dv: DataView) {}

changeLayout(event: Event, layout: 'list' | 'grid') {
this.dv.changeLayout(layout);
event.preventDefault();
}
}
@NgModule({
imports: [CommonModule, SharedModule, PaginatorModule, SpinnerIcon, BarsIcon, ThLargeIcon],
exports: [DataView, SharedModule, DataViewLayoutOptions],
declarations: [DataView, DataViewLayoutOptions],
imports: [CommonModule, SharedModule, PaginatorModule, SpinnerIcon],
exports: [DataView, SharedModule],
declarations: [DataView],
})
export class DataViewModule {}
20 changes: 17 additions & 3 deletions src/app/showcase/doc/dataview/dataviewdoc.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { ButtonModule } from 'primeng/button';
import { DataViewModule } from 'primeng/dataview';
import { DropdownModule } from 'primeng/dropdown';
import { RatingModule } from 'primeng/rating';
import { TagModule } from 'primeng/tag';
import { AppDocModule } from '@layout/doc/app.doc.module';
Expand All @@ -18,10 +17,25 @@ import { SortingDoc } from './sortingdoc';
import { StyleDoc } from './styledoc';
import { LoadingDoc } from './loadingdoc';
import { SkeletonModule } from 'primeng/skeleton';
import { SelectButton } from 'primeng/selectbutton';
import { Select } from 'primeng/select';

@NgModule({
imports: [CommonModule, AppCodeModule, AppDocModule, DataViewModule, DropdownModule, ButtonModule, RouterModule, RatingModule, TagModule, FormsModule, SkeletonModule],
imports: [
CommonModule,
AppCodeModule,
SelectButton,
AppDocModule,
DataViewModule,
Select,
ButtonModule,
RouterModule,
RatingModule,
TagModule,
FormsModule,
SkeletonModule,
],
exports: [AppDocModule],
declarations: [ImportDoc, BasicDoc, PaginationDoc, SortingDoc, LayoutDoc, LoadingDoc, StyleDoc, AccessibilityDoc]
declarations: [ImportDoc, BasicDoc, PaginationDoc, SortingDoc, LayoutDoc, LoadingDoc, StyleDoc, AccessibilityDoc],
})
export class DataViewDocModule {}
56 changes: 32 additions & 24 deletions src/app/showcase/doc/dataview/layoutdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,20 @@ import { ProductService } from '@service/productservice';
template: `
<app-docsectiontext>
<p>
DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property. The
helper <i>DataViewLayoutOptions</i> 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.
DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property. The helper
<i>DataViewLayoutOptions</i> 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.
</p>
</app-docsectiontext>
<div class="card">
<p-dataView #dv [value]="products" [layout]="layout">
<ng-template pTemplate="header">
<div class="flex justify-end">
<p-dataViewLayoutOptions [layout]="layout" />
<p-selectButton [(ngModel)]="layout" [options]="options" [allowEmpty]="false">
<ng-template pTemplate="item" let-item>
<i class="pi " [ngClass]="{ 'pi-bars': item === 'list', 'pi-table': item === 'grid' }"></i>
</ng-template>
</p-selectButton>
</div>
</ng-template>
<ng-template pTemplate="list" let-products>
Expand All @@ -43,9 +47,7 @@ import { ProductService } from '@service/productservice';
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{
item.category
}}</span>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div>
<div class="bg-surface-100 p-1" style="border-radius: 30px">
Expand All @@ -59,7 +61,7 @@ import { ProductService } from '@service/productservice';
</div>
</div>
<div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold">{{ item.price | currency : 'USD' }}</span>
<span class="text-xl font-semibold">{{ item.price | currency: 'USD' }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2">
<button pButton icon="pi pi-heart" [outlined]="true"></button>
<button
Expand All @@ -77,21 +79,15 @@ import { ProductService } from '@service/productservice';
</ng-template>
<ng-template let-product pTemplate="grid" let-products>
<div class="grid grid-cols-12 gap-4">
<div
*ngFor="let product of products"
class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2"
>
<div *ngFor="let product of products" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
<div
class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col"
>
<div class="bg-surface-50 flex justify-center rounded p-4">
<div class="relative mx-auto">
<img
class="rounded w-full"
[src]="
'https://primefaces.org/cdn/primeng/images/demo/product/' +
product.image
"
[src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image"
[alt]="product.name"
style="max-width: 300px"
/>
Expand All @@ -117,17 +113,13 @@ import { ProductService } from '@service/productservice';
class="bg-surface-0 flex products-center gap-2 justify-center py-1 px-2"
style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"
>
<span class="text-surface-900 font-medium text-sm">{{
product.rating
}}</span>
<span class="text-surface-900 font-medium text-sm">{{ product.rating }}</span>
<i class="pi pi-star-fill text-yellow-500"></i>
</div>
</div>
</div>
<div class="flex flex-col gap-6 mt-6">
<span class="text-2xl font-semibold">{{
product.price | currency : 'USD'
}}</span>
<span class="text-2xl font-semibold">{{ product.price | currency: 'USD' }}</span>
<div class="flex gap-2">
<button
pButton
Expand All @@ -154,6 +146,8 @@ export class LayoutDoc {

products!: Product[];

options = ['list', 'grid'];

constructor(private productService: ProductService) {}

ngOnInit() {
Expand Down Expand Up @@ -182,7 +176,11 @@ export class LayoutDoc {
basic: `<p-dataView #dv [value]="products" [layout]="layout">
<ng-template pTemplate="header">
<div class="flex justify-end">
<p-dataViewLayoutOptions [layout]="layout" />
<p-selectButton [(ngModel)]="layout" [options]="options" [allowEmpty]="false">
<ng-template pTemplate="item" let-item>
<i class="pi " [ngClass]="{ 'pi-bars': item === 'list', 'pi-table': item === 'grid' }"></i>
</ng-template>
</p-selectButton>
</div>
</ng-template>
<ng-template pTemplate="list" let-products>
Expand Down Expand Up @@ -315,7 +313,11 @@ export class LayoutDoc {
<p-dataView #dv [value]="products" [layout]="layout">
<ng-template pTemplate="header">
<div class="flex justify-end">
<p-dataViewLayoutOptions [layout]="layout" />
<p-selectButton [(ngModel)]="layout" [options]="options" [allowEmpty]="false">
<ng-template pTemplate="item" let-item>
<i class="pi " [ngClass]="{ 'pi-bars': item === 'list', 'pi-table': item === 'grid' }"></i>
</ng-template>
</p-selectButton>
</div>
</ng-template>
<ng-template pTemplate="list" let-products>
Expand Down Expand Up @@ -452,7 +454,9 @@ import { DataViewModule } from 'primeng/dataview';
import { TagModule } from 'primeng/tag';
import { RatingModule } from 'primeng/rating';
import { ButtonModule } from 'primeng/button';
import { SelectButton } from 'primeng/selectbutton';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'data-view-layout-demo',
Expand All @@ -464,6 +468,8 @@ import { CommonModule } from '@angular/common';
RatingModule,
ButtonModule,
CommonModule,
SelectButton,
FormsModule
],
providers: [ProductService],
})
Expand All @@ -472,6 +478,8 @@ export class DataViewLayoutDemo {
products!: Product[];
options = ['list', 'grid'];
constructor(private productService: ProductService) {}
ngOnInit() {
Expand Down
Loading

0 comments on commit 9751348

Please sign in to comment.