@ozdao/prometheus-framework 0.2.39 → 0.2.41

package/src/modules/chats/components/sections/ChatWindow.vue

@@ -1,27 +1,56 @@
 <template>
-  <div class="chat-window">
-    <div class="h-max-20r o-scroll flex-nowrap flex-column flex gap-thin ">
-      <ChatMessage
-        v-for="message in messages"
-        :key="message._id"
-        :message="message"
-      />
-    </div>
-    <input class="bg-white w-100 radius-big pd-small" placeholder="Enter your message" type="text" v-model="newMessage" @keyup.enter="sendMessage" />
+  <div class="bg-white radius-semi bg-white o-hidden pos-relative">
+    
+      <div ref="allMessages"  class="chat-messages o-scroll h-max-20r">
+        <div  class="pos-relative h-min-20r flex-justify-end flex flex-column br-b br-solid br-black-transp-10">
+          <transition  name="scaleIn" mode="out-in">
+            <div v-if="messages.length < 1"  class="flex-center w-100 h-100 flex-column flex pos-absolute">
+              <PlaceholderChat class="radius-100 mn-b-thin"/>
+              <h4>Here you can view your chat history</h4>
+              <p>Feel free to ask if you have any questions.</p>
+            </div>
+
+            <TransitionGroup v-else  name="list" tag="ul" class="w-100 o-hidden">
+              <ChatMessage
+                v-for="message in messages"
+                :key="message._id"
+                :message="message"
+              />
+
+            </TransitionGroup>
+           </transition>
+          
+        </div>
+      </div>
+
+      
+      <div class="flex-nowrap flex-v-center flex bg-white w-100 radius-big pd-small">
+        <IconAdd
+          class="mn-r-thin t-transp i-regular"
+        />
+        <input class="" placeholder="Enter your message" type="text" v-model="newMessage" @keyup.enter="sendMessage" />
+      </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
+
+import IconAdd from '@pf/src/modules/icons/navigation/IconAdd.vue'
+import PlaceholderChat from '@pf/src/modules/icons/placeholders/PlaceholderChat.vue'
+
 import ChatMessage from '../blocks/ChatMessage.vue';
 import chatStore from '../../store/chat.store.js';
 
 const newMessage = ref('');
+const allMessages = ref(null)
+
+// Вычисляемые свойства
 const messages = computed(() => chatStore.state.messages);
 
