@ozdao/prometheus-framework 0.2.30 → 0.2.31

package/src/modules/marketplace/components/layouts/Marketplace.vue

@@ -1,101 +1,43 @@
 <template>
-	<div class="min-h-100vh pd-thin">
-
-		<div class=" br-solid br-1px br-grey bg-grey radius-big">
-
-			<header class=" pd-medium mn-r-auto flex-v-center t-left flex-nowrap flex">
-	    	<h2 class="t-left">
-	    		<span class="">Weed in </span>
-
-	    		<span @click="a => { store.globals.state.isLocationPopupOpen = true }" v-if="localPosition.city || localPosition.state || localPosition.country" class="t-semi t-main">
-	  				<span v-if="localPosition.city">{{localPosition.city}}, </span>
-	  				<span v-if="localPosition.state">{{localPosition.state}}, </span>
-	  				<span v-if="localPosition.country">{{localPosition.country}}</span>
-	    		</span>
-
-	    		<span v-else @click="a => { store.globals.state.isLocationPopupOpen = true }"  class="t-semi t-main">
-							The World
-	    		</span>
-	    	</h2>
-			</header>
-
-			<div class="z-index-1 radius-bl-big radius-br-big bg-black t-white pd-medium flex-v-center flex-nowrap flex">
-					<!-- <p class="t-semi radius-extra uppercase p-medium mn-r-thin">Filter by</p> -->
-					<Dropdown 
-						:label="t('categoriesTitle')" 
-						class="cursor-pointer br-solid br-2px br-white mn-r-small pd-thin t-semi radius-extra uppercase p-medium"
-						:class="[
-              store.marketplace.state.filter.categories.length > 0 ? 'bg-white t-black' : ''
-            ]"
-					>
-          	<Checkbox 
-							v-for="(category, index) in categories"
-		          :label="category.name"
-		          name="categories"
-		          :value="category.url"
-		          class="cursor-pointer  w-100 mn-t-small mn-b-small bg-black t-white radius-small pd-small"
-		          :radio="store.marketplace.state.filter.categories"
-		        />
-		       </Dropdown>
-
-		       <Dropdown 
-		       	:label="t('filters.price.title')" 
-		       	class="cursor-pointer  mn-r-small br-solid br-2px br-white pd-thin t-semi radius-extra uppercase p-medium"
-		       	:class="[
-              store.marketplace.state.filter.prices.length > 0 ? 'bg-white t-black' : ''
-            ]"
-		       >
-          	<Checkbox 
-							v-for="(price, index) in prices"
-		          :label="price.label"
-		          name="prices"
-		          :value="price.value"
-		          class="cursor-pointer  w-100 mn-t-small bg-black t-white radius-small pd-small"
-		          :radio="store.marketplace.state.filter.prices"
-		        />
-		       </Dropdown>
-
-		       <Dropdown 
-		       	label="Delivery" 
-		       	class="cursor-pointer mn-r-auto br-solid br-2px br-white pd-thin t-semi radius-extra uppercase p-medium"
-		       	:class="[
-              store.marketplace.state.filter.delivery.length > 0 ? 'bg-white t-black' : ''
-            ]"
-		       >
-          	<Checkbox 
-							v-for="(delivery, index) in delivery"
-		          :label="delivery.label"
-		          name="prices"
-		          :value="delivery.value"
-		          class="cursor-pointer  w-100 mn-t-small bg-black t-white radius-small pd-small"
-		          :radio="store.marketplace.state.filter.delivery"
-		        />
-		       </Dropdown>
-					<!-- Reset filter -->
-					<p class="t-semi radius-extra uppercase p-medium mn-r-thin">Sort by</p>
-					<Select 
-		        :options="['popularity','rating','products']"
-		        v-model:select="store.marketplace.state.sort.current" 
-		        placeholder="Select type"
-		        class="
-		          bg-white
-		          cursor-pointer
-		          pd-thin t-semi radius-extra uppercase p-medium
-		         	w-8r
-		         	t-center
-		          t-black
-		        "
-		      />
-
-				</div>	
-		
+	<div style="min-height: 100%;" class="h-min-100 pd-thin">
+		<header class="mn-b-thin radius-big bg-grey pd-medium flex-v-center t-left flex-nowrap flex">
+    	<h2 class="t-left">
+    		<span class="">Weed in </span>
+
+    		<span @click="a => { store.globals.state.isOpenLocationPopup = true }" v-if="localPosition.city || localPosition.state || localPosition.country" class="t-semi t-main">
+  				<span v-if="localPosition.city">{{localPosition.city}}, </span>
+  				<span v-if="localPosition.state">{{localPosition.state}}, </span>
+  				<span v-if="localPosition.country">{{localPosition.country}}</span>
+    		</span>
+
+    		<span v-else @click="a => { store.globals.state.isOpenLocationPopup = true }"  class="t-semi t-main">
+						The World
+    		</span>
+    	</h2>
+		</header>
+
+		<Filters
+			class="mn-b-thin"
+		/>
+
+		<div class="flex-v-center flex-nowrap flex pd-small bg-grey w-100 radius-big">
+			<IconSearch 
+				class="i-medium mn-r-thin" 
+			/>
+			<Field
+				placeholder="Enter shop or product name"
+				@update:field="search => store.globals.state.search = search"
+				class="w-100"
+			/>
+			<button class="pd-thin uppercase p-small t-medium cursor-pointer radius-extra bg-main" @click="updateSearchQuery">Search</button>
 		</div>
