daily pastebin goal
10%
SHARE
TWEET

incoming-doc

a guest May 16th, 2018 110 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @extends('layouts.app')
  2.  
  3.  
  4. @section('content')
  5.  
  6. <?php $doc_types = array(
  7.     '-- Select --',
  8.     'Job Card Order',
  9.     'Shop Visit Report',
  10.     'Workshop Order',
  11.     'Receiving Document'
  12. ); ?>
  13.  
  14. <?php $doc_category = array(
  15.     '-- Select --',
  16.     'Job Card Order',
  17.     'Shop Visit Report',
  18.     'Workshop Order',
  19.     'Receiving Document'
  20. ); ?>
  21.  
  22. <div id="app">
  23.     <h2>Incoming Document</h2>
  24.     <hr>
  25.     <form class="form-vertical well" @submit="checkForm" action="" method="get">
  26.         <div class="alert alert-danger" v-if="errors.length > 0">
  27.             <ul>
  28.                 <li v-for="e in errors">@{{e}}</li>
  29.             </ul>
  30.         </div>
  31.         <div class="row">
  32.             <div class="col-md-6">
  33.                 <div class="form-group">
  34.                     <label for="">User</label>
  35.                     <input type="text" name="" value="" disabled class="form-control" placeholder="User">
  36.                 </div>
  37.  
  38.                 <div class="form-group">
  39.                     <label for="">Document Type</label>
  40.                     <select class="form-control" name="doc_type" v-model="docType">
  41.                         <?php foreach ($doc_types as $t) : ?>
  42.                             <option value="<?= $t ?>"><?= $t ?></option>
  43.                         <?php endforeach ?>
  44.                     </select>
  45.                 </div>
  46.  
  47.                 <div class="form-group">
  48.                     <label for="">Document Category</label>
  49.                     <select class="form-control" name="doc_category" v-model="docCategory">
  50.                         <?php foreach ($doc_category as $t) : ?>
  51.                             <option value="<?= $t ?>"><?= $t ?></option>
  52.                         <?php endforeach ?>
  53.                     </select>
  54.                 </div>
  55.  
  56.                 <div class="form-group">
  57.                     <button type="submit" name="button" class="btn btn-success"><i class="fa fa-save"></i> SAVE ALL</button>
  58.                 </div>
  59.             </div>
  60.             <div class="col-md-6">
  61.                 <div class="form-group">
  62.                     <label for="">Posting Date</label>
  63.                     <input type="text" name="" value="" class="form-control" placeholder="Posting Date">
  64.                 </div>
  65.                 <div class="form-group">
  66.                     <label for="">Box</label>
  67.                     <input type="text" name="" v-model="box" class="form-control" placeholder="Box">
  68.                 </div>
  69.             </div>
  70.         </div>
  71.     </form>
  72.  
  73.     <input type="text" v-model="docNo" id="doc_no" class="form-control" placeholder="Document Number"><br>
  74.     <table class="table table-striped">
  75.         <tbody>
  76.             <tr v-for="d in docList">
  77.                 <td>@{{d}}</td>
  78.                 <td class="text-right"><button type="button" name="button" class="btn btn-danger" @click="deleteFromList(d)"><i class="fa fa-trash"></i></button></td>
  79.             </tr>
  80.         </tbody>
  81.     </table>
  82. </div>
  83.  
  84. @endsection
  85.  
  86. @push('scripts')
  87.  
  88. <script type="text/javascript">
  89.  
  90. const app = new Vue({
  91.     el: '#app',
  92.     data: {
  93.         box: '',
  94.         docNo: '',
  95.         docType: '',
  96.         docCategory: '',
  97.         errors: [],
  98.         docList: [],
  99.     },
  100.     watch: {
  101.         box: function(v, o) {
  102.             if (v.length == 12) {
  103.                 $('#doc_no').val('').focus();
  104.             }
  105.         },
  106.         docNo: function(v, o) {
  107.             if (this.docType.toLowerCase() == 'receiving document'
  108.             && v.length == 10) {
  109.                 this.addToList(v);
  110.             }
  111.  
  112.             if (v[0] == '!' && v[v.length-1] == '!' && v.length >= 18) {
  113.                 this.addToList(v.substr(1,12).replace(/^0+/, ''));
  114.             }
  115.         }
  116.     },
  117.     methods: {
  118.         checkForm: function(e) {
  119.             if (this.docType && this.docCategory && this.box) {
  120.                 return true;
  121.             }
  122.  
  123.             this.errors = [];
  124.  
  125.             if (!this.docType) {
  126.                 this.errors.push('Document type harus diisi.');
  127.             }
  128.  
  129.             if (!this.docCategory) {
  130.                 this.errors.push('Document category harus diisi.');
  131.             }
  132.  
  133.             if (!this.box) {
  134.                 this.errors.push('Box harus diisi.');
  135.             }
  136.  
  137.             if (this.docList.length == 0) {
  138.                 this.errors.push('Document list kosong');
  139.             }
  140.  
  141.             e.preventDefault();
  142.         },
  143.         addToList: function(v) {
  144.             if (this.docList.indexOf(v) == -1) {
  145.                 this.docList.push(v);
  146.             }
  147.  
  148.             this.docNo = '';
  149.         },
  150.         deleteFromList: function(v) {
  151.             this.docList.splice(this.docList.indexOf(v), 1);
  152.         }
  153.     },
  154.     mounted: function() {
  155.         var vm = this;
  156.         $('#doc_no').keyup(function(e) {
  157.             if (e.keyCode == 13) {
  158.                 vm.addToList(vm.docNo);
  159.             }
  160.         });
  161.     }
  162. });
  163.  
  164. </script>
  165.  
  166. @endpush
RAW Paste Data
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
 
Top