Sakai services updates

public/demo/data/photos.json

@@ -1,92 +1,92 @@
 {
     "data":[
         {
-            "itemImageSrc": "demo/images/galleria/galleria1.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria1.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria1s.jpg",
             "alt": "Description for Image 1",
             "title": "Title 1"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria2.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria2.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria2s.jpg",
             "alt": "Description for Image 2",
             "title": "Title 2"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria3.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria3.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria3s.jpg",
             "alt": "Description for Image 3",
             "title": "Title 3"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria4.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria4.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria4s.jpg",
             "alt": "Description for Image 4",
             "title": "Title 4"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria5.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria5.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria5s.jpg",
             "alt": "Description for Image 5",
             "title": "Title 5"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria6.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria6.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria6s.jpg",
             "alt": "Description for Image 6",
             "title": "Title 6"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria7.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria7.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria7s.jpg",
             "alt": "Description for Image 7",
             "title": "Title 7"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria8.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria8.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria8s.jpg",
             "alt": "Description for Image 8",
             "title": "Title 8"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria9.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria9.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria9s.jpg",
             "alt": "Description for Image 9",
             "title": "Title 9"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria10.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria10.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria10s.jpg",
             "alt": "Description for Image 10",
             "title": "Title 10"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria11.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria11.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria11s.jpg",
             "alt": "Description for Image 11",
             "title": "Title 11"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria12.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria12.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria12s.jpg",
             "alt": "Description for Image 12",
             "title": "Title 12"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria13.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria13.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria13s.jpg",
             "alt": "Description for Image 13",
             "title": "Title 13"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria14.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria14.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria14s.jpg",
             "alt": "Description for Image 14",
             "title": "Title 14"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria15.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria15.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria15s.jpg",
             "alt": "Description for Image 15",
             "title": "Title 15"
         }

src/layout/AppFooter.vue

@@ -5,7 +5,7 @@ import { computed } from 'vue';
 const { layoutConfig } = useLayout();
 
 const logoUrl = computed(() => {
-    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
 </script>
 

src/layout/AppTopbar.vue

@@ -18,7 +18,7 @@ onBeforeUnmount(() => {
 });
 
 const logoUrl = computed(() => {
-    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
 
 const onTopBarMenuButton = () => {

src/service/CountryService.js

@@ -1,6 +1,6 @@
-export default class CountryService {
+export class CountryService {
     getCountries() {
-        return fetch('demo/data/countries.json')
+        return fetch('/demo/data/countries.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }

src/service/CustomerService.js

@@ -1,32 +1,18 @@
-export default class CustomerService {
+export class CustomerService {
     getCustomersSmall() {
-        return fetch('demo/data/customers-small.json')
+        return fetch('/demo/data/customers-small.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
-
     getCustomersMedium() {
-        return fetch('demo/data/customers-medium.json')
+        return fetch('/demo/data/customers-medium.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getCustomersLarge() {
-        return fetch('demo/data/customers-large.json')
+        return fetch('/demo/data/customers-large.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
-
-    getCustomersXLarge() {
-        return fetch('demo/data/customers-xlarge.json')
-            .then((res) => res.json())
-            .then((d) => d.data);
-    }
-
-    getCustomers(params) {
-        const queryParams = Object.keys(params)
-            .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
-            .join('&');
-        return fetch('https://www.primefaces.org//demo/data/customers?' + queryParams).then((res) => res.json());
-    }
 }

src/service/NodeService.js

@@ -1,12 +1,36 @@
-export default class NodeService {
+export class NodeService {
+    getFiles() {
+        return fetch('/demo/data/files.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
+    getLazyFiles() {
+        return fetch('/demo/data/files-lazy.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
+    getFilesystem() {
+        return fetch('/demo/data/filesystem.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
+    getLazyFilesystem() {
+        return fetch('/demo/data/filesystem-lazy.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
     getTreeTableNodes() {
-        return fetch('demo/data/treetablenodes.json')
+        return fetch('/demo/data/treetablenodes.json')
             .then((res) => res.json())
             .then((d) => d.root);
     }
 
     getTreeNodes() {
-        return fetch('demo/data/treenodes.json')
+        return fetch('/demo/data/treenodes.json')
             .then((res) => res.json())
             .then((d) => d.root);
     }

src/service/PhotoService.js

@@ -1,6 +1,6 @@
-export default class PhotoService {
+export class PhotoService {
     getImages() {
-        return fetch('demo/data/photos.json')
+        return fetch('/demo/data/photos.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }

src/service/ProductService.js

@@ -1,18 +1,30 @@
-export default class ProductService {
+export class ProductService {
     getProductsSmall() {
-        return fetch('demo/data/products-small.json')
+        return fetch('/demo/data/products-small.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getProducts() {
-        return fetch('demo/data/products.json')
+        return fetch('/demo/data/products.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
+    getProductsMixed() {
+        return fetch('/demo/data/products-mixed.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getProductsWithOrdersSmall() {
-        return fetch('demo/data/products-orders-small.json')
+        return fetch('/demo/data/products-orders-small.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
+    getProductsWithOrdersLarge() {
+        return fetch('/demo/data/products-orders.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }

src/views/Dashboard.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, reactive, ref, watch } from 'vue';
-import ProductService from '@/service/ProductService';
+import { ProductService } from '@/service/ProductService';
 import { useLayout } from '@/layout/composables/layout';
 
 const { isDarkTheme } = useLayout();

src/views/pages/Crud.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { FilterMatchMode } from 'primevue/api';
 import { ref, onMounted, onBeforeMount } from 'vue';
-import ProductService from '@/service/ProductService';
+import { ProductService } from '@/service/ProductService';
 import { useToast } from 'primevue/usetoast';
 
 const toast = useToast();

src/views/pages/Timeline.vue

@@ -95,7 +95,7 @@ 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-2 mb-3" />
+                        <img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
                         <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!

src/views/uikit/FloatLabel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import CountryService from '@/service/CountryService';
+import { CountryService } from '@/service/CountryService';
 
 const countries = ref([]);
 const cities = ref([

src/views/uikit/Input.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import CountryService from '@/service/CountryService';
-import NodeService from '@/service/NodeService';
+import { CountryService } from '@/service/CountryService';
+import { NodeService } from '@/service/NodeService';
 
 const floatValue = ref(null);
 const autoValue = ref(null);

src/views/uikit/InvalidState.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import CountryService from '@/service/CountryService';
+import { CountryService } from '@/service/CountryService';
 
 const countries = ref(null);
 const filteredCountries = ref(null);

src/views/uikit/List.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import ProductService from '@/service/ProductService';
+import { ProductService } from '@/service/ProductService';
 
 const picklistValue = ref([
     [

src/views/uikit/Media.vue

@@ -1,6 +1,6 @@
 <script setup>
-import ProductService from '@/service/ProductService';
-import PhotoService from '@/service/PhotoService';
+import { ProductService } from '@/service/ProductService';
+import { PhotoService } from '@/service/PhotoService';
 import { ref, onMounted } from 'vue';
 
 const products = ref([]);
@@ -48,6 +48,22 @@ onMounted(() => {
     productService.getProductsSmall().then((data) => (products.value = data));
     photoService.getImages().then((data) => (images.value = data));
 });
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
 </script>
 
 <template>
@@ -55,23 +71,22 @@ onMounted(() => {
         <div class="col-12">
             <div class="card">
                 <h5>Carousel</h5>
-                <Carousel :value="products" :numVisible="3" :numScroll="3" :circular="false" :responsiveOptions="carouselResponsiveOptions">
-                    <template #item="product">
-                        <div class="border-round m-2 text-center p-2" style="border: 1px solid var(--surface-d)">
-                            <div class="my-5">
-                                <img :src="'demo/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
+                <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
+                    <template #item="slotProps">
+                        <div class="border-1 surface-border border-round m-2 p-3">
+                            <div class="mb-3">
+                                <div class="relative mx-auto">
+                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
                                 </div>
-                            <div>
-                                <h5 class="mb-1">
-                                    {{ product.data.name }}
-                                </h5>
-                                <h6 class="mt-0 mb-3">${{ product.data.price }}</h6>
-                                <Badge :class="'product-badge status-' + product.data.inventoryStatus.toLowerCase()">{{ product.data.inventoryStatus }}</Badge>
-                                <div class="my-5">
-                                    <Button icon="pi pi-search" class="mr-2 p-button-rounded"></Button>
-                                    <Button icon="pi pi-star-fill" class="mr-2 p-button-rounded p-button-success"></Button>
-                                    <Button icon="pi pi-cog" class="p-button-rounded p-button-info"></Button>
                             </div>
+                            <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                            <div class="flex justify-content-between align-items-center">
+                                <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
+                                <span>
+                                    <Button icon="pi pi-heart" severity="secondary" outlined />
+                                    <Button icon="pi pi-shopping-cart" class="ml-2" />
+                                </span>
                             </div>
                         </div>
                     </template>
@@ -81,24 +96,27 @@ onMounted(() => {
 
         <div class="col-12">
             <div class="card">
-                <h5>Galleria</h5>
-                <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px; margin: auto">
-                    <template #item="slotProps">
-                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                    </template>
-                    <template #thumbnail="slotProps">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
-                    </template>
-                </Galleria>
+                <h5>Image</h5>
+                <div class="flex justify-content-center">
+                    <Image :src="'/demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
+                </div>
             </div>
         </div>
 
         <div class="col-12">
             <div class="card">
-                <h5>Image</h5>
-                <div class="flex justify-content-center">
-                    <Image :src="'demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
-                </div>
+                <h5>Galleria</h5>
+                <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7"
+                    :circular="true" containerStyle="max-width: 800px; margin: auto">
+                    <template #item="slotProps">
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt"
+                            style="width: 100%; display: block" />
+                    </template>
+                    <template #thumbnail="slotProps">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt"
+                            tyle="width: 100%; display: block;" />
+                    </template>
+                </Galleria>
             </div>
         </div>
     </div>

src/views/uikit/Misc.vue

@@ -75,11 +75,11 @@ onBeforeUnmount(() => {
                 <h4>Avatar</h4>
                 <h5>Avatar Group</h5>
                 <AvatarGroup class="mb-3">
-                    <Avatar :image="'demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'demo/images/avatar/ionibowcher.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'demo/images/avatar/xuxuefeng.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'/demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'/demo/images/avatar/ionibowcher.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'/demo/images/avatar/xuxuefeng.png'" size="large" shape="circle"></Avatar>
                     <Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
                 </AvatarGroup>
 
@@ -151,9 +151,9 @@ onBeforeUnmount(() => {
 
                 <h5>Image</h5>
                 <div class="flex align-items-center flex-column sm:flex-row">
-                    <Chip label="Amy Elsner" :image="'demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
-                    <Chip label="Asiya Javayant" :image="'demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
-                    <Chip label="Onyama Limba" :image="'demo/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Amy Elsner" :image="'/demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Asiya Javayant" :image="'/demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Onyama Limba" :image="'/demo/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip>
                 </div>
             </div>
 

src/views/uikit/Overlay.vue

@@ -1,8 +1,8 @@
 <script setup>
-import ProductService from '@/service/ProductService';
 import { ref, onMounted } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
+import { ProductService } from '@/service/ProductService';
 
 const display = ref(false);
 const displayConfirmation = ref(false);

src/views/uikit/Table.vue

@@ -1,8 +1,8 @@
 <script setup>
+import { ref, onBeforeMount, reactive } from 'vue';
 import { FilterMatchMode, FilterOperator } from 'primevue/api';
-import CustomerService from '@/service/CustomerService';
-import ProductService from '@/service/ProductService';
-import { ref, onBeforeMount } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+import { ProductService } from '@/service/ProductService';
 
 const customer1 = ref(null);
 const customer2 = ref(null);
@@ -13,8 +13,8 @@ const loading2 = ref(null);
 const idFrozen = ref(false);
 const products = ref(null);
 const expandedRows = ref([]);
-const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
-const representatives = ref([
+const statuses = reactive(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+const representatives = reactive([
     { name: 'Amy Elsner', image: 'amyelsner.png' },
     { name: 'Anna Fali', image: 'annafali.png' },
     { name: 'Asiya Javayant', image: 'asiyajavayant.png' },

src/views/uikit/Tree.vue

@@ -1,6 +1,6 @@
 <script setup>
-import NodeService from '@/service/NodeService';
 import { onMounted, ref } from 'vue';
+import { NodeService } from '@/service/NodeService';
 
 const treeValue = ref(null);
 const selectedTreeValue = ref(null);