@ozdao/prometheus-framework 0.1.35 → 0.1.37

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

@@ -1,285 +1,64 @@
 <template>
-  <div class="">
-    <div class="pd-b-zero pd-thin">
-      <Breadcrumbs class="pd-medium bg-grey radius-big"/>
-    </div>
+  <div class="cols-2-1_3 gap-thin pd-thin">
+    <FilterProducts
 
-    <!-- Catalog wrapper -->
-    <div class="cols-2-1_3 gap-thin pd-thin">
+    /> 
 
-        <!-- Filters wrapper -->
-        <div class="pd-medium bg-grey radius-big">
-          <h3 class="mn-small">Filters</h3>
-          
-          <hr class="mn-small">
-          
-          <Spoiler 
-            class="
-              radius-small 
-              o-hidden
-              br-1px br-solid br-grey 
-              mn-small
-            "
-            :status="true"
-            >
-            <template #header class="flex-nowrap flex">
-              <p class="mn-r-auto t-medium p-big">{{t('categoriesTitle')}}</p>
-              <svg class="i-medium" width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4697 0.469727L13.5304 1.53039L7.00006 8.06072L0.469727 1.53039L1.53039 0.469727L7.00006 5.9394L12.4697 0.469727Z" fill="#8A8A8A"/>
-              </svg>
-
-            </template>
-            <template #content>
-              <Checkbox 
-                v-for="(category, index) in categories.state.all"
-                :label="category.name"
-                name="categories"
-                :value="category.url"
-                class="w-100 mn-t-small mn-small bg-white radius-small pd-small"
-                :radio="marketplace.state.filter.categories"
-              />
-               <!-- t('categories[' + index + ']') -->
-            </template>
-          </Spoiler>
-
-          <hr class="mn-small">
-
-          <Spoiler 
-            class="
-              radius-small 
-              o-hidden
-              br-1px br-solid br-grey 
-              mn-small
-            "
-            :status="false"
-            >
-            <template #header class="flex-nowrap flex">
-              <p class="mn-r-auto t-medium p-big">{{t('filters.price.title')}}</p>
-              <svg class="i-medium" width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4697 0.469727L13.5304 1.53039L7.00006 8.06072L0.469727 1.53039L1.53039 0.469727L7.00006 5.9394L12.4697 0.469727Z" fill="#8A8A8A"/>
-              </svg>
-            </template>
-            <template #content>
-              <Checkbox 
-                v-for="(price, index) in prices"
-                :label="price.label"
-                name="prices"
-                :value="price.value"
-                class="w-100 mn-t-small bg-white radius-small pd-small"
-                :radio="store.marketplace.state.filter.prices"
-              />
-               <!-- t('categories[' + index + ']') -->
-            </template>
-          </Spoiler>
-
-          <hr class="mn-small">
-
-          <Spoiler 
-            class="
-              radius-small 
-              o-hidden
-              br-1px br-solid br-grey 
-              mn-small
-            "
-            :status="false"
-            >
-            <template #header class="flex-nowrap flex">
-              <p class="mn-r-auto t-medium p-big">Delivery</p>
-              <svg class="i-medium" width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4697 0.469727L13.5304 1.53039L7.00006 8.06072L0.469727 1.53039L1.53039 0.469727L7.00006 5.9394L12.4697 0.469727Z" fill="#8A8A8A"/>
-              </svg>
-            </template>
-            <template #content>
-              <Checkbox 
-                v-for="(delivery, index) in delivery"
-                :label="delivery.label"
-                name="prices"
-                :value="delivery.value"
-                class="w-100 mn-t-small bg-white radius-small pd-small"
-                :radio="store.marketplace.state.filter.delivery"
-              />
-               <!-- t('categories[' + index + ']') -->
-            </template>
-          </Spoiler>
-          <hr class="mn-semi">
-          <!-- Reset filter -->
-          <button @click="resetFilterButton()" class="bg-main w-100 button">{{t('filters.reset')}}</button>
-
-        </div>  
-          
-        <!-- Products wrapper  -->
-        <div class="products-wrapper">
-
-
-          <!-- Sorting section -->
-          <div class="pd-medium mn-thin bg-grey radius-big">
-            <div class="flex-nowrap flex flex-v-center">
-              <header class="mn-r-auto flex-v-center t-left flex-nowrap flex">
-                <h2 class="t-left">
-                  <span class="">Weed in </span>
-                  <span class="t-semi t-main">Phuket, TH</span>
-                </h2>
-              </header>
-
-              <button class="bg-main button">See on map</button>
-            </div>
-          </div>
-
-          <div class="pd-medium mn-thin bg-grey radius-big">
-            <div class="flex-nowrap flex flex-v-center">
-              <p class="mn-r-auto p-big t-semi t-transp">2,982 results</p>
-
-              <button 
-                @click="setSort('price')" 
-                class="button-active button-sort button">
-                {{t('sort.price')}}
-              </button>
-              <button 
-                @click="setSort('createdAt')" 
-                class="button-sort button">
-                {{t('sort.newest')}}
-              </button>
-              <button 
-                @click="setSort('popularity')" 
-                class="button-sort button">
-                  {{t('sort.popularity')}}
-              </button>
-            </div>
-            
-          </div>
-
-          <!-- Products section -->
-          <div class="w-100 cols-3 gap-thin">
-            <ProductCard  v-for="product in products.state.all"  :product="product" :key="product._id"  @click="$router.push({name: 'Product Organization', params: { _id: organization._id, product: product._id } })" class="w-100"></ProductCard>
-          </div>
-        </div>
+    <Feed
+      :states="{
+        empty: {
+          title: 'No Products Found',
+          description: 'Currently, there are no products available.'
+        }
+      }"
+      :store="{
+        read: (options) => products.actions.read(options),
+        state: products.state
+      }"
+      :options="{
+        limit: 15,
+        organization: route.params._id,
+        // user: user
+      }"
+      v-slot="{ 
+        items 
+      }"
+    >
+      <CardProduct
+        v-for="product in items"
+        :key="product._id"
+        :product="product"
+        @click="$router.push({
+          name: 'Product Organization', 
+          params: { 
+            _id: route.params._id, 
+            product: product._id 
+          } 
+        })" 
+      />
+    </Feed>
 
