fajar7xx

bankvue

Sep 16th, 2020
1,045
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div>
  3.  
  4.     <b-card>
  5.       <!-- Header-->
  6.       <template v-slot:header>
  7.         <h6 class="mt-2 mb-0">
  8.           <b-icon icon="card-list" aria-hidden="true" scale="2" class="mx-2"></b-icon>
  9.           <strong class="ml-1"> LIST DATA</strong>
  10.           <br />
  11.           <b-card-text class="mt-2">
  12.             <small>
  13.               <em>
  14.                 Seluruh data yang telah disimpan akan ditampilkan pada list ini.
  15.                 <br />Anda dapat melihat detail, mengedit atau pun menghapusnya sesuai dengan hak akses Anda.
  16.               </em>
  17.             </small>
  18.           </b-card-text>
  19.         </h6>
  20.       </template>
  21.       <!-- end Header -->
  22.  
  23.       <b-card-body class="px-0 py-0">
  24.        
  25.         <!-- reload and add button -->
  26.         <b-row>
  27.           <b-col md="12">
  28.             <b-button class="btn-shadow mr-1" variant="outline-primary" size @click="reload()">
  29.               <b-icon icon="arrow-repeat"></b-icon>Reload
  30.             </b-button>
  31.             <b-button class="btn-shadow" :variant="'outline-primary'" size @click="create()">
  32.               <b-icon icon="plus"></b-icon>Tambah
  33.             </b-button>
  34.           </b-col>
  35.         </b-row>
  36.         <hr class="my-2" />
  37.         <!-- end reload and add button -->
  38.  
  39.         <!-- filter section -->
  40.         <b-row>
  41.           <b-col md="6" class="mb-3">
  42.             <b-form-group :label-cols="3" label="Filter By" class="mb-0 my-1">
  43.               <b-input-group size="md">
  44.                 <b-form-select
  45.                   v-model="filterBy"
  46.                   :options="fieldOptions"
  47.                   @change="changeFilterBy()"
  48.                 >
  49.                   <option slot="first" :value="'all'">All Data</option>
  50.                 </b-form-select>
  51.               </b-input-group>
  52.             </b-form-group>
  53.             <b-form-group
  54.               :label-cols="3"
  55.               label="Filter"
  56.               class="mb-0"
  57.               description="Type to Search or Click Clear to Stop Searching "
  58.             >
  59.               <b-input-group size="md">
  60.                 <b-form-input v-model="filter" placeholder="Type to Search" />
  61.                 <b-input-group-append>
  62.                   <b-btn :disabled="!filter" @click="filter = ''">Clear</b-btn>
  63.                 </b-input-group-append>
  64.               </b-input-group>
  65.             </b-form-group>
  66.           </b-col>
  67.           <b-col md="6" class="mt-1">
  68.             <b-form-group :label-cols="3" label="Sort direction" class="mb-0">
  69.               <b-input-group size="md">
  70.                 <b-form-select v-model="sortDirection" slot="append" disabled>
  71.                   <option value="asc">Asc</option>
  72.                   <option value="desc">Desc</option>
  73.                   <option value="last">Last</option>
  74.                 </b-form-select>
  75.               </b-input-group>
  76.             </b-form-group>
  77.             <b-form-group :label-cols="3" label="Sort" class="mb-0 my-1">
  78.               <b-input-group size="md">
  79.                 <b-form-select v-model="sortBy" :options="fieldOptions">
  80.                   <option slot="first" :value="null">-- none --</option>
  81.                 </b-form-select>
  82.                 <b-form-select :disabled="!sortBy" v-model="sortDesc" slot="append">
  83.                   <option :value="false">Asc</option>
  84.                   <option :value="true">Desc</option>
  85.                 </b-form-select>
  86.               </b-input-group>
  87.             </b-form-group>
  88.           </b-col>
  89.         </b-row>
  90.         <!-- end filter section -->
  91.        
  92.         <!-- Data Table & Pagination -->
  93.         <b-table
  94.           responsive
  95.           show-empty
  96.           small
  97.           id="masTable"
  98.           ref="masTable"
  99.           head-variant="light"
  100.           :hover="true"
  101.           :busy.sync="isBusy"
  102.           :items="myGetData"
  103.           :fields="fields"
  104.           :current-page="currentPage"
  105.           :per-page="perPage"
  106.           :filter="filter"
  107.           :sort-by.sync="sortBy"
  108.           :sort-desc.sync="sortDesc"
  109.           :sort-direction="sortDirection"
  110.         >
  111.  
  112.           <template v-slot:table-busy>
  113.             <div class="text-center text-danger my-2">
  114.               <b-spinner class="align-middle"></b-spinner>
  115.               <strong>Loading...</strong>
  116.             </div>
  117.           </template>
  118.  
  119.           <!-- gunakan cara ini jika ada data yang mau di gabungkan -->
  120.           <template v-slot:cell(kantor)="data">
  121.             {{ data.item.bank.kode }}<br/>
  122.             {{ data.item.bank_kantor_status.kode }} {{ data.item.nama }}
  123.         </template>
  124.  
  125.         <template v-slot:cell(kontak)="data">
  126.             Handphone:  {{ data.item.nomp }}<br/>
  127.             Telepon:    {{ data.item.notelepon }}<br/>
  128.             No Fax:     {{ data.item.nofax }}<br/>
  129.             E-mail:     {{ data.item.email }}
  130.         </template>
  131.  
  132.         <template v-slot:cell(alamat)="data">
  133.             {{ data.item.alamat }},
  134.             {{ data.item.kelurahan ? data.item.kelurahan + ', ' : '' }}
  135.             {{ data.item.kecamatan ? data.item.kecamatan + ', ' : ''}}
  136.             {{ data.item.kabkota ? data.item.kabkota + ', ' : '' }}
  137.             {{ data.item.provinsi ? data.item.provinsi : '' }}
  138.         </template>
  139.  
  140.           <!-- button actions -->
  141.           <template v-slot:cell(actions)="row">
  142.                    
  143.             <!-- view data -->
  144.             <b-button
  145.               @click="show(row.item, row.index, $event.target)"
  146.               class="btn-sm btn-icon btn-icon-only mr-1"
  147.               variant="outline-dark"
  148.               title="View Detail"
  149.             >
  150.               <b-icon icon="eye"></b-icon>
  151.             </b-button>
  152.  
  153.             <!-- edit data -->
  154.             <b-button
  155.               @click="edit(row.item, row.index, $event.target)"
  156.               class="btn-sm btn-icon btn-icon-only mr-1"
  157.               variant="outline-primary"
  158.               title="Edit Detail"
  159.             >
  160.               <b-icon icon="pencil"></b-icon>
  161.             </b-button>
  162.  
  163.             <!-- delete data -->
  164.             <b-button
  165.               @click="destroy(row.item, row.index, $event.target)"
  166.               class="btn-sm btn-icon btn-icon-only"
  167.               variant="outline-danger"
  168.               title="Delete Data"
  169.             >
  170.               <b-icon icon="trash"></b-icon>
  171.             </b-button>
  172.  
  173.           </template>
  174.           <!-- end button actions -->
  175.         </b-table>
  176.  
  177.         <div class="divider"></div>
  178.  
  179.         <!-- pagination section -->
  180.         <b-row>
  181.           <div class="divider"></div>
  182.           <b-col md="6" class="my-0">
  183.             <b-form-group :label-cols="2" label="Per page" class="mb-0">
  184.               <b-form inline>
  185.                 <b-form-select :options="pageOptions" style="width: 100px;" v-model="perPage" />
  186.                 <label class="ml-1 mr-1">/</label>
  187.                 <b-form-input
  188.                   :disabled="true"
  189.                   v-model="totalRows"
  190.                   style="width: 100px;"
  191.                   class="text-right"
  192.                 />
  193.                 <label class="ml-1">Rows</label>
  194.               </b-form>
  195.             </b-form-group>
  196.           </b-col>
  197.           <b-col md="6" class="my-0">
  198.             <b-pagination
  199.               v-model="currentPage"
  200.               :total-rows="totalRows"
  201.               :per-page="perPage"
  202.               align="fill"
  203.               size="md"
  204.               class="my-0"
  205.             ></b-pagination>
  206.           </b-col>
  207.         </b-row>
  208.         <!-- end pagination section -->
  209.  
  210.         <!-- end Data Table & Pagination -->
  211.       </b-card-body>
  212.  
  213.       <!-- Footer -->
  214.       <!-- <template v-slot:footer>
  215.         <em>Footer Slot</em>
  216.       </template> -->
  217.       <!-- end Footer -->
  218.     </b-card>
  219.  
  220.     <!--MODAL ADD -->
  221.     <b-modal
  222.       v-model="showModalForm"
  223.       :id="infoModal.id"
  224.       ref="modal"
  225.       :title="editMode ? 'Edit ' + AllTitle: 'Tambah ' + AllTitle"
  226.       size="lg"
  227.       variant="primary"
  228.       no-close-on-backdrop
  229.       static
  230.       hide-footer
  231.       hide-header
  232.     >
  233.       <form @submit.prevent="editMode ? update() : store()" @keydown="form.onKeydown($event)">
  234.         <b-card class="mb-0">
  235.  
  236.           <template v-slot:header>
  237.             <h6 class="mt-2 mb-0">
  238.               <b-icon icon="input-cursor-text" aria-hidden="true" scale="2" class="mx-2"></b-icon>
  239.               <strong>FORM {{ AllTitle }}</strong>
  240.               <br />
  241.               <b-card-text class="mt-2">
  242.                 <small>
  243.                   <em>
  244.                     Silahkan mengisi seluruh kolom yamg tersedia.
  245.                     <br />Kolom bertanda bintang merah wajib diisi.
  246.                   </em>
  247.                 </small>
  248.               </b-card-text>
  249.             </h6>
  250.           </template>
  251.  
  252.           <alert-error :form="form" class="border-danger mb-2"></alert-error>
  253.  
  254.           <div class="form-group row mb-2">
  255.             <label class="col-sm-3 col-form-label" for="kode">
  256.               Kode Bank <font style="color: red;">*</font>
  257.             </label>
  258.             <div class="col-sm-9">
  259.               <input
  260.                 type="text"
  261.                 class="form-control"
  262.                 v-model="form.kode"
  263.                 id="kode"
  264.                 name="kode"
  265.                 autofocus
  266.               />
  267.               <small v-if="form.errors.has('kode')" class="form-text text-danger">{{errors.kode[0]}}</small>
  268.             </div>
  269.           </div>
  270.           <div class="orm-group row mb-2">
  271.             <label class="col-sm-3 col-form-label" for="nama">
  272.               Nama Bank
  273.               <font style="color: red;">*</font>
  274.             </label>
  275.             <div class="col-sm-9">
  276.               <input
  277.                 type="text"
  278.                 class="form-control"
  279.                 v-model="form.nama"
  280.                 id="nama"
  281.                 name="nama"
  282.               />
  283.               <small
  284.                 v-if="form.errors.has('nama')"
  285.                 class="form-text text-danger"
  286.               >{{errors.nama[0]}}</small>
  287.             </div>
  288.           </div>
  289.           <template v-slot:footer>
  290.             <b-row>
  291.               <b-col md="6" class="mb-3">
  292.                 <small class="text-muted"></small>
  293.               </b-col>
  294.               <b-col md="6" class="float-right text-right">
  295.                 <b-button
  296.                   :disabled="form.busy"
  297.                   id="btnSave"
  298.                   type="submit"
  299.                   class="mr-1 btn-shadow"
  300.                   :variant="'primary'"
  301.                 >
  302.                   <!-- <CIcon name="cil-save"/> -->
  303.                   <b-icon icon="check" scale="2"></b-icon>
  304.                   {{ btnSave.Saving ? 'Sending...':btnSave.Title }}
  305.                 </b-button>
  306.                 <b-button class="btn-shadow" :variant="'light'" @click="showModalForm=false">
  307.                   <b-icon icon="x" scale="2"></b-icon>Close
  308.                 </b-button>
  309.               </b-col>
  310.             </b-row>
  311.           </template>
  312.         </b-card>
  313.       </form>
  314.     </b-modal>
  315.     <!-- end MODAL ADD -->
  316.   </div>
  317. </template>
  318.  
  319.  
  320.  
  321. <script>
  322. /* eslint-disable */
  323. // eslint-disable-next-line
  324. // eslint-disable vue/no-unused-vars
  325. // eslint-disable-line no-unused-vars
  326.  
  327. // Import Components
  328. // ==================================================
  329. import axios from "axios";
  330.  
  331. export default {
  332.   // Call Components
  333.   // ==================================================
  334.   components: {},
  335.   data: () => ({
  336.     // url : "api/bank/kantor-status/",
  337.     // PageTitle
  338.     // ==================================================
  339.     headingBold: "Data: ",
  340.     heading: "Bank Kantor List",
  341.     subheading: "Halaman Kantor Bank",
  342.     icon: "fa-list-ol",
  343.     breadcrumb: [
  344.       {
  345.         title: "",
  346.         link: "/ourzone",
  347.         icon: "fa-home",
  348.         active: false,
  349.       },
  350.       {
  351.         title: "Perusahaan",
  352.         link: "",
  353.         icon: "",
  354.         active: false,
  355.       },
  356.       {
  357.         title: "Status Kantor",
  358.         link: "/ourzone/perusahaan/kantorstatus",
  359.         icon: "",
  360.         active: true,
  361.       },
  362.     ],
  363.  
  364.     // Data Master /page
  365.     AllTitle: "DATA KANTOR BANK",
  366.     // end Data Master /page
  367.  
  368.     // Data & Format Table
  369.     fields: [
  370.       {
  371.         key: "kantor",
  372.         label: "Kantor",
  373.         sortable: true,
  374.         // sortDirection: 'asc'
  375.       },
  376.       {
  377.         key: "alamat",
  378.         label: "Alamat",
  379.         sortable: true,
  380.         // sortDirection: 'asc'
  381.       },
  382.       {
  383.         key: "kontak",
  384.         label: "Kontak",
  385.         sortable: true,
  386.         // sortDirection: 'asc'
  387.       },
  388.       {
  389.         key: "actions",
  390.         label: "Actions",
  391.         class: "text-right",
  392.         sortable: false,
  393.       },
  394.     ],
  395.     // end Data & Format Table
  396.  
  397.     card: {
  398.       show: true,
  399.       isCollapsed: true,
  400.     },
  401.     // Tools
  402.     isBusy: false,
  403.     sortBy: null,
  404.     sortDesc: true,
  405.     sortDirection: "asc",
  406.     filter: null,
  407.     filterBy: "all",
  408.     // ---
  409.     pageOptions: [5, 10, 15, 25],
  410.     perPage: 10,
  411.     currentPage: 1,
  412.     totalRows: 0,
  413.     // end Tools
  414.  
  415.     // Form Modal Add/Edit/View
  416.     showModalForm: false,
  417.     showModalView: false,
  418.     editMode: false,
  419.     infoModal: {
  420.       id: "modalForm",
  421.       title: "",
  422.       content: "",
  423.     },
  424.  
  425.     // ini form untuk update atau store data
  426.     form: new Form({
  427.       id: "",
  428.       bank_id: "",
  429.       bankkantorstatus_id: "",
  430.       nama: "",
  431.       nomp: "",
  432.       notelepon: "",
  433.       nofax: "",
  434.       email: "",
  435.       alamat: "",
  436.       kelurahan: "",
  437.       kecamatan: "",
  438.       kabkota: "",
  439.       provinsi: "",
  440.       kodepos: ""
  441.     }),
  442.  
  443.     errors: [],
  444.     // With FormData
  445.     // form: {
  446.     //     id: "",
  447.     //     username: "",
  448.     //     name: "",
  449.     //     email: "",
  450.     //     nomp: "",
  451.     //     fotoname: null,
  452.     //     locked: "0",
  453.     //     haspermission: [], // Use Check Button / 1 User Has Many Role
  454.     // },
  455.     // formData: {},
  456.     // errors: {
  457.     //     msg: "",
  458.     //     fields: [],
  459.     // },
  460.     // end With FormData
  461.     btnSave: {
  462.       Saving: false,
  463.       Title: "Save changes",
  464.     },
  465.     // ---
  466.     name: "",
  467.     nameState: null,
  468.     submittedNames: [],
  469.     // end Form Modal Add/Edit/View
  470.   }),
  471.  
  472.   mounted() {
  473.     //   const url = "api/bank/kantor-status"
  474.   },
  475.  
  476.   computed: {
  477.     fieldOptions() {
  478.       // Create an options list from our fields
  479.       return this.fields
  480.         .filter((f) => f.sortable)
  481.         .map((f) => {
  482.           return {
  483.             text: f.label,
  484.             value: f.key,
  485.           };
  486.         });
  487.     },
  488.   },
  489.  
  490.   methods: {
  491.     myGetData(ctx) {
  492.       // ctx =
  493.       // berasal dari tag <b-table></b-table>
  494.       this.$Progress.start();
  495.       this.isBusy = true;
  496.       let promise = axios.get("api/bank/kantor", {
  497.         params: {
  498.           page: ctx.currentPage,
  499.           perpage: ctx.perPage,
  500.           sortby: ctx.sortBy,
  501.           sortdesc: ctx.sortDesc,
  502.           filter: ctx.filter,
  503.           filterby: this.filterBy,
  504.         },
  505.       });
  506.       return promise
  507.         .then((response) => {
  508.           const items = response.data.data;
  509.           // Data Pagination
  510.           // configPagination(response.data.meta);
  511.           this.totalRows = response.data.meta.total;
  512.           // Here we could override the busy state, setting isBusy to false
  513.           this.$Progress.finish();
  514.           this.isBusy = false;
  515.           return items;
  516.         })
  517.         .catch((error) => {
  518.           // console.error(error);
  519.           // Here we could override the busy state, setting isBusy to false
  520.           this.$Progress.fail();
  521.           this.isBusy = false;
  522.           // Returning an empty array, allows table to correctly handle
  523.           // internal busy state in case of error
  524.           return [];
  525.         });
  526.     },
  527.     reload() {
  528.       // with id="masTable" in tag b-table
  529.       // this.$root.$emit('bv::refresh::table', 'masTable')
  530.       // with property ref="masTable" in tag b-table
  531.       this.$refs.masTable.refresh();
  532.     },
  533.     changeFilterBy() {
  534.       if (this.filter) {
  535.         this.$refs.masTable.refresh();
  536.       }
  537.     },
  538.     // ---
  539.     resetForm() {
  540.       this.btnSave.Saving = false;
  541.       this.editMode = false;
  542.       this.form.reset();
  543.       this.form.clear();
  544.       this.errors = [];
  545.     },
  546.     create() {
  547.       this.resetForm();
  548.       this.$root.$emit("bv::show::modal", this.infoModal.id);
  549.       this.showModalForm == true;
  550.     },
  551.  
  552.     // simpan data
  553.     store() {
  554.       this.btnSave.Saving = true;
  555.       this.$Progress.start();
  556.       this.form.busy = true;
  557.       this.form
  558.         .post("/api/bank/kantor")
  559.         .then(
  560.           (response) => {
  561.             if (this.form.successful) {
  562.               this.$Progress.finish();
  563.               this.$snotify.success(
  564.                 this.AllTitle + " Successfully Saved",
  565.                 "Success"
  566.               );
  567.               this.reload();
  568.               this.resetForm();
  569.             } else {
  570.               this.$Progress.fail();
  571.               this.$snotify.error(
  572.                 "Something went wrong try again later.",
  573.                 "Error"
  574.               );
  575.               this.btnSave.Saving = false;
  576.             }
  577.           }
  578.           // error => {
  579.           //     this.$Progress.fail();
  580.           //     this.btnLogin.Saving = false;
  581.           //     if (error.response.status == 403) {
  582.           //         this.form.reset();
  583.           //         this.form.clear();
  584.           //         this.$swal({
  585.           //             title: "Warning",
  586.           //             text: error.response.data.message,
  587.           //             icon: "warning"
  588.           //         }).then((result) => {
  589.           //             // this.routelink("SimaksiLacak", "_self")
  590.           //         })
  591.           //     }else if(error.response.status == 422) {
  592.           //         this.errors = error.response.data.errors;
  593.           //     }else{
  594.           //         console.error(error);
  595.           //         this.$snotify.error(
  596.           //             "Something went wrong try again later.",
  597.           //             "Error"
  598.           //         );
  599.           //     }
  600.           // }
  601.         )
  602.         .catch((e) => {
  603.           this.$Progress.fail();
  604.           this.errors = e.response.data.errors;
  605.           this.btnSave.Saving = false;
  606.         });
  607.     },
  608.     show(item, index, button) {
  609.       // this.infoModal.title = `Row index: ${index}`
  610.       //this.infoModal.content = JSON.stringify(item, null, 2)
  611.       this.form.fill(item);
  612.       this.$root.$emit("bv::show::modal", "ModalView", button);
  613.     },
  614.     edit(item, index, button) {
  615.       this.resetForm();
  616.       this.editMode = true;
  617.       this.form.fill(item);
  618.       this.$root.$emit("bv::show::modal", this.infoModal.id, button);
  619.     },
  620.  
  621.     // edit/update data
  622.     update() {
  623.       this.btnSave.Status = true;
  624.       this.$Progress.start();
  625.       this.form.busy = true;
  626.       this.form
  627.         .put("/api/bank/kantor/" + this.form.id)
  628.         .then(
  629.           (response) => {
  630.             if (this.form.successful) {
  631.               this.$Progress.finish();
  632.               this.$snotify.success(
  633.                 this.AllTitle + " Successfully Updated",
  634.                 "Success"
  635.               );
  636.               this.reload();
  637.               this.resetForm();
  638.               this.$root.$emit("bv::hide::modal", this.infoModal.id);
  639.             } else {
  640.               this.$Progress.fail();
  641.               this.$snotify.error(
  642.                 "Something went wrong try again later.",
  643.                 "Error"
  644.               );
  645.               this.btnSave.Status = false;
  646.             }
  647.           }
  648.           // error => {
  649.           //     this.$Progress.fail();
  650.           //     this.btnLogin.Saving = false;
  651.           //     if (error.response.status == 403) {
  652.           //         this.form.reset();
  653.           //         this.form.clear();
  654.           //         this.$swal({
  655.           //             title: "Warning",
  656.           //             text: error.response.data.message,
  657.           //             icon: "warning"
  658.           //         }).then((result) => {
  659.           //             // this.routelink("SimaksiLacak", "_self")
  660.           //         })
  661.           //     }else if(error.response.status == 422) {
  662.           //         this.errors = error.response.data.errors;
  663.           //     }else{
  664.           //         console.error(error);
  665.           //         this.$snotify.error(
  666.           //             "Something went wrong try again later.",
  667.           //             "Error"
  668.           //         );
  669.           //     }
  670.           // }
  671.         )
  672.         .catch((e) => {
  673.           this.$Progress.fail();
  674.           this.errors = e.response.data.errors;
  675.           // console.log(e);
  676.           this.btnSave.Status = false;
  677.         });
  678.     },
  679.  
  680.     // delete data
  681.     destroy(item, index, button) {
  682.       this.$snotify.clear();
  683.       this.$snotify.confirm(
  684.         "You will not be able to recover this data!",
  685.         "Are you sure?",
  686.         {
  687.           showProgressBar: false,
  688.           closeOnClick: false,
  689.           pauseOnHover: true,
  690.           buttons: [
  691.             {
  692.               text: "Yes",
  693.               action: (toast) => {
  694.                 this.$snotify.remove(toast.id);
  695.                 this.$Progress.start();
  696.                 axios
  697.                   .delete("/api/bank/kantor/" + item.id)
  698.                   .then((response) => {
  699.                     this.$refs.masTable.refresh();
  700.                     this.$Progress.finish();
  701.                     this.$snotify.success(
  702.                       this.AllTitle + " Successfully Deleted",
  703.                       "Success"
  704.                     );
  705.                   })
  706.                   .catch((e) => {
  707.                     this.$Progress.fail();
  708.                     // console.log(e);
  709.                   });
  710.               },
  711.               bold: true,
  712.             },
  713.             {
  714.               text: "No",
  715.               action: (toast) => {
  716.                 this.$snotify.remove(toast.id);
  717.               },
  718.               bold: true,
  719.             },
  720.           ],
  721.         }
  722.       );
  723.     },
  724.   },
  725. };
  726. </script>
  727.  
RAW Paste Data