@viur/shop-components 0.0.1-dev.2 → 0.0.1-dev.20

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

@@ -0,0 +1,210 @@
+<template>
+  <div class="bind viur-shop-wrap">
+    <sl-tab-group
+      class="viur-shop-order-tab"
+      noScrollControls
+      @sl-tab-show="onTabChange"
+      ref="tabGroup"
+    >
+      <sl-tab
+        slot="nav"
+        :panel="tab"
+        v-for="(tab, index) in state.tabNames"
+        :key="tab"
+        :disabled="tabs[tab].disabled"
+      >
+        <div class="viur-shop-order-step">
+          <sl-icon
+            :name="tabs[tab].icon.name"
+            :library="tabs[tab].icon.library"
+          >
+          </sl-icon>
+          <div class="viur-shop-order-status-text">
+            {{ index + 1 }}. {{ tabs[tab].displayName }}
+          </div>
+        </div>
+        <sl-icon
+          name="chevron-right"
+          class="viur-shop-order-tab-check"
+          v-if="index < state.tabNames.length - 1"
+        ></sl-icon>
+      </sl-tab>
+
+      <sl-tab-panel
+        :name="tab"
+        v-for="(tab, index) in state.tabNames"
+        :key="tab"
+      >
+        <component
+          :is="tabs[tab].component"
+          v-bind="tabs[tab].props ? tabs[tab].props : ''"
+        >
+        </component>
+        <div
+          class="viur-shop-form-footer"
+          :class="{ 'flex-end': state.isFirstTab(index) }"
+          v-if="index !== state.tabNames.length - 1"
+        >
+          <sl-button type="submit" v-show="index !== 0" @click="prevTab(state.tabNames[index-1])">
+            Zurück
+          </sl-button>
+          <!-- :disabled="!state.requiredFieldsFilled" -->
+          <sl-button type="submit" variant="primary" @click="nextTab(state.tabNames[index+1])">
+            Weiter
+          </sl-button>
+        </div>
+      </sl-tab-panel>
+    </sl-tab-group>
+
+    <div class="viur-shop-sidebar" id="order_sidebar"></div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, computed, ref } from "vue";
+
+const props = defineProps({
+  tabs: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["tabChange"]);
+
+const state = reactive({
+  tabNames: computed(() => sortTabs(props.tabs)),
+  isFirstTab: (index) => {
+    if (index === 0) {
+      return true;
+    }
+    return false;
+  },
+});
+
+const tabGroup = ref(null);
+
+function sortTabs(tabs) {
+  let sortedArray = [];
+  let outputArray = [];
+
+  for (const tab in tabs) {
+    if (tabs[tab].position) {
+      sortedArray.push([tab, tabs[tab].position]);
+    } else {
+      sortedArray.push([tab, 0]);
+    }
+  }
+
+  sortedArray.sort((a, b) => {
+    return a[1] - b[1];
+  });
+
+  sortedArray.forEach((tab) => {
+    outputArray.push(tab[0]);
+  });
+
+  return outputArray;
+}
+
+function onTabChange(e) {
+  emit("tabChange", e);
+}
+
+
+function prevTab(tabName) {
+  tabGroup.value.show(tabName);
+}
+
+function nextTab(tabName) {
+  tabGroup.value.show(tabName);
+}
+</script>
+
+<style scoped>
+.viur-shop-wrap {
+  flex-direction: row;
+  gap: var(--sl-spacing-x-large);
+  align-items: flex-start;
+}
+
+.viur-shop-sidebar {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--sl-color-neutral-100);
+  min-width: 300px;
+  padding: var(--sl-spacing-medium);
+  position: sticky;
+  top: 0;
+}
+
+.viur-shop-order-tab {
+  sl-tab {
+    width: 25%;
+
+    &::part(base) {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      color: var(--sl-color-neutral-400);
+    }
+
+    &[aria-selected="true"]::part(base) {
+      color: var(--ignt-color-primary) !important;
+    }
+  }
+}
+
+.viur-shop-order-step {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  @media (--ignt-mq-max-break-small) {
+    justify-content: center;
+  }
+
+  sl-icon {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+
+    @media (--ignt-mq-max-break-small) {
+      display: none;
+    }
+  }
+}
+
+.viur-shop-order-tab-check {
+  position: absolute;
+  right: -0.5em;
+
+  @media (--ignt-mq-max-break-small) {
+    font-size: 0.7em;
+    right: -0.35em;
+    top: calc(50% - 0.35em);
+  }
+}
+
+.viur-shop-order-status-text {
+  font-size: 0.8em;
+  color: inherit;
+  text-align: center;
+  margin-top: 0.6em;
+  white-space: initial;
+}
+
+.viur-shop-form-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--sl-spacing-large);
+}
+.flex-end {
+  justify-content: flex-end;
+}
+</style>

package/src/router/index.js

@@ -19,11 +19,21 @@ const default_routes = [
     component: () => import("../components/order/item/ItemView.vue"),
   },
   {
-    path: "/shop/basket/",
-    name: "BasketView",
-    component: () => import("../components/cart/BasketView.vue"),
+    path: "/shop/cart/view",
+    name: "CartView",
+    component: () => import("../components/cart/CartView.vue"),
   },