-    </div>
-    <!-- <Footer/> -->
   </div>
 </template>
 
 
 <script setup="props">
   // Import libs
-  import { computed, onMounted, onServerPrefetch } from 'vue'
-  import { useRoute, useRouter,onBeforeRouteLeave } from 'vue-router'
-  import { useI18n }    from 'vue-i18n'
-  import { useMeta } from 'vue-meta'
-
-  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 { computed, onMounted } from 'vue'
 
-  import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'
-  import Footer from '@pf/src/components/Footer/Footer.vue'
+  import { useRoute, useRouter } from 'vue-router'
 
   // Import components
-  import ProductCard from '@pf/src/modules/products/components/blocks/ProductCard.vue'
+  import FilterProducts from '@pf/src/modules/products/components/sections/FilterProducts.vue'
+
+  import Feed from '@pf/src/modules/globals/components/sections/Feed.vue'
+  import CardProduct from '@pf/src/modules/products/components/blocks/CardProduct.vue'
 
   // Accessing router and store
   import * as products from '@pf/src/modules/products/store/products';
-  import * as categories from '@pf/src/modules/products/store/categories';
 
   const route = useRoute()
   const router = useRouter()
-
-  // Data fetching
-  await products.actions.read({ organization: route.params._id });
-  await categories.actions.fetchCategories()
-
-  // Accessing state
-  const category = computed(() => categories.state.current)
-
-  const delivery = [
-    { label: 'Pickup',          value: { min: 0, max: 25 } },
-    { label: 'Courier',         value: { min: 25, max: 50 } },
-    { label: 'Post',            value: { min: 50, max: 100  } }
-  ]
-
-  const prices = [
-    { label: 'Under $5',        value: { min: 0, max: 25 } },
-    { label: '$5 to $10',       value: { min: 25, max: 50 } },
-    { label: '$10 to $20',      value: { min: 50, max: 100  } },
-    { label: '$20 and above',   value: { min: 200, max: Infinity} }
-  ]
-
-  const text = {
-    locale: 'en',
-    messages: {
-      en: {
-        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: 'Сбросить фильтры',
-        }
-      }
-    }
-  }
-
-  categories.state.all.forEach( category => {
-    category.localization.forEach( localization => {
-      text.messages[localization.locale].categories.push(localization.text)
-    })
-  })
-
-  const { t } = useI18n(text)
-
-  const computedMeta = computed(() => ({
-    title: t('meta.title'),
-    description: t('meta.description')
-  }))
-
-  const { meta, onRemoved } = useMeta(computedMeta)
-
-
 </script>
 
 <style lang="scss">

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

