@coopenomics/desktop 2025.7.3 → 2025.11.8-alpha-2

package/src/widgets/Cooperative/Orders/ListOfOrders/ui/ListOfOrdersWidget.vue

@@ -1,216 +1,256 @@
 <template lang="pug">
-  div.row.justify-center
-    div.col-12
-      div.scroll-area(style="height: calc(100% - $toolbar-min-height); overflow-y: auto;")
-        q-table(
-          v-if="payments && payments.items"
-          ref="tableRef"
-          flat
-          :grid="isMobile"
-          :rows="payments.items"
-          row-key="id"
-          :columns="columns"
-          :table-colspan="9"
-          :loading="onLoading"
-          :no-data-label="'платежи не найдены'"
-          virtual-scroll
-          @virtual-scroll="onScroll"
-          :virtual-scroll-target="'.scroll-area'"
-          :virtual-scroll-item-size="48"
-          :virtual-scroll-sticky-size-start="48"
-          :rows-per-page-options="[0]"
-          :pagination="pagination"
-          class="q-mb-md"
-        )
-          template(#item="props")
-            OrderCard(
-              :order="props.row"
-              :expanded="expanded.get(props.row.id)"
-              :hideActions="hideActions"
-              @toggle-expand="toggleExpand(props.row.id)"
-            )
-
-          template(#header="props")
-            q-tr(:props="props")
-              q-th(auto-width)
-              q-th(
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-                @click="onSort(col)"
-              ) {{ col.label }}
-
-          template(#body="props")
-            q-tr(:key="`m_${props.row.id}`" :props="props")
-              q-td(auto-width)
-                q-btn(
-                  size="sm"
-                  color="primary"
-                  round
-                  dense
-                  :icon="expanded.get(props.row.id) ? 'expand_more' : 'chevron_right'"
-                  @click="toggleExpand(props.row.id)"
-                )
-              q-td {{props.row.id}}
-              q-td {{ props.row.amount }} {{props.row.symbol}}
-              q-td
-                q-badge(v-if="props.row.details.data.includes('registration')") регистрационный
-                q-badge(v-else) паевой
-
-              q-td(style="max-width: 150px; word-wrap: break-word; white-space: normal;") {{props.row.username}}
-
-
-              q-td
-                q-badge(v-if="props.row.status ==='COMPLETED'" color="teal") обработан
-                q-badge(v-if="props.row.status ==='PENDING'" color="orange") ожидание оплаты
-                q-badge(v-if="props.row.status ==='FAILED'" color="red") ошибка
-                q-badge(v-if="props.row.status ==='PAID'" color="orange") оплачен
-                q-badge(v-if="props.row.status ==='REFUNDED'" color="grey") отменён
-                q-badge(v-if="props.row.status ==='EXPIRED'" color="grey") истёк
-              q-td
-                SetOrderPaidStatusButton(
-                  v-if="!hideActions && ['EXPIRED', 'PENDING', 'FAILED'].includes(props.row.status)"
-                  :id="props.row.id"
-                )
-                span(v-else-if="!hideActions").text-grey нет доступных действий
-
-            q-tr(v-if="expanded.get(props.row.id)" :key="`e_${props.row.id}`" :props="props" class="q-virtual-scroll--with-prev")
-              q-td(colspan="100%")
-                div(v-if="props.row.status=='FAILED'")
-                  span Причина ошибки: {{props.row.message ?? 'нет дополнительной информации'}}
-                div(v-else)
-                  span нет дополнительной информации
+.row.justify-center
+  .col-12
+    .scroll-area(
+      style='height: calc(100% - $toolbar-min-height); overflow-y: auto'
+    )
+      q-table.q-mb-md(
+        v-if='payments && payments.items',
+        ref='tableRef',
+        flat,
+        :grid='isMobile',
+        :rows='payments.items',
+        row-key='id',
+        :columns='columns',
+        :table-colspan='9',
+        :loading='onLoading',
+        :no-data-label='"платежи не найдены"',
+        virtual-scroll,
+        @virtual-scroll='onScroll',
+        :virtual-scroll-target='".scroll-area"',
+        :virtual-scroll-item-size='48',
+        :virtual-scroll-sticky-size-start='48',
+        :rows-per-page-options='[0]',
+        :pagination='pagination'
+      )
+        template(#item='props')
+          OrderCard(
+            :order='props.row',
+            :expanded='expanded.get(props.row.id)',
+            :hideActions='hideActions',
+            @toggle-expand='toggleExpand(props.row.id)'
+          )
+
+        template(#header='props')
+          q-tr(:props='props')
+            q-th(auto-width)
+            q-th(
+              v-for='col in props.cols',
+              :key='col.name',
+              :props='props',
+              @click='onSort(col)'
+            ) {{ col.label }}
+
+        template(#body='props')
+          q-tr(:key='`m_${props.row.id}`', :props='props')
+            q-td(auto-width)
+              q-btn(
+                size='sm',
+                color='primary',
+                round,
+                dense,
+                :icon='expanded.get(props.row.id) ? "expand_more" : "chevron_right"',
+                @click='toggleExpand(props.row.id)'
+              )
+            q-td {{ props.row.id }}
+            q-td {{ props.row.amount }} {{ props.row.symbol }}
+            q-td
+              q-badge(v-if='props.row.details.data.includes("registration")') регистрационный
+              q-badge(v-else) паевой
+
+            q-td(
+              style='max-width: 150px; word-wrap: break-word; white-space: normal'
+            ) {{ props.row.username }}
+
+            q-td
+              q-badge(v-if='props.row.status === "COMPLETED"', color='teal') обработан
+              q-badge(v-if='props.row.status === "PENDING"', color='orange') ожидание оплаты
+              q-badge(v-if='props.row.status === "FAILED"', color='red') ошибка
+              q-badge(v-if='props.row.status === "PAID"', color='orange') оплачен
+              q-badge(v-if='props.row.status === "REFUNDED"', color='grey') отменён
+              q-badge(v-if='props.row.status === "EXPIRED"', color='grey') истёк
+            q-td
+              SetOrderPaidStatusButton(
+                v-if='!hideActions && ["EXPIRED", "PENDING", "FAILED"].includes(props.row.status)',
+                :id='props.row.id'
+              )
+              span.text-grey(v-else-if='!hideActions') нет доступных действий
+
+          q-tr.q-virtual-scroll--with-prev(
+            v-if='expanded.get(props.row.id)',
+            :key='`e_${props.row.id}`',
+            :props='props'
+          )
+            q-td(colspan='100%')
+              div(v-if='props.row.status == "FAILED"')
+                span Причина ошибки: {{ props.row.message ?? 'нет дополнительной информации' }}
+              div(v-else)
+                span нет дополнительной информации
 </template>
 <script setup lang="ts">
-  import { onMounted, ref, computed, reactive, nextTick } from 'vue'
-  import { Notify } from 'quasar'
-  import { usePaymentStore } from 'src/entities/Payment/model';
-  import { SetOrderPaidStatusButton } from 'src/features/Payment/SetStatus/ui/SetOrderPaidStatusButton';
-  import OrderCard from './OrderCard.vue';
-  import { useWindowSize } from 'src/shared/hooks';
-
-  const paymentStore = usePaymentStore()
-  const payments = computed(() => paymentStore.payments)
-  const onLoading = ref(false)
-  const nextPage = ref(1)
-  const lastPage = ref(1);
-  const { isMobile } = useWindowSize()
-
-  const sortState = reactive({
-    sortBy: '',
-    sortDir: ''
-  })
-
-  const onSort = (col) => {
-    if (!col.sortable) return
-
-    // Меняем направление сортировки, если кликнули на тот же столбец
-    if (sortState.sortBy === col.name) {
-      sortState.sortDir = sortState.sortDir === 'asc' ? 'desc' : 'asc'
-    } else {
-      // Если сортируем новый столбец, сбрасываем на 'asc'
-      sortState.sortBy = col.name
-      sortState.sortDir = 'asc'
-    }
-    paymentStore.clear()
-    nextPage.value = 1
-    lastPage.value = 1
-    loadPayments(1) // Перезагружаем с новыми параметрами сортировки
+import { onMounted, ref, computed, reactive, nextTick } from 'vue';
+import { FailAlert } from 'src/shared/api';
+import { usePaymentStore } from 'src/entities/Payment/model';
+import { SetOrderPaidStatusButton } from 'src/features/Payment/SetStatus/ui/SetOrderPaidStatusButton';
+import OrderCard from './OrderCard.vue';
+import { useWindowSize } from 'src/shared/hooks';
+
+const paymentStore = usePaymentStore();
+const payments = computed(() => paymentStore.payments);
+const onLoading = ref(false);
+const nextPage = ref(1);
+const lastPage = ref(1);
+const { isMobile } = useWindowSize();
+
+const sortState = reactive({
+  sortBy: '',
+  sortDir: '',
+});
+
+const onSort = (col) => {
+  if (!col.sortable) return;
+
+  // Меняем направление сортировки, если кликнули на тот же столбец
+  if (sortState.sortBy === col.name) {
+    sortState.sortDir = sortState.sortDir === 'asc' ? 'desc' : 'asc';
+  } else {
+    // Если сортируем новый столбец, сбрасываем на 'asc'
+    sortState.sortBy = col.name;
+    sortState.sortDir = 'asc';
   }
+  paymentStore.clear();
+  nextPage.value = 1;
+  lastPage.value = 1;
+  loadPayments(1); // Перезагружаем с новыми параметрами сортировки
+};
 
-  const props = defineProps({
-    username: {
-      type: String,
-      required: false,
-      default: null
-    },
-    hideActions: {
-      type: Boolean,
-      default: false
-    }
-  })
-
-  const loadPayments = async (page = 1) => {
-    try {
-      onLoading.value = true
-
-      // Данные для фильтрации
-      const data = props.username ? { username: props.username } : undefined;
-
-      // Опции пагинации и сортировки
-      const options = {
-        page,
-        limit: 25,
-        sortBy: sortState.sortBy || undefined,
-        sortOrder: sortState.sortDir ? sortState.sortDir.toUpperCase() as 'ASC' | 'DESC' : 'ASC'
-      };
-
-      await paymentStore.loadPayments(data, options);
-
-      if (payments.value) {
-        lastPage.value = payments.value.totalPages || 1
-      }
-
-      onLoading.value = false
-    } catch (e: any) {
-      onLoading.value = false
-      console.log(e)
-      Notify.create({
-        message: e.message,
-        type: 'negative',
-      })
+const props = defineProps({
+  username: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  hideActions: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const loadPayments = async (page = 1) => {
+  try {
+    onLoading.value = true;
+
+    // Данные для фильтрации
+    const data = props.username ? { username: props.username } : undefined;
+
+    // Опции пагинации и сортировки
+    const options = {
+      page,
+      limit: 25,
+      sortBy: sortState.sortBy || undefined,
+      sortOrder: sortState.sortDir
+        ? (sortState.sortDir.toUpperCase() as 'ASC' | 'DESC')
+        : 'ASC',
+    };
+
+    await paymentStore.loadPayments(data, options);
+
+    if (payments.value) {
+      lastPage.value = payments.value.totalPages || 1;
     }
+
+    onLoading.value = false;
+  } catch (e: any) {
+    onLoading.value = false;
+    console.log(e);
+    FailAlert(e);
   }
+};
 
-  // Функция обработки виртуального скролла
-  const onScroll = ({ to, ref }) => {
-    if(payments.value) {
-      const lastIndex = payments.value.items.length - 1
+// Функция обработки виртуального скролла
+const onScroll = ({ to, ref }) => {
+  if (payments.value) {
+    const lastIndex = payments.value.items.length - 1;
 
-      if (onLoading.value !== true && nextPage.value < lastPage.value && to === lastIndex) {
-        onLoading.value = true
+    if (
+      onLoading.value !== true &&
+      nextPage.value < lastPage.value &&
+      to === lastIndex
+    ) {
+      onLoading.value = true;
 
-        setTimeout(() => {
-          nextPage.value++
-          loadPayments(nextPage.value) // Загружаем следующую страницу
+      setTimeout(() => {
+        nextPage.value++;
+        loadPayments(nextPage.value); // Загружаем следующую страницу
 
-          nextTick(() => {
-            ref.refresh() // Обновляем виртуальный скролл после загрузки
-            onLoading.value = false
-          })
-        }, 500) // Имитируем задержку загрузки
-      }
+        nextTick(() => {
+          ref.refresh(); // Обновляем виртуальный скролл после загрузки
+          onLoading.value = false;
+        });
+      }, 500); // Имитируем задержку загрузки
     }
   }
+};
 
-  onMounted(() => {
-    paymentStore.clear()
-    loadPayments()
-  })
+onMounted(() => {
+  paymentStore.clear();
+  loadPayments();
+});
 
+const columns: any[] = [
+  { name: 'id', align: 'left', label: '№', field: 'id', sortable: true },
+  {
+    name: 'amount',
+    align: 'left',
+    label: 'Сумма',
+    field: 'amount',
+    sortable: true,
+  },
+  {
+    name: 'type',
+    align: 'left',
+    label: 'Тип платежа',
+    field: '',
+    sortable: false,
+  },
+  {
+    name: 'username',
+    align: 'left',
+    label: 'От кого',
+    field: 'username',
+    sortable: true,
+  },
+  {
+    name: 'status',
+    align: 'left',
+    label: 'Статус',
+    field: 'status',
+    sortable: true,
+  },
+  {
+    name: 'actions',
+    align: 'left',
+    label: '',
+    field: '',
+    sortable: false,
+    hide: props.hideActions,
+  },
+] as any;
 
-  const columns: any[] = [
-    { name: 'id', align: 'left', label: '№', field: 'id', sortable: true },
-    { name: 'amount', align: 'left', label: 'Сумма', field: 'amount', sortable: true },
-    { name: 'type', align: 'left', label: 'Тип платежа', field: '', sortable: false },
-    { name: 'username', align: 'left', label: 'От кого', field: 'username', sortable: true },
-    { name: 'status', align: 'left', label: 'Статус', field: 'status', sortable: true },
-    { name: 'actions', align: 'left', label: '', field: '', sortable: false, hide: props.hideActions },
-  ] as any
+const expanded = reactive(new Map()); // Используем Map для отслеживания состояния развертывания каждой записи
 
-  const expanded = reactive(new Map()) // Используем Map для отслеживания состояния развертывания каждой записи
-
-  // Функция для переключения состояния развертывания
-  const toggleExpand = (id: any) => {
-    expanded.set(id, !expanded.get(id))
-  }
+// Функция для переключения состояния развертывания
+const toggleExpand = (id: any) => {
+  expanded.set(id, !expanded.get(id));
+};
 
-  const tableRef = ref(null)
-  const pagination = ref({ rowsPerPage: 0 })
-  </script>
+const tableRef = ref(null);
+const pagination = ref({ rowsPerPage: 0 });
+</script>
 
 <style>
-.q-list--dense > .q-item, .q-item--dense {
+.q-list--dense > .q-item,
+.q-item--dense {
   padding: 0px !important;
 }
 </style>

package/src/widgets/Cooperative/Payments/ListOfPayments/ui/ListOfPaymentsWidget.vue

@@ -87,7 +87,7 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref, computed, reactive, nextTick } from 'vue';
-import { Notify } from 'quasar';
+import { FailAlert } from 'src/shared/api';
 import { usePaymentStore } from 'src/entities/Payment/model';
 import { SetOrderPaidStatusButton } from 'src/features/Payment/SetStatus/ui/SetOrderPaidStatusButton';
 import PaymentCard from './PaymentCard.vue';
@@ -191,10 +191,7 @@ const loadPayments = async (page = 1) => {
   } catch (e: any) {
     onLoading.value = false;
     console.log(e);
-    Notify.create({
-      message: e.message,
-      type: 'negative',
-    });
+    FailAlert(e);
   }
 };
 

package/src/widgets/Cooperative/Payments/ListOfPayments/ui/PaymentCard.vue

@@ -1,7 +1,10 @@
 <template lang="pug">
 .payment-card__container
   q-card.payment-card(flat)
-    q-card-section.payment-card__header-section
+    q-card-section.payment-card__header-section(
+      :class='{ "cursor-pointer": $q.screen.lt.md }',
+      @click='$q.screen.lt.md ? $emit("toggle-expand") : undefined'
+    )
       .payment-header
         .payment-icon
           q-icon(
@@ -20,50 +23,46 @@
     q-slide-transition
       div(v-show='expanded')
         q-separator
+
+        // Блок с действиями в самом верху разворота
+        q-card-section.actions-section(
+          v-if='!hideActions && hasAvailableActions'
+        )
+          .row.justify-center
+            SetOrderPaidStatusButton(
+              v-if='payment.id && ["PENDING", "FAILED", "EXPIRED"].includes(payment.status)',
+              :id='payment.id'
+            )
+
         q-card-section
           PaymentDetails(:payment='payment')
 
-    q-separator
-
-    q-card-actions.card-actions(align='right')
-      q-btn-dropdown(
-        v-if='!hideActions && payment.can_change_status',
-        size='sm',
-        label='Действия',
-        color='primary',
-        flat
-      )
-        q-list(dense)
-          SetOrderPaidStatusButton(
-            v-if='payment.id && [Zeus.PaymentStatus.PENDING, Zeus.PaymentStatus.FAILED].includes(payment.status)',
-            :id='payment.id',
-            @close='$emit("close-dropdown")'
-          )
-          SetOrderRefundedStatusButton(
-            v-if='payment.id && [Zeus.PaymentStatus.PAID, Zeus.PaymentStatus.COMPLETED].includes(payment.status)',
-            :id='payment.id',
-            @close='$emit("close-dropdown")'
-          )
-      q-btn(
-        flat,
-        size='sm',
-        :icon='expanded ? "expand_less" : "expand_more"',
-        @click='$emit("toggle-expand")',
-        :label='expanded ? "Скрыть" : "Подробнее"',
-        color='primary'
-      )
+  // Только кнопка разворота снаружи
+  .expand-button-external
+    q-btn(
+      flat,
+      dense,
+      size='sm',
+      :icon='expanded ? "expand_less" : "expand_more"',
+      @click.stop='$emit("toggle-expand")',
+      color='primary',
+      round
+    )
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
 import { SetOrderPaidStatusButton } from 'src/features/Payment/SetStatus/ui/SetOrderPaidStatusButton';
-import { SetOrderRefundedStatusButton } from 'src/features/Payment/SetStatus/ui/SetOrderRefundedStatusButton';
 import { getShortNameFromCertificate } from 'src/shared/lib/utils/getNameFromCertificate';
 import 'src/shared/ui/CardStyles/index.scss';
 import { PaymentDetails } from 'src/shared/ui';
 import type { IPayment } from 'src/entities/Payment';
 import { Zeus } from '@coopenomics/sdk';
 
-defineProps<{
+const $q = useQuasar();
+
+const props = defineProps<{
   payment: IPayment;
   expanded?: boolean;
   hideActions?: boolean;
@@ -71,6 +70,11 @@ defineProps<{
 
 defineEmits(['toggle-expand', 'close-dropdown']);
 
+// Проверяем наличие доступных действий (аналогично логике в таблице)
+const hasAvailableActions = computed(() => {
+  return ['EXPIRED', 'PENDING', 'FAILED'].includes(props.payment.status || '');
+});
+
 const getDirectionIcon = (direction?: string | null) => {
   return direction === Zeus.PaymentDirection.INCOMING
     ? 'fa-solid fa-arrow-down'
@@ -149,7 +153,15 @@ const getStatusColor = (status?: string | null) => {
   margin-top: 4px;
 }
 
-.card-actions {
-  padding: 4px 8px;
+.expand-button-external {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+}
+
+.actions-section {
+  padding: 12px 16px !important;
+  background-color: rgba(0, 0, 0, 0.02);
 }
 </style>