UnivateProperties/src/components/property/propertyFieldEditor.vue

<template>
  <div>
    <div>
      <div v-if="!edit" class="input-group-prepend">
        <input
          class="form-control"
          type="text"
          name="currentField.name"
          id="currentField.id"
          v-model="display"
          disabled
        />
        <span @click="EditClick()" class="input-group-text" style="color: #60CBEB">
          <eva-icon name="edit-outline" fill="#60CBEB"></eva-icon>
        </span>
      </div>
      <div v-if="edit" class="input-group-prepend">
        <!-- Text -->
        <input
          v-if="editType === 'text'"
          class="form-control"
          type="text"
          name="currentField.name"
          id="currentField.id"
          v-model="display"
        />
        <!-- Number -->
        <input
          v-if="editType === 'number'"
          class="form-control"
          type="number"
          name="currentField.name"
          id="currentField.id"
          v-model="display"
        />
        <!-- Selector -->
        <select
          v-if="editType === 'selector'"
          class="form-control"
          v-model="selectorSelection"
          @change="SelectorSelected"
        >
          <option value="0">Please select type</option>
          <option v-for="item in arrayObject" :value="item.id" :key="item.id">{{ item.description }}</option>
        </select>
        <!-- yesno -->
        <select v-if="editType === 'yesno'" class="form-control" @change="YesNoSelected">
          <option></option>
          <option value="yes">Yes</option>
          <option value="no">No</option>
        </select>
        <span @click="Save()" class="input-group-text" style="color: #60CBEB">
          <eva-icon name="checkmark-outline" fill="#60CBEB"></eva-icon>
        </span>
        <span @click="Close()" class="input-group-text" style="color: #60CBEB">
          <eva-icon name="close-outline" fill="#60CBEB"></eva-icon>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'propertyFieldEdit',
  props: {
    display: String,
    arrayObject: [],
    canEdit: Boolean,
    editType: String,
  },
  data() {
    return {
      edit: false,
      selectorSelection: Object,
    };
  },
  methods: {
    EditClick() {
      this.edit = true;
    },
    Save() {
      this.edit = false;

      // Need to emit the parent controller
    },
    Close() {
      this.edit = false;
    },
    SelectorSelected(item) {
      if (item.target.options.selectedIndex > 0) {
        this.display = this.arrayObject[
          item.target.options.selectedIndex - 1
        ].description;
        console.log(
          this.arrayObject[item.target.options.selectedIndex - 1].description,
        );
      }
    },
    YesNoSelected(item) {
      if (item.target.options.selectedIndex === 1) {
        this.display = 'Yes';
      }
      if (item.target.options.selectedIndex === 2) {
        this.display = 'No';
      }
    },
  },
};
</script>