+		
 		<!-- Catalog wrapper -->
 		<div class="cols-1 gap-thin pd-thin">
 			<!-- Products section -->
 			<router-view  v-slot="{ Component, route }">
-				<transition   name="scaleIn" mode="out-in">
-					<component ref="page" :key="route.path" :localPosition="localPosition" :is="Component" />
+				<transition  name="scaleIn" mode="out-in">
+					<component ref="page" :key="route" :localPosition="localPosition" :is="Component" />
 				</transition>
 			</router-view>
 		</div>
@@ -105,45 +47,20 @@
 
 <script setup="props">
 	// Import libs
-	import { computed, onMounted, watch, watchEffect, ref } from 'vue'
+	import { computed, onMounted, watch, ref } from 'vue'
 	import { useStore } from '@/store'
 	import { useRoute, useRouter,onBeforeRouteLeave } from 'vue-router'
-	import { useI18n }    from 'vue-i18n'
+	import { useI18n } from 'vue-i18n'
   import { useMeta } from 'vue-meta'
-  // Prometheus
-	import Spoiler from "@pf/src/components/Spoiler/Spoiler.vue";
- 	import Checkbox from "@pf/src/components/Checkbox/Checkbox.vue";
- 	import Field from "@pf/src/components/Field/Field.vue";
- 	import Select from "@pf/src/components/Select/Select.vue";
- 	import Dropdown from "@pf/src/components/Dropdown/Dropdown.vue";
- 	// Partials
-	import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'
 	// Import components
-	import CardProduct from '@pf/src/modules/products/components/blocks/CardProduct.vue'
+	import Filters from '@pf/src/modules/marketplace/components/sections/Filters.vue'
+	import IconSearch from '@pf/src/modules/icons/navigation/IconSearch.vue'
+	import Field from '@pf/src/components/Field/Field.vue'
 
 	// Accessing router and store
 	const store = useStore()
 	const route = useRoute()
 	const router = useRouter()
-	
-	// Data fetching
-
-
-	// Accessing state
-	const categories = computed(() => store.categories.state.all)
-
-	const delivery = [
-    { label: 'Pickup',					value: 'pickup' },
-    { label: 'Courier',					value: 'courier' },
-    { label: 'Post',						value: 'post' }
-	]
-
-	const prices = [
-    { label: 'Under $5',				value: '<5' },
-    { label: '$5 to $10',				value: '5-10' },
-    { label: '$10 to $20',			value: '10-20' },
-    { label: '$20 and above',		value: '>20' }
-	]
 
 	const localPosition = ref({
 		city: null,
@@ -151,13 +68,28 @@
 		country: null
 	});
 
