@ozdao/prometheus-framework 0.2.203 → 0.2.204

package/src/modules/organizations/components/pages/Organization.vue

@@ -7,8 +7,10 @@
 		<DetailsTab 	
 			:organization="organization.state.current" 
 			:user="auth.state.user"
-			class="mn-b-semi"
-		/>
+			class="mn-b-thin"
+		>
+
+		</DetailsTab>
 
 		<Tab 
 			v-model:selected="tabOrganization"
@@ -18,7 +20,7 @@
 				{ name: 'Events', value: 'events' },
 				{ name: 'Spots', value: 'spots' }	
 			]"
-			class="mn-b-small o-hidden h5 radius-big bg-light"
+			class="mn-b-thin o-hidden h5 radius-small bg-light"
 		/>
 
 		<div class="pos-relative">
@@ -205,6 +207,8 @@
 	let tab = route.query.tab ? route.query.tab : 'products';
 
 	const organizationData = ref(null)
+	const tabOrganization = ref(tab)
+	// route.query.tab = tabOrganization.value
 
 	onMounted(async () => {
 		
@@ -216,12 +220,11 @@
  		await memberships.actions.read({target: route.params._id})
 	})
 
-	const tabOrganization = ref(tab)
 
-	route.query.tab = tabOrganization.value
+
 
 	// watch(tabOrganization, (newValue) => {
-	//   router.replace({ query: null});
+	//   router.query.tab = newValue
 	// });
 </script>
 

package/src/modules/organizations/components/sections/DetailsTab.vue

@@ -1,140 +1,139 @@
 <template>
-	<transition name="slide-fade">
-		<section class="flex-center flex flex-column t-center pd-medium radius-big bg-light">
-
-			<Dropdown 
-				v-if="user._id !== organization.owner"
-				:label="{ component: IconEllipsis, class: 'i-regular t-transp' }"
-				:align="'right'"
-				class="cursor-pointer pos-absolute pos-r-regular pos-t-regular pd-thin radius-extra "
+	<section class="flex-center flex flex-column t-center pd-medium radius-big bg-light">
+
+		<Dropdown 
+			v-if="user._id !== organization.owner"
+			:label="{ component: IconEllipsis, class: 'i-regular t-transp' }"
+			:align="'right'"
+			class="cursor-pointer pos-absolute pos-r-regular pos-t-regular pd-thin radius-extra "
+		>
+			<section 
+				class="bg-black pd-thin radius-small"
 			>
-				<section 
-					class="bg-black pd-thin radius-small"
+				<FormReport 
+					:user="user._id"
+					:type="'organization'" 
+					:target="organization._id" 
+					:text="'Report'" 
+					class="w-100"
 				>
-					<FormReport 
-						:user="user._id"
-						:type="'organization'" 
-						:target="organization._id" 
-						:text="'Report'" 
-						class="w-100"
+					<button 
+						class="w-100 bg-black br-solid br-1px br-white-transp-20 t-white button-small button"
 					>
