cabang

mail@pastecode.io avatar
unknown
javascript
3 years ago
16 kB
4
Indexable
Never
<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>