Doroudi/issue48

src/auto-imports.d.ts

@@ -224,6 +224,7 @@ declare global {
   const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const useOptions: typeof import('./composables/options')['useOptions']
+  const useOrderStore: typeof import('./store/order')['useOrderStore']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']
   const useParentElement: typeof import('@vueuse/core')['useParentElement']
@@ -542,6 +543,7 @@ declare module 'vue' {
     readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
     readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
     readonly useOptions: UnwrapRef<typeof import('./composables/options')['useOptions']>
+    readonly useOrderStore: UnwrapRef<typeof import('./store/order.store')['useOrderStore']>
     readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
     readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
     readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
@@ -853,6 +855,7 @@ declare module '@vue/runtime-core' {
     readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
     readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
     readonly useOptions: UnwrapRef<typeof import('./composables/options')['useOptions']>
+    readonly useOrderStore: UnwrapRef<typeof import('./store/order.store')['useOrderStore']>
     readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
     readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
     readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>

src/components.d.ts

@@ -26,19 +26,32 @@ declare module 'vue' {
     Navbar: typeof import('./components/Navbar.vue')['default']
     NBadge: typeof import('naive-ui')['NBadge']
     NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+    NDynamicTags: typeof import('naive-ui')['NDynamicTags']
+    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']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTreeSelect: typeof import('naive-ui')['NTreeSelect']
+    NUpload: typeof import('naive-ui')['NUpload']
+    OrderManagement: typeof import('./components/Orders/OrderManagement.vue')['default']
     ProductsManagement: typeof import('./components/Products/ProductsManagement.vue')['default']
     ReviewManagement: typeof import('./components/Review/ReviewManagement.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/Orders/OrderManagement.vue

@@ -0,0 +1,164 @@
+<script setup lang='ts'>
+import { type DataTableColumns, NButton, NIcon, NSpace, NTag, NText } from 'naive-ui/es/components'
+import type { RowData } from 'naive-ui/es/data-table/src/interface'
+import {
+  Open24Regular as ArrowIcon,
+  Delete24Regular as DeleteIcon,
+  Add24Filled as PlusIcon,
+} from '@vicons/fluent'
+import { storeToRefs } from 'pinia'
+import { useDialog, useMessage } from 'naive-ui'
+import { OrderStatus } from '~/models/Order'
+
+const { t } = useI18n()
+const store = useOrderStore()
+const { orders, isLoading } = storeToRefs(store)
+const dialog = useDialog()
+const message = useMessage()
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+
+onMounted(getItems)
+const columns: DataTableColumns<RowData> = [
+  {
+    title: 'Customer',
+    key: 'customer',
+
+  },
+  {
+    title: 'Date',
+    key: 'createdDate',
+    render: row => h(NText, {}, { default: () => proxy.$filters.friendlyTime(row.createdDate) }),
+  },
+  {
+    title: 'Items Count',
+    key: 'itemsCount',
+  },
+  {
+    title: 'Price',
+    key: 'category',
+    render(row) {
+      return h(NText,
+        {}, {
+          default: () => row.totalPrice,
+        })
+    },
+  },
+  {
+    title: 'Status',
+    key: 'status',
+    render: row => h(NTag,
+      { type: getStatusColor(row.status) },
+      { default: () => OrderStatus[row.status] }),
+  },
+  {
+    title: 'Actions',
+    key: 'actions',
+    width: 110,
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            size: 'medium',
+            quaternary: true,
+            circle: true,
+            renderIcon: renderIcon(ArrowIcon),
+            onClick: () => {},
+          },
+        ),
+        h(
+          NButton,
+          {
+            size: 'medium',
+            quaternary: true,
+            circle: true,
+            renderIcon: renderIcon(DeleteIcon),
+            onClick: () => handleDeleteItem(row),
+          },
+        ),
+      ]
+    },
+  },
+]
+const { options } = storeToRefs(store)
+
+function renderIcon(icon: any) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+function getStatusColor(status: OrderStatus) {
+  switch (status) {
+    case OrderStatus.Submitted:
+      return 'info'
+    case OrderStatus.Processing:
+      return 'success'
+    case OrderStatus.ReadyToSend:
+      return 'warning'
+    case OrderStatus.Sent:
+      return 'success'
+    case OrderStatus.Delivered:
+      return 'success'
+  }
+}
+
+function handleDeleteItem(row: RowData) {
+  dialog.error({
+    title: 'Confirm',
+    content: 'Are you sure?',
+    positiveText: 'Yes, Delete',
+    negativeText: 'Cancel',
+    onPositiveClick: () => {
+      store.deleteProduct(row.id)
+      message.success('Product was deleted!')
+    },
+  })
+}
+
+function rowKey(row: RowData) {
+  return row.id
+}
+function getItems() {
+  store.getOrders(options.value)
+}
+
+function handlePageChange(page: number) {
+  options.value.page = page
+  getItems()
+}
+
+function handleSorterChange() {
+  getItems()
+}
+
+function handleFiltersChange() {
+  getItems()
+}
+</script>
+
+<template>
+  <n-layout>
+    <n-layout-content>
+      <div class="px-3">
+        <NSpace justify="space-between" class="mb-3">
+          <n-input placeholder="Search" />
+          <NButton type="primary" @click="router.push('/Orders/Create')">
+            <template #icon>
+              <NIcon>
+                <PlusIcon />
+              </NIcon>
+            </template>
+            {{ t('categories.createButton') }}
+          </NButton>
+        </NSpace>
+        <n-data-table
+          :columns="columns" :data="orders" :loading="isLoading" :pagination="options"
+          :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
+          @update:page="handlePageChange"
+        />
+      </div>
+    </n-layout-content>
+  </n-layout>
+</template>
+
+<style scoped lang='scss'></style>

src/components/Products/ProductsManagement.vue

@@ -3,7 +3,6 @@ import { type DataTableColumns, NButton, NIcon, NImage, NSpace, NSwitch, NTag, N
 import type { RowData } from 'naive-ui/es/data-table/src/interface'
 import {
   Delete24Regular as DeleteIcon,
-  Edit24Regular as EditIcon,
   Add24Filled as PlusIcon,
   Star20Filled as StarIcon,
 } from '@vicons/fluent'
@@ -76,17 +75,7 @@ const columns: DataTableColumns<RowData> = [
     width: 110,
     render(row) {
       return [
-        h(
-          NButton,
-          {
-            size: 'medium',
-            renderIcon: renderIcon(EditIcon),
-            quaternary: true,
-            circle: true,
-            class: 'mr-2',
-            onClick: () => { },
-          },
-        ),
+
         h(
           NButton,
           {

src/components/Sidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MenuOption } from 'naive-ui'
+import { type MenuOption, NBadge } from 'naive-ui'
 import {
   PersonSettings20Regular as AccountSettingsIcon,
   CheckmarkStarburst16Regular as BrandsIcon,
@@ -79,9 +79,9 @@ const menuOptions: MenuOption[] = [
     ],
   },
   {
-    label: () => renderLabel(t('menu.orders'), 'orders'),
+    label: () => renderLabel(t('menu.orders'), '/orders'),
     key: 'orders',
-    icon: renderIcon(InvoicesIcon),
+    icon: renderIcon(InvoicesIcon, true),
   },
   {
     label: t('menu.feedbacks'),
@@ -151,7 +151,10 @@ const menuOptions: MenuOption[] = [
   },
 ]
 
-function renderIcon(icon: any) {
+function renderIcon(icon: any, showBadge = false) {
+  if (showBadge)
+    return () => h(NBadge, { processing: true, dot: true, type: 'success', offset: [-2, 2] }, { default: () => h(NIcon, { color: '#000' }, { default: () => h(icon) }) })
+
   return () => h(NIcon, null, { default: () => h(icon) })
 }
 </script>
@@ -177,6 +180,7 @@ function renderIcon(icon: any) {
   align-items: center;
   padding: 1.5rem 1.1rem 0.5rem 1.1rem;
   transition: all 100ms;
+
   .logo {
     width: 33px;
     margin-right: 0.8rem;

src/main.ts

@@ -20,7 +20,9 @@ async function enableMocking() {
     return
 
   const { worker } = await import('~/mocks/browser')
-  return worker.start()
+  return worker.start({
+    onUnhandledRequest: 'bypass',
+  })
 }
 
 const router = createRouter({

src/mocks/handlers/order.handler.ts

@@ -0,0 +1,39 @@
+import { HttpResponse, http } from 'msw'
+import _ from 'lodash'
+import { faker } from '@faker-js/faker'
+import { CreatePagedResponse } from '../handlers.utility'
+import { OrderStatus } from '~/models/Order'
+import type { OrderItem, OrderList } from '~/models/Order'
+
+const orders = _.times(100, createFakeOrder)
+const handlers = [
+  http.get('/api/order', ({ request }) => {
+    const response = CreatePagedResponse<OrderList>(request, orders)
+    return HttpResponse.json(response, { status: 200 })
+  }),
+]
+
+function createFakeOrder(): OrderList {
+  return {
+    id: faker.number.int().toString(),
+    status: faker.helpers.enumValue(OrderStatus),
+    address: {
+      city: { name: 'Tehran', provinceId: faker.number.int().toString(), id: faker.number.int().toString() },
+      province: { name: 'Tehran', id: faker.number.int().toString() },
+      id: faker.number.int().toString(),
+      text: '30, Shams Ave, Ghasrodasht St',
+    },
+    itemsCount: faker.number.int({ max: 10 }),
+    createdDate: faker.date.past(),
+    customer: `${faker.person.firstName()} ${faker.person.lastName()}`,
+    customerId: faker.number.int().toString(),
+    totalPrice: faker.number.int({ min: 20000, max: 10000000 }),
+  }
+}
+
+function createFakeOrderItems(): OrderItem {
+  return {
+    id: faker.number.int().toString(),
+  }
+}
+export default handlers

src/models/Customer.ts

@@ -11,7 +11,21 @@ export interface Customer {
 }
 
 export interface Address {
+  id: string
+  province: Province
+  city: City
+  text: string
+}
+
+export interface City {
+  id: string
+  provinceId: string
+  name: string
+}
 
+export interface Province {
+  id: string
+  name: string
 }
 
 export interface CustomerCreateModel extends Customer {

src/models/Order.ts

@@ -0,0 +1,34 @@
+import type { Address, Customer } from './Customer'
+
+export interface OrderList {
+  id: string
+  customer: string
+  customerId: string
+  address: Address
+  status: OrderStatus
+  createdDate: Date
+  totalPrice: number
+  itemsCount: number
+}
+
+export interface Order {
+  id: string
+  customer: Customer
+  items: OrderItem[]
+  address: Address
+  status: OrderStatus
+  createdDate: Date
+  totalPrice: number
+}
+
+export interface OrderItem {
+  id: string
+}
+
+export enum OrderStatus {
+  Submitted,
+  Processing,
+  ReadyToSend,
+  Sent,
+  Delivered,
+}