@coopenomics/desktop 2.2.2

package/src/shared/ui/ImageCarousel/ImageCarousel.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+  import { constructImageSrc } from 'src/shared/api'
+  import { ref, computed } from 'vue'
+  import type { PropType } from 'vue'
+
+  const props = defineProps({
+    images: {
+      type: Array as PropType<string[]>,
+      required: true,
+    },
+    noRounded: {
+      type: Boolean,
+      requred: false,
+      default: false,
+    },
+  })
+
+  const computedImages = computed(() => {
+    return props.images.map((image) => constructImageSrc(image))
+  })
+
+  const showNavigation = computed(() => computedImages.value.length > 1)
+
+  const slide = ref(0)
+  const fullscreen = ref(false)
+</script>
+<template lang="pug">
+div
+  q-carousel(
+    v-model="slide"
+    v-model:fullscreen="fullscreen"
+    animated
+    :arrows="showNavigation"
+    :navigation="showNavigation"
+    autoplay
+    style="border: 1px solid grey;"
+    infinite
+    prev-icon=""
+    next-icon=""
+    :height="'350px'"
+    :class="!noRounded && 'rounded-borders'"
+  )
+    template(#navigation-icon="{ active, btnProps, onClick }")
+      q-btn(
+        size="10px"
+        :icon="btnProps.icon"
+        :color="active ? 'primary' : 'white'"
+        flat
+        round
+        dense
+        @click="onClick"
+      )
+
+    q-carousel-slide(v-for="(img, i) in computedImages" :key="i" :name="i" :img-src="img" @click="fullscreen = !fullscreen").cursor-pointer
+
+    template(#control)
+      q-carousel-control(position="top-right" :offset="[18, 18]")
+        q-btn(
+          size="sm"
+          push
+          round
+          dense
+          color="white"
+          text-color="primary"
+          :icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"
+          @click="fullscreen = !fullscreen"
+        )
+</template>

package/src/shared/ui/ImageCarousel/index.ts

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

package/src/shared/ui/Loader/Loader.vue

@@ -0,0 +1,19 @@
+<template lang='pug'>
+div.bg-none.full-width.text-center.q-pt-lg.q-pb-lg
+  q-spinner(size='50px', color='grey' style="margin: auto;").bg-none
+  p(style='font-size:12px').full-width.text-center.text-grey {{ text }}
+</template>
+
+<script setup lang='ts'>
+import { computed } from 'vue';
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: false,
+    default: ''
+  }
+});
+const text = computed(() => props.text)
+
+</script>

package/src/shared/ui/Loader/index.ts

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

package/src/shared/ui/Map/Map.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import PinIcon from 'src/assets/pin.svg'
+
+const props = defineProps({
+  long: {
+    type: Number,
+    required: true,
+  },
+  lat: {
+    type: Number,
+    required: true,
+  },
+})
+
+const projection = ref('EPSG:4326')
+const zoom = ref(18)
+const rotation = ref(0)
+
+const pinCenter = computed(() => {
+  return [Number(props.long), Number(props.lat)]
+})
+</script>
+
+<template lang="pug">
+div.q-mt-lg
+  ol-map(
+    :load-tiles-while-animating="true"
+    :load-tiles-while-interacting="true"
+    style="height: 300px; border: 1px solid grey;"
+  )
+    ol-view(
+      ref="view"
+      :center="pinCenter"
+      :enable-rotation="false"
+      :zoom="zoom"
+      :projection="projection"
+      :rotation="rotation"
+    )
+
+    ol-tile-layer
+      ol-source-osm
+    ol-vector-layer
+      ol-source-vector
+        ol-feature
+          ol-geom-point(v-if="pinCenter" :coordinates="pinCenter")
+          ol-style
+            ol-style-stroke(color="red" :width="2")
+            ol-style-fill(color="rgba(255,255,255,0.1)")
+            ol-style-icon(:src="PinIcon" :scale="1.5")
+
+</template>

package/src/shared/ui/Map/index.ts

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

