API tools faq
paste
Advertisement
fajar7xx

bankvue

fajar7xx
Sep 16th, 2020
1,446
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 22.01 KB | None | 0 0
raw download clone embed print report
  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.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!