@coopenomics/desktop 2.2.2

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

@@ -0,0 +1,86 @@
+<template lang="pug">
+q-list(
+  v-if="routes"
+  class="second-menu"
+)
+
+  q-item(
+    v-for="route in routes"
+    :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 {{ route.meta.title }}
+
+  </template>
+
+  <script lang="ts" setup>
+  import { useCurrentUserStore } from 'src/entities/User';
+  import { ref, watch } 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 { COOPNAME } from 'src/shared/config';
+
+  const desktop = useDesktopStore()
+  const routes = ref<IRoute[]>([])
+  const route = useRoute()
+  const router = useRouter()
+  const user = useCurrentUserStore()
+
+  const init = () => {
+    const userRole = user.userAccount?.role || 'user';
+    routes.value = (desktop.getSecondLevel(route) as unknown as IRoute[]).filter(
+      (route) => route.meta?.roles?.includes(userRole) || route.meta?.roles?.length === 0
+    );
+  }
+
+  // Функция проверки активного маршрута
+  const isActive = (routeToCheck: IRoute) => {
+    return route.name === routeToCheck.name
+  }
+
+  // Функция навигации при клике на элемент
+  const navigate = (routeToNavigate: IRoute) => {
+    router.push({ name: routeToNavigate.name, params: { coopname: COOPNAME } });
+  }
+
+  init()
+
+  watch(route, () => init())
+  </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>

package/src/widgets/Desktop/SecondLevelMenuList/index.ts

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

package/src/widgets/Desktop/WorkspaceMenu/WorkspaceMenu.vue

@@ -0,0 +1,94 @@
+<template lang="pug">
+div
+  q-btn(
+    stack
+    v-for="route in menuRoutes" :key="route.path"
+    v-ripple
+    flat
+    class="cursor-pointer btn-menu"
+    :class="headerClass(route)"
+    @click="open(route)"
+    align="center"
+  )
+
+    q-icon(:name="route.meta.icon").btn-icon.q-pt-sm
+    span.btn-font {{ route.meta.title }}
+
+</template>
+
+  <script setup lang="ts">
+  import { computed } from 'vue'
+  import { useRouter, useRoute } from 'vue-router'
+  import { useQuasar } from 'quasar'
+  import { COOPNAME } from 'src/shared/config'
+  import { useCurrentUserStore } from 'src/entities/User'
+  import { type IRoute } from 'src/entities/Desktop/model/types'
+  import { useDesktopStore } from 'src/entities/Desktop/model'
+
+  const $q = useQuasar()
+
+  const isDark = computed(() => $q.dark.isActive)
+
+  const router = useRouter()
+  const route = useRoute()
+  const user = useCurrentUserStore()
+
+  const isRouteActive = (currentRoute: IRoute) => {
+    return route.matched.find(r => r.path === currentRoute.path) || route.name == currentRoute.name
+  }
+
+  const headerClass = (route: IRoute) => {
+    const isActive = isRouteActive(route)
+    return isActive ? (isDark.value ? 'text-white bg-teal' : 'text-white bg-teal') : ''
+  }
+
+  const desktop = useDesktopStore()
+
+  const open = (route: IRoute) => {
+    if (route.children)
+      router.push({ name: route.children[0].name, params: { coopname: COOPNAME } })
+    else router.push({ name: route.name, params: { coopname: COOPNAME } })
+
+  }
+
+  const menuRoutes = computed(() => {
+    const userRole = user.userAccount?.role || 'user';
+
+    return desktop.firstLevel.filter(
+      (route) => route.meta.roles.includes(userRole) || route.meta.roles.length === 0
+    );
+
+  })
+
+  </script>
+
+  <style lang="scss" scoped>
+  .btn-menu {
+    height: 100px;
+    width: 100px;
+  }
+
+  .btn-icon {
+    font-size: 20px !important;
+  }
+
+  .btn-font {
+    font-size: 8px !important;
+  }
+
+  .logout-btn {
+    position: fixed;
+    bottom: 54px;
+    width: 100%;
+  }
+
+  .menu-container {
+    display: flex;
+    // flex-direction: column;
+    height: 100%;
+  }
+
+  .control-buttons {
+    margin-top: auto;
+  }
+  </style>

package/src/widgets/Desktop/WorkspaceMenu/index.ts

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

package/src/widgets/ExtStore/ExtensionCard/ExtensionCard.vue

@@ -0,0 +1,38 @@
+<template lang="pug">
+div.q-pa-md
+  q-card(flat bordered @click="open").hover-card.q-pa-md
+    q-img(v-if="extension.image" :src="extension.image")
+    div
+      q-chip(outline  v-for="tag in extension.tags" v-bind:key="tag" dense size="sm") {{tag}}
+
+    p.q-mt-md.text-h6 {{extension.title}}
+
+    p {{extension.description}}
+    div.flex.justify-between.items-center
+      div
+        q-chip(square dense size="sm" color="green" outline v-if="extension.installed").q-ml-sm установлено
+
+      div
+        q-btn(dense size="sm" v-if="extension.available" flat @click="open")
+          span подробнее
+          q-icon(name="fa fa-arrow-right").q-ml-sm
+        q-chip(size="sm" dense color="orange" v-if="!extension.available" outline) в разработке
+</template>
+<script lang="ts" setup>
+import type { IExtension } from 'src/entities/Extension/model/types';
+import { useRouter } from 'vue-router';
+
+const props = defineProps({
+  extension: {
+    required: true,
+    type: Object as () => IExtension
+  }
+})
+
+const router = useRouter()
+
+const open = () => {
+  if (props.extension.available)
+    router.push({name: 'one-extension', params: {name: props.extension.name}})
+}
+</script>

package/src/widgets/ExtStore/ExtensionCard/index.ts

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

package/src/widgets/Header/CommonHeader/Header.vue

@@ -0,0 +1,203 @@
+<!-- Header.vue -->
+<template lang="pug">
+div
+  q-header(v-if="!matched('cooperative-settings') && !matched('user-settings') && !matched('extstore')" bordered :class="headerClass").header
+    q-toolbar()
+      q-btn(v-if="loggedIn && showDrawer" stretch icon="menu" flat @click="emitToggleLeftDrawer")
+      q-btn(v-if="loggedIn && !showDrawer" stretch icon="fas fa-chevron-left" flat @click="goTo('index')")
+
+      q-toolbar-title()
+        q-btn(:size="isMobile ? 'md' : 'lg'" flat @click="goTo('index')")
+          span(v-if="showDrawer") {{ COOP_SHORT_NAME }}
+
+      SettingsDropdown(:isMobile="isMobile" :isChairman="isChairman" :isMember="isMember")
+
+      template(v-if="!loggedIn")
+        q-btn(
+          v-if="showRegisterButton && !is('signup') && !is('install')"
+          color="primary"
+          class="btn-menu"
+          stretch
+          :size="isMobile ? 'sm' : 'lg'"
+          @click="signup"
+        )
+          span.q-pr-sm регистрация
+          i.fa-solid.fa-right-to-bracket
+
+        q-btn(
+          v-if="showRegisterButton && is('signup')"
+          color="primary"
+          class="btn-menu"
+          stretch
+          :size="isMobile ? 'sm' : 'lg'"
+          @click="login"
+        )
+          span.q-pr-sm вход
+          i.fa-solid.fa-right-to-bracket
+
+  q-header(v-if="matched('user-settings')" bordered).flex.bg-gradient-dark
+    q-toolbar
+      q-btn(flat icon="fas fa-chevron-left" stretch @click="open('index')")
+      q-tabs(
+        dense
+        switch-indicator
+        inline-label
+        align="justify"
+        active-class="bg-teal"
+        active-bg-color="teal"
+        active-color="white"
+        indicator-color="secondary"
+        style="height: 50px !important; overflow-x: auto;"
+      )
+        q-route-tab(name="Реквизиты" label="Реквизиты" :to="{name: 'user-payment-methods'}" )
+
+  q-header(bordered v-if="matched('cooperative-settings')").bg-gradient-dark
+    q-toolbar
+
+      q-btn(flat icon="fas fa-chevron-left" stretch @click="open('index')")
+      q-tabs(
+        dense
+        switch-indicator
+        inline-label
+        align="justify"
+        active-class="bg-teal"
+        active-bg-color="teal"
+        active-color="white"
+        indicator-color="secondary"
+        style="height: 50px !important; overflow-x: auto;"
+      )
+        q-route-tab(name="Совет" label="Совет" :to="{name: 'members'}" )
+        q-route-tab(name="Кооперативные участки" label="Кооперативные участки" :to="{name: 'branches'}" )
+        q-route-tab(name="Фонды накопления" label="Фонды накопления" :to="{name: 'accumulation-funds'}" )
+        q-route-tab(name="Фонды списания" label="Фонды списания" :to="{name: 'expense-funds'}" )
+        q-route-tab(name="Взносы" label="Взносы" :to="{name: 'initial-contributions'}" )
+        q-route-tab(name="Контакты" label="Контакты" :to="{name: 'change-contacts'}" )
+
+  q-header(bordered v-if="matched('extstore')").bg-gradient-dark
+    q-toolbar
+
+      q-btn(flat icon="fas fa-chevron-left" stretch @click="backFromAppstore")
+      q-tabs(
+        dense
+        switch-indicator
+        inline-label
+        align="justify"
+        active-class="bg-teal"
+        active-bg-color="teal"
+        active-color="white"
+        indicator-color="secondary"
+        style="height: 50px !important; overflow-x: auto;"
+      )
+
+        q-route-tab(name="Все приложения" label="Все приложения" :to="{name: 'extstore-showcase'}" )
+        q-route-tab(name="Установленные" label="Установленные" :to="{name: 'appstore-installed'}" )
+
+  </template>
+
+  <script setup lang="ts">
+  import { computed } from 'vue'
+  import { useRouter, useRoute } from 'vue-router'
+  import { useQuasar } from 'quasar'
+  import { COOP_SHORT_NAME } from 'src/shared/config'
+  import { useCurrentUserStore } from 'src/entities/User'
+  import { useSessionStore } from 'src/entities/Session'
+  import config from 'src/app/config'
+  import { useWindowSize } from 'vue-window-size'
+  import { SettingsDropdown } from 'src/widgets/Header/SettingsDropdown'
+
+  const router = useRouter()
+  const route = useRoute()
+  const $q = useQuasar()
+  const session = useSessionStore()
+  const { width } = useWindowSize()
+  const emit = defineEmits(['toggle-left-drawer'])
+
+  const isDark = computed(() => $q.dark.isActive)
+  const headerClass = computed(() =>
+    isDark.value ? 'text-white bg-dark' : 'text-black bg-light'
+  )
+  const isMobile = computed(() => width.value < 768)
+  const currentUser = useCurrentUserStore()
+  const loggedIn = computed(
+    () => currentUser.isRegistrationComplete && session.isAuth
+  )
+
+  const isChairman = computed(() => currentUser.userAccount?.role === 'chairman')
+  const isMember = computed(() => currentUser.userAccount?.role === 'member')
+
+  const open = (name: string) => {
+    router.push({name})
+  }
+
+  defineProps({
+    showDrawer: {
+      type: Boolean,
+      required: true
+    }
+  })
+
+  const showRegisterButton = computed(() => {
+    if (!loggedIn.value) {
+      return config.registrator.showRegisterButton
+    }
+    return false
+  })
+
+  const is = (what: string) => route.name === what
+
+  const goTo = (name: string) => {
+    router.push({ name })
+  }
+
+  const signup = () => {
+    router.push({ name: 'signup' })
+  }
+
+  const login = () => {
+    router.push({ name: 'signin' })
+  }
+
+  const emitToggleLeftDrawer = () => {
+    emit('toggle-left-drawer')
+  }
+
+  const backFromAppstore = () => {
+    if (is('extension-install') || is('extension-settings'))
+      open('one-extension')
+    else if (is('one-extension'))
+      open('extstore-showcase')
+    else open('index')
+  }
+
+
+  const matched = (what: string) => {
+    return route.matched.find(el => el.name === what)
+  }
+
+
+</script>
+
+  <style lang="scss">
+  .btn-title {
+    font-size: 20px;
+  }
+
+  .btn-menu {
+    font-size: 20px;
+    height: 60px;
+  }
+
+  .menu {
+    right: 0px;
+    z-index: 1000;
+  }
+
+  .q-toolbar {
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+
+  .q-toolbar__title {
+    padding: 0px !important;
+  }
+  </style>

package/src/widgets/Header/CommonHeader/index.ts

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

package/src/widgets/Header/SettingsDropdown/SettingsDropdown.vue

@@ -0,0 +1,86 @@
+<template lang="pug">
+q-btn-dropdown(flat :size="isMobile ? 'sm' : 'md'" :dense="isMobile" stretch icon="fa-solid fa-cog")
+  q-list
+    ToogleDarkLight(:isMobile="isMobile" :showText="true")
+
+    q-item(v-if="loggedIn" flat clickable v-close-popup @click="open('user-payment-methods')")
+      q-item-section
+        q-item-label
+          q-icon(name="fa-solid fa-wrench").q-mr-sm
+          span.font10px НАСТРОЙКИ ПАЙЩИКА
+
+    q-item(v-if="loggedIn && isChairman" flat clickable v-close-popup @click="open('members')")
+      q-item-section
+        q-item-label
+          q-icon(name="fa-solid fa-hammer").q-mr-sm
+          span.font10px НАСТРОЙКИ КООПЕРАТИВА
+
+
+    q-item(flat v-if="isChairman" clickable v-close-popup @click="open('extstore-showcase')")
+      q-item-section
+        q-item-label
+          q-icon(name="fa-solid fa-plus").q-mr-sm
+          span.font10px МАГАЗИН РАСШИРЕНИЙ
+    hr(v-if="loggedIn")
+
+    q-item(v-if="loggedIn" flat clickable v-close-popup @click="logout")
+      q-item-section
+        q-item-label
+          q-icon(name="logout").q-mr-sm
+          span.font10px ВЫЙТИ
+
+</template>
+<script lang="ts" setup>
+import { useLogoutUser } from 'src/features/User/Logout';
+import { FailAlert } from 'src/shared/api';
+import { useRouter } from 'vue-router';
+import { ToogleDarkLight } from '../../../shared/ui/ToogleDarkLight';
+import { useCurrentUserStore } from 'src/entities/User';
+import { computed } from 'vue';
+import { useSessionStore } from 'src/entities/Session';
+
+const session = useSessionStore()
+
+const currentUser = useCurrentUserStore()
+const loggedIn = computed(
+  () => currentUser.isRegistrationComplete && session.isAuth
+)
+
+defineProps({
+  isMobile: Boolean,
+  isChairman: {
+    type: Boolean,
+    default: false,
+    required: false
+  },
+  isMember: {
+    type: Boolean,
+    default: false,
+    required: false
+  }
+})
+
+const router = useRouter()
+const open = (name: string) => {
+  router.push({name})
+}
+
+const logout = async () => {
+  const { logout } = useLogoutUser()
+
+  try {
+    await logout()
+    router.push({ name: 'signin' })
+
+  } catch (e: any) {
+    FailAlert('Ошибка при выходе: ' + e.message)
+  }
+}
+
+</script>
+
+<style>
+.font10px{
+  font-size: 10px;
+}
+</style>

package/src/widgets/Header/SettingsDropdown/index.ts

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

package/src/widgets/IndividualCard/index.ts

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

package/src/widgets/IndividualCard/ui/IndividualCard.vue

@@ -0,0 +1,170 @@
+<template lang="pug">
+div
+  q-input(
+    :readonly="readonly"
+    dense
+    v-model="data.phone"
+    standout="bg-teal text-white"
+    mask="+7 (###) ###-##-##"
+    fill-mask
+    label="Номер телефона"
+    placeholder="+7 (###) ###-##-##"
+    :rules="[val => notEmpty(val), val => notEmptyPhone(val)]"
+    autocomplete="off"
+  )
+  q-input(
+    :readonly="readonly"
+    dense
+    v-model="data.email"
+    standout="bg-teal text-white"
+    label="Email"
+    placeholder="example@domain.com"
+    :rules="[val => validEmail(val)]"
+    autocomplete="off"
+  )
+  q-input(
+    :readonly="readonly"
+    dense
+    v-model="data.first_name"
+    standout="bg-teal text-white"
+    label="Имя"
+    placeholder="Иван"
+    :rules="[val => notEmpty(val), val => validatePersonalName(val)]"
+    autocomplete="off"
+  )
+  q-input(
+    :readonly="readonly"
+    dense
+    v-model="data.last_name"
+    standout="bg-teal text-white"
+    label="Фамилия"
+    placeholder="Иванов"
+    :rules="[val => notEmpty(val), val => validatePersonalName(val)]"
+    autocomplete="off"
+  )
+  q-input(
+    :readonly="readonly"
+    dense
+    v-model="data.middle_name"
+    standout="bg-teal text-white"
+    label="Отчество"
+    placeholder="Иванович"
+    :rules="[val => validatePersonalName(val)]"
+    autocomplete="off"
+  )
+  q-input(
+    :readonly="readonly"
+    dense
+    v-model="data.birthdate"
+    standout="bg-teal text-white"
+    mask="date"
+    label="Дата рождения"
+    placeholder="Формат: год/месяц/день"
+    :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="data.birthdate")
+            .row.items-center.justify-end
+              q-btn(v-close-popup label="Закрыть" color="primary" flat)
+
+  q-input(
+    :readonly="readonly"
+    dense
+    v-model="data.full_address"
+    standout="bg-teal text-white"
+    label="Адрес регистрации (как в паспорте)"
+    placeholder="г. Москва, ул. Арбат, д.12"
+    :rules="[val => notEmpty(val)]"
+    autocomplete="off"
+  )
+  div(v-if="data.passport")
+    q-input(
+      :readonly="readonly"
+      dense
+      v-model="data.passport.series"
+      standout="bg-teal text-white"
+      label="Серия паспорта"
+      placeholder="Четыре цифры"
+      :rules="[val => notEmpty(val), val => val.length === 4 || 'Серия должна состоять из 4 цифр']"
+      autocomplete="off"
+    )
+    q-input(
+      :readonly="readonly"
+      dense
+      v-model="data.passport.number"
+      standout="bg-teal text-white"
+      label="Номер паспорта"
+      placeholder="Шесть цифр"
+      :rules="[val => notEmpty(val), val => val.length === 6 || 'Номер должен состоять из 6 цифр']"
+      autocomplete="off"
+    )
+    q-input(
+      :readonly="readonly"
+      dense
+      v-model="data.passport.issued_by"
+      standout="bg-teal text-white"
+      label="Паспорт выдан"
+      placeholder="Например, УФМС России"
+      :rules="[val => notEmpty(val)]"
+      autocomplete="off"
+    )
+    q-input(
+      :readonly="readonly"
+      dense
+      v-model="data.passport.issued_at"
+      standout="bg-teal text-white"
+      label="Дата выдачи"
+      placeholder="Формат: год/месяц/день"
+      mask="date"
+      :rules="['date', val => notEmpty(val)]"
+      autocomplete="off"
+    )
+    q-input(
+      :readonly="readonly"
+      dense
+      v-model="data.passport.code"
+      standout="bg-teal text-white"
+      label="Код подразделения"
+      placeholder="Три цифры - три цифры"
+      mask="###-###"
+      :rules="[val => notEmpty(val), val => val.match(/^\d{3}-\d{3}$/) || 'Формат должен быть 000-000']"
+      autocomplete="off"
+    )
+
+  EditableActions(
+    v-if="!readonly"
+    :isEditing="isEditing"
+    @save="saveChanges"
+    @cancel="cancelChanges"
+  )
+</template>
+
+  <script lang="ts" setup>
+  import { useEditableData } from 'src/shared/lib/composables/useEditableData';
+  import { notEmpty, notEmptyPhone } from 'src/shared/lib/utils';
+  import { validEmail } from 'src/shared/lib/utils/validEmailRule';
+  import { validatePersonalName } from 'src/shared/lib/utils';
+  import { EditableActions } from 'src/shared/ui/EditableActions';
+  import { Cooperative } from 'cooptypes';
+
+  const props = defineProps({
+    individual: {
+      type: Object as () => Cooperative.Users.IIndividualData,
+      required: true
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  });
+
+  const handleSave = (updatedIndividual: Cooperative.Users.IIndividualData) => {
+    console.log('Сохранено:', updatedIndividual);
+  };
+
+  const { editableData: data, isEditing, saveChanges, cancelChanges } = useEditableData(props.individual, handleSave);
+  </script>