@coopenomics/desktop 2025.7.3 → 2025.11.8-alpha-2

package/src/widgets/ExtensionDesktopsList/index.ts

@@ -0,0 +1,3 @@
+export { default as DesktopsList } from './ui/DesktopsList.vue'
+export type { IDesktopConfig } from 'src/entities/Desktop/model/types'
+

package/src/widgets/ExtensionDesktopsList/ui/DesktopsList.vue

@@ -0,0 +1,34 @@
+<template lang="pug">
+.desktops-list(v-if='desktops && desktops.length > 0')
+  .q-mt-md
+    q-separator.q-mb-sm
+    .text-subtitle2.text-grey-7.q-mt-md.q-pl-sm.text-center.q-mb-md Рабочие столы
+    q-list(dense)
+      q-item(
+        v-for='(desktop, index) in desktops',
+        :key='desktop.name || index'
+      )
+        q-item-section(avatar)
+          q-avatar(size='md')
+            q-icon(:name='desktop.icon || "fa-solid fa-desktop"', size='sm')
+        q-item-section
+          q-item-label {{ desktop.title || 'Без названия' }}
+          //- q-item-label(caption, v-if='desktop.name') {{ desktop.name }}
+</template>
+
+<script setup lang="ts">
+import type { IDesktopConfig } from 'src/entities/Desktop/model/types'
+
+interface Props {
+  desktops?: IDesktopConfig[] | null
+}
+
+defineProps<Props>()
+</script>
+
+<style scoped lang="scss">
+.desktops-list {
+  width: 100%;
+}
+</style>
+

package/src/widgets/ExtensionImage/index.ts

@@ -0,0 +1 @@
+export { ExtensionImage } from './ui';

package/src/widgets/ExtensionImage/ui/ExtensionImage.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+q-img(v-if='image', :src='image')
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  image?: string | null;
+}
+
+defineProps<Props>();
+</script>

package/src/widgets/ExtensionImage/ui/index.ts

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

package/src/widgets/ExtensionInfo/index.ts

@@ -0,0 +1 @@
+export { ExtensionInfo } from './ui';

