inventur/app/js/App.vue

<template>
  <div>
    <NavigationBar
      :primary-color="primaryColor"
      @changed-tab="changeView"
    />
    <div class="container">
      <div
        v-if="!ready"
        class="valign-wrapper"
        style="height: 90vh"
      >
        <div class="progress">
          <div class="indeterminate" />
        </div>
      </div>
      <transition name="fade">
        <div
          v-if="ready && view == 'inventory'"
          id="inventory"
          class="col s12"
        >
          <InventoryTable
            ref="inventory"
            :articles="articles"
            :groups="groups"
            :dimensions="dimensions"
          />
        </div>
        <div
          v-if="ready && view == 'calc'"
          id="calc"
          class="col s12"
        >
          <Calculator :articles="articles" />
        </div>
        <div
          v-if="ready && view == 'article'"
          id="article"
          class="col s12"
        >
          <ArticlesView
            :articles="articles"
            :groups="groups"
            :dimensions="dimensions"
          />
        </div>
      </transition>
    </div>
    <div
      ref="fab"
      class="fixed-action-btn"
    >
      <a
        class="btn-floating btn-large"
        :class="primaryColor"
      >
        <i class="large material-icons">more_vert</i>
      </a>
      <ul>
        <li v-show="view == 'article'">
          <a
            href="#"
            class="btn-floating tooltipped"
            data-position="left"
            data-tooltip="Artikel hinzufügen"
            @click="addArticle"
          >
            <i class="material-icons">add</i>
          </a>
        </li>
        <li v-show="view == 'inventory'">
          <a
            href="#"
            class="btn-floating tooltipped"
            data-position="left"
            data-tooltip="Inventur zurücksetzen"
            @click="$refs.inventory.$emit('reset-inventur')"
          >
            <i class="material-icons">clear_all</i>
          </a>
        </li>
        <li v-show="view == 'inventory'">
          <a
            href="#"
            class="btn-floating tooltipped"
            data-position="left"
            data-tooltip="Inventur exportieren"
            @click="$refs.inventory.$emit('export-inventur')"
          >
            <i class="material-icons">save</i>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Calculator from './components/Calculator';
import InventoryTable from './components/InventoryTable';
import ArticlesView from './components/ArticlesView';
import NavigationBar from './components/NavigationBar';
import {Article, thawArticle} from './model/article';

export default {
  name: "App",
  components: { InventoryTable, NavigationBar, Calculator, ArticlesView },
  data() {
    return {
      articles: [],
      dimensions: [],
      groups: [],
      bon: [],
      caretPosition: 0,
      fab: null,
      view: "article",
      location: 'fairwertbar'
    };
  },
  computed: {
    primaryColor() {
      switch (this.view) {
      case "inventory":
        return "teal";
      case "calc":
        return "orange";
      case "article":
        return "blue";
      default:
        return "red";
      }
    },
    ready() {
      return this.dimensions.length && this.groups.length;
    }
  },
  created: function() {
    this.loadDimensions();
    this.loadGroups();
    this.loadArticles();
  },
  mounted() {
    var fab = this.$refs.fab;
    this.fab = this.$M.FloatingActionButton.init(fab, {});
  },
  methods: {
    changeView(tabId) {
      this.view = tabId;
    },
    addArticle: function() {
      this.articles.push(new Article());
    },
    loadDimensions: function() {
      var app = this;
      this.$http
        .get("api/dimension")
        .then(response => {
          return response.data;
        })
        .then(json => {
          if (json != null) {
            json.forEach(element => {
              app.dimensions.push(element);
            });
          }
        })
        .then(() => {
          this.$M.toast({ html: "Dimensionen wurden geladen." });
        });
    },
    loadGroups: function() {
      var app = this;
      this.$http
        .get("api/group")
        .then(response => {
          return response.data;
        })
        .then(json => {
          if (json != null) {
            json.forEach(element => {
              app.groups.push(element);
            });
          }
        })
        .then(() => {
          this.$M.toast({ html: "Artikelgruppen wurden geladen." });
        });
    },
    loadArticles: function() {
      var app = this;
      this.$http
        .get("api/artikel")
        .then(response => {
          return response.data;
        })
        .then(json => {
          if (json != null) {
            json.forEach(element => {
              app.articles.push(thawArticle(element));
            });
          }
        })
        .then(() => {
          this.$M.toast({ html: "Artikel wurden geladen." });
          this.$M.updateTextFields();
        });
    },
    exportInventur() {

    }
  }
};
</script>

<style>
</style>