-];
+  {
+    path: "/shop/order/",
+    name: "OrderView",
+    component: () => import("../components/order/process/ExampleUsage.vue"),
+  },
+  {
+    path: "/shop/order/confirm",
+    name: "ConfirmView",
+    component: () => import("../components/cart/ConfirmView.vue"),
+  },
+];4
 
 function createRouterInstance(routes, replace = false) {
   let newRoutes = [];

package/src/stores/cart.js

@@ -1,98 +1,117 @@
 import { reactive } from "vue";
-import { Request } from "@viur/vue-utils";
+import { Request, ListRequest } from "@viur/vue-utils";
 import { defineStore } from "pinia";
 import { ViURShopClient } from "@viur/viur-shop-client";
 
 export const useCartStore = defineStore("cartstore", () => {
+  const shopClient = new ViURShopClient({
+    host_url:
+      window.location.origin === "http://localhost:8081"
+        ? "http://localhost:8080"
+        : window.location.origin,
+  });
+
   const state = reactive({
-    currentCart: "",
-    allCarts: {},
-    cartItems: {},
-    basketArticle: [],
+    basketRootNode: {},
+    whishlistRootNodes: [],
+    children: {},
+    structure: { address: {}, cart: {} },
   });
 
-  function init() {
-    listCarts().then(async (resp) => {
-      let data = await resp.json();
-      getBasket(data);
-      data.forEach((cart) => {
-        state.allCarts[cart.key] = cart;
-        getCartItems(cart.key).then(async (resp) => {
-          let data = await resp.json();
-          state.cartItems[cart.key] = data;
-        });
-      });
-    });
+  async function init() {
+    // ! initializes only children for cart of type basket
+    // ! for whishlists this has to be done in the component
+    await getRootNodes();
+  }
 
-    console.log("hier", state.currentCart);
+  async function getChildren(parentKey) {
+    let resp = await shopClient.cart_list({ cart_key: parentKey });
 
-    getBasketItems(state.currentCart).then(async (resp) => {
-      let data = await resp.json();
-      console.log("cartStore basket article", data);
-      state.basketArticle = data;
-    });
+    return resp
+  }
 
-    // state.allCarts.forEach((cart) => {
-    //   getCartItems(cart.key).then(async (resp) => {
-    //     let data = await resp.json();
-    //     state.cartItems[cartKey] = data;
-    //   });
-    // });
+  async function getRootNodes() {
+    let resp = await shopClient.cart_list();
+
+    resp.forEach((rootNode) => {
+      if (rootNode.is_root_node) {
+        if (rootNode.cart_type === "basket") {
+          state.basketRootNode = rootNode;
+        } else {
+          state.whishlistRootNodes.push(rootNode);
+        }
+      }
+    });
   }
 
-  function listCarts() {
-    return Request.get("/shop/api/cart_list");
-    // const sc = new ViURShopClient();
+  async function addToCart(articleKey, cartKey) {
+    let resp = await shopClient.article_add({
+      article_key: articleKey,
+      parent_cart_key: cartKey,
+    });
 
-    // sc.cart_list().then(async (resp) => console.log("test", await resp.json));
+    await updateCart(cartKey);
+    console.log("addToCart", resp); //TODO: Errorhandling as soon as shop module works again
   }
 
-  function getBasket(skellist) {
-    skellist.forEach((cart) => {
-      if ((cart.cart_type = "basket")) {
-        state.currentCart = cart.key;
-      }
+  async function getArticleView(articleKey, cartKey) {
+    let article = await shopClient.article_view({
+      article_key: articleKey,
+      parent_cart_key: cartKey,
     });
+
+    console.log("getArticleView", article); // ? Talk about necessarity
   }
 
-  function getBasketItems(cartKey) {
-    return Request.get(`/shop/api/cart_list`, {
-      dataObj: { cart_key: cartKey },
+  async function removeItem(articleKey, cartKey) {
+    let resp = await shopClient.article_remove({
+      article_key: articleKey,
+      parent_cart_key: cartKey,
     });
+
+    console.log("remove Resp", resp); //TODO: Errorhandling as soon as shop module works again
   }
 
-  function getCartItems(cartKey) {
-    return Request.get(`/shop/api/cart_list`, {
-      dataObj: { cart_key: cartKey },
+  async function updateItem(articleKey, cartKey, quantity) {
+    let resp = await shopClient.article_update({
+      article_key: articleKey,
+      parent_cart_key: cartKey,
+      quantity: quantity,
+      quantity_mode: "replace",
     });
+
+    if (quantity === 0) {
+      await updateCart(cartKey);
+    }
+    console.log("update Resp", resp); //TODO: Errorhandling as soon as shop module works again
+  }
+
+  async function updateCart(cartKey) {
+    await getChildren(cartKey);
   }
 
-  function addToCart(articleKey, cartKey) {
-    // let skey = "";
-    // Request.get("/vi/skey?amount=1").then(async (resp) => {
+  async function getAdressStructure() {
+    let addSkel = await shopClient.address_structure();
+    state.structure.address = addSkel.addSkel;
+
+    console.log("adress add", state.structure.address);
+
+    // Request.getStructure("shop.address").then(async (resp) => {
     //   let data = await resp.json();
-    //   console.log("skey", data);
-    //   skey = data;
+    //   state.structure.address = data.addSkel;
+
+    //   console.log("adress add", state.structure.address);
     // });
-    Request.securePost("/shop/api/article_add", {
-      dataObj: {
-        article_key: articleKey,
-        parent_cart_key: cartKey,
-        quantity: 1,
-        quantity_mode: "increase",
-        // skey: skey,
-      },
-    }).then(async (resp) => {
-      let data = await resp.json();
-      console.log("article add", data);
-    });
   }
 
   return {
     state,
-    listCarts,
     addToCart,
-    getBasketItems,
+    getArticleView,
+    removeItem,
+    updateItem,
     init,
+    getAdressStructure,
+    getChildren,
   };
 });

package/src/App.vue

@@ -1,30 +0,0 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
-<template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
-</template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>