@ozdao/martyrs 0.2.506 → 0.2.507

package/dist/martyrs/src/modules/products/components/pages/Products.vue.cjs

@@ -2,46 +2,202 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const Tab = require("../../../../components/Tab/Tab.vue.cjs");
+;/* empty css                                   */
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
-;/* empty css                                            */
+const Spoiler = require("../../../../components/Spoiler/Spoiler.vue2.cjs");
+const Checkbox = require("../../../../components/Checkbox/Checkbox.vue.cjs");
 require("vue-i18n");
 const categories = require("../../store/categories.cjs");
 require("../../../marketplace/views/store/marketplace.cjs");
 ;/* empty css                                */
-const BlockSearch = require("../../../globals/views/components/blocks/BlockSearch.vue.cjs");
-const BlockFilter = require("../../../globals/views/components/blocks/BlockFilter.vue.cjs");
+const Field = require("../../../../components/Field/Field.vue.cjs");
+const IconChevronBottom = require("../../../icons/navigation/IconChevronBottom.vue.cjs");
+const Filters = require("../../../globals/views/components/sections/Filters.vue2.cjs");
+const Calendar = require("../../../../components/Calendar/Calendar.vue2.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue.cjs");
 const CardProduct = require("../blocks/CardProduct.vue.cjs");
 const IconPlus = require("../../../icons/navigation/IconPlus.vue.cjs");
 const auth = require("../../../auth/views/store/auth.cjs");
 const globals = require("../../../globals/views/store/globals.cjs");
 const products = require("../../store/products.cjs");
+const mixins = require("../../../globals/views/mixins/mixins.cjs");
 const _hoisted_1 = { class: "pos-relative" };
 const _hoisted_2 = {
   key: 0,
   class: "pd-medium flex-v-center flex-nowrap flex"
 };
-const _hoisted_3 = { class: "cols-2-1_3 br-1px br-solid br-light z-index-3 pos-relative radius-medium" };
+const _hoisted_3 = { class: "cols-2-1_3 br-1px br-solid br-light z-index-3 pos-relative" };
 const _hoisted_4 = { class: "o-y-scroll br-r br-solid br-light pd-medium z-index-2 desktop-only h-100 pos-relative" };
-const _hoisted_5 = { class: "w-100 pd-thin h-max pos-relative o-hidden" };
-const _hoisted_6 = { class: "pos-relative w-100 z-index-3 radius-tl-big radius-tr-big" };
+const _hoisted_5 = { class: "w-100 o-y-scroll h-100" };
+const _hoisted_6 = {
+  key: 0,
+  class: "mn-b-medium"
+};
+const _hoisted_7 = { class: "mn-b-small" };
+const _hoisted_8 = { class: "gap-micro" };
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "cursor-pointer w-100 flex-v-center flex-nowrap flex" };
+const _hoisted_11 = { class: "w-100" };
+const _hoisted_12 = { class: "h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra" };
+const _hoisted_13 = { class: "mn-t-small" };
+const _hoisted_14 = { class: "cursor-pointer w-100 flex-v-center flex-nowrap flex" };
+const _hoisted_15 = { class: "h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra" };
+const _hoisted_16 = { class: "mn-t-small flex gap-thin" };
+const _hoisted_17 = { class: "cursor-pointer w-100 flex-v-center flex-nowrap flex" };
+const _hoisted_18 = { class: "h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra" };
+const _hoisted_19 = { class: "mn-t-small" };
+const _hoisted_20 = ["onClick"];
+const _hoisted_21 = { class: "w-100 rows-1 pd-thin pos-relative o-hidden" };
+const _hoisted_22 = { class: "mn-b-thin w-100 o-y-scroll scroll-hide scroll-snap-type-x-mandatory scroll-pd-regular" };
+const _hoisted_23 = { class: "gap-thin flex-nowrap flex" };
+const _hoisted_24 = ["onClick"];
+const _hoisted_25 = { class: "flex gap-small" };
 const _sfc_main = {
   __name: "Products",
   setup(__props) {
     const route = vueRouter.useRoute();
     const router = vueRouter.useRouter();
-    const tabProducts = vue.ref(route.query.tabProducts ? route.query.tabProducts : "all");
-    if (route.name !== "Organization") route.query.tabProducts = tabProducts.value;
-    if (route.query) {
-      const query = route.query;
-      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(",") : [];
-    }
-    vue.watch(tabProducts, (newValue) => {
-      if (route.name !== "Organization") router.replace({ query: { ...route.query, tabProducts: newValue } });
+    const { generateFilters, formatDate } = mixins.useGlobalMixins();
+    const currentCategories = vue.ref([]);
+    const currentCategory = vue.ref(null);
+    const categoryFilters = vue.ref([]);
+    const availableFilters = vue.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" }
+        ]
+      }
+    ]);
+    const selectedFilters = vue.ref({
+      price: { min: "", max: "" },
+      delivery: [],
+      status: null
+    });
+    const availabilityOptions = vue.ref([
+      { label: "Available today", value: "today" },
+      { label: "This week", value: "week" },
+      { label: "This month", value: "month" }
+    ]);
+    const selectedAvailability = vue.ref("all");
+    const showDatePickerPopup = vue.ref(false);
+    vue.ref(null);
+    const selectedDates = vue.ref(null);
+    const tempSelectedDates = vue.ref(null);
+    const priceRange = vue.ref({
+      min: "",
+      max: ""
+    });
+    const processedFilters = vue.computed(() => {
+      return generateFilters(selectedFilters.value);
     });
