@ozdao/prometheus-framework 0.2.130 → 0.2.132

package/src/modules/community/components/blocks/CardBlogpost.vue

@@ -3,7 +3,7 @@
 		class="pos-relative bg-light radius-big flex-column flex"
 	>
 
-		<router-link 
+		<!-- <router-link 
 			v-if="user && user === blogpost.creator.target._id"
 			:to="{
 				name: 'Edit BlogPost', 
@@ -11,6 +11,7 @@
 					url: blogpost.url
 				}
 			}" 
+
 			class="
 				cursor-pointer 
 				pos-absolute pos-t-regular pos-r-regular
@@ -21,7 +22,7 @@
 				class="i-regular"
 				classes="fill-white"
 			/>
-		</router-link>
+		</router-link> -->
 
 		<CardHeader 
 	    :class="{
@@ -34,6 +35,9 @@
 	    :owner="blogpost.owner" 
     	:creator="blogpost.creator"
     	:date="blogpost.createdAt"
+    	:actions="user && user === blogpost.creator.target._id ? [
+        { to: { name: 'Edit BlogPost', params: {url: blogpost.url } }, label: 'Edit' }
+       ]: null"
 		/>
 
 	

package/src/modules/community/components/blocks/FooterBlogpost.vue

@@ -1,8 +1,16 @@
 <template>
   <footer class="t-semi br-top-dark flex-nowrap flex-nojustify flex">
-    👁️ {{blogpost.views}}
-    <span class="mn-r-small mn-l-small d-block">·</span>
-    <div class="cursor-pointer">
+    <router-link :to="{
+      name: 'BlogPost', 
+      params: { 
+        url: blogpost.url 
+      }
+    }" 
+    class="font-second cursor-pointer hover-bg-white pd-l-thin pd-r-thin radius-big">
+      👁️ {{blogpost.views}}
+    </router-link>
+    
+    <div class="hover-bg-white pd-l-thin pd-r-thin radius-big cursor-pointer">
       <div class="cursor-pointer" @click="addReaction('like')" v-if="!isReacted">
         👍 {{reactionsCount }}
       </div>
@@ -10,8 +18,16 @@
         👍 {{reactionsCount }}
       </div>
     </div>
-    <span class="mn-r-small mn-l-small d-block">·</span>
-    💬 {{blogpost.numberOfComments }}
+    <router-link :to="{
+      name: 'BlogPost', 
+      hash: '#comments',
+      params: { 
+        url: blogpost.url 
+      }
+    }" 
+    class="font-second cursor-pointer hover-bg-white pd-l-thin pd-r-thin radius-big">
+      💬 {{ blogpost.numberOfComments }}
+    </router-link>
   </footer>
 </template>
 

package/src/modules/community/components/layouts/Community.vue

@@ -4,7 +4,7 @@
 		<ul class="align-self-start pos-sticky pos-t-0 w-100 bg-light radius-big pd-medium p-medium gap-thin flex-column flex-nowrap flex">
 			<li  	
 				:class="{'t-black bg-white': route.params.category === 'featured' }" 					
-				@click="router.push({name: 'Blog', params: { category: 'featured' } })" 
+				@click="() => { blog.state.sort.param = 'createdAt'; router.push({name: 'Blog', params: { category: 'featured' } })}" 
 				class="cursor-pointer flex-v-center flex t-medium  pd-thin radius-extra"
 			>
 				<IconFeatured class="i-medium mn-r-thin t-transp"/>
@@ -12,7 +12,7 @@
 			</li>
 			<li  	
 				:class="{'t-black bg-white': route.params.category === 'popular' }"					 				
-				@click="router.push({name: 'Blog', params: { category: 'popular' } })" 
+				@click="() => { blog.state.sort.param = 'views'; router.push({name: 'Blog', params: { category: 'popular' } }) }" 
 				class="cursor-pointer t-medium flex-v-center flex  pd-thin radius-extra"
 			>	
 				<IconPopular class="i-medium mn-r-thin t-transp"/>
@@ -20,16 +20,16 @@
 			</li>
 			<li  	
 				:class="{'t-black bg-white': route.params.category === 'new'}" 					
-				@click="router.push({name: 'Blog', params: { category: 'new' } })" 
+				@click="() => { blog.state.sort.param = 'createdAt'; router.push({name: 'Blog', params: { category: 'new' } })}" 
 				class="cursor-pointer t-medium flex-v-center flex  pd-thin radius-extra"
 			>
 				<IconRecent class="i-medium mn-r-thin t-transp"/>
 				Recent
-		</li>
+			</li>
 			<li 	
 				v-if="auth.state.user._id"
 				:class="{'t-black bg-white': route.params.category === 'following'}" 		