package/src/shared/ui/ModalBase/ModalBase.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface IProps {
+  title?: string
+  show_close?: boolean
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  title: '',
+  show_close: true
+})
+
+const title = computed(() => props.title)
+</script>
+
+<template lang="pug">
+q-card(style="min-width: 350px; max-width: 100%;")
+  q-bar.bg-gradient-dark.text-white
+    span {{ title }}
+    q-space
+    q-btn(v-if="show_close" v-close-popup dense flat icon="close")
+      q-tooltip Закрыть
+  slot
+
+</template>

package/src/shared/ui/ModalBase/index.ts

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

package/src/shared/ui/PayWithProvider/PayWithProvider.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { IPaymentOrder } from 'src/shared/lib/types/payments';
+import { BankProvider } from '../Providers/Bank';
+import { Yookassa } from '../Providers/Yookassa';
+
+defineProps<{
+  paymentOrder: IPaymentOrder
+}>()
+
+const emit = defineEmits(['paymentSuccess', 'paymentFail'])
+
+</script>
+
+<template lang="pug">
+div(v-if="paymentOrder.details?.data")
+  BankProvider(v-if="paymentOrder.provider=='qrpay'" :payment-order="paymentOrder" @payment-fail="emit('paymentFail')" @payment-success="emit('paymentSuccess')")
+  Yookassa(v-if="paymentOrder.provider=='yookassa'" :payment-order="paymentOrder" @payment-fail="emit('paymentFail')" @payment-success="emit('paymentSuccess')")
+
+</template>

package/src/shared/ui/PayWithProvider/index.ts

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

package/src/shared/ui/Providers/Bank/Bank.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { IPaymentOrder } from 'src/shared/lib/types/payments';
+import { onMounted, onBeforeUnmount, ref, computed } from 'vue';
+import QRCode from 'qrcode';
+import { useCooperativeStore } from 'src/entities/Cooperative';
+
+// Определяем интерфейс для orderData
+interface IOrderData {
+  sum?: string;
+  name?: string;
+  bankname?: string;
+  bic?: string;
+  kpp?: string;
+  correspacc?: string;
+  personalacc?: string;
+  purpose?: string;
+}
+
+const props = defineProps<{
+  paymentOrder: IPaymentOrder;
+}>();
+
+const qrElement = ref<HTMLCanvasElement | null>(null);
+const coop = useCooperativeStore()
+
+const amount = computed(() => {
+  return orderData.value.sum ? `${(parseFloat(orderData.value.sum) / 100).toFixed(2)} ${coop.governSymbol}` : `0 ${coop.governSymbol}`;
+});
+
+const orderData = computed(() => {
+  const dataString = props.paymentOrder.details.data;
+  const parsedDetails: IOrderData = {};  // Используем тип IOrderData
+
+  // Разбираем строку на пары ключ=значение
+  const parts = dataString.split('|');
+
+  for (const part of parts) {
+    const [key, value] = part.split('=');
+    if (key) {
+      parsedDetails[key.toLowerCase() as keyof IOrderData] = value; // Ключи в нижнем регистре
+    }
+  }
+
+  return parsedDetails;
+})
+
+onMounted(() => {
+  qrElement.value = document.getElementById('qr') as HTMLCanvasElement | null;
+  generateQRCode();
+});
+
+onBeforeUnmount(() => {
+  if (qrElement.value) {
+    const ctx = qrElement.value.getContext('2d');
+    if (ctx) {
+      ctx.clearRect(0, 0, qrElement.value.width, qrElement.value.height);
+    }
+  }
+});
+
+const generateQRCode = () => {
+  if (qrElement.value) {
+    QRCode.toCanvas(qrElement.value, props.paymentOrder.details.data, {width: 400}, function (error) {
+      if (error) console.error(error);
+    });
+  } else {
+    console.error('QR element not found');
+  }
+};
+
+const downloadQR = () => {
+  if (qrElement.value) {
+    const link = document.createElement('a');
+    link.href = qrElement.value.toDataURL('image/png');
+    link.download = 'qrcode.png';
+    link.click();
+  } else {
+    console.error('QR element not found');
+  }
+};
+</script>
+
+<template lang="pug">
+div
+  q-input(label="Получатель" v-model="orderData.name" readonly)
+  q-input(label="Банк получателя" v-model="orderData.bankname" readonly)
+  q-input(label="БИК" v-model="orderData.bic" readonly)
+  q-input(label="КПП" v-model="orderData.kpp" readonly)
+  q-input(label="Корреспондентский счёт" v-model="orderData.correspacc" readonly)
+  q-input(label="Номер счёта" v-model="orderData.personalacc" readonly)
+  q-input(label="Cумма платежа" v-model="amount" readonly)
+  q-input(label="Назначение платежа" v-model="orderData.purpose" readonly)
+
+  div.full-width.text-center
+    canvas#qr
+  div.full-width.text-center
+    q-btn(@click="downloadQR" flat icon="download") скачать QR
+</template>
+
+<style>
+#qr{
+  width: 200px !important;
+  height: 200px !important;
+}
+</style>

