@ozdao/martyrs 0.2.561 → 0.2.562

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

@@ -1,237 +1,161 @@
 <template>
-	 <div class="cols-2-1_3 z-index-3 pos-relative radius-big">
-
-		<div class="o-y-scroll br-r br-solid br-light pd-medium z-index-2 desktop-only h-100 pos-relative">
-			<div class="w-100 o-y-scroll h-100">
-				<!-- Categories -->
-				<div class="mn-b-medium" v-if="currentCategories.length > 0">
-					<h4 class="mn-b-small">
-						{{ route.params.categoryPath ? 'Subcategories' : 'Categories' }}
-					</h4>
-					<div class="gap-micro">
-						<div
-							v-for="category in currentCategories"
-							:key="category._id"
-							@click="selectCategory(category)"
-							class="pd-small radius-small cursor-pointer hover-bg-light transition-all"
-						>
-							{{ category.name }}
-						</div>
-					</div>
-				</div>
-
-				<!-- Location Filter -->
-				<Spoiler 
-					class="o-hidden mn-b-medium"
-					:status="true"
-				>
-					<template #header="{ isOpen }">
-						<div class="cursor-pointer w-100 flex-v-center flex-nowrap flex">
-							<h4 class="w-100">Location</h4>
-							<div class="h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra">
-								<IconChevronBottom :class="{ 'rotate-180 mn-t-micro-negative': isOpen }" fill="rgb(var(--black))" class="i-medium"/>
-							</div>
-						</div>
-					</template>
-
-					<template #content>
-						<div class="mn-t-small">
-							<Field
-								v-model="searchLocation"
-								placeholder="Search location..."
-								type="text"
-								class="w-100 bg-light pd-small radius-small mn-b-small"
-							/>
-							<Checkbox 
-								v-for="location in locationOptions"
-								:key="location"
-								v-model:radio="selectedLocation"
-								:label="location"
-								:value="location"
-								mode="radio"
-								class="mn-b-micro"
-							/>
-						</div>
-					</template>
-				</Spoiler>
-
-				<!-- Delivery Options -->
-				<Spoiler 
-					class="o-hidden mn-b-medium"
-					:status="true"
-				>
-					<template #header="{ isOpen }">
-						<div class="cursor-pointer w-100 flex-v-center flex-nowrap flex">
-							<h4 class="w-100">Delivery Options</h4>
-							<div class="h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra">
-								<IconChevronBottom :class="{ 'rotate-180 mn-t-micro-negative': isOpen }" fill="rgb(var(--black))" class="i-medium"/>
-							</div>
-						</div>
-					</template>
-
-					<template #content>
-						<div class="mn-t-small">
-							<Checkbox 
-								v-for="option in deliveryOptions"
-								:key="option.value"
-								v-model:checkbox="selectedDeliveryOptions"
-								:label="option.label"
-								:value="option.value"
-								mode="checkbox"
-								class="mn-b-micro"
-							/>
-						</div>
-					</template>
-				</Spoiler>
-
-				<!-- Payment Options -->
-				<Spoiler 
-					class="o-hidden mn-b-medium"
-					:status="true"
-				>
-					<template #header="{ isOpen }">
-						<div class="cursor-pointer w-100 flex-v-center flex-nowrap flex">
-							<h4 class="w-100">Payment Options</h4>
-							<div class="h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra">
-								<IconChevronBottom :class="{ 'rotate-180 mn-t-micro-negative': isOpen }" fill="rgb(var(--black))" class="i-medium"/>
-							</div>
-						</div>
-					</template>
-
-					<template #content>
-						<div class="mn-t-small">
-							<Checkbox 
-								v-for="option in paymentOptions"
-								:key="option.value"
-								v-model:checkbox="selectedPaymentOptions"
-								:label="option.label"
-								:value="option.value"
-								mode="checkbox"
-								class="mn-b-micro"
-							/>
-						</div>
-					</template>
-				</Spoiler>
-
-				<!-- Clear Filters Button -->
-				<button 
-					@click="clearFilters"
-					class="bg-main w-100 button mn-t-medium"
-				>
-					Clear Filters
-				</button>
-				</div>
-		</div>
-
-		<!-- Catalog wrapper -->
-		<div class="pd-thin">
-			<header class="pd-medium radius-medium bg-light mn-b-thin">
-	    	<h2 class="">
-	    		<span class="">Weed Deliveries in </span>
-
-	    		<span 
-	    			v-if="localPosition.city || localPosition.state || localPosition.country"
-	    			@click="a => { core.state.isOpenLocationPopup = true }" 
-	    			class="t-main t-semi cursor-pointer "
-	    		>
-	  				<template v-if="localPosition.city">{{localPosition.city}}, </template>
-	  				<template v-if="localPosition.state">{{localPosition.state}}, </template>
-	  				<template v-if="localPosition.country">{{localPosition.country}}</template>
-	    		</span>
-
-	    		<span v-else @click="a => { core.state.isOpenLocationPopup = true }"  class="t-main t-semi cursor-pointer">The World</span>
-	    	</h2>
-			</header>
-
-			<div class="rows-1">
-				<router-view  v-slot="{ Component, route }">
-					<component ref="page" :key="route" :localPosition="localPosition" :is="Component" />
-				</router-view>
-			</div>
-		</div>
-	</div>
+  <div class="pos-relative">
+    <header class="pd-medium mn-b-thin">
+      <h2 class="">
+        <span class="">Weed Deliveries in </span>
+
+        <span
+          v-if="localPosition.city || localPosition.state || localPosition.country"
+          @click="a => { store.core.state.isOpenLocationPopup = true }"
+          class="t-main t-semi cursor-pointer "
+        >
+          <template v-if="localPosition.city">{{localPosition.city}}, </template>
+          <template v-if="localPosition.state">{{localPosition.state}}, </template>
+          <template v-if="localPosition.country">{{localPosition.country}}</template>
+        </span>
+
+        <span v-else @click="a => { store.core.state.isOpenLocationPopup = true }"  class="t-main t-semi cursor-pointer">The World</span>
+      </h2>
+    </header>
+
+    <div class="cols-2-1_3 br-1px br-solid br-light z-index-3 pos-relative">
+
+      <div class="o-y-scroll br-r br-solid br-light pd-medium z-index-2 desktop-only h-100 pos-relative">
+        <div class="w-100 o-y-scroll h-100">
+          <!-- Location Filter -->
+          <div class="mn-b-medium">
+            <h4 class="mn-b-small">Location</h4>
+            <Field
+              v-model="searchLocation"
+              placeholder="Search location..."
+              type="text"
+              class="w-100 bg-light pd-small radius-small mn-b-small"
+            />
+            <div class="gap-micro">
+              <div
+                v-for="location in marketplace.state.locationOptions"
+                :key="location.label"
+                @click="router.push(location.path)"
+                class="cursor-pointer hover-t-underline mn-b-regular transition-all"
+              >
+                {{ location.label }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Filters Group -->
+          <FiltersGroup
+            :filters="marketplace.state.filter.options"
+            v-model:selected="selectedFilters"
+            :immediate="true"
+            :showHeader="false"
+            :showApplyButton="false"
+            :showResetButton="true"
+          />
+        </div>
+      </div>
+
+      <div class="w-100 rows-1 pd-thin pos-relative o-hidden">
+        <Feed
+          :search="true"
+          v-model:sort="marketplace.state.sort"
+          :showLoadMore="false"
+          :states="{
+            empty: {
+              title: 'No Shops Found',
+              description: 'Currently, there are no shops.'
+            }
+          }"
+          :store="{
+            read: (options) => marketplaceStore.readCatalog(options)
+          }"
+          :options="{
+            country: localPosition.country,
+            state: localPosition.state,
+            city: localPosition.city,
+            location: localLocation?.location,
+            lookup: ['products','spots'],
+            contain: ['products'],
+            priceMin: selectedFilters.price?.min,
+            priceMax: selectedFilters.price?.max,
+            delivery: selectedFilters.delivery?.length > 0 ? selectedFilters.delivery.join(',') : undefined,
+            payment: selectedFilters.payment?.length > 0 ? selectedFilters.payment.join(',') : undefined
+          }"
+          v-slot="{
+            items
+          }"
+          class="rows-1 gap-thin"
+        >
+          <div class="mn-b-thin mobile-only">
+            <Filters
+              v-model:filters="marketplace.state.filter.options"
+              v-model:selected="selectedFilters"
+              class=""
+            />
+          </div>
+
+          <CardOrganization
+            v-for="organization in items"
+            :key="organization._id"
+            :organization="organization"
+            :showRating="true"
+            :showFollowers="false"
+            :showProducts="true"
+            class="bg-light w-100 o-hidden radius-medium pd-small "
+          />
+        </Feed>
+
+      </div>
+    </div>
+  </div>
+
 </template>
 
 
 <script setup="props">