+    const processedPrices = vue.computed(() => {
+      return priceRange.value.min || priceRange.value.max ? `${priceRange.value.min || 0}-${priceRange.value.max || 999999}` : null;
+    });
+    vue.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 || [];
+            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;
+      }
+      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 = /* @__PURE__ */ 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.default,
       props: {
@@ -50,63 +206,16 @@ const _sfc_main = {
       condition: () => auth.state.user && auth.state.user._id,
       action: () => route.params._id ? router.push({ name: "Organization_ProductAdd", params: { _id: route.params._id } }) : router.push({ name: "ProductAdd" })
     }], vue.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();
     });
     vue.onUnmounted(() => {
       globals.state.navigation_bar.actions = [];
     });
-    vue.watch(() => products.state.sort, (newSortValue, oldSortValue) => {
-      let query = { ...route.query };
-      query.sortParam = newSortValue.param;
-      query.sortOrder = newSortValue.order;
-      router.replace({ query });
-    }, { deep: true });
-    vue.watch(() => products.state.filter.selected, (newFilterValue, oldFilterValue) => {
-      const query = { ...route.query };
-      Object.keys(oldFilterValue).forEach((key) => {
-        if (query[key]) {
-          delete query[key];
-        }
-      });
-      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);
-      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);
     return (_ctx, _cache) => {
       const _component_router_link = vue.resolveComponent("router-link");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.unref(route).name !== "Organization" && !_ctx.MOBILE_APP ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2, [
-          _cache[4] || (_cache[4] = vue.createElementVNode("h2", { class: "mn-r-medium" }, "Products", -1)),
+          _cache[11] || (_cache[11] = vue.createElementVNode("h2", { class: "mn-r-medium" }, "Products", -1)),
           _ctx.hasAccess(vue.unref(route).params._id, "products", "create", auth.state.accesses, auth.state.access.roles) ? (vue.openBlock(), vue.createElementBlock("button", {
             key: 0,
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.push({
@@ -115,41 +224,160 @@ const _sfc_main = {
             class: "radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second"
           }, " + ")) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true),
-        vue.unref(route).name !== "Organization" && _ctx.isAdmin ? (vue.openBlock(), vue.createBlock(Tab.default, {
-          key: 1,
-          selected: tabProducts.value,
-          "onUpdate:selected": _cache[1] || (_cache[1] = ($event) => tabProducts.value = $event),
-          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"
-        }, null, 8, ["selected"])) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_3, [
           vue.createElementVNode("div", _hoisted_4, [
-            vue.createVNode(BlockFilter.default, {
-              filter: products.state.filter,
-              "onUpdate:filter": _cache[2] || (_cache[2] = ($event) => products.state.filter = $event),
-              options: products.state.filter.options,
-              class: "h-100 w-100"
-            }, null, 8, ["filter", "options"])
+            vue.createElementVNode("div", _hoisted_5, [
+              currentCategories.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+                vue.createElementVNode("h4", _hoisted_7, vue.toDisplayString(vue.unref(route).params.categoryPath ? "Subcategories" : "Categories"), 1),
+                vue.createElementVNode("div", _hoisted_8, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(currentCategories.value, (category) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: category._id,
+                      onClick: ($event) => selectCategory(category),
+                      class: "pd-small radius-small cursor-pointer hover-bg-light transition-all"
+                    }, [
+                      vue.createTextVNode(vue.toDisplayString(category.name) + " ", 1),
+                      _cache[12] || (_cache[12] = vue.createElementVNode("br", null, null, -1)),
+                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(category.children, (subcategory) => {
+                        return vue.openBlock(), vue.createElementBlock("span", null, vue.toDisplayString(subcategory.name), 1);
+                      }), 256))
+                    ], 8, _hoisted_9);
+                  }), 128))
+                ])
+              ])) : vue.createCommentVNode("", true),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(categoryFilters.value, (filter) => {
+                return vue.openBlock(), vue.createBlock(Spoiler.default, {
+                  key: filter.name,
+                  class: "o-hidden mn-b-medium",
+                  status: true
+                }, {
+                  header: vue.withCtx(({ isOpen }) => [
+                    vue.createElementVNode("div", _hoisted_10, [
+                      vue.createElementVNode("h4", _hoisted_11, vue.toDisplayString(filter.name), 1),
+                      vue.createElementVNode("div", _hoisted_12, [
+                        vue.createVNode(IconChevronBottom.default, {
+                          class: vue.normalizeClass([{ "rotate-180 mn-t-micro-negative": isOpen }, "i-regular"]),
+                          fill: "rgb(var(--black))"
+                        }, null, 8, ["class"])
+                      ])
+                    ])
+                  ]),
+                  content: vue.withCtx(() => [
+                    vue.createElementVNode("div", _hoisted_13, [
+                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filter.options, (option) => {
+                        return vue.openBlock(), vue.createBlock(Checkbox.default, {
+                          key: option.text || option,
+                          radio: selectedFilters.value[filter.name],
+                          "onUpdate:radio": ($event) => selectedFilters.value[filter.name] = $event,
+                          label: option.text || option,
+                          value: option.text || option,
+                          mode: "checkbox",
+                          class: "mn-b-micro"
+                        }, null, 8, ["radio", "onUpdate:radio", "label", "value"]);
+                      }), 128))
+                    ])
+                  ]),
+                  _: 2
+                }, 1024);
+              }), 128)),
+              vue.createVNode(Spoiler.default, {
+                class: "o-hidden mn-b-medium",
+                status: true
+              }, {
+                header: vue.withCtx(({ isOpen }) => [
+                  vue.createElementVNode("div", _hoisted_14, [
+                    _cache[13] || (_cache[13] = vue.createElementVNode("h4", { class: "w-100" }, " Price", -1)),
+                    vue.createElementVNode("div", _hoisted_15, [
+                      vue.createVNode(IconChevronBottom.default, {
+                        class: vue.normalizeClass([{ "rotate-180 mn-t-micro-negative": isOpen }, "i-regular"]),
+                        fill: "rgb(var(--black))"
+                      }, null, 8, ["class"])
+                    ])
+                  ])
+                ]),
+                content: vue.withCtx(() => [
+                  vue.createElementVNode("div", _hoisted_16, [
+                    vue.createVNode(Field.default, {
+                      modelValue: priceRange.value.min,
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => priceRange.value.min = $event),
+                      placeholder: "From",
+                      type: "number",
+                      class: "w-50 bg-light pd-small radius-small"
+                    }, null, 8, ["modelValue"]),
+                    vue.createVNode(Field.default, {
+                      modelValue: priceRange.value.max,
+                      "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => priceRange.value.max = $event),
+                      placeholder: "To",
+                      type: "number",
+                      class: "w-50 bg-light pd-small radius-small"
+                    }, null, 8, ["modelValue"])
+                  ])
+                ]),
+                _: 1
+              }),
+              vue.createVNode(Spoiler.default, {
+                class: "o-hidden mn-b-medium",
+                status: true
+              }, {
+                header: vue.withCtx(({ isOpen }) => [
+                  vue.createElementVNode("div", _hoisted_17, [
+                    _cache[14] || (_cache[14] = vue.createElementVNode("h4", { class: "w-100" }, "Availability", -1)),
+                    vue.createElementVNode("div", _hoisted_18, [
+                      vue.createVNode(IconChevronBottom.default, {
+                        class: vue.normalizeClass([{ "rotate-180 mn-t-micro-negative": isOpen }, "i-regular"]),
+                        fill: "rgb(var(--black))"
+                      }, null, 8, ["class"])
+                    ])
+                  ])
+                ]),
+                content: vue.withCtx(() => [
+                  vue.createElementVNode("div", _hoisted_19, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(availabilityOptions.value, (option) => {
+                      return vue.openBlock(), vue.createElementBlock("div", {
+                        key: option.value,
+                        onClick: ($event) => selectAvailabilityOption(option.value),
+                        class: vue.normalizeClass([{ "bg-light": selectedAvailability.value === option.value }, "pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"])
+                      }, vue.toDisplayString(option.label), 11, _hoisted_20);
+                    }), 128)),
+                    vue.createElementVNode("div", {
+                      onClick: _cache[3] || (_cache[3] = () => {
+                        tempSelectedDates.value = selectedDates.value;
+                        showDatePickerPopup.value = true;
+                      }),
+                      class: vue.normalizeClass([{ "bg-light": selectedAvailability.value === "custom" }, "pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"])
+                    }, vue.toDisplayString(selectedDates.value ? `${vue.unref(formatDate)(selectedDates.value.start, { dayMonth: true, language: "en" })} - ${vue.unref(formatDate)(selectedDates.value.end, { dayMonth: true, language: "en" })}` : "Select dates"), 3)
+                  ])
+                ]),
+                _: 1
+              }),
+              _cache[15] || (_cache[15] = vue.createElementVNode("button", { class: "bg-main w-100 button mn-t-medium" }, " Clear Filters ", -1))
+            ])
           ]),
