@viur/shop-components 0.0.1-dev.58 → 0.0.1-dev.60

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

@@ -0,0 +1,113 @@
+<template>
+  <shop-order-stepper
+    :tabs="state.tabs"
+    @tabChange="handleTabs"
+    :sidebar="true"
+    :sidebar-bottom="false"
+    :show-discount="false"
+  >
+    <!-- customize slots -->
+    <!-- <template #main> The Order Stepper </template> -->
+    <!-- <template #trigger> Buttons for Stepper control </template> -->
+    <!-- <template #sidebar> the side/bottom bar </template> -->
+  </shop-order-stepper>
+</template>
+
+<script setup>
+import { onBeforeMount, reactive, shallowRef, computed } from "vue";
+import ShopOrderStepper from "../../ShopOrderStepper.vue";
+import CartView from "../../cart/CartView.vue";
+import ShopCart from "../../ShopCart.vue";
+import ConfirmView from "../../ShopOrderConfirm.vue";
+import ShopOrderComplete from "../../ShopOrderComplete.vue";
+import ShopUserData from "../../ShopUserData.vue";
+import { useCartStore } from "../../../stores/cart";
+
+const cartStore = useCartStore();
+
+const rootNode = computed(() =>
+  cartStore.state.basketRootNode.key ? cartStore.state.basketRootNode.key : "",
+);
+const state = reactive({
+  rootNode: {},
+  tabs: {
+    cart: {
+      component: shallowRef(CartView),
+      props: {
+        sidebar: true,
+        mode: "basket",
+        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
+        placeholder: "/static/partnerbereich/img/placeholder.svg",
+        standalone: false,
+      },
+      displayName: "Warenkorb",
+      icon: { name: "bag" },
+      position: 2,
+      disabled: false,
+    },
+    confirm: {
+      component: shallowRef(ConfirmView),
+      props: {
+        tabName: "userInfo",
+      },
+      displayName: "Bestellung prüfen",
+      icon: { name: "clipboard-check" },
+      position: 5,
+      disabled: false,
+    },
+    orderComplete: {
+      component: shallowRef(ShopOrderComplete),
+      props: {
+        redirectUrl: "http://localhost:8081",
+        additionalComponents: [
+          {
+            component: shallowRef(CartView),
+            props: {
+              sidebar: true,
+              mode: "basket",
+              cartKey: rootNode,
+            },
+          },
+        ],
+      },
+      displayName: "Bestellung Abgeschlossen",
+      icon: { name: "bag-check" },
+      position: 6,
+      disabled: true,
+    },
+    userInfo: {
+      component: shallowRef(ShopUserData),
+      props: { multiMode: false },
+      displayName: "Daten Eingeben",
+      icon: { name: "card-list" },
+      position: 3,
+      disabled: false,
+    },
+    cartTest: {
+      component: shallowRef(ShopCart),
+      props: {
+        sidebar: true,
+        mode: "basket",
+        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
+        placeholder: "/static/partnerbereich/img/placeholder.svg",
+        standalone: false,
+      },
+      displayName: "neuer Korb",
+      icon: { name: "bag" },
+      position: 1,
+      disabled: false,
+    },
+  },
+});
+
+function handleTabs(e) {
+  if (e?.detail.name === "confirm") {
+    state.tabs.orderComplete.disabled = false;
+  }
+}
+
+onBeforeMount(async () => {
+  await cartStore.init("/static/partnerbereich/img/placeholder.svg");
+  await cartStore.getAddressStructure();
+});
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  HALLO
+  <div v-if="a">{{ a }}</div>
+  <div v-if="b">{{ b }}</div>
+</template>
+
+<script setup>
+const props = defineProps({
+  a: {
+    type: String,
+  },
+  b: {
+    type: String,
+  },
+});
+</script>

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

@@ -0,0 +1,62 @@
+<template>
+
+  <div v-for="(providerData,providerName,i) in cartStore.state.paymentProviders">
+    <sl-card selectable :id="'povider__'+providerName" @sl-change="providerChanged" :selected="i===0">
+      <img
+        slot="image"
+        src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+        alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+      />
+      <div slot="footer">
+        {{ providerData?.title }}
+        <br>
+        {{ providerData?.descr }}
+      </div>
+    </sl-card>
+  </div>
+
+</template>
+
+<script setup>
+//todo styling
+// set image
+
+import {onBeforeMount, reactive} from "vue";
+import {useCartStore} from "../../../stores/cart";
+
+const cartStore = useCartStore();
+
+function providerChanged(e) {
+  if (e.target.selected) {
+    console.log( "a",cartStore.state.selectedPaymentProvider)
+    console.log( "b",cartStore.state.paymentProviders)
+
+
+    cartStore.state.selectedPaymentProviderName = e.target.id.replace("povider__", "")
+    cartStore.state.selectedPaymentProvider = cartStore.state.paymentProviders[e.target.id.replace("povider__", "")]
+    console.log(cartStore.state.selectedPaymentProvider)
+    document.querySelectorAll("sl-card").forEach((card) => {
+
+      if (card !== e.target) {
+        card.selected = false;
+      }
+    })
+
+  } else {//can't deselect now
+    e.target.selected = true;
+
+  }
+  console.log("provider changed", e)
+}
+
+onBeforeMount(async () => {
+  await cartStore.getPaymentProviders();
+})
+</script>
+
+<style scoped>
+/*todo select styling for sl-card*/
+sl-card[selected]::part(base) {
+  border: 5px solid #39b200;
+}
+</style>

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

