inventur/app/js/components/ArticleCard.vue

<template>
  <div
    class="card"
  >
    <div class="card-content">
      <span class="card-title">
        {{ article.name }}
      </span>
    </div>
    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab">
          <a
            :href="'#' + identifier + '_info'"
            class="active"
          >Info</a>
        </li>
        <li class="tab">
          <a :href="'#' + identifier + '_variants'">Varianten</a>
        </li>
      </ul>
    </div>

    <div class="card-content">
      <div
        :id="identifier + '_info'"
        class="row"
      >
        <div class="input-field inline col s8">
          <input
            :id="'a_name_' + article.id"
            v-model="article.name"
            placeholder="Artikelname"
            class="validate"
          >
          <label
            :for="'a_name_' + article.id"
            class="active"
          >Name</label>
        </div>
        <div class="input-field inline col s4">
          <input
            :id="'a_short_' + article.id"
            v-model="article.short"
            placeholder="Kurzname"
            class="validate"
          >
          <label
            :for="'a_short_' + article.id"
            class="active"
          >Kürzel</label>
        </div>
        <div class="input-field col s4">
          <materialize-select
            :id="'a_group_' + article.id"
            v-model.number="article.group"
            :value="article.group"
            placeholder="Artikelgruppe"
          >
            <option
              v-for="group in groups"
              :key="group.id"
              :value="group.id"
            >
              {{ group.name }}
            </option>
          </materialize-select>
          <label :for="'a_group_' + article.id">Artikelgruppe</label>
        </div>
        <div class="input-field col s4">
          <input
            :id="'a_csize_' + article.id"
            v-model.number="article.content.size"
            placeholder="Gesamtinhalt"
            type="number"
            class="validate"
            step="0.01"
          >
          <label
            :for="'a_csize_' + article.id"
            class="active"
          >Gesamtinhalt</label>
        </div>
        <div class="input-field col s4">
          <materialize-select
            :id="'a_dim_' + article.id"
            v-model.number="article.dimension"
            :value="article.dimension"
            placeholder="Dimension"
          >
            <option
              v-for="dim in dimensions"
              :key="dim.id"
              :value="dim.id"
            >
              {{ dim.name }}
            </option>
          </materialize-select>
          <label :for="'a_dim_' + article.id">Dimension</label>
        </div>

        <div class="input-field col s4">
          <input
            :id="'a_psize_' + article.id"
            v-model.number="article.portion.size"
            placeholder="Gesamtinhalt"
            type="number"
            class="validate"
            step="0.01"
            max="5"
          >
          <label
            :for="'a_psize_' + article.id"
            class="active"
          >Portionsinhalt</label>
        </div>
        <div class="input-field col s4">
          <MaterializeSelect
            :id="'a_ptype_' + article.id"
            v-model.number="article.portion.type"
            :value="article.portion.type"
            placeholder="Art"
          >
            <option
              v-for="dim in dimensions"
              :key="dim.id"
              :value="dim.id"
            >
              {{ dim.name }}
            </option>
          </MaterializeSelect>
          <label :for="'a_ptype_' + article.id">Portionsbezeichnung</label>
        </div>
        <div class="input-field col s4">
          <input
            :id="'a_pprice_' + article.id"
            v-model.number="article.portion.price"
            placeholder="Preis"
            type="number"
            step="0.01"
            class="validate"
          >
          <label
            :for="'a_pprice_' + article.id"
            class="active"
          >Portionspreis in €</label>
        </div>

        <div class="col s12 right">
          <span
            class="right"
          >Gesamtpreis
            <TweenedNumber
              :wert="article.ContentPrice"
              :einheit="'€'"
              :precision="2"
            /></span>
        </div>
      </div>
      <div
        :id="identifier + '_variants'"
        class="row"
      >
        <div class="col s12">
          <ArticleVariant
            v-for="(variant, index) in variants"
            :key="'article_' + article.id + '_variant_' + index"
            :identifier="'article_' + article.id + '_variant_' + index"
            :variant="variant"
            :article="article"
          />

          <a
            href="#"
            @click="addVariant(article)"
          >Variante hinzufügen</a>
        </div>
      </div>
    </div>
    <div class="card-action">
      <a
        href="#"
        @click="deleteArticle(article)"
      >Artikel löschen</a>
      <a
        v-if="changed"
        href="#"
        @click="storeArticle(article)"
      >Artikel speichern</a>
    </div>
  </div>
</template>

<script>
import { Article, thawArticle } from '../model/article';
import MaterializeSelect from "./MaterializeSelect";
import TweenedNumber from "./TweenedNumber";
import ArticleVariant from "./ArticleVariant";
import { thawVariant, Variant } from '../model/variant';

export default {
  name: "Article",
  components: {MaterializeSelect, TweenedNumber, ArticleVariant},
  props: {
    a: {
      type: Object,
      default() { return new Article(); }
    },
    dimensions: {
      type: Array,
      default() { return []; }
    },
    groups: {
      type: Array,
      default() { return []; }
    },
    identifier: {
      type: String,
    }
  },
  data() {
    return {
      changed: false,
      article: null,
      original: null,
      variants: [],
      tabs: null
    }
  },
  computed: {

  },
  watch: {
    article: {
      handler(newValue, oldVal) {
        this.changed = JSON.stringify(newValue) != this.original;
      },
      deep: true
    }
  },
  created() {
    this.article = this.a;
    this.original = JSON.stringify(this.a);
    this.loadVariants(this.article);
  },
  mounted() {
    var tabs = this.$el.getElementsByClassName("tabs")[0];
    M.Tabs.init(tabs, {});
    this.tabs = M.Tabs.getInstance(tabs);
    this.$M.updateTextFields();
  },
  methods: {
    storeArticle: function(article) {
      this.$http
        .post(
          "/api/artikel" + (article.id > 0 ? '/' + article.id : ''),
          JSON.stringify(article),
          {
            headers: {
              'Content-Type': 'application/json'
            }
          }
        )
        .then(response => {
          this.$M.toast({ html: response.data + " Artikel aktualisiert." });
          this.article = thawArticle(response.data);
        })
        .catch(error => {
          this.$M.toast({ html: response });
        });
    },
    deleteArticle: function(article) {
      this.$http
        .delete(
          "/api/artikel/" + article.id,
        )
        .then(response => {
          this.$emit('delete-article', article);
          this.$M.toast({ html: response.data + " Artikel gelöscht." });
        })
        .catch(error => {
          this.$M.toast({ html: response });
        });
    },
    addVariant(article) {
      var variant = new Variant();
      variant.ArticleId = article.id;
      this.variants.push(variant);
    },
    loadVariants: function(article) {
      this.$http
        .get(
          "/api/artikel/" + article.id + '/varianten',
        )
        .then(response => {
          return response.data;
        })
        .then(json => {
          if (json != null) {
            json.forEach(element => {
              this.variants.push(thawVariant(element));
            });
          }
        })
        .then(() => {
          this.$M.updateTextFields();
        })
        .catch(error => {
          this.$M.toast({ html: error });
        });
    },

  }
};
</script>