@ozdao/prometheus-framework 0.2.309 → 0.2.310

package/dist/prometheus-framework/src/modules/products/components/pages/Categories.vue.js

@@ -1,45 +1,92 @@
-import { onMounted, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, createTextVNode, unref, Fragment, renderList, createBlock } from "vue";
-import { VueDraggableNext } from "../../../../../../node_modules/vue-draggable-next/dist/vue-draggable-next.esm-bundler.js";
+import { onUnmounted, withAsyncContext, onMounted, computed, resolveComponent, openBlock, createElementBlock, createBlock, withCtx, createElementVNode, createVNode, createTextVNode, createCommentVNode } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { actions, state } from "../../store/categories.js";
-import _sfc_main$2 from "../../../../components/Button/Button.vue2.js";
-import _sfc_main$1 from "../../../../components/Block/Block.vue.js";
-import _sfc_main$3 from "../blocks/CardCategory.vue.js";
-const _hoisted_1 = { class: "pd-thin" };
+import { state } from "../../../globals/views/store/globals.js";
+import { state as state$1 } from "../../../auth/views/store/auth.js";
+import { state as state$2, actions } from "../../store/categories.js";
+import _sfc_main$3 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$2 from "../../../../components/Block/Block.vue.js";
+/* empty css                                       */
+/* empty css                                           */
+/* empty css                                             */
+/* empty css                                      */
+/* empty css                                         */
+/* empty css                                    */
+import "../blocks/CardCategory.vue2.js";
+import _sfc_main$4 from "../sections/CategoriesTree.vue.js";
+import _sfc_main$1 from "../../../icons/navigation/IconPlus.vue.js";
+const _hoisted_1 = { class: "pd-thin bg-white" };
 const _sfc_main = {
   __name: "Categories",
-  setup(__props) {
-    useRoute();
-    useRouter();
+  async setup(__props) {
+    let __temp, __restore;
+    const route = useRoute();
+    const router = useRouter();
+    state.navigation_bar.actions = [{
+      component: _sfc_main$1,
+      props: {
+        fill: "rgb(var(--main))"
+      },
+      condition: () => state$1.user && state$1.user._id,
+      action: () => route.params._id ? router.push({ name: "Category Add", params: { _id: route.params._id } }) : router.push({ name: "Category Add" })
+    }], onUnmounted(() => {
+      state.navigation_bar.actions = [];
+    });
+    state$2.all = ([__temp, __restore] = withAsyncContext(() => actions.read({
+      user: state$1.user._id,
+      rootOnly: true,
+      limit: 10
+    })), __temp = await __temp, __restore(), __temp);
     onMounted(async () => {
-      await actions.fetchCategories();
     });
-    function updateOrder() {
-      state.all.forEach((category, index) => {
-        category.order = index;
-      });
-      updateCategoriesOrder();
-    }
-    async function updateCategoriesOrder() {
-      await actions.updateCategories(state.all);
+    computed(() => {
+      const recursiveMap = (data) => {
+        return data.map((item) => ({
+          // id: item._id, 
+          parent: item.parent,
+          _id: item._id,
+          order: item.order,
+          name: item.name,
+          children: item.children ? recursiveMap(item.children) : []
+        }));
+      };
+      return recursiveMap(state$2.all);
+    });
+    function flattenCategoryTree(categories) {
+      let flatCategories = [];
+      function flatten(category) {
+        const { children, ...categoryWithoutChildren } = category;
+        flatCategories.push(categoryWithoutChildren);
+        if (children && Array.isArray(children)) {
+          children.forEach((child) => flatten(child));
+        }
+      }
+      categories.forEach((category) => flatten(category));
+      return flatCategories;
     }
-    async function deleteCategory(category) {
-      const isConfirmed = confirm(`Are you sure you want to delete the category "${category.name}"?`);
-      if (isConfirmed) {
-        await actions.deleteCategory(category.url);
-      } else {
-        alert("Category deletion cancelled");
+    async function updateCategoriesOrder(category) {
+      try {
+        const allCategories = state$2.all;
+        const flattenedCategories = flattenCategoryTree(allCategories);
+        console.log("flated", flattenedCategories);
+        await actions.update(flattenedCategories);
+        console.log("Categories order updated successfully");
+      } catch (error) {
+        console.error("Error updating categories order:", error);
+        throw error;
       }
     }
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_sfc_main$1, { class: "radius-big mn-b-thin flex-nowrap flex-v-center flex" }, {
+        !_ctx.MOBILE_APP ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 0,
+          class: "radius-big mn-b-thin flex-nowrap flex-v-center flex"
+        }, {
           default: withCtx(() => [
-            _cache[2] || (_cache[2] = createElementVNode("h1", { class: "mn-r-auto" }, " Product Categories ", -1)),
+            _cache[2] || (_cache[2] = createElementVNode("h2", { class: "mn-r-auto" }, " Product Categories ", -1)),
             createVNode(_component_router_link, {
               to: {
-                name: "CategoryAdd",
+                name: "Category Add",
                 params: {
                   _id: _ctx.$route.params._id
                 }
@@ -51,7 +98,7 @@ const _sfc_main = {
               ])),
               _: 1
             }, 8, ["to"]),
-            createVNode(_sfc_main$2, {
+            createVNode(_sfc_main$3, {
               onClick: updateCategoriesOrder,
               class: "pd-small radius-big bg-black t-white uppercase t-medium"
             }, {
@@ -62,25 +109,13 @@ const _sfc_main = {
             })
           ]),
           _: 1
-        }),
-        createVNode(unref(VueDraggableNext), {
-          class: "dragArea list-group w-full",
-          list: state.all,
-          "item-key": "order",
-          onEnd: updateOrder
-        }, {
-          default: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(state.all, (category, index) => {
-              return openBlock(), createBlock(_sfc_main$3, {
-                key: category.id,
-                category,
-                onDelete: deleteCategory,
-                class: "pd-medium bg-light radius-medium mn-b-thin"
-              }, null, 8, ["category"]);
-            }), 128))
-          ]),
-          _: 1
-        }, 8, ["list"])
+        })) : createCommentVNode("", true),
+        state$2.all ? (openBlock(), createBlock(_sfc_main$4, {
+          key: 1,
+          items: state$2.all,
+          state: state$2.all,
+          onUpdate: updateCategoriesOrder
+        }, null, 8, ["items", "state"])) : createCommentVNode("", true)
       ]);
     };
   }