@@ -0,0 +1,92 @@
+<template>
+  <header class="mn-medium flex-v-center flex-nowrap flex">
+    <h2 class="mn-r-medium">Products</h2>
+    <button 
+      @click="$router.push({
+        name: 'AddProduct'
+      })" 
+      class="radius-100p i-big hover-scale-1 cursor-pointer t-white bg-second">
+        +
+    </button>
+  </header>
+
+  <Tab 
+    v-model:selected="tab"
+    :tabs="[
+      { name: 'All',          value: 'all' },
+      { name: 'Published',    value: 'published' },
+      { name: 'Unpublished',  value: 'unpublished' }, 
+      { name: 'Archivied',    value: 'archivied' } 
+    ]"
+    class="mn-small o-hidden h5 radius-big bg-grey"
+  />
+  
+  <Feed
+    :states="{
+      empty: {
+        title: 'No Products Found',
+        description: 'Currently, there are no products available.'
+      }
+    }"
+    :store="{
+      read: (options) => products.actions.read(options),
+      state: products.state
+    }"
+    :options="{
+      limit: 15,
+      organization: route.params._id,
+      status: tab
+      // user: user
+    }"
+    v-slot="{ 
+      items 
+    }"
+  >
+    <CardProduct
+      v-for="product in items"
+      :key="product._id"
+      :product="product"
+      @click="$router.push({
+        name: 'Product Organization', 
+        params: { 
+          _id: 
+          route.params._id, 
+          product: product._id 
+        } 
+      })" 
+    />
+  </Feed>
+</template>
+
+
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import * as products from '@pf/src/modules/products/store/products' // Путь к вашему стору
+
+// Import components
+import Feed from '@pf/src/modules/globals/components/sections/Feed.vue'
+import CardProduct from '@pf/src/modules/products/components/blocks/CardProduct.vue'
+import Tab      from '@pf/src/components/Tab/Tab.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+// Tab logic
+const tab = ref(route.query.tab ? route.query.tab : 'posts')
+
+route.query.tab = tab.value
+
+watch(tab, (newValue) => {
+  router.replace({ query: { ...route.query, tab: newValue } });
+});
+
+onMounted(async () => {
+  await products.actions.fetchProducts()
+})
+</script>
+
+<style lang="scss">
+  
+</style>

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

@@ -0,0 +1,180 @@
+  <template>
+    <div class="pd-medium bg-grey radius-big">
+      <h3 class="mn-small">{{ t('filters.title') }}</h3>
+      <hr class="mn-small">
+
+      <!-- Categories Filter -->
+      <Spoiler 
+        class="radius-small o-hidden br-1px br-solid br-grey mn-small"
+        :status="true"
+      >
+        <template #header>
+          <p class="mn-r-auto t-medium p-big">{{ t('categoriesTitle') }}</p>
+          <!-- SVG Icon -->
+        </template>
+        <template #content>
+          <Checkbox 
+            v-for="(category, index) in  categories.state.all"
+            :key="index"
+            :label="category.name"
+            :value="category.url"
+            class="w-100 mn-t-small mn-small bg-white radius-small pd-small"
+            :radio="selectedFilters.categories"
+            @change="emitFilterChange('categories', category.url)"
+          />
+        </template>
+      </Spoiler>
+
+      <hr class="mn-small">
+
+      <!-- Prices Filter -->
+      <Spoiler 
+        class="radius-small o-hidden br-1px br-solid br-grey mn-small"
+        :status="false"
+      >
+        <template #header>
+          <p class="mn-r-auto t-medium p-big">{{ t('filters.price.title') }}</p>
+          <!-- SVG Icon -->
+        </template>
+        <template #content>
+          <Checkbox 
+            v-for="(price, index) in prices"
+            :key="index"
+            :label="price.label"
+            :value="price.value"
+            class="w-100 mn-t-small bg-white radius-small pd-small"
+            :radio="selectedFilters.prices"
+            @change="emitFilterChange('prices', price.value)"
+          />
+        </template>
+      </Spoiler>
+
+      <hr class="mn-small">
+
+      <!-- Delivery Filter -->
+      <Spoiler 
+        class="radius-small o-hidden br-1px br-solid br-grey mn-small"
+        :status="false"
+      >
+        <template #header>
+          <p class="mn-r-auto t-medium p-big">Delivery</p>
+          <!-- SVG Icon -->
+        </template>
+        <template #content>
+          <Checkbox 
+            v-for="(deliveryOption, index) in deliveryOptions"
+            :key="index"
+            :label="deliveryOption.label"
+            :value="deliveryOption.value"
+            class="w-100 mn-t-small bg-white radius-small pd-small"
+            :radio="selectedFilters.delivery"
+            @change="emitFilterChange('delivery', deliveryOption.value)"
+          />
+        </template>
+      </Spoiler>
+
+      <hr class="mn-semi">
+
+      <!-- Reset filter -->
+      <button @click="resetFilters" class="bg-main w-100 button">{{ t('filters.reset') }}</button>
+    </div>
+  </template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import Spoiler from "@pf/src/components/Spoiler/Spoiler.vue"
+import Checkbox from "@pf/src/components/Checkbox/Checkbox.vue"
+import { useI18n } from 'vue-i18n'
+
+import * as categories from '@pf/src/modules/products/store/categories';
+
+await categories.actions.fetchCategories()
+
+let selectedFilters = ref({
+  categories: [],
+  prices: [],
+  delivery: [],
+  extra: []
+})
+
+// Пропсы и данные, которые вы передаёте в компонент
+const props = defineProps({
+  selectedFilters: Object,
+  prices: {
+    type: Array,
+    default: () => [
+      { label: 'Under $5', value: { min: 0, max: 5 } },
+      { label: '$5 to $10', value: { min: 5, max: 10 } },
+      { label: '$10 to $20', value: { min: 10, max: 20 } },
+      { label: '$20 and above', value: { min: 20, max: Infinity } }
+    ]
+  },
+  deliveryOptions: {
+    type: Array,
+    default: () => [
+      { label: 'Pickup', value: { min: 0, max: 25 } },
+      { label: 'Courier', value: { min: 25, max: 50 } },
+      { label: 'Post', value: { min: 50, max: 100 } }
+    ]
+  }
+})
+
+const emit = defineEmits(['updateFilters', 'resetFilters'])
+
+const emitFilterChange = (filterType, value) => {
+  emit('updateFilters', { filterType, value })
+}
+
+const resetFilters = () => {
+  emit('resetFilters')
+}
+const text = {
+    locale: 'en',
+    messages: {
+      en: {
+        categoriesTitle: 'Category',
+        categories: [],
+        filters: {
+          title: 'Filters',
+          price: {
+            title: 'Price',
+            from: 'From',
+            to: 'To'
+          },
+          filters: [],
+          reset: 'Reset Filters'
+        }
+      },
+      ru: {
+        categoriesTitle: 'Категория',
+        categories: [],
+        filters: {
+          title: 'Фильтры',
+          price: {
+            title: 'Цена',
+            from: 'От',
+            to: 'До'
+          },
+          filters: [],
+          reset: 'Сбросить фильтры',
+        }
+      }
+    }
+  }
+
+  categories.state.all.forEach( category => {
+    category.localization.forEach( localization => {
+      text.messages[localization.locale].categories.push(localization.text)
+    })
+  })
+
+  const { t } = useI18n(text)
+  
+
+
+// Добавьте свою локализацию и методы t, если они нужны
+</script>
+
+<style>
+/* Ваши стили */
+</style>

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

