2024-10-10 08:49:50 +02:00
parent 8a2b8c0b20
commit c57eef6e8d
56 changed files with 2250 additions and 451 deletions
@@ -1,47 +1,3 @@
Vue.component('tt-expandable-shopping-cart', {
    props: {
        cartItems: Array,
    },
    data() {
        return {
            isExpanded: false,
        };
    },
    methods: {
    },
    template: `
  <div class="tt-expandable-shopping-cart" :class="{ expanded: isExpanded }">
    <button class="toggle-button" @click="isExpanded = !isExpanded">
      <i class="fas fa-shopping-cart text-primary"></i>
        <span v-if="cartItems.length > 0 && isExpanded" class="btn btn-primary" @click.prevent="$emit('submitOrder')">Bestellen</span>
      <span class="cart-count" v-if="cartItems.length > 0">{{ cartItems.length }}</span>
      <!-- add arrow down icon when cart is expanded additionally with v-if -->
        <i v-if="isExpanded" class="fas fa-arrow-down text-danger" style="font-size:21px;grid-column: 4;"></i>
    </button>
    <div class="cart-content" v-if="isExpanded">
      <div v-if="cartItems.length > 0">
        <h3>Einkaufswagen</h3>
        <ul class="list-group">
          <template v-for="item in cartItems">
          <li class="list-group-item" style="display:grid;grid-template-columns: 1fr auto;gap: 10px;">
            {{ item.title }}
            <div style="display:grid;grid-template-columns: 1fr 1fr;gap: 10px;">
              <span class="badge badge-primary badge-pill" style="height: 16px">{{ item.amount }}</span>
              <i style="cursor: pointer" class="fas fa-trash-alt text-danger" @click="cartItems.splice(cartItems.indexOf(item), 1)"></i>
            </div>
          </li>
            </template>
        </ul>
      </div>
      <p v-else>Der Einkaufswagen ist leer.</p>
    </div>
  </div>
  `
});
Vue.component('warehouse-e-shop', {
    //language=Vue
    template: `