@ozdao/martyrs 0.2.581 → 0.2.582

package/src/modules/notifications/components/layouts/NotificationsLayout.vue

@@ -1,69 +1,25 @@
 <template>
-  <div class="notifications-layout">
-    <div class="">
-      <router-view></router-view>
-    </div>
-    
-    <div v-if="!wsConnected" class="connection-status">
-      <div class="connection-warning">
-        <span class="warning-icon">⚠️</span>
-        <span class="warning-text">
-          Notification service disconnected. 
-          <button @click="reconnect" class="reconnect-btn">Reconnect</button>
-        </span>
-      </div>
+  <div>
+    <router-view />
+
+    <!-- Показываем только если WS был подключен и потом отвалился -->
+    <div v-if="wsManager.state.wasConnected && !wsManager.state.isConnected" class="pos-fixed pos-b-0 pos-l-0 pos-r-0 pd-small bg-warning t-center">
+      <span>⚠️ Notification service disconnected.</span>
+      <button class="mn-l-thin bg-none bd-none cursor-pointer t-main" @click="reconnect">Reconnect</button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, inject, ref, onMounted, onUnmounted } from 'vue';
+import { computed, inject } from 'vue';
 import wsManager from '@martyrs/src/modules/core/views/classes/ws.manager.js';
 
-// Get notification manager from store
 const store = inject('store');
-
 const notificationManager = computed(() => store.notificationManager || null);
 
-// Реактивное состояние WebSocket
-const wsConnected = ref(wsManager.isConnected);
-
-// ID слушателей для очистки
-const openListenerId = ref(null);
-const closeListenerId = ref(null);
-
-onMounted(() => {
-  // Подписываемся на события WebSocket
-  openListenerId.value = wsManager.addEventListener('open', () => {
-    wsConnected.value = true;
-  });
-  
-  closeListenerId.value = wsManager.addEventListener('close', () => {
-    wsConnected.value = false;
-  });
-  
-  // Устанавливаем начальное состояние
-  wsConnected.value = wsManager.isConnected;
-});
-
-onUnmounted(() => {
-  // Очищаем слушатели
-  if (openListenerId.value) {
-    wsManager.removeEventListener('open', openListenerId.value);
-  }
-  if (closeListenerId.value) {
-    wsManager.removeEventListener('close', closeListenerId.value);
-  }
-});
-
-
-// Methods
 const reconnect = () => {
   if (notificationManager.value) {
     notificationManager.value.initialize();
   }
 };
-</script>
-
-<style scoped>
-</style>
+</script>

package/src/modules/notifications/components/pages/Notifications.vue

@@ -1,36 +1,35 @@
 <template>
-  <div class="notifications-page pd-small">
-    <Tab
-      v-model:selected="activeTab"
-      :tabs="[
-        { label: `All Notifications${unreadCount > 0 ? ` (${unreadCount})` : ''}`, value: 'all' },
-        { label: 'Notification Settings', value: 'preferences' }
+  <div class="mobile:pd-thin pd-medium">
+    <SectionPageTitle
+      v-if="!MOBILE_APP"
+      :title="`Notifications${unreadCount > 0 ? ` (${unreadCount})` : ''}`"
+      :actions="[
+        { method: () => isSettingsPopup = true, label: 'Settings' }
       ]"
-      class="flex-child-default gap-micro scroll-hide bg-light radius-medium h-max pd-thin mn-b-thin o-x-scroll"
-      classTab="bg-white"
+      class="mn-b-small"
     />
-    
-    <div class="tab-content">
-      <notifications-list v-if="activeTab === 'all'" />
-      <notification-preferences v-else-if="activeTab === 'preferences'" />
-    </div>
+
+    <NotificationsList />
+
+    <Popup
+      :isPopupOpen="isSettingsPopup"
+      @close-popup="isSettingsPopup = false"
+      title="Notification Settings"
+      class="bg-white pd-medium w-m-30r radius-big"
+    >
+      <NotificationPreferences />
+    </Popup>
   </div>
 </template>
 
 <script setup>
 import { ref, inject } from 'vue';
