inventur/app/js/components/InventoryItem.vue

<template>
  <tr
    style="border: 0;"
    class="inventory-item"
    :class="{ 
      'teal lighten-5' : item.Sale > 0,
      'orange darken-2 white-text' : item.Sold %1 !=0,
      'red darken-2 white-text' : item.Sale < 0,
    }"
  >
    <th
      class="right-align"
    >
      {{ item.article.name }}
    </th>

    <td
      v-for="prop in ['start','fetched','end','lost']"
      :key="item.article.short+'_'+prop"
      class="border-bottom center-align"
      :class="{active:classObject.active == prop}"
      contenteditable
      @keypress="restrictInput(prop, $event)"
      @focus="onFocus(prop, $event)"
      @blur="onBlur(prop, $event)"
    >
      {{ item[prop] }}
    </td>
    
    <td
      class="right-align border-bottom border-diagram"
    >
      <TweenedNumber
        :style="{ 
          'border-image': 'linear-gradient(to right , rgba(0,150,136,.01) 0%, rgba(0,150,136,.3) ' 
            + item.Sold*100/total 
            + '%, transparent '
            + item.Sold*100/total
            +'%,transparent 100%) 1'
        }"
        :wert="item.Sold"
        :einheit="item.article.PortionType"
        :precision="item.PortionPrecision"
      />
    </td>
    <td
      class="right-align border-bottom"
    >
      <TweenedNumber
        :wert="item.Sale"
        :einheit="'€'"
        :precision="2"
      />
    </td>
  </tr>
</template>

<script>
import TweenedNumber from './TweenedNumber';
import './InventoryItem.css';

export default {
  name:"InventoryItem",
  components: {
    TweenedNumber,
  },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tweenedSold: 0,
      tweenedSale: 0,
      classObject: {active : null}
    }
  },
  computed: {
    SoldAnimated() {
      return this.tweenedSold.toFixed(this.item.PortionPrecision);
    },
    SaleAnimated() {
      return this.tweenedSale.toFixed(2);
    }
  },
  watch: {
        
  },
  methods: {
    setCaretPosition(el){
      if (el != null) {
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(el.firstChild, el.innerText.length);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        el.focus();
      }
    },
    restrictInput(prop, event){
      var x = event.key;
      console.log(prop + " inserting " + x)
      if (x === "Enter" ) {
        event.target.blur();
      }
      if (isNaN(x) && x != ',') {
        event.preventDefault();
      }
    },
    onFocus(property, event){
      this.classObject.active = property;
      var range = document.createRange();
      var sel = window.getSelection();
      range.selectNodeContents(event.target);
      sel.removeAllRanges();
      sel.addRange(range);
    },
    onBlur(property, event) {
      this.classObject.active = null;
      var value = event.target.innerText;
      value = value.replace(',', '.')
      console.log(property + " left value: " + value);
      if (!isNaN(value)) {
        this.item[property] = Number(value);
      }
    },
    onInput(property, event){
      if (event.inputType == "insertText") {
        var regex = /\d+\.?\d{0,2}/;
        if (event.data.match(regex)){
          var value = event.target.innerText;
          this.item[property] = Number(value);
        } 
      }
      this.setCaretPosition(event.target);            
    },
  }
    
}
</script>

<style>

</style>