@@ -0,0 +1,46 @@
+<template>
+  <div class="viur-shop-cart-sidebar-info-line">
+
+    <span>Versandkosten </span>
+    <sl-format-number
+      type="currency"
+      currency="EUR"
+      :value="shippingCost"
+      lang="de">
+    </sl-format-number>
+
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line">
+  <slot name="custom"></slot>
+  </div>
+
+</template>
+<script setup>
+import {useCartStore} from "../../../stores/cart";
+import {onBeforeMount, reactive,computed} from "vue";
+
+const cartStore = useCartStore();
+const shippingCost = computed(() => {
+  return cartStore.state.basketRootNode?.shipping?.dest.shipping_cost ? cartStore.state.basketRootNode?.shipping.dest.shipping_cost : 0
+})
+onBeforeMount(async () => {
+  await cartStore.init();
+  console.log("has shipping ? ",cartStore.state.basketRootNode.shipping);
+});
+
+</script>
+
+<style scoped>
+.viur-shop-cart-sidebar-info-line {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: var(--sl-spacing-2x-small) 0;
+
+
+
+  span {
+    margin-right: auto;
+  }
+}
+</style>

package/src/components/ui/ShopSummary.vue

@@ -0,0 +1,145 @@
+,
+<template>
+  <h2 class="viur-shop-cart-sidebar-headline headline">Zusammenfassung</h2>
+  <br />
+  <div class="viur-shop-cart-sidebar-info-line">
+    <span>Zwischensumme</span>
+
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="state.node?.total"
+    >
+    </sl-format-number>
+    <br />
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line">
+    <span>Rabatt</span>
+
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="state.node?.discount ? state.node.discount : 0"
+    >
+    </sl-format-number>
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line">
+    <Shipping ref="shipping">
+      <template #custom v-if="customShippingComponent">
+            <component :is="customShippingComponent"></component>
+          </template>
+    </Shipping>
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line total">
+    <span>Gesamt:</span>
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="totalPrice"
+    >
+    </sl-format-number>
+    <!-- TODO: Some project needs "VAT included" here -->
+  </div>
+  <slot name="action-buttons">
+    HIER KANN DEIN BUTTON REIN
+    <div class="viur-shop-cart-sidebar-btn-wrap">
+      <!-- TODO: Placement of discount? -->
+      <div class="viur-shop-discount-wrap" v-if="showDiscount">
+        <Discount></Discount>
+      </div>
+
+      <sl-button variant="primary" size="medium"> Jetzt Bestellen</sl-button>
+      <sl-button size="medium" variant="info">
+        <sl-icon name="paypal" slot="prefix"></sl-icon>
+        Paypal
+      </sl-button>
+    </div>
+    <!-- TODO: Delivery time estimate: slot -->
+  </slot>
+  <slot name="custom"></slot>
+</template>
+
+<script setup>
+import Discount from "../cart/Discount.vue";
+import Shipping from "../order/process/Shipping.vue";
+import { computed, onBeforeMount, reactive, ref } from "vue";
+import { useCartStore } from "../../stores/cart";
+
+const cartStore = useCartStore();
+
+const shipping = ref(null);
+const props = defineProps({
+  showDiscount: {type: Boolean, default: true},
+  customShippingComponent:{type:Object,default:undefined},
+});
+console.log("csc",props.customShippingComponent)
+const state=reactive({
+  node:{}
+})
+
+const totalPrice = computed(() => {
+  if (state.node?.shipping) {
+    return (
+      state.node.total +
+      state.node?.shipping?.dest.shipping_cost -
+      state.node.discount
+    );
+  } else {
+    // use shippingprice formbasket
+    console.log(cartStore.state.basket);
+
+    if (cartStore.state.basket.length === 1) {
+      return (
+        state.node?.total +
+        cartStore.state.basket.shipping?.dest.shipping_cost -
+        state.node.discount
+      );
+    } else {
+      return state.node.total + 0 - state.node.discount; //kein shipping
+    }
+  }
+});
+onBeforeMount(async () => {
+  await cartStore.init();
+  state.node  = cartStore.state.basketRootNode;
+  console.log("get node",state.node)
+})
+</script>
+
+<style>
+.viur-shop-cart-sidebar-info-line {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: var(--sl-spacing-2x-small) 0;
+
+  &.total {
+    font-weight: 600;
+    border-top: 1px solid var(--sl-color-neutral-300);
+    border-bottom: 1px solid var(--sl-color-neutral-300);
+    padding: var(--sl-spacing-x-small) 0;
+    margin: var(--sl-spacing-small) 0;
+  }
+
+  span {
+    margin-right: auto;
+  }
+}
+
+.viur-shop-cart-sidebar-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--sl-spacing-large);
+
+  sl-button {
+    margin-bottom: var(--sl-spacing-x-small);
+  }
+}
+
+.viur-shop-cart-sidebar-headline {
+  margin: 0 0 var(--sl-spacing-large) 0;
+}
+</style>

