Initial commit
This commit is contained in:
dahoud
151
app/(main)/uikit/button/index.module.scss
Normal file
151
app/(main)/uikit/button/index.module.scss
Normal file
@@ -0,0 +1,151 @@
|
||||
.p-button{
|
||||
padding: 0%;
|
||||
&.google {
|
||||
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: right bottom;
|
||||
transition: background-position 0.5s ease-out;
|
||||
border-color: var(--purple-700);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
|
||||
|
||||
&:enabled:hover {
|
||||
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: left bottom;
|
||||
border-color: var(--purple-700);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px var(--purple-400);
|
||||
}
|
||||
}
|
||||
|
||||
&.twitter {
|
||||
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: right bottom;
|
||||
transition: background-position 0.5s ease-out;
|
||||
border-color: var(--blue-500);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
&:enabled:hover {
|
||||
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: left bottom;
|
||||
border-color: var(--blue-500);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px var(--blue-200);
|
||||
}
|
||||
}
|
||||
|
||||
&.discord {
|
||||
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: right bottom;
|
||||
transition: background-position 0.5s ease-out;
|
||||
border-color: var(--bluegray-800);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
&:enabled:hover {
|
||||
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: left bottom;
|
||||
border-color: var(--bluegray-800);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px var(--purple-500);
|
||||
}
|
||||
}
|
||||
|
||||
.template-button .p-button.twitter {
|
||||
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: right bottom;
|
||||
transition: background-position 0.5s ease-out;
|
||||
color: #fff;
|
||||
border-color: var(--blue-500);
|
||||
}
|
||||
.template-button .p-button.twitter:hover {
|
||||
background-position: left bottom;
|
||||
}
|
||||
.template-button .p-button.twitter i {
|
||||
background-color: var(--blue-500);
|
||||
}
|
||||
.template-button .p-button.twitter:focus {
|
||||
box-shadow: 0 0 0 1px var(--blue-200);
|
||||
}
|
||||
.template-button .p-button.slack {
|
||||
background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: right bottom;
|
||||
transition: background-position 0.5s ease-out;
|
||||
color: #fff;
|
||||
border-color: var(--orange-500);
|
||||
}
|
||||
.template-button .p-button.slack:hover {
|
||||
background-position: left bottom;
|
||||
}
|
||||
.template-button .p-button.slack i {
|
||||
background-color: var(--orange-500);
|
||||
}
|
||||
.template-button .p-button.slack:focus {
|
||||
box-shadow: 0 0 0 1px var(--orange-200);
|
||||
}
|
||||
.template-button .p-button.amazon {
|
||||
background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: right bottom;
|
||||
transition: background-position 0.5s ease-out;
|
||||
color: #000;
|
||||
border-color: var(--yellow-500);
|
||||
}
|
||||
.template-button .p-button.amazon:hover {
|
||||
background-position: left bottom;
|
||||
}
|
||||
.template-button .p-button.amazon i {
|
||||
background-color: var(--yellow-500);
|
||||
}
|
||||
.template-button .p-button.amazon:focus {
|
||||
box-shadow: 0 0 0 1px var(--yellow-200);
|
||||
}
|
||||
.template-button .p-button.discord {
|
||||
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: right bottom;
|
||||
transition: background-position 0.5s ease-out;
|
||||
color: #fff;
|
||||
border-color: var(--bluegray-800);
|
||||
}
|
||||
.template-button .p-button.discord:hover {
|
||||
background-position: left bottom;
|
||||
}
|
||||
.template-button .p-button.discord i {
|
||||
background-color: var(--bluegray-800);
|
||||
}
|
||||
.template-button .p-button.discord:focus {
|
||||
box-shadow: 0 0 0 1px var(--bluegray-500);
|
||||
}
|
||||
@media screen and (max-width: 960px) {
|
||||
-button .p-button {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
-button .p-button:not(.p-button-icon-only) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
-button .p-buttonset .p-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
248
app/(main)/uikit/button/page.tsx
Normal file
248
app/(main)/uikit/button/page.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
'use client';
|
||||
import React, { useState } from 'react';
|
||||
import { SplitButton } from 'primereact/splitbutton';
|
||||
import { Button } from 'primereact/button';
|
||||
import styles from './index.module.scss';
|
||||
import { classNames } from 'primereact/utils';
|
||||
|
||||
const ButtonDemo = () => {
|
||||
const [loading1, setLoading1] = useState(false);
|
||||
const [loading2, setLoading2] = useState(false);
|
||||
const [loading3, setLoading3] = useState(false);
|
||||
const [loading4, setLoading4] = useState(false);
|
||||
|
||||
const onLoadingClick1 = () => {
|
||||
setLoading1(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setLoading1(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const onLoadingClick2 = () => {
|
||||
setLoading2(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setLoading2(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const onLoadingClick3 = () => {
|
||||
setLoading3(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setLoading3(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const onLoadingClick4 = () => {
|
||||
setLoading4(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setLoading4(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const items = [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times'
|
||||
},
|
||||
{
|
||||
label: 'Home',
|
||||
icon: 'pi pi-home'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card">
|
||||
<h5>Default</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button label="Submit"></Button>
|
||||
<Button label="Disabled" disabled></Button>
|
||||
<Button label="Link" link></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Severities</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" severity="secondary" />
|
||||
<Button label="Success" severity="success" />
|
||||
<Button label="Info" severity="info" />
|
||||
<Button label="Warning" severity="warning" />
|
||||
<Button label="Help" severity="help" />
|
||||
<Button label="Danger" severity="danger" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Text</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button label="Primary" text />
|
||||
<Button label="Secondary" text severity="secondary" />
|
||||
<Button label="Success" text severity="success" />
|
||||
<Button label="Info" text severity="info" />
|
||||
<Button label="Warning" text severity="warning" />
|
||||
<Button label="Help" text severity="help" />
|
||||
<Button label="Danger" text severity="danger" />
|
||||
<Button label="Plain" text className="p-button-plain" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Outlined</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button label="Primary" outlined />
|
||||
<Button label="Secondary" outlined severity="secondary" />
|
||||
<Button label="Success" outlined severity="success" />
|
||||
<Button label="Info" outlined severity="info" />
|
||||
<Button label="Warning" outlined severity="warning" />
|
||||
<Button label="Help" outlined severity="help" />
|
||||
<Button label="Danger" outlined severity="danger" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Button Group</h5>
|
||||
<span className="p-buttonset flex">
|
||||
<Button label="Save" icon="pi pi-check" />
|
||||
<Button label="Delete" icon="pi pi-trash" />
|
||||
<Button label="Cancel" icon="pi pi-times" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>SplitButton</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<SplitButton label="Save" icon="pi pi-check" model={items} severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-check" model={items} severity="success"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-check" model={items} severity="info"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-check" model={items} severity="warning"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-check" model={items} severity="danger"></SplitButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Template</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button className={classNames(styles['p-button'], styles['google'])} aria-label="Google">
|
||||
<span className="flex align-items-center px-2 bg-purple-700 text-white">
|
||||
<i className="pi pi-google"></i>
|
||||
</span>
|
||||
<span className="px-3 py-2 flex align-items-center text-white">Google</span>
|
||||
</Button>
|
||||
<Button className={classNames(styles['p-button'], styles['twitter'])} aria-label="Twitter">
|
||||
<span className="flex align-items-center px-2 bg-blue-500 text-white">
|
||||
<i className="pi pi-twitter"></i>
|
||||
</span>
|
||||
<span className="px-3 py-2 flex align-items-center text-white">Twitter</span>
|
||||
</Button>
|
||||
<Button className={classNames(styles['p-button'], styles['discord'])} aria-label="Discord">
|
||||
<span className="flex align-items-center px-2 bg-bluegray-800 text-white">
|
||||
<i className="pi pi-discord"></i>
|
||||
</span>
|
||||
<span className="px-3 py-2 flex align-items-center text-white">Discord</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card">
|
||||
<h5>Icons</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button icon="pi pi-star-fill"></Button>
|
||||
<Button label="Bookmark" icon="pi pi-bookmark"></Button>
|
||||
<Button label="Bookmark" icon="pi pi-bookmark" iconPos="right"></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Raised</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button label="Primary" raised />
|
||||
<Button label="Secondary" raised severity="secondary" />
|
||||
<Button label="Success" raised severity="success" />
|
||||
<Button label="Info" raised severity="info" />
|
||||
<Button label="Warning" raised severity="warning" />
|
||||
<Button label="Help" raised severity="help" />
|
||||
<Button label="Danger" raised severity="danger" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Rounded</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button label="Primary" rounded />
|
||||
<Button label="Secondary" rounded severity="secondary" />
|
||||
<Button label="Success" rounded severity="success" />
|
||||
<Button label="Info" rounded severity="info" />
|
||||
<Button label="Warning" rounded severity="warning" />
|
||||
<Button label="Help" rounded severity="help" />
|
||||
<Button label="Danger" rounded severity="danger" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Rounded Icons</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button icon="pi pi-check" rounded />
|
||||
<Button icon="pi pi-bookmark" rounded severity="secondary" />
|
||||
<Button icon="pi pi-search" rounded severity="success" />
|
||||
<Button icon="pi pi-user" rounded severity="info" />
|
||||
<Button icon="pi pi-bell" rounded severity="warning" />
|
||||
<Button icon="pi pi-heart" rounded severity="help" />
|
||||
<Button icon="pi pi-times" rounded severity="danger" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Rounded Text</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button icon="pi pi-check" rounded text />
|
||||
<Button icon="pi pi-bookmark" rounded text severity="secondary" />
|
||||
<Button icon="pi pi-search" rounded text severity="success" />
|
||||
<Button icon="pi pi-user" rounded text severity="info" />
|
||||
<Button icon="pi pi-bell" rounded text severity="warning" />
|
||||
<Button icon="pi pi-heart" rounded text severity="help" />
|
||||
<Button icon="pi pi-times" rounded text severity="danger" />
|
||||
<Button icon="pi pi-filter" rounded text className="p-button-plain" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Rounded Outlined</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button icon="pi pi-check" rounded outlined />
|
||||
<Button icon="pi pi-bookmark" rounded outlined severity="secondary" />
|
||||
<Button icon="pi pi-search" rounded outlined severity="success" />
|
||||
<Button icon="pi pi-user" rounded outlined severity="info" />
|
||||
<Button icon="pi pi-bell" rounded outlined severity="warning" />
|
||||
<Button icon="pi pi-heart" rounded outlined severity="help" />
|
||||
<Button icon="pi pi-times" rounded outlined severity="danger" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Loading</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button label="Search" icon="pi pi-search" loading={loading1} onClick={onLoadingClick1} />
|
||||
<Button label="Search" icon="pi pi-search" iconPos="right" loading={loading2} onClick={onLoadingClick2} />
|
||||
<Button icon="pi pi-search" loading={loading3} onClick={onLoadingClick3} />
|
||||
<Button label="Search" loading={loading4} onClick={onLoadingClick4} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ButtonDemo;
|
||||
283
app/(main)/uikit/charts/page.tsx
Normal file
283
app/(main)/uikit/charts/page.tsx
Normal file
@@ -0,0 +1,283 @@
|
||||
'use client';
|
||||
import { ChartData, ChartOptions } from 'chart.js';
|
||||
import { Chart } from 'primereact/chart';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { LayoutContext } from '../../../../layout/context/layoutcontext';
|
||||
import type { ChartDataState, ChartOptionsState } from '@/types';
|
||||
|
||||
const ChartDemo = () => {
|
||||
const [options, setOptions] = useState<ChartOptionsState>({});
|
||||
const [data, setChartData] = useState<ChartDataState>({});
|
||||
const { layoutConfig } = useContext(LayoutContext);
|
||||
|
||||
useEffect(() => {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const textColor = documentStyle.getPropertyValue('--text-color') || '#495057';
|
||||
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary') || '#6c757d';
|
||||
const surfaceBorder = documentStyle.getPropertyValue('--surface-border') || '#dee2e6';
|
||||
const barData: ChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--primary-500') || '#2196f3',
|
||||
borderColor: documentStyle.getPropertyValue('--primary-500') || '#2196f3',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--primary-200') || '#a0d2fa',
|
||||
borderColor: documentStyle.getPropertyValue('--primary-200') || '#a0d2fa',
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const barOptions: ChartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary,
|
||||
font: {
|
||||
weight: '500'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const pieData: ChartData = {
|
||||
labels: ['A', 'B', 'C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [540, 325, 702],
|
||||
backgroundColor: [documentStyle.getPropertyValue('--indigo-500') || '#3f51b5', documentStyle.getPropertyValue('--purple-500') || '#9c27b0', documentStyle.getPropertyValue('--teal-500') || '#009688'],
|
||||
hoverBackgroundColor: [documentStyle.getPropertyValue('--indigo-400') || '#6372c3', documentStyle.getPropertyValue('--purple-400') || '#af50bf', documentStyle.getPropertyValue('--teal-400') || '#30aa9f']
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const pieOptions: ChartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const lineData: ChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--primary-500') || '#2196f3',
|
||||
borderColor: documentStyle.getPropertyValue('--primary-500') || '#2196f3',
|
||||
tension: 0.4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--primary-200') || '#a0d2fa',
|
||||
borderColor: documentStyle.getPropertyValue('--primary-200') || '#a0d2fa',
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const lineOptions: ChartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
},
|
||||
border: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const polarData: ChartData = {
|
||||
datasets: [
|
||||
{
|
||||
data: [11, 16, 7, 3],
|
||||
backgroundColor: [
|
||||
documentStyle.getPropertyValue('--indigo-500') || '#3f51b5',
|
||||
documentStyle.getPropertyValue('--purple-500') || '#9c27b0',
|
||||
documentStyle.getPropertyValue('--teal-500') || '#009688',
|
||||
documentStyle.getPropertyValue('--orange-500') || '#f57c00'
|
||||
],
|
||||
label: 'My dataset'
|
||||
}
|
||||
],
|
||||
labels: ['Indigo', 'Purple', 'Teal', 'Orange']
|
||||
};
|
||||
|
||||
const polarOptions: ChartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const radarData: ChartData = {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
borderColor: documentStyle.getPropertyValue('--indigo-400') || '#6372c3',
|
||||
pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400') || '#6372c3',
|
||||
pointBorderColor: documentStyle.getPropertyValue('--indigo-400') || '#6372c3',
|
||||
pointHoverBackgroundColor: textColor,
|
||||
pointHoverBorderColor: documentStyle.getPropertyValue('--indigo-400') || '#6372c3',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
borderColor: documentStyle.getPropertyValue('--purple-400') || '#af50bf',
|
||||
pointBackgroundColor: documentStyle.getPropertyValue('--purple-400') || '#af50bf',
|
||||
pointBorderColor: documentStyle.getPropertyValue('--purple-400') || '#af50bf',
|
||||
pointHoverBackgroundColor: textColor,
|
||||
pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400') || '#af50bf',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const radarOptions: ChartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: textColorSecondary
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
setOptions({
|
||||
barOptions,
|
||||
pieOptions,
|
||||
lineOptions,
|
||||
polarOptions,
|
||||
radarOptions
|
||||
});
|
||||
setChartData({
|
||||
barData,
|
||||
pieData,
|
||||
lineData,
|
||||
polarData,
|
||||
radarData
|
||||
});
|
||||
}, [layoutConfig]);
|
||||
|
||||
return (
|
||||
<div className="grid p-fluid">
|
||||
<div className="col-12 xl:col-6">
|
||||
<div className="card">
|
||||
<h5>Linear Chart</h5>
|
||||
<Chart type="line" data={data.lineData} options={options.lineOptions}></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 xl:col-6">
|
||||
<div className="card">
|
||||
<h5>Bar Chart</h5>
|
||||
<Chart type="bar" data={data.barData} options={options.barOptions}></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 xl:col-6">
|
||||
<div className="card flex flex-column align-items-center">
|
||||
<h5 className="text-left w-full">Pie Chart</h5>
|
||||
<Chart type="pie" data={data.pieData} options={options.pieOptions}></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 xl:col-6">
|
||||
<div className="card flex flex-column align-items-center">
|
||||
<h5 className="text-left w-full">Doughnut Chart</h5>
|
||||
<Chart type="doughnut" data={data.pieData} options={options.pieOptions}></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 xl:col-6">
|
||||
<div className="card flex flex-column align-items-center">
|
||||
<h5 className="text-left w-full">Polar Area Chart</h5>
|
||||
<Chart type="polarArea" data={data.polarData} options={options.polarOptions}></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 xl:col-6">
|
||||
<div className="card flex flex-column align-items-center">
|
||||
<h5 className="text-left w-full">Radar Chart</h5>
|
||||
<Chart type="radar" data={data.radarData} options={options.radarOptions}></Chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChartDemo;
|
||||
35
app/(main)/uikit/file/page.tsx
Normal file
35
app/(main)/uikit/file/page.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import React, { useRef } from 'react';
|
||||
import { FileUpload } from 'primereact/fileupload';
|
||||
import { Toast } from 'primereact/toast';
|
||||
|
||||
const FileDemo = () => {
|
||||
const toast = useRef<Toast | null>(null);
|
||||
|
||||
const onUpload = () => {
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Success',
|
||||
detail: 'File Uploaded',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<Toast ref={toast}></Toast>
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Advanced</h5>
|
||||
<FileUpload name="demo[]" url="/api/upload" onUpload={onUpload} multiple accept="image/*" maxFileSize={1000000} />
|
||||
|
||||
<h5>Basic</h5>
|
||||
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FileDemo;
|
||||
148
app/(main)/uikit/floatlabel/page.tsx
Normal file
148
app/(main)/uikit/floatlabel/page.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
'use client';
|
||||
import type { Demo } from '@/types';
|
||||
import { AutoComplete, AutoCompleteCompleteEvent } from 'primereact/autocomplete';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { Chips } from 'primereact/chips';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { InputMask } from 'primereact/inputmask';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { MultiSelect } from 'primereact/multiselect';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { CountryService } from '../../../../demo/service/CountryService';
|
||||
|
||||
const FloatLabelDemo = () => {
|
||||
const [countries, setCountries] = useState<Demo.Country[]>([]);
|
||||
const [filteredCountries, setFilteredCountries] = useState<Demo.Country[]>([]);
|
||||
const [value1, setValue1] = useState('');
|
||||
const [value2, setValue2] = useState(null);
|
||||
const [value3, setValue3] = useState('');
|
||||
const [value4, setValue4] = useState('');
|
||||
const [value5, setValue5] = useState<any>(null);
|
||||
const [value6, setValue6] = useState<any[]>([]);
|
||||
const [value7, setValue7] = useState('');
|
||||
const [value8, setValue8] = useState<number | null>(null);
|
||||
const [value9, setValue9] = useState('');
|
||||
const [value10, setValue10] = useState(null);
|
||||
const [value11, setValue11] = useState(null);
|
||||
const [value12, setValue12] = useState('');
|
||||
|
||||
const cities = [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
CountryService.getCountries().then((countries) => {
|
||||
setCountries(countries);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const searchCountry = (event: AutoCompleteCompleteEvent) => {
|
||||
const filtered = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < countries.length; i++) {
|
||||
const country = countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
setFilteredCountries(filtered);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<h5>Float Label</h5>
|
||||
<p>
|
||||
All input text components support floating labels by adding (<mark>.p-float-label</mark>) to wrapper class.
|
||||
</p>
|
||||
<div className="grid p-fluid mt-3">
|
||||
<div className="field col-12 md:col-4">
|
||||
<span className="p-float-label">
|
||||
<InputText type="text" id="inputtext" value={value1} onChange={(e) => setValue1(e.target.value)} />
|
||||
<label htmlFor="inputtext">InputText</label>
|
||||
</span>
|
||||
</div>
|
||||
<div className="field col-12 md:col-4">
|
||||
<span className="p-float-label">
|
||||
<AutoComplete id="autocomplete" value={value2} onChange={(e) => setValue2(e.value)} suggestions={filteredCountries} completeMethod={searchCountry} field="name"></AutoComplete>
|
||||
<label htmlFor="autocomplete">AutoComplete</label>
|
||||
</span>
|
||||
</div>
|
||||
<div className="field col-12 md:col-4">
|
||||
<span className="p-float-label p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText id="lefticon" value={value3} onChange={(e) => setValue3(e.target.value)} />
|
||||
<label htmlFor="lefticon">Left Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div className="field col-12 md:col-4">
|
||||
<span className="p-float-label p-input-icon-right">
|
||||
<i className="pi pi-spin pi-spinner" />
|
||||
<InputText id="righticon" value={value4} onChange={(e) => setValue4(e.target.value)} />
|
||||
<label htmlFor="righticon">Right Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div className="field col-12 md:col-4">
|
||||
<span className="p-float-label">
|
||||
<Calendar inputId="calendar" value={value5} onChange={(e) => setValue5(e.value ?? '')}></Calendar>
|
||||
<label htmlFor="calendar">Calendar</label>
|
||||
</span>
|
||||
</div>
|
||||
<div className="field col-12 md:col-4">
|
||||
<span className="p-float-label">
|
||||
<Chips inputId="chips" value={value6} onChange={(e) => setValue6(e.value ?? [])}></Chips>
|
||||
<label htmlFor="chips">Chips</label>
|
||||
</span>
|
||||
</div>
|
||||
<div className="field col-12 md:col-4">
|
||||
<span className="p-float-label">
|
||||
<InputMask id="inputmask" mask="99/99/9999" value={value7} onChange={(e) => setValue7(e.value ?? '')}></InputMask>
|
||||
<label htmlFor="inputmask">InputMask</label>
|
||||
</span>
|
||||
</div>
|
||||
<div className="field col-12 md:col-4">
|
||||
<span className="p-float-label">
|
||||
<InputNumber id="inputnumber" value={value8} onValueChange={(e) => setValue8(e.target.value ?? null)}></InputNumber>
|
||||
<label htmlFor="inputnumber">InputNumber</label>
|
||||
</span>
|
||||
</div>
|
||||
<div className="field col-12 md:col-4">
|
||||
<div className="p-inputgroup">
|
||||
<span className="p-inputgroup-addon">
|
||||
<i className="pi pi-user"></i>
|
||||
</span>
|
||||
<span className="p-float-label">
|
||||
<InputText type="text" id="inputgroup" value={value9} onChange={(e) => setValue9(e.target.value)} />
|
||||
<label htmlFor="inputgroup">InputGroup</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field col-12 md:col-4">
|
||||
<span className="p-float-label">
|
||||
<Dropdown id="dropdown" options={cities} value={value10} onChange={(e) => setValue10(e.value)} optionLabel="name"></Dropdown>
|
||||
<label htmlFor="dropdown">Dropdown</label>
|
||||
</span>
|
||||
</div>
|
||||
<div className="field col-12 md:col-4">
|
||||
<span className="p-float-label">
|
||||
<MultiSelect id="multiselect" options={cities} value={value11} onChange={(e) => setValue11(e.value)} optionLabel="name"></MultiSelect>
|
||||
<label htmlFor="multiselect">MultiSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div className="field col-12 md:col-4">
|
||||
<span className="p-float-label">
|
||||
<InputTextarea id="textarea" rows={3} value={value12} onChange={(e) => setValue12(e.target.value)}></InputTextarea>
|
||||
<label htmlFor="textarea">Textarea</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FloatLabelDemo;
|
||||
148
app/(main)/uikit/formlayout/page.tsx
Normal file
148
app/(main)/uikit/formlayout/page.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Button } from 'primereact/button';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
|
||||
interface DropdownItem {
|
||||
name: string;
|
||||
code: string;
|
||||
}
|
||||
|
||||
const FormLayoutDemo = () => {
|
||||
const [dropdownItem, setDropdownItem] = useState<DropdownItem | null>(null);
|
||||
const dropdownItems: DropdownItem[] = useMemo(
|
||||
() => [
|
||||
{ name: 'Option 1', code: 'Option 1' },
|
||||
{ name: 'Option 2', code: 'Option 2' },
|
||||
{ name: 'Option 3', code: 'Option 3' }
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setDropdownItem(dropdownItems[0]);
|
||||
}, [dropdownItems]);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card p-fluid">
|
||||
<h5>Vertical</h5>
|
||||
<div className="field">
|
||||
<label htmlFor="name1">Name</label>
|
||||
<InputText id="name1" type="text" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="email1">Email</label>
|
||||
<InputText id="email1" type="text" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="age1">Age</label>
|
||||
<InputText id="age1" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card p-fluid">
|
||||
<h5>Vertical Grid</h5>
|
||||
<div className="formgrid grid">
|
||||
<div className="field col">
|
||||
<label htmlFor="name2">Name</label>
|
||||
<InputText id="name2" type="text" />
|
||||
</div>
|
||||
<div className="field col">
|
||||
<label htmlFor="email2">Email</label>
|
||||
<InputText id="email2" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card p-fluid">
|
||||
<h5>Horizontal</h5>
|
||||
<div className="field grid">
|
||||
<label htmlFor="name3" className="col-12 mb-2 md:col-2 md:mb-0">
|
||||
Name
|
||||
</label>
|
||||
<div className="col-12 md:col-10">
|
||||
<InputText id="name3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field grid">
|
||||
<label htmlFor="email3" className="col-12 mb-2 md:col-2 md:mb-0">
|
||||
Email
|
||||
</label>
|
||||
<div className="col-12 md:col-10">
|
||||
<InputText id="email3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Inline</h5>
|
||||
<div className="formgroup-inline">
|
||||
<div className="field">
|
||||
<label htmlFor="firstname1" className="p-sr-only">
|
||||
Firstname
|
||||
</label>
|
||||
<InputText id="firstname1" type="text" placeholder="Firstname" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="lastname1" className="p-sr-only">
|
||||
Lastname
|
||||
</label>
|
||||
<InputText id="lastname1" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
<Button label="Submit"></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Help Text</h5>
|
||||
<div className="field p-fluid">
|
||||
<label htmlFor="username">Username</label>
|
||||
<InputText id="username" type="text" />
|
||||
<small>Enter your username to reset your password.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Advanced</h5>
|
||||
<div className="p-fluid formgrid grid">
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="firstname2">Firstname</label>
|
||||
<InputText id="firstname2" type="text" />
|
||||
</div>
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="lastname2">Lastname</label>
|
||||
<InputText id="lastname2" type="text" />
|
||||
</div>
|
||||
<div className="field col-12">
|
||||
<label htmlFor="address">Address</label>
|
||||
<InputTextarea id="address" rows={4} />
|
||||
</div>
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="city">City</label>
|
||||
<InputText id="city" type="text" />
|
||||
</div>
|
||||
<div className="field col-12 md:col-3">
|
||||
<label htmlFor="state">State</label>
|
||||
<Dropdown id="state" value={dropdownItem} onChange={(e) => setDropdownItem(e.value)} options={dropdownItems} optionLabel="name" placeholder="Select One"></Dropdown>
|
||||
</div>
|
||||
<div className="field col-12 md:col-3">
|
||||
<label htmlFor="zip">Zip</label>
|
||||
<InputText id="zip" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormLayoutDemo;
|
||||
352
app/(main)/uikit/input/page.tsx
Normal file
352
app/(main)/uikit/input/page.tsx
Normal file
@@ -0,0 +1,352 @@
|
||||
'use client';
|
||||
import type { Demo, Page } from '@/types';
|
||||
import { AutoComplete, AutoCompleteCompleteEvent } from 'primereact/autocomplete';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { Checkbox, CheckboxChangeEvent } from 'primereact/checkbox';
|
||||
import { Chips } from 'primereact/chips';
|
||||
import { ColorPicker, ColorPickerHSBType, ColorPickerRGBType } from 'primereact/colorpicker';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { InputSwitch } from 'primereact/inputswitch';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { Knob } from 'primereact/knob';
|
||||
import { ListBox } from 'primereact/listbox';
|
||||
import { MultiSelect } from 'primereact/multiselect';
|
||||
import { RadioButton } from 'primereact/radiobutton';
|
||||
import { Rating } from 'primereact/rating';
|
||||
import { SelectButton } from 'primereact/selectbutton';
|
||||
import { Slider } from 'primereact/slider';
|
||||
import { ToggleButton } from 'primereact/togglebutton';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { CountryService } from '../../../../demo/service/CountryService';
|
||||
|
||||
interface InputValue {
|
||||
name: string;
|
||||
code: string;
|
||||
}
|
||||
|
||||
const InputDemo: Page = () => {
|
||||
const [floatValue, setFloatValue] = useState('');
|
||||
const [autoValue, setAutoValue] = useState<Demo.Country[]>([]);
|
||||
const [selectedAutoValue, setSelectedAutoValue] = useState(null);
|
||||
const [autoFilteredValue, setAutoFilteredValue] = useState<Demo.Country[]>([]);
|
||||
const [calendarValue, setCalendarValue] = useState<any>(null);
|
||||
const [inputNumberValue, setInputNumberValue] = useState<number | null>(null);
|
||||
const [chipsValue, setChipsValue] = useState<any[]>([]);
|
||||
const [sliderValue, setSliderValue] = useState<number | string>('');
|
||||
const [ratingValue, setRatingValue] = useState<number | null>(null);
|
||||
const [colorValue, setColorValue] = useState<string | ColorPickerRGBType | ColorPickerHSBType>('1976D2');
|
||||
const [knobValue, setKnobValue] = useState(20);
|
||||
const [radioValue, setRadioValue] = useState(null);
|
||||
const [checkboxValue, setCheckboxValue] = useState<string[]>([]);
|
||||
const [switchValue, setSwitchValue] = useState(false);
|
||||
const [listboxValue, setListboxValue] = useState(null);
|
||||
const [dropdownValue, setDropdownValue] = useState(null);
|
||||
const [multiselectValue, setMultiselectValue] = useState(null);
|
||||
const [toggleValue, setToggleValue] = useState(false);
|
||||
const [selectButtonValue1, setSelectButtonValue1] = useState(null);
|
||||
const [selectButtonValue2, setSelectButtonValue2] = useState(null);
|
||||
const [inputGroupValue, setInputGroupValue] = useState(false);
|
||||
|
||||
const listboxValues: InputValue[] = [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
];
|
||||
|
||||
const dropdownValues: InputValue[] = [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
];
|
||||
|
||||
const multiselectValues: InputValue[] = [
|
||||
{ name: 'Australia', code: 'AU' },
|
||||
{ name: 'Brazil', code: 'BR' },
|
||||
{ name: 'China', code: 'CN' },
|
||||
{ name: 'Egypt', code: 'EG' },
|
||||
{ name: 'France', code: 'FR' },
|
||||
{ name: 'Germany', code: 'DE' },
|
||||
{ name: 'India', code: 'IN' },
|
||||
{ name: 'Japan', code: 'JP' },
|
||||
{ name: 'Spain', code: 'ES' },
|
||||
{ name: 'United States', code: 'US' }
|
||||
];
|
||||
|
||||
const selectButtonValues1: InputValue[] = [
|
||||
{ name: 'Option 1', code: 'O1' },
|
||||
{ name: 'Option 2', code: 'O2' },
|
||||
{ name: 'Option 3', code: 'O3' }
|
||||
];
|
||||
|
||||
const selectButtonValues2: InputValue[] = [
|
||||
{ name: 'Option 1', code: 'O1' },
|
||||
{ name: 'Option 2', code: 'O2' },
|
||||
{ name: 'Option 3', code: 'O3' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
CountryService.getCountries().then((data) => setAutoValue(data));
|
||||
}, []);
|
||||
|
||||
const searchCountry = (event: AutoCompleteCompleteEvent) => {
|
||||
setTimeout(() => {
|
||||
if (!event.query.trim().length) {
|
||||
setAutoFilteredValue([...autoValue]);
|
||||
} else {
|
||||
setAutoFilteredValue(
|
||||
autoValue.filter((country) => {
|
||||
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
|
||||
})
|
||||
);
|
||||
}
|
||||
}, 250);
|
||||
};
|
||||
|
||||
const onCheckboxChange = (e: CheckboxChangeEvent) => {
|
||||
let selectedValue = [...checkboxValue];
|
||||
if (e.checked) selectedValue.push(e.value);
|
||||
else selectedValue.splice(selectedValue.indexOf(e.value), 1);
|
||||
|
||||
setCheckboxValue(selectedValue);
|
||||
};
|
||||
|
||||
const itemTemplate = (option: InputValue) => {
|
||||
return (
|
||||
<div className="flex align-items-center">
|
||||
<img
|
||||
alt={option.name}
|
||||
src={`/demo/images/flag/flag_placeholder.png`}
|
||||
onError={(e) => (e.currentTarget.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
|
||||
className={`flag flag-${option.code.toLowerCase()}`}
|
||||
style={{ width: '21px' }}
|
||||
/>
|
||||
<span className="ml-2">{option.name}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid p-fluid input-demo">
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card">
|
||||
<h5>InputText</h5>
|
||||
<div className="grid formgrid">
|
||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<InputText type="text" placeholder="Default"></InputText>
|
||||
</div>
|
||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<InputText type="text" placeholder="Disabled" disabled></InputText>
|
||||
</div>
|
||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<InputText type="text" placeholder="Invalid" className="p-invalid" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<div className="grid formgrid">
|
||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-user" />
|
||||
<InputText type="text" placeholder="Username" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span className="p-input-icon-right">
|
||||
<InputText type="text" placeholder="Search" />
|
||||
<i className="pi pi-search" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span className="p-input-icon-left p-input-icon-right">
|
||||
<i className="pi pi-user" />
|
||||
<InputText type="text" placeholder="Search" />
|
||||
<i className="pi pi-search" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Float Label</h5>
|
||||
<span className="p-float-label">
|
||||
<InputText id="username" type="text" value={floatValue} onChange={(e) => setFloatValue(e.target.value)} />
|
||||
<label htmlFor="username">Username</label>
|
||||
</span>
|
||||
|
||||
<h5>Textarea</h5>
|
||||
<InputTextarea placeholder="Your Message" rows={5} cols={30} />
|
||||
|
||||
<h5>AutoComplete</h5>
|
||||
<AutoComplete placeholder="Search" id="dd" dropdown multiple value={selectedAutoValue} onChange={(e) => setSelectedAutoValue(e.value)} suggestions={autoFilteredValue} completeMethod={searchCountry} field="name" />
|
||||
|
||||
<h5>Calendar</h5>
|
||||
<Calendar showIcon showButtonBar value={calendarValue} onChange={(e) => setCalendarValue(e.value ?? null)} />
|
||||
|
||||
<h5>InputNumber</h5>
|
||||
<InputNumber value={inputNumberValue} onValueChange={(e) => setInputNumberValue(e.value ?? null)} showButtons mode="decimal"></InputNumber>
|
||||
|
||||
<h5>Chips</h5>
|
||||
<Chips value={chipsValue} onChange={(e) => setChipsValue(e.value ?? [])} />
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<h5>Slider</h5>
|
||||
<InputText value={sliderValue as string} onChange={(e) => setSliderValue(parseInt(e.target.value, 10))} />
|
||||
<Slider value={sliderValue as number} onChange={(e) => setSliderValue(e.value as number)} />
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<h5>Rating</h5>
|
||||
<Rating value={ratingValue as number} onChange={(e) => setRatingValue(e.value ?? 0)} />
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<h5>ColorPicker</h5>
|
||||
<ColorPicker value={colorValue} onChange={(e) => setColorValue(e.value ?? '')} style={{ width: '2rem' }} />
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<h5>Knob</h5>
|
||||
<Knob value={knobValue} valueTemplate={'{value}%'} onChange={(e) => setKnobValue(e.value)} step={10} min={-50} max={50} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card">
|
||||
<h5>RadioButton</h5>
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field-radiobutton">
|
||||
<RadioButton inputId="option1" name="option" value="Chicago" checked={radioValue === 'Chicago'} onChange={(e) => setRadioValue(e.value)} />
|
||||
<label htmlFor="option1">Chicago</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field-radiobutton">
|
||||
<RadioButton inputId="option2" name="option" value="Los Angeles" checked={radioValue === 'Los Angeles'} onChange={(e) => setRadioValue(e.value)} />
|
||||
<label htmlFor="option2">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field-radiobutton">
|
||||
<RadioButton inputId="option3" name="option" value="New York" checked={radioValue === 'New York'} onChange={(e) => setRadioValue(e.value)} />
|
||||
<label htmlFor="option3">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Checkbox</h5>
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field-checkbox">
|
||||
<Checkbox inputId="checkOption1" name="option" value="Chicago" checked={checkboxValue.indexOf('Chicago') !== -1} onChange={onCheckboxChange} />
|
||||
<label htmlFor="checkOption1">Chicago</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field-checkbox">
|
||||
<Checkbox inputId="checkOption2" name="option" value="Los Angeles" checked={checkboxValue.indexOf('Los Angeles') !== -1} onChange={onCheckboxChange} />
|
||||
<label htmlFor="checkOption2">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field-checkbox">
|
||||
<Checkbox inputId="checkOption3" name="option" value="New York" checked={checkboxValue.indexOf('New York') !== -1} onChange={onCheckboxChange} />
|
||||
<label htmlFor="checkOption3">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Input Switch</h5>
|
||||
<InputSwitch checked={switchValue} onChange={(e) => setSwitchValue(e.value ?? false)} />
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>Listbox</h5>
|
||||
<ListBox value={listboxValue} onChange={(e) => setListboxValue(e.value)} options={listboxValues} optionLabel="name" filter />
|
||||
|
||||
<h5>Dropdown</h5>
|
||||
<Dropdown value={dropdownValue} onChange={(e) => setDropdownValue(e.value)} options={dropdownValues} optionLabel="name" placeholder="Select" />
|
||||
|
||||
<h5>MultiSelect</h5>
|
||||
<MultiSelect
|
||||
value={multiselectValue}
|
||||
onChange={(e) => setMultiselectValue(e.value)}
|
||||
options={multiselectValues}
|
||||
itemTemplate={itemTemplate}
|
||||
optionLabel="name"
|
||||
placeholder="Select Countries"
|
||||
filter
|
||||
className="multiselect-custom"
|
||||
display="chip"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h5>ToggleButton</h5>
|
||||
<ToggleButton checked={toggleValue} onChange={(e) => setToggleValue(e.value)} onLabel="Yes" offLabel="No" />
|
||||
|
||||
<h5>SelectButton</h5>
|
||||
<SelectButton value={selectButtonValue1} onChange={(e) => setSelectButtonValue1(e.value)} options={selectButtonValues1} optionLabel="name" />
|
||||
|
||||
<h5>SelectButton - Multiple</h5>
|
||||
<SelectButton value={selectButtonValue2} onChange={(e) => setSelectButtonValue2(e.value)} options={selectButtonValues2} optionLabel="name" multiple />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Input Groups</h5>
|
||||
<div className="grid p-fluid">
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="p-inputgroup">
|
||||
<span className="p-inputgroup-addon">
|
||||
<i className="pi pi-user"></i>
|
||||
</span>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="p-inputgroup">
|
||||
<span className="p-inputgroup-addon">
|
||||
<i className="pi pi-shopping-cart"></i>
|
||||
</span>
|
||||
<span className="p-inputgroup-addon">
|
||||
<i className="pi pi-globe"></i>
|
||||
</span>
|
||||
<InputText placeholder="Price" />
|
||||
<span className="p-inputgroup-addon">$</span>
|
||||
<span className="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="p-inputgroup">
|
||||
<Button label="Search" />
|
||||
<InputText placeholder="Keyword" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="p-inputgroup">
|
||||
<span className="p-inputgroup-addon p-inputgroup-addon-checkbox">
|
||||
<Checkbox checked={inputGroupValue} onChange={(e) => setInputGroupValue(e.checked ?? false)} />
|
||||
</span>
|
||||
<InputText placeholder="Confirm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InputDemo;
|
||||
117
app/(main)/uikit/invalidstate/page.tsx
Normal file
117
app/(main)/uikit/invalidstate/page.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
'use client';
|
||||
|
||||
import type { Demo } from '@/types';
|
||||
import { AutoComplete, AutoCompleteCompleteEvent } from 'primereact/autocomplete';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { Chips } from 'primereact/chips';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { InputMask } from 'primereact/inputmask';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { MultiSelect } from 'primereact/multiselect';
|
||||
import { Password } from 'primereact/password';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { CountryService } from '../../../../demo/service/CountryService';
|
||||
|
||||
const InvalidStateDemo = () => {
|
||||
const [countries, setCountries] = useState<Demo.Country[]>([]);
|
||||
const [filteredCountries, setFilteredCountries] = useState<Demo.Country[]>([]);
|
||||
const [value1, setValue1] = useState('');
|
||||
const [value2, setValue2] = useState(null);
|
||||
const [value3, setValue3] = useState(null);
|
||||
const [value4, setValue4] = useState<any[]>([]);
|
||||
const [value5, setValue5] = useState('');
|
||||
const [value6, setValue6] = useState('');
|
||||
const [value7, setValue7] = useState(0);
|
||||
const [value8, setValue8] = useState(null);
|
||||
const [value9, setValue9] = useState(null);
|
||||
const [value10, setValue10] = useState('');
|
||||
|
||||
const cities = [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
CountryService.getCountries().then((countries) => {
|
||||
setCountries(countries);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const searchCountry = (event: AutoCompleteCompleteEvent) => {
|
||||
// in a real application, make a request to a remote url with the query and
|
||||
// return filtered results, for demo we filter at client side
|
||||
const filtered = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < countries.length; i++) {
|
||||
const country = countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
setFilteredCountries(filtered);
|
||||
};
|
||||
|
||||
const onCalendarChange = (e: any) => {
|
||||
setValue3(e.value!);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<h5>Invalid State</h5>
|
||||
<div className="grid p-fluid">
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field mt-3">
|
||||
<label htmlFor="inputtext">InputText</label>
|
||||
<InputText type="text" id="inputtext" value={value1} onChange={(e) => setValue1(e.target.value)} className="p-invalid" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="autocomplete">AutoComplete</label>
|
||||
<AutoComplete id="autocomplete" value={value2} onChange={(e) => setValue2(e.value)} suggestions={filteredCountries} completeMethod={searchCountry} field="name" className="p-invalid" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="calendar">Calendar</label>
|
||||
<Calendar inputId="calendar" value={value3} onChange={onCalendarChange} className="p-invalid" showIcon />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="chips">Chips</label>
|
||||
<Chips inputId="chips" value={value4} onChange={(e) => setValue4(e.value ?? [])} className="p-invalid" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="password">Password</label>
|
||||
<Password inputId="password" value={value5} onChange={(e) => setValue5(e.target.value)} className="p-invalid" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field mt-3">
|
||||
<label htmlFor="inputmask">InputMask</label>
|
||||
<InputMask id="inputmask" mask="99/99/9999" value={value6} onChange={(e) => setValue6(e.value ?? '')} className="p-invalid" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="inputnumber">InputNumber</label>
|
||||
<InputNumber id="inputnumber" value={value7} onValueChange={(e) => setValue7(e.target.value ?? 0)} className="p-invalid" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="dropdown">Dropdown</label>
|
||||
<Dropdown id="dropdown" options={cities} value={value8} onChange={(e) => setValue8(e.value)} optionLabel="name" className="p-invalid" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="multiselect">MultiSelect</label>
|
||||
<MultiSelect id="multiselect" options={cities} value={value9} onChange={(e) => setValue9(e.value)} optionLabel="name" className="p-invalid" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="textarea">Textarea</label>
|
||||
<InputTextarea id="textarea" rows={3} cols={30} value={value10} onChange={(e) => setValue10(e.target.value)} className="p-invalid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InvalidStateDemo;
|
||||
192
app/(main)/uikit/list/page.tsx
Normal file
192
app/(main)/uikit/list/page.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
|
||||
import { Rating } from 'primereact/rating';
|
||||
import { PickList } from 'primereact/picklist';
|
||||
import { OrderList } from 'primereact/orderlist';
|
||||
import { ProductService } from '../../../../demo/service/ProductService';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import type { Demo } from '@/types';
|
||||
|
||||
const ListDemo = () => {
|
||||
const listValue = [
|
||||
{ name: 'San Francisco', code: 'SF' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Paris', code: 'PRS' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Berlin', code: 'BRL' },
|
||||
{ name: 'Barcelona', code: 'BRC' },
|
||||
{ name: 'Rome', code: 'RM' }
|
||||
];
|
||||
|
||||
const [picklistSourceValue, setPicklistSourceValue] = useState(listValue);
|
||||
const [picklistTargetValue, setPicklistTargetValue] = useState([]);
|
||||
const [orderlistValue, setOrderlistValue] = useState(listValue);
|
||||
const [dataViewValue, setDataViewValue] = useState<Demo.Product[]>([]);
|
||||
const [globalFilterValue, setGlobalFilterValue] = useState('');
|
||||
const [filteredValue, setFilteredValue] = useState<Demo.Product[] | null>(null);
|
||||
const [layout, setLayout] = useState<'grid' | 'list' | (string & Record<string, unknown>)>('grid');
|
||||
const [sortKey, setSortKey] = useState(null);
|
||||
const [sortOrder, setSortOrder] = useState<0 | 1 | -1 | null>(null);
|
||||
const [sortField, setSortField] = useState('');
|
||||
|
||||
const sortOptions = [
|
||||
{ label: 'Price High to Low', value: '!price' },
|
||||
{ label: 'Price Low to High', value: 'price' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
ProductService.getProducts().then((data) => setDataViewValue(data));
|
||||
setGlobalFilterValue('');
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
ProductService.getProducts().then((data) => setDataViewValue(data));
|
||||
setGlobalFilterValue('');
|
||||
}, []);
|
||||
|
||||
const onFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setGlobalFilterValue(value);
|
||||
if (value.length === 0) {
|
||||
setFilteredValue(null);
|
||||
} else {
|
||||
const filtered = dataViewValue?.filter((product) => {
|
||||
const productNameLowercase = product.name.toLowerCase();
|
||||
const searchValueLowercase = value.toLowerCase();
|
||||
return productNameLowercase.includes(searchValueLowercase);
|
||||
});
|
||||
|
||||
setFilteredValue(filtered);
|
||||
}
|
||||
};
|
||||
|
||||
const onSortChange = (event: DropdownChangeEvent) => {
|
||||
const value = event.value;
|
||||
|
||||
if (value.indexOf('!') === 0) {
|
||||
setSortOrder(-1);
|
||||
setSortField(value.substring(1, value.length));
|
||||
setSortKey(value);
|
||||
} else {
|
||||
setSortOrder(1);
|
||||
setSortField(value);
|
||||
setSortKey(value);
|
||||
}
|
||||
};
|
||||
|
||||
const dataViewHeader = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between gap-2">
|
||||
<Dropdown value={sortKey} options={sortOptions} optionLabel="label" placeholder="Sort By Price" onChange={onSortChange} />
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText value={globalFilterValue} onChange={onFilter} placeholder="Search by Name" />
|
||||
</span>
|
||||
<DataViewLayoutOptions layout={layout} onChange={(e) => setLayout(e.value)} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const dataviewListItem = (data: Demo.Product) => {
|
||||
return (
|
||||
<div className="col-12">
|
||||
<div className="flex flex-column md:flex-row align-items-center p-3 w-full">
|
||||
<img src={`/demo/images/product/${data.image}`} alt={data.name} className="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
|
||||
<div className="flex-1 flex flex-column align-items-center text-center md:text-left">
|
||||
<div className="font-bold text-2xl">{data.name}</div>
|
||||
<div className="mb-2">{data.description}</div>
|
||||
<Rating value={data.rating} readOnly cancel={false} className="mb-2"></Rating>
|
||||
<div className="flex align-items-center">
|
||||
<i className="pi pi-tag mr-2"></i>
|
||||
<span className="font-semibold">{data.category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0">
|
||||
<span className="text-2xl font-semibold mb-2 align-self-center md:align-self-end">${data.price}</span>
|
||||
<Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} size="small" className="mb-2"></Button>
|
||||
<span className={`product-badge status-${data.inventoryStatus?.toLowerCase()}`}>{data.inventoryStatus}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const dataviewGridItem = (data: Demo.Product) => {
|
||||
return (
|
||||
<div className="col-12 lg:col-4">
|
||||
<div className="card m-3 border-1 surface-border">
|
||||
<div className="flex flex-wrap gap-2 align-items-center justify-content-between mb-2">
|
||||
<div className="flex align-items-center">
|
||||
<i className="pi pi-tag mr-2" />
|
||||
<span className="font-semibold">{data.category}</span>
|
||||
</div>
|
||||
<span className={`product-badge status-${data.inventoryStatus?.toLowerCase()}`}>{data.inventoryStatus}</span>
|
||||
</div>
|
||||
<div className="flex flex-column align-items-center text-center mb-3">
|
||||
<img src={`/demo/images/product/${data.image}`} alt={data.name} className="w-9 shadow-2 my-3 mx-0" />
|
||||
<div className="text-2xl font-bold">{data.name}</div>
|
||||
<div className="mb-3">{data.description}</div>
|
||||
<Rating value={data.rating} readOnly cancel={false} />
|
||||
</div>
|
||||
<div className="flex align-items-center justify-content-between">
|
||||
<span className="text-2xl font-semibold">${data.price}</span>
|
||||
<Button icon="pi pi-shopping-cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const itemTemplate = (data: Demo.Product, layout: 'grid' | 'list' | (string & Record<string, unknown>)) => {
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (layout === 'list') {
|
||||
return dataviewListItem(data);
|
||||
} else if (layout === 'grid') {
|
||||
return dataviewGridItem(data);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>DataView</h5>
|
||||
<DataView value={filteredValue || dataViewValue} layout={layout} paginator rows={9} sortOrder={sortOrder} sortField={sortField} itemTemplate={itemTemplate} header={dataViewHeader}></DataView>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 xl:col-8">
|
||||
<div className="card">
|
||||
<h5>PickList</h5>
|
||||
<PickList
|
||||
source={picklistSourceValue}
|
||||
target={picklistTargetValue}
|
||||
sourceHeader="From"
|
||||
targetHeader="To"
|
||||
itemTemplate={(item) => <div>{item.name}</div>}
|
||||
onChange={(e) => {
|
||||
setPicklistSourceValue(e.source);
|
||||
setPicklistTargetValue(e.target);
|
||||
}}
|
||||
sourceStyle={{ height: '200px' }}
|
||||
targetStyle={{ height: '200px' }}
|
||||
></PickList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 xl:col-4">
|
||||
<div className="card">
|
||||
<h5>OrderList</h5>
|
||||
<OrderList value={orderlistValue} listStyle={{ height: '200px' }} className="p-orderlist-responsive" header="Cities" itemTemplate={(item) => <div>{item.name}</div>} onChange={(e) => setOrderlistValue(e.value)}></OrderList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListDemo;
|
||||
109
app/(main)/uikit/media/page.tsx
Normal file
109
app/(main)/uikit/media/page.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from 'primereact/button';
|
||||
import { Carousel } from 'primereact/carousel';
|
||||
import { Galleria } from 'primereact/galleria';
|
||||
import { Image } from 'primereact/image';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { PhotoService } from '../../../../demo/service/PhotoService';
|
||||
import { ProductService } from '../../../../demo/service/ProductService';
|
||||
import type { Demo } from '@/types';
|
||||
|
||||
const MediaDemo = () => {
|
||||
const [products, setProducts] = useState<Demo.Product[]>([]);
|
||||
const [images, setImages] = useState<Demo.Photo[]>([]);
|
||||
|
||||
const galleriaResponsiveOptions = [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '960px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
];
|
||||
const carouselResponsiveOptions = [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 3,
|
||||
numScroll: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 2,
|
||||
numScroll: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
ProductService.getProductsSmall().then((products) => setProducts(products));
|
||||
|
||||
PhotoService.getImages().then((images) => setImages(images));
|
||||
}, []);
|
||||
|
||||
const carouselItemTemplate = (product: Demo.Product) => {
|
||||
return (
|
||||
<div className="border-1 surface-border border-round m-1 text-center py-5">
|
||||
<div className="mb-3">
|
||||
<img src={`/demo/images/product/${product.image}`} alt={product.name} className="w-6 shadow-2" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="p-mb-1">{product.name}</h4>
|
||||
<h6 className="mt-0 mb-3">${product.price}</h6>
|
||||
<span className={`product-badge status-${product.inventoryStatus?.toLowerCase()}`}>{product.inventoryStatus}</span>
|
||||
<div className="car-buttons mt-5">
|
||||
<Button type="button" rounded className=" mr-2" icon="pi pi-search"></Button>
|
||||
<Button type="button" rounded severity="success" className="mr-2" icon="pi pi-star"></Button>
|
||||
<Button type="button" rounded severity="help" icon="pi pi-cog"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const galleriaItemTemplate = (item: Demo.Photo) => <img src={`/${item.itemImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
|
||||
const galleriaThumbnailTemplate = (item: Demo.Photo) => <img src={`/${item.thumbnailImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
|
||||
|
||||
return (
|
||||
<div className="grid p-fluid">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Carousel</h5>
|
||||
<Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={carouselResponsiveOptions} itemTemplate={carouselItemTemplate}></Carousel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Image</h5>
|
||||
<div className="flex justify-content-center">
|
||||
<Image src={`/demo/images/galleria/galleria10.jpg`} alt="Image" width="250" preview />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Galleria</h5>
|
||||
<Galleria value={images} responsiveOptions={galleriaResponsiveOptions} numVisible={7} circular style={{ maxWidth: '800px', margin: 'auto' }} item={galleriaItemTemplate} thumbnail={galleriaThumbnailTemplate}></Galleria>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MediaDemo;
|
||||
16
app/(main)/uikit/menu/confirmation/page.tsx
Normal file
16
app/(main)/uikit/menu/confirmation/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Menu from '../page';
|
||||
function ConfirmationDemo() {
|
||||
return (
|
||||
<Menu>
|
||||
<div className="flex align-items-center py-5 px-3">
|
||||
<i className="pi pi-fw pi-check mr-2 text-2xl" />
|
||||
<p className="m-0 text-lg">Confirmation Component Content via Child Route</p>
|
||||
</div>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
export default ConfirmationDemo;
|
||||
584
app/(main)/uikit/menu/page.tsx
Normal file
584
app/(main)/uikit/menu/page.tsx
Normal file
@@ -0,0 +1,584 @@
|
||||
'use client';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { Menubar } from 'primereact/menubar';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { BreadCrumb } from 'primereact/breadcrumb';
|
||||
import { Steps } from 'primereact/steps';
|
||||
import { TabMenu } from 'primereact/tabmenu';
|
||||
import { TieredMenu } from 'primereact/tieredmenu';
|
||||
import { Menu } from 'primereact/menu';
|
||||
import { Button } from 'primereact/button';
|
||||
import { ContextMenu } from 'primereact/contextmenu';
|
||||
import { MegaMenu } from 'primereact/megamenu';
|
||||
import { PanelMenu } from 'primereact/panelmenu';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
const MenuDemo = ({ children }: any) => {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const menu = useRef<Menu>(null);
|
||||
const contextMenu = useRef<ContextMenu>(null);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const checkActiveIndex = useCallback(() => {
|
||||
const paths = pathname.split('/');
|
||||
const currentPath = paths[paths.length - 1];
|
||||
|
||||
switch (currentPath) {
|
||||
case 'seat':
|
||||
setActiveIndex(1);
|
||||
break;
|
||||
case 'payment':
|
||||
setActiveIndex(2);
|
||||
break;
|
||||
case 'confirmation':
|
||||
setActiveIndex(3);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}, [pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
checkActiveIndex();
|
||||
}, [checkActiveIndex]);
|
||||
|
||||
const nestedMenuitems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass'
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker'
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-sign-out'
|
||||
}
|
||||
];
|
||||
|
||||
const breadcrumbHome = { icon: 'pi pi-home', to: '/' };
|
||||
const breadcrumbItems = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }];
|
||||
|
||||
const wizardItems = [
|
||||
{ label: 'Personal', command: () => router.push('/uikit/menu') },
|
||||
{ label: 'Seat', command: () => router.push('/uikit/menu/seat') },
|
||||
{ label: 'Payment', command: () => router.push('/uikit/menu/payment') },
|
||||
{
|
||||
label: 'Confirmation',
|
||||
command: () => router.push('/uikit/menu/confirmation')
|
||||
}
|
||||
];
|
||||
|
||||
const tieredMenuItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass'
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker'
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-sign-out'
|
||||
}
|
||||
];
|
||||
|
||||
const overlayMenuItems = [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-save'
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Home',
|
||||
icon: 'pi pi-home'
|
||||
}
|
||||
];
|
||||
|
||||
const menuitems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const contextMenuItems = [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-save'
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Options',
|
||||
icon: 'pi pi-cog'
|
||||
}
|
||||
];
|
||||
|
||||
const megamenuItems = [
|
||||
{
|
||||
label: 'Fashion',
|
||||
icon: 'pi pi-fw pi-tag',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Woman',
|
||||
items: [{ label: 'Woman Item' }, { label: 'Woman Item' }, { label: 'Woman Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Men',
|
||||
items: [{ label: 'Men Item' }, { label: 'Men Item' }, { label: 'Men Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Kids',
|
||||
items: [{ label: 'Kids Item' }, { label: 'Kids Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Luggage',
|
||||
items: [{ label: 'Luggage Item' }, { label: 'Luggage Item' }, { label: 'Luggage Item' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Electronics',
|
||||
icon: 'pi pi-fw pi-desktop',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Computer',
|
||||
items: [{ label: 'Computer Item' }, { label: 'Computer Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Camcorder',
|
||||
items: [{ label: 'Camcorder Item' }, { label: 'Camcorder Item' }, { label: 'Camcorder Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'TV',
|
||||
items: [{ label: 'TV Item' }, { label: 'TV Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Audio',
|
||||
items: [{ label: 'Audio Item' }, { label: 'Audio Item' }, { label: 'Audio Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Sports.7',
|
||||
items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Furniture',
|
||||
icon: 'pi pi-fw pi-image',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Living Room',
|
||||
items: [{ label: 'Living Room Item' }, { label: 'Living Room Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Kitchen',
|
||||
items: [{ label: 'Kitchen Item' }, { label: 'Kitchen Item' }, { label: 'Kitchen Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Bedroom',
|
||||
items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Outdoor',
|
||||
items: [{ label: 'Outdoor Item' }, { label: 'Outdoor Item' }, { label: 'Outdoor Item' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Sports',
|
||||
icon: 'pi pi-fw pi-star',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Basketball',
|
||||
items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Football',
|
||||
items: [{ label: 'Football Item' }, { label: 'Football Item' }, { label: 'Football Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Tennis',
|
||||
items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const panelMenuitems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass'
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker'
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const toggleMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
menu.current?.toggle(event);
|
||||
};
|
||||
|
||||
const onContextRightClick = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
contextMenu.current?.show(event);
|
||||
};
|
||||
|
||||
const menubarEndTemplate = () => {
|
||||
return (
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText type="text" placeholder="Search" />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid p-fluid">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Menubar</h5>
|
||||
<Menubar model={nestedMenuitems} end={menubarEndTemplate}></Menubar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Breadcrumb</h5>
|
||||
<BreadCrumb home={breadcrumbHome} model={breadcrumbItems} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card">
|
||||
<h5>Steps</h5>
|
||||
<Steps model={wizardItems} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />
|
||||
{pathname === '/uikit/menu' ? (
|
||||
<div className="flex align-items-center py-5 px-3">
|
||||
<i className="pi pi-fw pi-user mr-2 text-2xl" />
|
||||
<p className="m-0 text-lg">Personal Component Content via Child Route</p>
|
||||
</div>
|
||||
) : (
|
||||
<>{children}</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card">
|
||||
<h5>TabMenu</h5>
|
||||
<TabMenu model={wizardItems} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
|
||||
{pathname === '/uikit/menu' ? (
|
||||
<div className="flex align-items-center py-5 px-3">
|
||||
<i className="pi pi-fw pi-user mr-2 text-2xl" />
|
||||
<p className="m-0 text-lg">Personal Component Content via Child Route</p>
|
||||
</div>
|
||||
) : (
|
||||
<>{children}</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="card">
|
||||
<h5>Tiered Menu</h5>
|
||||
<TieredMenu model={tieredMenuItems} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="card">
|
||||
<h5>Plain Menu</h5>
|
||||
<Menu model={menuitems} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="card">
|
||||
<h5>Overlay Menu</h5>
|
||||
|
||||
<Menu ref={menu} model={overlayMenuItems} popup />
|
||||
<Button type="button" label="Options" icon="pi pi-angle-down" onClick={toggleMenu} style={{ width: 'auto' }} />
|
||||
</div>
|
||||
|
||||
<div className="card" onContextMenu={onContextRightClick}>
|
||||
<h5>ContextMenu</h5>
|
||||
Right click to display.
|
||||
<ContextMenu ref={contextMenu} model={contextMenuItems} breakpoint="767px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card">
|
||||
<h5>MegaMenu - Horizontal</h5>
|
||||
<MegaMenu model={megamenuItems} breakpoint="767px" />
|
||||
|
||||
<h5 style={{ marginTop: '1.55em' }}>MegaMenu - Vertical</h5>
|
||||
<MegaMenu model={megamenuItems} orientation="vertical" breakpoint="767px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card">
|
||||
<h5>PanelMenu</h5>
|
||||
<PanelMenu model={panelMenuitems} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuDemo;
|
||||
15
app/(main)/uikit/menu/payment/page.tsx
Normal file
15
app/(main)/uikit/menu/payment/page.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import Menu from '../page';
|
||||
function PaymentDemo() {
|
||||
return (
|
||||
<Menu>
|
||||
<div className="flex align-items-center py-5 px-3">
|
||||
<i className="pi pi-fw pi-money-bill mr-2 text-2xl" />
|
||||
<p className="m-0 text-lg">Payment Component Content via Child Route</p>
|
||||
</div>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
export default PaymentDemo;
|
||||
16
app/(main)/uikit/menu/seat/page.tsx
Normal file
16
app/(main)/uikit/menu/seat/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Menu from '../page';
|
||||
function SeatDemo() {
|
||||
return (
|
||||
<Menu>
|
||||
<div className="flex align-items-center py-5 px-3">
|
||||
<i className="pi pi-fw pi-ticket mr-2 text-2xl" />
|
||||
<p className="m-0 text-lg">Seat Component Content via Child Route</p>
|
||||
</div>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
export default SeatDemo;
|
||||
131
app/(main)/uikit/message/page.tsx
Normal file
131
app/(main)/uikit/message/page.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
'use client';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Messages } from 'primereact/messages';
|
||||
import { Message } from 'primereact/message';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Button } from 'primereact/button';
|
||||
|
||||
const MessagesDemo = () => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const toast = useRef<Toast>(null);
|
||||
const message = useRef<Messages>(null);
|
||||
|
||||
const addSuccessMessage = () => {
|
||||
message.current?.show({ severity: 'success', content: 'Message Detail' });
|
||||
};
|
||||
|
||||
const addInfoMessage = () => {
|
||||
message.current?.show({ severity: 'info', content: 'Message Detail' });
|
||||
};
|
||||
|
||||
const addWarnMessage = () => {
|
||||
message.current?.show({ severity: 'warn', content: 'Message Detail' });
|
||||
};
|
||||
|
||||
const addErrorMessage = () => {
|
||||
message.current?.show({ severity: 'error', content: 'Message Detail' });
|
||||
};
|
||||
|
||||
const showSuccess = () => {
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Success Message',
|
||||
detail: 'Message Detail',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const showInfo = () => {
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Info Message',
|
||||
detail: 'Message Detail',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const showWarn = () => {
|
||||
toast.current?.show({
|
||||
severity: 'warn',
|
||||
summary: 'Warn Message',
|
||||
detail: 'Message Detail',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const showError = () => {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Error Message',
|
||||
detail: 'Message Detail',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12 lg:col-6">
|
||||
<div className="card">
|
||||
<h5>Toast</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Toast ref={toast} />
|
||||
<Button type="button" onClick={showSuccess} label="Success" severity="success" />
|
||||
<Button type="button" onClick={showInfo} label="Info" severity="info" />
|
||||
<Button type="button" onClick={showWarn} label="Warn" severity="warning" />
|
||||
<Button type="button" onClick={showError} label="Error" severity="danger" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-6">
|
||||
<div className="card">
|
||||
<h5>Messages</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button label="Success" type="button" onClick={addSuccessMessage} severity="success" />
|
||||
<Button label="Info" type="button" onClick={addInfoMessage} severity="info" />
|
||||
<Button label="Warn" type="button" onClick={addWarnMessage} severity="warning" />
|
||||
<Button label="Error" type="button" onClick={addErrorMessage} severity="danger" />
|
||||
</div>
|
||||
<Messages ref={message} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-8">
|
||||
<div className="card">
|
||||
<h5>Inline</h5>
|
||||
<div className="flex align-items-center flex-wrap gap-2 mb-3">
|
||||
<label htmlFor="username1" className="col-fixed w-9rem">
|
||||
Username
|
||||
</label>
|
||||
<InputText id="username1" value={username} onChange={(e) => setUsername(e.target.value)} required className="p-invalid" />
|
||||
<Message severity="error" text="Username is required" />
|
||||
</div>
|
||||
<div className="flex align-items-center flex-wrap gap-2">
|
||||
<label htmlFor="email" className="col-fixed w-9rem">
|
||||
Email
|
||||
</label>
|
||||
<InputText id="email" value={email} onChange={(e) => setEmail(e.target.value)} required className="p-invalid" />
|
||||
<Message severity="error" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-4">
|
||||
<div className="card">
|
||||
<h5>Help Text</h5>
|
||||
<div className="field p-fluid">
|
||||
<label htmlFor="username2">Username</label>
|
||||
<InputText id="username2" type="text" className="p-invalid" aria-describedby="username-help" />
|
||||
<small id="username-help" className="p-error">
|
||||
Enter your username to reset your password.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessagesDemo;
|
||||
220
app/(main)/uikit/misc/page.tsx
Normal file
220
app/(main)/uikit/misc/page.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Avatar } from 'primereact/avatar';
|
||||
import { AvatarGroup } from 'primereact/avatargroup';
|
||||
import { Chip } from 'primereact/chip';
|
||||
import { Skeleton } from 'primereact/skeleton';
|
||||
import { ScrollPanel } from 'primereact/scrollpanel';
|
||||
import { ScrollTop } from 'primereact/scrolltop';
|
||||
|
||||
const MiscDemo = () => {
|
||||
const [value, setValue] = useState(0);
|
||||
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setValue((prevValue) => {
|
||||
const newVal = prevValue + Math.floor(Math.random() * 10) + 1;
|
||||
return newVal >= 100 ? 100 : newVal;
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
intervalRef.current = interval;
|
||||
|
||||
return () => {
|
||||
clearInterval(intervalRef.current as NodeJS.Timeout);
|
||||
intervalRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>ProgressBar</h5>
|
||||
<div className="grid">
|
||||
<div className="col">
|
||||
<ProgressBar value={value} />
|
||||
</div>
|
||||
<div className="col">
|
||||
<ProgressBar value="50" showValue={false} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 lg:col-6">
|
||||
<div className="card">
|
||||
<h4>Badge</h4>
|
||||
<h5>Numbers</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge value="2"></Badge>
|
||||
<Badge value="8" severity="success"></Badge>
|
||||
<Badge value="4" severity="info"></Badge>
|
||||
<Badge value="12" severity="warning"></Badge>
|
||||
<Badge value="3" severity="danger"></Badge>
|
||||
</div>
|
||||
|
||||
<h5>Positioned Badge</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<i className="pi pi-bell mr-4 p-text-secondary p-overlay-badge" style={{ fontSize: '2rem' }}>
|
||||
<Badge value="2"></Badge>
|
||||
</i>
|
||||
<i className="pi pi-calendar mr-4 p-text-secondary p-overlay-badge" style={{ fontSize: '2rem' }}>
|
||||
<Badge value="10+" severity="danger"></Badge>
|
||||
</i>
|
||||
<i className="pi pi-envelope p-text-secondary p-overlay-badge" style={{ fontSize: '2rem' }}>
|
||||
<Badge severity="danger"></Badge>
|
||||
</i>
|
||||
</div>
|
||||
|
||||
<h5>Button Badge</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button type="button" label="Emails">
|
||||
<Badge value="8"></Badge>
|
||||
</Button>
|
||||
<Button type="button" label="Messages" icon="pi pi-users" severity="warning">
|
||||
<Badge value="8" severity="danger"></Badge>
|
||||
</Button>
|
||||
</div>
|
||||
<h5>Sizes</h5>
|
||||
<div className="flex flex-wrap gap-2 align-items-end">
|
||||
<Badge value="2"></Badge>
|
||||
<Badge value="4" size="large" severity="warning"></Badge>
|
||||
<Badge value="6" size="xlarge" severity="success"></Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h4>Avatar</h4>
|
||||
<h5>Avatar Group</h5>
|
||||
<AvatarGroup className="mb-3">
|
||||
<Avatar image={`/demo/images/avatar/amyelsner.png`} size="large" shape="circle"></Avatar>
|
||||
<Avatar image={`/demo/images/avatar/asiyajavayant.png`} size="large" shape="circle"></Avatar>
|
||||
<Avatar image={`/demo/images/avatar/onyamalimba.png`} size="large" shape="circle"></Avatar>
|
||||
<Avatar image={`/demo/images/avatar/ionibowcher.png`} size="large" shape="circle"></Avatar>
|
||||
<Avatar image={`/demo/images/avatar/xuxuefeng.png`} size="large" shape="circle"></Avatar>
|
||||
<Avatar label="+2" shape="circle" size="large" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }}></Avatar>
|
||||
</AvatarGroup>
|
||||
|
||||
<h5>Label - Circle</h5>
|
||||
<div className="flex flex-wrap gap-2 align-items-end">
|
||||
<Avatar label="P" size="xlarge" shape="circle"></Avatar>
|
||||
<Avatar label="V" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle"></Avatar>
|
||||
<Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle"></Avatar>
|
||||
</div>
|
||||
|
||||
<h5>Icon - Badge</h5>
|
||||
<Avatar className="p-overlay-badge" icon="pi pi-user" size="xlarge">
|
||||
<Badge value="4" />
|
||||
</Avatar>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h4>ScrollTop</h4>
|
||||
<ScrollPanel style={{ width: '250px', height: '200px' }}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet
|
||||
consectetur adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus
|
||||
orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut
|
||||
etiam sit amet nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
<ScrollTop target="parent" className="custom-scrolltop" threshold={100} icon="pi pi-arrow-up"></ScrollTop>
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 lg:col-6">
|
||||
<div className="card">
|
||||
<h4>Tag</h4>
|
||||
<h5>Tags</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Tag value="Primary"></Tag>
|
||||
<Tag severity="success" value="Success"></Tag>
|
||||
<Tag severity="info" value="Info"></Tag>
|
||||
<Tag severity="warning" value="Warning"></Tag>
|
||||
<Tag severity="danger" value="Danger"></Tag>
|
||||
</div>
|
||||
|
||||
<h5>Pills</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Tag value="Primary" rounded></Tag>
|
||||
<Tag severity="success" value="Success" rounded></Tag>
|
||||
<Tag severity="info" value="Info" rounded></Tag>
|
||||
<Tag severity="warning" value="Warning" rounded></Tag>
|
||||
<Tag severity="danger" value="Danger" rounded></Tag>
|
||||
</div>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Tag icon="pi pi-user" value="Primary"></Tag>
|
||||
<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
|
||||
<Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
|
||||
<Tag icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
|
||||
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h4>Chip</h4>
|
||||
<h5>Basic</h5>
|
||||
<div className="flex flex-wrap align-items-center gap-2">
|
||||
<Chip label="Action" />
|
||||
<Chip label="Comedy" />
|
||||
<Chip label="Mystery" />
|
||||
<Chip label="Thriller" removable />
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div className="flex align-items-center flex-wrap gap-1">
|
||||
<Chip label="Apple" icon="pi pi-apple" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" />
|
||||
<Chip label="Google" icon="pi pi-google" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div className="flex align-items-center flex-wrap gap-1">
|
||||
<Chip label="Amy Elsner" image={`/demo/images/avatar/amyelsner.png`} />
|
||||
<Chip label="Asiya Javayant" image={`/demo/images/avatar/asiyajavayant.png`} />
|
||||
<Chip label="Onyama Limba" image={`/demo/images/avatar/onyamalimba.png`} />
|
||||
<Chip label="Xuxue Feng" image={`/demo/images/avatar/xuxuefeng.png`} removable />
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div className="flex align-items-center flex-wrap gap-1 custom-chip">
|
||||
<Chip label="Action" />
|
||||
<Chip label="Apple" icon="pi pi-apple" />
|
||||
<Chip label="Onyama Limba" image={`/demo/images/avatar/onyamalimba.png`} />
|
||||
<Chip label="Xuxue Feng" image={`/demo/images/avatar/xuxuefeng.png`} removable />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h4>Skeleton</h4>
|
||||
<div className="border-round border-1 surface-border p-4">
|
||||
<div className="flex mb-3">
|
||||
<Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
|
||||
<div>
|
||||
<Skeleton width="10rem" className="mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" className="mb-2"></Skeleton>
|
||||
<Skeleton height=".5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton width="100%" height="150px"></Skeleton>
|
||||
<div className="flex justify-content-between mt-3">
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MiscDemo;
|
||||
222
app/(main)/uikit/overlay/page.tsx
Normal file
222
app/(main)/uikit/overlay/page.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from 'primereact/button';
|
||||
import { Column } from 'primereact/column';
|
||||
import { confirmPopup, ConfirmPopup } from 'primereact/confirmpopup';
|
||||
import { DataTable, DataTableSelectEvent } from 'primereact/datatable';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { OverlayPanel } from 'primereact/overlaypanel';
|
||||
import { Sidebar } from 'primereact/sidebar';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { ProductService } from '../../../../demo/service/ProductService';
|
||||
import type { Demo } from '@/types';
|
||||
|
||||
type ButtonEvent = React.MouseEvent<HTMLButtonElement>;
|
||||
const OverlayDemo = () => {
|
||||
const [displayBasic, setDisplayBasic] = useState(false);
|
||||
const [displayConfirmation, setDisplayConfirmation] = useState(false);
|
||||
const [visibleLeft, setVisibleLeft] = useState(false);
|
||||
const [visibleRight, setVisibleRight] = useState(false);
|
||||
const [visibleTop, setVisibleTop] = useState(false);
|
||||
const [visibleBottom, setVisibleBottom] = useState(false);
|
||||
const [visibleFullScreen, setVisibleFullScreen] = useState(false);
|
||||
const [products, setProducts] = useState<Demo.Product[]>([]);
|
||||
const [selectedProduct, setSelectedProduct] = useState<Demo.Product | null>(null);
|
||||
const op = useRef<OverlayPanel>(null);
|
||||
const op2 = useRef<OverlayPanel>(null);
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
const accept = () => {
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Confirmed',
|
||||
detail: 'You have accepted',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const reject = () => {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Rejected',
|
||||
detail: 'You have rejected',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const confirm = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
confirmPopup({
|
||||
target: event.currentTarget,
|
||||
message: 'Are you sure you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept,
|
||||
reject
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
ProductService.getProductsSmall().then((data) => setProducts(data));
|
||||
}, []);
|
||||
|
||||
const toggle = (event: ButtonEvent) => {
|
||||
op.current?.toggle(event);
|
||||
};
|
||||
|
||||
const toggleDataTable = (event: ButtonEvent) => {
|
||||
op2.current?.toggle(event);
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return value.toLocaleString('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD'
|
||||
});
|
||||
};
|
||||
|
||||
const onProductSelect = (event: DataTableSelectEvent) => {
|
||||
op2.current?.hide();
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Product Selected',
|
||||
detail: event.data.name,
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const onSelectionChange = (e: any): void => {
|
||||
setSelectedProduct(e.value as Demo.Product);
|
||||
};
|
||||
|
||||
const basicDialogFooter = <Button type="button" label="OK" onClick={() => setDisplayBasic(false)} icon="pi pi-check" outlined />;
|
||||
const imageBodyTemplate = (data: Demo.Product) => (
|
||||
<img
|
||||
src={`/demo/images/product/${data.image}`}
|
||||
alt={data.image}
|
||||
className="product-image"
|
||||
width="60"
|
||||
style={{
|
||||
boxShadow: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const priceBodyTemplate = (data: Demo.Product) => formatCurrency((data.price as number) ?? 0);
|
||||
const confirmationDialogFooter = (
|
||||
<>
|
||||
<Button type="button" label="No" icon="pi pi-times" onClick={() => setDisplayConfirmation(false)} text />
|
||||
<Button type="button" label="Yes" icon="pi pi-check" onClick={() => setDisplayConfirmation(false)} text autoFocus />
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toast ref={toast} />
|
||||
<div className="grid">
|
||||
<div className="col-12 lg:col-6">
|
||||
<div className="card">
|
||||
<h5>Dialog</h5>
|
||||
<Dialog header="Dialog" visible={displayBasic} style={{ width: '30vw' }} modal footer={basicDialogFooter} onHide={() => setDisplayBasic(false)}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
||||
id est laborum.
|
||||
</p>
|
||||
</Dialog>
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Button outlined type="button" label="Show" icon="pi pi-external-link" onClick={() => setDisplayBasic(true)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h5>Overlay Panel</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div>
|
||||
<Button type="button" label="Image" onClick={toggle} severity="success" />
|
||||
<OverlayPanel ref={op} appendTo={typeof window !== 'undefined' ? document.body : null} showCloseIcon>
|
||||
<img src="/demo/images/nature/nature9.jpg" alt="nature1" />
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="button" label="DataTable" onClick={toggleDataTable} severity="success" />
|
||||
<OverlayPanel ref={op2} appendTo={typeof window !== 'undefined' ? document.body : null} showCloseIcon id="overlay_panel" style={{ width: '450px' }}>
|
||||
<DataTable value={products} selection={selectedProduct || undefined} onSelectionChange={onSelectionChange} selectionMode="single" responsiveLayout="scroll" paginator rows={5} onRowSelect={onProductSelect}>
|
||||
<Column field="name" header="Name" sortable headerStyle={{ minWidth: '10rem' }} />
|
||||
<Column header="Image" body={imageBodyTemplate} headerStyle={{ minWidth: '10rem' }} />
|
||||
<Column field="price" header="Price" body={priceBodyTemplate} sortable headerStyle={{ minWidth: '8rem' }} />
|
||||
</DataTable>
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-6">
|
||||
<div className="card">
|
||||
<h5>Confirmation</h5>
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" onClick={() => setDisplayConfirmation(true)} />
|
||||
<Dialog header="Confirmation" visible={displayConfirmation} onHide={() => setDisplayConfirmation(false)} style={{ width: '350px' }} modal footer={confirmationDialogFooter}>
|
||||
<div className="flex align-items-center justify-content-center">
|
||||
<i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
|
||||
<span>Are you sure you want to proceed?</span>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h5>Sidebar</h5>
|
||||
<Sidebar visible={visibleLeft} onHide={() => setVisibleLeft(false)} baseZIndex={1000}>
|
||||
<h1 style={{ fontWeight: 'normal' }}>Left Sidebar</h1>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar visible={visibleRight} onHide={() => setVisibleRight(false)} baseZIndex={1000} position="right">
|
||||
<h1 style={{ fontWeight: 'normal' }}>Right Sidebar</h1>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar visible={visibleTop} onHide={() => setVisibleTop(false)} baseZIndex={1000} position="top">
|
||||
<h1 style={{ fontWeight: 'normal' }}>Top Sidebar</h1>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar visible={visibleBottom} onHide={() => setVisibleBottom(false)} baseZIndex={1000} position="bottom">
|
||||
<h1 style={{ fontWeight: 'normal' }}>Bottom Sidebar</h1>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar visible={visibleFullScreen} onHide={() => setVisibleFullScreen(false)} baseZIndex={1000} fullScreen>
|
||||
<h1 style={{ fontWeight: 'normal' }}>Full Screen</h1>
|
||||
</Sidebar>
|
||||
|
||||
<Button type="button" icon="pi pi-arrow-right" severity="warning" onClick={() => setVisibleLeft(true)} style={{ marginRight: '.25em' }} />
|
||||
<Button type="button" icon="pi pi-arrow-left" severity="warning" onClick={() => setVisibleRight(true)} style={{ marginRight: '.25em' }} />
|
||||
<Button type="button" icon="pi pi-arrow-down" severity="warning" onClick={() => setVisibleTop(true)} style={{ marginRight: '.25em' }} />
|
||||
<Button type="button" icon="pi pi-arrow-up" severity="warning" onClick={() => setVisibleBottom(true)} style={{ marginRight: '.25em' }} />
|
||||
<Button type="button" icon="pi pi-external-link" severity="warning" onClick={() => setVisibleFullScreen(true)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-6">
|
||||
<div className="card">
|
||||
<h5>Tooltip</h5>
|
||||
<div className="flex align-items-center gap-2">
|
||||
<span>
|
||||
<InputText type="text" placeholder="Username" tooltip="Your username" />
|
||||
</span>
|
||||
|
||||
<Button type="button" label="Save" icon="pi pi-check" tooltip="Click to proceed" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 lg:col-6">
|
||||
<Toast ref={toast} />
|
||||
|
||||
<div className="card">
|
||||
<h5>ConfirmPopup</h5>
|
||||
<ConfirmPopup />
|
||||
<Button onClick={confirm} icon="pi pi-check" label="Confirm"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OverlayDemo;
|
||||
233
app/(main)/uikit/panel/page.tsx
Normal file
233
app/(main)/uikit/panel/page.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
'use client';
|
||||
|
||||
import React, { useRef } from 'react';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Button } from 'primereact/button';
|
||||
import { SplitButton } from 'primereact/splitbutton';
|
||||
import { Accordion, AccordionTab } from 'primereact/accordion';
|
||||
import { TabView, TabPanel } from 'primereact/tabview';
|
||||
import { Panel } from 'primereact/panel';
|
||||
import { Fieldset } from 'primereact/fieldset';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Divider } from 'primereact/divider';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Splitter, SplitterPanel } from 'primereact/splitter';
|
||||
import { Menu } from 'primereact/menu';
|
||||
|
||||
const PanelDemo = () => {
|
||||
const menu1 = useRef<Menu>(null);
|
||||
const toolbarItems = [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-check'
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-sync'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash'
|
||||
},
|
||||
{
|
||||
label: 'Home Page',
|
||||
icon: 'pi pi-home'
|
||||
}
|
||||
];
|
||||
|
||||
const toolbarLeftTemplate = () => {
|
||||
return (
|
||||
<>
|
||||
<Button label="New" icon="pi pi-plus" style={{ marginRight: '.5em' }} />
|
||||
<Button label="Open" icon="pi pi-folder-open" severity="secondary" />
|
||||
|
||||
<i className="pi pi-bars p-toolbar-separator" style={{ marginRight: '.5em' }}></i>
|
||||
|
||||
<Button icon="pi pi-check" severity="success" style={{ marginRight: '.5em' }} />
|
||||
<Button icon="pi pi-trash" severity="warning" style={{ marginRight: '.5em' }} />
|
||||
<Button icon="pi pi-print" severity="danger" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
const toolbarRightTemplate = <SplitButton label="Options" icon="pi pi-check" model={toolbarItems} menuStyle={{ width: '12rem' }}></SplitButton>;
|
||||
const cardHeader = (
|
||||
<div className="flex align-items-center justify-content-between mb-0 p-3 pb-0">
|
||||
<h5 className="m-0">Card</h5>
|
||||
<Button icon="pi pi-plus" text onClick={(event) => menu1.current?.toggle(event)} />
|
||||
<Menu
|
||||
ref={menu1}
|
||||
popup
|
||||
model={[
|
||||
{ label: 'Add New', icon: 'pi pi-fw pi-plus' },
|
||||
{ label: 'Remove', icon: 'pi pi-fw pi-minus' },
|
||||
{ label: 'Update', icon: 'pi pi-fw pi-sync' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Toolbar</h5>
|
||||
<Toolbar left={toolbarLeftTemplate} right={toolbarRightTemplate}></Toolbar>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card">
|
||||
<h5>AccordionPanel</h5>
|
||||
<Accordion activeIndex={0}>
|
||||
<AccordionTab header="Header I">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
||||
id est laborum.
|
||||
</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III">
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
|
||||
in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
|
||||
minus.
|
||||
</p>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h5>TabView</h5>
|
||||
<TabView>
|
||||
<TabPanel header="Header I">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
||||
id est laborum.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header II">
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III">
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
|
||||
in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
|
||||
minus.
|
||||
</p>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="card">
|
||||
<h5>Panel</h5>
|
||||
<Panel header="Header" toggleable>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h5>Fieldset</h5>
|
||||
<Fieldset legend="Legend" toggleable>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p>
|
||||
</Fieldset>
|
||||
</div>
|
||||
<Card header={cardHeader}>
|
||||
<p className="line-height-3 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Divider</h5>
|
||||
<div className="grid">
|
||||
<div className="col-5 flex align-items-center justify-content-center">
|
||||
<div className="p-fluid">
|
||||
<div className="field">
|
||||
<label htmlFor="username">Username</label>
|
||||
<InputText id="username" type="text" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="password">Password</label>
|
||||
<InputText id="password" type="password" />
|
||||
</div>
|
||||
<Button label="Login"></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-1">
|
||||
<Divider layout="vertical">
|
||||
<b>OR</b>
|
||||
</Divider>
|
||||
</div>
|
||||
<div className="col-5 align-items-center justify-content-center">
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
|
||||
<Divider layout="horizontal" align="center">
|
||||
<span className="p-tag">Badge</span>
|
||||
</Divider>
|
||||
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
|
||||
in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
|
||||
minus.
|
||||
</p>
|
||||
|
||||
<Divider align="right">
|
||||
<Button label="Button" icon="pi pi-search" outlined></Button>
|
||||
</Divider>
|
||||
|
||||
<p>
|
||||
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut
|
||||
reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Splitter</h5>
|
||||
<Splitter style={{ height: '300px' }}>
|
||||
<SplitterPanel size={30} minSize={10}>
|
||||
<div className="h-full flex align-items-center justify-content-center">Panel 1</div>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel size={70}>
|
||||
<Splitter layout="vertical">
|
||||
<SplitterPanel size={50} minSize={10}>
|
||||
<div className="h-full flex align-items-center justify-content-center">Panel 2</div>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel size={50} minSize={10}>
|
||||
<div className="h-full flex align-items-center justify-content-center">Panel 3</div>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PanelDemo;
|
||||
464
app/(main)/uikit/table/page.tsx
Normal file
464
app/(main)/uikit/table/page.tsx
Normal file
@@ -0,0 +1,464 @@
|
||||
'use client';
|
||||
import { CustomerService } from '../../../../demo/service/CustomerService';
|
||||
import { ProductService } from '../../../../demo/service/ProductService';
|
||||
import { FilterMatchMode, FilterOperator } from 'primereact/api';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { Column, ColumnFilterApplyTemplateOptions, ColumnFilterClearTemplateOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
|
||||
import { DataTable, DataTableExpandedRows, DataTableFilterMeta } from 'primereact/datatable';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { MultiSelect } from 'primereact/multiselect';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { Rating } from 'primereact/rating';
|
||||
import { Slider } from 'primereact/slider';
|
||||
import { ToggleButton } from 'primereact/togglebutton';
|
||||
import { TriStateCheckbox } from 'primereact/tristatecheckbox';
|
||||
import { classNames } from 'primereact/utils';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { Demo } from '@/types';
|
||||
|
||||
const TableDemo = () => {
|
||||
const [customers1, setCustomers1] = useState<Demo.Customer[]>([]);
|
||||
const [customers2, setCustomers2] = useState<Demo.Customer[]>([]);
|
||||
const [customers3, setCustomers3] = useState<Demo.Customer[]>([]);
|
||||
const [filters1, setFilters1] = useState<DataTableFilterMeta>({});
|
||||
const [loading1, setLoading1] = useState(true);
|
||||
const [loading2, setLoading2] = useState(true);
|
||||
const [idFrozen, setIdFrozen] = useState(false);
|
||||
const [products, setProducts] = useState<Demo.Product[]>([]);
|
||||
const [globalFilterValue1, setGlobalFilterValue1] = useState('');
|
||||
const [expandedRows, setExpandedRows] = useState<any[] | DataTableExpandedRows>([]);
|
||||
const [allExpanded, setAllExpanded] = useState(false);
|
||||
|
||||
const representatives = [
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png' },
|
||||
{ name: 'Anna Fali', image: 'annafali.png' },
|
||||
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png' },
|
||||
{ name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png' },
|
||||
{ name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
|
||||
{ name: 'Onyama Limba', image: 'onyamalimba.png' },
|
||||
{ name: 'Stephen Shaw', image: 'stephenshaw.png' },
|
||||
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
|
||||
];
|
||||
|
||||
const statuses = ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'];
|
||||
|
||||
const clearFilter1 = () => {
|
||||
initFilters1();
|
||||
};
|
||||
|
||||
const onGlobalFilterChange1 = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
let _filters1 = { ...filters1 };
|
||||
(_filters1['global'] as any).value = value;
|
||||
|
||||
setFilters1(_filters1);
|
||||
setGlobalFilterValue1(value);
|
||||
};
|
||||
|
||||
const renderHeader1 = () => {
|
||||
return (
|
||||
<div className="flex justify-content-between">
|
||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined onClick={clearFilter1} />
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText value={globalFilterValue1} onChange={onGlobalFilterChange1} placeholder="Keyword Search" />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setLoading2(true);
|
||||
|
||||
CustomerService.getCustomersLarge().then((data) => {
|
||||
setCustomers1(getCustomers(data));
|
||||
setLoading1(false);
|
||||
});
|
||||
CustomerService.getCustomersLarge().then((data) => {
|
||||
setCustomers2(getCustomers(data));
|
||||
setLoading2(false);
|
||||
});
|
||||
CustomerService.getCustomersMedium().then((data) => setCustomers3(data));
|
||||
ProductService.getProductsWithOrdersSmall().then((data) => setProducts(data));
|
||||
|
||||
initFilters1();
|
||||
}, []);
|
||||
|
||||
const balanceTemplate = (rowData: Demo.Customer) => {
|
||||
return (
|
||||
<div>
|
||||
<span className="text-bold">{formatCurrency(rowData.balance as number)}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getCustomers = (data: Demo.Customer[]) => {
|
||||
return [...(data || [])].map((d) => {
|
||||
d.date = new Date(d.date);
|
||||
return d;
|
||||
});
|
||||
};
|
||||
|
||||
const formatDate = (value: Date) => {
|
||||
return value.toLocaleDateString('en-US', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return value.toLocaleString('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD'
|
||||
});
|
||||
};
|
||||
|
||||
const initFilters1 = () => {
|
||||
setFilters1({
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
name: {
|
||||
operator: FilterOperator.AND,
|
||||
constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
|
||||
},
|
||||
'country.name': {
|
||||
operator: FilterOperator.AND,
|
||||
constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
|
||||
},
|
||||
representative: { value: null, matchMode: FilterMatchMode.IN },
|
||||
date: {
|
||||
operator: FilterOperator.AND,
|
||||
constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
|
||||
},
|
||||
balance: {
|
||||
operator: FilterOperator.AND,
|
||||
constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }]
|
||||
},
|
||||
status: {
|
||||
operator: FilterOperator.OR,
|
||||
constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }]
|
||||
},
|
||||
activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
|
||||
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
|
||||
});
|
||||
setGlobalFilterValue1('');
|
||||
};
|
||||
|
||||
const countryBodyTemplate = (rowData: Demo.Customer) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<img alt="flag" src={`/demo/images/flag/flag_placeholder.png`} className={`flag flag-${rowData.country.code}`} width={30} />
|
||||
<span style={{ marginLeft: '.5em', verticalAlign: 'middle' }}>{rowData.country.name}</span>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const filterClearTemplate = (options: ColumnFilterClearTemplateOptions) => {
|
||||
return <Button type="button" icon="pi pi-times" onClick={options.filterClearCallback} severity="secondary"></Button>;
|
||||
};
|
||||
|
||||
const filterApplyTemplate = (options: ColumnFilterApplyTemplateOptions) => {
|
||||
return <Button type="button" icon="pi pi-check" onClick={options.filterApplyCallback} severity="success"></Button>;
|
||||
};
|
||||
|
||||
const representativeBodyTemplate = (rowData: Demo.Customer) => {
|
||||
const representative = rowData.representative;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<img
|
||||
alt={representative.name}
|
||||
src={`/demo/images/avatar/${representative.image}`}
|
||||
onError={(e) => ((e.target as HTMLImageElement).src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
|
||||
width={32}
|
||||
style={{ verticalAlign: 'middle' }}
|
||||
/>
|
||||
<span style={{ marginLeft: '.5em', verticalAlign: 'middle' }}>{representative.name}</span>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const representativeFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-3 text-bold">Agent Picker</div>
|
||||
<MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const representativesItemTemplate = (option: any) => {
|
||||
return (
|
||||
<div className="p-multiselect-representative-option">
|
||||
<img alt={option.name} src={`/demo/images/avatar/${option.image}`} width={32} style={{ verticalAlign: 'middle' }} />
|
||||
<span style={{ marginLeft: '.5em', verticalAlign: 'middle' }}>{option.name}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const dateBodyTemplate = (rowData: Demo.Customer) => {
|
||||
return formatDate(rowData.date);
|
||||
};
|
||||
|
||||
const dateFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
||||
return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
|
||||
};
|
||||
|
||||
const balanceBodyTemplate = (rowData: Demo.Customer) => {
|
||||
return formatCurrency(rowData.balance as number);
|
||||
};
|
||||
|
||||
const balanceFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
||||
return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />;
|
||||
};
|
||||
|
||||
const statusBodyTemplate = (rowData: Demo.Customer) => {
|
||||
return <span className={`customer-badge status-${rowData.status}`}>{rowData.status}</span>;
|
||||
};
|
||||
|
||||
const statusFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
||||
return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select a Status" className="p-column-filter" showClear />;
|
||||
};
|
||||
|
||||
const statusItemTemplate = (option: any) => {
|
||||
return <span className={`customer-badge status-${option}`}>{option}</span>;
|
||||
};
|
||||
|
||||
const activityBodyTemplate = (rowData: Demo.Customer) => {
|
||||
return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '.5rem' }}></ProgressBar>;
|
||||
};
|
||||
|
||||
const activityFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3"></Slider>
|
||||
<div className="flex align-items-center justify-content-between px-2">
|
||||
<span>{options.value ? options.value[0] : 0}</span>
|
||||
<span>{options.value ? options.value[1] : 100}</span>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const verifiedBodyTemplate = (rowData: Demo.Customer) => {
|
||||
return (
|
||||
<i
|
||||
className={classNames('pi', {
|
||||
'text-green-500 pi-check-circle': rowData.verified,
|
||||
'text-pink-500 pi-times-circle': !rowData.verified
|
||||
})}
|
||||
></i>
|
||||
);
|
||||
};
|
||||
|
||||
const verifiedFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
||||
return <TriStateCheckbox value={options.value} onChange={(e) => options.filterCallback(e.value)} />;
|
||||
};
|
||||
|
||||
const toggleAll = () => {
|
||||
if (allExpanded) collapseAll();
|
||||
else expandAll();
|
||||
};
|
||||
|
||||
const expandAll = () => {
|
||||
let _expandedRows = {} as { [key: string]: boolean };
|
||||
products.forEach((p) => (_expandedRows[`${p.id}`] = true));
|
||||
|
||||
setExpandedRows(_expandedRows);
|
||||
setAllExpanded(true);
|
||||
};
|
||||
|
||||
const collapseAll = () => {
|
||||
setExpandedRows([]);
|
||||
setAllExpanded(false);
|
||||
};
|
||||
|
||||
const amountBodyTemplate = (rowData: Demo.Customer) => {
|
||||
return formatCurrency(rowData.amount as number);
|
||||
};
|
||||
|
||||
const statusOrderBodyTemplate = (rowData: Demo.Customer) => {
|
||||
return <span className={`order-badge order-${rowData.status?.toLowerCase()}`}>{rowData.status}</span>;
|
||||
};
|
||||
|
||||
const searchBodyTemplate = () => {
|
||||
return <Button icon="pi pi-search" />;
|
||||
};
|
||||
|
||||
const imageBodyTemplate = (rowData: Demo.Product) => {
|
||||
return <img src={`/demo/images/product/${rowData.image}`} onError={(e) => ((e.target as HTMLImageElement).src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={rowData.image} className="shadow-2" width={100} />;
|
||||
};
|
||||
|
||||
const priceBodyTemplate = (rowData: Demo.Product) => {
|
||||
return formatCurrency(rowData.price as number);
|
||||
};
|
||||
|
||||
const ratingBodyTemplate = (rowData: Demo.Product) => {
|
||||
return <Rating value={rowData.rating} readOnly cancel={false} />;
|
||||
};
|
||||
|
||||
const statusBodyTemplate2 = (rowData: Demo.Product) => {
|
||||
return <span className={`product-badge status-${rowData.inventoryStatus?.toLowerCase()}`}>{rowData.inventoryStatus}</span>;
|
||||
};
|
||||
|
||||
const rowExpansionTemplate = (data: Demo.Product) => {
|
||||
return (
|
||||
<div className="orders-subtable">
|
||||
<h5>Orders for {data.name}</h5>
|
||||
<DataTable value={data.orders} responsiveLayout="scroll">
|
||||
<Column field="id" header="Id" sortable></Column>
|
||||
<Column field="customer" header="Customer" sortable></Column>
|
||||
<Column field="date" header="Date" sortable></Column>
|
||||
<Column field="amount" header="Amount" body={amountBodyTemplate} sortable></Column>
|
||||
<Column field="status" header="Status" body={statusOrderBodyTemplate} sortable></Column>
|
||||
<Column headerStyle={{ width: '4rem' }} body={searchBodyTemplate}></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const header = <Button icon={allExpanded ? 'pi pi-minus' : 'pi pi-plus'} label={allExpanded ? 'Collapse All' : 'Expand All'} onClick={toggleAll} className="w-11rem" />;
|
||||
|
||||
const headerTemplate = (data: Demo.Customer) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<img alt={data.representative.name} src={`/demo/images/avatar/${data.representative.image}`} width="32" style={{ verticalAlign: 'middle' }} />
|
||||
<span className="font-bold ml-2">{data.representative.name}</span>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const footerTemplate = (data: Demo.Customer) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<td colSpan={4} style={{ textAlign: 'right' }} className="text-bold pr-6">
|
||||
Total Customers
|
||||
</td>
|
||||
<td>{calculateCustomerTotal(data.representative.name)}</td>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const calculateCustomerTotal = (name: string) => {
|
||||
let total = 0;
|
||||
|
||||
if (customers3) {
|
||||
for (let customer of customers3) {
|
||||
if (customer.representative.name === name) {
|
||||
total++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return total;
|
||||
};
|
||||
|
||||
const header1 = renderHeader1();
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Filter Menu</h5>
|
||||
<DataTable
|
||||
value={customers1}
|
||||
paginator
|
||||
className="p-datatable-gridlines"
|
||||
showGridlines
|
||||
rows={10}
|
||||
dataKey="id"
|
||||
filters={filters1}
|
||||
filterDisplay="menu"
|
||||
loading={loading1}
|
||||
responsiveLayout="scroll"
|
||||
emptyMessage="No customers found."
|
||||
header={header1}
|
||||
>
|
||||
<Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
|
||||
<Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" filterClear={filterClearTemplate} filterApply={filterApplyTemplate} />
|
||||
<Column
|
||||
header="Agent"
|
||||
filterField="representative"
|
||||
showFilterMatchModes={false}
|
||||
filterMenuStyle={{ width: '14rem' }}
|
||||
style={{ minWidth: '14rem' }}
|
||||
body={representativeBodyTemplate}
|
||||
filter
|
||||
filterElement={representativeFilterTemplate}
|
||||
/>
|
||||
<Column header="Date" filterField="date" dataType="date" style={{ minWidth: '10rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
|
||||
<Column header="Balance" filterField="balance" dataType="numeric" style={{ minWidth: '10rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
|
||||
<Column field="status" header="Status" filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
|
||||
<Column field="activity" header="Activity" showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
|
||||
<Column field="verified" header="Verified" dataType="boolean" bodyClassName="text-center" style={{ minWidth: '8rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedFilterTemplate} />
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Frozen Columns</h5>
|
||||
<ToggleButton checked={idFrozen} onChange={(e) => setIdFrozen(e.value)} onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style={{ width: '10rem' }} />
|
||||
|
||||
<DataTable value={customers2} scrollable scrollHeight="400px" loading={loading2} className="mt-3">
|
||||
<Column field="name" header="Name" style={{ flexGrow: 1, flexBasis: '160px' }} frozen className="font-bold"></Column>
|
||||
<Column field="id" header="Id" style={{ flexGrow: 1, flexBasis: '100px' }} frozen={idFrozen} alignFrozen="left" bodyClassName={classNames({ 'font-bold': idFrozen })}></Column>
|
||||
<Column field="country.name" header="Country" style={{ flexGrow: 1, flexBasis: '200px' }} body={countryBodyTemplate}></Column>
|
||||
<Column field="date" header="Date" style={{ flexGrow: 1, flexBasis: '200px' }} body={dateBodyTemplate}></Column>
|
||||
<Column field="company" header="Company" style={{ flexGrow: 1, flexBasis: '200px' }}></Column>
|
||||
<Column field="status" header="Status" style={{ flexGrow: 1, flexBasis: '200px' }} body={statusBodyTemplate}></Column>
|
||||
<Column field="activity" header="Activity" style={{ flexGrow: 1, flexBasis: '200px' }}></Column>
|
||||
<Column field="representative.name" header="Representative" style={{ flexGrow: 1, flexBasis: '200px' }} body={representativeBodyTemplate}></Column>
|
||||
<Column field="balance" header="Balance" body={balanceTemplate} frozen style={{ flexGrow: 1, flexBasis: '120px' }} className="font-bold" alignFrozen="right"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Row Expand</h5>
|
||||
<DataTable value={products} expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)} responsiveLayout="scroll" rowExpansionTemplate={rowExpansionTemplate} dataKey="id" header={header}>
|
||||
<Column expander style={{ width: '3em' }} />
|
||||
<Column field="name" header="Name" sortable />
|
||||
<Column header="Image" body={imageBodyTemplate} />
|
||||
<Column field="price" header="Price" sortable body={priceBodyTemplate} />
|
||||
<Column field="category" header="Category" sortable />
|
||||
<Column field="rating" header="Reviews" sortable body={ratingBodyTemplate} />
|
||||
<Column field="inventoryStatus" header="Status" sortable body={statusBodyTemplate2} />
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Subheader Grouping</h5>
|
||||
<DataTable
|
||||
value={customers3}
|
||||
rowGroupMode="subheader"
|
||||
groupRowsBy="representative.name"
|
||||
sortMode="single"
|
||||
sortField="representative.name"
|
||||
sortOrder={1}
|
||||
scrollable
|
||||
scrollHeight="400px"
|
||||
rowGroupHeaderTemplate={headerTemplate}
|
||||
rowGroupFooterTemplate={footerTemplate}
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
|
||||
<Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '200px' }}></Column>
|
||||
<Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
|
||||
<Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '200px' }}></Column>
|
||||
<Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableDemo;
|
||||
42
app/(main)/uikit/tree/page.tsx
Normal file
42
app/(main)/uikit/tree/page.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
'use client';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Tree, TreeCheckboxSelectionKeys, TreeMultipleSelectionKeys } from 'primereact/tree';
|
||||
import { TreeTable, TreeTableSelectionKeysType } from 'primereact/treetable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { NodeService } from '../../../../demo/service/NodeService';
|
||||
import { TreeNode } from 'primereact/treenode';
|
||||
|
||||
const TreeDemo = () => {
|
||||
const [files, setFiles] = useState<TreeNode[]>([]);
|
||||
const [files2, setFiles2] = useState<TreeNode[]>([]);
|
||||
const [selectedFileKeys, setSelectedFileKeys] = useState<string | TreeMultipleSelectionKeys | TreeCheckboxSelectionKeys | null>(null);
|
||||
const [selectedFileKeys2, setSelectedFileKeys2] = useState<TreeTableSelectionKeysType | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
NodeService.getFiles().then((files) => setFiles(files));
|
||||
NodeService.getFilesystem().then((files) => setFiles2(files));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Tree</h5>
|
||||
<Tree value={files} selectionMode="checkbox" selectionKeys={selectedFileKeys} onSelectionChange={(e) => setSelectedFileKeys(e.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>TreeTable</h5>
|
||||
<TreeTable value={files2} selectionMode="checkbox" selectionKeys={selectedFileKeys2} onSelectionChange={(e) => setSelectedFileKeys2(e.value)}>
|
||||
<Column field="name" header="Name" expander />
|
||||
<Column field="size" header="Size" />
|
||||
<Column field="type" header="Type" />
|
||||
</TreeTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TreeDemo;
|
||||
Reference in New Issue
Block a user