package/dist/prometheus-framework/src/modules/products/components/pages/Categories.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Categories.vue.js","sources":["../../../../../../../src/modules/products/components/pages/Categories.vue"],"sourcesContent":["<template>\n  <div class=\"pd-thin\">\n    <Block class=\"radius-big mn-b-thin flex-nowrap flex-v-center flex\">\n      <h1 class=\"mn-r-auto\">\n        Product Categories\n      </h1>\n\n      <router-link \n        :to=\"{\n          name: 'CategoryAdd', \n          params: { \n            _id: $route.params._id\n          } \n        }\"\n        class=\"mn-r-medium uppercase t-medium pd-small radius-big  bg-white nav-link\"\n      >\n        Add category\n      </router-link>\n\n      <Button \n        @click=\"updateCategoriesOrder\" \n        class=\"pd-small radius-big bg-black t-white uppercase t-medium\"\n      >\n        Change Order\n      </Button>\n    </Block>\n\n    <VueDraggableNext \n      class=\"dragArea list-group w-full\" \n      :list=\"categories.state.all\" \n      item-key=\"order\" \n      @end=\"updateOrder\"\n    >\n      <CardCategory \n        v-for=\"(category, index) in categories.state.all\"\n        :key=\"category.id\"\n        :category=\"category\" \n        @delete=\"deleteCategory\"\n        class=\"pd-medium bg-light radius-medium mn-b-thin\"\n      />\n    </VueDraggableNext>\n  </div>\n</template>\n\n<script setup>\n  import { onMounted } from 'vue';\n  import { VueDraggableNext } from 'vue-draggable-next';\n\n  import { useRoute, useRouter } from 'vue-router';\n\n  import * as categories from '@pf/src/modules/products/store/categories'; \n\n  const route = useRoute();\n  const router = useRouter();\n\n  import Button from \"@pf/src/components/Button/Button.vue\";\n  import Block from '@pf/src/components/Block/Block.vue';\n  import CardCategory from '@pf/src/modules/products/components/blocks/CardCategory.vue';\n\n  onMounted(async () => {\n    await categories.actions.fetchCategories();\n  });\n\n  function updateOrder() {\n    categories.state.all.forEach((category, index) => {\n      category.order = index;\n    });\n    updateCategoriesOrder();\n  }\n\n  async function updateCategoriesOrder() {\n    await categories.actions.updateCategories(categories.state.all);\n  }\n\n  async function deleteCategory(category) {\n  // Запрашиваем подтверждение у пользователя\n    const isConfirmed = confirm(`Are you sure you want to delete the category \"${category.name}\"?`);\n    \n    // Если пользователь подтвердил удаление, продолжаем процесс\n    if (isConfirmed) {\n      await categories.actions.deleteCategory(category.url);\n    } else {\n      alert('Category deletion cancelled'); \n    }\n  }\n\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["categories.actions","categories.state"],"mappings":";;;;;;;;;;;AAoDgB,aAAW;AACV,cAAY;AAM3B,cAAU,YAAY;AACpB,YAAMA,QAAmB;IAC7B,CAAG;AAED,aAAS,cAAc;AACrBC,YAAiB,IAAI,QAAQ,CAAC,UAAU,UAAU;AAChD,iBAAS,QAAQ;AAAA,MACvB,CAAK;AACD;IACD;AAED,mBAAe,wBAAwB;AACrC,YAAMD,QAAmB,iBAAiBC,MAAiB,GAAG;AAAA,IAC/D;AAED,mBAAe,eAAe,UAAU;AAEtC,YAAM,cAAc,QAAQ,iDAAiD,SAAS,IAAI,IAAI;AAG9F,UAAI,aAAa;AACf,cAAMD,QAAmB,eAAe,SAAS,GAAG;AAAA,MAC1D,OAAW;AACL,cAAM,6BAA6B;AAAA,MACpC;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Categories.vue.js","sources":["../../../../../../../src/modules/products/components/pages/Categories.vue"],"sourcesContent":["<template>\n  <div class=\"pd-thin bg-white\">\n    <Block v-if=\"!MOBILE_APP\" \n      class=\"radius-big mn-b-thin flex-nowrap flex-v-center flex\"\n    >\n      <h2 class=\"mn-r-auto\">\n        Product Categories\n      </h2>\n\n      <router-link \n        :to=\"{\n          name: 'Category Add', \n          params: { \n            _id: $route.params._id\n          } \n        }\"\n        class=\"mn-r-medium uppercase t-medium pd-small radius-big  bg-white nav-link\"\n      >\n        Add category\n      </router-link>\n\n      <Button \n        @click=\"updateCategoriesOrder\" \n        class=\"pd-small radius-big bg-black t-white uppercase t-medium\"\n      >\n        Change Order\n      </Button>\n    </Block>\n    <!-- <Feed\n      :states=\"{\n        empty: {\n          title: 'No Events Found',\n          description: 'Currently, there are no events available.'\n        }\n      }\"\n      :store=\"{\n        read: (options) => categories.actions.read(options),\n        state: categories.state\n      }\"\n      :options=\"{\n          user: auth.state.user._id,\n          rootOnly: true,\n          limit: 10\n      }\"\n      v-slot=\"{ \n        items \n      }\"\n    > -->\n      <CategoryList \n        v-if=\"categories.state.all\" \n        :items=\"categories.state.all\" \n        :state=\"categories.state.all\" \n        @update=\"updateCategoriesOrder\" \n      />\n\n     <!--  <VueDraggableNext \n        class=\"dragArea list-group w-full\" \n        :list=\"items\" \n        item-key=\"order\" \n        @end=\"updateOrder\"\n      >\n        <CardCategory \n          v-for=\"(category,index) in items\"\n          :key=\"category.id\"\n          :category=\"category\" \n          @delete=\"deleteCategory\"\n          class=\"pd-medium bg-light radius-medium mn-b-thin\"\n        />\n      </VueDraggableNext> -->\n    <!-- </Feed> -->\n  </div>\n</template>\n\n<script setup>\n  import { onMounted, onUnmounted, computed } from 'vue';\n  import { VueDraggableNext } from 'vue-draggable-next';\n\n  import { useRoute, useRouter } from 'vue-router';\n\n  import * as globals from '@pf/src/modules/globals/views/store/globals';\n  import * as auth from '@pf/src/modules/auth/views/store/auth'; \n  import * as categories from '@pf/src/modules/products/store/categories'; \n\n  const route = useRoute();\n  const router = useRouter();\n\n  import Button from \"@pf/src/components/Button/Button.vue\";\n  import Block from '@pf/src/components/Block/Block.vue';\n  import Feed from '@pf/src/components/Feed/Feed.vue'\n\n  import CardCategory from '@pf/src/modules/products/components/blocks/CardCategory.vue';\n  import CategoryList from '@pf/src/modules/products/components/sections/CategoriesTree.vue';\n\n  import IconPlus from '@pf/src/modules/icons/navigation/IconPlus.vue'\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: 'Category Add', params: { _id: route.params._id} }) : router.push({ name: 'Category Add' })\n  }],\n\n onUnmounted(() => {\n    globals.state.navigation_bar.actions = [];\n  });\n\ncategories.state.all = await categories.actions.read({\n      user: auth.state.user._id,\n      rootOnly: true,\n      limit: 10\n    })\n  onMounted(async () => {\n    \n  });\n\n  const mappedCategories = computed(() => {\n   const recursiveMap = (data) => {\n     return data.map(item => ({\n       // id: item._id, \n      parent: item.parent,\n      _id: item._id,\n      order: item.order,\n      name: item.name, \n      children: item.children ? recursiveMap(item.children) : []\n     }));\n   };\n   \n   return recursiveMap(categories.state.all);\n  });\n\n  function flattenCategoryTree(categories) {\n    let flatCategories = [];\n    \n    function flatten(category) {\n      const { children, ...categoryWithoutChildren } = category;\n      flatCategories.push(categoryWithoutChildren);\n      \n      if (children && Array.isArray(children)) {\n        children.forEach(child => flatten(child));\n      }\n    }\n    \n    categories.forEach(category => flatten(category));\n    return flatCategories;\n  }\n\n  // Обновленная функция для обновления порядка категорий\n  async function updateCategoriesOrder(category) {\n    try {\n      // Получаем все категории и преобразуем их в плоский массив\n      const allCategories = categories.state.all;\n      const flattenedCategories = flattenCategoryTree(allCategories);\n      \n      // Обновляем порядок для всех категорий\n      console.log('flated', flattenedCategories)\n      await categories.actions.update(flattenedCategories);\n      \n      console.log('Categories order updated successfully');\n    } catch (error) {\n      console.error('Error updating categories order:', error);\n      throw error;\n    }\n  }\n\n  async function deleteCategory(category) {\n  // Запрашиваем подтверждение у пользователя\n    const isConfirmed = confirm(`Are you sure you want to delete the category \"${category.name}\"?`);\n    \n    // Если пользователь подтвердил удаление, продолжаем процесс\n    if (isConfirmed) {\n      await categories.actions.deleteCategory(category.url);\n    } else {\n      alert('Category deletion cancelled'); \n    }\n  }\n\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["globals.state","IconPlus","auth.state","categories.state","_withAsyncContext","categories.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmFE,UAAM,QAAQ;AACd,UAAM,SAAS;AAWfA,UAAc,eAAe,UAAU,CAAC;AAAA,MACtC,WAAWC;AAAAA,MACX,OAAO;AAAA,QACL,MAAM;AAAA,MACP;AAAA,MACD,WAAW,MAAMC,QAAW,QAAQA,QAAW,KAAK;AAAA,MACpD,QAAQ,MAAM,MAAM,OAAO,MAAM,OAAO,KAAK,EAAE,MAAM,gBAAgB,QAAQ,EAAE,KAAK,MAAM,OAAO,IAAG,EAAG,CAAA,IAAI,OAAO,KAAK,EAAE,MAAM,gBAAgB;AAAA,IACnJ,CAAG,GAEF,YAAY,MAAM;AACfF,YAAc,eAAe,UAAU;IAC3C,CAAG;AAEHG,YAAiB,OAAY,CAAA,QAAA,SAAA,IAAAC,iBAAA,MAAAC,QAAmB,KAAK;AAAA,MAC/C,MAAMH,QAAW,KAAK;AAAA,MACtB,UAAU;AAAA,MACV,OAAO;AAAA,IACb,CAAK,CAAA;AACH,cAAU,YAAY;AAAA,IAExB,CAAG;AAEwB,aAAS,MAAM;AACvC,YAAM,eAAe,CAAC,SAAS;AAC7B,eAAO,KAAK,IAAI,WAAS;AAAA;AAAA,UAExB,QAAQ,KAAK;AAAA,UACb,KAAK,KAAK;AAAA,UACV,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,UAAU,KAAK,WAAW,aAAa,KAAK,QAAQ,IAAI,CAAE;AAAA,QAC1D,EAAC;AAAA,MACP;AAEG,aAAO,aAAaC,QAAiB,GAAG;AAAA,IAC3C,CAAG;AAED,aAAS,oBAAoB,YAAY;AACvC,UAAI,iBAAiB,CAAA;AAErB,eAAS,QAAQ,UAAU;AACzB,cAAM,EAAE,UAAU,GAAG,wBAAuB,IAAK;AACjD,uBAAe,KAAK,uBAAuB;AAE3C,YAAI,YAAY,MAAM,QAAQ,QAAQ,GAAG;AACvC,mBAAS,QAAQ,WAAS,QAAQ,KAAK,CAAC;AAAA,QACzC;AAAA,MACF;AAED,iBAAW,QAAQ,cAAY,QAAQ,QAAQ,CAAC;AAChD,aAAO;AAAA,IACR;AAGD,mBAAe,sBAAsB,UAAU;AAC7C,UAAI;AAEF,cAAM,gBAAgBA,QAAiB;AACvC,cAAM,sBAAsB,oBAAoB,aAAa;AAG7D,gBAAQ,IAAI,UAAU,mBAAmB;AACzC,cAAME,QAAmB,OAAO,mBAAmB;AAEnD,gBAAQ,IAAI,uCAAuC;AAAA,MACpD,SAAQ,OAAO;AACd,gBAAQ,MAAM,oCAAoC,KAAK;AACvD,cAAM;AAAA,MACP;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/prometheus-framework/src/modules/products/components/pages/CategoryEdit.vue.cjs