-						<button 
-							class="w-100 bg-black br-solid br-1px br-white-transp-20 t-white button-small button"
-						>
-							Report
-						</button>
-					</FormReport>
-
-					<ButtonToggleMembership
-						v-if="user._id && user._id !== organization.owner"
-			      :user="user._id"
-			      :type="'organization'" 
-		      	:role="'blocked'" 
-			      :target="organization._id" 
-			      :status="organization.isBlocked" 
-			      :text="{create: 'Block', remove: 'Unblock'}"
-			      @updateMembership="event => handleMembershipUpdate(event, 'isBlocked')"
-			       class="t-white w-100 mn-t-thin bg-red" 
-		    	/>
-				</section>
-      </Dropdown>
-
-			<IconEdit
-				v-if="user._id === organization.owner"
-				@click="$router.push({
-					name: 'Organization Edit', 
-					params: {
-						_id: organization._id
-					}
-				})" 
-				class="pos-absolute cursor-pointer pos-t-big pos-r-big i-regular t-transp"
-			/>
-
-			<img loading="lazy" 
-				v-if="organization.profile.photo" 
-				:src="(FILE_SERVER_URL || '') + organization.profile.photo" 
-				class="radius-big bg-light flex-center flex mn-b-small w-8r" 
-			/>
-
-			<PlaceholderOrganizationPic
-				v-else
-				class="radius-medium mn-b-small i-extra"
-			/>
-
-      <h1
-      	class="mn-b-thin"
-      >
-	  		{{ organization.profile.name }}
-	  	</h1>
-
-     	<div class="flex-center  pd-r-thin pd-l-thin flex-nowrap flex mn-t-thin bg-white radius-extra w-max">
-     		<IconFollowing class="i-medium mn-r-micro t-transp"/>
-
-        <p class="mn-t-thin p-medium t-medium uppercase mn-b-thin">{{organization.numberOfSubscribers}} followers</p>
-
-        <ButtonToggleMembership
-          v-if="
-		      	user._id 
-		      	&& route.params._id 
-		      	&& route.params._id !== user._id
-		      	&& organization.owner !== user._id
-		      "
-          :user="user._id"
-          :type="'organization'" 
-          :role="'subscriber'" 
-          :target="organization._id" 
-          :status="organization.isSubscriber" 
-          :text="{create: '+', remove: '-'}"
-          @updateMembership="event => handleMembershipUpdate(event, 'isSubscriber', 'numberOfSubscribers')"
-          class=" mn-l-thin p-medium t-medium radius-extra i-semi" 
-        />
-      </div>
-
-      <p class="w-max-50r mn-t-regular mn-b-medium p-big">
-     		<Text :text="organization.profile.description || ''" :showToggleText="true" :maxLen="320" />
-    	</p>  
-
-    	<Chips 
-      	v-if="organization.profile?.tags?.length > 0" 
-      	:chips="organization.profile.tags"
-      	class="p-medium"
-     	/>
-
-
-      <h4 
-      	v-if="Object.values(organization.socials).some(value => value)" 
-      	class="mn-t-small mn-b-thin"
-      >
-    		Find us in socials
-    	</h4>
-    	
-     	<Socials 
-     		:telegram="organization.socials.telegram"
-     		:facebook="organization.socials.facebook"
-     		:instagram="organization.socials.instagram"
-     		:twitter="organization.socials.twitter"
-     		:youtube="organization.socials.youtube"
-     	/>
-		</section>
-
-	<!-- <h3 class="mn-b-small">Rating</h3>
-  	<Rating 
-  		:rating="organization.rating.median" 
-  		:amount="organization.rating.amount"
-  		class="pd-medium mn-b-thin radius-big bg-light"
-  	/>
-
-  	<h3 class="mn-b-small">Contacts</h3>
-    <Contacts
-      :website="organization.contacts.website"
-      :phone="organization.contacts.phone"
-      :email="organization.contacts.email"
-      :address="organization.contacts.address"
-      class="w-100 pd-medium radius-big bg-light"
-    /> -->
-
-
-	</transition>
+						Report
+					</button>
+				</FormReport>
+
+				<ButtonToggleMembership
+					v-if="user._id && user._id !== organization.owner"
+		      :user="user._id"
+		      :type="'organization'" 
+	      	:role="'blocked'" 
+		      :target="organization._id" 
+		      :status="organization.isBlocked" 
+		      :text="{create: 'Block', remove: 'Unblock'}"
+		      @updateMembership="event => handleMembershipUpdate(event, 'isBlocked')"
+		       class="t-white w-100 mn-t-thin bg-red" 
+	    	/>
+			</section>
+    </Dropdown>
+
+		<IconEdit
+			v-if="user._id === organization.owner"
+			@click="$router.push({
+				name: 'Organization Edit', 
+				params: {
+					_id: organization._id
+				}
+			})" 
+			class="pos-absolute cursor-pointer pos-t-big pos-r-big i-regular t-transp"
+		/>
+
+		<img loading="lazy" 
+			v-if="organization.profile.photo" 
+			:src="(FILE_SERVER_URL || '') + organization.profile.photo" 
+			class="radius-big bg-light flex-center flex mn-b-small w-8r" 
+		/>
+
+		<PlaceholderOrganizationPic
+			v-else
+			class="radius-medium mn-b-small i-extra"
+		/>
+
+    <h1
+    	class="mn-b-thin"
+    >
+  		{{ organization.profile.name }}
+  	</h1>
+
+   	<div class="flex-center  pd-r-thin pd-l-thin flex-nowrap flex mn-t-thin bg-white radius-extra w-max">
+   		<IconFollowing class="i-medium mn-r-micro t-transp"/>
+
+      <p class="mn-t-thin p-medium t-medium uppercase mn-b-thin">{{organization.numberOfSubscribers}} followers</p>
+
+      <ButtonToggleMembership
+        v-if="
+	      	user._id 
+	      	&& route.params._id 
+	      	&& route.params._id !== user._id
+	      	&& organization.owner !== user._id
+	      "
+        :user="user._id"
+        :type="'organization'" 
+        :role="'subscriber'" 
+        :target="organization._id" 
+        :status="organization.isSubscriber" 
+        :text="{create: '+', remove: '-'}"
+        @updateMembership="event => handleMembershipUpdate(event, 'isSubscriber', 'numberOfSubscribers')"
+        class=" mn-l-thin p-medium t-medium radius-extra i-semi" 
+      />
+    </div>
+
+    <p class="w-max-50r mn-t-regular mn-b-medium p-big">
+   		<Text :text="organization.profile.description || ''" :showToggleText="true" :maxLen="320" />
+  	</p>  
+
+  	<Chips 
+    	v-if="organization.profile?.tags?.length > 0" 
+    	:chips="organization.profile.tags"
+    	class="p-medium"
+   	/>
+
+
+    <h4 
+    	v-if="Object.values(organization.socials).some(value => value)" 
+    	class="mn-t-small mn-b-thin"
+    >
+  		Find us in socials
+  	</h4>
+  	
+   	<Socials 
+   		:telegram="organization.socials.telegram"
+   		:facebook="organization.socials.facebook"
+   		:instagram="organization.socials.instagram"
+   		:twitter="organization.socials.twitter"
+   		:youtube="organization.socials.youtube"
+   	/>
+   	<slot></slot>
+	</section>
+
+<!-- <h3 class="mn-b-small">Rating</h3>
+	<Rating 
+		:rating="organization.rating.median" 
+		:amount="organization.rating.amount"
+		class="pd-medium mn-b-thin radius-big bg-light"
+	/>
+
+	<h3 class="mn-b-small">Contacts</h3>
+  <Contacts
+    :website="organization.contacts.website"
+    :phone="organization.contacts.phone"
+    :email="organization.contacts.email"
+    :address="organization.contacts.address"
+    class="w-100 pd-medium radius-big bg-light"
+  /> -->
+
+
 </template>
 
 <script setup>