-				@click="router.push({name: 'Blog', params: { category: 'following' } })" 
+				@click="() => { blog.state.sort.param = 'createdAt'; router.push({name: 'Blog', params: { category: 'following' } })}" 
 				class="cursor-pointer t-medium flex-v-center flex pd-thin radius-extra"
 			>
 				<IconFollowing class="i-medium mn-r-thin t-transp"/>
@@ -49,13 +49,13 @@
 		<section class="pos-relative">
 
 			<header class="bg-main t-black radius-big pd-medium pos-relative  mn-b-thin flex-v-center t-left flex-nowrap flex">
-	    	<h2 class="pos-relative flex-v-center flex-nowrap flex">
-	    		<span class="mn-r-small">Topics for </span>
+	    	<h3 class="pos-relative flex-v-center flex-nowrap flex">
+	    		<span class="mn-r-thin">Topics for </span>
 
 	    		<Select 
-		        :options="['today','week','month','year']"
+		        :options="['today','week','month','year','all time']"
 		        v-model:select="blog.state.filter.period" 
-		        placeholder="Select type"
+		        placeholder="all time"
 		        class="
 		        	t-semi
 		        	pos-relative 
@@ -63,14 +63,14 @@
 		        	bg-main t-black
 		        	pd-thin
 		        	radius-medium
-		          h2
+		          h3
 		         	t-center
 		         	br-solid
 		         	br-2px
 		         	br-black-transp-10
 		        "
 		      />
-	    	</h2>
+	    	</h3>
 			</header>
 
 			<router-view  v-slot="{ Component, route }">
@@ -160,6 +160,10 @@
 	const route = useRoute();
 	const router = useRouter();
 
+	if (route.params.category === 'popular') blog.state.sort.param = 'views'; 
+	if (route.params.category === 'new') blog.state.sort.param = 'createdAt'; 
+
+
 	const handleMembershipUpdate = ({ membership, status, target }, statusName, statusNumber) => {
 	  memberships.mutations.handleMembershipUpdate(organizations.state.current, membership, status, target, statusName, statusNumber)
 	};

package/src/modules/community/components/pages/Blog.vue

@@ -1,58 +1,50 @@
 <template>
-  <section>
-
-
-      
-   <!--  <Feed
+  <section class="bg-white">
+    <Feed
+      v-model:sort="blog.state.sort"
       :showLoadMore="false"
       :states="{
         empty: {
-          title: 'No Blogposts Found',
-          description: 'Currently, there are no blogposts available.'
-        }
+          title: 'No Blog Posts Found',
+          description: 'Currently, there are no posts available in this blog. Please check back later.'
+        },
       }"
       :store="{
-        read: (options) => blog.read(options),
-        state: blog.state.all
+        read: (options) => blog.read(options)
       }"
       :options="{
-        skip: 0,
-        limit: 8,
+        limit: 15,
+        category: route.params.category,
+        period: route.query.period,
+        status: 'published',
         user: auth.state.user._id,
-        period: 'year'
+        following: route.params.category === 'following' ? auth.state.user._id : null,
       }"
       v-slot="{ 
         items 
       }"
-      class="cols-4 gap-thin"
+      class="mobile:w-50 desktop:w-100 tablet:w-75 row-1 gap-thin"
     >
       <CardBlogpost 
-        v-for="(blogpost,index) in items" 
-        :key="blogpost._id" 
-        :blogpost="blogpost" 
-        :user="user" 
-        class="mn-b-medium"
-        :class="`div${index}`"
+        v-for="item in items" 
+        :key="item._id" 
+        :blogpost="item" 
+        :user="auth.state.user._id" 
+        class="h-max-40r mn-b-medium"
       />
     </Feed>
-
- -->
-    <Feed 
-      :category="route.params.category" 
-      :user="auth.state.user._id"
-      :period="route.query.period"
-      :following="route.params.category === 'following' ? auth.state.user._id : null"
-    />
   </section>
 </template>
 
 
 <script setup="props">
-  import { computed, onMounted, watch } from 'vue';
+  import { ref, computed, onMounted, watch } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
 
   import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue';
-  import Feed from '@pf/src/modules/community/components/sections/Feed.vue'; 
+  import Feed from '@pf/src/components/Feed/Feed.vue'
+
+  import CardBlogpost from '@pf/src/modules/community/components/blocks/CardBlogpost.vue';
 
   // Import state
   import * as blog from '@pf/src/modules/community/store/blogposts.js';
@@ -65,7 +57,7 @@
   // if (!route.params.category) {
   //   route.params.category = 'popular'
   // }
