As admin I want to edit and delete categories

src/components.d.ts

@@ -36,7 +36,6 @@ 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']
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/Category/CategoryManagement.vue

@@ -7,11 +7,14 @@
   AddCircle20Regular as PlusIcon,
 } from '@vicons/fluent'
 import { storeToRefs } from 'pinia'
+import { useDialog, useMessage } from 'naive-ui'
 
 const { t } = useI18n()
 const collapsed = ref(false)
 const store = useCategoryStore()
 const { categories, isLoading } = storeToRefs(store)
+const dialog = useDialog()
+const message = useMessage()
 onMounted(getItems)
 const columns: DataTableColumns<RowData> = [
   {
@@ -46,7 +49,7 @@
             type: 'error',
             ghost: true,
             renderIcon: renderIcon(DeleteIcon),
-            onClick: () => deleteItem(row),
+            onClick: () => handleDeleteItem(row),
           },
           { default: () => 'Delete' },
         ),
@@ -60,12 +63,23 @@
   return () => h(NIcon, null, { default: () => h(icon) })
 }
 
 function edit(row: RowData) {
 
 }
-function deleteItem(row: RowData) {
 
+function handleDeleteItem(row: RowData) {
+  dialog.error({
+    title: 'Confirm',
+    content: 'Are you sure?',
+    positiveText: 'Yes, Delete',
+    negativeText: 'Cancel',
+    onPositiveClick: () => {
+      store.deleteCategory(row.id)
+      message.success('Category was deleted!')
+    },
+  })
 }
+
 function rowKey(row: RowData) {
   return row.id
 }

src/mocks/handlers/category.handler.ts

@@ -29,6 +29,16 @@ const handlers = [
       ctx.json(category),
     )
   }),
+  rest.delete('/api/Category/:id', (req, res, ctx) => {
+    const id = req.params.id.toString()
+    const itemIndex = categories.findIndex(x => x.id === Number.parseInt(id))
+    categories.splice(itemIndex, 1)
+    return res(
+      ctx.delay(1000),
+      ctx.status(200),
+      ctx.json(true),
+    )
+  }),
 
 ]
 

src/services/category.service.ts

@@ -14,5 +14,9 @@ class CategoryService {
   async createCategory(categoryItem: CategoryCreateModel): Promise<Category> {
     return apiService.post<Category>('', categoryItem)
   }
+
+  async deleteCategory(id: string | number): Promise<boolean> {
+    return apiService.delete<boolean>(id)
+  }
 }
 export default new CategoryService()

src/store/category.store.ts

@@ -40,8 +40,9 @@ export const useCategoryStore = defineStore('Category', () => {
     }
   }
 
-  function deleteCategory() {
-
+  async function deleteCategory(id: string | number) {
+    await categoryService.deleteCategory(id)
+    getCategories(options.value)
   }
 
   function editCategory() {