Ain Izazi
101 lines
4.2 KiB
Vue
101 lines
4.2 KiB
Vue
<template>
|
|
<div class="">
|
|
|
|
<deletemodal ref="delmodal" @clickDelete_="getBarangKes"></deletemodal>
|
|
<modal ref="modal" @clickEvent_="getBarangKes"></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>Daftar
|
|
</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="(barangkes, i) in showBarangKes.data" :key="i">
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
<p class="text-gray-900 whitespace-no-wrap" v-text="(showBarangKes.from + i)"></p>
|
|
</td>
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
<p class="text-gray-900 whitespace-no-wrap" v-text="barangkes.nama"></p>
|
|
</td>
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
<p class="text-gray-900 whitespace-no-wrap" v-text="barangkes.nokp"></p>
|
|
</td>
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
<p class="text-gray-900 whitespace-no-wrap" v-text="barangkes.nota"></p>
|
|
</td>
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
<button @click="deleteBarangKes(barangkes.id, barangkes.nama, barangkes.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>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<pagination :data="paginate" @clickEvent_="getBarangKes"></pagination>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import pagination from '../components/pagination.vue'
|
|
import modal from '../components/util/BarangkesModal.vue'
|
|
import deletemodal from '../components/util/Deletemodal.vue'
|
|
|
|
export default {
|
|
components: {
|
|
pagination,
|
|
modal,
|
|
deletemodal
|
|
},
|
|
data() {
|
|
return {
|
|
currentPage: 1,
|
|
showBarangKes: [],
|
|
paginate: {},
|
|
search: ''
|
|
}
|
|
},
|
|
created() {
|
|
this.getBarangKes(this.currentPage)
|
|
},
|
|
methods: {
|
|
getBarangKes(pageNumber) {
|
|
|
|
},
|
|
|
|
showModal() {
|
|
this.$refs.modal.showModal = true;
|
|
this.$refs.modal.kodcaw = this.$kodcaw;
|
|
},
|
|
deleteBarangKes(id, nama, nokp) {
|
|
this.$refs.delmodal.deleteid = id;
|
|
this.$refs.delmodal.nama = nama;
|
|
this.$refs.delmodal.nokp = nokp;
|
|
this.$refs.delmodal.showDelete = true;
|
|
}
|
|
}
|
|
}
|
|
</script>
|