-
+ 
   onMounted(() => {
 
     if (route.query) {
@@ -73,7 +65,7 @@
 
       const newFilterValue = {
         tags: query.tags ? query.tags.split(',') : [],
-        period: query.period ? query.period : 'week',
+        period: query.period ? query.period : null,
       };
 
       // проверяем наличие категории в route.params и добавляем ее в фильтр
@@ -83,6 +75,7 @@
 
       blog.state.filter = newFilterValue;
     }
+    
   });
 
   watch(() => blog.state.filter, (newFilterValue, oldFilterValue) => {

package/src/modules/community/components/pages/CreateBlogPost.vue

@@ -10,18 +10,18 @@
       <div 
         class="w-full h-full"
       >
-        <Textarea 
+        <!-- <Textarea 
           v-if="post" 
           :prop="post" 
-           :setFocus="true"
+          :setFocus="true"
           content="name" 
           placeholder="Enter post title" 
           class="h2"
-        />
+        /> -->
       </div>
 
       <Constructor 
-         v-if="post" 
+        v-if="post" 
         :content="post.content"
         @update="update => post.content = update"
       />
@@ -38,8 +38,7 @@
     </section>
     </transition>
 
-    <Popup 
-      title="Добавить участника" 
+    <Popup  
       @close-popup="closePublicationPopup" 
       :isPopupOpen="isPublicationPopup"
       class="w-m-33r t-left pd-big bg-white radius-big"
@@ -49,6 +48,7 @@
       <BlockTags
         @tags-changed="newTags => post.tags = newTags"
         :tags="post.tags"
+        class="mn-b-small"
       />
 
       <h5 class="mn-b-thin">Add source:</h5>
@@ -154,13 +154,6 @@ onMounted(async () =>{
     name: post.value.owner.target.profile.name,
     photo: post.value.owner.target.profile.photo
   }
-
-  
-
-  console.log(dataPublics)
-
-
-
 })
 // /////////////////////////////////////////
 // Publication Form
@@ -206,6 +199,7 @@ function onDrafts() {
   if (selectedTags.value.length > 0) selectedTags.value.map(tag => (tag.text))
 
   post.value.status = "draft"
+  post.value.name = post.value.content[0].content
 
   if (route.params.url) {
     blog.update(post.value)
@@ -237,8 +231,7 @@ function onSubmit() {
   if (!selectedOrganization.value) post.value.organization = post.value.creator
 
   post.value.status = "published"
-
-  console.log(post.value)
+  post.value.name = post.value.content[0].content
 
   if (route.params.url) {
     blog.update(post.value)

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

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <CardHeader 
+      class="mn-b-thin"
+      :entity="comment"
+      :entityType="'comment'"
+      :user="owner"
+      :owner="{target: comment.user}" 
+      :creator="{target: comment.user}"
+      :date="comment.createdAt"
+    />
+    <div class="pd-t-zero">
+      <p class="p-big">{{ 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-l-medium mn-t-small bg-white w-100 radius-small pd-small reply-form">
+        <textarea class="w-100" v-model="replyContent"></textarea>
+        <div class="mn-l-auto gap-thin flex-nowrap flex">
+           <button class="bg-grey-transp-25 button" @click="submitReply">Cancel</button>
+          <button class="bg-main 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>
+   
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+import Comment from './Comment.vue';
+
+import CardHeader  from '@pf/src/modules/globals/components/blocks/CardHeader.vue'
+
+const props = defineProps({
+  comment: {
+    type: Object,
+    required: true
+  },
+  target: {
+    type: String,
+    required: true
+  },
+  owner: {
+    type: String,
+    required: true
+  }
+});
+
+const emit = defineEmits(['reply', 'load-more']);
+
+const showReplyForm = ref(false);
+const replyContent = ref('');
+const isExpanded = ref(shouldBeExpanded(props.comment.depth))
+
+function shouldBeExpanded(depth) {
+  return depth % 3 < 2
+}
+
+const totalReplies = computed(() => {
+  function countReplies(comment) {
+    if (!comment.children || comment.children.length === 0) {
+      return 0
+    }
+    return comment.children.length + comment.children.reduce((sum, child) => sum + countReplies(child), 0)
+  }
+  return countReplies(props.comment)
+})
+
+const toggleChildren = () => {
+  isExpanded.value = !isExpanded.value
+}
+
+const submitReply = () => {
+  emit('reply', props.comment._id, replyContent.value);
+  replyContent.value = '';
+  showReplyForm.value = false;
+};
+
+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>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="comments">
     <div>
       <h3 class="mn-b-small">{{ comments.length }} comments</h3>
 
@@ -15,21 +15,17 @@
       </div>
     </div>
 
-    <div v-for="comment in comments" :key="comment._id" class="comment mn-b-small radius-big pd-medium bg-light">
-
-      <CardHeader 
-        class="mn-b-medium"
-        :entity="comment"
-        :entityType="'comment'"
-        :user="owner"
-        :owner="{target: comment.user}" 
-        :creator="{target: comment.user}"
-        :date="comment.createdAt"
+     <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-small radius-big pd-medium bg-light"
       />
-      <div class="pd-t-zero">
-        <p class="p-big">{{ comment.content }}</p>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -37,19 +33,94 @@
 import { ref } from 'vue';
 import axios from 'axios';
 
-import CardHeader  from '@pf/src/modules/globals/components/blocks/CardHeader.vue'
+import Comment from './Comment.vue';
 
-const props = defineProps(['target', 'owner', 'type'])
+const props = defineProps([
+  'target', 
+  'owner', 
+  'type'
+])
 
 const $axios = axios.create({ baseURL: process.env.API_URL });
 const comments = ref([]);
 const commentContent = ref('');
 
 const fetchComments = async () => {
-  const { data } = await $axios.get(`/comments/read?type=${props.type}&target=${props.target}&user=${props.owner}`);
-  comments.value = data;
+  try {
+    const response = await axios.get('/comments/read', {
+      params: {
+        target: props.target,
+        type: props.type,
+        user: props.owner,
+        maxDepth: 2
+      }
+    });
+    comments.value = response.data;
+  } catch (error) {
+    console.error('Error fetching comments:', error);
+  }
 };
 
+const handleReply = async (parentId, content) => {
+  try {
+    const response = await axios.post('/comments/create', {
+      content,
+      target: props.target,
+      type: props.type,
+      user: props.owner,
+      parent: parentId
+    });
+
+    const newComment = response.data;
+
+    // Обновляем дерево комментариев
+    updateCommentTree(comments.value, parentId, newComment);
+  } catch (error) {
+    console.error('Error posting reply:', error);
+  }
+};
+
+const loadMoreChildren = async (commentId, depth) => {
+  try {
+    const response = await axios.get('/comments/read', {
+      params: {
+        target: props.target,
+        type: props.type,
+        user: props.owner,
+        parentId: commentId,
+        depth: depth,
+        maxDepth: 10
+      }
+    });
+
+    // Обновляем дерево комментариев
+    updateCommentTree(comments.value, commentId, response.data, response.data.hasMore, true);
+  } catch (error) {
+    console.error('Error loading more comments:', error);
+  }
+};
+
+const updateCommentTree = (comments, parentId, newData, hasMore, isLoadMore = false) => {
+  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;
+    }
+    if (comments[i].children && updateCommentTree(comments[i].children, parentId, newData, hasMore, isLoadMore)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+
 const submitComment = async () => {
   if (!commentContent.value) {
     return;

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

@@ -6,10 +6,9 @@
   			Discover Our 
         <router-link 
           :to="{ name:'Blog' }"
-          class="transition-ease-in hover-bg-black hover-t-white transition-timing-1 hover-scale-0 bg-main cursor-pointer pd-thin mn-l-thin radius-extra flex flex-v-center"
+          class="transition-ease-in hover-bg-black hover-t-white transition-timing-1 hover-scale-0 bg-main cursor-pointer pd-thin pd-r-small pd-l-small mn-l-thin radius-extra flex flex-v-center"
         >
            <b>Community</b>
-            <IconArrow class="mn-l-thin radius-extra bg-white i-big"/>
         </router-link>
   		</h2>
 
@@ -21,7 +20,8 @@
           skip: 0,
           limit: 8,
           user: auth.state.user._id,
-          period: 'year'
+          period: 'year',
+          category: 'featured'
         }"
         :text="{
           messages: {
@@ -54,9 +54,6 @@
 	import Feed from '@pf/src/components/Feed/Feed.vue'
 	import Slider from '@pf/src/components/Slider/Slider.vue'
 
-  import IconArrow from '@pf/src/modules/icons/navigation/IconArrow.vue'
-
-
   import CardBlogpost from '@pf/src/modules/community/components/blocks/CardBlogpost.vue';
 	// Import state
 	import * as blog from '@pf/src/modules/community/store/blogposts.js';

package/src/modules/community/controllers/blog.controller.js

@@ -58,7 +58,7 @@ const controllerFactory = (db) => {
 			queryProcessorGlobals.getOwnerUserLookupStage(),
 			queryProcessorGlobals.getOwnerOrganizationLookupStage(),
 			queryProcessorGlobals.getAddFieldsCreatorOwnerStage(),
-			{ $sample: { size: Number(req.query.limit) } }
+			// { $sample: { size: Number(req.query.limit) } },
 		]
 
 		try {