From d819a62c0c0fa811cb5f148217305bd2b6d2742c Mon Sep 17 00:00:00 2001
From: Saeid Doroudi <doroudi@outlook.com>
Date: Fri, 17 Nov 2023 17:12:50 +0330
Subject: [PATCH] Implement Add Category Fixes #17

---
 locales/en.yml                                |   6 +-
 src/components.d.ts                           |   4 +
 .../Category/CategoryManagement.vue           | 134 ++++++++++++++++++
 src/components/Category/CreateCategory.vue    |  74 +++++++---
 src/mocks/handlers/category.handler.ts        |  20 ++-
 src/models/Category.ts                        |   5 +
 src/pages/Categories/index.vue                | 131 +----------------
 src/services/category.service.ts              |   4 +-
 src/store/category.store.ts                   |   7 +-
 src/styles/main.scss                          |   1 -
 10 files changed, 234 insertions(+), 152 deletions(-)
 create mode 100644 src/components/Category/CategoryManagement.vue

diff --git a/locales/en.yml b/locales/en.yml
index 865cd3c..1679e49 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -58,11 +58,15 @@ forgot:
 dashboard:
   summary: Summary
   transactions: Transactions
-category:
+categories:
   title: Categories
+  createButton: Create
   create:
     buttonTitle: Create
     title: Create New Category
     categoryName: Name
     parent: Parent
+  validations:
+    nameRequired: Name is required
+    parentRequired: Parent Not Selected
 not-found: Not found
diff --git a/src/components.d.ts b/src/components.d.ts
index 6486a9f..8c21fc2 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     BarChart: typeof import('./components/BarChart.vue')['default']
     Card: typeof import('./components/Card.vue')['default']
+    CategoryManagement: typeof import('./components/Category/CategoryManagement.vue')['default']
     CategoryStatics: typeof import('./components/Category/CategoryStatics.vue')['default']
     CreateCategory: typeof import('./components/Category/CreateCategory.vue')['default']
     DashboardCard: typeof import('./components/DashboardCard.vue')['default']
@@ -23,6 +24,8 @@ declare module 'vue' {
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
@@ -33,6 +36,7 @@ declare module 'vue' {
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
+    NSelect: typeof import('naive-ui')['NSelect']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./components/Sidebar.vue')['default']
diff --git a/src/components/Category/CategoryManagement.vue b/src/components/Category/CategoryManagement.vue
new file mode 100644
index 0000000..eda90c9
--- /dev/null
+++ b/src/components/Category/CategoryManagement.vue
@@ -0,0 +1,134 @@
+<script setup lang='ts'>
+import { type DataTableColumns, NButton, NIcon } from 'naive-ui/es/components'
+import type { RowData } from 'naive-ui/es/data-table/src/interface'
+import {
+  DismissCircle24Regular as DeleteIcon,
+  Edit32Regular as EditIcon,
+  AddCircle20Regular as PlusIcon,
+} from '@vicons/fluent'
+import { storeToRefs } from 'pinia'
+
+const { t } = useI18n()
+const collapsed = ref(false)
+const store = useCategoryStore()
+const { categories, isLoading } = storeToRefs(store)
+onMounted(getItems)
+const columns: DataTableColumns<RowData> = [
+  {
+    title: 'Name',
+    key: 'name',
+  },
+  {
+    title: 'Products Count',
+    key: 'productsCount',
+  },
+  {
+    title: 'Actions',
+    key: 'actions',
+    width: 200,
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            renderIcon: renderIcon(EditIcon),
+            ghost: true,
+            class: 'mr-2',
+            onClick: () => edit(row),
+          },
+          { default: () => 'Edit' },
+        ),
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            ghost: true,
+            renderIcon: renderIcon(DeleteIcon),
+            onClick: () => deleteItem(row),
+          },
+          { default: () => 'Delete' },
+        ),
+      ]
+    },
+  },
+]
+const { options } = storeToRefs(store)
+const showAddDialog = ref(false)
+function renderIcon(icon: any) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+function edit(row: RowData) {
+
+}
+function deleteItem(row: RowData) {
+
+}
+function rowKey(row: RowData) {
+  return row.index
+}
+function getItems() {
+  store.getCategories(options.value)
+}
+
+function handlePageChange(page: number) {
+  options.value.page = page
+  getItems()
+}
+
+function handleSorterChange() {
+  getItems()
+}
+
+function handleFiltersChange() {
+  getItems()
+}
+
+function createCategory() {
+  showAddDialog.value = true
+}
+</script>
+
+<template>
+  <n-layout has-sider>
+    <n-layout-content>
+      <div>
+        <div class="flex items-center mb-5">
+          <h1 class="page-title mx-2">
+            {{ t('categories.title') }}
+          </h1>
+          <NButton type="primary" quaternary round @click="createCategory">
+            <template #icon>
+              <NIcon>
+                <PlusIcon />
+              </NIcon>
+            </template>
+            {{ t('categories.createButton') }}
+          </NButton>
+        </div>
+        <n-data-table
+          remote :columns="columns" :data="categories" :loading="isLoading" :pagination="options"
+          :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
+          @update:page="handlePageChange"
+        />
+      </div>
+    </n-layout-content>
+    <n-layout-sider
+      bordered collapse-mode="width" :collapsed-width="0" :width="300" :collapsed="collapsed" show-trigger
+      @collapse="collapsed = true" @expand="collapsed = false"
+    >
+      <CategoryStatics />
+    </n-layout-sider>
+
+    <n-drawer v-model:show="showAddDialog" :width="502" placement="right">
+      <n-drawer-content closable title="Create Category">
+        <CreateCategory @close="showAddDialog = false" />
+      </n-drawer-content>
+    </n-drawer>
+  </n-layout>
+</template>
+
+<style scoped lang='scss'>
+</style>
diff --git a/src/components/Category/CreateCategory.vue b/src/components/Category/CreateCategory.vue
index 393d39e..b7b2a9e 100644
--- a/src/components/Category/CreateCategory.vue
+++ b/src/components/Category/CreateCategory.vue
@@ -1,37 +1,75 @@
 <script setup lang='ts'>
