cabang
unknown
javascript
4 years ago
16 kB
7
Indexable
<template>
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body p-0">
<div class="table-responsive">
<div class="container-fluid">
<div class="row p-3">
<div class="col-md-2">
<input type="text" v-model="search" class="form-control form-control-sm" id="parameter" name="code_manifest" placeholder="Search..">
</div>
<div class="col-md-2">
<!-- <div class="form-group">
<select class="form-control form-control-sm" name="status" id="id_filter">
<option value="0">--Filter--</option>
<option value="1">Name</option>
<option value="2">Role</option>
<option value="3">Email</option>
</select>
</div> -->
</div>
<div class="col-md-4">
<!-- <button type="submit" class="btn btn-custon-four btn-default btn-sm" id="filter-users">
<i class="fa fa-filter" aria-hidden="true"></i> Search
</button> -->
</div>
<div class="col-md-2">
<!-- <img src="@/assets/images/logo-d-plus.png" style="max-height:50px; max-width:50px;" alt=""> -->
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add-cabang">
<i class="fas fa-plus"></i> Add Cabang
</button>
</div>
</div>
</div>
<table class="table table-bordered table-striped projects" id="data">
<thead>
<tr>
<th width="5%" data-field="id" class="no">No</th>
<th data-field="kode" data-editable="true" class="username">Branch ID</th>
<th data-field="name" data-editable="true" class="username">Branch Name</th>
<th data-field="desc" data-editable="true" class="status">Status</th>
<th width="30%" data-field="action" style="text-align: center">Action</th>
</tr>
<div hidden="true">{{this.$session.get('token')}}</div>
</thead>
<tbody v-for="(data, index) in paginated" :key="data.branch_id">
<tr>
<td>{{ index+= 1 }}</td>
<td>{{ data.branch_id }}</td>
<td>{{ data.branch_name }}</td>
<td>{{ data.status }}</td>
<td class="text-center">
<button id="userEdit" type="button" class="btn btn-primary mr-2" v-on:click="editCabang = data" data-toggle="modal" data-target="#edit-cabang" title="Edit Cabang">
<i class="fas fa-edit"></i>
</button>
<button id="userDelete" type="button" class="btn btn-primary" v-on:click="deleteCabang = data" data-toggle="modal" data-target="#delete-cabang" title="Delete Cabang">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
<div class="col-md-12 text-center" mb-5>
<button class="btn btn-secondary mr-2" @click="offset -= 5" :disabled="!hasPrevPage">Prev</button>
<button class="btn btn-secondary" @click="offset += 5" :disabled="!hasNextPage">Next</button>
</div>
</div>
<div class="card-tools text-center" id="pagination"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="add-cabang" class="modal modal-edu-general FullColor-popup-DangerModal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="border-radius: 30px">
<div class="modal-close-area modal-close-df">
<a class="close" data-dismiss="modal" href="#"><i class="fa fa-close"></i></a>
</div>
<div class="modal-body">
<form @submit.prevent="prosesDaftar">
<div class="row clearfix">
<div class="col-sm-4">
<label>Branch Name</label>
<input v-model="dataList.branch_name" name="branch_name" id="branch_name" class="form-control" placeholder="Nama Cabang" required>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12 text-right mt-2">
<a href="" class="btn btn-danger mr-2" style="margin-left: 5px;">Back</a>
<button type="submit" class="btn btn-success waves-effect" id="kirim_edit">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="edit-cabang" class="modal modal-edu-general FullColor-popup-DangerModal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="border-radius: 30px">
<div class="modal-close-area modal-close-df">
<a class="close" data-dismiss="modal" href="#"><i class="fa fa-close"></i></a>
</div>
<div class="modal-body">
<form @submit.prevent="prosesEdit">
<div class="row clearfix">
<div class="col-sm-4">
<label>Branch ID</label>
<input v-model="editCabang.branch_id" name="branch_id" id="branch_id" class="form-control" placeholder="ID Cabang" required>
</div>
<div class="col-sm-4">
<label>Branch Name</label>
<input v-model="editCabang.branch_name" name="branch_name" id="branch_name" class="form-control" placeholder="nama cabang" required>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12 text-right">
<a href="" class="btn btn-danger" style="margin-left: 5px;">Back</a>
<button type="submit" class="btn btn-success waves-effect" id="kirim_edit">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="delete-cabang" class="modal modal-edu-general FullColor-popup-DangerModal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="border-radius: 30px">
<div class="modal-close-area modal-close-df">
<a class="close" data-dismiss="modal" href="#"><i class="fa fa-close"></i></a>
</div>
<div class="modal-body">
<form @submit.prevent="prosesDelete" >
<div class="row clearfix">
<div class="col-sm-12">
<p>Are you sure to delete this user <b>({{ deleteCabang.branch_name }})</b> ?</p>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12 text-right">
<a href="" class="btn btn-danger" style="margin-left: 5px;">Cancel</a>
<button type="submit" class="btn bg-blue waves-effect" id="kirim_edit">Yes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="konfirmasi_hapus" class="modal modal-edu-general FullColor-popup-DangerModal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-close-area modal-close-df">
<a class="close" data-dismiss="modal" href="#" style="margin: 1rem 1rem 0 0;"><i class="fa fa-times"></i></a>
</div>
<div class="modal-body">
<span class="educate-icon educate-warning modal-check-pro information-icon-pro"></span>
<h2>Warning</h2>
<p style="font-size: 18px;">
<span id="modal-message"></span><b id="modal-name"></b><span>?</span>
</p>
</div>
<div class="modal-footer">
<a class="btn btn-danger btn-ok" style="background-color: red; cursor:pointer;" id="hapus_data">Submit</a>
<a class="btn btn-primary" style=" cursor:pointer;" data-dismiss="modal">Cancel</a>
</div>
</div>
</div>
</div>
<div id="konfirmasi_hapus_aktif" class="modal modal-edu-general FullColor-popup-DangerModal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-close-area modal-close-df">
<a class="close" data-dismiss="modal" href="#" style="margin: 1rem 1rem 0 0;"><i class="fa fa-times"></i></a>
</div>
<div class="modal-body">
<span class="educate-icon educate-warning modal-check-pro information-icon-pro"></span>
<h2>Warning</h2>
<p style="font-size: 18px;">
<span id="modal-message_aktif"></span><b id="modal-name_aktif"></b><span>?</span>
</p>
</div>
<div class="modal-footer">
<a class="btn btn-danger btn-ok" style="background-color: red; cursor:pointer;" id="hapus_data_aktif">Submit</a>
<a class="btn btn-primary" style=" cursor:pointer;" data-dismiss="modal">Cancel</a>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import axios from "axios";
export default {
data(){
return {
data_list : [],
dataList : {},
editCabang : {},
deleteCabang : {},
search : '',
offset: 0,
limit: 5,
};
},
created() {
let uri = 'https://api.big-solution.net/api/admin/cabang';
this.$http.get(uri, { headers: {'Authorization' : 'Bearer '+this.$session.get('token')}}).then(response => {
this.data_list = response.data.data;
console.log(response.data.data);
});
},
methods: {
prosesDaftar() {
let uri = 'https://api.big-solution.net/api/admin/cabang/add-cabang';
axios.post(uri, this.dataList, { headers: {'Authorization' : 'Bearer '+this.$session.get('token')}})
.then((response) => {
if (response.status === 200) {
this.modalDisplay = true;
alert("Data berhasil");
}
else if(response.status === 401) {
alert("Data salah");
}
else {
alert("Terjadi kesalahan");
}
});
},
prosesEdit() {
let uri = "https://api.big-solution.net/api/admin/cabang/edit-cabang";
axios.post(uri, this.editCabang, { headers: {'Authorization' : 'Bearer '+this.$session.get('token')}}
)
.then((response) => {
if (response.status === 200) {
this.modalDisplay = true;
alert("Data berhasil");
}
if (response.status === 401) {
alert("Data salah");
}
});
},
prosesDelete() {
let uri = "https://api.big-solution.net/api/admin/cabang/delete-cabang";
axios.post(uri, this.deleteCabang, { headers: {'Authorization' : 'Bearer '+this.$session.get('token')}}
)
.then((response) => {
if (response.status === 200) {
this.modalDisplay = true;
alert("Berhasil hapus data");
}
if (response.status === 401) {
alert("Gagal hapus data");
}
});
}
},
computed: {
filteredList() {
return this.data_list.filter(data => {
//return data.nama_cabang.toLowerCase().includes(this.search.toLowerCase())
return data.branch_name.toLowerCase().includes(this.search.toLowerCase())
})
},
paginated () {
return this.filteredList.slice(this.offset, this.limit + this.offset);
},
hasNextPage () {
const nextOffset = this.offset + 5;
return Boolean(this.filteredList.slice(nextOffset, this.limit + nextOffset).length);
},
hasPrevPage () {
const prevOffset = this.offset - 5;
return Boolean(this.filteredList.slice(prevOffset, this.limit + prevOffset).length);
}
}
}
</script>
<style scoped>
.pagination {
display: flex;
margin: .25rem .25rem 0;
}
.pagination button {
flex-grow: 1;
}
.pagination button:hover {
cursor: pointer;
}
</style>
Editor is loading...