-import { useRoute } from 'vue-router';
-import Tab from "@martyrs/src/components/Tab/Tab.vue";
+import SectionPageTitle from '@martyrs/src/modules/core/views/components/sections/SectionPageTitle.vue';
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
 import NotificationsList from '../sections/NotificationsList.vue';
 import NotificationPreferences from '../sections/NotificationPreferences.vue';
 
-// Get route and notification state
-const route = useRoute();
 const { unreadCount } = inject('useNotifications')();
 
-// Set initial active tab based on route query param or default to 'all'
-const activeTab = ref(route.query.tab || 'all');
+const isSettingsPopup = ref(false);
 </script>
-
-<style scoped>
-</style>

package/src/modules/notifications/components/sections/NotificationPreferences.vue

@@ -1,51 +1,49 @@
 <template>
-  <div class="notification-preferences">
-    <h2 class="mn-b-small">Notification Preferences</h2>
-    <p class="description">Choose how you want to receive notifications</p>
-    
-    <div v-if="loading" class="preferences-loading">
-      <div class="loading-spinner">🔄</div>
-      <p>Loading preferences...</p>
+  <div>
+    <p class="t-transp mn-b-small">Choose how you want to receive notifications</p>
+
+    <div v-if="loading" class="pd-large t-center t-transp">
+      <Loader />
     </div>
-    
-    <div v-else class="preferences-form">
-      <div 
-        v-for="(enabled, channelType) in preferences" 
-        :key="channelType" 
-        class="preference-item"
+
+    <div v-else class="gap-thin flex-column flex">
+      <div
+        v-for="(enabled, channelType) in preferences"
+        :key="channelType"
+        class="flex flex-v-center flex-between bg-light radius-small pd-small"
       >
-        <div class="preference-info">
-          <div class="preference-icon">{{ getChannelIcon(channelType) }}</div>
-          <div class="preference-details">
-            <h3>{{ getChannelName(channelType) }}</h3>
-            <p>{{ getChannelDescription(channelType) }}</p>
+        <div class="flex w-100 flex-v-center gap-small mn-r-small">
+          <div class="h4">{{ getChannelIcon(channelType) }}</div>
+          <div class="flex-column flex gap-micro">
+            <p class="fw-medium lh-1">{{ getChannelName(channelType) }}</p>
+            <p class="p-small t-transp lh-1">{{ getChannelDescription(channelType) }}</p>
           </div>
         </div>
-        <label class="toggle-switch">
-          <input
-            type="checkbox"
-            :checked="enabled"
-            @change="updatePreference(channelType, $event.target.checked)"
-          >
-          <span class="toggle-slider"></span>
-        </label>
+        <Checkbox
+          mode="switch"
+          :radio="enabled"
+          @update:radio="updatePreference(channelType, $event)"
+          class="flex-shrink-0"
+        />
       </div>
-      
-      <div class="form-actions">
-        <button 
-          class="save-btn" 
-          :disabled="!hasChanges || saving" 
-          @click="savePreferences"
-        >
-          {{ saving ? 'Saving...' : 'Save Changes' }}
-        </button>
-        <button 
-          v-if="hasChanges" 
-          class="cancel-btn" 
-          @click="resetChanges"
+
+      <div class="flex flex-end gap-small mn-t-thin">
+        <Button
+          v-if="hasChanges"
+          :submit="resetChanges"
+          :showLoader="false"
+          :showSucces="false"
+          class="bg-white t-dark"
         >
           Cancel
-        </button>
+        </Button>
+        <Button
+          :submit="savePreferences"
+          :validation="!hasChanges || saving"
+          class="bg-main t-white"
+        >
+          {{ saving ? 'Saving...' : 'Save Changes' }}
+        </Button>
       </div>
     </div>
   </div>
@@ -53,6 +51,9 @@
 
 <script setup>
 import { ref, reactive, computed, onMounted, inject } from 'vue';
