DokterAdd.vue

<template>
  <div>
    <div align="left">
      <label class="obligatory">Keterangan: Isian bertanda * harus diisi</label>
    </div>
    </br>

    <div class="columns">
      <div class="column">

        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">Nama Dokter*</label>
          </div>
          <div class="control is-grouped">
            <div class="control">
              <input class="input" :class="{'is-danger' : errors.nama}"
                     type="text" v-model="cmd.nama" placeholder="Nama Dokter"
                     @blur="keyName(cmd.nama)" @input="keyName(cmd.nama)" />
            </div>
            <div class="control" v-if="errors.nama">
              <span class="help is-danger">{{errors.nama}}</span>
            </div>
          </div>
        </div>

        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">NIP*</label>
          </div>
          <div class="control is-grouped">
            <div class="control">
              <input class="input" :class="{'is-danger' : errors.nip}"
                     type="text" v-model="cmd.nip" placeholder="NIP"
                     @blur="validateNip(cmd.nip)" @input="validateNip(cmd.nip)" />
            </div>
            <div class="control" v-if="errors.nip">
              <span class="help is-danger">{{errors.nip}}</span>
            </div>
          </div>
        </div>

        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">Jenis Kelamin*</label>
          </div>
          <div class="control is-grouped">
            <div class="control">
              <input class="radio" :class="{'is-danger' : errors.jenisKelamin}"
                     type="radio" v-model="cmd.jenisKelamin" :value="man" /> {{ man }}
              <input class="radio" :class="{'is-danger' : errors.jenisKelamin}"
                     type="radio" v-model="cmd.jenisKelamin" :value="woman" /> {{ woman }}
            </div>
            <div class="control" v-if="errors.jenisKelamin">
              <span class="help is-danger">{{errors.jenisKelamin}}</span>
            </div>
          </div>
        </div>

        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">No Telepon*</label>
          </div>
          <div class="control is-grouped">
            <div class="control">
              <input class="input" :class="{'is-danger' : errors.noTelp}"
                     type="text" v-model="cmd.noTelp" placeholder="No Telepon"
                     @blur="validateTelepon(cmd.noTelp)" @input="validateTelepon(cmd.noTelp)"/>
            </div>
            <div class="control" v-if="errors.noTelp">
              <span class="help is-danger">{{errors.noTelp}}</span>
            </div>
          </div>
        </div>

        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">Jalan/No. Rumah*</label>
          </div>
          <div class="control is-grouped is-two-thirds">
            <div class="control">
              <textarea class="textarea" :class="{'is-danger' : errors.alamat}"
                     type="text" v-model="cmd.alamat" placeholder="Alamat"
                     @blur="keyAlamat(cmd.alamat)" @input="keyAlamat(cmd.alamat)"></textarea>
            </div>
            <div class="control" v-if="errors.alamat">
              <span class="help is-danger">{{ errors.alamat }}</span>
            </div>
          </div>
        </div>

        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">Provinsi*</label>
          </div>
          <div class="control is-grouped">
            <div class="control">
              <p class="control">
                <span class="select">
                  <select v-model="cmd.provinsiId" :class="{'is-danger' : errors.provinsiId}">
                    <option value="" disabled cmd.provinsiID hidden>Pilih</option>
                    <option v-for="prov in provinsi" :value="prov.provinsiId">{{ prov.nama }}</option>
                  </select>
                </span>
              </p>
            </div>
            <div class="control" v-if="errors.provinsiId">
              <span class="help is-danger">{{errors.provinsiId}}</span>
            </div>
          </div>
        </div>

        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">Kota/Kabupaten*</label>
          </div>
          <div class="control is-grouped">
            <div class="control">
              <p class="control">
              <span class="select">
                  <select v-model="cmd.kabupatenId" :class="{'is-danger' : errors.kabupatenId}">
                    <option value="" disabled cmd.kabupatenId hidden>Pilih</option>
                    <option v-for="kab in kabupaten" :value="kab.kotaKabupatenId">{{ kab.nama }}</option>
                  </select>
                </span>
              </p>
            </div>
            <div class="control" v-if="errors.kabupatenId">
              <span class="help is-danger">{{errors.kabupatenId}}</span>
            </div>
          </div>
        </div>

        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">Kecamatan*</label>
          </div>
          <div class="control is-grouped">
            <div class="control">
              <p class="control">
              <span class="select">
                  <select v-model="cmd.kecamatanId" :class="{'is-danger' : errors.kecamatanId}">
                    <option value="" disabled cmd.kecamatanId hidden>Pilih</option>
                    <option v-for="kec in kecamatan" :value="kec.kecamatanId">{{ kec.nama }}</option>
                  </select>
                </span>
              </p>
            </div>
            <div class="control" v-if="errors.kecamatanId">
              <span class="help is-danger">{{errors.kecamatanId}}</span>
            </div>
          </div>
        </div>

        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">Kelurahan*</label>
          </div>
          <div class="control is-grouped">
            <div class="control">
              <p class="control">
              <span class="select">
                  <select v-model="cmd.kelurahanId" :class="{'is-danger' : errors.kelurahanId}">
                    <option value="" disabled cmd.kelurahanId hidden>Pilih</option>
                    <option v-for="kel in kelurahan" :value="kel.kelurahanId">{{ kel.nama }}</option>
                  </select>
                </span>
              </p>
            </div>
            <div class="control" v-if="errors.kelurahanId">
              <span class="help is-danger">{{errors.kelurahanId}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">Spesialisasi*</label>
          </div>
          <div class="control is-grouped">
            <div class="control">
              <p class="control">
                <span class="select">
                  <select v-model="spesialId" :class="{'is-danger' : errors.spesialId}">
                  <option value="" disabled spesialId hidden>Pilih</option>
                  <option v-for="sps in spesials" :value="sps.enumValue"> {{ sps.enumValue }} </option>
                  </select>
                </span>
                <button class="button is-primary" @click="addSpesial()">Tambah</button>
              </p>
            </div>
            <div class="control" v-if="errors.spesialisasi">
              <span class="help is-danger">{{errors.spesialisasi}}</span>
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label"></label>
          </div>
          <div class="control is-grouped">
            <div class="control">
              <p class="control">
                <table v-if="spsDokter.length > 0" class="vuetable ui blue selectable celled stackable attached table">
                  <th>Nama Spesialis</th>
                  <th>Aksi</th>
                  <tr v-for="spesial in spsDokter">
                    <td> {{ spesial }} </td>
                    <td><a href="#" @click.prevent="deleteSpesial(spesial)">Hapus</a></td>
                  </tr>
                </table>
              </p>
            </div>
          </div>
        </div>

    <div class="columns level-right">
      <div class="control is-horizontal">
        <div class="control-label">
          <label class="label"></label>
        </div>
        <div class="control is-grouped">
          <div class="control">
            <button class="button is-primary" @click="submit()">Simpan</button>
          </div>
          <div class="control">
            <button class="button is-light" @click="back()">Batal</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'
  import {router, bus} from '../../../index'
  import _ from 'lodash'

  export default {
    data () {
      return {
        cmd: {
          nama: null,
          nip: null,
          noTelp: null,
          jenisKelamin: '',
          alamat: '',
          provinsiId: '',
          kabupatenId: '',
          kecamatanId: '',
          kelurahanId: '',
          spesialisasi: []
        },
        spesialId: '',
        spesialisasi: {
          spesialisasi: '',
          dokterId: '',
          spsDokterId: ''
        },
        showSpesial: false,
        spesials: [],
        spsDokter: [],
        provinsi: [],
        kabupaten: [],
        kecamatan: [],
        kelurahan: [],
        loading: false,
        errors: {},
        man: 'Laki-laki',
        woman: 'Perempuan'
      }
    },

    watch: {
      '$route': 'fetchData',
      'cmd.provinsiId': (val) => {
        this.errors.provinsiId = null
        console.log('[SELECTED PROVINSI] VAL : ', val)
        axios.get('/alamat/daftarkabupaten/' + val)
        .then((resp) => {
          this.kabupaten = resp.data
          this.cmd.kabupatenId = ''
          this.kecamatan = []
          this.cmd.kecamatanId = ''
          this.kelurahan = []
          this.cmd.kelurahanId = ''
          console.log('DATA KABUPATEN : ', this.kabupaten)
        })
      },

      'cmd.kabupatenId': (val) => {
        this.errors.kabupatenId = null
        console.log('[SELECTED KABUPATEN] VAL : ', val)
        axios.get('/alamat/daftarkecamatan/' + val)
        .then((resp) => {
          this.kecamatan = resp.data
          this.cmd.kecamatanId = ''
          this.kelurahan = []
          this.cmd.kelurahanId = ''
          console.log('DATA KECAMATAN : ', resp.data)
        })
      },

      'cmd.kecamatanId': (val) => {
        this.errors.kecamatanId = null
        console.log('[SELECTED KECAMATAN] VAL : ', val)
        axios.get('/alamat/daftarkelurahan/' + val)
        .then((resp) => {
          this.kelurahan = resp.data
          this.cmd.kelurahanId = ''
          console.log('DATA KELURAHAN : ', resp.data)
        })
      },

      'cmd.kelurahanId': (val) => {
        this.errors.kelurahanId = null
      },

      'cmd.jenisKelamin': (val) => {
        console.log('ISI VALUE :', val)
        if (val === null || val === '') {
          this.$set(this.errors, 'jenisKelamin', 'Tidak boleh kosong')
        } else {
          this.errors.jenisKelamin = null
        }
      }
    },

    created () {
      console.log('ADD DOCTOR CREATED')
      console.log('element', this.$element)
      this.fetchData()
    },

    methods: {
      fetchData () {
        console.log('FETCH DOCTOR DATA')

        axios.get('/dokter/daftarspesial')
        .then((resp) => {
          console.log('BERHASIL FETCH DAFTAR SPESIALISASI DOKTER')
          this.spesials = resp.data
          console.log(this.spesials)
        })
        .catch((errors) => {
          console.log('ERROR FETCH SPESIAL : ', errors)
        })

        axios.get('/alamat/daftarprovinsi')
        .then((resp) => {
          console.log('BERHASIL FETCH DAFTAR PROVINSI')
          this.provinsi = resp.data
          console.log(this.provinsi)
        })
      },

      back () {
        router.replace('/master-data/dokter/daftar')
      },

      submit () {
        for (var field in this.errors) {
          if (this.errors[field] !== null) return
        }

        console.log('PRE CMD : ', this.cmd)
        axios.post('/dokter/tambahsubmit', this.cmd)
        .then((resp) => {
          console.log('BERHASIL INSERT DOKTER, ALAMAT DAN SPESIALISASI')
          console.log('ID DOKTER : ', resp.data)
          router.replace('/master-data/dokter/detail/' + resp.data)
          bus.$emit('NOTIFY', 'success', 'Data Dokter berhasil ditambah.')
        })
        .catch((error) => {
          console.log('ERROR')
          console.log(error.response)

          _.each(error.response.data.errors, (value) => {
            this.$set(this.errors, value.field, value.message)

            if (this.cmd.nama === '') {
              this.$set(this.errors, 'nama', 'Tidak boleh kosong')
            }
          })
          this.$forceUpdate()
        })
      },

      addSpesial () {
        if (this.spesialId !== '') {
          this.spsDokter.push(this.spesialId)
          this.cmd.spesialisasi.push(this.spesialId)
          _.remove(this.spesials, (obj) => {
            return obj.enumValue === this.spesialId
          })
          this.spesialId = ''
        }
      },

      deleteSpesial (spesial) {
        _.remove(this.spsDokter, (delsps) => {
          return delsps === spesial
        })
        _.remove(this.cmd.spesialisasi, (delIdSps) => {
          return delIdSps === spesial
        })
        let obj = { enumValue: spesial }
        this.spesials.push(obj)
        console.log('isi hapus', spesial)
      },

      keyName (nama) {
        console.log('isi nama : ', nama)
        if (nama === null || nama === '') {
          this.$set(this.errors, 'nama', 'Tidak boleh kosong')
        } else {
          this.errors.nama = null
        }
      },

      keyNip (nip) {
        console.log('isi nip : ', nip)
        if (nip === null || nip === '') {
          this.$set(this.errors, 'nip', 'Tidak boleh kosong')
        } else {
          this.errors.nip = null
        }
      },

      keyAlamat (alamat) {
        console.log('isi alamat : ', alamat)
        if (alamat === null || alamat === '') {
          this.$set(this.errors, 'alamat', 'Tidak boleh kosong')
        } else {
          this.errors.alamat = null
        }
      },

      validateNip: _.debounce(
        (nip) => {
          if (nip === null || nip === '') {
            this.$set(this.errors, 'nip', 'Tidak boleh kosong')
          } else {
            this.errors.nip = null
            console.log('MASUK VALIDASI')
            axios.post('/dokter/validate/nip', this.cmd)
            .then((resp) => {
              this.errors.nip = null
              this.$forceUpdate()
            })
            .catch((error) => {
              console.log('ERROR :', error.response)
              _.each(error.response.data.errors, (val) => {
                this.$set(this.errors, val.field, val.message)
              })
              this.$forceUpdate()
            })
          }
        },
        500
      ),

      validateTelepon: _.debounce(
        (noTelp) => {
          if (noTelp === null || noTelp === '') {
            this.$set(this.errors, 'noTelp', 'Tidak boleh kosong')
          } else {
            this.errors.noTelp = null
            console.log('MASUK VALIDASI')
            axios.post('/dokter/validate/telepon', this.cmd)
            .then((resp) => {
              this.errors.noTelp = null
              this.$forceUpdate()
            })
            .catch((error) => {
              console.log('ERROR :', error.response)
              _.each(error.response.data.errors, (val) => {
                this.$set(this.errors, val.field, val.message)
              })
              this.$forceUpdate()
            })
          }
        },
        500
      )
    }
  }
</script>