/libsys/frontend/src/components/BorrowerForm.vue [vue]

BorrowerForm.vue

<template>
<sweet-modal ref="edit_borrower_modal">

  <h2>{{borrower.id != null ? $t('edit_student') : $t('create_new_student')}}</h2>
  <div class="form-group">
    <label for="editor_name">{{$t('name')}}</label>
    <input id="editor_name" v-model="borrower.name" placeholder="" class="form-control">
  </div>

  <div class="form-group">
    <label for="editor_phone">{{$t('phone')}}</label>
    <input id="editor_phone" v-model="borrower.phone" placeholder="" class="form-control">
  </div>

  <div class="form-group">
    <label for="editor_date_of_birth">{{$t('date_of_birth')}}</label>
    <input id="editor_date_of_birth" v-model="borrower.displayed_date_of_birth" placeholder="" class="form-control" autocomplete="off">
  </div>

  <div class="form-group">
    <label for="editor_address">{{$t('address')}}</label>
    <textarea id="editor_address" v-model="borrower.address" placeholder="" class="form-control"></textarea>
  </div>

  <div class="form-group">
    <button class='btn btn-success' v-on:click="save_entity">{{$t('save')}}</button>
  </div>
</sweet-modal>
</template>

<script>
import { SweetModal, SweetModalTab } from 'sweet-modal-vue'
export default {
  components: {
    SweetModal,
    SweetModalTab
  },
  props: ['borrower'],
  data() {
    return {
      languages: []
    }
  },
  created() {
    this.load_languages()
  },
  mounted() {},
  watch: {
    borrower: function(val) {
      this.borrower.displayed_date_of_birth =
        this.borrower && this.borrower.date_of_birth
          ? this.$moment(this.borrower.date_of_birth).format('DD/MM/YYYY')
          : null
    }
  },
  methods: {
    load_languages: function() {
      if (this.languages === undefined || this.languages.length == 0) {
        console.log('language list is empty')
        var vm = this
        this.$axios
          .get(`/api/languages`, {
            headers: this.authorization(),
            params: null
          })
          .then(response => {
            console.log(response.data.data)
            vm.languages = response.data.data
            vm.new_book.language_id = 1
          })
          .catch(e => {
            //vm.errors.push(e)
          })
      }
    },
    save_entity: function() {
      var vm = this
      var borrower = this.borrower
      if (borrower.id == null) {
        vm.create_entity(borrower)
        return
      }
      this.$axios
        .put(
          `/api/borrowers/` + borrower.id,
          {
            borrower: {
              name: borrower.name,
              phone: borrower.phone,
              address: borrower.address,
              date_of_birth: vm.$moment.utc(borrower.displayed_date_of_birth, 'DD/MM/YYYY')
            }
          },
          {
            headers: this.authorization()
          }
        )
        .then(response => {
          console.log(response)
          vm.$refs.edit_borrower_modal.close()
          vm.$parent.onEditorClose()
        })
        .catch(e => {
          //vm.errors.push(e)
        })
    },
    create_entity: function(borrower) {
      var vm = this
      this.$axios
        .post(
          `/api/borrowers`,
          {
            borrower: {
              name: borrower.name,
              phone: borrower.phone,
              address: borrower.address,
              date_of_birth: vm.$moment.utc(borrower.displayed_date_of_birth, 'DD/MM/YYYY')
            }
          },
          vm.auth()
        )
        .then(response => {
          console.log(response.data)
          vm.$refs.edit_borrower_modal.close()
          vm.$parent.onEditorClose()
        })
        .catch(e => {
          // vm.errors.push(e)
        })
    }
  }
}
</script>