kavehhn/mbmanager-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sakai services updates

Browse Source
This commit is contained in:
tugcekucukoglu
2024-03-29 08:21:34 +03:00
parent 1f5aeb1a21
commit ef6f80dfb1
20 changed files with 155 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/uikit/Media.vue
+49 -31
View File
@@ -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,24 +71,23 @@ 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" />
</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>
<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>
<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>
</Carousel>
@@ -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>