@@ -3,35 +3,51 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const vueRouter = require("vue-router");
 const IconDelete = require("../../../icons/navigation/IconDelete.vue.cjs");
-const Button = require("../../../../components/Button/Button.vue2.cjs");
+const Button = require("../../../../components/Button/Button.vue.cjs");
 const Select = require("../../../../components/Select/Select.vue.cjs");
-const Field = require("../../../../components/Field/Field.vue2.cjs");
+const Field = require("../../../../components/Field/Field.vue.cjs");
+const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 const Block = require("../../../../components/Block/Block.vue.cjs");
+const IconCheckmark = require("../../../icons/navigation/IconCheckmark.vue.cjs");
+const globals = require("../../../globals/views/store/globals.cjs");
+const auth = require("../../../auth/views/store/auth.cjs");
 const categories = require("../../store/categories.cjs");
 ;/* empty css                    */
-const _hoisted_1 = { class: "mn-r-auto" };
-const _hoisted_2 = { class: "mn-b-medium w-100 flex-nowrap gap-thin flex" };
-const _hoisted_3 = { class: "flex-v-center flex-nowrap flex" };
-const _hoisted_4 = ["onClick"];
+const _hoisted_1 = { class: "pd-thin bg-white for-transition w-100" };
+const _hoisted_2 = { class: "mn-r-auto" };
+const _hoisted_3 = { class: "mn-b-medium w-100 flex-nowrap gap-thin flex" };
+const _hoisted_4 = { class: "flex-v-center flex-nowrap flex" };
 const _hoisted_5 = ["onClick"];
 const _hoisted_6 = ["onClick"];
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = ["onClick"];
 const _sfc_main = {
   __name: "CategoryEdit",
   setup(__props) {
     const route = vueRouter.useRoute();
     const router = vueRouter.useRouter();
     if (route.params.category) {
-      categories.actions.fetchCategory(route.params.category);
+      categories.actions.read({ url: route.params.category });
     } else {
-      categories.actions.resetCategory();
+      categories.actions.clean();
     }
     vue.computed(() => categories.state.current);
     vue.computed(() => route.name);
+    globals.state.navigation_bar.actions = [{
+      component: IconCheckmark.default,
+      props: {
+        fill: "rgb(var(--main))"
+      },
+      condition: () => auth.state.user && auth.state.user._id,
+      action: () => onSubmit()
+    }], vue.onUnmounted(() => {
+      globals.state.navigation_bar.actions = [];
+    });
     function onSubmit() {
       if (route.params.category) {
-        categories.actions.updateCategory(route.params.category);
+        categories.actions.update(categories.state.current);
       } else {
-        categories.actions.addCategory();
+        categories.actions.create(categories.state.current);
       }
     }
     function redirectTo() {
@@ -43,10 +59,13 @@ const _sfc_main = {
       });
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createVNode(Block.default, { class: "radius-big mn-b-thin flex-nowrap flex-v-center flex" }, {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        !_ctx.MOBILE_APP ? (vue.openBlock(), vue.createBlock(Block.default, {
+          key: 0,
+          class: "radius-big mn-b-thin flex-nowrap flex-v-center flex"
+        }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("h1", _hoisted_1, vue.toDisplayString(vue.unref(route).params.category ? "Edit Category" : "Add Category"), 1),
+            vue.createElementVNode("h1", _hoisted_2, vue.toDisplayString(vue.unref(route).params.category ? "Edit Category" : "Add Category"), 1),
             vue.createVNode(Button.default, {
               submit: onSubmit,
               callback: redirectTo,
@@ -59,19 +78,19 @@ const _sfc_main = {
             })
           ]),
           _: 1
-        }),
+        })) : vue.createCommentVNode("", true),
         vue.createVNode(Block.default, {
           title: "Profile",
           class: "mn-b-thin"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_2, [
+            vue.createElementVNode("div", _hoisted_3, [
               vue.createVNode(Field.default, {
                 field: categories.state.current.order,
                 "onUpdate:field": _cache[0] || (_cache[0] = ($event) => categories.state.current.order = $event),
                 label: "Order",
                 disabled: true,
-                class: "w-25 bg-white radius-small pd-medium"
+                class: "w-40 bg-white radius-small pd-medium"
               }, null, 8, ["field"]),
               vue.createVNode(Field.default, {
                 field: categories.state.current.url,
@@ -79,15 +98,15 @@ const _sfc_main = {
                 label: "URL",
                 placeholder: "Enter category URL",
                 class: "w-100 bg-white radius-small pd-medium"
-              }, null, 8, ["field"]),
-              vue.createVNode(Field.default, {
-                field: categories.state.current.name,
-                "onUpdate:field": _cache[2] || (_cache[2] = ($event) => categories.state.current.name = $event),
-                label: "Name",
-                placeholder: "Enter category name",
-                class: "w-100 bg-white radius-small pd-medium"
               }, null, 8, ["field"])
             ]),
+            vue.createVNode(Field.default, {
+              field: categories.state.current.name,
+              "onUpdate:field": _cache[2] || (_cache[2] = ($event) => categories.state.current.name = $event),
+              label: "Name",
+              placeholder: "Enter category name",
+              class: "w-100 mn-b-small bg-white radius-small pd-medium"
+            }, null, 8, ["field"]),
             vue.createVNode(Select.default, {
               select: categories.state.current.status,
               "onUpdate:select": _cache[3] || (_cache[3] = ($event) => categories.state.current.status = $event),
@@ -101,7 +120,7 @@ const _sfc_main = {
               placeholder: "Display product",
               class: "pos-relative w-100 mn-b-small bg-white radius-small pd-medium"
             }, null, 8, ["select"]),
-            vue.createElementVNode("div", _hoisted_3, [
+            vue.createElementVNode("div", _hoisted_4, [
               _cache[6] || (_cache[6] = vue.createElementVNode("h4", { class: "mn-r-thin t-medium" }, "Localization", -1)),
               vue.createElementVNode("button", {
                 onClick: _cache[4] || (_cache[4] = () => categories.state.current.localization.push({ locale: "", text: "" })),
@@ -130,7 +149,7 @@ const _sfc_main = {
                   class: "radius-small pd-small flex-center flex aspect-1x1 bg-red"
                 }, [
                   vue.createVNode(IconDelete.default, { class: "i-medium" })
-                ], 8, _hoisted_4)
+                ], 8, _hoisted_5)
               ]);
             }), 128))
           ]),
