@ozdao/martyrs 0.2.506 → 0.2.508

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

@@ -15,97 +15,252 @@
       </button>
     </header>
 
-  <Tab 
-    v-if="route.name !== 'Organization' &&  isAdmin"
-    v-model:selected="tabProducts"
-    :tabs="[
-      { name: 'All',          value: 'all' },
-      { name: 'Published',    value: 'published' },
-      { name: 'Unpublished',  value: 'unpublished' }, 
-      { name: 'Archivied',    value: 'archivied' } 
-    ]"
-    style="flex: 0 0 auto"
-   class="
-
-        p-medium
-        br-t br-solid br-light 
-        bg-white
-        gap-micro pd-medium pd-t-thin pd-b-thin
-        z-index-1
-
-      "
-      classTab="bg-light  uppercase pd-small radius-small w-100"
-  />
-
-  <div class="cols-2-1_3 br-1px br-solid br-light z-index-3 pos-relative radius-medium">
-
-  <div class="o-y-scroll br-r br-solid br-light pd-medium z-index-2 desktop-only h-100 pos-relative">
-    <BlockFilter
-      v-model:filter="products.state.filter"
-      :options="products.state.filter.options"
-      class="h-100 w-100"
-    />
-  </div>
-
-    <div class="w-100 pd-thin h-max pos-relative o-hidden">
-      <slot></slot>
-      <div class="pos-relative w-100  z-index-3 radius-tl-big radius-tr-big">
-        <BlockSearch 
-          @search="debouncedSearch"
-          placeholder="Enter product name"
-          class="bg-light mn-b-thin h-4r"
-        />
-      </div>
-      <Feed
-        v-model:filter="products.state.filter"
-        :showLoadMore="false"
-        :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: 16,
-          owner: route.params._id,
-          categories: route.query.categories,
-          filters: generateFilters(products.state.filter.selected),
-          prices: route.query.prices,
-          delivery: route.query.delivery,
-          search: route.query.search,
-          ...(tabProducts !== 'all' && { status: tabProducts }),
-          lookup: ['variants']
-          // user: user
-        }"
-        v-slot="{ 
-          items 
-        }"
-        class="cols-4 pos-relative w-100 rows-1 gap-thin"
-       
-      >
-        <router-link  
-          v-for="product in items" 
-          :to="route.params._id ? { name: 'Organization_Product', params: { _id: route.params._id, product: product._id  } } : { name: 'Product', params: { product: product._id  } }"
-           class="pos-relative h-100 w-100"
+    <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">
+          <!-- Категории -->
+          <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 }}
+                <br>
+                <span v-for="subcategory in category.children">{{subcategory.name}}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Фильтры категории -->
+          <Spoiler 
+            v-for="filter in categoryFilters"
+            :key="filter.name"
+            class="o-hidden mn-b-medium"
+            :status="true"
           >
-          <CardProduct
-            :key="product._id"
-            :product="product"
-            :user="auth.state.access"
-            :organization="route.params._id"
-            :access="hasAccess(route.params._id, 'products', 'edit', auth.state.accesses, auth.state.access.roles)"
-            class="pos-relative  h-100 w-100 bg-light"
-          />
-        </router-link>
-      </Feed>
+            <template #header="{ isOpen }">
+              <div class="cursor-pointer w-100 flex-v-center flex-nowrap flex">
+                <h4 class="w-100">{{ filter.name }}</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-regular"/>
+                </div>
+              </div>
+            </template>
+
+            <template #content>
+              <div class="mn-t-small">
+                <Checkbox 
+                  v-for="option in filter.options"
+                  :key="option.text || option"
+                  v-model:radio="selectedFilters[filter.name]"
+                  :label="option.text || option"
+                  :value="option.text || option"
+                  mode="checkbox"
+                  class="mn-b-micro"
+                />
+              </div>
+            </template>
+          </Spoiler>
+         
+
+          <!-- Цена за сутки -->
+          <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">  Price</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-regular"/>
+                </div>
+              </div>
+            </template>
+
+            <template #content>
+              <div class="mn-t-small flex gap-thin">
+                <Field
+                  v-model="priceRange.min"
+                  placeholder="From"
+                  type="number"
+                  class="w-50 bg-light pd-small radius-small"
+                />
+                <Field
+                  v-model="priceRange.max"
+                  placeholder="To"
+                  type="number"
+                  class="w-50 bg-light pd-small radius-small"
+                />
+              </div>
+            </template>
+          </Spoiler>
+
+          <!-- Доступность -->
+          <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">Availability</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-regular"/>
+                </div>
+              </div>
+            </template>
+
+            <template #content>
+              <div class="mn-t-small">
+                <div 
+                  v-for="option in availabilityOptions"
+                  :key="option.value"
+                  @click="selectAvailabilityOption(option.value)"
+                  :class="{ 'bg-light': selectedAvailability === option.value }"
+                  class="pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"
+                >
+                  {{ option.label }}
+                </div>
+                
+                <div 
+                  @click="() => { tempSelectedDates = selectedDates; showDatePickerPopup = true; }"
+                  :class="{ 'bg-light': selectedAvailability === 'custom' }"
+                  class="pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"
+                >
+                  {{ selectedDates ? `${formatDate(selectedDates.start, { dayMonth: true, language: 'en' })} - ${formatDate(selectedDates.end, { dayMonth: true, language: 'en' })}` : 'Select dates'}} 
+                </div>
+              </div>
+            </template>
+          </Spoiler>
+
+          <!-- Кнопка очистки фильтров -->
+          <button 
+            class="bg-main w-100 button mn-t-medium"
+          >
+            Clear Filters
+          </button>
+        </div>
+      </div>
 