-
 	function denormalizeUrlParam(param) {
 	  return param
 	    .replace(/-/g, ' ') // Замена дефисов на пробелы
 	    .replace(/\b\w/g, l => l.toUpperCase()); // Преобразование первой буквы каждого слова в заглавную
 	}
 
+	function normalizeUrlParam(param) {
+	  return param
+	    .toLowerCase()
+	    .replace(/ /g, '-')
+	    .replace(/[^a-z0-9-]/g, '');
+	}
+
+
+	function updateSearchQuery() {
+		let query = { ...route.query}
+		
+		query.search = store.globals.state.search
+	  
+	  router.push({ query });
+	}
+
 	onMounted(async () => {
 	  if (route.params) {
 	    // Загружаем новые значения из параметров маршрута в состояние
@@ -172,19 +104,33 @@
 		}
 
 		if (route.query) {
-		 const query = route.query;
+		 	const query = route.query;
+
 		  const newFilterValue = {
 		    categories: query.categories ? query.categories.split(',') : [],
 		    prices: query.prices ? query.prices.split(',') : [],
 		    delivery: query.delivery ? query.delivery.split(',') : [],
-		    // Продолжайте этот паттерн для остальных полей фильтра
 		  };
-		  store.marketplace.state.filter = newFilterValue;
+
+			store.marketplace.state.filter = newFilterValue;
 		}
-		
-		await store.categories.actions.fetchCategories()
+
+
+		if (route.query.sortParam) store.marketplace.state.sort.param = route.query.sortParam
+		if (route.query.sortOrder) store.marketplace.state.sort.order = route.query.sortOrder
 	})
 
+	watch(() => store.marketplace.state.sort, (newSortValue, oldSortValue) => {
+		let query = { ...route.query}
+		
+		query.sortParam = newSortValue.param
+		query.sortOrder = newSortValue.order
+	  
+	  // replace the current route
+	  router.push({ query });
+	}, { deep: true });
+
+
 	watch(() => store.marketplace.state.filter, (newFilterValue, oldFilterValue) => {
 	  // Переводим фильтр в формат query
 	  const query = { ...route.query };
@@ -208,14 +154,6 @@
 	  router.push({ query });
 	}, { deep: true })
 
-	
-	function normalizeUrlParam(param) {
-	  return param
-	    .toLowerCase() // Преобразование всех символов в нижний регистр
-	    .replace(/ /g, '-') // Замена всех пробелов на дефисы
-	    .replace(/[^a-z0-9-]/g, ''); // Удаление всех символов, которые не являются буквами, цифрами или дефисами
-	}
-
 	watch(() => store.globals.state.position, (newPosition) => {
 	  // get the current route
 	  const currentRoute = { ...router.currentRoute.value };
@@ -241,65 +179,17 @@
 	     	meta: {
           title: "Marketplace – Shop Our Wide Selection of Quality Weed for Delivery",
           description: "Browse our marketplace of top-grade weed strains and choose from a variety of delivery options. Order now and have your favorite strains delivered straight to your door. Safe, fast, and reliable.",
-        },
-      	breadcrumbs: {
-      		home: 'Home',
-      		store: 'Marketplace',
-      	},
-      	categoriesTitle: 'Category',
-      	categories: [],
-      	sort: {
-      		price: 'By price',
-      		newest: 'By newest',
-      		popularity: 'By popularity'
-      	},
-      	filters: {
-      		title: 'Filters',
-      		price: {
-      			title: 'Price',
-      			from: 'From',
-      			to: 'To'
-      		},
-      		filters: [],
-      		reset: 'Reset Filters'
-      	}
+        }
       },
       ru: {
 	      meta: {
           title: "Маркетплейс – Выбирайте из нашего ассортимента качественной травки для доставки",
           description: "Маркетплейс – Изучите наши продукты высокого качества и выбирайте из различных вариантов доставки. Закажите сейчас и получите свои любимые сорта на дом. Безопасно, быстро и надежно.",
-        },
-      	breadcrumbs: {
-      		home: 'Главная',
-      		store: 'Маркетплейс',
-      	},
-      	categoriesTitle: 'Категория',
-      	categories: [],
-      	sort: {
-      		price: 'По цене',
-      		newest: 'По новизне',
-      		popularity: 'По популярности'
-      	},
-      	filters: {
-      		title: 'Фильтры',
-      		price: {
-      			title: 'Цена',
-      			from: 'От',
-      			to: 'До'
-      		},
-      		filters: [],
-      		reset: 'Сбросить фильтры',
-      	}
+        }
       }
     }
   }
 