+// Функция для отправки сообщения
 const sendMessage = () => {
   if (newMessage.value) {
-
     const message = {
       text: newMessage.value,
       username: chatStore.state.username,
@@ -29,12 +58,28 @@ const sendMessage = () => {
     };
 
     chatStore.methods.addMessage(message);
+    console.log(allMessages.value.lastElementChild.offsetHeight)
+    allMessages.value.scrollTop = allMessages.value.lastElementChild.offsetHeight
     
     newMessage.value = '';
   }
 };
+
+// // При добавлении нового сообщения автоматически прокручиваем вниз
+watch(chatStore.state.messages, () => {
+  allMessages.value.scrollTop = allMessages.value.lastElementChild.offsetHeight
+}, {deep: true});
+
 </script>
 
 <style>
-/* Стили остаются без изменений */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
 </style>

package/src/modules/chats/store/chat.store.js

@@ -9,8 +9,12 @@ const state = reactive({
 
 const methods = {
   connectWebSocket() {
+    console.log('process env')
+      console.log(process.env.WSS_URL)
+
     return new Promise(function(resolve, reject) {
-      state.websocket = new WebSocket('wss://localhost:8080');
+
+      state.websocket = new WebSocket(process.env.WSS_URL);
 
       state.websocket.onopen = function() {
         resolve(state.websocket);
@@ -28,6 +32,7 @@ const methods = {
     });
   },
   setMessages(messages) {
+          console.log(process.env.API_URL)
     state.messages = messages;
   },
   addMessage(message) {

package/src/modules/community/community.client.js

@@ -7,7 +7,6 @@ import FooterBlogpost from './components/blocks/FooterBlogpost.vue';
 import Activity from './components/blocks/Activity.vue';
 import CardBlogpost from './components/blocks/CardBlogpost.vue';
 import Feed from './components/sections/Feed.vue';
-import SubscribeNewsletter from './components/sections/SubscribeNewsletter.vue';
 import JoinUs from './components/sections/JoinUs.vue';
 import Comments from './components/sections/Comments.vue';
 import HotPosts from './components/sections/HotPosts.vue';
@@ -30,7 +29,6 @@ export {
   Activity,
   CardBlogpost,
   Feed,
-  SubscribeNewsletter,
   JoinUs,
   Comments,
   HotPosts,

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

@@ -1,39 +1,50 @@
 <template>
 	<article 
-		class="pos-relative bg-grey radius-big"
+		class="pos-relative bg-grey radius-big flex-column flex"
 	>
 
-		<IconEdit
+		<router-link 
 			v-if="user && user === blogpost.creator.target._id"
-			@click.stop="$router.push({
+			:to="{
 				name: 'Edit BlogPost', 
 				params: {
 					url: blogpost.url
 				}
-			})" 
-			class="z-index-2 pos-absolute pos-t-regular pos-r-regular i-regular t-transp"
-		/>
+			}" 
+			class="
+				cursor-pointer 
+				pos-absolute pos-t-regular pos-r-regular
+				radius-extra pd-thin bg-second
+			"
+		>
+			<IconEdit
+				class="i-regular"
+				classes="fill-white"
+			/>
+		</router-link>
 
 		<CardHeader 
-		    :class="{
-		    	'mn-b-small pd-medium': type !== 'short',
-		    	'flex-child-order-last flex-child mn-l-small': type === 'short',
-		    }"
-		    :entity="blogpost"
-		    :entityType="'blogpost'"
-		    :user="user"
-		    :owner="blogpost.owner" 
-	    	:creator="blogpost.creator"
-	    	:date="blogpost.createdAt"
-
-	    />
+	    :class="{
+	    	'mn-b-small pd-medium': type !== 'short',
+	    	'flex-child-order-last flex-child mn-l-small': type === 'short',
+	    }"
+	    :entity="blogpost"
+	    :entityType="'blogpost'"
+	    :user="user"
+	    :owner="blogpost.owner" 
+    	:creator="blogpost.creator"
+    	:date="blogpost.createdAt"
+		/>
+
+		<!-- <Image :prop="{content:firstImage.content}" class="h-100"/> -->
+
 		<template
 			v-if="firstImage && firstImage.content && type !== 'blogpostPage'"
 		>
 			<img 
 				:src="(FILE_SERVER_URL || '') + firstImage.content" 
 				alt="Blog post image" 
-				class="mn-b-medium object-fit-cover w-100 h-20r"
+				class="mn-b-medium object-fit-cover w-100 h-min-10r  h-100"
 			/>
 		</template>
 
@@ -41,11 +52,11 @@
 			v-if="!firstImage?.content && firstVideo && firstVideo.content && type !== 'blogpostPage'"
 		>
 			<div class="flex-center flex">
-      <video controls class="mn-b-medium object-fit-cover w-100 h-20r">
-        <source :src="firstVideo.content" type="video/mp4">
-        Your browser does not support the video tag.
-      </video>
-    </div>
+	      <video controls class="mn-b-medium object-fit-cover w-100 h-min-10r h-max-20r">
+	        <source :src="firstVideo.content" type="video/mp4">
+	        Your browser does not support the video tag.
+	      </video>
+	    </div>
 		</template>
 
 		<section
@@ -54,30 +65,40 @@
 			
 			<div v-if="type !== 'blogpostPage'" class="cursor-pointer mn-b-thin flex-nowrap flex w-100">
 
-				<h3
-					@click="router.push({
+				<Text 
+				 	:text="blogpost.name || ''" 
+				 	:maxLen="80" 
+				 	class="h3 d-block"
+				 	@click="router.push({
 						name: 'BlogPost', 
 						params: { 
 							url: blogpost.url 
 						}
 					})"
-					class="">
-					{{blogpost.name}}
-				</h3>
+				/>
 
-				<div v-if="blogpost.status === 'draft'" class="pd-micro t-white uppercase t-semi p-small flex-center flex pd-r-small pd-l-small mn-l-thin w-min bg-second radius-extra">
+				<div 
+					v-if="blogpost.status === 'draft'" 
+					class="pd-micro t-white uppercase t-semi p-small flex-center flex pd-r-small pd-l-small mn-l-thin w-min bg-second radius-extra"
+				>
 					{{blogpost.status}}
 				</div>
 				
 			</div>
+			
 			<p 
-				v-if="firstText && firstText.content && type !== 'blogpostPage'" 
+				v-if="firstText && firstText.content && type !== 'blogpostPage' && !hideDescription" 
 				class='mn-b-small t-transp p-big'
 			>
 				{{firstText.content.slice(0,120)}}...
 			</p>
 
-			<h3 v-if="type === 'blogpostPage'" class="mn-b-small h2">{{blogpost.name}}</h3>
+			<h3 
+				v-if="type === 'blogpostPage'" 
+				class="mn-b-small h2"
+			>
+				{{blogpost.name}}
+			</h3>
 
 			<slot></slot>
 
@@ -102,6 +123,9 @@
 	import CardHeader  from '@pf/src/modules/globals/components/blocks/CardHeader.vue'
 	import FooterBlogpost  from '@pf/src/modules/community/components/blocks/FooterBlogpost.vue'	
 
+	import Image  from '@pf/src/modules/constructor/components/elements/Image.vue';
+
+  import Text     from '@pf/src/components/Text/Text.vue'
 	import Chips  from '@pf/src/components/Chips/Chips.vue'
 
 	import IconEdit from '@pf/src/modules/icons/navigation/IconEdit.vue'
@@ -112,7 +136,21 @@
 
 	const router = useRouter()
 
-	const props = defineProps(['blogpost','user', 'type'])
+	const props = defineProps({
+		blogpost: {
+			type: Object,
+		},
+		user: {
+			type: String,
+		},
+		type: {
+			type: String,
+		},
+		hideDescription: {
+			type: Boolean,
+			default: false
+		}
+	})
 
   const firstImage = computed(() => {
 	  return props.blogpost.content.find(block => block.type === 'ImageUpload');

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

@@ -1,48 +1,73 @@
 <template>
-	<div style="grid-template-columns: 1fr 3fr 1fr;" class="cols-3 gap-thin pd-thin">
+	<div style="grid-template-columns: 2fr 4fr 2fr;" class="cols-3 gap-thin pd-thin">
 
-		<ul class="w-100 bg-grey radius-big pd-medium p-medium gap-thin flex-column flex-nowrap flex">
+		<ul class="align-self-start pos-sticky pos-t-0 w-100 bg-grey radius-big pd-medium p-medium gap-thin flex-column flex-nowrap flex">
 			<li  	
-			:class="{'t-white bg-black': route.params.category === 'featured' }" 					
-			@click="router.push({name: 'Blog', params: { category: 'featured' } })" 
-			class="cursor-pointer t-medium  pd-thin radius-small">👑 Featured</li>
+				:class="{'t-black bg-white': route.params.category === 'featured' }" 					
+				@click="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"/>
+				Featured
+			</li>
 			<li  	
-			:class="{'t-white bg-black': route.params.category === 'popular' }"					 				
-			@click="router.push({name: 'Blog', params: { category: 'popular' } })" 
-			class="cursor-pointer t-medium  pd-thin radius-small">🔥 Popular</li>
+				:class="{'t-black bg-white': route.params.category === 'popular' }"					 				
+				@click="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"/>
+				Popular
+			</li>
 			<li  	
-			:class="{'t-white bg-black': route.params.category === 'new'}" 					
-			@click="router.push({name: 'Blog', params: { category: 'new' } })" 
-			class="cursor-pointer t-medium  pd-thin radius-small">🆕 New</li>
+				:class="{'t-black bg-white': route.params.category === 'new'}" 					
+				@click="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 	
-			v-if="auth.state.user._id"
-			:class="{'t-white bg-black': route.params.category === 'following'}" 		
-			@click="router.push({name: 'Blog', params: { category: 'following' } })" 
-			class="cursor-pointer t-medium pd-thin radius-small">👥 Following</li>
-
-			<router-link :to="{name: 'Create BlogPost'}" class="button mn-t-small bg-main w-100">Create Post</router-link>
+				v-if="auth.state.user._id"
+				:class="{'t-white bg-black': route.params.category === 'following'}" 		
+				@click="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"/>
+				Following
+			</li>
+
+			<router-link 
+				:to="{
+					name: 'Create BlogPost'
+				}" 
+				class="button t-medium mn-t-small bg-main w-100"
+			>
+				Create Post
+			</router-link>
 		</ul>
 
 		<section class="pos-relative">
 
-			<header class="bg-black t-white 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 t-left">
-	    		<span class="">Topics for </span>
+			<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>
 
 	    		<Select 
 		        :options="['today','week','month','year']"
 		        v-model:select="blog.state.filter.period" 
 		        placeholder="Select type"
 		        class="
+		        	t-semi
 		        	pos-relative 
 		        	w-max
-		        	mn-l-small
-		        	bg-grey
+		        	bg-main t-black
 		        	pd-thin
 		        	radius-medium
 		          h2
 		         	t-center
-		          t-black
+		         	br-solid
+		         	br-2px
+		         	br-black-transp-10
 		        "
 		      />
 	    	</h2>
@@ -56,10 +81,19 @@
 
 		</section>
 
-		<div class="bg-grey radius-big pd-medium">
+		<div class="align-self-start  bg-grey radius-big pd-medium">
 			<div class="gap-thin flex-nowrap flex">
-				<p class="mn-b-small">POPULAR COMMUNITIES</p>
-				<button class="radius-extra flex-center flex i-medium bg-main ">+</button>
+				<p class="t-medium mn-b-small">Popular Communities</p>
+				
+				<router-link 
+					v-if="auth.state.user._id"
+					:to="{
+						name: 'Create Organization'
+					}"
+					class="t-medium cursor-pointer hover-scale-1 radius-extra flex-center flex i-medium bg-main"
+				>
+					+
+				</router-link>
 			</div>
 
 
@@ -111,6 +145,11 @@
 	import Feed from '@pf/src/components/Feed/Feed.vue'
 	import CardOrganization from '@pf/src/modules/organizations/components/blocks/CardOrganization.vue'
 
+	import IconFeatured from '@pf/src/modules/icons/entities/IconFeatured.vue'
+	import IconPopular from '@pf/src/modules/icons/entities/IconPopular.vue'
+	import IconRecent from '@pf/src/modules/icons/entities/IconRecent.vue'
+	import IconFollowing from '@pf/src/modules/icons/entities/IconFollowing.vue'
+
  	// Import state
 	import * as blog from '@pf/src/modules/community/store/blogposts.js';
 	import * as auth from '@pf/src/modules/auth/store/auth'

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

@@ -1,5 +1,42 @@
 <template>
   <section>
+
+
+      
+   <!--  <Feed
+      :showLoadMore="false"
+      :states="{
+        empty: {
+          title: 'No Blogposts Found',
+          description: 'Currently, there are no blogposts available.'
+        }
+      }"
+      :store="{
+        read: (options) => blog.read(options),
+        state: blog.state.all
+      }"
+      :options="{
+        skip: 0,
+        limit: 8,
+        user: auth.state.user._id,
+        period: 'year'
+      }"
+      v-slot="{ 
+        items 
+      }"
+      class="cols-4 gap-thin"
+    >
+      <CardBlogpost 
+        v-for="(blogpost,index) in items" 
+        :key="blogpost._id" 
+        :blogpost="blogpost" 
+        :user="user" 
+        class="mn-b-medium"
+        :class="`div${index}`"
+      />
+    </Feed>
+
+ -->
     <Feed 
       :category="route.params.category" 
       :user="auth.state.user._id"

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

