@ozdao/prometheus-framework 0.2.308 → 0.2.310

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

@@ -1,13 +1,15 @@
 <template>
-  <div class="pd-thin">
-    <Block class="radius-big mn-b-thin flex-nowrap flex-v-center flex">
-      <h1 class="mn-r-auto">
+  <div class="pd-thin bg-white">
+    <Block v-if="!MOBILE_APP" 
+      class="radius-big mn-b-thin flex-nowrap flex-v-center flex"
+    >
+      <h2 class="mn-r-auto">
         Product Categories
-      </h1>
+      </h2>
 
       <router-link 
         :to="{
-          name: 'CategoryAdd', 
+          name: 'Category Add', 
           params: { 
             _id: $route.params._id
           } 
@@ -24,30 +26,59 @@
         Change Order
       </Button>
     </Block>
-
-    <VueDraggableNext 
-      class="dragArea list-group w-full" 
-      :list="categories.state.all" 
-      item-key="order" 
-      @end="updateOrder"
-    >
-      <CardCategory 
-        v-for="(category, index) in categories.state.all"
-        :key="category.id"
-        :category="category" 
-        @delete="deleteCategory"
-        class="pd-medium bg-light radius-medium mn-b-thin"
+    <!-- <Feed
+      :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,
+          rootOnly: true,
+          limit: 10
+      }"
+      v-slot="{ 
+        items 
+      }"
+    > -->
+      <CategoryList 
+        v-if="categories.state.all" 
+        :items="categories.state.all" 
+        :state="categories.state.all" 
+        @update="updateCategoriesOrder" 
       />
-    </VueDraggableNext>
+
+     <!--  <VueDraggableNext 
+        class="dragArea list-group w-full" 
+        :list="items" 
+        item-key="order" 
+        @end="updateOrder"
+      >
+        <CardCategory 
+          v-for="(category,index) in items"
+          :key="category.id"
+          :category="category" 
+          @delete="deleteCategory"
+          class="pd-medium bg-light radius-medium mn-b-thin"
+        />
+      </VueDraggableNext> -->
+    <!-- </Feed> -->
   </div>
 </template>
 
 <script setup>
-  import { onMounted } from 'vue';
+  import { onMounted, onUnmounted, computed } from 'vue';
   import { VueDraggableNext } from 'vue-draggable-next';
 
   import { useRoute, useRouter } from 'vue-router';
 
+  import * as globals from '@pf/src/modules/globals/views/store/globals';
+  import * as auth from '@pf/src/modules/auth/views/store/auth'; 
   import * as categories from '@pf/src/modules/products/store/categories'; 
 
   const route = useRoute();
@@ -55,21 +86,82 @@
 
   import Button from "@pf/src/components/Button/Button.vue";
   import Block from '@pf/src/components/Block/Block.vue';
+  import Feed from '@pf/src/components/Feed/Feed.vue'
+
   import CardCategory from '@pf/src/modules/products/components/blocks/CardCategory.vue';
+  import CategoryList from '@pf/src/modules/products/components/sections/CategoriesTree.vue';
+
+  import IconPlus from '@pf/src/modules/icons/navigation/IconPlus.vue'
 
+  globals.state.navigation_bar.actions = [{
+    component: IconPlus,
+    props: {
+      fill: "rgb(var(--main))" 
+    },
+    condition: () => auth.state.user && auth.state.user._id,
+    action: () => route.params._id ? router.push({ name: 'Category Add', params: { _id: route.params._id} }) : router.push({ name: 'Category Add' })
+  }],
+
+ onUnmounted(() => {
+    globals.state.navigation_bar.actions = [];
+  });
+
+categories.state.all = await categories.actions.read({
+      user: auth.state.user._id,
+      rootOnly: true,
+      limit: 10
+    })
   onMounted(async () => {
-    await categories.actions.fetchCategories();
+    
+  });
+
+  const mappedCategories = 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(categories.state.all);
   });
 