+        <div class="w-100 rows-1 pd-thin  pos-relative o-hidden">
+          <Filters
+            v-model:filters="availableFilters"
+            v-model:selected="selectedFilters"
+            class="mn-b-thin mobile-only"
+          />
+          <slot></slot>
+          <!-- <div class="pos-relative w-100  z-index-3 radius-tl-big radius-tr-big">
+            <BlockSearch 
+              @search="debouncedSearch"
+              placeholder="Enter product name"
+              class="bg-light mn-b-thin h-4r"
+            />
+          </div> -->
+
+          <div class="mn-b-thin mobile-only w-100 o-y-scroll scroll-hide scroll-snap-type-x-mandatory scroll-pd-regular">
+            <div class="gap-thin flex-nowrap flex">
+              <div
+                v-for="category in currentCategories"
+                :key="category._id"
+                @click="selectCategory(category)"
+                class=" flex-child-default bg-light flex t-nowrap pd-medium radius-medium cursor-pointer hover-bg-light transition-all"
+              >
+                {{ category.name }}
+              </div>
+            </div>
+          </div>
+
+
+          <Feed
+            :search="true"
+            v-model:filter="products.state.filter"
+            v-model:sort="products.state.sort"
+            :showLoadMore="false"
+            :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: 16,
+              owner: route.name?.includes('Organization') ? route.params._id : null,
+              search: route.query.search,
+              lookup: ['variants','rents'],
+              categories: route.params.categoryPath ? `/${route.params.categoryPath}` : null,
+              filters: processedFilters,
+              prices: processedPrices,
+              dateStart: selectedDates?.start,
+              dateEnd: selectedDates?.end
+            }"
+            v-slot="{ 
+              items 
+            }"
+            class="cols-4 pos-relative w-100 rows-1 gap-thin"
+           
+          >
+            <router-link  
+              v-for="product in items" 
+              :to="route.params._id ? { name: 'Organization_Product', params: { _id: route.params._id, product: product._id  } } : { name: 'Product', params: { product: product._id  } }"
+               class="pos-relative h-100 w-100"
+              >
+              <CardProduct
+                :key="product._id"
+                :product="product"
+                :user="auth.state.access"
+                :organization="route.params._id"
+                :access="hasAccess(route.params._id, 'products', 'edit', auth.state.accesses, auth.state.access.roles)"
+                class="pos-relative  h-100 w-100 bg-light"
+              />
+            </router-link>
+          </Feed>
+
+        </div>
     </div>
-  </div>
+  
+    <!-- Date Picker Popup -->
+    <Popup
+      :isPopupOpen="showDatePickerPopup"
+      @close-popup="showDatePickerPopup = false"
+      class="pd-medium bg-white radius-medium"
+      style="min-width: 350px;"
+    >
+      <h3 class="mn-b-medium">Select Date Range</h3>
+      
+      <Calendar
+        v-model:date="tempSelectedDates"
+        :allowRange="true"
+        :disablePastDates="true"
+        class="mn-b-medium"
+      />
+      
+      <div class="flex gap-small">
+        <button 
+          @click="applyDateFilter"
+          class="bg-main button flex-child-full"
+        >
+          Apply
+        </button>
+        <button 
+          @click="showDatePickerPopup = false"
+          class="bg-light button flex-child-full"
+        >
+          Cancel
+        </button>
+      </div>
+    </Popup>
 </div>
