Skip to content
This repository was archived by the owner on Oct 31, 2024. It is now read-only.

Commit 7c5ec1a

Browse files
quando1910quando1910
authoredJun 14, 2022
feat(default-theme): Add pagination for placed orders (#1897)
·
v1.6.2v1.5.0
1 parent 7758499 commit 7c5ec1a

16 files changed

+437
-43
lines changed
 

‎api/composables.api.md

+10
Original file line numberDiff line numberDiff line change
@@ -517,13 +517,23 @@ export interface IUseCustomerAddresses {
517517

518518
// @beta
519519
export interface IUseCustomerOrders {
520+
// (undocumented)
521+
changeCurrentPage: (pageNumber?: number | string) => Promise<void>;
520522
// (undocumented)
521523
errors: UnwrapRef<{
522524
loadOrders: ShopwareError[];
523525
}>;
524526
// (undocumented)
527+
getCurrentPage: ComputedRef<number>;
528+
// (undocumented)
529+
getLimit: ComputedRef<number>;
530+
// (undocumented)
525531
getOrderDetails: (orderId: string) => Promise<Order | undefined>;
526532
// (undocumented)
533+
getTotal: ComputedRef<number>;
534+
// (undocumented)
535+
getTotalPagesCount: ComputedRef<number>;
536+
// (undocumented)
527537
loadOrders: () => Promise<void>;
528538
// (undocumented)
529539
orders: Ref<Order[] | null>;

‎api/shopware-6-client.api.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ export const getCustomerLogoutEndpoint: () => string;
309309
export const getCustomerOrderEndpoint: () => string;
310310

311311
// @public
312-
export function getCustomerOrders(parameters?: ShopwareSearchParams, contextInstance?: ShopwareApiInstance): Promise<Order[]>;
312+
export function getCustomerOrders(parameters?: ShopwareSearchParams, contextInstance?: ShopwareApiInstance): Promise<EntityResult<"order", Order[]>>;
313313

314314
// @beta (undocumented)
315315
export const getCustomerRegisterEndpoint: () => string;

‎docs/landing/resources/api/composables.iusecustomerorders.changecurrentpage.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
2+
3+
[Home](./index.md) &gt; [@shopware-pwa/composables](./composables.md) &gt; [IUseCustomerOrders](./composables.iusecustomerorders.md) &gt; [changeCurrentPage](./composables.iusecustomerorders.changecurrentpage.md)
4+
5+
## IUseCustomerOrders.changeCurrentPage property
6+
7+
> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
8+
>
9+
10+
<b>Signature:</b>
11+
12+
```typescript
13+
changeCurrentPage: (pageNumber?: number | string) => Promise<void>;
14+
```

‎docs/landing/resources/api/composables.iusecustomerorders.getcurrentpage.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
2+
3+
[Home](./index.md) &gt; [@shopware-pwa/composables](./composables.md) &gt; [IUseCustomerOrders](./composables.iusecustomerorders.md) &gt; [getCurrentPage](./composables.iusecustomerorders.getcurrentpage.md)
4+
5+
## IUseCustomerOrders.getCurrentPage property
6+
7+
> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
8+
>
9+
10+
<b>Signature:</b>
11+
12+
```typescript
13+
getCurrentPage: ComputedRef<number>;
14+
```

‎docs/landing/resources/api/composables.iusecustomerorders.getlimit.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
2+
3+
[Home](./index.md) &gt; [@shopware-pwa/composables](./composables.md) &gt; [IUseCustomerOrders](./composables.iusecustomerorders.md) &gt; [getLimit](./composables.iusecustomerorders.getlimit.md)
4+
5+
## IUseCustomerOrders.getLimit property
6+
7+
> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
8+
>
9+
10+
<b>Signature:</b>
11+
12+
```typescript
13+
getLimit: ComputedRef<number>;
14+
```

‎docs/landing/resources/api/composables.iusecustomerorders.gettotal.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
2+
3+
[Home](./index.md) &gt; [@shopware-pwa/composables](./composables.md) &gt; [IUseCustomerOrders](./composables.iusecustomerorders.md) &gt; [getTotal](./composables.iusecustomerorders.gettotal.md)
4+
5+
## IUseCustomerOrders.getTotal property
6+
7+
> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
8+
>
9+
10+
<b>Signature:</b>
11+
12+
```typescript
13+
getTotal: ComputedRef<number>;
14+
```

‎docs/landing/resources/api/composables.iusecustomerorders.gettotalpagescount.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
2+
3+
[Home](./index.md) &gt; [@shopware-pwa/composables](./composables.md) &gt; [IUseCustomerOrders](./composables.iusecustomerorders.md) &gt; [getTotalPagesCount](./composables.iusecustomerorders.gettotalpagescount.md)
4+
5+
## IUseCustomerOrders.getTotalPagesCount property
6+
7+
> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
8+
>
9+
10+
<b>Signature:</b>
11+
12+
```typescript
13+
getTotalPagesCount: ComputedRef<number>;
14+
```

‎docs/landing/resources/api/composables.iusecustomerorders.md

+5
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,13 @@ export interface IUseCustomerOrders
1919

2020
| Property | Type | Description |
2121
| --- | --- | --- |
22+
| [changeCurrentPage](./composables.iusecustomerorders.changecurrentpage.md) | (pageNumber?: number \| string) =&gt; Promise&lt;void&gt; | <b><i>(BETA)</i></b> |
2223
| [errors](./composables.iusecustomerorders.errors.md) | UnwrapRef&lt;{ loadOrders: ShopwareError\[\]; }&gt; | <b><i>(BETA)</i></b> |
24+
| [getCurrentPage](./composables.iusecustomerorders.getcurrentpage.md) | ComputedRef&lt;number&gt; | <b><i>(BETA)</i></b> |
25+
| [getLimit](./composables.iusecustomerorders.getlimit.md) | ComputedRef&lt;number&gt; | <b><i>(BETA)</i></b> |
2326
| [getOrderDetails](./composables.iusecustomerorders.getorderdetails.md) | (orderId: string) =&gt; Promise&lt;Order \| undefined&gt; | <b><i>(BETA)</i></b> |
27+
| [getTotal](./composables.iusecustomerorders.gettotal.md) | ComputedRef&lt;number&gt; | <b><i>(BETA)</i></b> |
28+
| [getTotalPagesCount](./composables.iusecustomerorders.gettotalpagescount.md) | ComputedRef&lt;number&gt; | <b><i>(BETA)</i></b> |
2429
| [loadOrders](./composables.iusecustomerorders.loadorders.md) | () =&gt; Promise&lt;void&gt; | <b><i>(BETA)</i></b> |
2530
| [orders](./composables.iusecustomerorders.orders.md) | Ref&lt;Order\[\] \| null&gt; | <b><i>(BETA)</i></b> |
2631

‎docs/landing/resources/api/shopware-6-client.getcustomerorders.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Get all customer's orders
99
<b>Signature:</b>
1010

1111
```typescript
12-
export declare function getCustomerOrders(parameters?: ShopwareSearchParams, contextInstance?: ShopwareApiInstance): Promise<Order[]>;
12+
export declare function getCustomerOrders(parameters?: ShopwareSearchParams, contextInstance?: ShopwareApiInstance): Promise<EntityResult<"order", Order[]>>;
1313
```
1414

1515
## Parameters
@@ -21,7 +21,7 @@ export declare function getCustomerOrders(parameters?: ShopwareSearchParams, con
2121

2222
<b>Returns:</b>
2323

24-
Promise&lt;Order\[\]&gt;
24+
Promise&lt;EntityResult&lt;"order", Order\[\]&gt;&gt;
2525

2626
## Exceptions
2727

‎packages/composables/__tests__/useCustomerOrders.spec.ts

+202-7
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const consoleErrorSpy = jest.spyOn(console, "error");
1111

1212
import { useCustomerOrders } from "../src/hooks/useCustomerOrders";
1313
import { prepareRootContextMock } from "./contextRunner";
14+
import { EntityResult, Order } from "@shopware-pwa/commons";
1415
describe("Composables - useCustomerOrders", () => {
1516
const rootContextMock = prepareRootContextMock();
1617

@@ -35,17 +36,19 @@ describe("Composables - useCustomerOrders", () => {
3536
describe("methods", () => {
3637
describe("loadOrders", () => {
3738
it("should load customer's orders from different endpoint", async () => {
38-
const ordersResponse = [
39-
{
40-
id: "12345",
41-
orderNumber: "100123",
42-
},
43-
];
39+
const ordersResponse = {
40+
elements: [
41+
{
42+
id: "12345",
43+
orderNumber: "100123",
44+
},
45+
]
46+
};
4447
mockedApiClient.getCustomerOrders.mockResolvedValueOnce(
4548
ordersResponse as any
4649
);
4750
const { orders, loadOrders } = useCustomerOrders();
48-
expect(orders.value).toBeNull();
51+
expect(orders.value).toStrictEqual([]);
4952
await loadOrders();
5053
expect(orders.value).toHaveLength(1);
5154
});
@@ -65,5 +68,197 @@ describe("Composables - useCustomerOrders", () => {
6568
expect(orderDetails).toBe(orderResponse);
6669
});
6770
});
71+
72+
describe("getTotal", () => {
73+
it("should return 0 as default", () => {
74+
const { getTotal } = useCustomerOrders();
75+
expect(getTotal.value).toEqual(0);
76+
});
77+
78+
it("should return 0 when there is no orders", () => {
79+
const ordersResponse = {
80+
elements: []
81+
};
82+
mockedApiClient.getCustomerOrders.mockResolvedValueOnce(
83+
ordersResponse as any
84+
);
85+
const { getTotal } = useCustomerOrders();
86+
87+
expect(getTotal.value).toEqual(0);
88+
});
89+
90+
it("should return total same value with count field", async () => {
91+
const ordersResponse = {
92+
aggregations: {
93+
'count-id': {
94+
count: 20
95+
}
96+
},
97+
elements: Array(20).fill({
98+
id: "11111",
99+
orderNumber: "100120",
100+
})
101+
};
102+
mockedApiClient.getCustomerOrders.mockResolvedValueOnce(
103+
ordersResponse as any
104+
);
105+
106+
const { getTotal, loadOrders } = useCustomerOrders();
107+
await loadOrders();
108+
expect(getTotal.value).toEqual(20);
109+
});
110+
});
111+
112+
describe("getLimit", () => {
113+
it("should return 10 when there is no configuration set", async () => {
114+
const ordersResponse = {
115+
elements: [
116+
{
117+
id: "12345",
118+
orderNumber: "100123",
119+
},
120+
],
121+
};
122+
mockedApiClient.getCustomerOrders.mockResolvedValueOnce(
123+
ordersResponse as any
124+
);
125+
const { getLimit, loadOrders } = useCustomerOrders();
126+
expect(getLimit.value).toEqual(10);
127+
await loadOrders();
128+
expect(getLimit.value).toEqual(10);
129+
});
130+
131+
it("should return limit from current orders", async () => {
132+
const ordersResponse = {
133+
elements: [
134+
{
135+
id: "12345",
136+
orderNumber: "100123",
137+
},
138+
],
139+
limit: 11
140+
};
141+
mockedApiClient.getCustomerOrders.mockResolvedValueOnce(
142+
ordersResponse as any
143+
);
144+
const { getLimit, loadOrders } = useCustomerOrders();
145+
await loadOrders();
146+
expect(getLimit.value).toEqual(11);
147+
});
148+
});
149+
150+
describe("getTotalPagesCount", () => {
151+
it("should return 0 when there is no currentListing", async () => {
152+
const ordersResponse = {
153+
aggregations: {
154+
'count-id': {
155+
count: 0
156+
}
157+
},
158+
elements: []
159+
};
160+
mockedApiClient.getCustomerOrders.mockResolvedValueOnce(
161+
ordersResponse as any
162+
);
163+
164+
const { getTotalPagesCount, loadOrders } = useCustomerOrders();
165+
await loadOrders();
166+
expect(getTotalPagesCount.value).toEqual(0);
167+
});
168+
169+
it("should return ceiled pages count from current listing", async () => {
170+
const ordersResponse = {
171+
aggregations: {
172+
'count-id': {
173+
count: 22
174+
}
175+
},
176+
elements: Array(22).fill({
177+
id: "11111",
178+
orderNumber: "100120",
179+
})
180+
};
181+
mockedApiClient.getCustomerOrders.mockResolvedValueOnce(
182+
ordersResponse as any
183+
);
184+
185+
const { getTotalPagesCount, loadOrders } = useCustomerOrders();
186+
await loadOrders();
187+
expect(getTotalPagesCount.value).toEqual(3);
188+
});
189+
});
190+
191+
describe("getCurrentPage", () => {
192+
it("should return 1 as default", async () => {
193+
const { getCurrentPage } = useCustomerOrders();
194+
expect(getCurrentPage.value).toEqual(1);
195+
});
196+
197+
it("should return 1 when there is no orders", async () => {
198+
const ordersResponse = {
199+
aggregations: {
200+
'count-id': {
201+
count: 0
202+
}
203+
},
204+
elements: []
205+
};
206+
mockedApiClient.getCustomerOrders.mockResolvedValueOnce(
207+
ordersResponse as any
208+
);
209+
210+
const { getCurrentPage, loadOrders } = useCustomerOrders();
211+
await loadOrders();
212+
expect(getCurrentPage.value).toEqual(1);
213+
});
214+
215+
it("should return page number from current listing", async () => {
216+
const ordersResponse = {
217+
aggregations: {
218+
'count-id': {
219+
count: 3
220+
}
221+
},
222+
page: 3,
223+
limit: 1,
224+
elements: [
225+
{
226+
id: "12345",
227+
orderNumber: "100123",
228+
},
229+
{
230+
id: "12346",
231+
orderNumber: "100123",
232+
}
233+
]
234+
};
235+
mockedApiClient.getCustomerOrders.mockResolvedValueOnce(
236+
ordersResponse as any
237+
);
238+
239+
const { getCurrentPage, loadOrders } = useCustomerOrders();
240+
await loadOrders();
241+
expect(getCurrentPage.value).toEqual(3);
242+
});
243+
});
244+
245+
describe("changeCurrentPage", () => {
246+
it("should invoke search with changed page number", async () => {
247+
const ordersResponse = (page: number) : EntityResult<"order", Order[]> => ({
248+
aggregations: [],
249+
page,
250+
limit: 10,
251+
entity: 'order',
252+
total: 10,
253+
apiAlias: '',
254+
elements: []
255+
});
256+
mockedApiClient.getCustomerOrders.mockImplementationOnce(async (params) => Promise.resolve(ordersResponse(params?.page || 1)));
257+
258+
const { changeCurrentPage, getCurrentPage } = useCustomerOrders();
259+
await changeCurrentPage(3);
260+
expect(getCurrentPage.value).toEqual(3);
261+
});
262+
});
68263
});
69264
});

‎packages/composables/src/hooks/useCustomerOrders.ts

+37-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ref, Ref, UnwrapRef, reactive } from "vue-demi";
1+
import { ref, Ref, UnwrapRef, reactive, ComputedRef, computed } from "vue-demi";
22
import {
33
getCustomerOrders,
44
getOrderDetails as apiGetOrderDetails,
@@ -9,6 +9,7 @@ import {
99
ShopwareSearchParams,
1010
} from "@shopware-pwa/commons/interfaces";
1111
import { useDefaults, getApplicationContext } from "@shopware-pwa/composables";
12+
import { EntityResult } from "@shopware-pwa/commons";
1213

1314
/**
1415
* interface for {@link useCustomerOrders} composable
@@ -17,6 +18,11 @@ import { useDefaults, getApplicationContext } from "@shopware-pwa/composables";
1718
*/
1819
export interface IUseCustomerOrders {
1920
orders: Ref<Order[] | null>;
21+
getTotal: ComputedRef<number>;
22+
getCurrentPage: ComputedRef<number>;
23+
getTotalPagesCount: ComputedRef<number>;
24+
getLimit: ComputedRef<number>;
25+
changeCurrentPage: (pageNumber?: number | string) => Promise<void>;
2026
errors: UnwrapRef<{
2127
loadOrders: ShopwareError[];
2228
}>;
@@ -42,7 +48,7 @@ export function useCustomerOrders(): IUseCustomerOrders {
4248
}> = reactive({
4349
loadOrders: [],
4450
});
45-
const orders: Ref<Order[] | null> = ref(null);
51+
const ordersResult: Ref<EntityResult<"order", Order[]> | null> = ref(null);
4652

4753
const loadOrders = async (
4854
parameters: ShopwareSearchParams = {}
@@ -51,7 +57,30 @@ export function useCustomerOrders(): IUseCustomerOrders {
5157
Object.assign({}, getDefaults(), parameters),
5258
apiInstance
5359
);
54-
orders.value = fetchedOrders;
60+
ordersResult.value = fetchedOrders;
61+
};
62+
63+
const getTotal = computed(() => {
64+
/** We will update the new way to get total after BE add it into response api */
65+
const aggregations: any = ordersResult.value?.aggregations;
66+
return aggregations?.['count-id']?.count || 0;
67+
});
68+
69+
const getLimit = computed(() => {
70+
return ordersResult.value?.limit || 10;
71+
});
72+
73+
const getTotalPagesCount = computed(() =>
74+
Math.ceil(getTotal.value / getLimit.value)
75+
);
76+
77+
const orders = computed(() =>
78+
ordersResult.value?.elements || []
79+
);
80+
81+
const getCurrentPage = computed(() => ordersResult.value?.page || 1);
82+
const changeCurrentPage = async (pageNumber: number | string) => {
83+
await loadOrders({ page: +pageNumber });
5584
};
5685

5786
const getOrderDetails = async (
@@ -62,6 +91,11 @@ export function useCustomerOrders(): IUseCustomerOrders {
6291

6392
return {
6493
orders,
94+
getCurrentPage,
95+
changeCurrentPage,
96+
getTotalPagesCount,
97+
getTotal,
98+
getLimit,
6599
loadOrders,
66100
getOrderDetails,
67101
errors,

‎packages/composables/src/internalHelpers/defaultApiParams.json

+8
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,14 @@
268268
}
269269
},
270270
"useCustomerOrders": {
271+
"limit": 10,
272+
"aggregations": [
273+
{
274+
"name": "count-id",
275+
"type": "count",
276+
"field": "id"
277+
}
278+
],
271279
"sort": [
272280
{
273281
"field": "createdAt",

‎packages/default-theme/src/pages/account.vue

+4-6
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
>
99
<SfContentCategory :title="$t('Personal Details')">
1010
<SfContentPage :title="$t('My profile')">
11-
<nuxt-child />
11+
<nuxt-child v-if="activePage === $t('My profile')" />
1212
</SfContentPage>
1313
<SfContentPage :title="$t('My addresses')">
14-
<nuxt-child />
14+
<nuxt-child v-if="activePage === $t('My addresses')" />
1515
</SfContentPage>
1616
</SfContentCategory>
1717
<SfContentCategory :title="$t('Order details')">
1818
<SfContentPage :title="$tc('Order history', ordersCount)">
19-
<nuxt-child />
19+
<nuxt-child v-if="activePage === $tc('Order history', ordersCount)" />
2020
</SfContentPage>
2121
</SfContentCategory>
2222
<SfContentPage :title="$t('Logout')"></SfContentPage>
@@ -30,7 +30,6 @@ import { SfContentPages } from "@storefront-ui/vue"
3030
import {
3131
useUser,
3232
useBreadcrumbs,
33-
useCustomerOrders,
3433
} from "@shopware-pwa/composables"
3534
import { PAGE_ACCOUNT, PAGE_LOGIN } from "@/helpers/pages"
3635
import authMiddleware from "@/middleware/auth"
@@ -46,7 +45,6 @@ export default {
4645
4746
setup(props, { root }) {
4847
const { logout, user } = useUser()
49-
const { loadOrders, orders } = useCustomerOrders()
5048
const { setBreadcrumbs } = useBreadcrumbs()
5149
setBreadcrumbs([
5250
{
@@ -55,7 +53,7 @@ export default {
5553
},
5654
])
5755
const ordersCount = computed(() => user.value && user.value.orderCount)
58-
return { logout, user, loadOrders, orders, ordersCount }
56+
return { logout, user, ordersCount }
5957
},
6058
6159
data() {

‎packages/default-theme/src/pages/account/orders/index.vue

+85-13
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
)
1010
}}
1111
</p>
12-
<div v-if="orders && orders.length === 0" class="no-orders">
12+
<div v-if="getCurrentPage === 1 && orders && orders.length === 0" class="no-orders">
1313
<p class="no-orders__title">{{ $t("You currently have no orders") }}</p>
1414
<p class="no-orders__content">{{ $t("Start shopping!") }}</p>
1515
</div>
@@ -23,19 +23,61 @@
2323
>
2424
</SfTableHeading>
2525
<!-- consider making SfTableRow public (not internal component) to split it down to smaller components. -->
26-
<Order v-for="order in orderList" :key="order.id" :order="order" />
26+
<Order v-for="order in orders" :key="order.id" :order="order" />
2727
</SfTable>
28+
<SfPagination
29+
v-if="getTotalPagesCount > 1"
30+
class="orders__pagination"
31+
:current="getCurrentPage"
32+
:total="getTotalPagesCount"
33+
:visible="5"
34+
pageParamName="p"
35+
@click="
36+
(current) => {
37+
changePage(current)
38+
}
39+
"
40+
>
41+
<template #prev="{ go, prev }">
42+
<span
43+
v-show="getCurrentPage > 1"
44+
class="orders__pagination__prev"
45+
@click="go(prev)"
46+
>
47+
&lt;
48+
</span>
49+
</template>
50+
<template #number="{ page }">
51+
<button
52+
class="sf-button--pure sf-pagination__item sf-button"
53+
@click="changePage(page)"
54+
:class="{ current: getCurrentPage === page, first: page == 1 }"
55+
>
56+
{{ page }}
57+
</button>
58+
</template>
59+
<template #next="{ go, next }">
60+
<span
61+
v-show="getCurrentPage < getTotalPagesCount"
62+
class="orders__pagination__next"
63+
@click="go(next)"
64+
>
65+
&gt;
66+
</span>
67+
</template>
68+
</SfPagination>
2869
</SfTab>
2970
</SfTabs>
3071
</template>
3172
<script>
32-
import { SfTabs, SfTable } from "@storefront-ui/vue"
73+
import { SfTabs, SfTable, SfPagination } from "@storefront-ui/vue"
3374
import { useCustomerOrders } from "@shopware-pwa/composables"
3475
import Order from "@/components/account/orders/Order.vue"
76+
import { ref, computed } from "@vue/composition-api"
3577
3678
export default {
3779
name: "OrderHistory",
38-
components: { SfTabs, SfTable, Order },
80+
components: { SfTabs, SfTable, Order, SfPagination },
3981
props: {},
4082
data() {
4183
return {
@@ -50,17 +92,34 @@ export default {
5092
}
5193
},
5294
setup() {
53-
const { orders, loadOrders } = useCustomerOrders()
54-
loadOrders()
95+
const {
96+
orders,
97+
loadOrders,
98+
getTotalPagesCount,
99+
getTotal,
100+
getLimit,
101+
getCurrentPage,
102+
changeCurrentPage
103+
} = useCustomerOrders()
104+
105+
loadOrders({ page: 1 })
106+
107+
const changePage = async (pageNumber) => {
108+
if (pageNumber > getTotalPagesCount.value) {
109+
return
110+
}
111+
window.scrollTo(0, 0)
112+
changeCurrentPage(pageNumber)
113+
}
114+
55115
return {
116+
changePage,
56117
orders,
118+
getCurrentPage,
119+
getTotalPagesCount,
120+
getTotal
57121
}
58122
},
59-
computed: {
60-
orderList() {
61-
return this.orders
62-
},
63-
},
64123
}
65124
</script>
66125

@@ -76,7 +135,20 @@ export default {
76135
}
77136
}
78137
79-
.orders .orders__header {
80-
font-weight: bold;
138+
.orders {
139+
&__header {
140+
font-weight: bold;
141+
}
142+
&__pagination {
143+
margin-top: 10px;
144+
justify-content: center;
145+
// temporary fix for pagination bug
146+
button.first:nth-of-type(2) {
147+
display: none;
148+
}
149+
&__prev, &__next {
150+
cursor: pointer;
151+
}
152+
}
81153
}
82154
</style>

‎packages/shopware-6-client/__tests__/services/CustomerService/getCustomerOrders.spec.ts

+11-9
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe("CustomerService - getCustomerOrders", () => {
2222
},
2323
});
2424
const result = await getCustomerOrders();
25-
expect(result).toStrictEqual([]);
25+
expect(result).toBeUndefined();
2626
});
2727

2828
it("should return array of orders", async () => {
@@ -43,13 +43,15 @@ describe("CustomerService - getCustomerOrders", () => {
4343
const result = await getCustomerOrders();
4444
expect(mockedPost).toBeCalledTimes(1);
4545
expect(mockedPost).toBeCalledWith("/store-api/order", {});
46-
expect(result).toMatchObject([
47-
{
48-
orderNumber: "1234",
49-
},
50-
{
51-
orderNumber: "4321",
52-
},
53-
]);
46+
expect(result).toMatchObject({
47+
"elements" :[
48+
{
49+
orderNumber: "1234",
50+
},
51+
{
52+
orderNumber: "4321",
53+
},
54+
]
55+
});
5456
});
5557
});

‎packages/shopware-6-client/src/services/customerService.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -130,12 +130,12 @@ export async function getCustomerAddresses(
130130
export async function getCustomerOrders(
131131
parameters: ShopwareSearchParams = {},
132132
contextInstance: ShopwareApiInstance = defaultInstance
133-
): Promise<Order[]> {
133+
): Promise<EntityResult<"order", Order[]>> {
134134
const resp = await contextInstance.invoke.post(
135135
getCustomerOrderEndpoint(),
136136
parameters
137137
);
138-
return resp.data.orders?.elements || [];
138+
return resp.data.orders;
139139
}
140140

141141
/**

1 commit comments

Comments
 (1)
This repository has been archived.