@lancom/shared 0.0.62 → 0.0.66

package/components/order/order_prints_groups/order-prints-groups.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="OrderPrintsGroups__wrapper">
+    <div class="row">
+      <div class="col-sm-12">
+        <table
+          class="lc_table bordered highlighted"
+          :class="{ stripped }">
+          <thead class="centered">
+            <tr>
+              <th>Print ID</th>
+              <th>Area</th>
+              <th>Thumb</th>
+              <th>SKU</th>
+              <th>Total Pcs</th>
+              <th>Print Price</th>
+              <th>Total Print Price</th>
+            </tr>
+          </thead>
+          <tbody class="centered">
+            <tr
+              v-for="([key, group]) in printsGroups"
+              :key="key">
+              <td>{{ group.printId }}</td>
+              <td>
+                <div class="lc_overline">
+                  {{ group.side }}
+                </div>
+                <div class="lc_caption">
+                  {{ groupSize(group) | print }}
+                </div>
+              </td>
+              <td>
+                <product-side-with-print
+                  :product="group.products[0]"
+                  :side="sideType(group.side)"
+                  :preview="true"
+                  :priview-products="group.products"
+                  size="small"
+                  class="OrderPrintsGroups__thumbnail elevation1" />
+              </td>
+              <td v-html="sku(group.products)"></td>
+              <td>{{ group.amount }}</td>
+              <td>{{ (group.totalPriceWithoutTax / group.amount) | price }}</td>
+              <td>{{ group.totalPriceWithoutTax | price }}</td>
+            </tr>
+            <tr>
+              <td>Total</td>
+              <td colspan="3"></td>
+              <td>{{ total.amount }}</td>
+              <td></td>
+              <td>{{ total.price | price }}</td>
+            </tr>
+            <tr v-if="totalsWithGst">
+              <td>Total inc. GST</td>
+              <td colspan="3"></td>
+              <td>{{ total.amount }}</td>
+              <td></td>
+              <td>{{ total.priceWithGST | price }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+import { COLORS_IMAGES_TYPES } from '@lancom/shared/assets/js/constants/colors';
+import { groupProductsByPrints } from '@lancom/shared/assets/js/utils/products-grouping';
+import { price, print } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'OrderPrintsGroups',
+  filters: {
+    price,
+    print
+  },
+  components: {
+    ProductSideWithPrint
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    stripped: {
+      type: Boolean,
+      default: true
+    },
+    totalsWithGst: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    printsGroups() {
+      return groupProductsByPrints(this.order.products, this.order.price.products);
+    },
+    total() {
+      const total = { amount: 0, price: 0, priceWithGST: 0 };
+      return this.printsGroups.reduce((total, [, group]) => {
+        total.amount += group.amount;
+        total.price += group.totalPriceWithoutTax;
+        total.priceWithGST += group.totalPrice;
+        return total;
+      }, total);
+    }
+  },
+  methods: {
+    sku(products) {
+      return products.map(p => `${p.amount} х ${p.SKU}`).join('<br>');
+    },
+    groupSize(group) {
+      const printAreas = (group.products[0].printAreas || {});
+      return printAreas[group.side];
+    },
+    sideType(sideId) {
+      return sideId === 'front' ? COLORS_IMAGES_TYPES.FRONT : COLORS_IMAGES_TYPES.BACK;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-prints-groups.scss';
+</style>

package/components/order/order_products_groups/order-products-groups.scss

@@ -0,0 +1,11 @@
+
+@import "@/assets/scss/variables";
+
+.OrderProductsGroups {
+  &__wrapper {
+    table td {
+      line-height: 1.6rem;
+      padding: 10px 5px;
+    }
+  }
+}

package/components/order/order_products_groups/order-products-groups.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="OrderProductsGroups__wrapper">
+    <div class="row">
+      <div class="col-sm-12">
+        <table class="lc_table bordered highlighted">
+          <thead class="centered">
+            <tr>
+              <th>Design ID</th>
+              <th>Area</th>
+              <th>Thumb</th>
+              <th>SKU</th>
+              <th>Total Pcs</th>
+              <th>Total Prints</th>
+              <th>Print Price</th>
+              <th>Tee Price</th>
+              <th v-if="setup">
+                Setup Cost
+              </th>
+              <th>Total Price</th>
+            </tr>
+          </thead>
+          <tbody class="centered">
+            <order-products-group
+              v-for="([key, group]) in productsGroups"
+              :key="key"
+              :group-id="group.designId"
+              :group="group"
+              :stripped="stripped"
+              :setup="setup" />
+            <tr>
+              <td>Total</td>
+              <td colspan="3"></td>
+              <td>{{ total.amount }}</td>
+              <td>{{ total.prints.amount }}</td>
+              <td>{{ total.prints.price | price }}</td>
+              <td>{{ total.productsPrice | price }}</td>
+              <td v-if="setup">
+                {{ 0 | price }}
+              </td>
+              <td>{{ total.price | price }}</td>
+            </tr>
+            <tr v-if="totalsWithGst">
+              <td>Total inc. GST</td>
+              <td colspan="3"></td>
+              <td>{{ total.amount }}</td>
+              <td>{{ total.prints.amount }}</td>
+              <td>{{ total.prints.priceWithGST | price }}</td>
+              <td>{{ total.productsPriceWithGST | price }}</td>
+              <td v-if="setup">
+                {{ 0 | price }}
+              </td>
+              <td>{{ total.priceWithGST | price }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { print, price } from '@lancom/shared/assets/js/utils/filters';
+import { groupProductsByDesign } from '@lancom/shared/assets/js/utils/products-grouping';
+import OrderProductsGroup from './order_products_group/order-products-group';
+
+export default {
+  name: 'OrderProductsGroups',
+  filters: {
+    print,
+    price
+  },
+  components: {
+    OrderProductsGroup
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    stripped: {
+      type: Boolean,
+      default: true
+    },
+    setup: {
+      type: Boolean,
+      default: false
+    },
+    totalsWithGst: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    productsGroups() {
+      return groupProductsByDesign(this.order.products, this.order.price.products);
+    },
+    total() {
+      const total = {
+        amount: 0,
+        price: 0,
+        productsPrice: 0,
+        priceWithGST: 0,
+        productsPriceWithGST: 0,
+        prints: {
+          amount: 0,
+          price: 0,
+          priceWithGST: 0
+        }
+      };
+
+      return this.productsGroups.reduce((total, [, group]) => {
+        total.amount += group.amount;
+        total.price += group.totalPriceWithoutTax;
+        total.productsPrice += group.productsTotalPriceWithoutTax;
+        total.prints.amount += group.prints.amount;
+        total.prints.price += group.prints.totalPriceWithoutTax;
+        total.priceWithGST += group.totalPrice;
+        total.productsPriceWithGST += group.productsTotalPrice;
+        total.prints.priceWithGST += group.prints.totalPrice;
+        return total;
+      }, total);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'order-products-groups.scss';
+</style>

package/components/order/order_products_groups/order_products_group/order-products-group.scss

@@ -0,0 +1,28 @@
+
+@import "@/assets/scss/variables";
+
+.OrderProductsGroup {
+  &__print {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  &__thumbnail {
+    cursor: pointer;
+    margin-right: 10px;
+    width: 100px !important;
+    height: 100px !important;
+    display: inline-block;
+    &:hover {
+      box-shadow: $elevation4 !important;
+    }
+  }
+  &__link {
+    text-decoration: underline;
+    font-size: 12px;
+    cursor: pointer;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

package/components/order/order_products_groups/order_products_group/order-products-group.vue

@@ -0,0 +1,129 @@
+<template>
+  <fragment>
+    <tr
+      v-for="(print, index) of prints"
+      :key="index"
+      :class="{
+        stripped: stripped && (groupId % 2 !== 0)
+      }">
+      <td
+        v-if="index===0"
+        :rowspan="rowspan">
+        {{ groupId }}
+      </td>
+      <td>
+        <div class="lc_overline">
+          {{ print.sideId }}
+        </div>
+        <div class="lc_caption">
+          {{ printAreas[print.sideId] | print }}
+        </div>
+      </td>
+      <td>
+        <product-side-with-print
+          :product="entity"
+          :side="sideType(print.sideId)"
+          :preview="true"
+          :priview-products="group.products"
+          size="small"
+          class="OrderProductsGroup__thumbnail elevation1" />
+        <div
+          class="OrderProductsGroup__link"
+          @click="savePrint(print.sideId)">
+          Download print
+        </div>
+      </td>
+      <fragment v-if="index===0">
+        <td
+          :rowspan="rowspan"
+          v-html="skuList"></td>
+        <td :rowspan="rowspan">
+          {{ group.amount }}
+        </td>
+        <td :rowspan="rowspan">
+          {{ group.prints.amount }}
+        </td>
+        <td :rowspan="rowspan">
+          {{ group.prints.totalPriceWithoutTax | price }}
+        </td>
+        <td :rowspan="rowspan">
+          {{ group.productsTotalPriceWithoutTax | price }}
+        </td>
+        <td
+          v-if="setup"
+          :rowspan="rowspan">
+          {{ 0 | price }}
+        </td>
+        <td :rowspan="rowspan">
+          {{ group.totalPriceWithoutTax | price }}
+        </td>
+      </fragment>
+    </tr>
+  </fragment>
+</template>
+
+<script>
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+import { exportPrintToSVG } from '@lancom/shared/assets/js/utils/export-print-to-svg';
+import { print, price } from '@lancom/shared/assets/js/utils/filters';
+import { COLORS_IMAGES_TYPES } from '@lancom/shared/assets/js/constants/colors';
+
+export default {
+  name: 'OrderProductsGroup',
+  filters: {
+    print,
+    price
+  },
+  components: {
+    ProductSideWithPrint
+  },
+  props: {
+    stripped: {
+      type: Boolean,
+      default: true
+    },
+    groupId: {
+      type: Number,
+      required: true
+    },
+    group: {
+      type: Object,
+      required: true
+    },
+    setup: {
+      type: Boolean,
+      required: true
+    }
+  },
+  computed: {
+    entity() {
+      return this.group.products[0];
+    },
+    printAreas() {
+      return this.entity.printAreas || {};
+    },
+    prints() {
+      const { prints } = this.entity;
+      return this.group.sides.map(({ side: sideId }) => ({ sideId, image: prints[sideId] }));
+    },
+    rowspan() {
+      return this.prints.length;
+    },
+    skuList() {
+      return this.group.products.map(p => `${p.amount} х ${p.SKU}`).join('<br>');
+    }
+  },
+  methods: {
+    savePrint(sideId) {
+      exportPrintToSVG(this.entity, sideId);
+    },
+    sideType(sideId) {
+      return sideId === 'front' ? COLORS_IMAGES_TYPES.FRONT : COLORS_IMAGES_TYPES.BACK;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-products-group.scss';
+</style>

package/components/order/order_setup_groups/order-setup-groups.scss

@@ -0,0 +1,7 @@
+.OrderSKUGroups {
+  &__wrapper {
+    i {
+      cursor: pointer;
+    }
+  }
+}

package/components/order/order_setup_groups/order-setup-groups.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="OrderSetupGroups__wrapper">
+    <div class="row">
+      <div class="col-sm-12">
+        <table
+          class="lc_table bordered highlighted"
+          :class="{ stripped }">
+          <thead class="centered">
+            <tr>
+              <th>Design ID</th>
+              <th>Print ID</th>
+              <th>SKU</th>
+              <th>Quantity</th>
+              <th>Price</th>
+              <th>GST</th>
+              <th>Total Inc. GST</th>
+            </tr>
+          </thead>
+          <tbody class="centered">
+            <tr
+              v-for="([key, group]) in printsGroups"
+              :key="key">
+              <td>{{ group.designId }}</td>
+              <td>{{ group.printId }}</td>
+              <td>
+                Setup {{ groupSize(group) | print }} - Promo (Free)
+              </td>
+              <td>{{ group.amount }}</td>
+              <td>{{ 0 | price }}</td>
+              <td>{{ 0 | price }}</td>
+              <td>{{ 0 | price }}</td>
+            </tr>
+            <tr>
+              <td>Total</td>
+              <td colspan="2"></td>
+              <td>{{ total.amount }}</td>
+              <td></td>
+              <td>{{ 0 | price }}</td>
+              <td>{{ 0 | price }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { COLORS_IMAGES_TYPES } from '@lancom/shared/assets/js/constants/colors';
+import { groupProductsByPrints } from '@lancom/shared/assets/js/utils/products-grouping';
+import { price, print } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'OrderSetupGroups',
+  filters: {
+    price,
+    print
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    stripped: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    printsGroups() {
+      return groupProductsByPrints(this.order.products, this.order.price.products);
+    },
+    total() {
+      const total = { amount: 0, price: 0 };
+      return this.printsGroups.reduce((total, [, group]) => {
+        total.amount += group.amount;
+        total.price += group.totalPriceWithoutTax;
+        return total;
+      }, total);
+    }
+  },
+  methods: {
+    sku(products) {
+      return products.map(p => `${p.amount} х ${p.SKU}`).join('<br>');
+    },
+    groupSize(group) {
+      const printAreas = (group.products[0].printAreas || {});
+      return printAreas[group.side];
+    },
+    sideType(sideId) {
+      return sideId === 'front' ? COLORS_IMAGES_TYPES.FRONT : COLORS_IMAGES_TYPES.BACK;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-setup-groups.scss';
+</style>

package/components/order/order_sku_groups/order-sku-groups.scss

@@ -0,0 +1,7 @@
+.OrderSKUGroups {
+  &__wrapper {
+    i {
+      cursor: pointer;
+    }
+  }
+}

package/components/order/order_sku_groups/order-sku-groups.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="OrderSKUGroups__wrapper">
+    <div class="row">
+      <div class="col-sm-12">
+        <table
+          class="lc_table bordered highlighted"
+          :class="{ stripped }">
+          <thead class="centered">
+            <tr>
+              <th>Brand</th>
+              <th>Style</th>
+              <th>Colour</th>
+              <th>Size</th>
+              <th>Qty</th>
+              <th>Price Unit</th>
+              <th>Price Total</th>
+              <th v-if="hasCopy">
+                Copy To Clipboard
+              </th>
+            </tr>
+          </thead>
+          <tbody class="centered">
+            <tr
+              v-for="[key, group] in featureGroups"
+              :key="key">
+              <td>{{ group.product.brand }}</td>
+              <td>{{ group.product.style }}</td>
+              <td>{{ group.product.color.name }}</td>
+              <td>{{ group.product.size.name }}</td>
+              <td>{{ group.amount }}</td>
+              <td>{{ (group.totalPriceWithoutTax / group.amount) | price }}</td>
+              <td>{{ group.totalPriceWithoutTax | price }}</td>
+              <td v-if="hasCopy">
+                <i
+                  class="icon-copy"
+                  @click="copyToClipboard(group)"></i>
+              </td>
+            </tr>
+            <tr>
+              <td> Total</td>
+              <td colspan="3"></td>
+              <td>{{ total.amount }}</td>
+              <td></td>
+              <td>{{ total.price | price }}</td>
+              <td v-if="hasCopy">
+                <i
+                  class="icon-copy"
+                  @click="copyToClipboard(featureGroups)"></i>
+              </td>
+            </tr>
+            <tr v-if="totalsWithGst">
+              <td> Total inc. GST</td>
+              <td colspan="3"></td>
+              <td>{{ total.amount }}</td>
+              <td></td>
+              <td>{{ total.priceWithGST | price }}</td>
+              <td v-if="hasCopy">
+                <i
+                  class="icon-copy"
+                  @click="copyToClipboard(featureGroups)"></i>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { groupProductsBySKU } from '@lancom/shared/assets/js/utils/products-grouping';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import { copyToClipboard } from '@lancom/shared/assets/js/utils/copy-to-clipboard';
+
+export default {
+  name: 'OrderSKUGroups',
+  filters: {
+    price
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    stripped: {
+      type: Boolean,
+      default: true
+    },
+    hasCopy: {
+      type: Boolean,
+      default: true
+    },
+    totalsWithGst: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    featureGroups() {
+      return groupProductsBySKU(this.order.products, this.order.price.products);
+    },
+    total() {
+      const total = { amount: 0, price: 0, priceWithGST: 0 };
+      return this.featureGroups.reduce((total, [, group]) => {
+        total.amount += group.amount;
+        total.price += group.totalPriceWithoutTax;
+        total.priceWithGST += group.totalPrice;
+        return total;
+      }, total);
+    }
+  },
+  methods: {
+    copyToClipboard(data) {
+      const groupText = group => `${group.amount} x ${group.product.SKU}`;
+      const text = Array.isArray(data) ? data.map(([, g]) => groupText(g)).join('\n') : groupText(data);
+      copyToClipboard(text);
+      this.$toastr.s('SKU copied');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-sku-groups.scss';
+</style>

package/components/order/order_status/order-status.scss

@@ -0,0 +1,12 @@
+.OrderStatus {
+  &__value {
+    padding-top: 10px;
+  }
+  &__status {
+    padding: 15px;
+    border-radius: 5px;
+    border: 1px solid grey;
+    display: inline-block;
+    text-transform: uppercase;
+  }
+}