package/src/widgets/ExtensionInfo/ui/ExtensionInfo.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+.info-card
+  div
+    span.text-h1 {{ extension.title }}
+      q-chip(
+        square
+        dense
+        size='sm'
+        color='green'
+        outline
+        v-if='extension.is_installed && extension.enabled'
+      ).q-ml-sm установлено
+      q-chip(
+        square
+        dense
+        size='sm'
+        color='orange'
+        outline
+        v-if='extension.is_installed && !extension.enabled'
+      ).q-ml-sm отключено
+      q-chip(
+        size='sm',
+        dense,
+        color='orange',
+        v-if='!extension.is_available',
+        outline
+      ) в разработке
+    div
+      q-chip(
+        outline,
+        v-for='tag in extension.tags',
+        v-bind:key='tag',
+        dense,
+        size='sm'
+      ) {{ tag }}
+
+  ClientOnly
+    template(#default)
+      vue-markdown.description.q-mt-md(:source='extension.readme')
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+import type { IExtension } from 'src/entities/Extension/model/types';
+import { ClientOnly } from 'src/shared/ui/ClientOnly';
+
+// Клиентский компонент для markdown, загружаемый только на клиенте
+const VueMarkdown = defineAsyncComponent(() =>
+  import('vue-markdown-render').then((mod) => mod.default),
+);
+
+interface Props {
+  extension: IExtension;
+}
+
+defineProps<Props>();
+</script>

package/src/widgets/ExtensionInfo/ui/index.ts

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

package/src/widgets/ExtensionInstall/index.ts

@@ -0,0 +1 @@
+export { ExtensionInstall } from './ui';

package/src/widgets/ExtensionInstall/ui/ExtensionInstall.vue

@@ -0,0 +1,44 @@
+<template lang="pug">
+.info-card
+  q-form(ref='formRef')
+    div(v-if='schema && !isEmpty')
+      ClientOnly
+        template(#default)
+          vue-markdown.description.q-mt-md(
+            v-if='instructions',
+            :source='instructions'
+          )
+      div
+        p.text-h5 Настройки
+        ZodForm.q-mt-lg(:schema='schema', :model-value='config', @update:model-value='$emit("update:config", $event)')
+    div(v-else)
+      .q-pa-md
+        p.text-h5 Установка расширения
+        p Расширение не требует дополнительной настройки. Нажмите кнопку "включить" для завершения установки и активации расширения.
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent } from 'vue';
+import { ZodForm } from 'src/shared/ui/ZodForm';
+import { ClientOnly } from 'src/shared/ui/ClientOnly';
+
+// Клиентский компонент для markdown, загружаемый только на клиенте
+const VueMarkdown = defineAsyncComponent(() =>
+  import('vue-markdown-render').then((mod) => mod.default),
+);
+
+interface Props {
+  schema?: any;
+  config: any;
+  instructions?: string;
+  formRef?: any;
+}
+
+const props = defineProps<Props>();
+
+const isEmpty = computed(() => {
+  if (props.schema)
+    return Object.keys(props.schema.properties).length == 0;
+  else return false;
+});
+</script>

package/src/widgets/ExtensionInstall/ui/index.ts

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

package/src/widgets/ExtensionSettings/index.ts

@@ -0,0 +1 @@
+export { ExtensionSettings } from './ui';

package/src/widgets/ExtensionSettings/ui/ExtensionSettings.vue

@@ -0,0 +1,31 @@
+<template lang="pug">
+.info-card
+  q-form(ref='formRef')
+    div(v-if='isEmpty')
+      .q-pa-md
+        p.text-h6 Нет настроек
+        span Расширение не предоставило настроек для изменения.
+    div(v-if='!isEmpty')
+      div
+        p.text-h5 Настройки
+        ZodForm.q-mt-lg(:schema='schema', :model-value='config', @update:model-value='$emit("update:config", $event)')
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { ZodForm } from 'src/shared/ui/ZodForm';
+
+interface Props {
+  schema?: any;
+  config: any;
+  formRef?: any;
+}
+
+const props = defineProps<Props>();
+
+const isEmpty = computed(() => {
+  if (props.schema)
+    return Object.keys(props.schema.properties).length == 0;
+  else return false;
+});
+</script>

package/src/widgets/ExtensionSettings/ui/index.ts

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

package/src/widgets/Header/BackButton/BackButton.vue

@@ -1,21 +1,27 @@
 <!-- BackButton.vue -->
 <template lang="pug">
-q-btn(
-  v-if="backNavigationButton"
-  stretch
-  icon="fas fa-chevron-left"
+q-btn.back-button(
+  stretch,
+  v-if='backNavigationButton',
   flat
-  @click="backNavigationButton.onClick"
-).back-button
-  span.q-pl-sm {{ backNavigationButton.text }}
+  color='secondary',
+  @click='backNavigationButton.onClick'
+)
+  i.fa-solid.fa-chevron-left
+  span.q-pl-sm(v-if='!isMobile') {{ backNavigationButton.text }}
 </template>
-
 <script setup lang="ts">
-import { useDesktopStore } from 'src/entities/Desktop/model'
-import { computed } from 'vue'
+import { useDesktopStore } from 'src/entities/Desktop/model';
+import { computed } from 'vue';
+import { useWindowSize } from 'src/shared/hooks';
+// import { Dark } from 'quasar';
+
+const { isMobile } = useWindowSize();
+const desktopStore = useDesktopStore();
+const backNavigationButton = computed(() => desktopStore.backNavigationButton);
 
-const desktopStore = useDesktopStore()
-const backNavigationButton = computed(() => desktopStore.backNavigationButton)
+// Цвет кнопки в зависимости от темы
+// const backButtonColor = computed(() => Dark.isActive ? 'grey-10' : 'grey-9');
 </script>
 
 <style scoped lang="scss">

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

@@ -1,38 +1,23 @@
 <!-- Header.vue -->
 <template lang="pug">
 div
-  MainHeader(
-    v-if="!matched('cooperative-settings') && !matched('user-settings') && !matched('extstore')"
-    @toggle-left-drawer="emitToggleLeftDrawer"
-  )
-  UserSettingsHeader(v-if="matched('user-settings')")
-  CooperativeSettingsHeader(v-if="matched('cooperative-settings')")
-  ExtstoreHeader(v-if="matched('extstore')")
+  MainHeader(@toggle-left-drawer='emitToggleLeftDrawer')
 </template>
 
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
-import MainHeader from './MainHeader.vue'
-import UserSettingsHeader from './UserSettingsHeader.vue'
-import CooperativeSettingsHeader from './CooperativeSettingsHeader.vue'
-import ExtstoreHeader from './ExtstoreHeader.vue'
-import './HeaderStyles.scss'
+import MainHeader from './MainHeader.vue';
+import './HeaderStyles.scss';
 
 defineProps({
   showDrawer: {
     type: Boolean,
-    required: true
-  }
-})
+    required: true,
+  },
+});
 