package/src/modules/products/components/pages/Products.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pd-thin">
+  <div>
   <header 
     v-if="route.name !== 'Organization'"
     class="mn-b-medium flex-v-center flex-nowrap flex"
@@ -28,17 +28,22 @@
 
   <div class="cols-2-1_3 bg-light pd-thin radius-big gap-thin">
 
-    <FilterProducts
+    <BlockFilter
+      v-model:filter="marketplace.state.filter"
+      :options="marketplace.state.filter.options"
+      class="h-100 w-100 desktop-only"
+    />
 
-    /> 
 
-    <div>
-      <BlockSearch 
+    <div class="rows-1">
+      <!-- <BlockSearch 
         @search="updateSearch"
         placeholder="Enter product name"
         class="bg-white mn-b-thin"
-      />
+      /> -->
       <Feed
+        v-model:filter="marketplace.state.filter"
+        :search="true"
         :states="{
           empty: {
             title: 'No Products Found',
@@ -55,7 +60,7 @@
           categories: route.query.categories,
           prices: route.query.prices,
           delivery: route.query.delivery,
-          search: route.query.search,
+          // search: route.query.search,
           ...(tabProducts !== 'all' && { status: tabProducts })
           // user: user
         }"
@@ -96,12 +101,15 @@
 
   import FilterProducts from '@pf/src/modules/products/components/sections/FilterProducts.vue'
   import BlockSearch from '@pf/src/modules/globals/views/components/blocks/BlockSearch.vue'
+  import BlockFilter  from '@pf/src/modules/globals/views/components/blocks/BlockFilter.vue'
 
   import CardProduct from '@pf/src/modules/products/components/blocks/CardProduct.vue'
 
   // Accessing router and store
   import * as auth from '@pf/src/modules/auth/views/store/auth';
   import * as products from '@pf/src/modules/products/store/products';
