Skip to content

Commit 6b3afd2

Browse files
tugcekucukoglutugcekucukoglu
authored
Merge pull request #8326 from primefaces/v11-dataview
V11 dataview
2 parents 0df1871 + 11ddc4f commit 6b3afd2

24 files changed

Lines changed: 983 additions & 0 deletions

File tree

‎apps/showcase/demo/dataview/basic-demo.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { ProductService } from '@/services/product.service';
2+
import Image from 'next/image';
3+
import { Button } from 'primereact/button';
4+
import { DataView } from 'primereact/dataview';
5+
import { Tag } from 'primereact/tag';
6+
import * as React from 'react';
7+
8+
interface Product {
9+
id: string;
10+
code: string;
11+
name: string;
12+
description: string;
13+
image: string;
14+
price: number;
15+
category: string;
16+
quantity: number;
17+
inventoryStatus: string;
18+
rating: number;
19+
}
20+
21+
export default function BasicDemo() {
22+
const [products, setProducts] = React.useState<Product[]>([]);
23+
24+
React.useEffect(() => {
25+
ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 5)));
26+
}, []);
27+
28+
const getSeverity = (product: Product) => {
29+
switch (product.inventoryStatus) {
30+
case 'INSTOCK':
31+
return 'success';
32+
33+
case 'LOWSTOCK':
34+
return 'warn';
35+
36+
case 'OUTOFSTOCK':
37+
return 'danger';
38+
39+
default:
40+
return undefined;
41+
}
42+
};
43+
44+
return (
45+
<div className="card">
46+
<DataView>
47+
<div className="flex flex-col">
48+
{products.map((product, index) => (
49+
<div key={index} className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}>
50+
<div className="md:w-40 relative">
51+
<Image className="mx-auto rounded w-full" src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`} alt={product.name} width={160} height={160} />
52+
<div className="absolute bg-black/70 rounded-border" style={{ left: '4px', top: '4px' }}>
53+
<Tag severity={getSeverity(product)}>
54+
<Tag.Label>{product.inventoryStatus}</Tag.Label>
55+
</Tag>
56+
</div>
57+
</div>
58+
<div className="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
59+
<div className="flex flex-row md:flex-col justify-between items-start gap-2">
60+
<div>
61+
<span className="font-medium text-surface-500 dark:text-surface-400 text-sm">{product.category}</span>
62+
<div className="text-lg font-medium mt-2">{product.name}</div>
63+
</div>
64+
<div className="bg-surface-100 p-1" style={{ borderRadius: '30px' }}>
65+
<div
66+
className="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2"
67+
style={{
68+
borderRadius: '30px',
69+
boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)'
70+
}}
71+
>
72+
<span className="text-surface-900 font-medium text-sm">{product.rating}</span>
73+
<i className="pi pi-star-fill text-yellow-500"></i>
74+
</div>
75+
</div>
76+
</div>
77+
<div className="flex flex-col md:items-end gap-8">
78+
<span className="text-xl font-semibold">${product.price}</span>
79+
<div className="flex flex-row-reverse md:flex-row gap-2">
80+
<Button variant="outlined">
81+
<i className="pi pi-heart"></i>
82+
</Button>
83+
<Button disabled={product.inventoryStatus === 'OUTOFSTOCK'} className="flex-auto md:flex-initial whitespace-nowrap">
84+
<i className="pi pi-shopping-cart"></i>
85+
Buy Now
86+
</Button>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
))}
92+
</div>
93+
</DataView>
94+
</div>
95+
);
96+
}

‎apps/showcase/demo/dataview/dataview-pt.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { ProductService } from '@/services/product.service';
2+
import { Button } from 'primereact/button';
3+
import { DataView } from 'primereact/dataview';
4+
import * as React from 'react';
5+
6+
interface Product {
7+
id: string;
8+
code: string;
9+
name: string;
10+
description: string;
11+
image: string;
12+
price: number;
13+
category: string;
14+
quantity: number;
15+
inventoryStatus: string;
16+
rating: number;
17+
}
18+
19+
export default function DataViewPTDemo() {
20+
const [products, setProducts] = React.useState<Product[]>([]);
21+
22+
React.useEffect(() => {
23+
ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 3)));
24+
}, []);
25+
26+
return (
27+
<DataView>
28+
<div className="flex flex-col">
29+
{products.map((product, index) => (
30+
<div key={index} className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}>
31+
<div className="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
32+
<div className="flex flex-row md:flex-col justify-between items-start gap-2">
33+
<div>
34+
<span className="font-medium text-surface-500 dark:text-surface-400 text-sm">{product.category}</span>
35+
<div className="text-lg font-medium mt-2">{product.name}</div>
36+
</div>
37+
<div className="bg-surface-100 p-1" style={{ borderRadius: '30px' }}>
38+
<div
39+
className="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2"
40+
style={{
41+
borderRadius: '30px',
42+
boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)'
43+
}}
44+
>
45+
<span className="text-surface-900 font-medium text-sm">{product.rating}</span>
46+
<i className="pi pi-star-fill text-yellow-500"></i>
47+
</div>
48+
</div>
49+
</div>
50+
<div className="flex flex-col md:items-end gap-8">
51+
<span className="text-xl font-semibold">${product.price}</span>
52+
<div className="flex flex-row-reverse md:flex-row gap-2">
53+
<Button variant="outlined">
54+
<i className="pi pi-heart"></i>
55+
</Button>
56+
<Button disabled={product.inventoryStatus === 'OUTOFSTOCK'} className="flex-auto md:flex-initial whitespace-nowrap">
57+
<i className="pi pi-shopping-cart"></i>
58+
Buy Now
59+
</Button>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
))}
65+
</div>
66+
</DataView>
67+
);
68+
}

‎apps/showcase/demo/dataview/layout-demo.tsx‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import { ProductService } from '@/services/product.service';
2+
import type { ToggleButtonGroupValueChangeEvent } from '@primereact/types/shared/togglebutton';
3+
import Image from 'next/image';
4+
import { Button } from 'primereact/button';
5+
import { DataView } from 'primereact/dataview';
6+
import { Tag } from 'primereact/tag';
7+
import { ToggleButton } from 'primereact/togglebutton';
8+
import * as React from 'react';
9+
10+
interface Product {
11+
id: string;
12+
code: string;
13+
name: string;
14+
description: string;
15+
image: string;
16+
price: number;
17+
category: string;
18+
quantity: number;
19+
inventoryStatus: string;
20+
rating: number;
21+
}
22+
23+
export default function LayoutDemo() {
24+
const [products, setProducts] = React.useState<Product[]>([]);
25+
const [value, setValue] = React.useState<string>('list');
26+
27+
React.useEffect(() => {
28+
ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 12)));
29+
}, []);
30+
31+
const getSeverity = (product: Product) => {
32+
switch (product.inventoryStatus) {
33+
case 'INSTOCK':
34+
return 'success';
35+
36+
case 'LOWSTOCK':
37+
return 'warn';
38+
39+
case 'OUTOFSTOCK':
40+
return 'danger';
41+
42+
default:
43+
return undefined;
44+
}
45+
};
46+
47+
const listLayout = () => {
48+
return (
49+
<div className="flex flex-col">
50+
{products.map((product, index) => (
51+
<div key={index} className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}>
52+
<div className="md:w-40 relative">
53+
<Image className="mx-auto rounded w-full" src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`} alt={product.name} width={160} height={160} />
54+
<div className="absolute bg-black/70 rounded-border" style={{ left: '4px', top: '4px' }}>
55+
<Tag severity={getSeverity(product)}>
56+
<Tag.Label>{product.inventoryStatus}</Tag.Label>
57+
</Tag>
58+
</div>
59+
</div>
60+
<div className="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
61+
<div className="flex flex-row md:flex-col justify-between items-start gap-2">
62+
<div>
63+
<span className="font-medium text-surface-500 dark:text-surface-400 text-sm">{product.category}</span>
64+
<div className="text-lg font-medium mt-2">{product.name}</div>
65+
</div>
66+
<div className="bg-surface-100 p-1" style={{ borderRadius: '30px' }}>
67+
<div
68+
className="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2"
69+
style={{
70+
borderRadius: '30px',
71+
boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)'
72+
}}
73+
>
74+
<span className="text-surface-900 font-medium text-sm">{product.rating}</span>
75+
<i className="pi pi-star-fill text-yellow-500"></i>
76+
</div>
77+
</div>
78+
</div>
79+
<div className="flex flex-col md:items-end gap-8">
80+
<span className="text-xl font-semibold">${product.price}</span>
81+
<div className="flex flex-row-reverse md:flex-row gap-2">
82+
<Button variant="outlined">
83+
<i className="pi pi-heart"></i>
84+
</Button>
85+
<Button disabled={product.inventoryStatus === 'OUTOFSTOCK'} className="flex-auto md:flex-initial whitespace-nowrap">
86+
<i className="pi pi-shopping-cart"></i>
87+
Buy Now
88+
</Button>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
))}
94+
</div>
95+
);
96+
};
97+
98+
const gridLayout = () => {
99+
return (
100+
<div className="grid grid-cols-12 gap-4">
101+
{products.map((product, index) => {
102+
return (
103+
<div key={index} className="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
104+
<div className="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
105+
<div className="bg-surface-50 flex justify-center rounded p-4">
106+
<div className="relative mx-auto">
107+
<Image src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`} alt={product.name} width={300} height={200} className="rounded" />
108+
<div className="absolute bg-black/70 rounded-border" style={{ left: '4px', top: '4px' }}>
109+
<Tag severity={getSeverity(product)}>
110+
<Tag.Label>{product.inventoryStatus}</Tag.Label>
111+
</Tag>
112+
</div>
113+
</div>
114+
</div>
115+
<div className="pt-6">
116+
<div className="flex flex-row justify-between items-start gap-2">
117+
<div>
118+
<span className="font-medium text-surface-500 dark:text-surface-400 text-sm">{product.category}</span>
119+
<div className="text-lg font-medium mt-1">{product.name}</div>
120+
</div>
121+
<div className="bg-surface-100 p-1" style={{ borderRadius: '30px' }}>
122+
<div
123+
className="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2"
124+
style={{
125+
borderRadius: '30px',
126+
boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)'
127+
}}
128+
>
129+
<span className="text-surface-900 font-medium text-sm">{product.rating}</span>
130+
<i className="pi pi-star-fill text-yellow-500"></i>
131+
</div>
132+
</div>
133+
</div>
134+
<div className="flex flex-col gap-6 mt-6">
135+
<span className="text-2xl font-semibold">${product.price}</span>
136+
<div className="flex gap-2">
137+
<Button disabled={product.inventoryStatus === 'OUTOFSTOCK'} className="flex-auto whitespace-nowrap">
138+
<i className="pi pi-shopping-cart"></i>
139+
Buy Now
140+
</Button>
141+
<Button variant="outlined">
142+
<i className="pi pi-heart"></i>
143+
</Button>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
);
150+
})}
151+
</div>
152+
);
153+
};
154+
155+
const list = listLayout();
156+
const grid = gridLayout();
157+
158+
return (
159+
<div className="card">
160+
<DataView>
161+
<div className="flex justify-end border-b border-surface-200 dark:border-surface-700 pb-4">
162+
<ToggleButton.Group value={value} onValueChange={(e: ToggleButtonGroupValueChangeEvent) => setValue(e.value as string)} allowEmpty={false}>
163+
<ToggleButton value="list">
164+
<ToggleButton.Indicator>
165+
<i className="pi pi-bars"></i>
166+
</ToggleButton.Indicator>
167+
</ToggleButton>
168+
<ToggleButton value="grid">
169+
<ToggleButton.Indicator>
170+
<i className="pi pi-table"></i>
171+
</ToggleButton.Indicator>
172+
</ToggleButton>
173+
</ToggleButton.Group>
174+
</div>
175+
{value === 'list' ? list : grid}
176+
</DataView>
177+
</div>
178+
);
179+
}

0 commit comments

Comments
 (0)