@@ -27,9 +27,6 @@
           :user="auth.state.user._id"
           :type="'blogpostPage'"
           class="mn-b-medium"
-          :class="{
-            'br-b br-solid br-black-transp-10': index !== blogpost.length - 1
-          }"
         >
         <section>
 					<component
@@ -53,7 +50,7 @@
 				
       </CardBlogpost>
 
-
+     	<h3 class="mn-b-small">Recommended Communities</h3>
 			<Publics 
 				class="mn-b-small"
 			/>
@@ -83,6 +80,7 @@
 
 	import Image  from '@pf/src/modules/constructor/components/elements/Image.vue';
 	import VideoPlayer  from '@pf/src/modules/constructor/components/elements/VideoPlayer.vue';
+	import Embed  from '@pf/src/modules/constructor/components/elements/Embed.vue';
 
 	import * as blog from '@pf/src/modules/community/store/blogposts.js';
 	import * as auth from '@pf/src/modules/auth/store/auth';
@@ -111,12 +109,13 @@
 	  'Caption': 'p',
 	  'ImageUpload': Image,
 	  'Video': VideoPlayer,
-	  'Link': 'a'
+	  'Link': 'a',
+	  'Embed': Embed
 	};
 
 	function getBlockProps(block) {
 		if (block.type === 'Textarea') {
-			return { innerHTML: block.content, class: "p-medium"  };
+			return { innerHTML: block.content, class: "p-big"  };
 		} else if (block.type === 'H2') {
 			return { innerHTML: block.content, class: "h3" };
 		} else if (block.type === 'Caption') {

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

@@ -7,6 +7,7 @@
     
     <div class="">
 
+
       <CardBlogpost 
         v-for="blogpost in filteredBlogPosts" 
         :key="blogpost._id" 

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

@@ -13,6 +13,7 @@
         <Textarea 
           v-if="post" 
           :prop="post" 
+           :setFocus="true"
           content="name" 
           placeholder="Enter post title" 
           class="h2"

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

@@ -20,7 +20,7 @@
         :key="blogpost._id" 
         :blogpost="blogpost" 
         :user="user" 
-        class="mn-b-medium"
+        class="h-max-40r mn-b-medium"
       />
         
         <transition 

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

@@ -1,36 +1,76 @@
 <template>
-	<section class="community-feed">
-		<h2 class="w-m-75r mn-auto pd-t-big pd-b-big t-center">Discover the Vibrant Community</h2>
-
-		<Feed 
-			:skip="0" 
-			:limit="3" 
-    	:user="auth.state.user._id"
-    	:period="'year'"
-    	class="flex flex-wrap gap-thin"
-	    />
+	<section class="pd-thin">
+    <div class="bg-grey radius-big pd-t-big pd-b-big">
+
+  		<h2 class="w-100  pd-b-small  t-center flex-center flex">
+  			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"
+        >
+           <b>Community</b>
+            <IconArrow class="mn-l-thin radius-extra bg-white i-big"/>
+        </router-link>
+  		</h2>
+
+  		 <Slider
+        :store="{
+          read: (options) => blog.read(options)
+        }"
+        :options="{
+          skip: 0,
+          limit: 8,
+          user: auth.state.user._id,
+          period: 'year'
+        }"
+        :text="{
+          messages: {
+            en: {
+              title: 'No Blogposts Found',
+              description: 'Currently, there are no blogposts available.'
+            }
+          }
+        }"
+        v-slot="{ 
+          item
+        }"
+        class="slider-hotpost"
+      >
+        <CardBlogpost 
+          :key="item._id" 
+          :blogpost="item" 
+          :user="user" 
+          :hideDescription="true"
+          class="bg-white flex flex-column h-35r"
+        />
+      </Slider>
+    </div>
 	</section>
 </template>
 
 <script setup="props">
 	import { ref, onMounted } from 'vue'
-	import Feed from '@pf/src/modules/community/components/sections/Feed.vue'; 
+
+	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';
 	import * as auth  from '@pf/src/modules/auth/store/auth'
 </script>
 
-<style scoped>
-	.community-feed {
-		padding: 20px;
-	}
-
-	.grid-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr; /* создаём две колонки */
-    grid-gap: 20px;
-	}
-
-
-</style>
+<style lang="scss" >
+  .slider-hotpost .embla__slide {
+      flex: 0 0 25%;
+    }
 
+    @media screen and (max-width: 1025px) {
+      .slider-hotpost  .embla__slide {
+        flex: 0 0 75%;
+      }
+    }
+</style>