Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Service updates

Browse Source
This commit is contained in:
tugcekucukoglu
2024-07-26 17:05:04 +03:00
parent 34a4d4a98d
commit a60346c2da
24 changed files with 11309 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/router/index.js
View File

@@ -124,7 +124,7 @@ const router = createRouter({
{
path: '/pages/timeline',
name: 'timeline',
component: () => import('@/views/pages/Timeline.vue')
component: () => import('@/views/pages/TimelineDoc.vue')
},
{
path: '/pages/empty',

255
src/service/CountryService.js
View File

@@ -1,7 +1,252 @@
export class CountryService {
export const CountryService = {
getData() {
return [
{ name: 'Afghanistan', code: 'AF' },
{ name: 'Albania', code: 'AL' },
{ name: 'Algeria', code: 'DZ' },
{ name: 'American Samoa', code: 'AS' },
{ name: 'Andorra', code: 'AD' },
{ name: 'Angola', code: 'AO' },
{ name: 'Anguilla', code: 'AI' },
{ name: 'Antarctica', code: 'AQ' },
{ name: 'Antigua and Barbuda', code: 'AG' },
{ name: 'Argentina', code: 'AR' },
{ name: 'Armenia', code: 'AM' },
{ name: 'Aruba', code: 'AW' },
{ name: 'Australia', code: 'AU' },
{ name: 'Austria', code: 'AT' },
{ name: 'Azerbaijan', code: 'AZ' },
{ name: 'Bahamas', code: 'BS' },
{ name: 'Bahrain', code: 'BH' },
{ name: 'Bangladesh', code: 'BD' },
{ name: 'Barbados', code: 'BB' },
{ name: 'Belarus', code: 'BY' },
{ name: 'Belgium', code: 'BE' },
{ name: 'Belize', code: 'BZ' },
{ name: 'Benin', code: 'BJ' },
{ name: 'Bermuda', code: 'BM' },
{ name: 'Bhutan', code: 'BT' },
{ name: 'Bolivia', code: 'BO' },
{ name: 'Bosnia and Herzegovina', code: 'BA' },
{ name: 'Botswana', code: 'BW' },
{ name: 'Bouvet Island', code: 'BV' },
{ name: 'Brazil', code: 'BR' },
{ name: 'British Indian Ocean Territory', code: 'IO' },
{ name: 'Brunei Darussalam', code: 'BN' },
{ name: 'Bulgaria', code: 'BG' },
{ name: 'Burkina Faso', code: 'BF' },
{ name: 'Burundi', code: 'BI' },
{ name: 'Cambodia', code: 'KH' },
{ name: 'Cameroon', code: 'CM' },
{ name: 'Canada', code: 'CA' },
{ name: 'Cape Verde', code: 'CV' },
{ name: 'Cayman Islands', code: 'KY' },
{ name: 'Central African Republic', code: 'CF' },
{ name: 'Chad', code: 'TD' },
{ name: 'Chile', code: 'CL' },
{ name: 'China', code: 'CN' },
{ name: 'Christmas Island', code: 'CX' },
{ name: 'Cocos (Keeling) Islands', code: 'CC' },
{ name: 'Colombia', code: 'CO' },
{ name: 'Comoros', code: 'KM' },
{ name: 'Congo', code: 'CG' },
{ name: 'Congo, The Democratic Republic of the', code: 'CD' },
{ name: 'Cook Islands', code: 'CK' },
{ name: 'Costa Rica', code: 'CR' },
{ name: 'Cote D"Ivoire', code: 'CI' },
{ name: 'Croatia', code: 'HR' },
{ name: 'Cuba', code: 'CU' },
{ name: 'Cyprus', code: 'CY' },
{ name: 'Czech Republic', code: 'CZ' },
{ name: 'Denmark', code: 'DK' },
{ name: 'Djibouti', code: 'DJ' },
{ name: 'Dominica', code: 'DM' },
{ name: 'Dominican Republic', code: 'DO' },
{ name: 'Ecuador', code: 'EC' },
{ name: 'Egypt', code: 'EG' },
{ name: 'El Salvador', code: 'SV' },
{ name: 'Equatorial Guinea', code: 'GQ' },
{ name: 'Eritrea', code: 'ER' },
{ name: 'Estonia', code: 'EE' },
{ name: 'Ethiopia', code: 'ET' },
{ name: 'Falkland Islands (Malvinas)', code: 'FK' },
{ name: 'Faroe Islands', code: 'FO' },
{ name: 'Fiji', code: 'FJ' },
{ name: 'Finland', code: 'FI' },
{ name: 'France', code: 'FR' },
{ name: 'French Guiana', code: 'GF' },
{ name: 'French Polynesia', code: 'PF' },
{ name: 'French Southern Territories', code: 'TF' },
{ name: 'Gabon', code: 'GA' },
{ name: 'Gambia', code: 'GM' },
{ name: 'Georgia', code: 'GE' },
{ name: 'Germany', code: 'DE' },
{ name: 'Ghana', code: 'GH' },
{ name: 'Gibraltar', code: 'GI' },
{ name: 'Greece', code: 'GR' },
{ name: 'Greenland', code: 'GL' },
{ name: 'Grenada', code: 'GD' },
{ name: 'Guadeloupe', code: 'GP' },
{ name: 'Guam', code: 'GU' },
{ name: 'Guatemala', code: 'GT' },
{ name: 'Guernsey', code: 'GG' },
{ name: 'Guinea', code: 'GN' },
{ name: 'Guinea-Bissau', code: 'GW' },
{ name: 'Guyana', code: 'GY' },
{ name: 'Haiti', code: 'HT' },
{ name: 'Heard Island and Mcdonald Islands', code: 'HM' },
{ name: 'Holy See (Vatican City State)', code: 'VA' },
{ name: 'Honduras', code: 'HN' },
{ name: 'Hong Kong', code: 'HK' },
{ name: 'Hungary', code: 'HU' },
{ name: 'Iceland', code: 'IS' },
{ name: 'India', code: 'IN' },
{ name: 'Indonesia', code: 'ID' },
{ name: 'Iran, Islamic Republic Of', code: 'IR' },
{ name: 'Iraq', code: 'IQ' },
{ name: 'Ireland', code: 'IE' },
{ name: 'Isle of Man', code: 'IM' },
{ name: 'Israel', code: 'IL' },
{ name: 'Italy', code: 'IT' },
{ name: 'Jamaica', code: 'JM' },
{ name: 'Japan', code: 'JP' },
{ name: 'Jersey', code: 'JE' },
{ name: 'Jordan', code: 'JO' },
{ name: 'Kazakhstan', code: 'KZ' },
{ name: 'Kenya', code: 'KE' },
{ name: 'Kiribati', code: 'KI' },
{ name: 'Korea, Democratic People"S Republic of', code: 'KP' },
{ name: 'Korea, Republic of', code: 'KR' },
{ name: 'Kuwait', code: 'KW' },
{ name: 'Kyrgyzstan', code: 'KG' },
{ name: 'Lao People"S Democratic Republic', code: 'LA' },
{ name: 'Latvia', code: 'LV' },
{ name: 'Lebanon', code: 'LB' },
{ name: 'Lesotho', code: 'LS' },
{ name: 'Liberia', code: 'LR' },
{ name: 'Libyan Arab Jamahiriya', code: 'LY' },
{ name: 'Liechtenstein', code: 'LI' },
{ name: 'Lithuania', code: 'LT' },
{ name: 'Luxembourg', code: 'LU' },
{ name: 'Macao', code: 'MO' },
{ name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' },
{ name: 'Madagascar', code: 'MG' },
{ name: 'Malawi', code: 'MW' },
{ name: 'Malaysia', code: 'MY' },
{ name: 'Maldives', code: 'MV' },
{ name: 'Mali', code: 'ML' },
{ name: 'Malta', code: 'MT' },
{ name: 'Marshall Islands', code: 'MH' },
{ name: 'Martinique', code: 'MQ' },
{ name: 'Mauritania', code: 'MR' },
{ name: 'Mauritius', code: 'MU' },
{ name: 'Mayotte', code: 'YT' },
{ name: 'Mexico', code: 'MX' },
{ name: 'Micronesia, Federated States of', code: 'FM' },
{ name: 'Moldova, Republic of', code: 'MD' },
{ name: 'Monaco', code: 'MC' },
{ name: 'Mongolia', code: 'MN' },
{ name: 'Montserrat', code: 'MS' },
{ name: 'Morocco', code: 'MA' },
{ name: 'Mozambique', code: 'MZ' },
{ name: 'Myanmar', code: 'MM' },
{ name: 'Namibia', code: 'NA' },
{ name: 'Nauru', code: 'NR' },
{ name: 'Nepal', code: 'NP' },
{ name: 'Netherlands', code: 'NL' },
{ name: 'Netherlands Antilles', code: 'AN' },
{ name: 'New Caledonia', code: 'NC' },
{ name: 'New Zealand', code: 'NZ' },
{ name: 'Nicaragua', code: 'NI' },
{ name: 'Niger', code: 'NE' },
{ name: 'Nigeria', code: 'NG' },
{ name: 'Niue', code: 'NU' },
{ name: 'Norfolk Island', code: 'NF' },
{ name: 'Northern Mariana Islands', code: 'MP' },
{ name: 'Norway', code: 'NO' },
{ name: 'Oman', code: 'OM' },
{ name: 'Pakistan', code: 'PK' },
{ name: 'Palau', code: 'PW' },
{ name: 'Palestinian Territory, Occupied', code: 'PS' },
{ name: 'Panama', code: 'PA' },
{ name: 'Papua New Guinea', code: 'PG' },
{ name: 'Paraguay', code: 'PY' },
{ name: 'Peru', code: 'PE' },
{ name: 'Philippines', code: 'PH' },
{ name: 'Pitcairn', code: 'PN' },
{ name: 'Poland', code: 'PL' },
{ name: 'Portugal', code: 'PT' },
{ name: 'Puerto Rico', code: 'PR' },
{ name: 'Qatar', code: 'QA' },
{ name: 'Reunion', code: 'RE' },
{ name: 'Romania', code: 'RO' },
{ name: 'Russian Federation', code: 'RU' },
{ name: 'RWANDA', code: 'RW' },
{ name: 'Saint Helena', code: 'SH' },
{ name: 'Saint Kitts and Nevis', code: 'KN' },
{ name: 'Saint Lucia', code: 'LC' },
{ name: 'Saint Pierre and Miquelon', code: 'PM' },
{ name: 'Saint Vincent and the Grenadines', code: 'VC' },
{ name: 'Samoa', code: 'WS' },
{ name: 'San Marino', code: 'SM' },
{ name: 'Sao Tome and Principe', code: 'ST' },
{ name: 'Saudi Arabia', code: 'SA' },
{ name: 'Senegal', code: 'SN' },
{ name: 'Serbia and Montenegro', code: 'CS' },
{ name: 'Seychelles', code: 'SC' },
{ name: 'Sierra Leone', code: 'SL' },
{ name: 'Singapore', code: 'SG' },
{ name: 'Slovakia', code: 'SK' },
{ name: 'Slovenia', code: 'SI' },
{ name: 'Solomon Islands', code: 'SB' },
{ name: 'Somalia', code: 'SO' },
{ name: 'South Africa', code: 'ZA' },
{ name: 'South Georgia and the South Sandwich Islands', code: 'GS' },
{ name: 'Spain', code: 'ES' },
{ name: 'Sri Lanka', code: 'LK' },
{ name: 'Sudan', code: 'SD' },
{ name: 'Suriname', code: 'SR' },
{ name: 'Svalbard and Jan Mayen', code: 'SJ' },
{ name: 'Swaziland', code: 'SZ' },
{ name: 'Sweden', code: 'SE' },
{ name: 'Switzerland', code: 'CH' },
{ name: 'Syrian Arab Republic', code: 'SY' },
{ name: 'Taiwan, Province of China', code: 'TW' },
{ name: 'Tajikistan', code: 'TJ' },
{ name: 'Tanzania, United Republic of', code: 'TZ' },
{ name: 'Thailand', code: 'TH' },
{ name: 'Timor-Leste', code: 'TL' },
{ name: 'Togo', code: 'TG' },
{ name: 'Tokelau', code: 'TK' },
{ name: 'Tonga', code: 'TO' },
{ name: 'Trinidad and Tobago', code: 'TT' },
{ name: 'Tunisia', code: 'TN' },
{ name: 'Turkey', code: 'TR' },
{ name: 'Turkmenistan', code: 'TM' },
{ name: 'Turks and Caicos Islands', code: 'TC' },
{ name: 'Tuvalu', code: 'TV' },
{ name: 'Uganda', code: 'UG' },
{ name: 'Ukraine', code: 'UA' },
{ name: 'United Arab Emirates', code: 'AE' },
{ name: 'United Kingdom', code: 'GB' },
{ name: 'United States', code: 'US' },
{ name: 'United States Minor Outlying Islands', code: 'UM' },
{ name: 'Uruguay', code: 'UY' },
{ name: 'Uzbekistan', code: 'UZ' },
{ name: 'Vanuatu', code: 'VU' },
{ name: 'Venezuela', code: 'VE' },
{ name: 'Viet Nam', code: 'VN' },
{ name: 'Virgin Islands, British', code: 'VG' },
{ name: 'Virgin Islands, U.S.', code: 'VI' },
{ name: 'Wallis and Futuna', code: 'WF' },
{ name: 'Western Sahara', code: 'EH' },
{ name: 'Yemen', code: 'YE' },
{ name: 'Zambia', code: 'ZM' },
{ name: 'Zimbabwe', code: 'ZW' }
];
},
getCountries() {
return fetch('/demo/data/countries.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => d.data);
return Promise.resolve(this.getData());
}
}
};

9040
src/service/CustomerService.js
View File

File diff suppressed because it is too large Load Diff

456
src/service/NodeService.js
View File

@@ -1,37 +1,431 @@
export class NodeService {
getFiles() {
return fetch('/demo/data/files.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => d.data);
}
export const NodeService = {
getTreeNodesData() {
return [
{
key: '0',
label: 'Documents',
data: 'Documents Folder',
icon: 'pi pi-fw pi-inbox',
children: [
{
key: '0-0',
label: 'Work',
data: 'Work Folder',
icon: 'pi pi-fw pi-cog',
children: [
{ key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
{ key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
]
},
{
key: '0-1',
label: 'Home',
data: 'Home Folder',
icon: 'pi pi-fw pi-home',
children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
}
]
},
{
key: '1',
label: 'Events',
data: 'Events Folder',
icon: 'pi pi-fw pi-calendar',
children: [
{ key: '1-0', label: 'Meeting', icon: 'pi pi-fw pi-calendar-plus', data: 'Meeting' },
{ key: '1-1', label: 'Product Launch', icon: 'pi pi-fw pi-calendar-plus', data: 'Product Launch' },
{ key: '1-2', label: 'Report Review', icon: 'pi pi-fw pi-calendar-plus', data: 'Report Review' }
]
},
{
key: '2',
label: 'Movies',
data: 'Movies Folder',
icon: 'pi pi-fw pi-star-fill',
children: [
{
key: '2-0',
icon: 'pi pi-fw pi-star-fill',
label: 'Al Pacino',
data: 'Pacino Movies',
children: [
{ key: '2-0-0', label: 'Scarface', icon: 'pi pi-fw pi-video', data: 'Scarface Movie' },
{ key: '2-0-1', label: 'Serpico', icon: 'pi pi-fw pi-video', data: 'Serpico Movie' }
]
},
{
key: '2-1',
label: 'Robert De Niro',
icon: 'pi pi-fw pi-star-fill',
data: 'De Niro Movies',
children: [
{ key: '2-1-0', label: 'Goodfellas', icon: 'pi pi-fw pi-video', data: 'Goodfellas Movie' },
{ key: '2-1-1', label: 'Untouchables', icon: 'pi pi-fw pi-video', data: 'Untouchables Movie' }
]
}
]
}
];
},
getLazyFiles() {
return fetch('/demo/data/files-lazy.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => d.data);
}
getFilesystem() {
return fetch('/demo/data/filesystem.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => d.data);
}
getLazyFilesystem() {
return fetch('/demo/data/filesystem-lazy.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => d.data);
}
getTreeTableNodesData() {
return [
{
key: '0',
data: {
name: 'Applications',
size: '100kb',
type: 'Folder'
},
children: [
{
key: '0-0',
data: {
name: 'Vue',
size: '25kb',
type: 'Folder'
},
children: [
{
key: '0-0-0',
data: {
name: 'vue.app',
size: '10kb',
type: 'Application'
}
},
{
key: '0-0-1',
data: {
name: 'native.app',
size: '10kb',
type: 'Application'
}
},
{
key: '0-0-2',
data: {
name: 'mobile.app',
size: '5kb',
type: 'Application'
}
}
]
},
{
key: '0-1',
data: {
name: 'editor.app',
size: '25kb',
type: 'Application'
}
},
{
key: '0-2',
data: {
name: 'settings.app',
size: '50kb',
type: 'Application'
}
}
]
},
{
key: '1',
data: {
name: 'Cloud',
size: '20kb',
type: 'Folder'
},
children: [
{
key: '1-0',
data: {
name: 'backup-1.zip',
size: '10kb',
type: 'Zip'
}
},
{
key: '1-1',
data: {
name: 'backup-2.zip',
size: '10kb',
type: 'Zip'
}
}
]
},
{
key: '2',
data: {
name: 'Desktop',
size: '150kb',
type: 'Folder'
},
children: [
{
key: '2-0',
data: {
name: 'note-meeting.txt',
size: '50kb',
type: 'Text'
}
},
{
key: '2-1',
data: {
name: 'note-todo.txt',
size: '100kb',
type: 'Text'
}
}
]
},
{
key: '3',
data: {
name: 'Documents',
size: '75kb',
type: 'Folder'
},
children: [
{
key: '3-0',
data: {
name: 'Work',
size: '55kb',
type: 'Folder'
},
children: [
{
key: '3-0-0',
data: {
name: 'Expenses.doc',
size: '30kb',
type: 'Document'
}
},
{
key: '3-0-1',
data: {
name: 'Resume.doc',
size: '25kb',
type: 'Resume'
}
}
]
},
{
key: '3-1',
data: {
name: 'Home',
size: '20kb',
type: 'Folder'
},
children: [
{
key: '3-1-0',
data: {
name: 'Invoices',
size: '20kb',
type: 'Text'
}
}
]
}
]
},
{
key: '4',
data: {
name: 'Downloads',
size: '25kb',
type: 'Folder'
},
children: [
{
key: '4-0',
data: {
name: 'Spanish',
size: '10kb',
type: 'Folder'
},
children: [
{
key: '4-0-0',
data: {
name: 'tutorial-a1.txt',
size: '5kb',
type: 'Text'
}
},
{
key: '4-0-1',
data: {
name: 'tutorial-a2.txt',
size: '5kb',
type: 'Text'
}
}
]
},
{
key: '4-1',
data: {
name: 'Travel',
size: '15kb',
type: 'Text'
},
children: [
{
key: '4-1-0',
data: {
name: 'Hotel.pdf',
size: '10kb',
type: 'PDF'
}
},
{
key: '4-1-1',
data: {
name: 'Flight.pdf',
size: '5kb',
type: 'PDF'
}
}
]
}
]
},
{
key: '5',
data: {
name: 'Main',
size: '50kb',
type: 'Folder'
},
children: [
{
key: '5-0',
data: {
name: 'bin',
size: '50kb',
type: 'Link'
}
},
{
key: '5-1',
data: {
name: 'etc',
size: '100kb',
type: 'Link'
}
},
{
key: '5-2',
data: {
name: 'var',
size: '100kb',
type: 'Link'
}
}
]
},
{
key: '6',
data: {
name: 'Other',
size: '5kb',
type: 'Folder'
},
children: [
{
key: '6-0',
data: {
name: 'todo.txt',
size: '3kb',
type: 'Text'
}
},
{
key: '6-1',
data: {
name: 'logo.png',
size: '2kb',
type: 'Picture'
}
}
]
},
{
key: '7',
data: {
name: 'Pictures',
size: '150kb',
type: 'Folder'
},
children: [
{
key: '7-0',
data: {
name: 'barcelona.jpg',
size: '90kb',
type: 'Picture'
}
},
{
key: '7-1',
data: {
name: 'primevue.png',
size: '30kb',
type: 'Picture'
}
},
{
key: '7-2',
data: {
name: 'prime.jpg',
size: '30kb',
type: 'Picture'
}
}
]
},
{
key: '8',
data: {
name: 'Videos',
size: '1500kb',
type: 'Folder'
},
children: [
{
key: '8-0',
data: {
name: 'primefaces.mkv',
size: '1000kb',
type: 'Video'
}
},
{
key: '8-1',
data: {
name: 'intro.avi',
size: '500kb',
type: 'Video'
}
}
]
}
];
},
getTreeTableNodes() {
return fetch('/demo/data/treetablenodes.json')
.then((res) => res.json())
.then((d) => d.root);
}
return Promise.resolve(this.getTreeTableNodesData());
},
getTreeNodes() {
return fetch('/demo/data/treenodes.json')
.then((res) => res.json())
.then((d) => d.root);
return Promise.resolve(this.getTreeNodesData());
}
}
};

103
src/service/PhotoService.js Normal file → Executable file
View File

@@ -1,7 +1,100 @@
export class PhotoService {
export const PhotoService = {
getData() {
return [
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
alt: 'Description for Image 1',
title: 'Title 1'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria2.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria2s.jpg',
alt: 'Description for Image 2',
title: 'Title 2'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria3.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria3s.jpg',
alt: 'Description for Image 3',
title: 'Title 3'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria4.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria4s.jpg',
alt: 'Description for Image 4',
title: 'Title 4'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria5.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria5s.jpg',
alt: 'Description for Image 5',
title: 'Title 5'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria6.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria6s.jpg',
alt: 'Description for Image 6',
title: 'Title 6'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria7s.jpg',
alt: 'Description for Image 7',
title: 'Title 7'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria8.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria8s.jpg',
alt: 'Description for Image 8',
title: 'Title 8'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria9.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria9s.jpg',
alt: 'Description for Image 9',
title: 'Title 9'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria10s.jpg',
alt: 'Description for Image 10',
title: 'Title 10'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria11s.jpg',
alt: 'Description for Image 11',
title: 'Title 11'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg',
alt: 'Description for Image 12',
title: 'Title 12'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria13.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria13s.jpg',
alt: 'Description for Image 13',
title: 'Title 13'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria14.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria14s.jpg',
alt: 'Description for Image 14',
title: 'Title 14'
},
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria15.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria15s.jpg',
alt: 'Description for Image 15',
title: 'Title 15'
}
];
},
getImages() {
return fetch('/demo/data/photos.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => d.data);
return Promise.resolve(this.getData());
}
}
};

1237
src/service/ProductService.js
View File

File diff suppressed because it is too large Load Diff

64
src/views/Dashboard.vue
View File

@@ -32,10 +32,9 @@ const items = ref([
{ label: 'Remove', icon: 'pi pi-fw pi-minus' }
]);
const lineOptions = ref(null);
const productService = new ProductService();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
ProductService.getProductsSmall().then((data) => (products.value = data));
});
const formatCurrency = (value) => {
@@ -123,8 +122,7 @@ watch(
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
</div>
<div class="flex items-center justify-center bg-blue-100 rounded-border"
style="width: 2.5rem; height: 2.5rem">
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
@@ -139,8 +137,7 @@ watch(
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
</div>
<div class="flex items-center justify-center bg-orange-100 rounded-border"
style="width: 2.5rem; height: 2.5rem">
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
@@ -155,8 +152,7 @@ watch(
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
</div>
<div class="flex items-center justify-center bg-cyan-100 rounded-border"
style="width: 2.5rem; height: 2.5rem">
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
@@ -171,8 +167,7 @@ watch(
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
</div>
<div class="flex items-center justify-center bg-purple-100 rounded-border"
style="width: 2.5rem; height: 2.5rem">
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
@@ -188,8 +183,7 @@ watch(
<Column style="width: 15%">
<template #header> Image </template>
<template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
width="50" class="shadow" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow" />
</template>
</Column>
<Column field="name" header="Name" :sortable="true" style="width: 35%"></Column>
@@ -210,8 +204,7 @@ watch(
<div class="flex justify-between items-center mb-8">
<h5>Best Selling Products</h5>
<div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded"
@click="$refs.menu2.toggle($event)"></Button>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu2.toggle($event)"></Button>
<Menu ref="menu2" :popup="true" :model="items"></Menu>
</div>
</div>
@@ -300,8 +293,7 @@ watch(
<div class="flex items-center justify-between mb-6">
<h5>Notifications</h5>
<div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded"
@click="$refs.menu1.toggle($event)"></Button>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu1.toggle($event)"></Button>
<Menu ref="menu1" :popup="true" :model="items"></Menu>
</div>
</div>
@@ -309,58 +301,54 @@ watch(
<span class="block text-surface-600 dark:text-surface-200 font-medium mb-4">TODAY</span>
<ul class="p-0 mx-0 mt-0 mb-6 list-none">
<li class="flex items-center py-2 border-b border-surface">
<div
class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i>
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal">Richard Jones
<span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span
class="text-blue-500">79$</span></span>
<span class="text-surface-900 dark:text-surface-0 leading-normal"
>Richard Jones
<span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span class="text-blue-500">79$</span></span>
</span>
</li>
<li class="flex items-center py-2">
<div
class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-full mr-4 shrink-0">
<div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-full mr-4 shrink-0">
<i class="pi pi-download text-xl text-orange-500"></i>
</div>
<span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span
class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
<span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
</li>
</ul>
<span class="block text-surface-600 dark:text-surface-200 font-medium mb-4">YESTERDAY</span>
<ul class="p-0 m-0 list-none">
<li class="flex items-center py-2 border-b border-surface">
<div
class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i>
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal">Keyser Wick
<span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span
class="text-blue-500">59$</span></span>
<span class="text-surface-900 dark:text-surface-0 leading-normal"
>Keyser Wick
<span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span class="text-blue-500">59$</span></span>
</span>
</li>
<li class="flex items-center py-2 border-b border-surface">
<div
class="w-12 h-12 flex items-center justify-center bg-pink-100 rounded-full mr-4 shrink-0">
<div class="w-12 h-12 flex items-center justify-center bg-pink-100 rounded-full mr-4 shrink-0">
<i class="pi pi-question text-xl text-pink-500"></i>
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal">Jane Davis
<span class="text-surface-900 dark:text-surface-0 leading-normal"
>Jane Davis
<span class="text-surface-700 dark:text-surface-100">has posted a new questions about your product.</span>
</span>
</li>
</ul>
</div>
<div class="px-6 py-8 shadow flex flex-col md:flex-row md:items-center justify-between mb-4"
style="border-radius: 1rem; background: linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1c80cf 47.88%, #ffffff 100.01%)">
<div
class="px-6 py-8 shadow flex flex-col md:flex-row md:items-center justify-between mb-4"
style="border-radius: 1rem; background: linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1c80cf 47.88%, #ffffff 100.01%)"
>
<div>
<div class="text-blue-100 font-medium text-xl mt-2 mb-4">TAKE THE NEXT STEP</div>
<div class="text-white font-medium text-5xl">Try PrimeBlocks</div>
</div>
<div class="mt-6 mr-auto md:mt-0 md:mr-0">
<a href="https://www.primefaces.org/primeblocks-vue"
class="p-button font-bold px-8 py-4 p-button-warning p-button-rounded p-button-raised"> Get
Started </a>
<a href="https://www.primefaces.org/primeblocks-vue" class="p-button font-bold px-8 py-4 p-button-warning p-button-rounded p-button-raised"> Get Started </a>
</div>
</div>
</div>

424
src/views/pages/Crud.vue
View File

@@ -1,19 +1,24 @@
<script setup>
import { ref, onMounted } from 'vue';
import { FilterMatchMode } from '@primevue/core/api';
import { ref, onMounted, onBeforeMount } from 'vue';
import { ProductService } from '@/service/ProductService';
import { useToast } from 'primevue/usetoast';
import { ProductService } from '@/service/ProductService';
onMounted(() => {
ProductService.getProducts().then((data) => (products.value = data));
});
const toast = useToast();
const products = ref(null);
const dt = ref();
const products = ref();
const productDialog = ref(false);
const deleteProductDialog = ref(false);
const deleteProductsDialog = ref(false);
const product = ref({});
const selectedProducts = ref(null);
const dt = ref(null);
const filters = ref({});
const selectedProducts = ref();
const filters = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
});
const submitted = ref(false);
const statuses = ref([
{ label: 'INSTOCK', value: 'instock' },
@@ -21,45 +26,23 @@ const statuses = ref([
{ label: 'OUTOFSTOCK', value: 'outofstock' }
]);
const productService = new ProductService();
const getBadgeSeverity = (inventoryStatus) => {
switch (inventoryStatus.toLowerCase()) {
case 'instock':
return 'success';
case 'lowstock':
return 'warning';
case 'outofstock':
return 'danger';
default:
return 'info';
}
};
onBeforeMount(() => {
initFilters();
});
onMounted(() => {
productService.getProducts().then((data) => (products.value = data));
});
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
return;
};
const openNew = () => {
product.value = {};
submitted.value = false;
productDialog.value = true;
};
const hideDialog = () => {
productDialog.value = false;
submitted.value = false;
};
const saveProduct = () => {
submitted.value = true;
if (product.value.name && product.value.name.trim() && product.value.price) {
if (product?.value.name?.trim()) {
if (product.value.id) {
product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
products.value[findIndexById(product.value.id)] = product.value;
@@ -72,28 +55,25 @@ const saveProduct = () => {
products.value.push(product.value);
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
}
productDialog.value = false;
product.value = {};
}
};
const editProduct = (editProduct) => {
product.value = { ...editProduct };
const editProduct = (prod) => {
product.value = { ...prod };
productDialog.value = true;
};
const confirmDeleteProduct = (editProduct) => {
product.value = editProduct;
const confirmDeleteProduct = (prod) => {
product.value = prod;
deleteProductDialog.value = true;
};
const deleteProduct = () => {
products.value = products.value.filter((val) => val.id !== product.value.id);
deleteProductDialog.value = false;
product.value = {};
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
};
const findIndexById = (id) => {
let index = -1;
for (let i = 0; i < products.value.length; i++) {
@@ -102,22 +82,20 @@ const findIndexById = (id) => {
break;
}
}
return index;
};
const createId = () => {
let id = '';
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 5; i++) {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < 5; i++) {
id += chars.charAt(Math.floor(Math.random() * chars.length));
}
return id;
};
const exportCSV = () => {
dt.value.exportCSV();
};
const confirmDeleteSelected = () => {
deleteProductsDialog.value = true;
};
@@ -128,209 +106,175 @@ const deleteSelectedProducts = () => {
toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
};
const initFilters = () => {
filters.value = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
};
const getStatusLabel = (status) => {
switch (status) {
case 'INSTOCK':
return 'success';
case 'LOWSTOCK':
return 'warn';
case 'OUTOFSTOCK':
return 'danger';
default:
return null;
}
};
</script>
<template>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<div class="card">
<Toolbar class="mb-6">
<template v-slot:start>
<div class="my-2">
<Button label="New" icon="pi pi-plus" class="mr-2" severity="success" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected"
:disabled="!selectedProducts || !selectedProducts.length" />
</div>
<div>
<div class="card">
<Toolbar class="mb-6">
<template #start>
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template>
<template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
</template>
</Toolbar>
<DataTable
ref="dt"
v-model:selection="selectedProducts"
:value="products"
dataKey="id"
:paginator="true"
:rows="10"
:filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:rowsPerPageOptions="[5, 10, 25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
>
<template #header>
<div class="flex flex-wrap gap-2 items-center justify-between">
<h4 class="m-0">Manage Products</h4>
<IconField>
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Search..." />
</IconField>
</div>
</template>
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
<Column field="code" header="Code" sortable style="min-width: 12rem"></Column>
<Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
</template>
<template v-slot:end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import"
chooseLabel="Import" class="mr-2 inline-block" />
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
</Column>
<Column field="price" header="Price" sortable style="min-width: 8rem">
<template #body="slotProps">
{{ formatCurrency(slotProps.data.price) }}
</template>
</Toolbar>
<DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="id"
:paginator="true" :rows="10" :filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:rowsPerPageOptions="[5, 10, 25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
<template #header>
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
<h5 class="m-0">Manage Products</h5>
<IconField iconPosition="left" class="block mt-2 md:mt-0">
<InputIcon class="pi pi-search" />
<InputText class="w-full sm:w-auto" v-model="filters['global'].value"
placeholder="Search..." />
</IconField>
</div>
</Column>
<Column field="category" header="Category" sortable style="min-width: 10rem"></Column>
<Column field="rating" header="Reviews" sortable style="min-width: 12rem">
<template #body="slotProps">
<Rating :modelValue="slotProps.data.rating" :readonly="true" />
</template>
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
<Column field="code" header="Code" :sortable="true" headerStyle="width:14%; min-width:10rem;">
<template #body="slotProps">
<span class="p-column-title">Code</span>
{{ slotProps.data.code }}
</template>
</Column>
<Column field="name" header="Name" :sortable="true" headerStyle="width:14%; min-width:10rem;">
<template #body="slotProps">
<span class="p-column-title">Name</span>
{{ slotProps.data.name }}
</template>
</Column>
<Column header="Image" headerStyle="width:14%; min-width:10rem;">
<template #body="slotProps">
<span class="p-column-title">Image</span>
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
class="shadow" width="100" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true" headerStyle="width:14%; min-width:8rem;">
<template #body="slotProps">
<span class="p-column-title">Price</span>
{{ formatCurrency(slotProps.data.price) }}
</template>
</Column>
<Column field="category" header="Category" :sortable="true"
headerStyle="width:14%; min-width:10rem;">
<template #body="slotProps">
<span class="p-column-title">Category</span>
{{ slotProps.data.category }}
</template>
</Column>
<Column field="rating" header="Reviews" :sortable="true" headerStyle="width:14%; min-width:10rem;">
<template #body="slotProps">
<span class="p-column-title">Rating</span>
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" :sortable="true"
headerStyle="width:14%; min-width:10rem;">
<template #body="slotProps">
<span class="p-column-title">Status</span>
<Tag :severity="getBadgeSeverity(slotProps.data.inventoryStatus)">{{
slotProps.data.inventoryStatus }}</Tag>
</template>
</Column>
<Column headerStyle="min-width:10rem;">
<template #body="slotProps">
<Button icon="pi pi-pencil" class="mr-2" severity="success" rounded
@click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" class="mt-2" severity="warning" rounded
@click="confirmDeleteProduct(slotProps.data)" />
</template>
</Column>
</DataTable>
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details"
:modal="true" class="p-fluid">
<img :src="'/demo/images/product/' + product.image" :alt="product.image" v-if="product.image"
width="150" class="mt-0 mx-auto mb-8 block shadow" />
<div class="field">
<label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus
:invalid="submitted && !product.name" />
<small class="p-invalid" v-if="submitted && !product.name">Name is required.</small>
</div>
<div class="field">
<label for="description">Description</label>
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
</div>
<div class="field">
<label for="inventoryStatus" class="mb-4">Inventory Status</label>
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses"
optionLabel="label" placeholder="Select a Status">
<template #value="slotProps">
<div v-if="slotProps.value && slotProps.value.value">
<span :class="'product-badge status-' + slotProps.value.value">{{
slotProps.value.label }}</span>
</div>
<div v-else-if="slotProps.value && !slotProps.value.value">
<span :class="'product-badge status-' + slotProps.value.toLowerCase()">{{
slotProps.value }}</span>
</div>
<span v-else>
{{ slotProps.placeholder }}
</span>
</template>
</Dropdown>
</div>
<div class="field">
<label class="mb-4">Category</label>
<div class="formgrid grid grid-cols-12 gap-4">
<div class="field-radiobutton col-span-6">
<RadioButton id="category1" name="category" value="Accessories"
v-model="product.category" />
<label for="category1">Accessories</label>
</div>
<div class="field-radiobutton col-span-6">
<RadioButton id="category2" name="category" value="Clothing"
v-model="product.category" />
<label for="category2">Clothing</label>
</div>
<div class="field-radiobutton col-span-6">
<RadioButton id="category3" name="category" value="Electronics"
v-model="product.category" />
<label for="category3">Electronics</label>
</div>
<div class="field-radiobutton col-span-6">
<RadioButton id="category4" name="category" value="Fitness"
v-model="product.category" />
<label for="category4">Fitness</label>
</div>
</div>
</div>
<div class="formgrid grid grid-cols-12 gap-4">
<div class="field col">
<label for="price">Price</label>
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD"
locale="en-US" :invalid="submitted && !product.price" :required="true" />
<small class="p-invalid" v-if="submitted && !product.price">Price is required.</small>
</div>
<div class="field col">
<label for="quantity">Quantity</label>
<InputNumber id="quantity" v-model="product.quantity" integeronly />
</div>
</div>
<template #footer>
<Button label="Cancel" icon="pi pi-times" text="" @click="hideDialog" />
<Button label="Save" icon="pi pi-check" text="" @click="saveProduct" />
</Column>
<Column field="inventoryStatus" header="Status" sortable style="min-width: 12rem">
<template #body="slotProps">
<Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
</template>
</Dialog>
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm"
:modal="true">
<div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete <b>{{ product.name }}</b>?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
<Button label="Yes" icon="pi pi-check" text @click="deleteProduct" />
</Column>
<Column :exportable="false" style="min-width: 12rem">
<template #body="slotProps">
<Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
</template>
</Dialog>
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm"
:modal="true">
<div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete the selected products?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
<Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
</template>
</Dialog>
</div>
</Column>
</DataTable>
</div>
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
<div class="flex flex-col gap-6">
<img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-4" />
<div>
<label for="name" class="block font-bold mb-3">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
<small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
</div>
<div>
<label for="description" class="block font-bold mb-3">Description</label>
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
</div>
<div>
<label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
</div>
<div>
<span class="block font-bold mb-4">Category</span>
<div class="grid grid-cols-12 gap-4">
<div class="flex items-center gap-2 col-span-6">
<RadioButton id="category1" v-model="product.category" name="category" value="Accessories" />
<label for="category1">Accessories</label>
</div>
<div class="flex items-center gap-2 col-span-6">
<RadioButton id="category2" v-model="product.category" name="category" value="Clothing" />
<label for="category2">Clothing</label>
</div>
<div class="flex items-center gap-2 col-span-6">
<RadioButton id="category3" v-model="product.category" name="category" value="Electronics" />
<label for="category3">Electronics</label>
</div>
<div class="flex items-center gap-2 col-span-6">
<RadioButton id="category4" v-model="product.category" name="category" value="Fitness" />
<label for="category4">Fitness</label>
</div>
</div>
</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-6">
<label for="price" class="block font-bold mb-3">Price</label>
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
</div>
<div class="col-span-6">
<label for="quantity" class="block font-bold mb-3">Quantity</label>
<InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
</div>
</div>
</div>
<template #footer>
<Button label="Cancel" icon="pi pi-times" text @click="hideDialog" />
<Button label="Save" icon="pi pi-check" @click="saveProduct" />
</template>
</Dialog>
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
<div class="flex items-center gap-4">
<i class="pi pi-exclamation-triangle !text-3xl" />
<span v-if="product"
>Are you sure you want to delete <b>{{ product.name }}</b
>?</span
>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
<Button label="Yes" icon="pi pi-check" @click="deleteProduct" />
</template>
</Dialog>
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
<div class="flex items-center gap-4">
<i class="pi pi-exclamation-triangle !text-3xl" />
<span v-if="product">Are you sure you want to delete the selected products?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
<Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
</template>
</Dialog>
</div>
</template>

20
src/views/pages/Timeline.vue → src/views/pages/TimelineDoc.vue
View File

@@ -1,7 +1,7 @@
<script setup>
import { ref } from 'vue';
const customEvents = ref([
const events = ref([
{
status: 'Ordered',
date: '15/10/2020 10:30',
@@ -37,7 +37,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
<div class="col-span-6">
<div class="card">
<h5>Left Align</h5>
<Timeline :value="customEvents">
<Timeline :value="events">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
@@ -47,7 +47,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
<div class="col-span-6">
<div class="card">
<h5>Right Align</h5>
<Timeline :value="customEvents" align="right">
<Timeline :value="events" align="right">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
@@ -57,7 +57,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
<div class="col-span-6">
<div class="card">
<h5>Alternate Align</h5>
<Timeline :value="customEvents" align="alternate">
<Timeline :value="events" align="alternate">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
@@ -67,7 +67,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
<div class="col-span-6">
<div class="card">
<h5>Opposite Content</h5>
<Timeline :value="customEvents">
<Timeline :value="events">
<template #opposite="slotProps">
<small class="p-text-secondary">{{ slotProps.item.date }}</small>
</template>
@@ -80,14 +80,14 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</div>
<div class="card">
<h5>Custom Timeline</h5>
<Timeline :value="customEvents" align="alternate" class="customized-timeline">
<Timeline :value="events" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow" :style="{ backgroundColor: slotProps.item.color }">
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i>
</span>
</template>
<template #content="slotProps">
<Card>
<Card class="mt-4">
<template #title>
{{ slotProps.item.status }}
</template>
@@ -95,12 +95,12 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
{{ slotProps.item.date }}
</template>
<template #content>
<img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow mb-4" />
<img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
neque quas!
</p>
<Button label="Read more" class="p-button-text"></Button>
<Button label="Read more" text></Button>
</template>
</Card>
</template>

17
src/views/pages/auth/Access.vue
View File

@@ -1,22 +1,17 @@
<script setup></script>
<template>
<div
class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center">
<img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div
style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center"
style="border-radius: 53px">
<div class="grid grid-cols-12 gap-4 flex flex-col items-center">
<div class="flex justify-center items-center bg-orange-500 rounded-full"
style="width: 3.2rem; height: 3.2rem">
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<div class="gap-4 flex flex-col items-center">
<div class="flex justify-center items-center bg-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
<i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-lock text-2xl"></i>
</div>
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
<span class="text-surface-600 dark:text-surface-200 mb-8">You do not have the necessary permisions. Please contact
admins.</span>
<span class="text-surface-600 dark:text-surface-200 mb-8">You do not have the necessary permisions. Please contact admins.</span>
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-8" width="80%" />
<div class="col-span-12 mt-8 text-center">
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>

14
src/views/pages/auth/Error.vue
View File

@@ -1,17 +1,13 @@
<script setup></script>
<template>
<div
class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center">
<img src="/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div
style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center"
style="border-radius: 53px">
<div class="grid grid-cols-12 gap-4 flex flex-col items-center">
<div class="flex justify-center items-center bg-pink-500 rounded-full"
style="height: 3.2rem; width: 3.2rem">
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<div class="gap-4 flex flex-col items-center">
<div class="flex justify-center items-center bg-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
</div>
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>

15
src/views/pages/auth/Login.vue
View File

@@ -13,12 +13,10 @@ const logoUrl = computed(() => {
</script>
<template>
<div
class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center">
<img :src="logoUrl" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div
style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
<div class="text-center mb-8">
<img src="/demo/images/login/avatar.png" alt="Image" height="50" class="mb-4" />
@@ -28,20 +26,17 @@ const logoUrl = computed(() => {
<div>
<label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8"
style="padding: 1rem" v-model="email" />
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" style="padding: 1rem" v-model="email" />
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true"
class="w-full mb-4" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password>
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-4" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password>
<div class="flex items-center justify-between mb-8 gap-8">
<div class="flex items-center">
<Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-right cursor-pointer"
style="color: var(--primary-color)">Forgot password?</a>
<a class="font-medium no-underline ml-2 text-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a>
</div>
<Button label="Sign In" class="w-full p-4 text-xl"></Button>
</div>

6
src/views/uikit/FileDoc.vue
View File

@@ -1,7 +1,13 @@
<script setup>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
const toast = useToast();
const fileupload = ref();
const upload = () => {
fileupload.value.upload();
};
const onUpload = () => {
toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });

3
src/views/uikit/FloatLabelDoc.vue
View File

@@ -21,10 +21,9 @@ const value7 = ref(null);
const value8 = ref(null);
const value9 = ref(null);
const value10 = ref(null);
const countryService = new CountryService();
onMounted(() => {
countryService.getCountries().then((data) => (countries.value = data));
CountryService.getCountries().then((data) => (countries.value = data));
});
const searchCountry = (event) => {

2
src/views/uikit/FormLayout.vue
View File

@@ -72,7 +72,7 @@ const dropdownItem = ref(null);
<label for="lastname1" class="sr-only">Lastname</label>
<InputText id="lastname1" type="text" placeholder="Lastname" />
</div>
<Button label="Submit"></Button>
<Button label="Submit" :fluid="false"></Button>
</div>
</div>
<div class="card flex flex-col gap-4">

6
src/views/uikit/InputDoc.vue
View File

@@ -55,12 +55,10 @@ const knobValue = ref(50);
const inputGroupValue = ref(false);
const treeSelectNodes = ref(null);
const selectedNode = ref(null);
const countryService = new CountryService();
const nodeService = new NodeService();
onMounted(() => {
countryService.getCountries().then((data) => (autoValue.value = data));
nodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
CountryService.getCountries().then((data) => (autoValue.value = data));
NodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
});
const searchCountry = (event) => {

3
src/views/uikit/InvalidStateDoc.vue
View File

@@ -21,10 +21,9 @@ const cities = ref([
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
const countryService = new CountryService();
onMounted(() => {
countryService.getCountries().then((data) => {
CountryService.getCountries().then((data) => {
countries.value = data;
});
});

23
src/views/uikit/ListDoc.vue
View File

@@ -28,10 +28,9 @@ const orderlistValue = ref([
const products = ref(null);
const options = ref(['list', 'grid']);
const layout = ref('grid');
const productService = new ProductService();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
ProductService.getProductsSmall().then((data) => (products.value = data));
});
const getSeverity = (product) => {
@@ -81,7 +80,15 @@ const getSeverity = (product) => {
<div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div>
<div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
<div
class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2"
style="
border-radius: 30px;
box-shadow:
0px 1px 2px 0px rgba(0, 0, 0, 0.04),
0px 1px 2px 0px rgba(0, 0, 0, 0.06);
"
>
<span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
<i class="pi pi-star-fill text-yellow-500"></i>
</div>
@@ -117,7 +124,15 @@ const getSeverity = (product) => {
<div class="text-lg font-medium mt-1">{{ item.name }}</div>
</div>
<div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
<div
class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2"
style="
border-radius: 30px;
box-shadow:
0px 1px 2px 0px rgba(0, 0, 0, 0.04),
0px 1px 2px 0px rgba(0, 0, 0, 0.06);
"
>
<span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
<i class="pi pi-star-fill text-yellow-500"></i>
</div>

7
src/views/uikit/MediaDoc.vue
View File

@@ -41,12 +41,9 @@ const carouselResponsiveOptions = ref([
}
]);
const productService = new ProductService();
const photoService = new PhotoService();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
photoService.getImages().then((data) => (images.value = data));
ProductService.getProductsSmall().then((data) => (products.value = data));
PhotoService.getImages().then((data) => (images.value = data));
});
const getSeverity = (status) => {

1
src/views/uikit/MessagesDoc.vue
View File

@@ -6,6 +6,7 @@ const toast = useToast();
const message = ref([]);
const username = ref(null);
const email = ref(null);
const value = ref(null);
const count = ref(0);
const addMessage = (type) => {

3
src/views/uikit/OverlayDoc.vue
View File

@@ -17,12 +17,11 @@ const op = ref(null);
const op2 = ref(null);
const popup = ref(null);
const productService = new ProductService();
const toast = useToast();
const confirmPopup = useConfirm();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
ProductService.getProductsSmall().then((data) => (products.value = data));
});
const open = () => {

4
src/views/uikit/PanelsDoc.vue
View File

@@ -185,8 +185,8 @@ const toggle = () => {
</div>
</div>
<div class="w-full md:w-2/12">
<Divider layout="vertical" class="!hidden md:flex"><b>OR</b></Divider>
<Divider layout="horizontal" class="flex md:!hidden" align="center"><b>OR</b></Divider>
<Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
</div>
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>

29
src/views/uikit/TableDoc.vue
View File

@@ -26,9 +26,6 @@ const representatives = reactive([
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
]);
const customerService = new CustomerService();
const productService = new ProductService();
const getOrderSeverity = (order) => {
switch (order.status) {
case 'DELIVERED':
@@ -67,15 +64,31 @@ const getSeverity = (status) => {
}
};
const getStockSeverity = (product) => {
switch (product.inventoryStatus) {
case 'INSTOCK':
return 'success';
case 'LOWSTOCK':
return 'warn';
case 'OUTOFSTOCK':
return 'danger';
default:
return null;
}
};
onBeforeMount(() => {
productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
customerService.getCustomersLarge().then((data) => {
ProductService.getProductsWithOrdersSmall().then((data) => (products.value = data));
CustomerService.getCustomersLarge().then((data) => {
customers1.value = data;
loading1.value = false;
customers1.value.forEach((customer) => (customer.date = new Date(customer.date)));
});
customerService.getCustomersLarge().then((data) => (customers2.value = data));
customerService.getCustomersMedium().then((data) => (customers3.value = data));
CustomerService.getCustomersLarge().then((data) => (customers2.value = data));
CustomerService.getCustomersMedium().then((data) => (customers3.value = data));
initFilters1();
});
@@ -306,7 +319,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column header="Status">
<template #body="slotProps">
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getStockSeverity(slotProps.data)" />
</template>
</Column>
<template #expansion="slotProps">

5
src/views/uikit/TreeDoc.vue
View File

@@ -6,11 +6,10 @@ const treeValue = ref(null);
const selectedTreeValue = ref(null);
const treeTableValue = ref(null);
const selectedTreeTableValue = ref(null);
const nodeService = new NodeService();
onMounted(() => {
nodeService.getTreeNodes().then((data) => (treeValue.value = data));
nodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
NodeService.getTreeNodes().then((data) => (treeValue.value = data));
NodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
});
</script>