Simplify bonus and order detail views
This commit is contained in:
@@ -1,9 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useQuery } from '@vue/apollo-composable';
|
import { useQuery } from '@vue/apollo-composable';
|
||||||
import {
|
import {
|
||||||
ManagerBonusBalancesDocument,
|
|
||||||
ManagerWithdrawalRequestsDocument,
|
ManagerWithdrawalRequestsDocument,
|
||||||
type ManagerBonusBalancesQuery,
|
|
||||||
type ManagerWithdrawalRequestsQuery,
|
type ManagerWithdrawalRequestsQuery,
|
||||||
} from '~/composables/graphql/generated';
|
} from '~/composables/graphql/generated';
|
||||||
|
|
||||||
@@ -11,55 +9,14 @@ definePageMeta({
|
|||||||
middleware: ['manager-only'],
|
middleware: ['manager-only'],
|
||||||
});
|
});
|
||||||
|
|
||||||
type BalanceItem = ManagerBonusBalancesQuery['managerBonusBalances'][number];
|
|
||||||
type WithdrawalItem = ManagerWithdrawalRequestsQuery['managerWithdrawalRequests'][number];
|
type WithdrawalItem = ManagerWithdrawalRequestsQuery['managerWithdrawalRequests'][number];
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const search = ref('');
|
const search = ref('');
|
||||||
|
|
||||||
const balancesQuery = useQuery(ManagerBonusBalancesDocument);
|
|
||||||
const withdrawalsQuery = useQuery(ManagerWithdrawalRequestsDocument, {
|
const withdrawalsQuery = useQuery(ManagerWithdrawalRequestsDocument, {
|
||||||
status: 'PENDING',
|
status: 'PENDING',
|
||||||
});
|
});
|
||||||
|
|
||||||
const activeTab = computed<'balances' | 'withdrawals'>(() => (
|
|
||||||
route.query.tab === 'withdrawals' ? 'withdrawals' : 'balances'
|
|
||||||
));
|
|
||||||
|
|
||||||
function setTab(tab: 'balances' | 'withdrawals') {
|
|
||||||
void router.replace({
|
|
||||||
query: {
|
|
||||||
...route.query,
|
|
||||||
tab,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const balances = computed<BalanceItem[]>(() => balancesQuery.result.value?.managerBonusBalances ?? []);
|
|
||||||
const withdrawals = computed<WithdrawalItem[]>(() => withdrawalsQuery.result.value?.managerWithdrawalRequests ?? []);
|
const withdrawals = computed<WithdrawalItem[]>(() => withdrawalsQuery.result.value?.managerWithdrawalRequests ?? []);
|
||||||
|
|
||||||
const filteredBalances = computed(() => {
|
|
||||||
const query = search.value.trim().toLowerCase();
|
|
||||||
|
|
||||||
return balances.value.filter((item) => {
|
|
||||||
if (!query) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return [
|
|
||||||
item.fullName,
|
|
||||||
item.email,
|
|
||||||
item.companyName || '',
|
|
||||||
String(item.balance),
|
|
||||||
String(item.pendingWithdrawalAmount),
|
|
||||||
]
|
|
||||||
.join(' ')
|
|
||||||
.toLowerCase()
|
|
||||||
.includes(query);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const filteredWithdrawals = computed(() => {
|
const filteredWithdrawals = computed(() => {
|
||||||
const query = search.value.trim().toLowerCase();
|
const query = search.value.trim().toLowerCase();
|
||||||
|
|
||||||
@@ -88,57 +45,9 @@ const filteredWithdrawals = computed(() => {
|
|||||||
<UiSectionSearchHero
|
<UiSectionSearchHero
|
||||||
v-model="search"
|
v-model="search"
|
||||||
title="Бонусы"
|
title="Бонусы"
|
||||||
:search-placeholder="activeTab === 'balances' ? 'Пользователь, email, компания или сумма' : 'Пользователь, сумма или статус'"
|
search-placeholder="Пользователь, сумма или статус"
|
||||||
>
|
/>
|
||||||
<template #tabs>
|
|
||||||
<div class="tabs tabs-boxed w-fit bg-white">
|
|
||||||
<button
|
|
||||||
class="tab"
|
|
||||||
:class="{ 'tab-active': activeTab === 'balances' }"
|
|
||||||
@click="setTab('balances')"
|
|
||||||
>
|
|
||||||
Балансы
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="tab"
|
|
||||||
:class="{ 'tab-active': activeTab === 'withdrawals' }"
|
|
||||||
@click="setTab('withdrawals')"
|
|
||||||
>
|
|
||||||
Заявки на выплату
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</UiSectionSearchHero>
|
|
||||||
|
|
||||||
<template v-if="activeTab === 'balances'">
|
|
||||||
<div v-if="balancesQuery.loading.value" class="manager-empty-state">
|
|
||||||
Загружаем балансы...
|
|
||||||
</div>
|
|
||||||
<div v-else-if="filteredBalances.length === 0" class="manager-empty-state">
|
|
||||||
Балансы по текущему запросу не найдены.
|
|
||||||
</div>
|
|
||||||
<div v-else class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
|
|
||||||
<article
|
|
||||||
v-for="item in filteredBalances"
|
|
||||||
:key="item.userId"
|
|
||||||
class="surface-card rounded-3xl p-5"
|
|
||||||
>
|
|
||||||
<div class="space-y-1">
|
|
||||||
<h2 class="text-lg font-bold text-[#123824]">{{ item.fullName }}</h2>
|
|
||||||
<p class="text-sm text-[#466653]">{{ item.email }}</p>
|
|
||||||
<p v-if="item.companyName" class="text-sm text-[#466653]">{{ item.companyName }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-4 space-y-2 text-sm text-[#355947]">
|
|
||||||
<p>Баланс: <span class="font-semibold text-[#123824]">{{ item.balance }}</span></p>
|
|
||||||
<p>В ожидании выплаты: {{ item.pendingWithdrawalAmount }}</p>
|
|
||||||
<p>Транзакций: {{ item.transactionsCount }}</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
<div v-if="withdrawalsQuery.loading.value" class="manager-empty-state">
|
<div v-if="withdrawalsQuery.loading.value" class="manager-empty-state">
|
||||||
Загружаем заявки...
|
Загружаем заявки...
|
||||||
</div>
|
</div>
|
||||||
@@ -165,6 +74,5 @@ const filteredWithdrawals = computed(() => {
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -130,17 +130,24 @@ async function completeOrder() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
|
||||||
<div class="manager-hero">
|
<div class="manager-hero">
|
||||||
<p class="manager-eyebrow">Заказ</p>
|
<p class="manager-eyebrow">Заказ</p>
|
||||||
<h1 class="manager-title">{{ currentOrder.code }}</h1>
|
<h1 class="manager-title">{{ currentOrder.code }}</h1>
|
||||||
<p class="manager-copy">Клиент: {{ currentOrder.customerId }} · {{ new Date(currentOrder.createdAt).toLocaleString() }}</p>
|
|
||||||
</div>
|
|
||||||
<OrderStatusBadge :status="currentOrder.status" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
|
<div class="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
|
<div class="surface-card rounded-3xl p-5">
|
||||||
|
<h2 class="text-xl font-bold text-[#123824]">Статус заказа</h2>
|
||||||
|
<div class="mt-4 flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<div class="space-y-1 text-sm text-[#355947]">
|
||||||
|
<p>Создан: {{ new Date(currentOrder.createdAt).toLocaleString() }}</p>
|
||||||
|
<p>Клиент: {{ currentOrder.customerId }}</p>
|
||||||
|
</div>
|
||||||
|
<OrderStatusBadge :status="currentOrder.status" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="surface-card rounded-3xl p-5">
|
<div class="surface-card rounded-3xl p-5">
|
||||||
<h2 class="text-xl font-bold text-[#123824]">Состав заказа</h2>
|
<h2 class="text-xl font-bold text-[#123824]">Состав заказа</h2>
|
||||||
<ul class="mt-4 space-y-3">
|
<ul class="mt-4 space-y-3">
|
||||||
@@ -159,12 +166,6 @@ async function completeOrder() {
|
|||||||
<div class="manager-mini-card text-sm text-[#123824]">
|
<div class="manager-mini-card text-sm text-[#123824]">
|
||||||
Условия: {{ currentOrder.deliveryTerms || 'еще не указаны' }}
|
Условия: {{ currentOrder.deliveryTerms || 'еще не указаны' }}
|
||||||
</div>
|
</div>
|
||||||
<div class="manager-mini-card text-sm text-[#123824]">
|
|
||||||
Стоимость доставки: {{ currentOrder.deliveryFee ?? '—' }}
|
|
||||||
</div>
|
|
||||||
<div class="manager-mini-card text-sm text-[#123824]">
|
|
||||||
Итого: {{ currentOrder.totalPrice ?? '—' }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user