+import type { FormInst, FormRules } from 'naive-ui/es/form'
+import type { SelectMixedOption } from 'naive-ui/es/select/src/interface'
 import { storeToRefs } from 'pinia'
-import type { Category } from '~/models/Category'
+import type { Category, CategoryCreateModel } from '~/models/Category'
 
 const emits = defineEmits(['close'])
 const categoryStore = useCategoryStore()
-const { isLoading } = storeToRefs(categoryStore)
-const categoryItem = ref<Category>({} as Category)
+const { isLoading, categories } = storeToRefs(categoryStore)
+const categoryItem = ref<CategoryCreateModel>({ name: '', parentId: 0 })
 const { t } = useI18n()
+const formRef = ref<FormInst | null>(null)
 async function create() {
   // TODO: validate
-  await categoryStore.createCategory(categoryItem.value)
-  emits('close')
+  formRef.value?.validate(async (errors: any) => {
+    console.log('🚀 ~ file: CreateCategory.vue:16 ~ formRef.value?.validate ~ errors:', errors)
+    if (!errors) {
+      await categoryStore.createCategory(categoryItem.value)
+      emits('close')
+    }
+  })
+}
+const categoriesOptions = categories.value.map((x: Category) => {
+  return {
+    value: x.id,
+    label: x.name,
+  }
+})
+const parents: SelectMixedOption[] = [{ value: 0, label: 'Root' }, ...categoriesOptions]
+const nameInput = ref()
+onMounted(() => {
+  nameInput.value?.focus()
+})
+
+const rules: FormRules = {
+  name: [
+    {
+      required: true,
+      trigger: ['blur', 'change'],
+      message: t('categories.validations.nameRequired'),
+    },
+  ],
+  parentId: [
+    {
+      required: true,
+      trigger: ['blur', 'change'],
+      message: t('categories.validations.parentRequired'),
+    },
+  ],
+
 }
 </script>
 
 <template>
-  <form @submit.prevent="create()">
-    <div class="mb-5">
-      <span class="p-float-label">
-        <label for="username" class="block font-medium">{{ t('category.create.categoryName') }}</label>
-        <n-input id="name" :placeholder="t('category.create.categoryName')" />
-      </span>
+  <n-form ref="formRef" :model="categoryItem" :rules="rules" @submit.prevent="create()">
+    <div class="form-control">
+      <n-form-item class="mb-5" path="name" :label="t('categories.create.categoryName')">
+        <n-input
+          id="name" ref="nameInput" v-model:value="categoryItem.name" autofocus
+          :placeholder="t('categories.create.categoryName')"
+        />
+      </n-form-item>
     </div>
