@ozdao/prometheus-framework 0.2.39 → 0.2.40

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">
 
-		<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>
@@ -58,8 +83,17 @@
 
 		<div class="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/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>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-100 container container-joinus">
+    <div class="pd-extra o-hidden w-100 container container-joinus">
         <div class="content">
             <span class="h0 mn-b-big">
                 {{ userCount.toLocaleString() }}
@@ -7,7 +7,7 @@
             <p class="w-m-33r t-center mn-b-small p-big">
                 Together, we're shaping the future of the globals cannabis community.
             </p>
-            <router-link :to="{name: 'Sign In'}" class="bg-black t-white button">
+            <router-link :to="{name: 'Sign In'}" class="bg-black t-medium t-white button">
                 Join Now
             </router-link>
         </div>
@@ -19,9 +19,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 66vh;
+    height: 66%;
     position: relative;
-    overflow: hidden; 
 
     .content {
         display: flex;
@@ -55,7 +54,7 @@
         opacity: 1;
     }
     100% {
-        transform: translateY(-50vh); // движение вверх на высоту экрана
+        transform: translateY(-33vh); // движение вверх на высоту экрана
         opacity: 0.0
     }
 }

package/src/modules/community/store/blogposts.js

@@ -88,6 +88,7 @@ async function read(options = {}) {
     } else {
       set(response.data, 'all')
     }
+    
     return Promise.resolve(response.data);
   } catch (err) {
     setError(err)

package/src/modules/constructor/components/elements/Embed.vue

@@ -28,12 +28,12 @@
       />
       <div class="flex-v-center flex-nowrap flex gap-small">
         
-         <p class="t-center">Embeds from youtube.com, vimeo.com, soundcloud.com are allowed</p>
-        <button 
-          @click="onComponentClick"
-          class="button-small button"
-        >
-          Save
+          <p class="t-center">Embeds from youtube.com, vimeo.com, soundcloud.com are allowed</p>
+          <button 
+            @click="onComponentClick"
+            class="button-small button"
+          >
+            Save
         </button>
       </div>
     </div>
@@ -68,6 +68,7 @@ function isValidEmbedCode(code) {
     /reddit\.com/,
     /linkedin\.com/,
     /medium\.com/,
+    /spotify\.com/,
   ];
   return allowedSources.some(pattern => pattern.test(code));
 }

package/src/modules/constructor/components/elements/Image.vue

@@ -1,12 +1,12 @@
 <template>
   <div 
     v-if="prop.content" 
-    class="o-hidden radius-big pos-relative bg-grey mn-b-small w-100"
+    class="o-hidden radius-big pos-relative bg-grey mn-b-small w-100 flex-center flex"
   >
     <img 
       :src="(FILE_SERVER_URL || '') + prop.content" 
       alt="Event image" 
-      class="pos-relative z-index-1 d-block mn-auto w-100 object-fit-contain"
+      class="pos-relative z-index-1 d-block mn-auto w-100 h-100 object-fit-contain"
       style="max-height: 40rem"
     />
 

package/src/modules/constructor/components/elements/Textarea.vue

@@ -2,7 +2,7 @@
   <div>
     <textarea 
       v-model="prop[content]" 
-      :placeholder="placeholder ? placeholder : 'Enter text'"
+      :placeholder="placeholder ? placeholder : ''"
       @input="handleInput" 
       @focus="emit('focus', textarea)"
       @keyup="handleKeyUp"

package/src/modules/constructor/components/sections/Constructor.vue

@@ -12,7 +12,6 @@ a<template>
         v-for="(block, index) in post.content"
         :key="index"
         class="pos-relative"
-       
       >
         <div 
           @mouseover="showControls = index, showMenu = false"
@@ -29,7 +28,6 @@ a<template>
             @deleteBlock="handleDeleteBlock"
             @addBlock="handleAddBlock"
             @updateBlock="handleUpdateBlock"
-  
           />
         </div>
 
@@ -87,27 +85,15 @@ a<template>
               >
                 Add Video
               </span>
-              <span 
-                @click="handleAddBlock('Youtube', '', index)"
-                class="w-max button-small t-black bg-white button"
-              >
-                Add Youtube
-              </span>
               <span 
                 @click="handleAddBlock('Link', '', index)"
                 class="w-max button-small t-black bg-white button"
               >
                 Add Link
               </span>
-
             </div>
-
-
           </div>
         </transition>
-
-
-
       </div>
     </VueDraggableNext>
   </section>
@@ -123,8 +109,6 @@ import ImageUpload  from '../elements/ImageUpload.vue';
 import Embed        from '../elements/Embed.vue';
 import Audio        from '../elements/Audio.vue';
 import Video        from '../elements/Video.vue';
-import Youtube        from '../elements/Youtube.vue';
-
 
 import { ref, watchEffect, computed } from 'vue';
 import { VueDraggableNext } from 'vue-draggable-next';
@@ -147,11 +131,11 @@ const ComponentMap = {
   'Embed': Embed,
   'Audio': Audio,
   'Video': Video,
-  'Youtube': Youtube
 };
 
 function handleAddBlock(type = 'Textarea', content = '', index, data) {
- console.log('We are adding new block (functuin HandleAddBlock):' + type + content + index + data )
+  console.log('We are adding new block (functuin HandleAddBlock):' + type + content + index + data )
+  
   let blockNew = {
     order: post.value.content.length + 1,
     type: type,