- 	store.categories.state.all.forEach( category => {
-  	category.localization.forEach( localization => {
-    	text.messages[localization.locale].categories.push(localization.text)
-  	})
-	})
-
  	const { t } = useI18n(text)
 
   const computedMeta = computed(() => ({
@@ -308,8 +198,6 @@
   }))
 
   const { meta, onRemoved } = useMeta(computedMeta)
-
-
 </script>
 
 <style lang="scss">

package/src/modules/marketplace/components/pages/Catalog.vue

@@ -1,29 +1,36 @@
 <template>
 	<div class="for-transition radius-big w-100">
-	
-		<div class="flex-column">
-			<transition name="fade">
-				<Loader v-if="isLoading" class="z-index-5 pos-t-50 left-t-50 pos-absolute"/>
-			</transition>
-
-			<transition name="fade">
-				<EmptyState 
-					v-if="!isLoading && organization.state.all.length < 1"
-					title="No Organizations Found"
-					description="It looks like there are no organizations available at the moment."
-					class="radius-big pd-medium bg-grey"
-				/>
-	      <div v-else class="w-100">
-	      	<CardOrganization 
-			      v-for="organization in organization.state.all" 
-			      :key="organization._id"
-			      :organization="organization"
-			    />
-				</div>
-			</transition>
-
-			<button v-if="hasMorePosts" @click="loadMorePosts" class="mn-t-thin bg-main t-black w-100 button">Load more</button>
-		</div>
+
+		<transition name="fade">
+			<Loader v-if="isLoading" class="z-index-5 pos-t-50 left-t-50 pos-absolute"/>
+		</transition>
+
+		<transition name="fade">
+			<EmptyState 
+				v-if="!isLoading && organization.state.all.length < 1"
+				title="No Organizations Found"
+				description="It looks like there are no organizations available at the moment."
+				class="radius-big pd-medium bg-grey"
+			/>
+      <div v-else class="w-100 cols-1 gap-thin">
+      	<CardOrganization 
+		      v-for="organization in organization.state.all" 
+		      :key="organization._id"
+		      :organization="organization"
+		      :showRating="true"
+		      :showFollowers="false"
+		      class="bg-grey w-100 o-hidden radius-big pd-small "
+		    />
+			</div>
+		</transition>
+
+		<button 
+			v-if="hasMorePosts" 
+			@click="loadMorePosts" 
+			class="mn-t-thin bg-main t-black w-100 button"
+		>
+			Load more
+		</button>
 
 	</div>
 </template>
@@ -31,6 +38,7 @@
 <script setup>
 	import { computed,reactive,ref, onMounted,watch  } from 'vue'
 	import { useRoute, useRouter } from 'vue-router'
+	import { useStore } from '@/store'
 	// Import dependencies
 	import Cookies from 'js-cookie'
 	// Import components
@@ -56,6 +64,7 @@
 	});
 
 	// Init router
+	const store = useStore()
 	const router 	= useRouter()
 	const route 	= useRoute()
 
@@ -65,84 +74,65 @@
 	const hasMorePosts = ref(false);
   let isLoading = ref(true);
 