package/src/components/ui/generic/ArticleList.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import {
+  FlexRender,
+  createColumnHelper,
+  getCoreRowModel,
+  getExpandedRowModel,
+  useVueTable,
+  type ExpandedState,
+  type Row,
+} from '@tanstack/vue-table'
+import { Text, h, ref } from 'vue'
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+const defaultData: Person[] = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 24,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'tandy',
+    lastName: 'miller',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'dirte',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+]
+const columnHelper = createColumnHelper<Person>()
+function renderExpanded(row: Row<Person>) {
+  if (!row.getCanExpand()) {
+    return h(Text, '🔵')
+  }
+  return h(
+    'button',
+    {
+      onClick: row.getToggleExpandedHandler(),
+      style: { cursor: 'pointer' },
+    },
+    row.getIsExpanded() ? '👇' : '👉'
+  )
+}
+const columns = [
+  columnHelper.group({
+    header: 'Name',
+    footer: props => props.column.id,
+    columns: [
+      columnHelper.display({
+        id: 'expander',
+        header: () => null,
+        cell: ({ row }) => renderExpanded(row),
+      }),
+      columnHelper.accessor('firstName', {
+        footer: props => props.column.id,
+      }),
+      columnHelper.accessor(row => row.lastName, {
+        id: 'lastName',
+        cell: info => info.getValue(),
+        header: () => 'Last Name',
+        footer: props => props.column.id,
+      }),
+    ],
+  }),
+  columnHelper.group({
+    header: 'Info',
+    footer: props => props.column.id,
+    columns: [
+      columnHelper.accessor('age', {
+        header: () => 'Age',
+        footer: props => props.column.id,
+      }),
+      columnHelper.group({
+        header: 'More Info',
+        columns: [
+          columnHelper.accessor('visits', {
+            header: () => 'Visits',
+            footer: props => props.column.id,
+          }),
+          columnHelper.accessor('status', {
+            header: 'Status',
+            footer: props => props.column.id,
+          }),
+          columnHelper.accessor('progress', {
+            header: 'Profile Progress',
+            footer: props => props.column.id,
+          }),
+        ],
+      }),
+    ],
+  }),
+]
+const data = ref(defaultData)
+const expanded = ref<ExpandedState>({})
+const rerender = () => {
+  data.value = defaultData
+}
+const table = useVueTable({
+  get data() {
+    return data.value
+  },
+  state: {
+    get expanded() {
+      return expanded.value
+    },
+  },
+  columns,
+  getRowCanExpand: () => true,
+  getCoreRowModel: getCoreRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+  onExpandedChange: updaterOrValue => {
+    expanded.value =
+      typeof updaterOrValue === 'function'
+        ? updaterOrValue(expanded.value)
+        : updaterOrValue
+  },
+})
+</script>
+
+<template>
+  <div class="p-2">
+    <table>
+      <thead>
+        <tr
+          v-for="headerGroup in table.getHeaderGroups()"
+          :key="headerGroup.id"
+        >
+          <th
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :colSpan="header.colSpan"
+          >
+            <FlexRender
+              v-if="!header.isPlaceholder"
+              :render="header.column.columnDef.header"
+              :props="header.getContext()"
+            />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="row in table.getRowModel().rows" :key="row.id">
+          <tr>
+            <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+              <FlexRender
+                :render="cell.column.columnDef.cell"
+                :props="cell.getContext()"
+              />
+            </td>
+          </tr>
+          <tr v-if="row.getIsExpanded()">
+            <td :colspan="row.getAllCells().length">
+              <pre :style="{ fontSize: '10px' }">
+                  <code>{{ JSON.stringify(row.original, null, 2) }}</code>
+                </pre>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+      <tfoot>
+        <tr
+          v-for="footerGroup in table.getFooterGroups()"
+          :key="footerGroup.id"
+        >
+          <th
+            v-for="header in footerGroup.headers"
+            :key="header.id"
+            :colSpan="header.colSpan"
+          >
+            <FlexRender
+              v-if="!header.isPlaceholder"
+              :render="header.column.columnDef.footer"
+              :props="header.getContext()"
+            />
+          </th>
+        </tr>
+      </tfoot>
+    </table>
+    <div class="h-4" />
+    <button @click="rerender" class="border p-2">Rerender</button>
+  </div>
+</template>
+
+<style>
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+table {
+  border: 1px solid lightgray;
+}
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+tfoot {
+  color: gray;
+}
+tfoot th {
+  font-weight: normal;
+}
+</style>