@ozdao/martyrs 0.2.481 → 0.2.482

package/src/modules/community/components/sections/Comment.vue

@@ -1,68 +1,77 @@
 <template>
-  <div>
-    <CardHeader 
-      class="mn-b-thin w-100"
-      :entity="comment"
-      :entityType="'comment'"
-      :user="owner"
-      :owner="{target: comment.owner, type: 'user'}" 
-      :creator="{target: comment.owner, type: 'user'}"
-      :date="comment.createdAt"
-    />
-    <div class="pd-t-zero">
-      <p class="p-medium">{{ comment.content }}</p>
-    </div>
-
-    <div class="mn-t-thin flex-v-center flex-nowrap flex gap-small">
-      
-      <button 
-        v-if="totalReplies > 0" 
-        @click="toggleChildren"
-        class="t-second cursor-pointer t-medium  font-second"
-      >
-        {{ isExpanded ? 'Hide' : totalReplies + (totalReplies === 1 ? ' reply' : ' replies') }} 
-      </button>
-
-      <button 
-        v-if="owner" 
-        class="font-second cursor-pointer t-transp t-medium" 
-        @click="showReplyForm = true"
-      > 
-        Reply
-      </button>
-    
-    </div>
-
-     <div v-if="showReplyForm" class="mn-t-small bg-white pd-thin radius-regular">
+  <div class="comment-wrapper">
+    <div class="comment-content ">
+      <CardHeader 
+        class="mn-b-thin mn-b-thin w-100"
+        :entity="comment"
+        :entityType="'comment'"
+        :user="owner"
+        :owner="{target: comment.owner, type: 'user'}" 
+        :creator="{target: comment.owner, type: 'user'}"
+        :date="comment.createdAt"
+      />
+      <div class="pd-t-zero">
+        <p class="p-medium">{{ comment.content }}</p>
+      </div>
+      <div class="mn-t-thin flex-v-center flex-nowrap flex gap-small">
+        <button 
+          v-if="totalReplies > 0" 
+          @click="toggleChildren"
+          class="t-second cursor-pointer t-medium font-second"
+        >
+          {{ isExpanded ? 'Hide' : totalReplies + (totalReplies === 1 ? ' reply' : ' replies') }} 
+        </button>
+        <button 
+          v-if="owner" 
+          class="font-second cursor-pointer t-transp t-medium" 
+          @click="showReplyForm = true"
+        > 
+          Reply
+        </button>
+      </div>
+      <div v-if="showReplyForm" class="mn-t-small bg-white pd-thin radius-regular">
         <textarea class="w-100" v-model="replyContent"></textarea>
         <div class="mn-l-auto gap-thin flex-nowrap flex">
-          <button class="bg-grey-transp-25 pd-r-regular pd-l-regular pd-thin button" @click="submitReply">Cancel</button>
+          <button class="bg-grey-transp-25 pd-r-regular pd-l-regular pd-thin button" @click="showReplyForm = false">Cancel</button>
           <button class="bg-main pd-r-regular pd-l-regular pd-thin button" @click="submitReply">Send</button>
         </div>
       </div>
-
-    <div v-if="isExpanded && comment.children && comment.children.length" class="br-solid br-l br-grey-transp-25">
-      <Comment
-        v-for="childComment in comment.children"
-        :key="childComment._id"
-        :comment="childComment"
-        :target="target"
-        :owner="owner"
-        @reply="handleReply"
-        @load-more="handleLoadMore"
-        class="mn-l-medium mn-t-small "
-      />
     </div>
