admin-erahn/resources/js/components/util/BarangkesModal.vue

<template>
  <div>
    <transition name="modal-fade">
      <div v-if="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
        <div class="relative w-1/3 my-6 mx-auto max-w-6xl">
          <!-- content -->
          <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
            <div class="relative p-4 flex-auto">
              <h3 class="text-center text-3xl font-semibold">
                Daftar Barang Kes
              </h3>

              <div class="flex flex-wrap mt-4">
                <div class="w-full max-w-lg mx-auto">

                  <!-- No Rujukan -->
                  <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="norujukan">
                      No Rujukan:
                    </label>
                    <input
                      id="norujukan"
                      type="text"
                      v-model="norujukan"
                      class="bg-white appearance-none border-2 border-gray-400 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500 border-black"
                      placeholder="isi no rujukan"
                    />
                  </div>

                  <!-- IC dan SAG -->
                  <div class="flex flex-wrap items-end mb-6 gap-4">
                    <!-- IC -->
                    <div class="w-full md:w-1/2">
                      <label class="block text-gray-700 text-sm font-bold mb-2" for="nama">
                        IC:
                      </label>
                      <input
                        id="frminput"
                        type="text"
                        ref="btnDropdownRef"
                        class="bg-white appearance-none border-2 border-gray-400 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500 border-black"
                        placeholder="isi nama / IC"
                      />
                    </div>

                    <!-- SAG -->
                    <div class="w-full md:w-1/2">
                      <label class="block text-gray-700 text-sm font-bold mb-2" for="sag">
                        SAG:
                      </label>
                      <input
                        id="saginput"
                        type="text"
                        v-model="kodcaw"
                        class="bg-white appearance-none border-2 border-gray-400 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500 border-black"
                        placeholder="isi kod SAG / cawangan"
                      />
                    </div>
                  </div>

                  <!-- Button Carian -->
                  <div class="flex justify-end mb-6 gap-2">
                    <button
                      class="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded shadow"
                      @click="cariMarhun"
                    >
                      <i class="fas fa-search"></i>
                      Cari Marhun
                    </button>
                  </div>

                  <!-- Tunjuk hasil carian -->
                  <div v-if="marhunData" class="mt-4 bg-gray-100 p-4 rounded">
                    <p><strong>No Rujukan:</strong> {{ marhunData.norujukan }}</p>
                    <p><strong>Nama Marhun:</strong> {{ marhunData.nama }}</p>
                  </div>

                  <!-- Footer button -->
                  <div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
                    <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1" v-on:click="toggleModal" type="button">
                      Batal
                    </button>
                    <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 border border-green-700 rounded" @click="addfunc" type="button">
                      Daftar
                    </button>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "modal",
  data() {
    return {
      showModal: false,
      kodcaw: '',
      norujukan: '',
      marhunData: null
    }
  },
  methods: {
    toggleModal() {
      this.showModal = !this.showModal;
    },
    async cariMarhun() {
      if (!this.norujukan) {
        this.$toast.warning("Sila isi No Rujukan dahulu.");
        return;
      }

      try {
        const response = await this.axios.get(this.$hostname + '/marhun/' + this.norujukan);
        this.marhunData = response.data;
        this.$toast.success("Maklumat berjaya dijumpai!");
      } catch (error) {
        this.marhunData = null;
        this.$toast.error("Rujukan tidak dijumpai atau berlaku ralat.");
        console.error("Gagal dapatkan data marhun:", error);
      }
    },
    addfunc: function(){

let dataHantar = {
  kodcaw: this.kodcaw,
  nokp: (this.specCust.kpbaru) ? this.specCust.kpbaru : this.specCust.kplama,
  nota: this.nota
};

console.log("Hantar ke backend:", dataHantar);

axios.post(this.$hostname + '/admin/AddBarangKes', dataHantar)
.then(response => {
  if(response.data == 'berjaya') {
    this.showModal = false;
    this.$toast.success("tambah Sudah Berjaya!");
    this.$emit('clickEvent_', this.pageNumber);
  } else {
    this.showModal = false;
    this.$toast.error("tambah tidak berjaya");
  }
})
.catch(error => {
  console.error("Gagal hantar:", error);


}).then(response => {

  if(response.data == 'berjaya')
  {
    this.showModal = false;
    this.$toast.success("tambah Sudah Berjaya!")
    // vm.$forceUpdate();
          
    this.$emit('clickEvent_', this.pageNumber)
      
    // setTimeout("window.location.reload()", 3000);
  }else{

    this.showModal = false;
    this.$toast.error("tambah tidak berjaya")
  }
});

}
  }
}
</script>

<style>
.modal-fade-enter,
.modal-fade-leave-to {
  opacity: 0;
}

.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity .5s ease;
}
</style>