85 lines
2.7 KiB
Vue
85 lines
2.7 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
import AdminPageSkeleton from '@/components/ui/AdminPageSkeleton.vue'
|
||
import BaseEmptyState from '@/components/ui/BaseEmptyState.vue'
|
||
import { stockAlertsApi, type StockAlert } from '@/services/api'
|
||
import { ApiError } from '@/services/http'
|
||
import { useToast } from '@/composables/useToast'
|
||
|
||
const list = ref<StockAlert[]>([])
|
||
const loading = ref(true)
|
||
const toast = useToast()
|
||
|
||
async function load() {
|
||
loading.value = true
|
||
try {
|
||
list.value = await stockAlertsApi.list()
|
||
} catch (err) {
|
||
toast.error(err instanceof ApiError ? err.message : 'بارگذاری ناموفق بود')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
async function notify(id: string) {
|
||
try {
|
||
await stockAlertsApi.notify(id)
|
||
toast.success('اعلان موجودی ارسال شد')
|
||
await load()
|
||
} catch (err) {
|
||
toast.error(err instanceof ApiError ? err.message : 'ارسال ناموفق بود')
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
void load()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="admin-page">
|
||
<header class="admin-page__head">
|
||
<div>
|
||
<h1>درخواست خبر موجودی</h1>
|
||
<p>مشتریانی که برای محصول ناموجود درخواست اطلاع دادهاند</p>
|
||
</div>
|
||
</header>
|
||
|
||
<AdminPageSkeleton v-if="loading" variant="table" />
|
||
<BaseEmptyState v-else-if="!list.length" title="درخواستی فعال نیست" />
|
||
|
||
<table v-else class="admin-table">
|
||
<thead>
|
||
<tr>
|
||
<th>مشتری</th>
|
||
<th>محصول</th>
|
||
<th>موجودی فعلی</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="row in list" :key="row.id">
|
||
<td>
|
||
{{ row.customerName }}
|
||
<span class="muted" dir="ltr">{{ row.customerPhone }}</span>
|
||
</td>
|
||
<td>{{ row.productName }} <span class="muted" dir="ltr">({{ row.productCode }})</span></td>
|
||
<td>{{ row.stock ?? '—' }}</td>
|
||
<td>
|
||
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="notify(row.id)">ارسال اعلان</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.admin-page__head { margin-bottom: 20px; }
|
||
.admin-page__head h1 { margin: 0 0 4px; font-size: 1.25rem; }
|
||
.admin-page__head p { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; }
|
||
.admin-table { width: 100%; border-collapse: collapse; }
|
||
.admin-table th, .admin-table td { text-align: right; padding: 10px 8px; border-bottom: 1px solid var(--color-border); }
|
||
.muted { color: var(--color-text-muted); font-size: 0.75rem; margin-right: 6px; }
|
||
</style>
|