-          vue.createElementVNode("div", _hoisted_5, [
+          vue.createElementVNode("div", _hoisted_21, [
+            vue.createVNode(Filters.default, {
+              filters: availableFilters.value,
+              "onUpdate:filters": _cache[4] || (_cache[4] = ($event) => availableFilters.value = $event),
+              selected: selectedFilters.value,
+              "onUpdate:selected": _cache[5] || (_cache[5] = ($event) => selectedFilters.value = $event)
+            }, null, 8, ["filters", "selected"]),
             vue.renderSlot(_ctx.$slots, "default"),
-            vue.createElementVNode("div", _hoisted_6, [
-              vue.createVNode(BlockSearch.default, {
-                onSearch: vue.unref(debouncedSearch),
-                placeholder: "Enter product name",
-                class: "bg-light mn-b-thin h-4r"
-              }, null, 8, ["onSearch"])
+            vue.createElementVNode("div", _hoisted_22, [
+              vue.createElementVNode("div", _hoisted_23, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(currentCategories.value, (category) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: category._id,
+                    onClick: ($event) => selectCategory(category),
+                    class: "flex-child-default bg-light flex t-nowrap pd-medium radius-medium cursor-pointer hover-bg-light transition-all"
+                  }, vue.toDisplayString(category.name), 9, _hoisted_24);
+                }), 128))
+              ])
             ]),
             vue.createVNode(Feed.default, {
+              search: true,
               filter: products.state.filter,
-              "onUpdate:filter": _cache[3] || (_cache[3] = ($event) => products.state.filter = $event),
+              "onUpdate:filter": _cache[6] || (_cache[6] = ($event) => products.state.filter = $event),
+              sort: products.state.sort,
+              "onUpdate:sort": _cache[7] || (_cache[7] = ($event) => products.state.sort = $event),
               showLoadMore: false,
               states: {
                 empty: {
@@ -163,15 +391,14 @@ const _sfc_main = {
               },
               options: {
                 limit: 16,
-                owner: vue.unref(route).params._id,
-                categories: vue.unref(route).query.categories,
-                filters: _ctx.generateFilters(products.state.filter.selected),
-                prices: vue.unref(route).query.prices,
-                delivery: vue.unref(route).query.delivery,
+                owner: vue.unref(route).name?.includes("Organization") ? vue.unref(route).params._id : null,
                 search: vue.unref(route).query.search,
-                ...tabProducts.value !== "all" && { status: tabProducts.value },
-                lookup: ["variants"]
-                // user: user
+                lookup: ["variants", "rents"],
+                categories: vue.unref(route).params.categoryPath ? `/${vue.unref(route).params.categoryPath}` : null,
+                filters: processedFilters.value,
+                prices: processedPrices.value,
+                dateStart: selectedDates.value?.start,
+                dateEnd: selectedDates.value?.end
               },
               class: "cols-4 pos-relative w-100 rows-1 gap-thin"
             }, {
@@ -198,9 +425,37 @@ const _sfc_main = {
                 }), 256))
               ]),
               _: 1