-
-    <div class="mb-8">
-      <label for="parent" class="block font-medium">{{ t('category.create.parent') }}</label>
-      <n-input type="text" :placeholder="t('category.create.parent')" />
+    <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-form-item>
     </div>
-
     <n-button attr-type="submit" size="large" :block="true" type="primary" :loading="isLoading">
-      {{ t('category.create.buttonTitle') }}
+      {{ t('categories.create.buttonTitle') }}
     </n-button>
-  </form>
+  </n-form>
 </template>
 
 <style scoped lang='scss'></style>
diff --git a/src/mocks/handlers/category.handler.ts b/src/mocks/handlers/category.handler.ts
index 7abea35..3ab5423 100644
--- a/src/mocks/handlers/category.handler.ts
+++ b/src/mocks/handlers/category.handler.ts
@@ -2,9 +2,9 @@ import { rest } from 'msw'
 import _ from 'lodash'
 import { faker } from '@faker-js/faker'
 import { CreatePagedResponse } from '../handlers.utility'
-import type { Category } from '~/models/Category'
+import type { Category, CategoryCreateModel } from '~/models/Category'
 
-const categories = _.times(77, createFakeCategory)
+const categories = _.times(7, createFakeCategory)
 const handlers = [
   rest.get('/api/Category', (req, res, ctx) => {
     const response = CreatePagedResponse<Category>(req, categories)
@@ -14,6 +14,22 @@ const handlers = [
       ctx.json(response),
     )
   }),
+  rest.post('/api/Category', async (req, res, ctx) => {
+    const newItem = await req.json<CategoryCreateModel>()
+    const category: Category = {
+      id: faker.datatype.number({ max: 2000 }),
+      name: newItem.name,
+      productsCount: 0,
+      subItems: [],
+    }
+    categories.push(category)
+    return res(
+      ctx.status(200),
+      ctx.delay(200),
+      ctx.json(category),
+    )
+  }),
+
 ]
 
 function createFakeCategory(): Category {
diff --git a/src/models/Category.ts b/src/models/Category.ts
index 4ead569..c110950 100644
--- a/src/models/Category.ts
+++ b/src/models/Category.ts
@@ -4,3 +4,8 @@ export interface Category {
   productsCount: number
   subItems?: Category[]
 }
+
+export interface CategoryCreateModel {
+  name: string
+  parentId: number
+}
diff --git a/src/pages/Categories/index.vue b/src/pages/Categories/index.vue
index dd3b933..1e5aacd 100644
--- a/src/pages/Categories/index.vue
+++ b/src/pages/Categories/index.vue
@@ -1,133 +1,14 @@
 <script setup lang="ts">
-import { type DataTableColumns, NButton, NIcon } from 'naive-ui/es/components'
-import type { RowData } from 'naive-ui/es/data-table/src/interface'
-import {
-  DismissCircle24Regular as DeleteIcon,
-  Edit32Regular as EditIcon,
-  AddCircle20Regular as PlusIcon,
-} from '@vicons/fluent'
-import { storeToRefs } from 'pinia'
 
-const { t } = useI18n()
-const collapsed = ref(false)
-const store = useCategoryStore()
-const { categories, isLoading } = storeToRefs(store)
-onMounted(getItems)
-const columns: DataTableColumns<RowData> = [
-  {
-    title: 'Name',
-    key: 'name',
-  },
-  {
-    title: 'Products Count',
-    key: 'productsCount',
-  },
-  {
-    title: 'Actions',
-    key: 'actions',
-    width: 200,
-    render(row) {
-      return [
-        h(
-          NButton,
-          {
-            size: 'small',
-            renderIcon: renderIcon(EditIcon),
-            ghost: true,
-            class: 'mr-2',
-            onClick: () => edit(row),
-          },
-          { default: () => 'Edit' },
-        ),
-        h(
-          NButton,
-          {
-            size: 'small',
-            type: 'error',
-            ghost: true,
-            renderIcon: renderIcon(DeleteIcon),
-            onClick: () => deleteItem(row),
-          },
-          { default: () => 'Delete' },
-        ),
-      ]
-    },
-  },
-]
-const { options } = storeToRefs(store)
-const showAddDialog = ref(false)
-function renderIcon(icon: any) {
-  return () => h(NIcon, null, { default: () => h(icon) })
-}
-
-function edit(row: RowData) {
-
-}
-function deleteItem(row: RowData) {
-
-}
-function rowKey(row: RowData) {
-  return row.index
-}
-function getItems() {
-  store.getCategories(options.value)
-}
-
-function handlePageChange(page: number) {
-  options.value.page = page
-  getItems()
-}
-
-function handleSorterChange() {
-  getItems()
-}
-
-function handleFiltersChange() {
-  getItems()
-}
-
-function createCategory() {
-  showAddDialog.value = true
-}
 </script>
 
-<template>
-  <n-layout has-sider>
-    <n-layout-content>
-      <div>
-        <div class="flex items-center mb-5">
-          <h1 class="page-title mx-2">
-            {{ t('category.title') }}
-          </h1>
-          <NButton type="primary" quaternary round @click="createCategory">
-            <template #icon>
-              <NIcon>
-                <PlusIcon />
-              </NIcon>
-            </template>
-            Create
-          </NButton>
-        </div>
-        <n-data-table
-          remote :columns="columns" :data="categories" :loading="isLoading" :pagination="options"
-          :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
-          @update:page="handlePageChange"
-        />
-      </div>
-    </n-layout-content>
-    <n-layout-sider
-      bordered collapse-mode="width" :collapsed-width="0" :width="300" :collapsed="collapsed" show-trigger
-      @collapse="collapsed = true" @expand="collapsed = false"
-    >
-      <CategoryStatics />
-    </n-layout-sider>
+<route lang="yaml">
+meta:
+  title: Category Management
+</route>
 
-    <n-drawer v-model:show="showAddDialog" :width="502" placement="right">
-      <n-drawer-content closable title="Create Category">
-        <CreateCategory @close="showAddDialog = false" />
-      </n-drawer-content>
-    </n-drawer>
-  </n-layout>
+<template>
+  <CategoryManagement />
 </template>
 
 <style scoped></style>
diff --git a/src/services/category.service.ts b/src/services/category.service.ts
index ea0e45c..b31455d 100644
--- a/src/services/category.service.ts
+++ b/src/services/category.service.ts
@@ -1,5 +1,5 @@
 import { ApiService } from '~/common/api/api-service'
-import type { Category } from '~/models/Category'
+import type { Category, CategoryCreateModel } from '~/models/Category'
 import type { PagedAndSortedRequest } from '~/models/PagedAndSortedRequest'
 import type { PagedListResult } from '~/models/PagedListResult'
 
@@ -11,7 +11,7 @@ class CategoryService {
     return response
   }
 
-  async createCategory(categoryItem: Category): Promise<Category> {
+  async createCategory(categoryItem: CategoryCreateModel): Promise<Category> {
     return apiService.post<Category>('', categoryItem)
   }
 }
diff --git a/src/store/category.store.ts b/src/store/category.store.ts
index 16650d3..0ff1832 100644
--- a/src/store/category.store.ts
+++ b/src/store/category.store.ts
@@ -1,5 +1,5 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import type { Category } from '~/models/Category'
+import type { Category, CategoryCreateModel } from '~/models/Category'
 import type { PagedAndSortedRequest } from '~/models/PagedAndSortedRequest'
 import categoryService from '~/services/category.service'
 
@@ -29,11 +29,12 @@ export const useCategoryStore = defineStore('Category', () => {
 
   }
 
-  async function createCategory(categoryItem: Category) {
+  async function createCategory(categoryItem: CategoryCreateModel) {
     isLoading.value = true
     try {
       const response = await categoryService.createCategory(categoryItem)
-      categories.value.push(response)
+      getCategories(options.value)
+      // categories.value.push(response)
     }
     finally {
       isLoading.value = false
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6bef6d6..ee0c38c 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -55,7 +55,6 @@ body {
 
 .page-title {
   font-size: 1.1rem;
-  padding-bottom: 1.2rem;
 }
 @import 'dark';
 @import 'utils/override';