LLEdit.vue

<template>
  <l-modal
    :showing="showing"
    text="Responsible Authorities"
    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/2 mr-2">
          <b>Id</b>
          <br />
          <l-input
            placeholder="Enter unique Id"
            v-model="editObj.id"
            inputClass="text-2xs"
            :disabled="true"
          ></l-input>
        </div>
        <div class="w-1/2">
          <b>Name</b>
          <br />
          <l-input placeholder="Enter 'Name' (text)" v-model="editObj.name" inputClass="text-2xs"></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Locator</b>
          <br />
          <l-input
            placeholder="Enter 'Locator' (text)"
            v-model="editObj.locator"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-1/2 mr-2">
          <b>Address</b>
          <br />
          <l-input
            placeholder="Enter 'Address' (text)"
            v-model="editObj.address"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Postcode</b>
          <br />
          <l-input
            placeholder="Enter 'Postcode'"
            v-model="editObj.postcode"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-1/2 mr-2">
          <b>Organisation</b>
          <br />
          <l-input
            placeholder="Enter 'Organisation' (text)"
            v-model="editObj.organisation"
            inputClass="text-2xs"
          ></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Website</b>
          <br />
          <l-input
            placeholder="Enter 'Website' (text)"
            v-model="editObj.website"
            inputClass="text-2xs"
          ></l-input>
        </div>
        <div class="w-1/2 mr-2">
          <b>Email</b>
          <br />
          <l-input placeholder="Enter 'Email' (text)" v-model="editObj.email" inputClass="text-2xs"></l-input>
        </div>
      </div>
      <div class="w-full flex mb-4">
        <div class="w-1/2 mr-2">
          <b>Phone</b>
          <br />
          <l-input placeholder="Enter 'Phone' (text)" v-model="editObj.phone" inputClass="text-2xs"></l-input>
        </div>
        <div class="w-1/2 mr-2">
          <b>Is Responsible Reporter</b>
          <br />
          <l-input
            placeholder="Enter 'Is Responsible Reporter' ('true' or 'false')"
            v-model="editObj.is_responsible_reporter"
            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", "stations", "selected"],
  components: {
    LModal,
    LInput,
    LButton,
    LSelect,
    LOption
  },
  computed: {
    editObj: function() {
      return Object.assign({}, this.selected);
    }
  },
  methods: {
    close() {
      this.$emit("close");
    },
    onSave() {
      this.$emit("save", this.editObj);
      this.close();
    }
  }
};
</script>