@@ -6,7 +6,7 @@
 		</div>
 		<carousel ref="myCarousel" :items-to-show="3" :transition="330" :wrapAround="true" :autoplay="3000" :pauseAutoplayOnHover="true" :breakpoints="breakpoints">
 	    <slide class="pd-thin" v-for="(value, key, index) in products.state.all" :key="key">
-	      	<ProductCard  class="carousel__item h-100 w-100" :product="value"/>
+	      	<CardProduct  class="carousel__item h-100 w-100" :product="value"/>
 	    </slide>
 		</carousel>
 	</div>
@@ -23,7 +23,7 @@
 	import 'vue3-carousel/dist/carousel.css'
 	import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
 	
-	import ProductCard from '@pf/src/modules/products/components/blocks/ProductCard.vue'
+	import CardProduct from '@pf/src/modules/products/components/blocks/CardProduct.vue'
 
 	import * as products from '@pf/src/modules/products/store/products';
 	

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

@@ -44,6 +44,18 @@
 		</div>
 
 		<div class="h-100 flex-justify flex col">
+
+			<IconEdit
+				@click="$router.push({
+					name: 'ProductEdit', 
+					params: {
+						_id: product.organization,
+						product: product._id
+					}
+				})" 
+				class="pos-absolute pos-t-regular pos-r-regular i-regular t-transp"
+			/>
+
 			<h2 v-if="recommendation" class="t-main t-semi p-big">{{t('airecommend')}}</h2>
 			<!-- Name -->
 			<h1 class="w-100 h1-product mn-thin">{{ product.name }}</h1>
@@ -83,6 +95,9 @@
 import Images360 	from '@pf/src/modules/products/components/blocks/Images360.vue'
 import ImagesThumbnails from "@pf/src/modules/products/components/blocks/ImagesThumbnails.vue";
 
+import IconEdit from '@pf/src/modules/icons/navigation/IconEdit.vue'
+	
+
 import THC from '@pf/src/modules/products/components/elements/THC.vue'
 import Price from '@pf/src/modules/products/components/elements/Price.vue'
 // import SelectElement 	from '@/components/elements/SelectElement.vue'
@@ -125,9 +140,9 @@ const text = {
 	}
 }
 
-props.product.localization.forEach(localization => {
-	text.messages[localization.locale].description = localization.text
-})
+// props.product.localization.forEach(localization => {
+	// if (localization) text.messages[localization.locale].description = localization.text
+// })
 
  const { t } = useI18n(text)