LLEdit.vue

<template>
  <l-modal :showing="showing" text="Observations" icon="edit" color="bg-orange-500" @close="close">
    <div class="w-full text-xs" v-if="editObj.id">
      <div class="w-full flex mb-4">
        <div class="w-1/3 mr-2">
          <b>Id</b>
          <br />
          <l-input placeholder="Id" v-model="editObj.id" inputClass="text-2xs" :disabled="true"></l-input>
        </div>
        <div class="w-2/3">
          <b>Sampling Point ID</b>
          <br />
          <l-input
            placeholder="sampling_point_id"
            v-model="editObj.sampling_point_id"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>

      <div class="w-full flex mb-4">
        <div class="w-1/3 mr-2">
          <b>Begin Position</b>
          <br />
          <l-input
            placeholder="begin_position"
            v-model="editObj.begin_position"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-2/3">
          <b>End Position</b>
          <br />
          <l-input placeholder="end_position" v-model="editObj.end_position" inputClass="text-2xs"></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/3 mr-2">
          <b>Value</b>
          <br />
          <l-input placeholder="value" v-model="editObj.value" inputClass="text-2xs"></l-input>
        </div>
        <div class="w-2/3">
          <b>Verification Flag</b>
          <br />
          <l-input
            placeholder="verification_flag"
            v-model="editObj.verification_flag"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/3 mr-2">
          <b>Validation Flag</b>
          <br />
          <l-input
            placeholder="validation_flag"
            v-model="editObj.validation_flag"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-2/3">
          <b>Touched</b>
          <br />
          <l-input placeholder="touched" v-model="editObj.touched" inputClass="text-2xs"></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/3 mr-2">
          <b>Concentration</b>
          <br />
          <l-input placeholder="concentration" v-model="editObj.concentration" inputClass="text-2xs"></l-input>
        </div>
        <div class="w-2/3">
          <b>Timestep</b>
          <br />
          <l-input placeholder="timestep" v-model="editObj.timestep" inputClass="text-2xs"></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/3 mr-2">
          <b>From Time</b>
          <br />
          <l-input placeholder="from_time" v-model="editObj.from_time" inputClass="text-2xs"></l-input>
        </div>
        <div class="w-2/3">
          <b>To Time</b>
          <br />
          <l-input placeholder="to_time" v-model="editObj.to_time" inputClass="text-2xs"></l-input>
        </div>
      </div>

      <div class="flex w-full justify-between">
        <l-button type="success" @click="onSave">Save changes</l-button>
        <l-button type="danger" @click="close">Cancel</l-button>
      </div>
    </div>
  </l-modal>
</template>

<script>
import LModal from "@/components/LModal";
import { LInput, LButton, LSelect, LOption } from "@/components/forms";

export default {
  name: "LLEdit",
  props: ["showing", "observations", "selected"],
  components: {
    LModal,
    LInput,
    LButton,
    LSelect,
    LOption
  },
  computed: {
    editObj: function() {
      // debugger;
      return Object.assign({}, this.selected);
    }
  },
  methods: {
    close() {
      this.$emit("close");
    },
    onSave() {
      // debugger;

      this.$emit("save", this.editObj);
      this.close();
    }
  }
};
</script>