-   
+
+    <transition name="collapse">
+      <div v-if="isExpanded && comment.children && comment.children.length" class="mn-t-regular comment-children">
+        <div
+          v-for="(childComment, index) in comment.children"
+          :key="childComment._id"
+          class="child-wrapper"
+        >
+          <!-- Кликабельная область с линией -->
+          <div 
+            @click="toggleChildren" 
+             @mouseenter="highlightLevel($event, true)"
+            @mouseleave="highlightLevel($event, false)"
+            class="tree-line cursor-pointer"
+            :class="{ 'last-child': index === comment.children.length - 1 }"
+          ></div>
+          
+          <Comment
+            :comment="childComment"
+            :target="target"
+            :owner="owner"
+            @reply="handleReply"
+            @load-more="handleLoadMore"
+            class="child-comment mn-b-regular"
+          />
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script setup>
 import { ref, computed } from 'vue';
-
 import Comment from './Comment.vue';
-
-import CardHeader  from '@martyrs/src/modules/globals/views/components/blocks/CardHeader.vue'
+import CardHeader from '@martyrs/src/modules/globals/views/components/blocks/CardHeader.vue'
 
 const props = defineProps({
   comment: {
@@ -85,6 +94,17 @@ const showReplyForm = ref(false);
 const replyContent = ref('');
 const isExpanded = ref(shouldBeExpanded(props.comment.depth))
 
+
+const childrenContainer = ref(null)
+
+function highlightLevel(event, state) {
+  const wrapper = event.currentTarget?.parentElement?.parentElement;
+  if (!wrapper) return;
+
+  const lines = wrapper.querySelectorAll(':scope > .child-wrapper > .tree-line');
+  lines.forEach(line => line.classList.toggle('hovered', state));
+} 
+
 function shouldBeExpanded(depth) {
   return depth % 3 < 2
 }
@@ -113,11 +133,95 @@ const handleReply = (parentId, content) => {
   emit('reply', parentId, content);
 };
 
-const loadMoreChildren = () => {
-  emit('load-more', props.comment._id, props.comment.depth + 1);
-};
-
 const handleLoadMore = (commentId, depth) => {
   emit('load-more', commentId, depth);
 };
-</script>
+</script>
+
+<style lang="scss" scoped>
+.comment-children {
+  margin-top: 1rem;
+}
+
+.child-wrapper {
+  position: relative;
+}
+
+.child-comment {
+  padding-left: 1.5rem;
+}
+
+.tree-line {
+  position: absolute;
+  left: calc(-1rem + 2px);
+  top: -1rem;
+  width: 2rem;
+  height: calc(100% + 2rem);
+}
+
+.tree-line::before {
+  content: '';
+  position: absolute;
+  left: 1rem;
+  top: 0;
+  width: 2px;
+  height: 100%;
+   border-left: 1px solid rgba(var(--grey), 1);
+  transition: background 0.2s ease;
+}
+
+.tree-line::after {
+  content: '';
+  position: absolute;
+  left: 1rem;
+  top: 2rem;
+  width: 1rem;
+  height: 2px;
+  border-bottom: 1px solid rgba(var(--grey), 1);
+  transition: background 0.2s ease;
+
+}
+
+.child-wrapper {
+  &:last-child {
+    .tree-line::after {
+      display: none;
+    }
+  }
+}
+
+.tree-line.last-child::before {
+  height: 2rem;
+  border-bottom-left-radius: 0.5rem;
+  border-left: 1px solid rgba(var(--grey), 1);
+  border-bottom: 1px solid rgba(var(--grey), 1);
+  background: none;
+  width: 1rem;
+}
+
+
+.tree-line.hovered::before,
+.tree-line.hovered::after {
+  border-color: rgba(var(--second), 1);
+}
+
+.tree-line.last-child.hovered::before {
+  border-color: rgba(var(--second), 1);
+}
+
+/* Анимация */
+.collapse-enter-active,
+.collapse-leave-active {
+  transition: all 0.3s ease;
+}
+
+.collapse-enter-from {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+}
+
+.collapse-leave-to {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+}
+</style>

package/src/modules/community/components/sections/Comments.vue

@@ -1,50 +1,72 @@
 <template>
   <div id="comments">
     <div class="mn-b-medium">
-      <h3 class="mn-b-small">{{ comments.length }} comments</h3>
-
-      <div @click="$router.push({name: 'Sign In'})" class="pd-big cursor-pointer mn-b-small bg-black t-white flex-center flex radius-big" v-if="!owner">
-        <p class="t-semi uppercase">Please log in to leave a comment.</p>
-      </div>
-
-      <div class="mn-b-small" v-if="owner">
-        <form @submit.prevent="submitComment" class="bg-light radius-medium pd-medium">
-          <textarea v-model="commentContent" placeholder="Enter your comment" class="p-big w-100"></textarea>
-          <button type="submit" class="mn-l-auto bg-main pd-r-regular pd-l-regular pd-thin button">Send</button>
+      
+      <h3 class="mn-b-regular">{{ comments.length }} comments</h3>
+
+      <div class="mn-b-small">
+        <form @submit.prevent="handleCommentSubmit" class="bg-white radius-medium pd-medium">
+          <textarea 
+            v-model="commentContent" 
+            placeholder="Enter your comment" 
+            class="p-big w-100"
+            style="resize: none;"
+          ></textarea>
+          <button type="submit" class="mn-l-auto bg-main pd-r-regular pd-l-regular pd-thin button">
+            Send
+          </button>
         </form>
       </div>
     </div>
 
-     <Comment
-        v-for="comment in comments"
-        :key="comment._id"
-        :comment="comment"
-        :target="target"
-        :type="type"
-        :owner="owner"
-        @reply="handleReply"
-        @load-more="loadMoreChildren"
-        class="comment bg-light pd-medium mn-b-small radius-medium"
-      />
+    <Comment
+      v-for="comment in comments"
+      :key="comment._id"
+      :comment="comment"
+      :target="target"
+      :type="type"
+      :owner="owner"
+      @reply="handleReply"
+      @load-more="loadMoreChildren"
+      class="comment mn-b-medium"
+    />
   </div>
 </template>
 
-<script setup="props">
-import { ref } from 'vue';
-import axios from 'axios';
+<script setup>
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useRoute } from 'vue-router';
+import { Preferences } from '@capacitor/preferences';
 
 import Comment from './Comment.vue';
+import $axios from '@martyrs/src/modules/globals/views/utils/axios-instance.js';
 
 const props = defineProps([
   'target', 
   'owner', 
   'type'
-])
+]);
+
+const route = useRoute();
+const { proxy } = getCurrentInstance();
 