+import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Loader from '@martyrs/src/components/Loader/Loader.vue';
 
 // Get notification preferences functionality
 const { 
@@ -154,143 +155,3 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>
-
-.description {
-  color: #666;
-  margin-bottom: 24px;
-}
-
-.preferences-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 0;
-}
-
-.loading-spinner {
-  font-size: 2rem;
-  margin-bottom: 16px;
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.preference-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid #eee;
-}
-
-.preference-item:last-child {
-  border-bottom: none;
-}
-
-.preference-info {
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-
-.preference-icon {
-  font-size: 1.5rem;
-  margin-right: 16px;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.preference-details h3 {
-  margin: 0 0 4px 0;
-  font-size: 1rem;
-}
-
-.preference-details p {
-  margin: 0;
-  color: #666;
-  font-size: 0.875rem;
-}
-
-/* Toggle switch styles */
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 50px;
-  height: 24px;
-}
-
-.toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  transition: .4s;
-  border-radius: 24px;
-}
-
-.toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 16px;
-  width: 16px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  transition: .4s;
-  border-radius: 50%;
-}
-
-input:checked + .toggle-slider {
-  background-color: #2196F3;
-}
-
-input:checked + .toggle-slider:before {
-  transform: translateX(26px);
-}
-
-.form-actions {
-  margin-top: 24px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 16px;
-}
-
-.save-btn, .cancel-btn {
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.save-btn {
-  background-color: #2196F3;
-  border: none;
-  color: white;
-}
-
-.save-btn:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
-}
-
-.cancel-btn {
-  background-color: white;
-  border: 1px solid #ccc;
-}
-</style>

package/src/modules/notifications/components/sections/NotificationsList.vue

@@ -1,111 +1,52 @@
 <template>
-  <div class="notifications-list-container">
-    <div v-if="!MOBILE_APP" class="notifications-header">
-      <h2>Notifications</h2>
-   <!--    <div class="notifications-controls">
-        <div class="notifications-filter">
-          <label for="filter-type">Filter: </label>
-          <select id="filter-type" v-model="filterType">
-            <option value="all">All</option>
-            <option value="unread">Unread</option>
-            <option value="read">Read</option>
-            <option value="info">Info</option>
-            <option value="success">Success</option>
-            <option value="warning">Warning</option>
-            <option value="error">Error</option>
-          </select>
-        </div>
-        <button 
-          v-if="unreadCount > 0" 
-          class="mark-all-read-btn"
-          @click="markAllAsRead"
-        >
-          Mark all as read
-        </button>
-      </div> -->
-    </div>
-    
-    <div v-if="loading" class="notifications-loading">
-      <div class="loading-spinner">🔄</div>
-      <p>Loading notifications...</p>
-    </div>
-    
-    <div v-else-if="filteredNotifications.length === 0" class="notifications-empty">
-      <p>{{ emptyMessage }}</p>
-    </div>
-    
-    <div v-else class="notifications-items">
-      <notification-item 
-        v-for="notification in filteredNotifications" 
-        :key="notification._id" 
-        :notification="notification"
-        @click="handleNotificationClick(notification)"
-      />
-    </div>
-    
-    <div v-if="!loading && notifications.length > 0" class="notifications-footer">
-      <button v-if="lastSync" class="refresh-btn" @click="refreshNotifications">
-        🔄 Last updated: {{ formatTime(lastSync) }}
-      </button>
-    </div>
-  </div>
+  <Feed
+    :states="{
+      empty: {
+        title: 'No Notifications',
+        description: 'You have no notifications yet'
+      }
+    }"
+    :store="{
+      read: fetchNotifications
+    }"
+    :options="{
+      limit: 20
+    }"
+    :skeleton="{
+      structure: [
+        { block: 'text', size: 'small' },
+        { block: 'text', size: 'large' }
+      ]
+    }"
+    v-slot="{ items }"
+    class="gap-thin cols-1"
+  >
+    <NotificationItem
+      v-for="notification in items"
+      :key="notification._id"
+      :notification="notification"
+      @click="handleNotificationClick(notification)"
+    />
+  </Feed>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, inject } from 'vue';
-import { useRouter } from 'vue-router';
+import { inject } from 'vue';
+import Feed from '@martyrs/src/components/Feed/Feed.vue';
 import NotificationItem from '../blocks/NotificationItem.vue';
 import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
