27 lines
1.1 KiB
Vue
27 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { useQuery } from '@vue/apollo-composable';
|
|
import { ClientProductsDocument } from '~/composables/graphql/generated';
|
|
|
|
const { result, loading, error } = useQuery(ClientProductsDocument);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="space-y-4">
|
|
<h1 class="text-2xl font-bold">Витрина товаров</h1>
|
|
<div v-if="loading" class="alert">Загрузка...</div>
|
|
<div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
|
|
<div v-else class="grid gap-4 lg:grid-cols-2">
|
|
<article v-for="product in result?.clientProducts ?? []" :key="product.id" class="card bg-base-100 border border-base-300">
|
|
<div class="card-body gap-2">
|
|
<h2 class="card-title">{{ product.name }}</h2>
|
|
<p class="text-sm opacity-80">{{ product.description }}</p>
|
|
<p class="text-xs">SKU: {{ product.sku }}</p>
|
|
<ul class="text-sm space-y-1">
|
|
<li v-for="stock in product.availableInWarehouses" :key="stock.warehouse.id">{{ stock.warehouse.name }}: {{ stock.availableQty }}</li>
|
|
</ul>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|