admin-erahn/resources/js/pages/Blacklist.vue

<template>
    <div class="">

      <deletemodal ref="delmodal" @clickDelete_="getBlacklist"></deletemodal>
      <modal ref="modal" @clickEvent_="getBlacklist"></modal>

      <div class="flex justify-between mb-2">
        <div>
            <button @click.prevent="showModal" class="border border-green-600 text-green-600 font-montserrat py-2 px-3 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><i class="fas fa-plus mr-2"></i>Tambah</button>
        </div>
        <div>
          <input v-model="search" class="border border-2 rounded px-4 py-2 w-80r mr-2 " type="text" />
          <button @click.prevent="searchname" class="mr-2 border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><i class="fas fa-search mr-2"></i>Cari</button>
        </div>
      </div>
        
        <table class="min-w-full leading-normal">
            <thead class="text-center">
              <tr>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Bil
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Nama
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  IC
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Nota
                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Action
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(blacklist,i) in showblacklist.data" :key="i">
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="(showblacklist.from + i)">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="blacklist.nama">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="blacklist.nokp">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <p class="text-gray-900 whitespace-no-wrap" v-text="blacklist.nota">
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div class="flex items-center">
                    <div class="ml-3">
                      <button data-modal-toggle="popup-modal" @click="deleteBlacklist(blacklist.id,blacklist.nama,blacklist.nokp)" class="border border-red-600 text-red-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-red-600 hover:text-white transition-all duration-300">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>

      <pagination :data="paginate" @clickEvent_="getBlacklist"></pagination>


    </div>
</template>
<script>
import pagination from '../components/pagination.vue'
import modal from '../components/util/BlacklistModal.vue'
import deletemodal from '../components/util/Deletemodal.vue'

export default {
  components: {
    pagination,
    modal,
    deletemodal
    
	},
  data(){
    return{
      currentPage: 1,
      showblacklist:[],
      paginate:{},
      search:''
    }
  },
  created() {
    this.getBlacklist(this.currentPage)
	},
  methods:{
    getBlacklist(pageNumber){
      this.axios.get(this.$hostname + '/admin/SenaraiBlacklist/' + this.$kodcaw,{
        params: {
        page: pageNumber
      }
      }).then(response => {
          this.showblacklist = response.data
          this.paginate = response.data
          this.currentPage = pageNumber
      });
    },
    searchname(){
      this.axios.get(this.$hostname + '/admin/SenaraiBlacklist/' + this.$kodcaw,{
      params: {
        page: 0,
        search: this.search
      }
      }).then(response => {

          this.showblacklist = response.data
          this.paginate = response.data
      });
    },
    showModal() {
    // let element = this.$refs.modal.$el
      // $(element).modal('show')

      this.$refs.modal.showModal = true;
      this.$refs.modal.kodcaw = this.$kodcaw;
      
    },
    deleteBlacklist(id,nama,nokp){
      this.$refs.delmodal.deleteid = id;
      this.$refs.delmodal.nama = nama;
      this.$refs.delmodal.nokp = nokp;
      this.$refs.delmodal.showDelete = true;
    }
  }
}
</script>