Service updates

src/router/index.js

@@ -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',

src/service/CountryService.js

@@ -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' } })
+        return Promise.resolve(this.getData());
-            .then((res) => res.json())
-            .then((d) => d.data);
     }
-}
+};

src/service/NodeService.js

@@ -1,37 +1,431 @@
-export class NodeService {
+export const NodeService = {
-    getFiles() {
+    getTreeNodesData() {
-        return fetch('/demo/data/files.json', { headers: { 'Cache-Control': 'no-cache' } })
+        return [
-            .then((res) => res.json())
+            {
-            .then((d) => d.data);
+                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() {
+    getTreeTableNodesData() {
-        return fetch('/demo/data/files-lazy.json', { headers: { 'Cache-Control': 'no-cache' } })
+        return [
-            .then((res) => res.json())
+            {
-            .then((d) => d.data);
+                key: '0',
-    }
+                data: {
-
+                    name: 'Applications',
-    getFilesystem() {
+                    size: '100kb',
-        return fetch('/demo/data/filesystem.json', { headers: { 'Cache-Control': 'no-cache' } })
+                    type: 'Folder'
-            .then((res) => res.json())
+                },
-            .then((d) => d.data);
+                children: [
-    }
+                    {
-
+                        key: '0-0',
-    getLazyFilesystem() {
+                        data: {
-        return fetch('/demo/data/filesystem-lazy.json', { headers: { 'Cache-Control': 'no-cache' } })
+                            name: 'Vue',
-            .then((res) => res.json())
+                            size: '25kb',
-            .then((d) => d.data);
+                            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')
+        return Promise.resolve(this.getTreeTableNodesData());
-            .then((res) => res.json())
+    },
-            .then((d) => d.root);
-    }
 
     getTreeNodes() {
-        return fetch('/demo/data/treenodes.json')
+        return Promise.resolve(this.getTreeNodesData());
-            .then((res) => res.json())
-            .then((d) => d.root);
     }
-}
+};

src/service/PhotoService.js

@@ -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' } })
+        return Promise.resolve(this.getData());
-            .then((res) => res.json())
-            .then((d) => d.data);
     }
-}
+};

src/views/Dashboard.vue

@@ -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"
+                    <div class="flex items-center justify-center bg-blue-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                        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"
+                    <div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                        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"
+                    <div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                        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"
+                    <div class="flex items-center justify-center bg-purple-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                        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"
+                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow" />
-                                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"
+                        <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu2.toggle($event)"></Button>
-                            @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"
+                        <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu1.toggle($event)"></Button>
-                            @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
+                        <div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
-                            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-900 dark:text-surface-0 leading-normal"
-                            <span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span
+                            >Richard Jones
-                                    class="text-blue-500">79$</span></span>
+                            <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
+                        <div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-full mr-4 shrink-0">
-                            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
+                        <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>
-                                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
+                        <div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
-                            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-900 dark:text-surface-0 leading-normal"
-                            <span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span
+                            >Keyser Wick
-                                    class="text-blue-500">59$</span></span>
+                            <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
+                        <div class="w-12 h-12 flex items-center justify-center bg-pink-100 rounded-full mr-4 shrink-0">
-                            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"
+            <div
-                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%)">
+                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"
+                    <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>
-                        class="p-button font-bold px-8 py-4 p-button-warning p-button-rounded p-button-raised"> Get
-                        Started </a>
                 </div>
             </div>
         </div>

src/views/pages/Crud.vue

@@ -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 dt = ref();
-const products = ref(null);
+const products = ref();
 const productDialog = ref(false);
 const deleteProductDialog = ref(false);
 const deleteProductsDialog = ref(false);
 const product = ref({});
-const selectedProducts = ref(null);
+const selectedProducts = ref();
-const dt = ref(null);
+const filters = 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 = (prod) => {
-const editProduct = (editProduct) => {
+    product.value = { ...prod };
-    product.value = { ...editProduct };
     productDialog.value = true;
 };
-
+const confirmDeleteProduct = (prod) => {
-const confirmDeleteProduct = (editProduct) => {
+    product.value = prod;
-    product.value = editProduct;
     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';
+    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    for (let i = 0; i < 5; i++) {
+    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 = () => {
+const getStatusLabel = (status) => {
-    filters.value = {
+    switch (status) {
-        global: { value: null, matchMode: FilterMatchMode.CONTAINS }
+        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>
-        <div class="col-span-12">
+        <div class="card">
-            <div class="card">
+            <Toolbar class="mb-6">
-                <Toolbar class="mb-6">
+                <template #start>
-                    <template v-slot:start>
+                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
-                        <div class="my-2">
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
-                            <Button label="New" icon="pi pi-plus" class="mr-2" severity="success" @click="openNew" />
+                </template>
-                            <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected"
+
-                                :disabled="!selectedProducts || !selectedProducts.length" />
+                <template #end>
-                        </div>
+                    <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>
-
+                </Column>
-                    <template v-slot:end>
+                <Column field="price" header="Price" sortable style="min-width: 8rem">
-                        <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import"
+                    <template #body="slotProps">
-                            chooseLabel="Import" class="mr-2 inline-block" />
+                        {{ formatCurrency(slotProps.data.price) }}
-                        <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
                     </template>
-                </Toolbar>
+                </Column>
-
+                <Column field="category" header="Category" sortable style="min-width: 10rem"></Column>
-                <DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="id"
+                <Column field="rating" header="Reviews" sortable style="min-width: 12rem">
-                    :paginator="true" :rows="10" :filters="filters"
+                    <template #body="slotProps">
-                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        <Rating :modelValue="slotProps.data.rating" :readonly="true" />
-                    :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>
                     </template>
-
+                </Column>
-                    <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+                <Column field="inventoryStatus" header="Status" sortable style="min-width: 12rem">
-                    <Column field="code" header="Code" :sortable="true" headerStyle="width:14%; min-width:10rem;">
+                    <template #body="slotProps">
-                        <template #body="slotProps">
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
-                            <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" />
                     </template>
-                </Dialog>
+                </Column>
-
+                <Column :exportable="false" style="min-width: 12rem">
-                <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm"
+                    <template #body="slotProps">
-                    :modal="true">
+                        <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
-                    <div class="flex items-center justify-center">
+                        <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
-                        <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" />
                     </template>
-                </Dialog>
+                </Column>
-
+            </DataTable>
-                <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>
         </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>

src/views/pages/TimelineDoc.vue

@@ -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>

src/views/pages/auth/Access.vue

@@ -1,22 +1,17 @@
 <script setup></script>
 
 <template>
-    <div
+    <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
-        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
+            <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%)">
-                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="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center"
+                    <div class="gap-4 flex flex-col items-center">
-                    style="border-radius: 53px">
+                        <div class="flex justify-center items-center bg-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
-                    <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">
                             <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
+                        <span class="text-surface-600 dark:text-surface-200 mb-8">You do not have the necessary permisions. Please contact admins.</span>
-                            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>

src/views/pages/auth/Error.vue

@@ -1,17 +1,13 @@
 <script setup></script>
 
 <template>
-    <div
+    <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
-        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
+            <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%)">
-                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="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center"
+                    <div class="gap-4 flex flex-col items-center">
-                    style="border-radius: 53px">
+                        <div class="flex justify-center items-center bg-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
-                    <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">
                             <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>

src/views/pages/auth/Login.vue

@@ -13,12 +13,10 @@ const logoUrl = computed(() => {
 </script>
 
 <template>
-    <div
+    <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
-        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
+            <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
-                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"
+                        <InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" style="padding: 1rem" v-model="email" />
-                            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"
+                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-4" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password>
-                            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"
+                            <a class="font-medium no-underline ml-2 text-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a>
-                                style="color: var(--primary-color)">Forgot password?</a>
                         </div>
                         <Button label="Sign In" class="w-full p-4 text-xl"></Button>
                     </div>

src/views/uikit/FileDoc.vue

@@ -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 });

src/views/uikit/FloatLabelDoc.vue

@@ -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) => {

src/views/uikit/FormLayout.vue

@@ -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">

src/views/uikit/InputDoc.vue

@@ -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));
+    CountryService.getCountries().then((data) => (autoValue.value = data));
-    nodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
+    NodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
 });
 
 const searchCountry = (event) => {

src/views/uikit/InvalidStateDoc.vue

@@ -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;
     });
 });

src/views/uikit/ListDoc.vue

@@ -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>

src/views/uikit/MediaDoc.vue

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

src/views/uikit/MessagesDoc.vue

@@ -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) => {

src/views/uikit/OverlayDoc.vue

@@ -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 = () => {

src/views/uikit/PanelsDoc.vue

@@ -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="vertical" class="hidden md:flex"><b>OR</b></Divider>
-                    <Divider layout="horizontal" class="flex md:!hidden" align="center"><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>

src/views/uikit/TableDoc.vue

@@ -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));
+    ProductService.getProductsWithOrdersSmall().then((data) => (products.value = data));
-    customerService.getCustomersLarge().then((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.getCustomersLarge().then((data) => (customers2.value = data));
-    customerService.getCustomersMedium().then((data) => (customers3.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">

src/views/uikit/TreeDoc.vue

@@ -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.getTreeNodes().then((data) => (treeValue.value = data));
-    nodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
+    NodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
 });
 </script>