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

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

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+// ! JUST FOR DEVELOPMENT WILL BE DELETED AFTER FINISHED
+
+import {
+  FlexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useVueTable,
+  createColumnHelper,
+} from "@tanstack/vue-table";
+import { ref } from "vue";
+import { makeData, Person } from "./makeData";
+
+const INITIAL_PAGE_INDEX = 0;
+
+const defaultData = makeData(100);
+const columnHelper = createColumnHelper<Person>();
+const goToPageNumber = ref(INITIAL_PAGE_INDEX + 1);
+const pageSizes = [10, 20, 30, 40, 50];
+const data = ref(defaultData);
+
+const columns = [
+  columnHelper.group({
+    header: "Name",
+    footer: (props) => props.column.id,
+    columns: [
+      columnHelper.accessor("firstName", {
+        cell: (info) => info.getValue(),
+        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 table = useVueTable({
+  get data() {
+    return data.value;
+  },
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+});
+
+function rerender() {
+  data.value = defaultData;
+}
+
+function handleGoToPage(e: any) {
+  const page = e.target.value ? Number(e.target.value) - 1 : 0;
+  goToPageNumber.value = page + 1;
+  table.setPageIndex(page);
+}
+
+function handlePageSizeChange(e: any) {
+  table.setPageSize(Number(e.target.value));
+}
+</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>
+        <tr v-for="row in table.getRowModel().rows" :key="row.id">
+          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+            <FlexRender
+              :render="cell.column.columnDef.cell"
+              :props="cell.getContext()"
+            />
+          </td>
+        </tr>
+      </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>
+      <div class="flex items-center gap-2">
+        <button
+          class="border rounded p-1"
+          @click="() => table.setPageIndex(0)"
+          :disabled="!table.getCanPreviousPage()"
+        >
+          «
+        </button>
+        <button
+          class="border rounded p-1"
+          @click="() => table.previousPage()"
+          :disabled="!table.getCanPreviousPage()"
+        >
+          ‹
+        </button>
+        <button
+          class="border rounded p-1"
+          @click="() => table.nextPage()"
+          :disabled="!table.getCanNextPage()"
+        >
+          ›
+        </button>
+        <button
+          class="border rounded p-1"
+          @click="() => table.setPageIndex(table.getPageCount() - 1)"
+          :disabled="!table.getCanNextPage()"
+        >
+          »
+        </button>
+        <span class="flex items-center gap-1">
+          <div>Page</div>
+          <strong>
+            {{ table.getState().pagination.pageIndex + 1 }} of
+            {{ table.getPageCount() }}
+          </strong>
+        </span>
+        <span class="flex items-center gap-1">
+          | Go to page:
+          <input
+            type="number"
+            :value="goToPageNumber"
+            @change="handleGoToPage"
+            class="border p-1 rounded w-16"
+          />
+        </span>
+        <select
+          :value="table.getState().pagination.pageSize"
+          @change="handlePageSizeChange"
+        >
+          <option
+            :key="pageSize"
+            :value="pageSize"
+            v-for="pageSize in pageSizes"
+          >
+            Show {{ pageSize }}
+          </option>
+        </select>
+      </div>
+      <div>{{ table.getRowModel().rows.length }} Rows</div>
+      <pre>{{ JSON.stringify(table.getState().pagination, null, 2) }}</pre>
+    </div>
+    <div class="h-2" />
+    <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>

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

@@ -0,0 +1,41 @@
+<template>
+  <!-- TODO: at a very later point -->
+  <div class="price-wrap">
+    <sl-format-number
+      class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice"
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="price.retail"
+    >
+    </sl-format-number>
+    <sl-format-number
+      class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice"
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="price.recommended"
+    >
+    </sl-format-number>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  price: {
+    type: Object,
+    required: true,
+  },
+});
+
+function priceGetter() {
+
+}
+</script>
+
+<style scoped>
+.price-wrap {
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/components/ui/generic/alerts/ShopAlert.vue

@@ -0,0 +1,19 @@
+<template>
+  <sl-alert :variant="variant" open closable duration="3000" @sl-hide="onHide">
+    <sl-icon slot="icon" :name="iconName"></sl-icon>
+    <slot name="alertMsg">ALERT!</slot>
+  </sl-alert>
+</template>
+
+<script setup>
+const props = defineProps({
+  variant: { type: String, default: "primary" },
+  iconName: { type: String, default: "info-circle" },
+});
+
+const emit = defineEmits(["onHide"]);
+
+function onHide() {
+  emit("onHide");
+}
+</script>

package/src/components/ui/generic/makeData.js

@@ -0,0 +1,39 @@
+// ! JUST FOR DEVELOPMENT WILL BE DELETED AFTER FINISHED
+import { faker } from '@faker-js/faker'
+
+const range = (len) => {
+  const arr = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = () => {
+  return {
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: faker.number.int(1000),
+    progress: faker.number.int(100),
+    status: faker.helpers.shuffle([
+      'relationship',
+      'complicated',
+      'single',
+    ]),
+  }
+}
+
+export function makeData(...lens) {
+  const makeDataLevel = (depth = 0) => {
+    const len = lens[depth]
+    return range(len).map(() => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}

package/src/components/ui/stepper/StepperItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <sl-tab-panel class="viur-shop-order-tab-panel" :name="tab">
+    <component
+      :is="tabs[tab].component"
+      v-bind="tabs[tab].props ? tabs[tab].props : ''"
+      @goToStart="goToStart()"
+      @editAddress="goToUserData"
+    >
+    </component>
+  </sl-tab-panel>
+</template>
+
+<script setup>
+const props = defineProps({
+  tab: {
+    type: String,
+    required: true,
+  },
+  tabs: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["goToStart", "editAddress"]);
+
+function goToStart() {
+  emit("goToStart");
+}
+
+function goToUserData(e) {
+  emit("editAddress", e);
+}
+</script>
+
+<style scoped>
+.viur-shop-order-tab-panel {
+}
+</style>

package/src/components/ui/stepper/StepperTab.vue

@@ -0,0 +1,133 @@
+<template>
+  <sl-tab
+    class="viur-shop-order-tab"
+    slot="nav"
+    :panel="tab"
+    :disabled="tabs[tab].disabled"
+  >
+    <div class="viur-shop-order-step">
+      <sl-icon
+        class="viur-shop-order-step-icon"
+        v-if="tabs[tab].icon?.name"
+        :name="tabs[tab].icon.name"
+        :library="tabs[tab].icon.library ? tabs[tab].icon.library : 'default'"
+      >
+      </sl-icon>
+
+      <div class="viur-shop-order-status-text">
+        {{ tabIdx + 1 }}.
+        <span class="viur-shop-order-status-span">{{
+          tabs[tab].displayName
+        }}</span>
+      </div>
+    </div>
+
+    <sl-icon
+      name="chevron-right"
+      class="viur-shop-order-tab-check"
+      v-if="tabIdx < stepperLength - 1"
+    >
+    </sl-icon>
+  </sl-tab>
+</template>
+
+<script setup>
+const props = defineProps({
+  tab: {
+    type: String,
+    required: true,
+  },
+  tabIdx: {
+    type: Number,
+    required: true,
+  },
+  stepperLength: {
+    type: Number,
+    required: true,
+  },
+  tabs: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<style scoped>
+.viur-shop-order-tab {
+  width: 25%;
+  position: relative;
+
+  &::part(base) {
+    color: var(--shop-tab-color);
+    display: flex;
+    height: 100%;
+  }
+
+  &[aria-selected="true"] {
+    --shop-tab-color: var(--shop-tab-color--active);
+  }
+
+  @media (max-width: 900px) {
+    &::part(base) {
+      height: 100%;
+      padding: var(--sl-spacing-small) var(--sl-spacing-medium);
+    }
+  }
+
+  @media (max-width: 600px) {
+    &[aria-selected="true"] {
+      width: 100%;
+    }
+
+    &:not([aria-selected="true"]) {
+      .viur-shop-order-status-span {
+        display: none;
+      }
+    }
+  }
+}
+
+.viur-shop-order-step {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &:has(sl-icon) {
+    justify-content: flex-start;
+  }
+
+  sl-icon {
+    font-size: 2.5em;
+    margin-bottom: 15px;
+  }
+
+  @media (max-width: 900px) {
+    justify-content: center;
+
+    sl-icon {
+      display: none;
+    }
+  }
+}
+
+.viur-shop-order-status-text {
+  font-size: 0.8em;
+  color: inherit;
+  text-align: center;
+  white-space: initial;
+}
+
+.viur-shop-order-tab-check {
+  position: absolute;
+  right: -0.5em;
+
+  @media (max-width: 900px) {
+    font-size: 0.7em;
+    right: -0.35em;
+    top: calc(50% - 0.35em);
+  }
+}
+</style>

package/src/components/ui/stepper/StepperTrigger.vue

@@ -0,0 +1,35 @@
+<template>
+  <sl-button type="submit" v-show="index !== 0" @click="prevTab()">
+    Zurück
+    <!-- TODO: $t(i18n referenz) -->
+  </sl-button>
+
+  <sl-button type="submit" variant="primary" @click="nextTab()">
+    Weiter
+    <!-- TODO: $t(i18n referenz) -->
+  </sl-button>
+</template>
+
+<script setup>
+const props = defineProps({
+  index: {
+    type: Number,
+    required: true,
+  },
+});
+const emit = defineEmits({prevTab: null, nextTab: null});
+
+function prevTab() {
+  emit("prevTab");
+}
+
+function nextTab() {
+  emit("nextTab");
+}
+</script>
+
+<style scoped>
+.sticky {
+  position: sticky;
+}
+</style>

package/src/components/ui/userdata/AddForm.vue

@@ -0,0 +1,125 @@
+<template>
+  <sl-spinner v-if="state.isLoading"></sl-spinner>
+  <ViForm
+    ref="addForm"
+    module="shop/address"
+    action="add"
+    :useCategories="false"
+    :layout="layout ? layout : DefaultLayout"
+    :values="modelValue"
+    :skel="
+      mode === 'shipping'
+        ? cartStore.state.activeShippingAddress
+        : cartStore.state.activeBillingAddress
+    "
+    @change="updateValues"
+  >
+  </ViForm>
+
+  <sl-bar>
+    <div slot="left">
+      <!-- BUTTON NUR PLATZHALTER FÜR TESTS -->
+      <sl-button
+        variant="success"
+        @click.stop.prevent="sendForm"
+        :loading="state.isSending"
+      >
+        <sl-icon name="floppy2" slot="prefix"></sl-icon>
+        {{
+          $t("actions.add").charAt(0).toUpperCase() + $t("actions.add").slice(1)
+        }}
+      </sl-button>
+    </div>
+  </sl-bar>
+</template>
+
+<script setup>
+import { reactive, ref, computed, onMounted } from "vue";
+import ViForm from "@viur/vue-utils/forms/ViForm.vue";
+import DefaultLayout from "./DefaultLayout.vue";
+import { useCartStore } from "../../../stores/cart";
+
+const props = defineProps({
+  layout: { required: false },
+  customer: { type: Object, required: true },
+  mode: { type: String, default: "shipping" },
+  modelValue: { type: Object },
+});
+const emit = defineEmits(["update:modelValue", "addSuccess"]);
+const cartStore = useCartStore();
+const addForm = ref(null);
+const state = reactive({
+  isLoading: computed(() => (addForm.value ? addForm.value.loading : true)),
+  isSending: false,
+  wasSuccess: false,
+  user: {},
+  skel: computed(() => {
+    if (props.mode === "shipping") return cartStore.state.activeShippingAddress;
+    else return cartStore.state.activeBillingAddress;
+  }),
+});
+
+function sendForm() {
+  if (props.mode === "shipping") {
+    cartStore.state.activeShippingAddress = addForm.value.state.skel;
+  } else {
+    cartStore.state.activeBillingAddress = addForm.value.state.skel;
+  }
+
+  state.isSending = true;
+  addForm.value.sendData().then(async (resp) => {
+    let data = await resp.json();
+    state.isSending = false;
+    if (data["action"] === "addSuccess") {
+      emit("addSuccess", {
+        show: true,
+        msg: "Erfolg!",
+        variant: "success",
+        icon: "check2-circle",
+      });
+    }
+  });
+}
+
+function setSkelValues(dict = {}) {
+  let structure = cartStore.state.structure.address;
+  let skel = {};
+
+  Object.keys(structure).forEach((boneName) => {
+    if (boneName === "customer") {
+      skel[boneName] = state.user.key;
+      return;
+    }
+    skel[boneName] = null;
+  });
+
+  Object.entries(dict).forEach(([boneName, boneValue]) => {
+    skel[boneName] = boneValue;
+  });
+
+  return skel;
+}
+
+function updateValues() {
+  emit("update:modelValue", addForm.value.state.skel);
+}
+
+// onBeforeMount(() => {
+//   cartStore.getAddressStructure();
+
+//   // state.skel = setSkelValues({
+//   //   address_type: "shipping",
+//   //   customer: props.customer.key,
+//   // });
+// });
+onMounted(() => {
+  cartStore.getAddressStructure();
+  // updateValues();
+  // state.skel = setSkelValues({
+  //   address_type: "shipping",
+  //   customer: props.customer.key,
+  // });
+});
+</script>
+
+<style scoped></style>