package/src/shared/ui/Providers/Bank/index.ts

@@ -0,0 +1 @@
+export {default as BankProvider} from './Bank.vue'

package/src/shared/ui/Providers/Yookassa/Yookassa.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { IPaymentOrder } from 'src/shared/lib/types/payments';
+import { onMounted } from 'vue'
+
+const props = defineProps<{
+  paymentOrder: IPaymentOrder
+}>()
+
+const emit = defineEmits(['paymentSuccess', 'paymentFail'])
+
+onMounted(() => {
+  const script = document.createElement('script')
+  script.src = 'https://yookassa.ru/checkout-widget/v1/checkout-widget.js'
+  script.async = true
+  document.head.appendChild(script)
+
+  script.onload = () => {
+    // Инициализация виджета после загрузки скрипта
+    const checkout = new window.YooMoneyCheckoutWidget({
+      confirmation_token: props.paymentOrder.details.data,
+
+      error_callback: function (error: any) {
+        // Обработка ошибок инициализации
+        emit('paymentFail')
+
+        console.error(error)
+      },
+    })
+
+    // Отображение платежной формы в контейнере
+    checkout.render('paymentForm').then(() => {
+      // Код, который нужно выполнить после отображения платежной формы.
+    })
+
+    checkout.on('success', () => {
+      //Код, который нужно выполнить после успешной оплаты.
+      emit('paymentSuccess')
+      //Удаление инициализированного виджета
+      checkout.destroy()
+    })
+
+    checkout.on('fail', () => {
+      //Код, который нужно выполнить после неудачной оплаты.
+      emit('paymentFail')
+      //Удаление инициализированного виджета
+      checkout.destroy()
+    })
+  }
+  script.onerror = () => {
+    console.error('Ошибка при загрузке скрипта ЮKassa')
+  }
+})
+</script>
+
+<template lang="pug">
+#paymentForm.Yookassa.full-width
+</template>

package/src/shared/ui/Providers/Yookassa/index.ts

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

package/src/shared/ui/ToogleDarkLight/ToogleDarkLight.vue

@@ -0,0 +1,34 @@
+<template lang="pug">
+q-item(flat clickable @click="$q.dark.toggle()")
+  q-item-section
+    q-item-label
+      q-icon(:name="isDark ? 'brightness_7' : 'brightness_3'").q-mr-sm
+      span(v-if="showText").btn-font {{ isDark ? 'ДНЕВНОЙ РЕЖИМ' : 'НОЧНОЙ РЕЖИМ' }}
+
+
+</template>
+<script setup lang="ts">
+
+import { useQuasar } from 'quasar';
+import { computed } from 'vue';
+
+const $q = useQuasar()
+const isDark = computed(() => $q.dark.isActive)
+defineProps({
+  isMobile: {
+    type: Boolean,
+    default: false,
+    required: false
+  },
+  showText: {
+    type: Boolean,
+    default: false,
+    required: false
+  }
+})
+</script>
+<style scoped>
+.btn-font {
+  font-size: 10px !important;
+}
+</style>

package/src/shared/ui/ToogleDarkLight/index.ts

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

package/src/shared/ui/UserDataForm/EntrepreneurDataForm/EntrepreneurDataForm.vue

