UnivateProperties/src/components/communication/templateInnerItem.vue

<template>
  <div class="row">
    <div class="col-md-12" v-if="message !== undefined">
      <Alert :text="message" :type="'ERROR'" />
    </div>
    <div class="col-md-3">
      <input
        class="form-control"
        type="text"
        step="any"
        name="levy"
        placeholder="Name"
        v-model="item.name"
      />
    </div>
    <div class="col-md-3">
      <select class="form-control" v-model="item.class" @change="onClassChanged()">
        <option v-for="(item, i) in classes" :key="i" :value="item">{{item.name}}</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-control" v-model="item.property">
        <option v-for="(item, i) in properties" :key="i">{{item}}</option>
      </select>
    </div>
    <div class="col-md-3">
      <div class="btn btn-primary myBackground w-100" @click="onItemAdd()">Add</div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import Alert from '../shared/alert.vue';

export default {
  components: {
    Alert,
  },
  mounted() {
    this.init();
  },
  data() {
    return {
      message: undefined,
      item: {
        name: undefined,
        class: undefined,
        property: undefined,
      },
    };
  },
  computed: {
    ...mapState('info', ['classes', 'properties']),
  },
  methods: {
    ...mapActions('info', ['init', 'getClasses', 'getProperties']),
    onClassChanged() {
      this.getProperties(this.item.class);
    },
    onItemAdd() {
      this.message = undefined;
      let msg = '';
      if (this.item.name === undefined) {
        msg += 'Please give a name...';
      }
      if (this.item.class == undefined) {
        msg += 'Please choose a class...';
      }
      if (this.item.property == undefined) {
        msg += 'Please choose a property...';
      }
      if (msg.length > 0) {
        this.message = msg;
      } else {
        this.$emit('onItemAdd', this.item);
      }
    },
  },
};
</script>