-const $axios = axios.create({ baseURL: process.env.API_URL });
 const comments = ref([]);
 const commentContent = ref('');
 
+const DRAFT_KEY = `comment_draft_${props.type}_${props.target}`;
+
+// Загружаем сохраненный черновик при монтировании
+onMounted(async () => {
+  // Проверяем наличие черновика
+  const { value } = await Preferences.get({ key: DRAFT_KEY });
+  
+  if (value) {
+    commentContent.value = value;
+    // Очищаем черновик после загрузки
+    await Preferences.remove({ key: DRAFT_KEY });
+  }
+});
+
 const fetchComments = async () => {
   try {
     const response = await $axios.get('/comments/read', {
@@ -62,7 +84,78 @@ const fetchComments = async () => {
   }
 };
 
+const handleCommentSubmit = async () => {
+  if (!commentContent.value) {
+    return;
+  }
+
+  // Проверяем авторизацию
+  if (!props.owner) {
+    // Сохраняем черновик
+    await Preferences.set({
+      key: DRAFT_KEY,
+      value: commentContent.value
+    });
+    
+    // Показываем auth popup
+    await proxy.$showAuth({
+      title: 'Join the discussion',
+      subtitle: 'To comment on this post, please sign in or create an account.',
+      returnUrl: route.fullPath
+    });
+    
+    return;
+  }
+
+  // Отправляем комментарий
+  await submitComment();
+};
+
+const submitComment = async () => {
+  try {
+    const response = await $axios.post('/comments/create', {
+      target: props.target,
+      user: props.owner,
+      type: props.type,
+      content: commentContent.value,
+      creator: {
+        target: props.owner,
+        type: 'User',
+        hidden: false
+      },
+      owner: {
+        target: props.owner,
+        type: 'User'
+      }
+    });
+
+    response.data.owner = props.owner;
+    comments.value.push(response.data);
+
+    commentContent.value = '';
+  } catch (error) {
+    console.error(error);
+  }
+};
+
 const handleReply = async (parentId, content) => {
+  // Проверяем авторизацию для ответов
+  if (!props.owner) {
+    // Сохраняем черновик ответа
+    await Preferences.set({
+      key: `${DRAFT_KEY}_reply_${parentId}`,
+      value: content
+    });
+    
+    await proxy.$showAuth({
+      title: 'Join the discussion',
+      subtitle: 'To reply to this comment, please sign in or create an account.',
+      returnUrl: route.fullPath
+    });
+    
+    return;
+  }
+
   try {
     const response = await $axios.post('/comments/create', {
       content,
@@ -83,8 +176,6 @@ const handleReply = async (parentId, content) => {
     });
 
     const newComment = response.data;
-
-    // Обновляем дерево комментариев
     updateCommentTree(comments.value, parentId, newComment);
   } catch (error) {
     console.error('Error posting reply:', error);
@@ -104,7 +195,6 @@ const loadMoreChildren = async (commentId, depth) => {
       }
     });
 
-    // Обновляем дерево комментариев
     updateCommentTree(comments.value, commentId, response.data, response.data.hasMore, true);
   } catch (error) {
     console.error('Error loading more comments:', error);
@@ -115,11 +205,9 @@ const updateCommentTree = (comments, parentId, newData, hasMore, isLoadMore = fa
   for (let i = 0; i < comments.length; i++) {
     if (comments[i]._id === parentId) {
       if (isLoadMore) {
-        // Для загрузки дополнительных комментариев, добавляем их к существующим
         comments[i].children = [...comments[i].children, ...newData];
         comments[i].hasMore = hasMore;
       } else {
-        // Для нового комментария, добавляем его в начало списка дочерних
         comments[i].children.push(newData);
       }
       return true;
@@ -131,36 +219,5 @@ const updateCommentTree = (comments, parentId, newData, hasMore, isLoadMore = fa
   return false;
 };
 
-
-const submitComment = async () => {
-  if (!commentContent.value) {
-    return;
-  }
-  try {
-    const response = await $axios.post('/comments/create', {
-      target: props.target,
-      user: props.owner,
-      type: props.type,
-      content: commentContent.value,
-      creator: {
-        target: props.owner,
-        type: 'User',
-        hidden: false
-      },
-      owner: {
-        target: props.owner,
-        type: 'User'
-      }
-    });
-
-    response.data.owner = props.owner;
-    comments.value.push(response.data);
-
-    commentContent.value = '';
-  } catch (error) {
-    console.error(error);
-  }
-};
-
 fetchComments();
-</script>
+</script>

package/src/modules/community/components/sections/HotPosts.vue

@@ -1,5 +1,5 @@
 <template>
-  <Slider
+  <Carousel
     :store="{
       read: (options) => blog.read({ 
         skip, 
@@ -29,13 +29,12 @@
       :hideDescription="true"
       class="bg-white flex flex-column radius-medium h-35r"
     />
-  </Slider>
+  </Carousel>
 </template>
 
 <script setup>
-import { ref, onMounted, defineProps } from 'vue'
-import Feed from '@martyrs/src/components/Feed/Feed.vue'
-import Slider from '@martyrs/src/components/Slider/Slider.native.vue'
+import { defineProps } from 'vue'
+import Carousel from '@martyrs/src/components/Feed/Carousel.vue'
 import CardBlogpost from '@martyrs/src/modules/community/components/blocks/CardBlogpost.vue'
 import * as blog from '@martyrs/src/modules/community/store/blogposts.js'
 import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
@@ -64,11 +63,12 @@ const props = defineProps({
 </script>
 
 <style lang="scss">
-.slider-hotpost .carousel__slide {
+.slider-hotpost :deep(.carousel__slide ) {
   flex: 0 0 25%;
 }
+
 @media screen and (max-width: 1025px) {
-  .slider-hotpost .carousel__slide {
+  .slider-hotpost :deep(.carousel__slide ) {
     flex: 0 0 75%;
   }
 }

package/src/modules/events/components/sections/EventsHot.vue

@@ -1,5 +1,5 @@
 <template>
-  <SliderNative
+  <Carousel
     :store="{
       read: (options) => events.read({ 
         skip, 
@@ -13,45 +13,38 @@
         description: 'Currently, there are no featured events available.'
       }
     }"
-    v-slot="{ 
-      item
-    }"
     class="slider-hotpost flex-child-default"
   >
-
-    <router-link 
-      :to="{name: 'Event', params: {url: item.url}}" 
-      class="cursor-pointer pos-relative flex flex-justify-end flex-column h-25r bg-semi radius-medium o-hidden pd-medium t-white bg-dark"
-    >
-      <Media 
-        :url="(FILE_SERVER_URL || '') + item.cover"
-        class="pos-absolute pos-t-0 pos-r-0 z-index-1 w-100 h-100 object-fit-cover bg-light"
-      />
-
-      <div class="pos-relative z-index-2">
-        <h3 
-          class="mn-b-small"
-        >
-          {{ item.name }}
-        </h3>
-        <span v-if="item.date?.start" class="mn-r-nano d-inline-block w-max pd-b-micro pd-t-micro pd-r-thin pd-l-thin radius-small t-medium bg-white">
-          <span class="t-semi t-black" > 
-            {{item.location}} / {{formatDate(item.date.start, { language: $i18n.locale, monthName: true,  })}} 
-          </span>
-        </span> 
-      </div>
-    </router-link>
-
-  </SliderNative>
+    <template v-slot="{ item }">
+      <router-link 
+        :to="{name: 'Event', params: {url: item.url}}" 
+        class="cursor-pointer pos-relative flex flex-justify-end flex-column h-25r bg-semi radius-medium o-hidden pd-medium t-white bg-dark"
+      >
+        <Media 
+          :url="(FILE_SERVER_URL || '') + item.cover"
+          class="pos-absolute pos-t-0 pos-r-0 z-index-1 w-100 h-100 object-fit-cover bg-light"
+        />
+        <div class="pos-relative z-index-2">
+          <h3 
+            class="mn-b-small"
+          >
+            {{ item.name }}
+          </h3>
+          <span v-if="item.date?.start" class="mn-r-nano d-inline-block w-max pd-b-micro pd-t-micro pd-r-thin pd-l-thin radius-small t-medium bg-white">
+            <span class="t-semi t-black" > 
+              {{item.location}} / {{formatDate(item.date.start, { language: $i18n.locale, monthName: true,  })}} 
+            </span>
+          </span> 
+        </div>
+      </router-link>
+    </template>
+  </Carousel>
 </template>
 
 <script setup>
 import { ref, onMounted, defineProps } from 'vue'
-
-import Feed from '@martyrs/src/components/Feed/Feed.vue'
-import SliderNative from '@martyrs/src/components/Slider/Slider.native.vue'
+import Carousel from '@martyrs/src/components/Feed/Carousel.vue'
 import Media from '@martyrs/src/components/Media/Media.vue'
-
 import * as events from '@martyrs/src/modules/events/store/events.js'; 
 import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
 

package/src/modules/globals/controllers/classes/abac/abac.core.js

@@ -16,8 +16,10 @@ export default class ABACCore {
       req: null,
       socket: null,
       params: {},
-      _cache: new Map(), // Кэш результатов политик для этого контекста
+      _cache: new Map(),
       _abac: this.abac,
+      // Добавляем флаг для пропуска field policies (например, для админов)
+      skipFieldPolicies: input.skipFieldPolicies || false,
     };
 
     if (input.req) {