-const emit = defineEmits(['toggle-left-drawer'])
-const route = useRoute()
-
-const matched = (what: string) => {
-  return route.matched.find(el => el.name === what)
-}
+const emit = defineEmits(['toggle-left-drawer']);
 
 const emitToggleLeftDrawer = () => {
-  emit('toggle-left-drawer')
-}
+  emit('toggle-left-drawer');
+};
 </script>

package/src/widgets/Header/CommonHeader/HeaderStyles.scss

@@ -16,7 +16,110 @@
   padding: 0px !important;
 }
 
-.header-tab-container {
-  height: 50px !important;
+.header-actions-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.header-actions-group {
+  display: flex;
   overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .q-btn {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  // Анимация для элементов внутри группы
+  .header-action-item {
+    animation: slideInFromLeft 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+  }
+}
+
+.header-scroll-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  min-width: 24px !important;
+  width: 24px !important;
+  height: 24px !important;
+  border-radius: 50% !important;
+  transition: all 0.2s ease !important;
+
+  // Светлая тема
+  &.header-scroll-arrow--light {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+
+    &:hover {
+      background: rgba(255, 255, 255, 1) !important;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+      transform: translateY(-50%) scale(1.1) !important;
+    }
+
+    &:active {
+      transform: translateY(-50%) scale(0.95) !important;
+    }
+  }
+
+  // Темная тема
+  &.header-scroll-arrow--dark {
+    background: rgba(0, 0, 0, 0.7) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.9) !important;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
+      transform: translateY(-50%) scale(1.1) !important;
+    }
+
+    &:active {
+      transform: translateY(-50%) scale(0.95) !important;
+    }
+  }
+
+  &.left {
+    left: -12px;
+  }
+
+  &.right {
+    right: -12px;
+  }
+
+  .q-icon {
+    font-size: 12px !important;
+  }
+
+  .q-btn__content {
+    padding: 0 !important;
+  }
+}
+
+/* Анимации для отдельных элементов header */
+@keyframes slideInFromLeft {
+  0% {
+    transform: translateX(-30px) scale(0.95);
+    opacity: 0;
+  }
+  60% {
+    transform: translateX(5px) scale(1.02);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateX(0) scale(1);
+    opacity: 1;
+  }
 }

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

@@ -9,17 +9,57 @@ q-header.header(bordered, :class='headerClass')
       flat,
       @click='emitToggleLeftDrawer'
     )
-    BackButton(v-if='loggedIn')
+    // Инжектированные кнопки действий в группе с прокруткой
+    .header-actions-container
+      q-btn(
+        v-if='showLeftArrow',
+        @click='scrollLeft',
+        flat,
+        round,
+        dense,
+        icon='chevron_left',
+        size='sm',
+        :class='isDark ? "header-scroll-arrow--dark" : "header-scroll-arrow--light"'
+      ).header-scroll-arrow.left
+
+      q-btn-group.header-actions-group(stretch flat ref='actionsGroupRef', :key='actionsKey')
+        BackButton(v-if='loggedIn', :style='{ "height": "var(--header-action-height)", "animation-delay": "0ms" }')
+
+        component(
+          stretch,
+          v-for='(action, index) in headerActions',
+          :key='action.id',
+          :is='action.component',
+          v-bind='action.props',
+          :style='{ "height": "var(--header-action-height)", "animation-delay": `${(index + 1) * 80}ms` }'
+        ).header-action-item
+
+
+      q-btn(
+        v-if='showRightArrow',
+        @click='scrollRight',
+        flat,
+        round,
+        dense,
+        icon='chevron_right',
+        size='sm',
+        :class='isDark ? "header-scroll-arrow--dark" : "header-scroll-arrow--light"'
+      ).header-scroll-arrow.right
+
     q-toolbar-title