-	// Import libs
-	import { computed, onMounted, watch, ref } from 'vue'
-	import { useRoute, useRouter,onBeforeRouteLeave } from 'vue-router'
-	import { useI18n } from 'vue-i18n'
-
-	import Spoiler from "@martyrs/src/components/Spoiler/Spoiler.vue"
-	import Field from "@martyrs/src/components/Field/Field.vue"
-	import Checkbox from "@martyrs/src/components/Checkbox/Checkbox.vue"
-	import IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue'
-
-	import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
-  import * as categories from '@martyrs/src/modules/products/store/categories.js';
-	const core = useStore()
-
-
-	import * as marketplace from '../../store/marketplace';
-
-	// Accessing router and store
-	const route = useRoute()
-	const router = useRouter()
-
-	const localPosition = ref({
-		city: null,
-		state: null,
-		country: null
-	});
-
-	const desktopFilters = ref(null)
-
-	// Categories
-	const currentCategories = ref([]);
-	const searchLocation = ref('');
-	const selectedLocation = ref('All');
-	const locationOptions = ref(['All', 'Phuket', 'Bangkok', 'Chiang Mai', 'Pattaya']);
-
-	// Delivery options
-	const deliveryOptions = ref([
-		{ label: 'Pickup', value: 'pickup' },
-		{ label: 'Delivery', value: 'delivery' },
-		{ label: 'Dine-in', value: 'dinein' }
-	]);
-	const selectedDeliveryOptions = ref([]);
-
-	// Payment options
-	const paymentOptions = ref([
-		{ label: 'Cash', value: 'cash' },
-		{ label: 'Card', value: 'card' },
-		{ label: 'Crypto', value: 'crypto' },
-		{ label: 'Bank Transfer', value: 'transfer' }
-	]);
-	const selectedPaymentOptions = ref([]);
-
-	const selectCategory = (category) => {
-		// Implementation for category selection
-		console.log('Category selected:', category);
-	};
-
-	const clearFilters = () => {
-		selectedLocation.value = 'All';
-		selectedDeliveryOptions.value = [];
-		selectedPaymentOptions.value = [];
-		searchLocation.value = '';
-	};
-
-	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, '');
-	}
-
-	if (route.params) {
+  // Import libs
+  import { onMounted, watch, ref } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { useI18n } from 'vue-i18n'
+
+  import Feed from '@martyrs/src/components/Feed/Feed.vue'
+  import Filters  from '@martyrs/src/modules/core/views/components/sections/Filters.vue'
+  import FiltersGroup from '@martyrs/src/modules/core/views/components/sections/filters/FiltersGroup.vue'
+  import Field from "@martyrs/src/components/Field/Field.vue"
+
+  import CardOrganization from '@martyrs/src/modules/organizations/components/blocks/CardOrganization.vue'
+
+  import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
+  import * as organization from '@martyrs/src/modules/organizations/store/organizations.js'
+  import * as marketplace from '../../store/marketplace'
+  import marketplaceStore from '../../store/marketplace'
+  import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js'
+
+  const route = useRoute()
+  const router = useRouter()
+  const store = useStore()
+  const { returnCurrency } = useGlobalMixins()
+
+  const localPosition = ref({
+    city: null,
+    state: null,
+    country: null
+  });
+
+  const localLocation = ref(null);
+  // Location filter
+  const searchLocation = ref('');
+
+  const selectedFilters = ref({
+    price: { min: null, max: null },
+    delivery: [],
+    payment: [],
+    availabilityDate: null,
+    rating: null
+  })
+
+
+  if (route.params) {
     // Загружаем новые значения из параметров маршрута в состояние
     let newState = {
       country: denormalizeUrlParam(route.params.country),
@@ -254,33 +178,18 @@
 	if (route.query.sortParam) marketplace.state.sort.param = route.query.sortParam
 	if (route.query.sortOrder) marketplace.state.sort.order = route.query.sortOrder
 
-	onMounted(async () => {
-	  let options = {
-      status: 'published',
-      rootOnly: true
-    }
-
-    let categoriesFilter = await categories.actions.read(options);
-
-    categoriesFilter = categoriesFilter.map(category => ({
-      value: category._id,
-      label: category.name
-    }));
-
-    const index = marketplace.state.filter.options.findIndex(option => option.value === 'categories');
-
-    const categoryOption = {
-      title: 'Categories',
-      value: 'categories',
-      options: categoriesFilter
-    };
+  function denormalizeUrlParam(param) {
+    return param
+      .replace(/-/g, ' ')
+      .replace(/\b\w/g, l => l.toUpperCase());
+  }
 
-    if (index !== -1) {
-        marketplace.state.filter.options[index] = categoryOption;
-    } else {
-        marketplace.state.filter.options.unshift(categoryOption);
-    }
-	})
+  function normalizeUrlParam(param) {
+    return param
+      .toLowerCase()
+      .replace(/ /g, '-')
+      .replace(/[^a-z0-9-]/g, '');
+  }
 
 	watch(() => marketplace.state.sort, (newSortValue, oldSortValue) => {
 		let query = { ...route.query}
@@ -293,7 +202,7 @@
 	}, { deep: true });
 
 
-	watch(() => marketplace.state.filter.selected, (newFilterValue, oldFilterValue) => {
+	watch(() => marketplace.state.filter.selectedFilters, (newFilterValue, oldFilterValue) => {
 	  // Переводим фильтр в формат query
 	  const query = { ...route.query };
 
@@ -318,35 +227,43 @@
 	  router.replace({ query });
 	}, { deep: true })
 
-	// watch(() => core.state.position, (newPosition) => {
-	//   // get the current route
-	//   const currentRoute = { ...router.currentRoute.value };
-	  
-	//   // create new parameters based on globals state position
-	//   let newParams = {
-	//     country: normalizeUrlParam(newPosition.country),
-	//     state: normalizeUrlParam(newPosition.state),
-	//     city: normalizeUrlParam(newPosition.city),
-	//   };
+	watch(() => store.core.state.position, (newPosition) => {
+   // get the current route
+   const currentRoute = { ...router.currentRoute.value };
 	  
-	//   // update route params
-	//   currentRoute.params = newParams;
-	  
-	//   // replace the current route
-	//   router.replace(currentRoute);
-	// }, { deep: true });
+   // create new parameters based on globals state position
+   let newParams = {
+     country: normalizeUrlParam(newPosition.country),
+     state: normalizeUrlParam(newPosition.state),
+     city: normalizeUrlParam(newPosition.city),
+   };
+
+  let newState = {
+    country: denormalizeUrlParam(newPosition.country),
+    state: denormalizeUrlParam(newPosition.state),
+    city: denormalizeUrlParam(newPosition.city),
+  };
+  
+   // update route params
+   localPosition.value = newState;
+   currentRoute.params = newParams;
+
+  
+   // replace the current route
+   router.replace(currentRoute);
+	}, { deep: true });
 
   const text = {
     locale: 'en',
     messages: {
       en: {
-	     	meta: {
+        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.",
         }
       },
       ru: {
-	      meta: {
+        meta: {
           title: "Маркетплейс – Выбирайте из нашего ассортимента качественной травки для доставки",
           description: "Маркетплейс – Изучите наши продукты высокого качества и выбирайте из различных вариантов доставки. Закажите сейчас и получите свои любимые сорта на дом. Безопасно, быстро и надежно.",
         }
@@ -354,10 +271,12 @@
     }
   }
 
- 	const { t } = useI18n(text)
+  const { t } = useI18n(text)
 </script>
 
 <style lang="scss">
 
 
 </style>
+
+

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

@@ -11,7 +11,7 @@
       },
     }"
     :store="{
-      read: (options) => organization.actions.read(options)
+      read: (options) => marketplaceStore.readCatalog(options)
     }"
     :options="{
       country: route.params.country,
@@ -20,7 +20,7 @@
 	    categories: route.query.categories,
 	    prices: route.query.prices,
 	    delivery: route.query.delivery,
-	    location: core.state.position?.location,
+	    location: store.core.state.position?.location,
 	    lookup: ['products','spots'],
 	    contain: ['products'],
     }"
@@ -49,19 +49,20 @@
 	
 	import * as organization from '@martyrs/src/modules/organizations/store/organizations.js'
 	import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
-	const core = useStore()
+	const store = useStore()
 
 	import CardOrganization from '@martyrs/src/modules/organizations/components/blocks/CardOrganization.vue'
 
 	import * as marketplace from '../../store/marketplace';
-	
+	import marketplaceStore from '../../store/marketplace';
+
 	const route = useRoute()
 
 	onMounted(() => {
 		// Добавление Google Analytics event на открытие маркетплейса
 		if (typeof gtag === 'function') {
 			gtag('event', 'view_marketplace', {
-				location: core.state.position?.location || 'unknown',
+				location: store.core.state.position?.location || 'unknown',
 				page_path: window.location.pathname,
 				marketplace_id: route.params.id || 'main',
 			});

package/src/modules/marketplace/views/router/marketplace.router.js

@@ -1,35 +1,50 @@
 import layoutMarketplace from '../components/layouts/Marketplace.vue';
 
-const marketplace = {
-  path: 'marketplace',
-  component: layoutMarketplace,
-  name: 'Marketplace',
-  meta: {
-    title: {
-      en: 'Marketplace',
-      ru: 'Маркетплейс',
+const marketplace = [
+  {
+    path: 'marketplace',
+    name: 'Marketplace',
+    component: () => import(/* webpackChunkName: 'layoutMarketplace' */ '../components/layouts/Marketplace.vue'),
+    meta: {
+      title: {
+        en: 'Marketplace',
+        ru: 'Маркетплейс',
+      },
     },
   },
-  children: [
-    {
-      path: ':country?',
-      component: () => import(/* webpackChunkName: 'Deliveries' */ '../components/pages/Catalog.vue'),
-      children: [
-        {
-          path: ':state?',
-          name: 'State',
-          component: () => import(/* webpackChunkName: 'Deliveries' */ '../components/pages/Catalog.vue'),
-          children: [
-            {
-              path: ':city?',
-              name: 'City',
-              component: () => import(/* webpackChunkName: 'Deliveries' */ '../components/pages/Catalog.vue'),
-            },
-          ],
-        },
-      ],
+  {
+    path: 'marketplace/:country',
+    name: 'MarketplaceCountry',
+    component: () => import(/* webpackChunkName: 'layoutMarketplace' */ '../components/layouts/Marketplace.vue'),
+    meta: {
+      title: {
+        en: 'Marketplace',
+        ru: 'Маркетплейс',
+      },
     },
-  ],
-};
+  },
+  {
+    path: 'marketplace/:country/:state',
+    name: 'MarketplaceState',
+    component: () => import(/* webpackChunkName: 'layoutMarketplace' */ '../components/layouts/Marketplace.vue'),
+    meta: {
+      title: {
+        en: 'Marketplace',
+        ru: 'Маркетплейс',
+      },
+    },
+  },
+  {
+    path: 'marketplace/:country/:state/:city',
+    name: 'MarketplaceCity',
+    component: () => import(/* webpackChunkName: 'layoutMarketplace' */ '../components/layouts/Marketplace.vue'),
+    meta: {
+      title: {
+        en: 'Marketplace',
+        ru: 'Маркетплейс',
+      },
+    },
+  },
+];
 
 export default marketplace;