+
 </template>
 
 
@@ -121,40 +276,202 @@
   import FilterProducts from '@martyrs/src/modules/products/components/sections/FilterProducts.vue'
   import BlockSearch from '@martyrs/src/modules/globals/views/components/blocks/BlockSearch.vue'
   import BlockFilter  from '@martyrs/src/modules/globals/views/components/blocks/BlockFilter.vue'
+  import Filters  from '@martyrs/src/modules/globals/views/components/sections/Filters.vue'
+  import Spoiler from "@martyrs/src/components/Spoiler/Spoiler.vue"
+  import Field from "@martyrs/src/components/Field/Field.vue"
+  import Calendar from "@martyrs/src/components/Calendar/Calendar.vue"
+  import Popup from "@martyrs/src/components/Popup/Popup.vue"
+  import Checkbox from "@martyrs/src/components/Checkbox/Checkbox.vue"
 
   import CardProduct from '@martyrs/src/modules/products/components/blocks/CardProduct.vue'
 
   import IconPlus from '@martyrs/src/modules/icons/navigation/IconPlus.vue'
+  import IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue'
 
   // Accessing router and store
   import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
   import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
   import * as products from '@martyrs/src/modules/products/store/products.js';
-  import * as marketplace from '@martyrs/src/modules/marketplace/views/store/marketplace.js';
   import * as categories from '@martyrs/src/modules/products/store/categories.js';
+  import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';
 
   const route = useRoute()
   const router = useRouter()
+  const { generateFilters, formatDate } = useGlobalMixins()
+
+  // Категории и фильтры
+  const currentCategories = ref([]);
+  const currentCategory = ref(null);
+  const categoryFilters = ref([]);
+  // const selectedFilters = ref({});
+
+const availableFilters = ref([
+  {
+    title: 'Price',
+    value: 'price',
+    type: 'range',
+    minPlaceholder: 'From',
+    maxPlaceholder: 'To'
+  },
+  {
+    title: 'Delivery',
+    value: 'delivery',
+    type: 'checkbox',
+    options: [
+      { label: 'Pickup', value: 'pickup' },
+      { label: 'Courier', value: 'courier' },
+      { label: 'Post', value: 'post' }
+    ]
+  },
+  {
+    title: 'Status',
+    value: 'status',
+    type: 'radio',
+    options: [
+      { label: 'Available', value: 'available' },
+      { label: 'Out of Stock', value: 'out_of_stock' },
+      { label: 'Coming Soon', value: 'coming_soon' }
+    ]
+  }
+])
 
-  // Tab logic
-  const tabProducts = ref(route.query.tabProducts ? route.query.tabProducts : 'all')
+const selectedFilters = ref({
+  price: { min: '', max: '' },
+  delivery: [],
+  status: null
+})
 
-  if (route.name !== 'Organization') route.query.tabProducts = tabProducts.value
+    
+  // Переменные фильтров
+  const availabilityOptions = ref([
+    { label: 'Available today', value: 'today' },
+    { label: 'This week', value: 'week' },
+    { label: 'This month', value: 'month' }
+  ]);
+  
+  const selectedAvailability = ref('all');
+  const showDatePickerPopup = ref(false);
+  const selectedPeriod = ref(null);
+  const selectedDates = ref(null);
+  const tempSelectedDates = ref(null);
   
