refactor(listing): useListing composable with criteria refactor (#1086)

* refactor(listing): useListing composable with criteria refactory

api/composables.api.md

@@ -22,7 +22,9 @@ import { CustomerUpdateProfileParam } from '@shopware-pwa/shopware-6-client';
 import { EqualsFilter } from '@shopware-pwa/commons/interfaces/search/SearchFilter';
 import { GuestOrderParams } from '@shopware-pwa/commons/interfaces/request/GuestOrderParams';
 import { Includes } from '@shopware-pwa/commons/interfaces/search/SearchCriteria';
+import { IUseListing as IUseListing_2 } from '@shopware-pwa/composables';
 import { LineItem } from '@shopware-pwa/commons/interfaces/models/checkout/cart/line-item/LineItem';
+import { ListingFilter } from '@shopware-pwa/helpers';
 import { NavigationElement } from '@shopware-pwa/commons/interfaces/models/content/navigation/Navigation';
 import { Order } from '@shopware-pwa/commons/interfaces/models/checkout/order/Order';
 import { PaymentMethod } from '@shopware-pwa/commons/interfaces/models/checkout/payment/PaymentMethod';
@@ -35,6 +37,7 @@ import { SessionContext } from '@shopware-pwa/commons/interfaces/response/Sessio
 import { ShippingAddress } from '@shopware-pwa/commons/interfaces/request/GuestOrderParams';
 import { ShippingMethod } from '@shopware-pwa/commons/interfaces/models/checkout/shipping/ShippingMethod';
 import { ShopwareApiInstance } from '@shopware-pwa/shopware-6-client';
+import { ShopwareSearchParams } from '@shopware-pwa/commons/interfaces/search/SearchCriteria';
 import { Sort } from '@shopware-pwa/commons/interfaces/search/SearchCriteria';
 import { VueConstructor } from 'vue';
 
@@ -47,6 +50,8 @@ export interface ApplicationVueContext extends VueConstructor {
  // (undocumented)
  $interceptors?: any;
  // (undocumented)
+ $route?: any;
+ // (undocumented)
  $router?: any;
  // (undocumented)
  $shopwareApiInstance?: ShopwareApiInstance;
@@ -61,6 +66,8 @@ export interface ApplicationVueContext extends VueConstructor {
  // (undocumented)
  interceptors?: any;
  // (undocumented)
+ route?: any;
+ // (undocumented)
  router?: any;
  // (undocumented)
  shopwareApiInstance?: ShopwareApiInstance;
@@ -97,6 +104,14 @@ export function createCheckoutStep({ stepNumber, stepFields, stepDataUpdated, }:
  stepDataUpdated: (updatedData: CheckoutStepFields, guestOrderParams: Ref<Readonly<Partial<GuestOrderParams>>>) => Partial<GuestOrderParams>;
 }): (rootContext: ApplicationVueContext) => CreateCheckoutStep;
 
+// @beta
+export function createListingComposable<ELEMENTS_TYPE>({ rootContext, searchMethod, searchDefaults, listingKey, }: {
+ rootContext: ApplicationVueContext_2;
+ searchMethod: (searchParams: Partial<ShopwareSearchParams>) => Promise<ProductListingResult>;
+ searchDefaults: ShopwareSearchParams;
+ listingKey: string;
+}): IUseListing<ELEMENTS_TYPE>;
+
 // @beta (undocumented)
 export interface CurrentPagination {
  // (undocumented)
@@ -112,6 +127,7 @@ export function getApplicationContext(rootContext: ApplicationVueContext, key?:
  apiInstance: ShopwareApiInstance | undefined;
  vuexStore: any;
  router: any;
+ route: any;
  i18n: any;
  cookies: any;
  shopwareDefaults: any;
@@ -214,6 +230,53 @@ export interface IUseIntercept {
  intercept: (broadcastKey: string, method: Function) => void;
 }
 
+// @beta
+export interface IUseListing<ELEMENTS_TYPE> {
+ // (undocumented)
+ changeCurrentPage: (pageNumber?: number | string) => Promise<void>;
+ // (undocumented)
+ changeCurrentSortingOrder: (order: string | string[]) => Promise<void>;
+ // (undocumented)
+ getAvailableFilters: ComputedRef<ListingFilter[]>;
+ // (undocumented)
+ getCurrentFilters: ComputedRef<any>;
+ // (undocumented)
+ getCurrentListing: ComputedRef<ProductListingResult>;
+ // (undocumented)
+ getCurrentPage: ComputedRef<string | number>;
+ // (undocumented)
+ getCurrentSortingOrder: ComputedRef<string>;
+ // (undocumented)
+ getElements: ComputedRef<ELEMENTS_TYPE[]>;
+ // (undocumented)
+ getInitialListing: ComputedRef<ProductListingResult>;
+ // (undocumented)
+ getLimit: ComputedRef<number>;
+ // (undocumented)
+ getSortingOrders: ComputedRef<{
+ key: string;
+ label: string;
+ }>;
+ // (undocumented)
+ getTotal: ComputedRef<number>;
+ // (undocumented)
+ getTotalPagesCount: ComputedRef<number>;
+ // (undocumented)
+ initSearch: (criteria: Partial<ShopwareSearchParams>) => Promise<void>;
+ // (undocumented)
+ loading: ComputedRef<boolean>;
+ // (undocumented)
+ loadingMore: ComputedRef<boolean>;
+ // (undocumented)
+ loadMore: () => Promise<void>;
+ // (undocumented)
+ search: (criteria: Partial<ShopwareSearchParams>, options?: {
+ preventRouteChange?: boolean;
+ }) => Promise<void>;
+ // (undocumented)
+ setInitialListing: (initialListing: Partial<ProductListingResult>) => void;
+}
+
 // @beta
 export interface IUseNavigation {
  // (undocumented)
@@ -226,6 +289,22 @@ export interface IUseNavigation {
  routes: Ref<Readonly<any>>;
 }
 
+// @beta (undocumented)
+export interface IUseProductQuickSearch {
+ // (undocumented)
+ getProducts: ComputedRef<Product[]>;
+ // (undocumented)
+ getTotal: ComputedRef<number>;
+ // (undocumented)
+ loading: ComputedRef<boolean>;
+ // (undocumented)
+ loadMore: () => Promise<void>;
+ // (undocumented)
+ search: (additionalCriteria?: Partial<ShopwareSearchParams>) => Promise<void>;
+ // (undocumented)
+ searchTerm: Ref<string>;
+}
+
 // @beta
 export interface IUseSessionContext {
  // (undocumented)
@@ -305,6 +384,9 @@ export interface IUseUser {
  user: Ref<Customer | null>;
 }
 
+// @beta (undocumented)
+export type listingKey = "productSearchListing" | "categoryListing";
+
 // @beta (undocumented)
 interface Notification_2 {
  // (undocumented)
@@ -326,7 +408,7 @@ export const useAddToCart: (rootContext: ApplicationVueContext, product: Product
 // @beta
 export const useCart: (rootContext: ApplicationVueContext) => IUseCart;
 
-// @alpha (undocumented)
+// @beta @deprecated (undocumented)
 export const useCategoryFilters: (rootContext: ApplicationVueContext) => any;
 
 // @beta
@@ -373,11 +455,15 @@ export const useCurrency: (rootContext: ApplicationVueContext) => UseCurrency;
 export const useDefaults: (rootContext: ApplicationVueContext, defaultsKey: string) => {
  getIncludesConfig: () => Includes;
  getAssociationsConfig: () => Association[];
+ getDefaults: () => ShopwareSearchParams;
 };
 
 // @beta
 export const useIntercept: (rootContext: ApplicationVueContext_2) => IUseIntercept;
 
+// @beta (undocumented)
+export const useListing: (rootContext: ApplicationVueContext_2, listingKey?: listingKey) => IUseListing_2<Product>;
+
 // @beta
 export const useNavigation: (rootContext: ApplicationVueContext) => IUseNavigation;
 
@@ -409,7 +495,7 @@ export interface UseProduct<PRODUCT, SEARCH> {
 // @alpha (undocumented)
 export const useProduct: (rootContext: ApplicationVueContext, loadedProduct?: any) => UseProduct<Product, Search>;
 
-// @alpha (undocumented)
+// @beta @deprecated (undocumented)
 export interface UseProductListing {
  // (undocumented)
  [x: string]: any;
@@ -419,10 +505,13 @@ export interface UseProductListing {
  loading: Ref<boolean>;
 }
 
-// @alpha (undocumented)
+// @beta @deprecated (undocumented)
 export const useProductListing: (rootContext: ApplicationVueContext, initialListing?: ProductListingResult | undefined) => UseProductListing;
 
-// @alpha (undocumented)
+// @beta (undocumented)
+export const useProductQuickSearch: (rootContext: ApplicationVueContext_2) => IUseProductQuickSearch;
+
+// @alpha @deprecated (undocumented)
 export interface UseProductSearch {
  // (undocumented)
  availableFilters: Readonly<Ref<any>>;
@@ -456,7 +545,7 @@ export interface UseProductSearch {
  toggleFilter: (filter: EqualsFilter | RangeFilter, forceSave: boolean) => void;
 }
 
-// @alpha (undocumented)
+// @alpha @deprecated (undocumented)
 export const useProductSearch: (rootContext: ApplicationVueContext) => UseProductSearch;
 
 // @alpha (undocumented)

api/helpers.api.md

@@ -100,6 +100,9 @@ export const getFilterSearchCriteria: (selectedFilters: any) => any[];
 // @beta (undocumented)
 export function getListingAvailableFilters(aggregations: Aggregations | undefined | null): UiCategoryFilter[];
 
+// @beta (undocumented)
+export function getListingFilters(aggregations: Aggregations | undefined | null): ListingFilter[];
+
 // @alpha
 export function getMessagesFromErrorsArray(errors: ShopwareError[]): string[];
 
@@ -192,6 +195,16 @@ export function isProductSimple({ product, }?: {
  product?: Product;
 }): boolean;
 
+// @beta (undocumented)
+export interface ListingFilter {
+ // (undocumented)
+ [key: string]: any;
+ // (undocumented)
+ code: string;
+ // (undocumented)
+ label: string;
+}
+
 // @beta
 export function loadScript(src: string): Promise<void>;
 

api/shopware-6-client.api.md

@@ -27,6 +27,7 @@ import { SearchCriteria } from '@shopware-pwa/commons/interfaces/search/SearchCr
 import { SearchResult } from '@shopware-pwa/commons/interfaces/response/SearchResult';
 import { SessionContext } from '@shopware-pwa/commons/interfaces/response/SessionContext';
 import { ShippingMethod } from '@shopware-pwa/commons/interfaces/models/checkout/shipping/ShippingMethod';
+import { ShopwareSearchParams } from '@shopware-pwa/commons/interfaces/search/SearchCriteria';
 import { StoreNavigationElement } from '@shopware-pwa/commons/interfaces/models/content/navigation/Navigation';
 
 // @beta @deprecated
@@ -175,9 +176,15 @@ export function getCategories(searchCriteria?: SearchCriteria, contextInstance?:
 // @alpha (undocumented)
 export function getCategory(categoryId: string, contextInstance?: ShopwareApiInstance): Promise<Category>;
 
+// @beta
+export const getCategoryProducts: (categoryId: string, criteria?: ShopwareSearchParams | undefined, contextInstance?: ShopwareApiInstance) => Promise<ProductListingResult>;
+
 // @alpha
 export const getCategoryProductsListing: (categoryId: string, searchCriteria?: SearchCriteria | undefined, contextInstance?: ShopwareApiInstance) => Promise<ProductListingResult>;
 
+// @alpha (undocumented)
+export function getCmsPage(path: string, criteria?: ShopwareSearchParams, contextInstance?: ShopwareApiInstance): Promise<PageResolverResult<CmsPage>>;
+
 // @beta
 export function getCustomer(contextInstance?: ShopwareApiInstance): Promise<Customer | null>;
 
@@ -265,7 +272,7 @@ export function getStoreOrderPaymentUrl(orderId: string, contextInstance?: Shopw
  apiAlias: string;
 }>;
 
-// @beta (undocumented)
+// @alpha @deprecated (undocumented)
 export function getSuggestedResults(term: string, searchCriteria?: SearchCriteria, contextInstance?: ShopwareApiInstance): Promise<ProductListingResult>;
 
 // @alpha (undocumented)
@@ -373,6 +380,12 @@ export function removeCartItem(itemId: string, contextInstance?: ShopwareApiInst
 // @alpha
 export function resetPassword(params: CustomerResetPasswordParam, contextInstance?: ShopwareApiInstance): Promise<void>;
 
+// @beta
+export function searchProducts(criteria?: ShopwareSearchParams, contextInstance?: ShopwareApiInstance): Promise<ProductListingResult>;
+
+// @beta
+export function searchSuggestedProducts(criteria?: ShopwareSearchParams, contextInstance?: ShopwareApiInstance): Promise<ProductListingResult>;
+
 // @beta (undocumented)
 export function sendContactForm(params: ContactFormData, contextInstance?: ShopwareApiInstance): Promise<void>;
 

docs/landing/getting-started/upgrade.md

@@ -16,6 +16,16 @@ We want Shopware PWA to be in sync with the latest endpoints of Shopware, to be
 
 **MIGRATION STEP**: we simplified project upgrade process. Now you can remove `@shopware-pwa/*` dependencies repm your `package.json` file and leave only `@shopware-pwa/nuxt-module`. Thanks to this you change version only in a single place.
 
+**FEATURE**: new composable `useListing` has been created. It uses `createListingComposable` factory, which you can use as well is `useListing` won't be enough for your needs. It allows you to have listing for all types of listings from shopware, like products, orders etc. It supports SSR and returns composable with a common listing interface.
+
+**DEPRECATION**: composable `useCategoryFilters` is now deprecated - use `useListing` instead
+
+**DEPRECATION**: composable `useProductListing` is now deprecated - use `useListing` instead
+
+**DEPRECATION**: composable `useProductSearch` is now deprecated - use `useProductQuickSearch` instead
+
+**DEPRECATION**: API client method `getSuggestedResults` is now deprecated - use `searchSuggestedProducts` instead
+
 ## Migrate version 0.3.x to 0.4.x
 
 All changes are documented in our [Changelog](https://github.com/DivanteLtd/shopware-pwa/blob/master/CHANGELOG.md)

docs/landing/resources/api/composables.applicationvuecontext._route.md

@@ -0,0 +1,14 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@shopware-pwa/composables](./composables.md) &gt; [ApplicationVueContext](./composables.applicationvuecontext.md) &gt; [$route](./composables.applicationvuecontext._route.md)
+
+## ApplicationVueContext.$route property
+
+> 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.
+> 
+
+<b>Signature:</b>
+
+```typescript
+$route?: any;
+```

docs/landing/resources/api/composables.applicationvuecontext.md

@@ -23,13 +23,15 @@ export interface ApplicationVueContext extends VueConstructor
 | [$cookies](./composables.applicationvuecontext._cookies.md) | any | <b><i>(BETA)</i></b> |
 | [$i18n](./composables.applicationvuecontext._i18n.md) | any | <b><i>(BETA)</i></b> |
 | [$interceptors](./composables.applicationvuecontext._interceptors.md) | any | <b><i>(BETA)</i></b> |
+| [$route](./composables.applicationvuecontext._route.md) | any | <b><i>(BETA)</i></b> |
 | [$router](./composables.applicationvuecontext._router.md) | any | <b><i>(BETA)</i></b> |
 | [$shopwareApiInstance](./composables.applicationvuecontext._shopwareapiinstance.md) | ShopwareApiInstance | <b><i>(BETA)</i></b> |
 | [$shopwareDefaults](./composables.applicationvuecontext._shopwaredefaults.md) | any | <b><i>(BETA)</i></b> |
 | [$store](./composables.applicationvuecontext._store.md) | any | <b><i>(BETA)</i></b> |
 | [cookies](./composables.applicationvuecontext.cookies.md) | any | <b><i>(BETA)</i></b> |
 | [i18n](./composables.applicationvuecontext.i18n.md) | any | <b><i>(BETA)</i></b> |
 | [interceptors](./composables.applicationvuecontext.interceptors.md) | any | <b><i>(BETA)</i></b> |
+| [route](./composables.applicationvuecontext.route.md) | any | <b><i>(BETA)</i></b> |
 | [router](./composables.applicationvuecontext.router.md) | any | <b><i>(BETA)</i></b> |
 | [shopwareApiInstance](./composables.applicationvuecontext.shopwareapiinstance.md) | ShopwareApiInstance | <b><i>(BETA)</i></b> |
 | [shopwareDefaults](./composables.applicationvuecontext.shopwaredefaults.md) | any | <b><i>(BETA)</i></b> |

docs/landing/resources/api/composables.applicationvuecontext.route.md

@@ -0,0 +1,14 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@shopware-pwa/composables](./composables.md) &gt; [ApplicationVueContext](./composables.applicationvuecontext.md) &gt; [route](./composables.applicationvuecontext.route.md)
+
+## ApplicationVueContext.route property
+
+> 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.
+> 
+
+<b>Signature:</b>
+
+```typescript
+route?: any;
+```

docs/landing/resources/api/composables.createlistingcomposable.md

@@ -0,0 +1,32 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@shopware-pwa/composables](./composables.md) &gt; [createListingComposable](./composables.createlistingcomposable.md)
+
+## createListingComposable() function
+
+> 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.
+> 
+
+Factory to create your own listing. By default you can use useListing composable, which provides you predefined listings for category(cms) listing and product search listing. Using factory you can provide our own compatible search method and use it for example for creating listing of orders in my account.
+
+<b>Signature:</b>
+
+```typescript
+export declare function createListingComposable<ELEMENTS_TYPE>({ rootContext, searchMethod, searchDefaults, listingKey, }: {
+ rootContext: ApplicationVueContext;
+ searchMethod: (searchParams: Partial<ShopwareSearchParams>) => Promise<ProductListingResult>;
+ searchDefaults: ShopwareSearchParams;
+ listingKey: string;
+}): IUseListing<ELEMENTS_TYPE>;
+```
+
+## Parameters
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| { rootContext, searchMethod, searchDefaults, listingKey, } | { rootContext: [ApplicationVueContext](./composables.applicationvuecontext.md)<!-- -->; searchMethod: (searchParams: Partial&lt;ShopwareSearchParams&gt;) =&gt; Promise&lt;ProductListingResult&gt;; searchDefaults: ShopwareSearchParams; listingKey: string; } | |
+
+<b>Returns:</b>
+
+[IUseListing](./composables.iuselisting.md)<!-- -->&lt;ELEMENTS\_TYPE&gt;
+

docs/landing/resources/api/composables.getapplicationcontext.md

@@ -15,6 +15,7 @@ export declare function getApplicationContext(rootContext: ApplicationVueContext
  apiInstance: ShopwareApiInstance | undefined;
  vuexStore: any;
  router: any;
+ route: any;
  i18n: any;
  cookies: any;
  shopwareDefaults: any;
@@ -32,5 +33,5 @@ export declare function getApplicationContext(rootContext: ApplicationVueContext
 
 <b>Returns:</b>
 
-{ apiInstance: ShopwareApiInstance \| undefined; vuexStore: any; router: any; i18n: any; cookies: any; shopwareDefaults: any; interceptors: any; contextName: string; }
+{ apiInstance: ShopwareApiInstance \| undefined; vuexStore: any; router: any; route: any; i18n: any; cookies: any; shopwareDefaults: any; interceptors: any; contextName: string; }