+      q-btn(
+        v-if='!loggedIn && coopTitle',
+        stretch,
+        flat,
+        @click='emitToggleLeftDrawer',
+        :size='isMobile ? "md" : "lg"'
+      ) {{ coopTitle }}
 
     // Добавляем компонент уведомлений, если пользователь авторизован
     NotificationCenter(v-if='loggedIn && isClient')
 
-    SettingsDropdown(
-      :isMobile='isMobile',
-      :isChairman='isChairman',
-      :isMember='isMember'
-    )
+    // Компонент переключения темы без текста
+    ToogleDarkLight(:isMobile='isMobile', :showText='false', :asButton='true')
 
     template(v-if='!loggedIn')
       q-btn(
@@ -44,34 +84,44 @@ q-header.header(bordered, :class='headerClass')
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, nextTick, onMounted, onUpdated, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useCurrentUser } from 'src/entities/Session';
 import { useSessionStore } from 'src/entities/Session';
 import config from 'src/app/config';
-import { useWindowSize } from 'src/shared/hooks';
-import { SettingsDropdown } from 'src/widgets/Header/SettingsDropdown';
+import { useWindowSize, useHeaderActionsReader } from 'src/shared/hooks';
+import { ToogleDarkLight } from 'src/shared/ui/ToogleDarkLight';
 import { BackButton } from 'src/widgets/Header/BackButton';
 import { NotificationCenter } from 'src/widgets/NotificationCenter';
 import './HeaderStyles.scss';
 import { useSystemStore } from 'src/entities/System/model';
-// import { env } from 'src/shared/config'
+import { Zeus } from '@coopenomics/sdk';
 
 const router = useRouter();
 const route = useRoute();
 const $q = useQuasar();
-const { info } = useSystemStore();
+const systemStore = useSystemStore();
 const session = useSessionStore();
 const { isMobile } = useWindowSize();
+const { headerActions } = useHeaderActionsReader();
 const emit = defineEmits(['toggle-left-drawer']);
 
-const isClient = computed(
-  () => typeof process !== 'undefined' && process.env.CLIENT,
-);
+// Refs для управления прокруткой
+const actionsGroupRef = ref<any>();
+const showLeftArrow = ref(false);
+const showRightArrow = ref(false);
 
 // Получаем информацию для навигации назад
 // const coopTitle = computed(() => env.COOP_SHORT_NAME)