-  if (route.query) {
-    const query = route.query;
+  const priceRange = ref({
+    min: '',
+    max: ''
+  });
 
-    products.state.filter.selected.categories = query.categories ? query.categories.split(',') : [];
-    products.state.filter.selected.prices = query.prices ? query.prices.split(',') : [];
-    products.state.filter.selected.delivery = query.delivery ? query.delivery.split(',') : [];
-    products.state.filter.selected.brand = query.brand ? query.brand.split(',') : [];
-  }
+  // Computed property for processed filters
+  const processedFilters = computed(() => {
+    return generateFilters(selectedFilters.value);
+  });
+
+  const processedPrices = computed(() => {
+    return priceRange.value.min || priceRange.value.max ? `${priceRange.value.min || 0}-${priceRange.value.max || 999999}` : null;
+  });
 
 
-  watch(tabProducts, (newValue) => {
-    if (route.name !== 'Organization') router.replace({ query: { ...route.query, tabProducts: newValue } });
+  const processedLookups = computed(() => {
+    const lookups = ['variants'];
+    if (processedDates.value) {
+      lookups.push('rents');
+    }
+    return lookups;
   });
 
+  const loadCategoryData = async () => {
+    const categoryPath = route.params.categoryPath;
+    
+    try {
+      if (categoryPath) {
+        // Загружаем категорию и её прямых детей
+        const result = await categories.actions.read({ 
+          url: `/${categoryPath}`,
+          depth: 1,
+          tree: false
+        });
+        
+        if (result.length > 0) {
+          currentCategory.value = result[0];
+          currentCategories.value = result[0].children || [];
+          categoryFilters.value = result[0].filters || [];
+          
+          // Initialize selected filters object
+          const filtersObj = {};
+          (result[0].filters || []).forEach(filter => {
+            filtersObj[filter.name] = [];
+          });
+          selectedFilters.value = filtersObj;
+        }
+      } else {
+        // Загружаем только корневые категории
+        const result = await categories.actions.read({ 
+          root: true,
+          tree: false
+        });
+        
+        currentCategories.value = result;
+      }
+    } catch (error) {
+      console.error('Error loading categories:', error);
+      currentCategories.value = [];
+    }
+  };
+
+  // Функция для выбора категории
+  const selectCategory = (category) => {
+    const categoryPath = category.url ? category.url.substring(1) : '';
+      
+    if (!categoryPath) {
+      console.warn('No URL found for category:', category);
+      return;
+    }
+    
+    // Переходим к странице категории используя wildcard роут
+    if (route.params._id) {
+      router.push(`/organizations/${route.params._id}/products/categories/${categoryPath}`);
+    } else {
+      router.push(`/products/categories/${categoryPath}`);
+    }
+  };
+
+  // Функция выбора опции доступности
+  const selectAvailabilityOption = (value) => {
+    selectedAvailability.value = value;
+    const today = new Date();
+    
+    switch(value) {
+      case 'today':
+        selectedDates.value = {
+          start: today,
+          end: today
+        };
+        break;
+      case 'week':
+        const weekEnd = new Date(today);
+        weekEnd.setDate(today.getDate() + 7);
+        selectedDates.value = {
+          start: today,
+          end: weekEnd
+        };
+        break;
+      case 'month':
+        const monthEnd = new Date(today);
+        monthEnd.setMonth(today.getMonth() + 1);
+        selectedDates.value = {
+          start: today,
+          end: monthEnd
+        };
+        break;
+    }
+  };
+
+  // Функция применения фильтра дат
+  const applyDateFilter = () => {
+    selectedDates.value = tempSelectedDates.value;
+    selectedAvailability.value = 'custom';
+    showDatePickerPopup.value = false;
+  };
+
   globals.state.navigation_bar.actions = [{
     component: IconPlus,
     props: {
@@ -165,85 +482,13 @@
   }],
 
   onMounted(async () => {
-    let categoriesFilter = await categories.actions.read({rootOnly:true});
-
-    categoriesFilter = categoriesFilter.map(category => ({
-      value: category._id,
-      label: category.name
-    }));
-
-    const index = products.state.filter.options.findIndex(option => option.value === 'categories');
-
-    const categoryOption = {
-      title: 'Categories',
-      value: 'categories',
-      options: categoriesFilter
-    };
-
-    if (index !== -1) {
-        products.state.filter.options[index] = categoryOption;
-    } else {
-        products.state.filter.options.unshift(categoryOption);
-    }
+    await loadCategoryData();
   })
 
   onUnmounted(() => {
     globals.state.navigation_bar.actions = [];
   });
 
-  watch(() => products.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(() => products.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 debounce(fn, delay) {
-  let timeoutId = null;
-  return (...args) => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => fn(...args), delay);
-  };
-}
-
-const debouncedSearch = debounce((search) => {
- let query = { ...route.query}
-    
-  query.search = search
-  
-  router.replace({ query });
-}, 500);
-
 </script>
 
 <style lang="scss">