@ozdao/martyrs 0.2.428 → 0.2.430

package/src/modules/globals/views/classes/globals.websocket.js

@@ -54,25 +54,24 @@ class GlobalWebSocket {
       return Promise.resolve(false);
     }
 
-    // If already connected with the same user, just return the existing connection
-    if (this.isConnected && this.userId === userId && this.socket) {
-      return Promise.resolve(this.socket);
-    }
-
+    // Always update userId before any connection logic
     this.userId = userId;
 
-    // If there's already a connection attempt in progress, return that promise
-    if (this.connectPromise) {
-      return this.connectPromise;
+    // If already connected with the same user and socket is valid, return the existing connection
+    if (this.isConnected && this.socket && this.socket.readyState === WebSocket.OPEN) {
+      return Promise.resolve(this.socket);
     }
 
+    // Clear any existing connection promise to avoid conflicts
+    this.connectPromise = null;
+
     // Create new connection promise
     this.connectPromise = new Promise((resolve, reject) => {
       // Close existing connection if any
       this.disconnect();
 
       // Create new WebSocket connection with user ID
-      const wsUrl = userId ? `${this.baseUrl}?userId=${userId}` : this.baseUrl;
+      const wsUrl = userId ? `${this.baseUrl}?userId=${encodeURIComponent(userId)}` : this.baseUrl;
       this.socket = new WebSocket(wsUrl);
 
       // Setup event handlers
@@ -142,7 +141,7 @@ class GlobalWebSocket {
    * @param {Object|String} data - Data to send
    * @returns {Boolean} Success status
    */
-  send(data) {
+  async send(data) {
     if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
       console.error('Cannot send message: WebSocket is not connected');
       return false;
@@ -150,7 +149,7 @@ class GlobalWebSocket {
 
     try {
       const message = typeof data === 'string' ? data : JSON.stringify(data);
-      this.socket.send(message);
+      await this.socket.send(message);
       return true;
     } catch (error) {
       console.error('Error sending WebSocket message:', error);

package/src/modules/globals/views/components/layouts/Client.vue

@@ -5,7 +5,7 @@
 		:class="{
   		'pd-t-extra': MOBILE_APP === 'ios',  
 			'bg-white': headerTheme === 'light',
-			'bg-dark': headerTheme === 'dark' 
+			'bg-black': headerTheme === 'dark' 
   	}"
 	>
 		<transition name="moveFromTop" appear>
@@ -26,6 +26,7 @@
 		    :horizontal="true"
 				:navigationItems="route.meta.sidebar_navigation_items"
 				:stateSidebar="globals.state.isOpenSidebar" 
+				:theme="headerTheme"
 		  />
   	</component>
 
@@ -57,7 +58,6 @@
       }"
 		>
 			<ShopCart 
-				class="pd-t-extra"
 				:class="{
 					'mobile:pd-t-extra': MOBILE_APP === 'ios',  
 				}"
@@ -77,6 +77,7 @@
 	      :stateSidebar="globals.state.isOpenSidebar" 
 	      :widthHidden='route.meta?.sidebar_width_hidden'
 	      :width="route.meta?.sidebar_width"
+	      :theme="headerTheme"
 	      @closeSidebar="() => globals.state.isOpenSidebar = !globals.state.isOpenSidebar"
 	    >
 	    	<transition name="moveFromTop"  mode="out-in"  appear>
@@ -86,6 +87,7 @@
 		        :key="route.meta.sidebar_navigation"
 		        :navigationItems="route.meta.sidebar_navigation_items"
 			      :stateSidebar="globals.state.isOpenSidebar" 
+						:theme="headerTheme"
 		      />
 	      </transition>
 	    </component>
@@ -286,19 +288,23 @@
     position: absolute;
   }
 
-	.moveFromTop-enter-active,
-	.moveFromTop-leave-active {
-		transform: translateY(0);
-		opacity: 1;
-		transition: all 0.5s ease; 
-		
-	}
-	.moveFromTop-enter-from,
-	.moveFromTop-leave-to {
-		transform: translateY(-1rem);
-		opacity: 0;
-		transition: all 0.5s ease;
-	}
+.moveFromTop-enter-active,
+.moveFromTop-leave-active {
+  transition: all 0.3s ease, max-height 0.2s ease;
+  overflow: hidden;
+}
+
+.moveFromTop-enter-from,
+.moveFromTop-leave-to {
+  transform: translateY(-1rem);
+  opacity: 0;
+  max-height: 0;
+}
+
+.moveFromTop-enter-to,
+.moveFromTop-leave-from {
+  max-height: 100vh; 
+}
 
 	.moveFromTopAbsolute-enter-active,
 	.moveFromTopAbsolute-leave-active {

package/src/modules/globals/views/components/partials/Header.vue

@@ -71,11 +71,10 @@
 			pos-relative pos-t-0
 			br-b
 			br-solid
-			br-light
 		"
 		:class="{
-  		't-black': theme === 'light',
-  		't-white': theme === 'dark'  
+  		't-black br-light': theme === 'light',
+  		't-white br-dark': theme === 'dark'  
   	}"
 	>
 	<div class="flex-nowrap flex-v-center flex-justify-start flex gap-micro ">
@@ -173,7 +172,7 @@
 
 		<NotificationBadge
 			v-if="auth.state.user._id"
-			:fill="'rgb(var(--black))'"
+			:fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" 
 		/>
 
 		<Button 

package/src/modules/globals/views/components/partials/Navigation.vue

@@ -22,6 +22,10 @@ import Spoiler from '@martyrs/src/components/Spoiler/Spoiler.vue'
 
 const props = defineProps({
   navigationItems: Array, // Fixed property name typo
+  theme: {
+    type: String,
+    default: "light"
+  },
   stateSidebar: {
     type: Boolean,
     default: false
@@ -82,10 +86,10 @@ const processRoute = (route) => {
 
 <template>
   <nav
-    class="o-y-scroll o-x-hidden h-100"
+    class="o-x-hidden h-100"
     :class="[
       stateSidebar ? 'pd-small' : 'pd-micro',
-      horizontal ? 'w-100 desktop-only flex flex-center flex-nowrap' : 'rows-1',
+      horizontal ? 'w-100 desktop-only flex flex-center flex-nowrap o-y-hidden' : 'o-y-scroll rows-1',
     ]"
   >
     <div 
@@ -94,7 +98,7 @@ const processRoute = (route) => {
       :key="section.category" 
       :class="[
         horizontal ? 'w-max flex-child-default flex flex-nowrap' : '',
-         stateSidebar && !horizontal ? 'mn-t-medium' : '',
+        stateSidebar && !horizontal ? 'mn-t-medium' : '',
       ]"
       class=""
     >
@@ -102,7 +106,9 @@ const processRoute = (route) => {
         class="sidebar-category"
         :class="{ 
           'hidden': !stateSidebar || horizontal, 
-          'visible': stateSidebar && !horizontal 
+          'visible': stateSidebar && !horizontal,
+          't-black': theme === 'light',
+          't-white':  theme === 'dark'
         }"
       >
         {{ section.category }}
@@ -119,8 +125,9 @@ const processRoute = (route) => {
           v-show="!item.visible || (typeof item.visible === 'function' ? item.visible(auth.state) : true)"
           class="flex-center"
           :class="[
-            stateSidebar ? '' : 'aspect-1x1',
+            stateSidebar ? '' : '',
             horizontal ? 'w-100 flex flex-nowrap' : '',
+            stateSidebar && !horizontal ? '' : 'aspect-1x1'
           ]"
         >
           <button
@@ -129,14 +136,15 @@ const processRoute = (route) => {
             :class="[
               stateSidebar || horizontal ? 'expanded-item pd-thin' : 'w-100 h-100 justify-center',
               horizontal ? 'w-max flex flex-nowrap' : '',
-              item.route && $route.path === processRoute(item.route) ? 'bg-light' : ''
+              item.route && $route.path === processRoute(item.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
+              theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
             ]"
           >
             <component 
               v-if="item.iconComponent && !horizontal" 
               :is="item.iconComponent" 
               class="i-medium flex-child-default" 
-              :fill="globals.state.theme.darkmode ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+              :fill="globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
             />
             <span  v-if="!item.iconComponent && !horizontal"  class="i-medium sidebar-item-icon t-lh-1 flex-child-default">{{ item.icon }}</span>
             
@@ -177,7 +185,7 @@ const processRoute = (route) => {
                     v-if="subItem.iconComponent" 
                     :is="subItem.iconComponent" 
                     class="sidebar-subitem-icon i-medium" 
-                    :fill="globals.state.theme.darkmode ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+                    :fill="globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
                   />
                   <span v-else class="sidebar-subitem-icon">{{ subItem.icon }}</span>
                   <span class="sidebar-subitem-title">{{ subItem.title }}</span>
@@ -211,7 +219,7 @@ const processRoute = (route) => {
                     v-if="subItem.iconComponent" 
                     :is="subItem.iconComponent" 
                     class="sidebar-subitem-icon i-medium" 
-                    :fill="globals.state.theme.darkmode ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+                   :fill="globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
                   />
                   <span v-else class="sidebar-subitem-icon">{{ subItem.icon }}</span>
                   <span class="sidebar-subitem-title">{{ subItem.title }}</span>
@@ -242,16 +250,6 @@ const processRoute = (route) => {
 
 
 
-.sidebar-subitem-link:hover {
-  background: var(--light-regular);
-}
-
-.sidebar-item-btn:hover {
-  background: var(--light-regular);
-}
-
-
-
 .expanded-item {
   display: flex;
   align-items: center;

package/src/modules/globals/views/components/partials/Sidebar.vue

@@ -3,6 +3,10 @@ import { ref, watch } from 'vue'
 import * as globals from '@martyrs/src/modules/globals/views/store/globals'
 
 const props = defineProps({
+  theme: {
+    type: String,
+    default: "light"
+  },
   stateSidebar: {
     type: Boolean,
     default: false
@@ -28,18 +32,30 @@ const toggleSidebar = () => {
 
 <template>
   <aside
-    class="transition-linear w-min-0  o-hidden flex-child-default z-index-2 bg-white br-r br-solid br-light flex flex-column h-100"
+    class="transition-linear w-min-0  o-hidden flex-child-default z-index-2  br-r br-solid  flex flex-column h-100"
     :class="[
       'sidebar-container',
-      stateSidebar ? `${width} w-min-10 tablet:w-min-100 tablet:w-100 mobile:w-min-100 mobile:w-100` : `${widthHidden} mobile:w-0 br-zero`
+      // 
+      stateSidebar
+      ? `${width} w-min-10 tablet:w-min-100 tablet:w-100 mobile:w-min-100 mobile:w-100`
+      : `${widthHidden} mobile:w-0 br-zero`,
+      // 
+      theme === 'light' 
+      ? 't-black bg-white br-light'
+      : 't-white bg-black br-dark'
     ]"
   >
     <!-- Slot for navigation content -->
     <slot></slot>
 
     <div 
-      class="sidebar-footer"
-      :class="{ 'pd-micro': !stateSidebar, 'pd-small': stateSidebar }"
+      class="br-solid br-t"
+      :class="{ 
+        'pd-micro': !stateSidebar, 
+        'pd-small': stateSidebar,
+        'br-light': theme === 'light',
+        'br-dark':  theme === 'dark'
+      }"
     >
       <button
         @click="() => globals.actions.toggleTheme()"
@@ -101,11 +117,6 @@ const toggleSidebar = () => {
   transform: scale(1.1);
 }
 
-.sidebar-footer {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: var(--light-regular);
-}
 
 .hidden {
   opacity: 0;

package/src/modules/marketplace/views/components/sections/SectionMenu.vue

@@ -1,5 +1,5 @@
 <template>
-	<section id="main-menu" class="pd-thin pos-relative">
+	<section id="main-menu" class="pos-relative">
 		<h2 class="w-m-60r mn-auto pd-t-big pd-b-big t-center">
 			Weed and Accessories to <br><b>Enhance Your Smoking Experience</b> 
 		</h2>

package/src/modules/notifications/components/elements/NotificationBadge.vue

@@ -117,6 +117,13 @@ const handleClickOutside = (event) => {
 // Lifecycle hooks
 onMounted(() => {
   document.addEventListener('click', handleClickOutside);
+
+  if (isOpen.value) {
+    const userId = auth.state.user._id;
+    if (userId) {
+      getNotifications(userId);
+    }
+  }
 });
 
 onUnmounted(() => {

package/src/modules/orders/components/blocks/CardOrderBackoffice.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="bg-light pos-relative pd-medium radius-medium">
+    <CardHeader 
+      :entity="order"
+      :entityType="'order'"
+      :user="user"
+      :owner="order.creator" 
+      :creator="order.creator"
+      :date="order.createdAt"
+      class="mn-b-small"
+    />
+
+    <div class="mn-b-small pd-small bg-white radius-small flex-nowrap flex"> 
+      <div class="w-100">
+        <p class="t-truncate">{{order.delivery.address || 'Not specified'}}</p> 
+      </div>
+
+      <div class="w-100 t-right">
+        <h3 class="mn-b-thin">{{currency}}{{getTotal(order.positions)}}</h3>
+        <p>#{{order._id.slice(0, 4) + '...' + order._id.slice(-4)}}</p> 
+      </div>
+    </div>
+ 
+    <div class="cols-1 pos-relative mn-b-small gap-thin pd-small bg-white radius-small">
+		  <!-- Всегда отображаем первые две позиции -->
+		  <template v-for="(position, index) in order.positions">
+		  	<transition name="moveFromTop">
+			    <div 
+			      v-if="index < 2 || (spoiler && index >= 2)" 
+			      :key="index" 
+			      class="w-100 flex"
+			    >
+			      <p class="mn-r-auto">{{ position.name }}</p>
+			      <p class="t-right">
+			        {{ position.quantity }} {{ position.type }}
+			        x
+			        <span class="t-transp">{{ currency }} {{ position.price }}</span>
+			      </p>
+			    </div>
+	      </transition>
+		  </template>
+		
+		  <!-- Кнопка переключения для дополнительных позиций, видна только если есть больше двух позиций -->
+		  <button
+		    v-if="order.positions.length > 2"
+		    @click.prevent="spoiler = !spoiler"
+		    class="cursor-pointer radius-big bg-light-transp-50 pd-nano w-100 flex-center flex"
+		  >
+		    {{ !spoiler ? `+${order.positions.length - 2} more` : `Hide` }}
+		  </button>
+		</div>
+
+    <div class="pd-small bg-white radius-small gap-micro flex-v-center flex-nowrap flex"> 
+      <IconTime class="i-semi t-transp" fill="rgb(var(--black)" />
+      <p class="t-medium mn-r-auto">{{formatDate(order.deadline)}}</p>
+
+      <span 
+        class="flex-child flex-child-shrink-0 capitalize w-max t-medium radius-big pd-b-nano pd-t-nano pd-r-thin pd-l-thin bg-main"
+      >
+        {{order.status}}
+      </span>
+
+      <span 
+        class="flex-child flex-child-shrink-0 capitalize w-max t-medium radius-big pd-b-nano pd-t-nano pd-r-thin pd-l-thin t-white bg-red"
+      >
+        {{order.payment.status || 'Not defined'}}
+      </span>
+    </div>
+
+    <div v-if="order.comment" class="pos-relative radius-small bg-fifth-transp-10 mn-t-thin pd-small">
+      <p class="mn-b-thin t-transp uppercase p-small t-medium">Comment</p>
+      <p>{{order.comment}}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CardHeader from '@martyrs/src/modules/globals/views/components/blocks/CardHeader.vue';
+import IconTime from '@martyrs/src/modules/icons/entities/IconTime.vue';
+
+const props = defineProps({
+  order: {
+    type: Object,
+    required: true
+  },
+  user: {
+    type: Object,
+    required: true
+  },
+  formatDate: {
+    type: Function,
+    required: true
+  },
+  getTotal: {
+    type: Function,
+    required: true
+  },
+  currency: {
+    type: String,
+    default: ''
+  }
+});
+
+const spoiler = ref(false);
+</script>

package/src/modules/orders/components/blocks/CardOrderItem.vue

@@ -23,7 +23,7 @@
         <div>
           <p>
             <span class="t-second mn-r-micro d-inline-block t-demi">
-              {{ product.price_currency || returnCurrency() }}{{ (product.listing === 'rent' ? (rentalDays || product.quantity || 1) : (product.quantity || 1)) * product.price }}
+              {{ product.price_currency || returnCurrency() }}{{ (product.listing === 'rent' ? (rentalDays || product.quantity || 0) : (product.quantity || 0)) * product.price }}
             </span>
 
             <span class="p-small t-transp">
@@ -34,7 +34,7 @@
               </template>
               
               <template v-else>
-                {{ product.quantity || 1 }} {{ product.unit || 'pcs' }}
+                {{ product.quantity || 0 }} {{ product.unit || 'pcs' }}
               </template>
             </span>
           </p>  

package/src/modules/orders/components/blocks/CardOrderUser.vue

@@ -148,17 +148,24 @@ const statusText = computed(() => {
     case 'canceled':
       return `Canceled, ${updatedDate}`;
     default:
-      // Расчет задержки
-      if (props.positions?.length) {
-        const lastEndDate = new Date(props.positions[props.positions.length - 1].date.end);
+    // Расчет задержки
+    if (props.positions?.length) {
+      const lastPosition = props.positions[props.positions.length - 1];
+      const lastEndDateRaw = lastPosition?.date?.end;
+
+      if (lastEndDateRaw) {
+        const lastEndDate = new Date(lastEndDateRaw);
         const now = new Date();
-        const diffTime = Math.abs(now - lastEndDate);
+        const diffTime = Math.abs(now.getTime() - lastEndDate.getTime());
         const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
         if (diffDays > 0 && props.status !== 'finished' && props.status !== 'canceled') {
           return `Delay ${diffDays} day${diffDays > 1 ? 's' : ''}`;
         }
       }
-      return `Created, ${createdDate}`;
+    }
+    return `Created, ${createdDate}`;
+
   }
 });
 
@@ -192,16 +199,16 @@ threeDaysFromNow.setDate(today.getDate() + 3);
 // Показывать ли уведомление о возврате
 const showReturnNotice = computed(() => {
   return props.positions.some(position => {
-    const endDate = getDateWithoutTime(position.date.end);
-    return endDate <= threeDaysFromNow;
+    const endDate = position?.date?.end ? getDateWithoutTime(position.date.end) : null;
+    return endDate !== null && endDate <= threeDaysFromNow;
   });
 });
 
 // Есть ли просроченные позиции
 const hasOverdue = computed(() => {
   return props.positions.some(position => {
-    const endDate = getDateWithoutTime(position.date.end);
-    return endDate < today;
+    const endDate = position?.date?.end ? getDateWithoutTime(position.date.end) : null;
+    return endDate !== null && endDate < today;
   });
 });