Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #52 from doroudi:doroudi/issue48
Doroudi/issue48
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 { | ||
|
Check failure on line 34 in src/mocks/handlers/order.handler.ts
|
||
| return { | ||
| id: faker.number.int().toString(), | ||
| } | ||
| } | ||
| export default handlers | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| } |
Oops, something went wrong.