+const coopTitle = computed(() => {
+  if (systemStore.info.system_status === Zeus.SystemStatus.install || systemStore.info.system_status === Zeus.SystemStatus.initialized) {
+    return 'УСТАНОВКА';
+  }
+  return `${systemStore.info.vars?.short_abbr} ${systemStore.info.vars?.name}`;
+});
+
+const isClient = computed(() => process.env.CLIENT);
 
 const isDark = computed(() => $q.dark.isActive);
 const headerClass = computed(() =>
@@ -79,18 +129,9 @@ const headerClass = computed(() =>
 );
 const currentUser = useCurrentUser();
 const loggedIn = computed(() => {
-  console.log(
-    'on loggedIn',
-    currentUser.isRegistrationComplete.value,
-    session.isAuth,
-    currentUser,
-  );
   return currentUser.isRegistrationComplete.value && session.isAuth;
 });
 
-const isChairman = computed(() => currentUser.isChairman);
-const isMember = computed(() => currentUser.isMember);
-
 const showRegisterButton = computed(() => {
   if (!loggedIn.value) {
     return config.registrator.showRegisterButton;
@@ -98,17 +139,129 @@ const showRegisterButton = computed(() => {
   return false;
 });
 
+// Функции для управления прокруткой
+const checkOverflow = () => {
+  // Используем двойной nextTick для гарантии после анимаций
+  nextTick(() => {
+    nextTick(() => {
+      if (!actionsGroupRef.value || !actionsGroupRef.value.$el) {
+        showLeftArrow.value = false;
+        showRightArrow.value = false;
+        return;
+      }
+
+      const element = actionsGroupRef.value.$el;
+
+      // Проверяем что элемент отрендерился (имеет размеры)
+      if (element.clientWidth === 0) {
+        showLeftArrow.value = false;
+        showRightArrow.value = false;
+        return;
+      }
+
+      // Проверяем реальные размеры с учетом погрешности
+      const scrollWidth = Math.ceil(element.scrollWidth);
+      const clientWidth = Math.floor(element.clientWidth);
+      const scrollLeft = Math.round(element.scrollLeft);
+
+      // Overflow есть только если разница больше 5 пикселей (увеличили допуск)
+      const hasOverflow = scrollWidth > clientWidth + 5;
+      const canScrollLeft = scrollLeft > 2;
+      const canScrollRight = scrollLeft + clientWidth < scrollWidth - 2;
+
+      showLeftArrow.value = hasOverflow && canScrollLeft;
+      showRightArrow.value = hasOverflow && canScrollRight;
+    });
+  });
+};
+
+const scrollLeft = () => {
+  if (!actionsGroupRef.value || !actionsGroupRef.value.$el) return;
+  actionsGroupRef.value.$el.scrollBy({ left: -100, behavior: 'smooth' });
+  setTimeout(checkOverflow, 400);
+};
+
+const scrollRight = () => {
+  if (!actionsGroupRef.value || !actionsGroupRef.value.$el) return;
+  actionsGroupRef.value.$el.scrollBy({ left: 100, behavior: 'smooth' });
+  setTimeout(checkOverflow, 400);
+};
+
 const is = (what: string) => route.name === what;
 
 const signup = () => {
-  router.push({ name: 'signup', params: { coopname: info.coopname } });
+  router.push({ name: 'signup', params: { coopname: systemStore.info.coopname } });
 };
 
 const login = () => {
-  router.push({ name: 'signin', params: { coopname: info.coopname } });
+  router.push({ name: 'signin', params: { coopname: systemStore.info.coopname } });
 };
 
 const emitToggleLeftDrawer = () => {
   emit('toggle-left-drawer');
 };
+
+// Lifecycle hooks и watchers
+onMounted(() => {
+  // Задержка для завершения первичного рендера
+  setTimeout(() => {
+    checkOverflow();
+
+    // Слушаем изменения размера окна
+    window.addEventListener('resize', checkOverflow);
+
+    // Подключаем слушатель скролла
+    attachScrollListener();
+  }, 100);
+});
+
+onUpdated(() => {
+  // Немедленная проверка после обновления
+  nextTick(() => {
+    checkOverflow();
+  });
+  // И еще одна после завершения анимаций
+  setTimeout(() => {
+    checkOverflow();
+    // Переподключаем слушатель после обновления (из-за :key)
+    attachScrollListener();
+  }, 450);
+});
+
+// Функция для подключения слушателя скролла
+const attachScrollListener = () => {
+  if (actionsGroupRef.value && actionsGroupRef.value.$el) {
+    // Убираем старый слушатель если был
+    actionsGroupRef.value.$el.removeEventListener('scroll', checkOverflow);
+    // Добавляем новый
+    actionsGroupRef.value.$el.addEventListener('scroll', checkOverflow);
+  }
+};
+
+// Ключ для перерендера группы при смене действий
+const actionsKey = computed(() => {
+  return headerActions.value.map((action) => action.id).join('-');
+});
+
+// Watch за изменениями в headerActions для обновления стрелочек
+watch(headerActions, (newActions, oldActions) => {
+  // Если кнопок стало меньше - проверяем с минимальной задержкой
+  if (newActions.length < oldActions.length) {
+    // Немедленная проверка
+    nextTick(() => {
+      checkOverflow();
+      attachScrollListener();
+    });
+    // И дополнительная проверка через 50ms для надежности
+    setTimeout(() => {
+      checkOverflow();
+    }, 50);
+  } else {
+    // Если кнопок стало больше или столько же - ждем окончания анимации
+    setTimeout(() => {
+      checkOverflow();
+      attachScrollListener();
+    }, 450);
+  }
+}, { deep: true });
 </script>