-  function updateOrder() {
-    categories.state.all.forEach((category, index) => {
-      category.order = index;
-    });
-    updateCategoriesOrder();
+  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 updateCategoriesOrder() {
-    await categories.actions.updateCategories(categories.state.all);
+  // Обновленная функция для обновления порядка категорий
+  async function updateCategoriesOrder(category) {
+    try {
+      // Получаем все категории и преобразуем их в плоский массив
+      const allCategories = categories.state.all;
+      const flattenedCategories = flattenCategoryTree(allCategories);
+      
+      // Обновляем порядок для всех категорий
+      console.log('flated', flattenedCategories)
+      await categories.actions.update(flattenedCategories);
+      
+      console.log('Categories order updated successfully');
+    } catch (error) {
+      console.error('Error updating categories order:', error);
+      throw error;
+    }
   }
 
   async function deleteCategory(category) {

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

@@ -1,168 +1,202 @@
 <template>
-  <Block class="radius-big mn-b-thin flex-nowrap flex-v-center flex">
-    <h1 class="mn-r-auto">
-      {{route.params.category ? 'Edit Category' : 'Add Category'}}
-    </h1>
-
-    <Button 
-      :submit="onSubmit"
-      :callback="redirectTo"
-      class="pd-small radius-big bg-main t-black uppercase t-medium"
+  <div  class="pd-thin bg-white for-transition w-100">
+    <Block v-if="!MOBILE_APP" class="radius-big mn-b-thin flex-nowrap flex-v-center flex">
+      <h1   class="mn-r-auto">
+        {{route.params.category ? 'Edit Category' : 'Add Category'}}
+      </h1>
+
+      <Button 
+        :submit="onSubmit"
+        :callback="redirectTo"
+        class="pd-small radius-big bg-main t-black uppercase t-medium"
+      >
+        Save Category 
+      </Button>
+    </Block>
+    
+    <Block 
+      title="Profile"
+      class="mn-b-thin"
     >
-      Save Category 
-    </Button>
-  </Block>
-  
-  <Block 
-    title="Profile"
-    class="mn-b-thin"
-  >
-    <div class="mn-b-medium w-100 flex-nowrap gap-thin flex">
-       <Field
-          v-model:field="categories.state.current.order"
-          label="Order"
-          :disabled="true"
-          class="w-25 bg-white radius-small pd-medium"
-        />  
+      <div class="mn-b-medium w-100 flex-nowrap gap-thin flex">
+         <Field
+            v-model:field="categories.state.current.order"
+            label="Order"
+            :disabled="true"
+            class="w-40 bg-white radius-small pd-medium"
+          />  
+         <Field
+            v-model:field="categories.state.current.url"
+            label="URL"
+            placeholder="Enter category URL"
+            class="w-100 bg-white radius-small pd-medium"
+          />  
+         
+      </div>
        <Field
-          v-model:field="categories.state.current.url"
-          label="URL"
-          placeholder="Enter category URL"
+            v-model:field="categories.state.current.name"
+            label="Name"
+            placeholder="Enter category name"
+            class="w-100 mn-b-small bg-white radius-small pd-medium"
+          />  
+
+      <Select 
+        v-model:select="categories.state.current.status"
+        label="Status"
+        :options="[
+          'draft', 
+          'internal',
+          'published',
+          'removed'
+        ]"
+        placeholder="Display product"
+        class="pos-relative w-100 mn-b-small bg-white radius-small pd-medium"
+      />
+
+      <div class="flex-v-center flex-nowrap flex">
+        <h4  class="mn-r-thin t-medium">Localization</h4>
+          
+        <button 
+          @click="() => categories.state.current.localization.push({locale: '', text: ''})" 
+          class="i-small pd-thin button-delete button"
+        >
+          +
+        </button>
+      </div>
+      <div 
+        class="gap-thin mn-b-thin flex-nowrap flex" 
+        v-for="(item, index) in categories.state.current.localization" 
+        :key="index"
+      > 
+        <Field
+          v-model:field="item.locale"
+          placeholder="Locale"
           class="w-100 bg-white radius-small pd-medium"
         />  
         <Field
-          v-model:field="categories.state.current.name"
-          label="Name"
-          placeholder="Enter category name"
+          v-model:field="item.text"
+          placeholder="Text"
           class="w-100 bg-white radius-small pd-medium"
-        />  
-    </div>
-
-    <Select 
-      v-model:select="categories.state.current.status"
-      label="Status"
-      :options="[
-        'draft', 
-        'internal',
-        'published',
-        'removed'
-      ]"
-      placeholder="Display product"
-      class="pos-relative w-100 mn-b-small bg-white radius-small pd-medium"
-    />
-
-    <div class="flex-v-center flex-nowrap flex">
-      <h4  class="mn-r-thin t-medium">Localization</h4>
-        
-      <button 
-        @click="() => categories.state.current.localization.push({locale: '', text: ''})" 
-        class="i-small pd-thin button-delete button"
-      >
-        +
-      </button>
-    </div>
-    <div 
-      class="gap-thin mn-b-thin flex-nowrap flex" 
-      v-for="(item, index) in categories.state.current.localization" 
-      :key="index"
-    > 
-      <Field
-        v-model:field="item.locale"
-        placeholder="Locale"
-        class="w-100 bg-white radius-small pd-medium"
-      />  
-      <Field
-        v-model:field="item.text"
-        placeholder="Text"
-        class="w-100 bg-white radius-small pd-medium"
-      />
-      <div
-        @click="() => categories.state.current.localization.splice(index, 1)"  
-        class="radius-small pd-small flex-center flex aspect-1x1 bg-red"
-      >
-        <IconDelete 
-          class="i-medium"
         />
+        <div
+          @click="() => categories.state.current.localization.splice(index, 1)"  
+          class="radius-small pd-small flex-center flex aspect-1x1 bg-red"
+        >
+          <IconDelete 
+            class="i-medium"
+          />
+        </div>
       </div>
-    </div>
 
-    
-  </Block>
-  <!-- Subcategories -->
-  <Block
-    title="Subcategories"
-    placeholder="No subcategories added yet"
-    :actions="[{
-      label: '+',
-      function: () => categories.state.current.subcategories.push({name: '', url: ''})
-    }]"
-    class="mn-b-thin"
-  >
-    <div 
-      class="gap-thin mn-b-thin flex-nowrap flex" 
-      v-for="(item, index) in categories.state.current.subcategories" 
-      :key="index"
-    > 
-      <Field
-        v-model:field="item.name"
-        placeholder="Subcategory name"
-        class="w-100 bg-white radius-small pd-medium"
-      />  
-      <Field
-        v-model:field="item.url"
-        placeholder="Subcategory"
-        class="w-100 bg-white radius-small pd-medium"
-      />
-      <div
-        @click="() => categories.state.current.subcategories.splice(index, 1)"  
-        class="radius-small pd-small flex-center flex aspect-1x1 bg-red"
+      
+    </Block>
+    <!-- Subcategories -->
+    <Block
+      title="Subcategories"
+      placeholder="No subcategories added yet"
+      :actions="[{
+        label: '+',
+        function: () => categories.state.current.children.push({name: '', url: ''})
+      }]"
+      class="mn-b-thin"
+    >
+
+      {{categories.state.current.children}}
+      <Feed
+        :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
+        }"
+        v-slot="{ 
+          items 
+        }"
       >
