chore(update nuxt version / dependencies): project configuration

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.19.0.cjs"

lerna.json

@@ -9,7 +9,7 @@
   },
   "packages": [
     "packages/**/*",
-    "playground/**/*"
+    "playground-nuxt/**/*"
   ],
   "version": "1.0.0"
-}
+}

package.json

@@ -4,9 +4,9 @@
   "license": "MIT",
   "scripts": {
     "build": "lerna run build",
-    "dev": "concurrently --names \"Frontend,Server\" \"npm run dev:app\" \"npm run dev:server\"",
-    "dev:app": "cd playground/app && npm run dev",
-    "dev:server": "cd playground/server && npm run dev",
+    "dev": "concurrently --names \"Frontend\" \"npm run dev:app\"",
+    "dev:app": "cd playground-nuxt/app && npm run dev",
+    "dev:server": "cd playground-nuxt/server && npm run dev",
     "test": "lerna run test"
   },
   "config": {
@@ -50,7 +50,7 @@
   },
   "workspaces": [
     "packages/*",
-    "playground/*"
+    "playground-nuxt/*"
   ],
   "dependencies": {
     "@commitlint/prompt": "^17.6.7",

playground-nuxt/app/.env.example

@@ -0,0 +1,18 @@
+ODOO_BASE_URL=https://vsfdemo15.labs.odoogap.com/graphql/vsf
+
+NUXT_PUBLIC_MIDDLEWARE_URL=http://localhost:3000/
+NUXT_PUBLIC_MIDDLEWARE_PORT=8443
+
+NODE_ENV=dev
+NUXT_NODE_LOCALE=en-EN
+NUXT_PUBLIC_VSF_PORT=3000
+
+REDIS_ENABLED=false
+REDIS_HOST=127.0.0.1
+REDIS_PORT=6379
+REDIS_PASSWORD=pass
+# Used for invalidating cache
+NUXT_REDIS_INVALIDATION_KEY=123
+
+NUXT_TELEMETRY_DISABLED=1
+GOOGLE_TAG_MANAGER_ID=1

playground/app/components/Navbar.vue → playground-nuxt/app/components/Navbar.vue

@@ -11,14 +11,14 @@ import {
   useDisclosure
 } from '@storefront-ui/vue';
 
-import { sdk } from '../sdk.config';
-import { CartData } from '@erpgap/odoo-sdk-api-client';
+const { $sdk } = useNuxtApp();
+
+import { CartData } from '~/graphql';
 const { toggle } = useDisclosure();
 const cartDrawerOpen = useState('cartDrawer', () => false);
 
 const cart = useState<CartData>('cart', () => { })
 
-
 const actionItems = [
   {
     icon: SfIconShoppingCart,
@@ -27,7 +27,7 @@ const actionItems = [
     label: '',
     action: async () => {
       cartDrawerOpen.value = !cartDrawerOpen.value
-      const { data } = await sdk.odoo.cartLoad()
+      const { data } = await $sdk().odoo.cartLoad()
       cart.value = data?.cart || {}
     }
   },

playground/app/components/ProductCard.vue → playground-nuxt/app/components/ProductCard.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-import { sdk } from '../sdk.config';
+import { SfRating, SfCounter, SfLink, SfButton, SfIconShoppingCart, SfIconFavorite } from '@storefront-ui/vue';
+import { Product } from '~/graphql';
+
+const { $sdk } = useNuxtApp();
 
 const props = defineProps({
   product: {
@@ -10,12 +13,11 @@ const props = defineProps({
 
 const handleAddToCart = async () => {
   if (props.product?.firstVariant?.id)
-    await sdk.odoo.cartAdd({ productId: props.product.firstVariant.id, quantity: 1 }, { 'cartAdd': '123' });
+    await $sdk().odoo.cartAdd({ productId: props.product.firstVariant.id, quantity: 1 }, { 'cartAdd': '123' });
 }
 
 
-import { SfRating, SfCounter, SfLink, SfButton, SfIconShoppingCart, SfIconFavorite } from '@storefront-ui/vue';
-import { Product } from '@erpgap/odoo-sdk-api-client';
+
 </script>
 <template>
   <div class="border border-neutral-200 rounded-md hover:shadow-lg max-w-[300px]">

playground/app/components/cart/Product.vue → playground-nuxt/app/components/cart/Product.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { CartData, OrderLine } from '@erpgap/odoo-sdk-api-client';
+import { CartData, OrderLine } from '~/graphql';
 import { SfButton, SfIconAdd, SfIconRemove } from '@storefront-ui/vue';
 
-import { sdk } from '../../sdk.config';
+const { $sdk } = useNuxtApp();
 
 const cart = useState<CartData>('cart', () => { })
 
@@ -16,12 +16,12 @@ const props = defineProps({
 const quantity = ref(Number(props.orderLine.quantity))
 
 const handleRemoveFromCart = async () => {
-    const { data } = await sdk.odoo.cartRemove({ lineId: props.orderLine.id })
+    const { data } = await $sdk().odoo.cartRemove({ lineId: props.orderLine.id })
     cart.value = data?.cartRemoveItem || {}
 }
 
 const handleUpdateQuantity = async () => {
-    await sdk.odoo.cartUpdate({ lineId: props.orderLine.id, quantity: quantity.value })
+    await $sdk().odoo.cartUpdate({ lineId: props.orderLine.id, quantity: quantity.value })
 }
 
 

playground/app/nuxt.config.ts → playground-nuxt/app/nuxt.config.ts

@@ -1,20 +1,16 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss', '@nuxt/devtools'],
-  vite: {
-      server: {
-        fs: {
-          strict: false,
-          // used to allow importing from outside of the root directory
-        }
-      }
-
-  },
   runtimeConfig:{
     public: {
+      middlewareUrl: '',
+      middlewarePort: 8181,
       odooImageUrl: ''
     }
   },
+  build: {
+    transpile: ['tslib', '@apollo/client', '@apollo/client/core', '@vue/apollo-composable', '@vue/apollo-option', 'ts-invariant', 'vue-toastification', '@erpgap/odoo-sdk-api-client']
+  },
   devtools: {
     enabled: true
   }

playground/app/package.json → playground-nuxt/app/package.json

@@ -12,21 +12,22 @@
     "codegen": "graphql-codegen"
   },
   "dependencies": {
+    "@erpgap/odoo-sdk-api-client": "*",
     "@nuxtjs/tailwindcss": "^6.6.5",
     "clipboard": "^2.0.11",
     "vue3-json-viewer": "^2.2.2"
   },
   "devDependencies": {
-    "@nuxtjs/tailwindcss": "^6.6.5",
-    "@storefront-ui/typography": "^2.0.0",
-    "@storefront-ui/vue": "^2.2.0",
-    "nuxt": "^3.6.0",
     "@graphql-codegen/cli": "^4.0.1",
     "@graphql-codegen/client-preset": "^4.0.1",
     "@graphql-codegen/typescript": "^4.0.1",
     "@graphql-codegen/typescript-generic-sdk": "^3.1.0",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@typescript-eslint/eslint-plugin": "^6.1.0"
+    "@nuxtjs/tailwindcss": "^6.6.5",
+    "@storefront-ui/typography": "^2.0.0",
+    "@storefront-ui/vue": "^2.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "nuxt": "^3.8.0"
   },
   "resolutions": {
     "consola": "^3.0.0"

playground/app/pages/category/[id].vue → playground-nuxt/app/pages/category/[id].vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { Product } from '@erpgap/odoo-sdk-api-client';
-import { sdk } from '../../sdk.config';
-
+import { Product } from '~/graphql';
+const { $sdk } = useNuxtApp()
 const products = useState<Product[]>('data', () => [])
 
-const { data, status } = await useAsyncData('data', async () => await sdk.odoo.getProductTemplateList({ pageSize: 12, filter: { categoryId: [14] } }));
+const { data, status } = await useAsyncData('data', async () => await $sdk().odoo.getProductTemplateList({ pageSize: 12, filter: { categoryId: [14] } }));
 products.value = data.value?.data?.products?.products || [];
 
 </script>

playground-nuxt/app/pages/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { QueryProductVariantArgs, ProductVariantQueryResponse, MutationLoginArgs, LoginMutationResponse } from '~/graphql'
+import { QueryName } from '~/server/queries';
+import { MutationName } from '~/server/mutations';
+
+const { $sdk } = useNuxtApp();
+
+const { data } = await $sdk().odoo.query<QueryProductVariantArgs, ProductVariantQueryResponse>({ queryName: QueryName.ProductVariantQuery }, {
+  productTemplateId: 39,
+  combinationId: [12, 305]
+});
+
+console.log(data.productVariant.displayName);
+
+const { data: dataMut } = await $sdk().odoo.mutation<MutationLoginArgs, LoginMutationResponse>({ mutationName: MutationName.LoginMutation }, {
+  email: "[email protected]",
+  password: "123"
+});
+
+
+</script>
+
+<template>
+  <div>
+    <MainBanner />
+
+  </div>
+</template>

playground/app/plugins/2.getImage.client.ts → playground-nuxt/app/plugins/2.getImage.client.ts

@@ -1,8 +1,6 @@
-import { defineNuxtPlugin } from '#app';
 export default defineNuxtPlugin(async (nuxtApp) => {
   const config = useRuntimeConfig()
 
-
   return {
     provide: {
       getImage: (imagePath: string, width: number, heigth: number, name: string) => {

playground-nuxt/app/plugins/3.sdk.ts

@@ -0,0 +1,18 @@
+import { initSDK, buildModule } from '@vue-storefront/sdk';
+import { OdooModule,  OdooModuleType } from '@erpgap/odoo-sdk'; 
+
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const config = useRuntimeConfig();
+
+  const sdkConfig = {
+    odoo: buildModule<OdooModuleType>(OdooModule, {
+      apiUrl: `${config.public.middlewareUrl}api/odoo/`
+    })
+  };
+
+  return {
+    provide: {
+      sdk: () => initSDK<typeof sdkConfig>(sdkConfig)
+    }
+  };
+});

playground-nuxt/app/server/api/odoo/mutation.post.ts

@@ -0,0 +1,10 @@
+import { Endpoints } from '@erpgap/odoo-sdk-api-client';
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event);
+
+  const api: Endpoints = event.context.apolloClient.api;
+
+  return await api.mutation(body[0], body[1]);
+});
+

playground-nuxt/app/server/api/odoo/query.post.ts

@@ -0,0 +1,10 @@
+import { Endpoints } from '@erpgap/odoo-sdk-api-client';
+
+export default cachedEventHandler(async (event) => {
+  const body = await readBody(event);
+
+  const api: Endpoints = event.context.apolloClient.api;
+
+  return await api.query(body[0], body[1]);
+});
+

playground-nuxt/app/server/middleware/apolloClient.ts

@@ -0,0 +1,12 @@
+import { createApiClient } from '@erpgap/odoo-sdk-api-client/server';
+import { Queries } from '~/server/queries';
+import { Mutations } from '~/server/mutations';
+
+export default defineEventHandler((event) => {
+
+  event.context.apolloClient = createApiClient({
+    odooGraphqlUrl: `${process.env.ODOO_BASE_URL}graphql/vsf`,
+    queries: { ...Queries, ...Mutations }
+  });
+});
+

playground-nuxt/app/server/mutations/ChangePasswordMutation.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client/core';
+export default gql`
+mutation($newPassword: String!, $token: String!) {
+    changePassword(newPassword: $newPassword, token: $token) {
+      id
+      name
+      email
+    }
+  }
+`;

playground-nuxt/app/server/mutations/CreateNewAccountMutation.ts

@@ -0,0 +1,25 @@
+import { gql } from '@apollo/client/core';
+
+export default gql`
+mutation register($companyName: String!, $firstName: String!, $lastName: String!, $email: String!, $location : String!$password: String!, $phoneNumber: String!) {
+    register(companyName: $companyName, firstName: $firstName, lastName: $lastName, email: $email, location: $location, password: $password,  phoneNumber: $phoneNumber) {
+      partner{
+        id
+        name
+        street
+        street2
+        city
+        state
+        {
+          id 
+        }
+        country
+        {
+          id
+        }
+        email
+        phone
+      }
+    }
+  }`;
+

playground-nuxt/app/server/mutations/LoginMutation.ts

@@ -0,0 +1,23 @@
+import { gql } from '@apollo/client/core';
+export default gql`
+mutation($email: String!, $password: String!) {
+    login(email: $email, password: $password) {
+      partner{
+        id
+        name
+        street
+        street2
+        city
+        state 
+        {
+          id
+        }
+        country
+        {
+          id
+        }
+        email
+        phone
+      }
+    }
+  }`;

playground-nuxt/app/server/mutations/LogoutMutation.ts

@@ -0,0 +1,6 @@
+import { gql } from '@apollo/client/core';
+export default gql`
+mutation {
+    logout
+  }
+`;

playground-nuxt/app/server/mutations/SendResetPasswordMutation.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client/core';
+export default gql`
+mutation($email: String!) {
+    resetPassword(email: $email) {
+      id
+      name
+      email
+    }
+  }
+`;