+  import * as marketplace from '@pf/src/modules/marketplace/store/marketplace';
+  import * as categories from '@pf/src/modules/products/store/categories';
 
   const route = useRoute()
   const router = useRouter()
@@ -109,18 +117,89 @@
   // Tab logic
   const tabProducts = ref(route.query.tabProducts ? route.query.tabProducts : 'all')
 
-  route.query.tabProducts = tabProducts.value
+  if (route.name !== 'Organization') route.query.tabProducts = tabProducts.value
+  
+  if (route.query) {
+    const query = route.query;
+
+    marketplace.state.filter.selected.categories = query.categories ? query.categories.split(',') : [];
+    marketplace.state.filter.selected.prices = query.prices ? query.prices.split(',') : [];
+    marketplace.state.filter.selected.delivery = query.delivery ? query.delivery.split(',') : [];
+  }
+
 
   watch(tabProducts, (newValue) => {
-    router.replace({ query: { ...route.query, tabProducts: newValue } });
+    if (route.name !== 'Organization') router.replace({ query: { ...route.query, tabProducts: newValue } });
   });
+
+  onMounted(async () => {
+    let categoriesFilter = await categories.actions.fetchCategories();
+
+    categoriesFilter = categoriesFilter.map(category => ({
+      value: category.url,
+      label: category.name
+    }));
+
+    const index = marketplace.state.filter.options.findIndex(option => option.value === 'categories');
+
+    const categoryOption = {
+      title: 'Categories',
+      value: 'categories',
+      options: categoriesFilter
+    };
+
+    if (index !== -1) {
+        marketplace.state.filter.options[index] = categoryOption;
+    } else {
+        marketplace.state.filter.options.unshift(categoryOption);
+    }
+  })
+
+  watch(() => marketplace.state.sort, (newSortValue, oldSortValue) => {
+    let query = { ...route.query}
+    
+    query.sortParam = newSortValue.param
+    query.sortOrder = newSortValue.order
+    
+    // replace the current route
+    router.replace({ query });
+  }, { deep: true });
+
+
+  watch(() => marketplace.state.filter.selected, (newFilterValue, oldFilterValue) => {
+    // Переводим фильтр в формат query
+    const query = { ...route.query };
+
+    // Удаляем старые значения фильтра из query
+    Object.keys(oldFilterValue).forEach(key => {
+      if (query[key]) {
+        delete query[key];
+      }
+    });
+
+    // Добавляем новые значения фильтра в query
+    const newQueryValues = Object.fromEntries(
+      Object.entries(newFilterValue)
+        .filter(([key, value]) => Array.isArray(value) && value.length > 0)
+        .map(([key, value]) => [key, value.join(',')])
+    );
+
+    delete query.options;
+    Object.assign(query, newQueryValues);
+
+    // Обновляем маршрут с новым query
+    router.replace({ query });
+  }, { deep: true })
+
+
+
   
   function updateSearch(search) {
     let query = { ...route.query}
     
     query.search = search
     
-    router.push({ query });
+    router.replace({ query });
   }
 </script>
 

package/src/modules/products/components/sections/FilterProducts.vue

@@ -144,7 +144,7 @@ watch(() => marketplace.state.filter, (newFilterValue, oldFilterValue) => {
   Object.assign(query, newQueryValues);
 
   // Обновляем маршрут с новым query
-  router.push({ query });
+  router.repalce({ query });
 }, { deep: true })
 
 onMounted(async () => {

package/src/modules/products/components/sections/SectionProduct.vue

@@ -85,6 +85,7 @@
 			<!-- Actions -->
 			<div class="max-w-33rem mobile-w-100 t-white gap-small cols-2">
 				<Button
+					v-if="product.quantity > 0"
 					:submit="a => addToCart(product)" 
 					:disabled="validateToCard(product)" 
 					:text="{
@@ -95,6 +96,9 @@
 				> 
 						{{ t('addtoorder') }}
 				</Button>
+				<div v-else class="flex-center flex uppercase radius-big t-black w-max pd-small t-medium bg-grey h-3r w-100 mn-r-smallbutton">
+					Out of Stock
+				</div>
 			</div>
 		</div>
 	</div>