daily pastebin goal
21%
SHARE
TWEET

incoming-doc

a guest May 16th, 2018 105 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
Top