+  const params = {
+    country: route.params.country,
+    state: route.params.state,
+    city: route.params.city,
+    categories: route.query.categories,
+    prices: route.query.prices,
+    delivery: route.query.delivery,
+    skip: skip.value, 
+    limit: limit.value,
+    sortParam: route.query.sortParam || store.marketplace.state.sort.param,
+    sortOrder: route.query.sortOrder || store.marketplace.state.sort.order,
+    location: store.globals.state.position?.location,
+    search: route.query.search,
+    contain: route.query.contain?.split(','),
+  };
+
 	const loadMorePosts = async () => {
-    if (hasMorePosts.value) {
-      skip.value += limit.value;
-
-      const params = {
-		    country: route.params.country,
-		    state: route.params.state,
-		    city: route.params.city,
-		    categories: route.query.categories,
-		    prices: route.query.prices,
-		    delivery: route.query.delivery,
-		    skip: skip.value, 
-		    limit: limit.value,
-		  };
-
-		  const data = await organization.actions.read(params);
-
-      if (data.length === 0) {
-        hasMorePosts.value = false;
-      } else {
-      	hasMorePosts.value = true;
-      }
-
-      console.log(data)
-
-      organization.state.all = [...organization.state.all, ...data];
+    skip.value += limit.value;
+
+    params.skip = skip.value
+
+	  const data = await organization.actions.read(params);
+
+    if (data.length < limit.value) {
+      hasMorePosts.value = false;
+    } else {
+    	hasMorePosts.value = true;
     }
+
+    organization.state.all = [...organization.state.all, ...data];
   };
 
-	// В onMounted функции
 	onMounted(async () => {
-	  const params = {
-	     country: route.params.country,
-	    state: route.params.state,
-	    city: route.params.city,
-	    categories: route.query.categories,
-	    prices: route.query.prices,
-	    delivery: route.query.delivery,
-	    skip: skip.value, 
-	    limit: limit.value
-	  };
-
 		organization.state.all = [];
 
 	 	const data = await organization.actions.read(params);
 
-    if (data.length === 0) {
+    if (data.length < limit.value) {
       hasMorePosts.value = false;
     } else {
     	hasMorePosts.value = true;
     }
 
-    console.log(data)
-
     organization.state.all = [...organization.state.all, ...data];
 
     isLoading.value = false;
 	});
 
-	// Или в watch функции, если вы хотите обновлять данные при изменении параметров
 	watch(() => route.params, async (newParams, oldParams) => {
 	  if (newParams !== oldParams) {
-	    const params = {
-	      country: newParams.country,
-	      state: newParams.state,
-	      city: newParams.city,
-	      categories: route.query.categories,
-	      prices: route.query.prices,
-	      delivery: route.query.delivery,
-	    };
+
+			params.skip = skip.value
 
 	    const data = await organization.actions.read(params);
 
-	    if (data.length === 0) {
+	     if (data.length < limit.value) {
 	      hasMorePosts.value = false;
 	    }
 
-	    console.log(data)
 
 	    organization.state.all = data;
 	  }
@@ -151,48 +141,4 @@
 </script>
 
 <style lang="scss">
-	.slide-fade-enter-active {
-		// min-height: 100vh;
-	  transition: all  0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	}
-
-	.slide-fade-leave-active {
-		// min-height: 100vh;
-	  transition: all  0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	}
-
-	.slide-fade-enter-from,
-	.slide-fade-leave-to {
-		min-height: 0;
-		position: absolute;
-	  transform: translateX(20px);
-	  opacity: 0;
-	  left: 0;
-	  top: 0;
-	}
-
-.container {
-  display: inline-grid;
-  grid-template-columns: auto auto;
-  position: relative;
-}
-
-.intrinsic-1x1 {
-  align-self: stretch;
-  opacity: 0;
-}
-
-.overlay {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  aspect-ratio: 1/1;
-}
-
-.overlay img {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
 </style>