UnivateProperties/src/components/shared/fieldEditor.vue

<template>
  <div>
    <div v-if="!edit" class="input-group-prepend">
      <input class="form-control" v-model="myDisplay" disabled />
      <span
        v-if="mayEdit"
        @click="EditClick()"
        class="input-group-text spanCursor"
        style="color: #60CBEB"
      >
        <eva-icon name="edit-outline" fill="#60CBEB"></eva-icon>
      </span>
    </div>
    <div v-if="edit" class="input-group-prepend">
      <input v-if="type === 'text'" class="form-control" v-model="value" />
      <input v-if="type === 'number'" type="number" class="form-control" v-model="value" />
      <input v-if="type === 'date'" type="date" class="form-control" v-model="value" />
      <select v-if="type === 'select'" class="form-control" @change="selectionClick">
        <option>Please select</option>
        <option
          v-for="option in selectOptions"
          :value="option[selectValue]"
          :key="option[selectValue]"
        >{{ option[selectText] }}</option>
      </select>
      <select v-if="type === 'selectlist'" class="form-control" v-model="value">
        <option v-for="item in selectOptions" :value="item" :key="item">{{ item }}</option>
      </select>
      <!-- <Datetime class="form-control" v-if="type === 'datetime'" v-model="value" /> -->
      <span
        v-if="edit"
        @click="UpdateValue()"
        class="input-group-text spanCursor"
        style="color: #60CBEB"
      >
        <eva-icon name="checkmark-outline" fill="#60CBEB"></eva-icon>
      </span>
      <span v-if="edit" @click="Close()" class="input-group-text spanCursor" style="color: #60CBEB">
        <eva-icon name="close-outline" fill="#60CBEB"></eva-icon>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: [
    'value',
    'type',
    'mayEdit',
    'selectOptions',
    'selectValue',
    'selectText',
    'display',
  ],
  data() {
    return {
      edit: false,
      myDisplay: '',
    };
  },
  methods: {
    UpdateValue() {
      this.edit = false;
      if (this.type !== 'select' && this.value) {
        this.$emit('input', this.value);
        this.$emit('change', this.value);
      }
    },
    EditClick() {
      this.edit = true;
    },
    Close() {
      this.edit = false;
    },
    selectionClick(item) {
      if (item.target.options.selectedIndex > 0) {
        if (!this.value) {
          this.myDisplay = this.selectOptions[
            item.target.options.selectedIndex - 1
          ][this.selectText];
        }
        if (this.selectOptions[item.target.options.selectedIndex - 1]) {
          this.$emit(
            'input',
            this.selectOptions[item.target.options.selectedIndex - 1],
          );
          this.$emit(
            'change',
            this.selectOptions[item.target.options.selectedIndex - 1],
          );
        }
      }
    },
  },
  mounted() {
    if (this.value) {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.myDisplay = this.value;
    }
    if (this.value && this.selectText) {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.myDisplay = this.value[this.selectText];
    }
    if (this.display) {
      this.myDisplay = this.display;
    }
    if (this.type === 'date') {
      this.myDisplay = this.$options.filters.toDate(this.value);
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    checkValue() {
      if (this.value) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.myDisplay = this.value;
      }
      if (this.value && this.selectText) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.myDisplay = this.value[this.selectText];
      }
      if (this.display) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.myDisplay = this.display;
      }
    },
  },
  watch: {
    checkValue() {
      return null;
    },
  },
};
</script>