2024-10-10 08:49:50 +02:00
parent 8a2b8c0b20
commit c57eef6e8d
56 changed files with 2250 additions and 451 deletions
@@ -43,3 +43,97 @@ Vue.component('warehouse-history-modal', {
        }
    }
})
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>
  `
});
//TODO: put this in its own file
//TODO: also for tt-crud or vuehelper create a check for utility folder and include all js files in there to allow adding custom components that are not part of the core
//TODO: also add a component for a switch like this as we will need it more often either with value or doing redirect on click
Vue.component('warehouse-administration-switch', {
    //language=Vue
    template: `
        <div class="device-view-switch" style="margin-bottom: 10px">
          <div v-if="!isOverflowing" class="button-group" style="display:grid; grid-template-columns: repeat(5, 1fr); gap: 10px; justify-content: center; align-items: center; text-align: center; width: 100%;">
            <button @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseDistributor';" :class="{ 'active': window.location.href.includes('WarehouseDistributor') }" class="btn btn-primary">Lieferanten</button>
            <button @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseLocation';" :class="{ 'active': window.location.href.includes('WarehouseLocation') }" class="btn btn-primary">Lagerorte</button>
            <button @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseArticlePriceType';" :class="{ 'active': window.location.href.includes('WarehouseArticlePriceType') }" class="btn btn-primary">Preistypen</button>
            <button @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNoteTextElement';" :class="{ 'active': window.location.href.includes('Device') }" class="btn btn-primary">LS Texte</button>
            <button @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseAdministration';" :class="{ 'active': window.location.href.includes('Device') }" class="btn btn-primary">Admin-Tools</button>
          </div>
          <div v-else>
            <div class="dropdown">
              <button @click="showDropdown = !showDropdown" 
                      class="btn btn-primary dropdown-toggle">Ansicht</button>
              <div v-show="showDropdown" class="dropdown-menu show">
                <a href="#" @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseDistributor'; showDropdown = false" class="dropdown-item">Lieferanten</a>
                <a href="#" @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseArticlePriceType'; showDropdown = false" class="dropdown-item">Lagerorte</a>
                <a href="#" @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseLocation'; showDropdown = false" class="dropdown-item">Preistypen</a>
                <a href="#" @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNoteTextElement'; showDropdown = false" class="dropdown-item">LS Texte</a>
                <a href="#" @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/WarehouseAdministration'; showDropdown = false" class="dropdown-item">Admin-Tools</a>
              </div>
            </div>
          </div>
        </div>
      `,
    props: ['value'],
    data() {
        return {
            isOverflowing: false,
            showDropdown: false,
            window: window,
        };
    },
    mounted() {
        this.checkOverflow();
        window.addEventListener('resize', this.checkOverflow);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.checkOverflow);
    },
    methods: {
        checkOverflow() {
            this.isOverflowing = window.innerWidth < 650
        },
    },
})