@@ -141,12 +160,43 @@ const _sfc_main = {
           placeholder: "No subcategories added yet",
           actions: [{
             label: "+",
-            function: () => categories.state.current.subcategories.push({ name: "", url: "" })
+            function: () => categories.state.current.children.push({ name: "", url: "" })
           }],
           class: "mn-b-thin"
         }, {
           default: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(categories.state.current.subcategories, (item, index) => {
+            vue.createTextVNode(vue.toDisplayString(categories.state.current.children) + " ", 1),
+            vue.createVNode(Feed.default, {
+              states: {
+                empty: {
+                  title: "No Events Found",
+                  description: "Currently, there are no events available."
+                }
+              },
+              store: {
+                read: (options) => categories.actions.read(options),
+                state: categories.state
+              },
+              options: {
+                user: auth.state.user._id,
+                limit: 10
+              }
+            }, {
+              default: vue.withCtx(({
+                items
+              }) => [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (category, index) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    onClick: () => {
+                      categories.state.current.children.push(category._id);
+                    },
+                    class: "bg-white pd-medium radius-small mn-b-medium"
+                  }, vue.toDisplayString(category.name), 9, _hoisted_6);
+                }), 256))
+              ]),
+              _: 1
+            }, 8, ["store", "options"]),
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(categories.state.current.children, (item, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: "gap-thin mn-b-thin flex-nowrap flex",
                 key: index
@@ -164,11 +214,11 @@ const _sfc_main = {
                   class: "w-100 bg-white radius-small pd-medium"
                 }, null, 8, ["field", "onUpdate:field"]),
                 vue.createElementVNode("div", {
-                  onClick: () => categories.state.current.subcategories.splice(index, 1),
+                  onClick: () => categories.state.current.children.splice(index, 1),
                   class: "radius-small pd-small flex-center flex aspect-1x1 bg-red"
                 }, [
                   vue.createVNode(IconDelete.default, { class: "i-medium" })
-                ], 8, _hoisted_5)
+                ], 8, _hoisted_7)
               ]);
             }), 128))
           ]),