-            }, 8, ["filter", "store", "options"])
+            }, 8, ["filter", "sort", "store", "options"])
           ])
-        ])
+        ]),
+        vue.createVNode(Popup.default, {
+          isPopupOpen: showDatePickerPopup.value,
+          onClosePopup: _cache[10] || (_cache[10] = ($event) => showDatePickerPopup.value = false),
+          class: "pd-medium bg-white radius-medium",
+          style: { "min-width": "350px" }
+        }, {
+          default: vue.withCtx(() => [
+            _cache[16] || (_cache[16] = vue.createElementVNode("h3", { class: "mn-b-medium" }, "Select Date Range", -1)),
+            vue.createVNode(Calendar.default, {
+              date: tempSelectedDates.value,
+              "onUpdate:date": _cache[8] || (_cache[8] = ($event) => tempSelectedDates.value = $event),
+              allowRange: true,
+              disablePastDates: true,
+              class: "mn-b-medium"
+            }, null, 8, ["date"]),
+            vue.createElementVNode("div", _hoisted_25, [
+              vue.createElementVNode("button", {
+                onClick: applyDateFilter,
+                class: "bg-main button flex-child-full"
+              }, " Apply "),
+              vue.createElementVNode("button", {
+                onClick: _cache[9] || (_cache[9] = ($event) => showDatePickerPopup.value = false),
+                class: "bg-light button flex-child-full"
+              }, " Cancel ")
+            ])
+          ]),
+          _: 1
+        }, 8, ["isPopupOpen"])
       ]);
     };
   }

package/dist/martyrs/src/modules/products/components/pages/Products.vue.cjs.map

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