Doroudi/issue25

src/components.d.ts

@@ -37,6 +37,7 @@ declare module 'vue' {
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
     NSelect: typeof import('naive-ui')['NSelect']
+    NTreeSelect: typeof import('naive-ui')['NTreeSelect']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./components/Sidebar.vue')['default']

src/components/Category/CategoryManagement.vue

@@ -60,14 +60,14 @@
   return () => h(NIcon, null, { default: () => h(icon) })
 }
 
 function edit(row: RowData) {
 
 }
 function deleteItem(row: RowData) {
 
 }
 function rowKey(row: RowData) {
-  return row.index
+  return row.id
 }
 function getItems() {
   store.getCategories(options.value)

src/components/Category/CreateCategory.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import type { FormInst, FormRules } from 'naive-ui/es/form'
-import type { SelectMixedOption } from 'naive-ui/es/select/src/interface'
+import type { TreeSelectOption } from 'naive-ui/es/tree-select/src/interface'
 import { storeToRefs } from 'pinia'
 import type { Category, CategoryCreateModel } from '~/models/Category'
 
@@ -18,13 +18,17 @@ async function create() {
     }
   })
 }
-const categoriesOptions = categories.value.map((x: Category) => {
+
+const categoriesOptions = categories.value.map(mapCategoryToOptions)
+
+function mapCategoryToOptions(item: Category): TreeSelectOption {
   return {
-    value: x.id,
-    label: x.name,
+    key: item.id,
+    label: item.name,
+    children: item.children?.map(mapCategoryToOptions),
   }
-})
-const parents: SelectMixedOption[] = [{ value: 0, label: 'Root' }, ...categoriesOptions]
+}
+const parents: TreeSelectOption[] = [{ key: 0, label: 'Root' }, ...categoriesOptions]
 const nameInput = ref()
 onMounted(() => {
   nameInput.value?.focus()
@@ -69,7 +73,7 @@ const rules: FormRules = {
     </div>
     <div class="form-control">
       <n-form-item class="mb-5" :label="t('categories.create.parent')">
-        <n-select id="parentId" v-model:value="categoryItem.parentId" :options="parents" :placeholder="t('categories.create.parent')" />
+        <n-tree-select v-model="categoryItem.parentId" key-field="key" :options="parents" :placeholder="t('categories.create.parent')" default-value="Root" />
       </n-form-item>
     </div>
     <n-button attr-type="submit" size="large" :block="true" type="primary" :loading="isLoading">

src/mocks/handlers/category.handler.ts

@@ -20,7 +20,7 @@ const handlers = [
       id: faker.datatype.number({ max: 2000 }),
       name: newItem.name,
       productsCount: 0,
-      subItems: [],
+      children: [],
     }
     categories.push(category)
     return res(
@@ -37,6 +37,25 @@ function createFakeCategory(): Category {
     id: faker.datatype.number(),
     name: faker.commerce.productAdjective(),
     productsCount: faker.datatype.number({ min: 1, max: 130 }),
+    children: [
+      {
+        id: faker.datatype.number(),
+        name: faker.commerce.productAdjective(),
+        productsCount: faker.datatype.number({ min: 1, max: 130 }),
+      },
+      {
+        id: faker.datatype.number(),
+        name: faker.commerce.productAdjective(),
+        productsCount: faker.datatype.number({ min: 1, max: 130 }),
+        children: [
+          {
+            id: faker.datatype.number(),
+            name: faker.commerce.productAdjective(),
+            productsCount: faker.datatype.number({ min: 1, max: 130 }),
+          },
+        ],
+      },
+    ],
   }
 }
 

src/models/Category.ts

@@ -2,7 +2,7 @@ export interface Category {
   id: number
   name: string
   productsCount: number
-  subItems?: Category[]
+  children?: Category[]
 }
 
 export interface CategoryCreateModel {

src/store/category.store.ts

@@ -32,9 +32,8 @@ export const useCategoryStore = defineStore('Category', () => {
   async function createCategory(categoryItem: CategoryCreateModel) {
     isLoading.value = true
     try {
-      const response = await categoryService.createCategory(categoryItem)
+      await categoryService.createCategory(categoryItem)
       getCategories(options.value)
-      // categories.value.push(response)
     }
     finally {
       isLoading.value = false