@@ -205,13 +255,13 @@ const _sfc_main = {
                   class: "radius-small pd-small flex-center flex aspect-1x1 bg-red"
                 }, [
                   vue.createVNode(IconDelete.default, { class: "i-medium" })
-                ], 8, _hoisted_6)
+                ], 8, _hoisted_8)
               ]);
             }), 128))
           ]),
           _: 1
         }, 8, ["actions"])
-      ], 64);
+      ]);
     };
   }
 };

package/dist/prometheus-framework/src/modules/products/components/pages/CategoryEdit.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryEdit.vue.cjs","sources":["../../../../../../../src/modules/products/components/pages/CategoryEdit.vue"],"sourcesContent":["<template>\n  <Block class=\"radius-big mn-b-thin flex-nowrap flex-v-center flex\">\n    <h1 class=\"mn-r-auto\">\n      {{route.params.category ? 'Edit Category' : 'Add Category'}}\n    </h1>\n\n    <Button \n      :submit=\"onSubmit\"\n      :callback=\"redirectTo\"\n      class=\"pd-small radius-big bg-main t-black uppercase t-medium\"\n    >\n      Save Category \n    </Button>\n  </Block>\n  \n  <Block \n    title=\"Profile\"\n    class=\"mn-b-thin\"\n  >\n    <div class=\"mn-b-medium w-100 flex-nowrap gap-thin flex\">\n       <Field\n          v-model:field=\"categories.state.current.order\"\n          label=\"Order\"\n          :disabled=\"true\"\n          class=\"w-25 bg-white radius-small pd-medium\"\n        />  \n       <Field\n          v-model:field=\"categories.state.current.url\"\n          label=\"URL\"\n          placeholder=\"Enter category URL\"\n          class=\"w-100 bg-white radius-small pd-medium\"\n        />  \n        <Field\n          v-model:field=\"categories.state.current.name\"\n          label=\"Name\"\n          placeholder=\"Enter category name\"\n          class=\"w-100 bg-white radius-small pd-medium\"\n        />  \n    </div>\n\n    <Select \n      v-model:select=\"categories.state.current.status\"\n      label=\"Status\"\n      :options=\"[\n        'draft', \n        'internal',\n        'published',\n        'removed'\n      ]\"\n      placeholder=\"Display product\"\n      class=\"pos-relative w-100 mn-b-small bg-white radius-small pd-medium\"\n    />\n\n    <div class=\"flex-v-center flex-nowrap flex\">\n      <h4  class=\"mn-r-thin t-medium\">Localization</h4>\n        \n      <button \n        @click=\"() => categories.state.current.localization.push({locale: '', text: ''})\" \n        class=\"i-small pd-thin button-delete button\"\n      >\n        +\n      </button>\n    </div>\n    <div \n      class=\"gap-thin mn-b-thin flex-nowrap flex\" \n      v-for=\"(item, index) in categories.state.current.localization\" \n      :key=\"index\"\n    > \n      <Field\n        v-model:field=\"item.locale\"\n        placeholder=\"Locale\"\n        class=\"w-100 bg-white radius-small pd-medium\"\n      />  \n      <Field\n        v-model:field=\"item.text\"\n        placeholder=\"Text\"\n        class=\"w-100 bg-white radius-small pd-medium\"\n      />\n      <div\n        @click=\"() => categories.state.current.localization.splice(index, 1)\"  \n        class=\"radius-small pd-small flex-center flex aspect-1x1 bg-red\"\n      >\n        <IconDelete \n          class=\"i-medium\"\n        />\n      </div>\n    </div>\n\n    \n  </Block>\n  <!-- Subcategories -->\n  <Block\n    title=\"Subcategories\"\n    placeholder=\"No subcategories added yet\"\n    :actions=\"[{\n      label: '+',\n      function: () => categories.state.current.subcategories.push({name: '', url: ''})\n    }]\"\n    class=\"mn-b-thin\"\n  >\n    <div \n      class=\"gap-thin mn-b-thin flex-nowrap flex\" \n      v-for=\"(item, index) in categories.state.current.subcategories\" \n      :key=\"index\"\n    > \n      <Field\n        v-model:field=\"item.name\"\n        placeholder=\"Subcategory name\"\n        class=\"w-100 bg-white radius-small pd-medium\"\n      />  \n      <Field\n        v-model:field=\"item.url\"\n        placeholder=\"Subcategory\"\n        class=\"w-100 bg-white radius-small pd-medium\"\n      />\n      <div\n        @click=\"() => categories.state.current.subcategories.splice(index, 1)\"  \n        class=\"radius-small pd-small flex-center flex aspect-1x1 bg-red\"\n      >\n        <IconDelete \n          class=\"i-medium\"\n        />\n      </div>\n    </div> \n  </Block>\n   <!-- Filters -->\n  <Block\n    title=\"Filters\"\n    placeholder=\"No filters added yet\"\n    :actions=\"[{\n      label: '+',\n      function: () => categories.state.current.filters.push({name: '', url: ''})\n    }]\"\n  >\n    <div \n      class=\"gap-thin mn-b-thin flex-nowrap flex\" \n      v-for=\"(item, index) in categories.state.current.filters\" \n      :key=\"index\"\n    > \n      <Field\n        v-model:field=\"item.name\"\n        placeholder=\"Filter name\"\n        class=\"w-100 bg-white radius-small pd-medium\"\n      />  \n      <Field\n        v-model:field=\"item.options\"\n        placeholder=\"Filter options divided by ,\"\n        class=\"w-100 bg-white radius-small pd-medium\"\n      />\n      <div\n        @click=\"() => categories.state.current.filters.splice(index, 1)\"  \n        class=\"radius-small pd-small flex-center flex aspect-1x1 bg-red\"\n      >\n        <IconDelete \n          class=\"i-medium\"\n        />\n      </div>\n    </div> \n  </Block>\n \n</template>\n\n<script setup>\n  // Import libs\n  import { computed } from 'vue'\n  import { useRoute,useRouter } from 'vue-router'\n  \n  import IconDelete from '@pf/src/modules/icons/navigation/IconDelete.vue';\n\n  import Button from \"@pf/src/components/Button/Button.vue\";\n  import Select from \"@pf/src/components/Select/Select.vue\";\n  import Field from \"@pf/src/components/Field/Field.vue\";\n\n  import Block from '@pf/src/components/Block/Block.vue';\n\n  // Import the new store structure\n  import * as categories from '@pf/src/modules/products/store/categories';\n\n  const route = useRoute()\n  const router = useRouter()\n\n  // Data prefetching\n  if (route.params.category) {\n    categories.actions.fetchCategory(route.params.category)\n  } else {\n    categories.actions.resetCategory() // Adjusted based on the new store's method to reset the category state\n  }\n\n  // Accessing state\n  const category = computed(() => categories.state.current)\n  const routePath = computed(() => route.name)\n\n  // Functions\n  function onSubmit() {\n    if (route.params.category) {\n      categories.actions.updateCategory(route.params.category)\n    } else {\n      categories.actions.addCategory()\n    }\n  }\n\n  function redirectTo () {\n    router.push({\n      name: 'Categories Organization', \n      params: { \n        _id: route.params._id\n      } \n    })\n  }\n</script>\n\n<style lang=\"scss\">\n  /* Your styles here */\n</style>\n"],"names":["useRoute","useRouter","categories.actions","computed","categories.state"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkLE,UAAM,QAAQA,UAAAA,SAAU;AACxB,UAAM,SAASC,UAAAA,UAAW;AAG1B,QAAI,MAAM,OAAO,UAAU;AACzBC,iBAAAA,QAAmB,cAAc,MAAM,OAAO,QAAQ;AAAA,IAC1D,OAAS;AACLA,iBAAAA,QAAmB,cAAe;AAAA,IACnC;AAGgBC,iBAAS,MAAMC,WAAgB,MAAC,OAAO;AACtCD,iBAAS,MAAM,MAAM,IAAI;AAG3C,aAAS,WAAW;AAClB,UAAI,MAAM,OAAO,UAAU;AACzBD,mBAAAA,QAAmB,eAAe,MAAM,OAAO,QAAQ;AAAA,MAC7D,OAAW;AACLA,mBAAAA,QAAmB,YAAa;AAAA,MACjC;AAAA,IACF;AAED,aAAS,aAAc;AACrB,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,UACN,KAAK,MAAM,OAAO;AAAA,QACnB;AAAA,MACP,CAAK;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CategoryEdit.vue.cjs","sources":["../../../../../../../src/modules/products/components/pages/CategoryEdit.vue"],"sourcesContent":["<template>\n  <div  class=\"pd-thin bg-white for-transition w-100\">\n    <Block v-if=\"!MOBILE_APP\" class=\"radius-big mn-b-thin flex-nowrap flex-v-center flex\">\n      <h1   class=\"mn-r-auto\">\n        {{route.params.category ? 'Edit Category' : 'Add Category'}}\n      </h1>\n\n      <Button \n        :submit=\"onSubmit\"\n        :callback=\"redirectTo\"\n        class=\"pd-small radius-big bg-main t-black uppercase t-medium\"\n      >\n        Save Category \n      </Button>\n    </Block>\n    \n    <Block \n      title=\"Profile\"\n      class=\"mn-b-thin\"\n    >\n      <div class=\"mn-b-medium w-100 flex-nowrap gap-thin flex\">\n         <Field\n            v-model:field=\"categories.state.current.order\"\n            label=\"Order\"\n            :disabled=\"true\"\n            class=\"w-40 bg-white radius-small pd-medium\"\n          />  \n         <Field\n            v-model:field=\"categories.state.current.url\"\n            label=\"URL\"\n            placeholder=\"Enter category URL\"\n            class=\"w-100 bg-white radius-small pd-medium\"\n          />  \n         \n      </div>\n       <Field\n            v-model:field=\"categories.state.current.name\"\n            label=\"Name\"\n            placeholder=\"Enter category name\"\n            class=\"w-100 mn-b-small bg-white radius-small pd-medium\"\n          />  \n\n      <Select \n        v-model:select=\"categories.state.current.status\"\n        label=\"Status\"\n        :options=\"[\n          'draft', \n          'internal',\n          'published',\n          'removed'\n        ]\"\n        placeholder=\"Display product\"\n        class=\"pos-relative w-100 mn-b-small bg-white radius-small pd-medium\"\n      />\n\n      <div class=\"flex-v-center flex-nowrap flex\">\n        <h4  class=\"mn-r-thin t-medium\">Localization</h4>\n          \n        <button \n          @click=\"() => categories.state.current.localization.push({locale: '', text: ''})\" \n          class=\"i-small pd-thin button-delete button\"\n        >\n          +\n        </button>\n      </div>\n      <div \n        class=\"gap-thin mn-b-thin flex-nowrap flex\" \n        v-for=\"(item, index) in categories.state.current.localization\" \n        :key=\"index\"\n      > \n        <Field\n          v-model:field=\"item.locale\"\n          placeholder=\"Locale\"\n          class=\"w-100 bg-white radius-small pd-medium\"\n        />  \n        <Field\n          v-model:field=\"item.text\"\n          placeholder=\"Text\"\n          class=\"w-100 bg-white radius-small pd-medium\"\n        />\n        <div\n          @click=\"() => categories.state.current.localization.splice(index, 1)\"  \n          class=\"radius-small pd-small flex-center flex aspect-1x1 bg-red\"\n        >\n          <IconDelete \n            class=\"i-medium\"\n          />\n        </div>\n      </div>\n\n      \n    </Block>\n    <!-- Subcategories -->\n    <Block\n      title=\"Subcategories\"\n      placeholder=\"No subcategories added yet\"\n      :actions=\"[{\n        label: '+',\n        function: () => categories.state.current.children.push({name: '', url: ''})\n      }]\"\n      class=\"mn-b-thin\"\n    >\n\n      {{categories.state.current.children}}\n      <Feed\n        :states=\"{\n          empty: {\n            title: 'No Events Found',\n            description: 'Currently, there are no events available.'\n          }\n        }\"\n        :store=\"{\n          read: (options) => categories.actions.read(options),\n          state: categories.state\n        }\"\n        :options=\"{\n            user: auth.state.user._id,\n            limit: 10\n        }\"\n        v-slot=\"{ \n          items \n        }\"\n      >\n        <div \n          v-for=\"(category,index) in items\"\n          @click=\"() => { categories.state.current.children.push(category._id) }\"\n          class=\"bg-white pd-medium radius-small mn-b-medium\"\n        >\n          {{category.name}}\n        </div>\n        \n      </Feed>\n   \n      <div \n        class=\"gap-thin mn-b-thin flex-nowrap flex\" \n        v-for=\"(item, index) in categories.state.current.children\" \n        :key=\"index\"\n      > \n        <Field\n          v-model:field=\"item.name\"\n          placeholder=\"Subcategory name\"\n          class=\"w-100 bg-white radius-small pd-medium\"\n        />  \n        <Field\n          v-model:field=\"item.url\"\n          placeholder=\"Subcategory\"\n          class=\"w-100 bg-white radius-small pd-medium\"\n        />\n        <div\n          @click=\"() => categories.state.current.children.splice(index, 1)\"  \n          class=\"radius-small pd-small flex-center flex aspect-1x1 bg-red\"\n        >\n          <IconDelete \n            class=\"i-medium\"\n          />\n        </div>\n      </div> \n    </Block>\n     <!-- Filters -->\n    <Block\n      title=\"Filters\"\n      placeholder=\"No filters added yet\"\n      :actions=\"[{\n        label: '+',\n        function: () => categories.state.current.filters.push({name: '', url: ''})\n      }]\"\n    >\n      <div \n        class=\"gap-thin mn-b-thin flex-nowrap flex\" \n        v-for=\"(item, index) in categories.state.current.filters\" \n        :key=\"index\"\n      > \n        <Field\n          v-model:field=\"item.name\"\n          placeholder=\"Filter name\"\n          class=\"w-100 bg-white radius-small pd-medium\"\n        />  \n        <Field\n          v-model:field=\"item.options\"\n          placeholder=\"Filter options divided by ,\"\n          class=\"w-100 bg-white radius-small pd-medium\"\n        />\n        <div\n          @click=\"() => categories.state.current.filters.splice(index, 1)\"  \n          class=\"radius-small pd-small flex-center flex aspect-1x1 bg-red\"\n        >\n          <IconDelete \n            class=\"i-medium\"\n          />\n        </div>\n      </div> \n    </Block>\n  </div>\n \n</template>\n\n<script setup>\n  // Import libs\n  import { computed, onUnmounted } from 'vue'\n  import { useRoute,useRouter } from 'vue-router'\n  \n  import IconDelete from '@pf/src/modules/icons/navigation/IconDelete.vue';\n\n  import Button from \"@pf/src/components/Button/Button.vue\";\n  import Select from \"@pf/src/components/Select/Select.vue\";\n  import Field from \"@pf/src/components/Field/Field.vue\";\n  import Feed from '@pf/src/components/Feed/Feed.vue'\n\n  import Block from '@pf/src/components/Block/Block.vue';\n\n  import IconCheckmark from '@pf/src/modules/icons/navigation/IconCheckmark.vue'\n\n  // Import the new store structure\n  import * as globals from '@pf/src/modules/globals/views/store/globals';\n  import * as auth from '@pf/src/modules/auth/views/store/auth'; \n  import * as categories from '@pf/src/modules/products/store/categories';\n\n  const route = useRoute()\n  const router = useRouter()\n\n  // Data prefetching\n  if (route.params.category) {\n    categories.actions.read({url: route.params.category})\n  } else {\n    categories.actions.clean() // Adjusted based on the new store's method to reset the category state\n  }\n\n  // Accessing state\n  const category = computed(() => categories.state.current)\n  const routePath = computed(() => route.name)\n\n  // Navigation Bar\n  globals.state.navigation_bar.actions = [{\n    component: IconCheckmark,\n    props: {\n      fill: \"rgb(var(--main))\" \n    },\n    condition: () => auth.state.user && auth.state.user._id,\n    action: () => onSubmit()\n  }],\n\n onUnmounted(() => {\n    globals.state.navigation_bar.actions = [];\n  });\n\n\n\n  // Functions\n  function onSubmit() {\n    if (route.params.category) {\n      categories.actions.update(categories.state.current)\n    } else {\n      categories.actions.create(categories.state.current)\n    }\n  }\n\n  function redirectTo () {\n    router.push({\n      name: 'Categories Organization', \n      params: { \n        _id: route.params._id\n      } \n    })\n  }\n</script>\n\n<style lang=\"scss\">\n  /* Your styles here */\n</style>\n"],"names":["useRoute","useRouter","categories.actions","computed","categories.state","globals.state","IconCheckmark","auth.state","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyNE,UAAM,QAAQA,UAAAA,SAAU;AACxB,UAAM,SAASC,UAAAA,UAAW;AAG1B,QAAI,MAAM,OAAO,UAAU;AACzBC,iBAAkB,QAAC,KAAK,EAAC,KAAK,MAAM,OAAO,SAAQ,CAAC;AAAA,IACxD,OAAS;AACLA,iBAAAA,QAAmB,MAAO;AAAA,IAC3B;AAGgBC,iBAAS,MAAMC,WAAgB,MAAC,OAAO;AACtCD,iBAAS,MAAM,MAAM,IAAI;AAG3CE,kBAAc,eAAe,UAAU,CAAC;AAAA,MACtC,WAAWC,cAAa;AAAA,MACxB,OAAO;AAAA,QACL,MAAM;AAAA,MACP;AAAA,MACD,WAAW,MAAMC,KAAU,MAAC,QAAQA,KAAU,MAAC,KAAK;AAAA,MACpD,QAAQ,MAAM,SAAU;AAAA,IAC5B,CAAG,GAEFC,IAAAA,YAAY,MAAM;AACfH,oBAAc,eAAe,UAAU;IAC3C,CAAG;AAKD,aAAS,WAAW;AAClB,UAAI,MAAM,OAAO,UAAU;AACzBH,2BAAmB,OAAOE,WAAgB,MAAC,OAAO;AAAA,MACxD,OAAW;AACLF,2BAAmB,OAAOE,WAAgB,MAAC,OAAO;AAAA,MACnD;AAAA,IACF;AAED,aAAS,aAAc;AACrB,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,UACN,KAAK,MAAM,OAAO;AAAA,QACnB;AAAA,MACP,CAAK;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}