-        <IconDelete 
-          class="i-medium"
+        <div 
+          v-for="(category,index) in items"
+          @click="() => { categories.state.current.children.push(category._id) }"
+          class="bg-white pd-medium radius-small mn-b-medium"
+        >
+          {{category.name}}
+        </div>
+        
+      </Feed>
+   
+      <div 
+        class="gap-thin mn-b-thin flex-nowrap flex" 
+        v-for="(item, index) in categories.state.current.children" 
+        :key="index"
+      > 
+        <Field
+          v-model:field="item.name"
+          placeholder="Subcategory name"
+          class="w-100 bg-white radius-small pd-medium"
+        />  
+        <Field
+          v-model:field="item.url"
+          placeholder="Subcategory"
+          class="w-100 bg-white radius-small pd-medium"
         />
-      </div>
-    </div> 
-  </Block>
-   <!-- Filters -->
-  <Block
-    title="Filters"
-    placeholder="No filters added yet"
-    :actions="[{
-      label: '+',
-      function: () => categories.state.current.filters.push({name: '', url: ''})
-    }]"
-  >
-    <div 
-      class="gap-thin mn-b-thin flex-nowrap flex" 
-      v-for="(item, index) in categories.state.current.filters" 
-      :key="index"
-    > 
-      <Field
-        v-model:field="item.name"
-        placeholder="Filter name"
-        class="w-100 bg-white radius-small pd-medium"
-      />  
-      <Field
-        v-model:field="item.options"
-        placeholder="Filter options divided by ,"
-        class="w-100 bg-white radius-small pd-medium"
-      />
-      <div
-        @click="() => categories.state.current.filters.splice(index, 1)"  
-        class="radius-small pd-small flex-center flex aspect-1x1 bg-red"
-      >
-        <IconDelete 
-          class="i-medium"
+        <div
+          @click="() => categories.state.current.children.splice(index, 1)"  
+          class="radius-small pd-small flex-center flex aspect-1x1 bg-red"
+        >
+          <IconDelete 
+            class="i-medium"
+          />
+        </div>
+      </div> 
+    </Block>
+     <!-- Filters -->
+    <Block
+      title="Filters"
+      placeholder="No filters added yet"
+      :actions="[{
+        label: '+',
+        function: () => categories.state.current.filters.push({name: '', url: ''})
+      }]"
+    >
+      <div 
+        class="gap-thin mn-b-thin flex-nowrap flex" 
+        v-for="(item, index) in categories.state.current.filters" 
+        :key="index"
+      > 
+        <Field
+          v-model:field="item.name"
+          placeholder="Filter name"
+          class="w-100 bg-white radius-small pd-medium"
+        />  
+        <Field
+          v-model:field="item.options"
+          placeholder="Filter options divided by ,"
+          class="w-100 bg-white radius-small pd-medium"
         />
