@coopenomics/desktop 2.2.10 → 2025.4.29

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

@@ -0,0 +1,216 @@
+<template lang="pug">
+  div.row.justify-center
+    div.col-12
+      div.scroll-area(style="height: 90vh; 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")
+            PaymentCard(
+              :payment="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) ? 'remove' : 'add'"
+                  @click="toggleExpand(props.row.id)"
+                )
+              q-td {{props.row.id}}
+              q-td {{ props.row.amount }}
+              q-td
+                q-badge(v-if="props.row.type === 'registration'" color="teal") регистрационный
+                q-badge(v-else color="teal") паевой
+
+              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 нет дополнительной информации
+</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 PaymentCard from './PaymentCard.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 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
+
+        setTimeout(() => {
+          nextPage.value++
+          loadPayments(nextPage.value) // Загружаем следующую страницу
+
+          nextTick(() => {
+            ref.refresh() // Обновляем виртуальный скролл после загрузки
+            onLoading.value = false
+          })
+        }, 500) // Имитируем задержку загрузки
+      }
+    }
+  }
+
+  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 expanded = reactive(new Map()) // Используем Map для отслеживания состояния развертывания каждой записи
+
+  // Функция для переключения состояния развертывания
+  const toggleExpand = (id: any) => {
+    expanded.set(id, !expanded.get(id))
+  }
+
+  const tableRef = ref(null)
+  const pagination = ref({ rowsPerPage: 0 })
+</script>
+
+<style>
+.q-list--dense > .q-item, .q-item--dense {
+  padding: 0px !important;
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template lang="pug">
+div.q-pa-xs.col-xs-12.col-sm-12.col-md-12.q-mt-md
+  q-card(bordered flat)
+    q-card-section.q-py-xs
+      div.text-subtitle2 № {{ payment.id }}
+      div.text-caption Сумма: {{ payment.amount }}
+
+    q-separator
+
+    q-card-section.q-py-xs
+      div.row.items-center
+        div.col-6 Тип платежа:
+        div.col-6.text-right
+          q-badge(v-if="payment.details.data.includes('registration')") регистрационный
+          q-badge(v-else) паевой
+
+      div.row.items-center.q-mt-sm
+        div.col-6 От кого:
+        div.col-6.text-right {{ payment.username }}
+
+      div.row.items-center.q-mt-sm
+        div.col-6 Статус:
+        div.col-6.text-right
+          q-badge(v-if="payment.status ==='COMPLETED'" color="teal") обработан
+          q-badge(v-if="payment.status ==='PENDING'" color="orange") ожидание оплаты
+          q-badge(v-if="payment.status ==='FAILED'" color="red") ошибка
+          q-badge(v-if="payment.status ==='PAID'" color="orange") оплачен
+          q-badge(v-if="payment.status ==='REFUNDED'" color="grey") отменён
+          q-badge(v-if="payment.status ==='EXPIRED'" color="grey") истёк
+
+    q-card-actions(align="right")
+      q-btn(
+        v-if="payment.message"
+        size="sm"
+        flat
+        icon="expand_more"
+        @click="$emit('toggle-expand')"
+      )
+        | {{ expanded ? 'Скрыть' : 'Подробнее' }}
+
+      q-btn-dropdown(v-if="!hideActions" size="sm" label="действия" color="primary")
+        q-list(dense)
+          SetOrderPaidStatusButton(:id="payment.id" @close="$emit('close-dropdown')")
+          SetOrderRefundedStatusButton(:id="payment.id" @close="$emit('close-dropdown')")
+
+    q-slide-transition
+      div(v-show="expanded && payment.message")
+        q-separator
+        q-card-section
+          p Причина ошибки: {{payment.message}}
+</template>
+
+<script setup lang="ts">
+import { SetOrderPaidStatusButton } from 'src/features/Payment/SetStatus/ui/SetOrderPaidStatusButton';
+import { SetOrderRefundedStatusButton } from 'src/features/Payment/SetStatus/ui/SetOrderRefundedStatusButton';
+
+defineProps({
+  payment: {
+    type: Object,
+    required: true
+  },
+  expanded: {
+    type: Boolean,
+    default: false
+  },
+  hideActions: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['toggle-expand', 'close-dropdown'])
+</script>

package/src/widgets/Cooperative/Payments/ListOfPayments/ui/index.ts

@@ -0,0 +1,2 @@
+export { default as PaymentCard } from './PaymentCard.vue'
+export { default as ListOfPaymentsWidget } from './ListOfPaymentsWidget.vue'

package/src/widgets/Cooperative/Payments/index.ts

@@ -0,0 +1 @@
+export * from './ListOfPayments'

package/src/widgets/Desktop/LeftDrawerMenu/LeftDrawerMenu.vue

@@ -1,10 +1,11 @@
 <template lang="pug">
 div
-  //- WorkspaceMenu
+  WorkspaceMenu
+  
   SecondLevelMenuList
 
 </template>
 <script setup lang="ts">
 import { SecondLevelMenuList } from '../SecondLevelMenuList';
-
+import { WorkspaceMenu } from '../WorkspaceMenu';
 </script>

package/src/widgets/Desktop/SecondLevelMenuList/SecondLevelMenuList.vue

@@ -1,115 +1,82 @@
 <template lang="pug">
-  q-list(
-    v-if="filteredRoutes"
-    class="second-menu"
-  )
-
-    q-item(
-      v-for="route in filteredRoutes"
-      :key="route.name"
-      clickable
-      v-ripple
-      :active="isActive(route)"
-      active-class="bg-gradient-dark text-white"
-      @click="navigate(route)"
-    )
-
-      q-item-section
-        q-item-label.no-select
-          span {{ route.meta.title }}
-
-      // показываем иконку замка с цветом если требуется роль не user
-      q-icon(v-if="route.meta.roles && !route.meta.roles.includes('user') && route.meta.roles.length > 0" name="fa-solid fa-lock-open" :color="context.userRole == 'member' ? 'orange' : 'teal' ")
-
+  div
+    q-list(v-if="filteredRoutes" class="second-menu")
+      q-item(
+        v-for="route in filteredRoutes"
+        :key="route.name"
+        clickable
+        v-ripple
+        :active="isActive(route)"
+        active-class="bg-gradient-dark text-white"
+        @click="navigate(route)"
+      )
+        q-item-section
+          q-item-label.no-select
+            span {{ route.meta.title }}
+        //- q-icon(
+        //-   v-if="route.meta.roles && !route.meta.roles.includes('user') && route.meta.roles.length > 0"
+        //-   name="fa-solid fa-lock-open"
+        //-   :color="context.userRole === 'member' ? 'orange' : 'teal'"
+        //- )
   </template>
 
   <script lang="ts" setup>
-  import { useCurrentUserStore } from 'src/entities/User';
-  import { computed } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-  import { useDesktopStore } from 'src/entities/Desktop/model';
-  import { type IRoute } from 'src/entities/Desktop/model/types';
-  import { useSystemStore } from 'src/entities/System/model';
-
-  const desktop = useDesktopStore();
-  const route = useRoute();
-  const router = useRouter();
-  const user = useCurrentUserStore();
-  const { info } = useSystemStore();
-
+  import { useCurrentUserStore } from 'src/entities/User'
+  import { computed } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { useDesktopStore } from 'src/entities/Desktop/model'
+  import { useSystemStore } from 'src/entities/System/model'
+  import type { IRoute } from 'src/entities/Desktop/model/types'
+
+  const desktop = useDesktopStore()
+  const router = useRouter()
+  const user = useCurrentUserStore()
+  const { info } = useSystemStore()
+
+  // Функция для проверки условия
   const evaluateCondition = (condition: string, context: Record<string, any>): boolean => {
     try {
-      const func = new Function(...Object.keys(context), `return ${condition};`);
-      return func(...Object.values(context));
+      const func = new Function(...Object.keys(context), `return ${condition};`)
+      return func(...Object.values(context))
     } catch (error) {
-      console.error('Error evaluating condition:', error);
-      return false;
+      console.error('Error evaluating condition:', error)
+      return false
     }
-  };
+  }
 
+  // Контекст для evaluateCondition и проверки ролей
   const context = computed(() => {
-    const isCoop = user.userAccount?.type === 'organization' &&
-      user.userAccount?.private_data &&
-      'type' in user.userAccount.private_data &&
-      user.userAccount.private_data.type === 'coop';
-
-    const userRole = user.userAccount?.role || 'user';
-
-    return {
-      isCoop,
-      userRole,
-      userAccount: user.userAccount,
-      coopname: info.coopname,
-    };
-  });
-
-  const filteredRoutes = computed(() => {
-    const secondLevelRoutes = desktop.getSecondLevel(route) as unknown as IRoute[];
-    return secondLevelRoutes.filter((route) => {
-      const rolesMatch = route.meta?.roles?.includes(context.value.userRole) || route.meta?.roles?.length === 0;
-      const conditionMatch = route.meta?.conditions
-        ? evaluateCondition(route.meta.conditions, context.value)
-        : true; // Если условия нет, пропускаем проверку
+    const isCoop = user.userAccount?.type === 'organization'
+      && user.userAccount?.private_data
+      && 'type' in user.userAccount.private_data
+      && user.userAccount.private_data.type === 'coop'
+    const userRole = user.userAccount?.role || 'user'
+    return { isCoop, userRole, userAccount: user.userAccount, coopname: info.coopname }
+  })
+
+  // Используем активный второй уровень из store
+  const filteredRoutes = computed<IRoute[]>(() => {
+    return (desktop.activeSecondLevelRoutes as unknown as IRoute[]).filter(r => {
+      const rolesMatch = r.meta?.roles?.includes(context.value.userRole) || (r.meta?.roles && r.meta.roles.length === 0);
+      const conditionMatch = r.meta?.conditions ? evaluateCondition(r.meta.conditions, context.value) : true;
       return rolesMatch && conditionMatch;
     });
   });
 
-  // Функция проверки активного маршрута
+
+  // Проверка активного маршрута
   const isActive = (routeToCheck: IRoute) => {
-    return route.name === routeToCheck.name;
-  };
+    return router.currentRoute.value.name === routeToCheck.name
+  }
 
-  // Функция навигации при клике на элемент
+  // Навигация при клике
   const navigate = (routeToNavigate: IRoute) => {
-    router.push({ name: routeToNavigate.name, params: { coopname: info.coopname } });
-  };
+    router.push({ name: routeToNavigate.name, params: { coopname: info.coopname } })
+  }
   </script>
 
   <style>
   .second-menu .q-item-label {
     font-size: 12px !important;
   }
-
-  .custom-ripple {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .custom-ripple::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.1);
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 0.4s ease-out;
-    z-index: 0;
-  }
-
-  .custom-ripple:active::before {
-    transform: scaleX(1);
-  }
   </style>