@@ -0,0 +1,115 @@
+<template lang="pug">
+div(v-if="userData.entrepreneur_data").q-gutter-md.q-mt-md
+  q-input(v-model="userData.entrepreneur_data.last_name" standout="bg-teal text-white" hint="Иванов" label="Фамилия" :rules="[val => notEmpty(val), val => validatePersonalName(val)]" autocomplete="off")
+  q-input(v-model="userData.entrepreneur_data.first_name" standout="bg-teal text-white" hint="Иван" label="Имя" :rules="[val => notEmpty(val), val => validatePersonalName(val)]" autocomplete="off")
+  q-input(v-model="userData.entrepreneur_data.middle_name" standout="bg-teal text-white" hint="Иванович" label="Отчество" :rules="[val => validatePersonalName(val)]" autocomplete="off")
+
+  q-input(
+    standout="bg-teal text-white"
+    v-model="userData.entrepreneur_data.birthdate"
+    mask="date"
+    label="Дата рождения"
+    hint="Формат: год/месяц/день"
+    :rules="['date', val => notEmpty(val)]"
+    autocomplete="off"
+  )
+    template(v-slot:append)
+      q-icon(name="event" class="cursor-pointer")
+        q-popup-proxy(cover transition-show="scale" transition-hide="scale")
+          q-date(v-model="userData.entrepreneur_data.birthdate")
+            .row.items-center.justify-end
+              q-btn(v-close-popup label="Close" color="primary" flat)
+
+  q-input(v-model="userData.entrepreneur_data.phone" standout="bg-teal text-white" mask="+7 (###) ###-##-##" fill-mask label="Номер телефона" hint="+7 (###) ###-##-##" :rules="[val => notEmpty(val), val => notEmptyPhone(val)]" autocomplete="off")
+
+  q-select(v-model="userData.entrepreneur_data.country" standout="bg-teal text-white" map-options emit-value option-label="label" option-value="value" label="Страна" :options="[{ label: 'Россия', value: 'Russia' }]" :rules="[val => notEmpty(val)]" autocomplete="off")
+
+  q-input(v-model="userData.entrepreneur_data.city" standout="bg-teal text-white" label="Город" hint="Москва" :rules="[val => notEmpty(val)]" autocomplete="off")
+  q-input(v-model="userData.entrepreneur_data.full_address" standout="bg-teal text-white" label="Адрес регистрации (как в паспорте)" hint="г. Москва, ул. Арбат, д.12" :rules="[val => notEmpty(val)]" autocomplete="off")
+
+  q-input(
+    v-model="userData.entrepreneur_data.details.inn"
+    standout="bg-teal text-white"
+    mask="############"
+    label="ИНН предпринимателя"
+    hint="10 или 12 цифр"
+    :rules="[val => notEmpty(val), val => (val.length === 10 || val.length === 12) || 'ИНН должен содержать 10 или 12 цифр']"
+    autocomplete="off"
+  )
+  q-input(
+    v-model="userData.entrepreneur_data.details.ogrn"
+    standout="bg-teal text-white"
+    mask="###############"
+    label="ОГРНИП"
+    hint="13 или 15 цифр"
+    :rules="[val => notEmpty(val), val => (val.length === 13 || val.length === 15) || 'ОГРНИП должен содержать 13 или 15 цифр']"
+    autocomplete="off"
+  )
+
+  q-input(
+    v-model="userData.entrepreneur_data.bank_account.bank_name"
+    standout="bg-teal text-white"
+    label="Наименование банка"
+    hint="ПАО Сбербанк"
+    :rules="[val => notEmpty(val)]"
+    autocomplete="off"
+  )
+
+  q-input(
+    v-model="userData.entrepreneur_data.bank_account.details.corr"
+    standout="bg-teal text-white"
+    mask="####################"
+    label="Корреспондентский счёт"
+    hint="20 цифр"
+    :rules="[val => notEmpty(val), val => val.length === 20 || 'Корреспондентский счёт должен содержать 20 цифр']"
+    autocomplete="off"
+  )
+
+  q-input(
+    v-model="userData.entrepreneur_data.bank_account.details.bik"
+    standout="bg-teal text-white"
+    mask="#########"
+    label="БИК"
+    hint="9 цифр"
+    :rules="[val => notEmpty(val), val => val.length === 9 || 'БИК должен содержать 9 цифр']"
+  )
+
+  q-input(
+    v-model="userData.entrepreneur_data.bank_account.details.kpp"
+    standout="bg-teal text-white"
+    mask="#########"
+    label="КПП (банка)"
+    hint="9 цифр"
+    :rules="[val => notEmpty(val), val => val.length === 9 || 'КПП должен содержать 9 цифр']"
+    autocomplete="off"
+  )
+
+  q-select(v-model="userData.entrepreneur_data.bank_account.currency"
+    label="Валюта счёта"
+    standout="bg-teal text-white"
+    :options="[{ label: 'RUB', value: 'RUB' }]"
+    emit-value
+    map-options
+  )
+
+  q-input(
+    v-model="userData.entrepreneur_data.bank_account.account_number"
+    standout="bg-teal text-white"
+    mask="####################"
+    label="Номер счёта"
+    hint="20 цифр"
+    :rules="[val => notEmpty(val), val => val.length === 20 || 'Номер счёта должен содержать 20 цифр']"
+    autocomplete="off"
+  )
+</template>
+<script setup lang="ts">
+import { validatePersonalName, notEmpty, notEmptyPhone } from 'src/shared/lib/utils';
+
+import type { IUserData } from 'src/shared/lib/types/user/IUserData';
+import { ref } from 'vue';
+
+const props = defineProps<{ userData: IUserData }>();
+
+const userData = ref<IUserData>(props.userData)
+
+</script>