+import { actions } from '@martyrs/src/modules/notifications/store/notifications.store.js';
 
-// Get router and notification functionality
-const router = useRouter();
-const { 
-  notifications, 
-  unreadCount, 
-  loading, 
-  lastSync,
-  markAllAsRead, 
-  getNotifications,
-  handleNotificationAction
-} = inject('useNotifications')();
+const { handleNotificationAction } = inject('useNotifications')();
 
-// Local state
-const filterType = ref('all');
-
-// Computed properties
-const filteredNotifications = computed(() => {
-  let filtered = [...notifications.value];
-  
-  // Apply filters
-  if (filterType.value === 'unread') {
-    filtered = filtered.filter(n => n.status !== 'read');
-  } else if (filterType.value === 'read') {
-    filtered = filtered.filter(n => n.status === 'read');
-  } else if (filterType.value !== 'all') {
-    // Filter by notification type
-    filtered = filtered.filter(n => n.type === filterType.value);
-  }
-  
-  // Sort by creation date (newest first)
-  return filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
-});
+const fetchNotifications = async (options) => {
+  const userId = auth.state.user._id;
+  if (!userId) return [];
 
-const emptyMessage = computed(() => {
-  if (notifications.value.length === 0) {
-    return 'You have no notifications';
-  }
-  
-  switch (filterType.value) {
-    case 'unread':
-      return 'You have no unread notifications';
-    case 'read':
-      return 'You have no read notifications';
-    default:
-      return `You have no ${filterType.value} notifications`;
-  }
-});
+  const data = await actions.getNotifications(userId);
+  return data || [];
+};
 
-// Methods
 const handleNotificationClick = (notification) => {
   if (notification._id) {
     handleNotificationAction({
@@ -114,125 +55,4 @@ const handleNotificationClick = (notification) => {
     });
   }
 };
-
-const refreshNotifications = () => {
-  const userId = auth.state.user._id;
-  if (userId) {
-    getNotifications(userId);
-  }
-};
-
-// Format relative time without external libraries
-const formatTime = (timestamp) => {
-  if (!timestamp) return '';
-  
-  const now = new Date();
-  const date = new Date(timestamp);
-  const diffSeconds = Math.floor((now - date) / 1000);
-  
-  // Format based on how long ago
-  if (diffSeconds < 60) {
-    return 'Just now';
-  } else if (diffSeconds < 3600) {
-    const minutes = Math.floor(diffSeconds / 60);
-    return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`;
-  } else if (diffSeconds < 86400) {
-    const hours = Math.floor(diffSeconds / 3600);
-    return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
-  } else {
-    // Format date string
-    return date.toLocaleDateString(undefined, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-  }
-};
-
-// Lifecycle
-onMounted(() => {
-  const userId = auth.state.user._id;
-  if (userId && notifications.value.length === 0 && !loading.value) {
-    getNotifications(userId);
-  }
-});
 </script>
-
-<style scoped>
-.notifications-list-container {
-  width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.notifications-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.notifications-controls {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.notifications-filter select {
-  padding: 6px 12px;
-  border-radius: 4px;
-  border: 1px solid #ddd;
-}
-
-.mark-all-read-btn {
-  background-color: #2196f3;
-  color: white;
-  border: none;
-  padding: 6px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.notifications-loading,
-.notifications-empty {
-  padding: 40px 0;
-  text-align: center;
-  color: #666;
-}
-
-.loading-spinner {
-  font-size: 2rem;
-  margin-bottom: 10px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.notifications-items {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.notifications-footer {
-  margin-top: 20px;
-  text-align: center;
-}
-
-.refresh-btn {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  padding: 6px 12px;
-}
-
-.refresh-btn:hover {
-  color: #2196f3;
-}
-</style>