-      </div>
-    </div> 
-  </Block>
+        <div
+          @click="() => categories.state.current.filters.splice(index, 1)"  
+          class="radius-small pd-small flex-center flex aspect-1x1 bg-red"
+        >
+          <IconDelete 
+            class="i-medium"
+          />
+        </div>
+      </div> 
+    </Block>
+  </div>
  
 </template>
 
 <script setup>
   // Import libs
-  import { computed } from 'vue'
+  import { computed, onUnmounted } from 'vue'
   import { useRoute,useRouter } from 'vue-router'
   
   import IconDelete from '@pf/src/modules/icons/navigation/IconDelete.vue';
@@ -170,10 +204,15 @@
   import Button from "@pf/src/components/Button/Button.vue";
   import Select from "@pf/src/components/Select/Select.vue";
   import Field from "@pf/src/components/Field/Field.vue";
+  import Feed from '@pf/src/components/Feed/Feed.vue'
 
   import Block from '@pf/src/components/Block/Block.vue';
 
+  import IconCheckmark from '@pf/src/modules/icons/navigation/IconCheckmark.vue'
+
   // Import the new store structure
+  import * as globals from '@pf/src/modules/globals/views/store/globals';
+  import * as auth from '@pf/src/modules/auth/views/store/auth'; 
   import * as categories from '@pf/src/modules/products/store/categories';
 
   const route = useRoute()
@@ -181,21 +220,37 @@
 
   // Data prefetching
   if (route.params.category) {
-    categories.actions.fetchCategory(route.params.category)
+    categories.actions.read({url: route.params.category})
   } else {
-    categories.actions.resetCategory() // Adjusted based on the new store's method to reset the category state
+    categories.actions.clean() // Adjusted based on the new store's method to reset the category state
   }
 
   // Accessing state
   const category = computed(() => categories.state.current)
   const routePath = computed(() => route.name)
 
+  // Navigation Bar
+  globals.state.navigation_bar.actions = [{
+    component: IconCheckmark,
+    props: {
+      fill: "rgb(var(--main))" 
+    },
+    condition: () => auth.state.user && auth.state.user._id,
+    action: () => onSubmit()
+  }],
+
+ onUnmounted(() => {
+    globals.state.navigation_bar.actions = [];
+  });
+
+
+
   // Functions
   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)
     }
   }