package/src/shared/ui/UserDataForm/EntrepreneurDataForm/index.ts

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

package/src/shared/ui/UserDataForm/IndividualDataForm/IndividualDataForm.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+div(v-if="userData.individual_data").q-gutter-md.q-mt-md
+  slot(name="top")
+  q-input(v-model="userData.individual_data.last_name" standout="bg-teal text-white" hint="Иванов" label="Фамилия" :rules="[val => notEmpty(val), val => validatePersonalName(val)]" autocomplete="off")
+  q-input(v-model="userData.individual_data.first_name" standout="bg-teal text-white" hint="Иван" label="Имя" :rules="[val => notEmpty(val), val => validatePersonalName(val)]" autocomplete="off")
+  q-input(v-model="userData.individual_data.middle_name" standout="bg-teal text-white" hint="Иванович" label="Отчество" :rules="[val => validatePersonalName(val)]" autocomplete="off")
+
+  q-input(v-model="userData.individual_data.full_address" standout="bg-teal text-white" hint="г. Москва, ул. Арбат, д.12" label="Адрес регистрации (как в паспорте)" :rules="[val => notEmpty(val)]" autocomplete="off")
+
+  q-input(
+    standout="bg-teal text-white"
+    v-model="userData.individual_data.birthdate"
+    mask="date"
+    label="Дата рождения"
+    hint="Формат: год/месяц/день"
+    :rules="['date', val => notEmpty(val)]"
+    autocomplete="off"
+  )
+    template(v-slot:append)
+      q-icon(name="event" class="cursor-pointer")
+        q-popup-proxy(cover transition-show="scale" transition-hide="scale")
+          q-date(v-model="userData.individual_data.birthdate")
+            .row.items-center.justify-end
+              q-btn(v-close-popup label="Close" color="primary" flat)
+
+  q-input(v-model="userData.individual_data.phone" standout="bg-teal text-white" mask="+7 (###) ###-##-##" fill-mask label="Номер телефона" hint="+7 (###) ###-##-##" :rules="[val => notEmpty(val), val => notEmptyPhone(val)]" autocomplete="off")
+
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { validatePersonalName, notEmpty, notEmptyPhone } from 'src/shared/lib/utils';
+
+import type { IUserData } from 'src/shared/lib/types/user/IUserData';
+
+const props = defineProps<{ userData: IUserData }>();
+
+const userData = ref<IUserData>(props.userData)
+
+
+</script>

package/src/shared/ui/UserDataForm/IndividualDataForm/index.ts

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