@viur/shop-components 0.0.1-dev.18 → 0.0.1-dev.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.0.1-dev.18",
+  "version": "0.0.1-dev.19",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",

package/src/components/cart/CartView.vue

@@ -1,6 +1,10 @@
 <template>
-  <pre> {{ state.nodes }}</pre>
-  <pre> {{ state.leaves }}</pre>
+  <Loader v-if="!cartKey.length"></Loader>
+  <template v-else>
+    <pre> {{ state.nodes }}</pre>
+    <pre> {{ state.leaves }}</pre>
+  </template>
+
   <!-- <CartNode></CartNode>
   <CartLeaf></CartLeaf> -->
   <!-- <template v-else>
@@ -314,9 +318,9 @@ function onDialogHide() {
 }
 
 async function getChildren(parentKey = props.key) {
-  console.log("debug getChildren parentKey from comp: ", parentKey)
+  console.log("debug getChildren parentKey from comp: ", parentKey);
   const children = await cartStore.getChildren(parentKey);
-  console.log("getChildren children: ", children)
+  console.log("getChildren children: ", children);
 
   children.forEach(async (child) => {
     if (child.skel_type === "node") {

package/src/components/order/process/ExampleUsage.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { onBeforeMount, reactive, shallowRef, ref } from "vue";
+import { onBeforeMount, reactive, shallowRef, computed } from "vue";
 import { ListRequest } from "@viur/vue-utils";
 
 import CartView from "../../cart/CartView.vue";
@@ -17,7 +17,9 @@ import { useCartStore } from "../../../stores/cart";
 
 const cartStore = useCartStore();
 
-const rootNode = ref(null);
+const rootNode = computed(() =>
+  cartStore.state.basketRootNode.key ? cartStore.state.basketRootNode.key : "",
+);
 const state = reactive({
   rootNode: {},
   tabs: {
@@ -26,7 +28,7 @@ const state = reactive({
       props: {
         sidebar: true,
         mode: "basket",
-        cartKey: rootNode.value.key,
+        cartKey: rootNode,
       }, // cartKey (on initial call has to be a root node) is a required prop, make sure that cartStore.init() is called before cart is mounted
       displayName: "Warenkorb",
       icon: { name: "cart", library: "hsk" },
@@ -105,7 +107,5 @@ onBeforeMount(async () => {
   await cartStore.getAdressStructure();
 
   console.log("debug init exampleusage :", cartStore.state.basketRootNode);
-
-  rootNode.value = cartStore.state.basketRootNode.key;
 });
 </script>