Merge pull request #49 from vuestorefront-community/dev

chore: release final version 1.4.0

.gitmodules

@@ -0,0 +1,8 @@
+[submodule "theme"]
+	path = theme
+	url = https://github.com/vuestorefront-community/template-odoo
+	branch = develop
+[submodule "packages/theme"]
+	path = packages/theme
+	url = https://github.com/vuestorefront-community/template-odoo
+	branch = develop

README.md

@@ -22,6 +22,8 @@ Check our [demo](https://vsf.labs.odoogap.com/) server (it's a dev server so cou
 
 ```sh
 1. git clone https://github.com/vuestorefront-community/odoo
+2. git submodule init
+3. git submodule update # now you fetched the theme submodule from template-odoo
 2. yarn install
 3. yarn build # (optional) Verify if everything works properly by building all three projects
 4. yarn dev

docs/.vuepress/config.js

@@ -3,7 +3,7 @@ const GTM_TAG = 'GTM-WMDC3CP';
 
 module.exports = {
   title: 'Vue Storefront 2 for Odoo',
-  base: '/',
+  base: '/odoo/',
   description: description,
   head: [
     ['link', { rel: 'icon', href: '/favicon.png' }],
@@ -36,6 +36,7 @@ module.exports = {
     }))
   },
   plugins: [
+    ['@kawarimidoll/tailwind', { prefix: 'tw-' }],
     '@vuepress/plugin-back-to-top',
     [
       '@vuepress/plugin-medium-zoom',
@@ -70,28 +71,38 @@ module.exports = {
         collapsable: false,
         children: [
           ['/', 'Introduction'],
+          '/essentials/features',
+          '/essentials/ecosystem',
           '/essentials/configuration',
-          '/essentials/customQueries',
-          '/essentials/payment',
           '/essentials/maintainers'
         ]
       },
+      {
+        title: 'Guides',
+        collapsable: true,
+        children: [
+          '/guides/imageHandle',
+          '/guides/customQueries',
+          '/guides/customApis',
+          '/guides/payment'
+        ]
+      },
       {
         title: 'Composables',
         collapsable: true,
         children: [
           ['/composables/useCart', 'useCart'],
           ['/composables/useCategory', 'useCategory'],
-          ['/composables/useCountrySearch', 'useCountrySearch'],
           ['/composables/useFacet', 'useFacet'],
-          ['/composables/usePassword', 'usePassword'],
           ['/composables/useProduct', 'useProduct'],
-          ['/composables/useProductVariant', 'useProductVariant'],
           ['/composables/useShipping', 'useShipping'],
           ['/composables/useUser', 'useUser'],
           ['/composables/useUserBilling', 'useUserBilling'],
           ['/composables/useWishlist', 'useWishlist'],
           ['/composables/useOrder', 'useOrder'],
+          ['/composables/usePassword', 'usePassword'],
+          ['/composables/useProductVariant', 'useProductVariant'],
+          ['/composables/useCountrySearch', 'useCountrySearch'],
           ['/composables/customQueries', 'customQueries'],
         ]
       },

docs/.vuepress/styles/index.styl

@@ -1,3 +1,5 @@
+@tailwind components;
+@tailwind utilities;
 
 .site-name {
   display: none !important;

docs/composables/useCart.md

@@ -1,8 +1,9 @@
 # UseCart Composable
 
+::: tip Base  (Methods, Interfaces, Properties)
+[VSF usecart](https://docs.vuestorefront.io/v2/reference/api/core.usecart.html)
+:::
 ## Features
-**UseCart** composable can be used to:
-
 * load cart information.
 * add, update and remove items in the cart.
 * checking if product is already added to the cart.
@@ -46,7 +47,7 @@ type OrderLine = {
 }
 ```
 
-## Example
+## Example 1
 
 ```ts
 import { useCart, cartGetters } from '@vue-storefront/odoo';
@@ -58,6 +59,8 @@ export default {
 
     onSSR(async () => {
       await loadCart();
+      await loadCart({ customQuery: { cartLoad: 'myAwesomeCustomQuery' } }) // With optional custom query
+
     })
 
     return {
@@ -69,4 +72,96 @@ export default {
     }
   }
 }
+```
+
+## Example 2 - update item qty
+
+```ts
+import { useCart, cartGetters } from '@vue-storefront/odoo';
+import { OrderLine } from '@vue-storefront/odoo-api';
+import { onSSR } from '@vue-storefront/core'
+
+export default {
+  props: {
+    orderLine: {
+      type: Object as PropType<OrderLine>,
+      default: () => ({})
+    }
+  },
+  setup (props) {
+    const { updateItemQty } = useCart();
+
+    const handleUpdateItem = async (orderLine, quantity) => {
+
+      await updateItemQty({
+         product: props.orderLine, 
+         quantity: Number(quantity), 
+         customQuery: { cartUpdateItemQty: 'customUpdateQtyQuery'} // With optional custom query
+      }); 
+    };
+
+
+    ...
+  }
+}
+```
+
+## Example 3 - remove item
+
+```ts
+import { useCart, cartGetters } from '@vue-storefront/odoo';
+import { OrderLine } from '@vue-storefront/odoo-api';
+import { onSSR } from '@vue-storefront/core'
+
+export default {
+  props: {
+    orderLine: {
+      type: Object as PropType<OrderLine>,
+      default: () => ({})
+    }
+  },
+  setup (props) {
+    const { removeItem, isInCart, cart } = useCart();
+
+    const handleRemoveItem = async (orderLine: OrderLine) => {
+      await removeItem({ 
+        product: { id: orderLine.id }, 
+        customQuery: { cartRemoveItem: 'customRemoveItemQuery'} }); // With optional custom query
+      }
+      ...
+    }
+}
+```
+
+## Example 4 - add item to cart
+
+```ts
+import { useCart, cartGetters } from '@vue-storefront/odoo';
+import { OrderLine } from '@vue-storefront/odoo-api';
+import { onSSR } from '@vue-storefront/core'
+
+export default {
+  props: {
+    orderLine: {
+      type: Object as PropType<OrderLine>,
+      default: () => ({})
+    }
+  },
+  setup (props) {
+    const { addItem } = useCart();
+
+    const handleAddItem = async (product, quantity) => {
+      if (!productInStock.value) return; // custom rule, depends on the client needs
+
+      await addItem({ 
+        product, 
+        quantity,
+        customQuery: { cartAddItem: 'customAddItemQuery'} }); // With optional custom query 
+      }); 
+    };
+
+
+    ...
+  }
+}
 ```

docs/composables/useCategory.md

@@ -1,15 +1,10 @@
 # UseCategory Composable
 
-
+::: tip Base  (Methods, Interfaces, Properties)
+[VSF useCategory](https://docs.vuestorefront.io/v2/reference/api/core.usecategory.html)
+:::
 ## Features
-**UseCart** composable can be used to:
-
 * search a list of categories.
-    * the search method accpetsa single params Object.
-        ```ts
-         term: string // name of category to filter
-         topCategory: boolean 
-        ```
 
 ## API
 A **Category** in odoo can have a parent.
@@ -25,6 +20,33 @@ type Category = {
 }
 ```
 
+## Params 
+The base Graphql params is
+
+```ts
+export type GraphQlGetCategoryParams = {
+  filter: CategoryFilterInput;
+  currentPage?: number;
+  pageSize?: number;
+  search?: string;
+  sort?: CategorySortInput;
+};
+
+export type CategoryFilterInput = {
+  id: number;
+  parent: boolean; 
+};
+
+export type CategorySortInput = {
+  id: SortEnum;
+};
+
+export enum SortEnum {
+  ASC,
+  DESC
+}
+```
+
 ## Example
 
 ```ts
@@ -33,10 +55,14 @@ import { onSSR } from '@vue-storefront/core'
 
 export default {
   setup () {
-    const { categories: topCategories, search, loading } = useCategory();
+    const { search, categories } = useCategory();
 
     onSSR(async () => {
-      await search({ topCategory: true});
+      await search({
+        filter: { parent: true }, // Optional filter
+        pageSize: 12, // Optional filter
+        customQuery: { getCategory: 'customGetCategoryQuery' } // Optional custom query
+      });
     });
 
     return {

docs/composables/useCountrySearch.md

@@ -38,11 +38,10 @@ export default {
   const { search, searchCountryStates, countries, countryStates } = useCountrySearch();
 
     onSSR(async () => {
-      await search({});
+      await search();
     });
 
-     watch(
-      () => form.value.country,
+     watch(() => form.value.country,
       async () => {
         await searchCountryStates(form.value.country);
       }

docs/composables/useFacet.md

@@ -1,13 +1,49 @@
 # UseFacet Composable
-**UseFacet** composable can be used to:
 
+::: tip Base  (Methods, Interfaces, Properties)
+[VSF useFacet](https://docs.vuestorefront.io/v2/reference/api/core.usefacet.html)
+:::
+## Features
 - search product list with **pagination** and **attributes**
 - search categories
 - both will be filtered by the uiHelper
 
 ## API
 
 ```ts
+// Input params
+export type Params = {
+  filter: ParamsFromUrlFilterInput;
+  currentPage: number;
+  pageSize: number;
+  search: string;
+  categorySlug?: string;
+  sort: ProductSortInput;
+  customQueryProducts: any;
+  customQueryCategories: any;
+  fetchCategory?: boolean; // false = fetch only products
+};
+
+export type ParamsFromUrlFilterInput = {
+  categoryId?: number;
+  attributeValueId: number[];
+  minPrice: string;
+  maxPrice: string;
+};
+
+export type ProductSortInput = {
+  id?: SortEnum;
+  price?: SortEnum;
+};
+
+export enum SortEnum {
+  ASC,
+  DESC
+}
+```
+
+```ts
+// Response
 type FacetSearchResult = {
   minPrice: number;
   maxPrice: number;
@@ -34,10 +70,22 @@ export default {
     const { result, search, loading } = useFacet();
 
     onSSR(async () => {
-        await search(th.getFacets());
+        await search(th.getFacets()); // VSF default example, helpers will organize the url params and pass to search
+
+        await search({
+          search: 'shirt',
+          pageSize: 12,
+          currentPage: 1,
+          fetchCategory: true,
+          customQueryProducts: { getProductTemplatesList: 'customProductListQuery' } // Optional custom query
+          customQueryProducts: { getProductTemplatesList: 'customProductListQuery' } // Optional custom query
+        });
     });
 
     return {
+      products: computed(() => result.value?.data?.products),
+      categories: computed(() => result.value?.data?.categories),
+      total: computed(() => result?.value?.data?.totalProducts),
       result
     }
   }

docs/composables/usePassword.md

@@ -13,10 +13,20 @@ import { onSSR } from '@vue-storefront/core'
 
 export default {
   setup () {
-     const { sendResetPassword, errorPassword, resetPasswordErrors } = usePassword();
+     const { sendResetPassword, errorPassword, resetPassword } = usePassword();
+
+     const handleSendResetPassword = async (email) => {
+       await sendResetPassword({ email })
+     }
+
+     // Usually token will be redirected from user email in query param
+     // New password from input
+     const handleResetPassword = async () => {
+       await resetPassword({ password: newPassword, token })
+     }
 
     return {
-      sendResetPassword, 
+      handleSendResetPassword, 
       errorPassword, 
       resetPasswordErrors
     }