daily pastebin goal
51%
SHARE
TWEET

Untitled

a guest Feb 22nd, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Home</title>
  8.  
  9.     <!-- Styles -->
  10.     <link href="<?php echo base_url(); ?>asset/css/app.css" rel="stylesheet">
  11.     <script src="<?php echo base_url(); ?>asset/js/app.js"></script>
  12. </head>
  13. <body>
  14.     <div>
  15.         <nav class="navbar navbar-default navbar-static-top">
  16.             <div class="container">
  17.                 <div class="navbar-header">
  18.  
  19.                     <!-- Collapsed Hamburger -->
  20.                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
  21.                         <span class="sr-only">Toggle Navigation</span>
  22.                         <span class="icon-bar"></span>
  23.                         <span class="icon-bar"></span>
  24.                         <span class="icon-bar"></span>
  25.                     </button>
  26.  
  27.                     <!-- Branding Image -->
  28.                     <a class="navbar-brand" href="http://web.facebook.com/eboominathan" target="_blank">
  29.                         Codeigniter + Vue JS -  <small> By Boominathan</small>
  30.                     </a>
  31.                 </div>                
  32.             </div>
  33.         </nav>
  34.         <div id="app">
  35.             <!-- contents starts here  -->
  36.             <div class="container">
  37.     <div class="row">
  38.         <div class="col-md-8 col-md-offset-2">
  39.             <div class="panel panel-default">
  40.                 <div class="panel-heading">Form Items</div>
  41.  
  42.                 <div class="panel-body">
  43.                     <h3 v-if="loading" class="text-info">Loading...</h3>
  44.                     <h3 v-if="message" class="text-success">{{ message.text }}</h3>
  45.                     <form id="itemsForm" class="form-horizontal" v-on:submit.prevent="validateBeforeSubmit">
  46.                    
  47.                         <div v-bind:class="{'form-group':true, 'col-md-8':true, 'col-md-offset-2' : true, 'has-error':errors.has('code')}">
  48.                             <label for="code" class="control-label">Code</label>
  49.                             <input type="text" v-validate="'required|numeric'" id="code" v-model="newItems.code" name="code" class="form-control">
  50.                             <span v-show="errors.has('code')" class="text-danger">{{ errors.first('code') }}</span>
  51.                         </div>
  52.                         <div v-bind:class="{'form-group':true, 'col-md-8':true, 'col-md-offset-2' : true, 'has-error':errors.has('name')}">
  53.                             <label for="name" class="control-label">Name</label>
  54.                             <input type="text" v-validate="'required'" id="name" v-model="newItems.name" name="name" class="form-control">
  55.                             <span v-show="errors.has('name')" class="text-danger">{{ errors.first('name') }}</span>
  56.                         </div>
  57.                         <div class="form-group col-md-8 col-md-offset-2">
  58.                             <button v-if="!onEdit" class="btn btn-primary">Add New</button>
  59.                             <button v-if="onEdit" class="btn btn-primary">Update</button>
  60.                             <button type="reset" class="btn btn-default">Reset</button>
  61.                             <button v-if="onEdit" v-on:click="createNew" class="btn btn-info">Create New</button>
  62.                         </div>
  63.                     </form>
  64.                     <div class="col-md-12">
  65.                         <h3>
  66.                             Items Details
  67.                             <button v-on:click="deleteSelected" class="btn btn-danger pull-right">Delete Selected</button>
  68.                         </h3>
  69.                     </div>
  70.                     <table class="table table-stripped">
  71.                         <tr>
  72.                             <th><input type="checkbox" v-on:click="checkAll" v-model="selectedAll"></th>
  73.                             <th>Code</th>
  74.                             <th>Name</th>
  75.                             <th>Action</th>
  76.                         </tr>
  77.                         <tr v-for="row in rows">
  78.                             <td><input type="checkbox" v-model="row.selected" v-on:click="checkSelectAll"></td>
  79.                             <td>{{ row.code }}</td>
  80.                             <td>{{ row.name }}</td>
  81.                             <td>
  82.                                 <button class="btn btn-primary" v-on:click="edit(row.id)">Edit</button>
  83.                             </td>
  84.                         </tr>
  85.                     </table>
  86.                 </div>
  87.             </div>
  88.         </div>
  89.     </div>
  90. </div>
  91. <!-- content ends here  -->
  92.         </div>
  93.     </div>
  94.  
  95.     <!-- Scripts -->
  96.     <script src="<?php echo base_url(); ?>asset/js/vue/vue.min.js"></script>
  97.     <script src="<?php echo base_url(); ?>asset/js/vee-validate/vee-validate.min.js"></script>
  98.     <script src="<?php echo base_url(); ?>asset/js/axios/axios.min.js"></script>
  99.     <script>
  100.         var apiUrl = '<?php echo base_url();?>';                
  101.     Vue.use(VeeValidate);
  102.     var app = new Vue({
  103.         el: '#app',
  104.         data: {
  105.             newItems: {
  106.                 selected: false,
  107.                 code: '',
  108.                 name: ''
  109.             },
  110.             rows: [],
  111.             onEdit: false,
  112.             selectedAll: false,
  113.             delete: [],
  114.             loading: true,
  115.             message: []
  116.         },
  117.         created() {
  118.             this.getRows()
  119.         },
  120.         methods: {
  121.             validateBeforeSubmit: function() {
  122.                 var vm = this
  123.                 this.$validator.validateAll().then(function(isValid) {
  124.                     if(!isValid) return;
  125.                     vm.startLoading()
  126.                     var url = apiUrl+'home/insert'
  127.                     var message = 'Items added successfully'
  128.  
  129.                     if(vm.onEdit) {
  130.                         url = apiUrl+'home/update/'+vm.onEdit
  131.                         message = 'Items Updated successfully'
  132.                     }
  133.  
  134.                     axios.post(url,
  135.                     new FormData($('#itemsForm')[0])).then(function(response) {
  136.                         vm.getRows()
  137.                         vm.createNew()
  138.                         vm.showMessage(message)
  139.                         vm.endLoading()                        
  140.                     }).catch(function(e) {
  141.                        
  142.                     })
  143.                 });
  144.             },
  145.             getRows: function() {
  146.                 axios.get(apiUrl+'home/get_data').then(
  147.                     result => {
  148.                         this.rows = result.data,
  149.                         this.endLoading()
  150.                     }
  151.                 );
  152.             },
  153.             createNew: function() {              
  154.                 this.onEdit = false
  155.                 this.newItems = {
  156.                     selected:false,
  157.                     code:'',
  158.                     name:''
  159.                 }
  160.             },
  161.             edit: function(id) {
  162.                 this.onEdit = id
  163.                 this.startLoading()
  164.                 this.newItems = {
  165.                     selected:false,
  166.                     code:'',
  167.                     name:''
  168.                 }
  169.                 axios.get(apiUrl+'home/edit/'+id).then(
  170.                     result => {
  171.                         this.newItems.code = result.data.code,
  172.                         this.newItems.name = result.data.name,
  173.                         this.endLoading()
  174.                     }
  175.                 );
  176.             },
  177.             checkAll: function() {
  178.                 if(this.selectedAll) {
  179.                     this.selectedAll = true;
  180.                     this.rows.forEach(function(row) {
  181.                         row.selected = true
  182.                     })
  183.                 } else {
  184.                     this.selectedAll = false;
  185.                     this.rows.forEach(function(row) {
  186.                         row.selected = false
  187.                     })
  188.                 }
  189.             },
  190.             checkSelectAll: function() {
  191.                 var check = true;
  192.                 this.rows.forEach(function (row) {
  193.                     if (row.selected == false) {
  194.                         check = false;
  195.                     }
  196.                 });
  197.                 this.selectedAll = check;
  198.             },
  199.             deleteSelected: function() {
  200.                 var conf = confirm("Are you sure to delete?");
  201.                 if(!conf) return true;
  202.                 var vm = this;
  203.                 this.startLoading()
  204.                 this.rows.forEach(function(row) {
  205.                     if(row.selected) {
  206.                         vm.delete.push({id:row.id})
  207.                     }
  208.                 })
  209.                 axios.post(apiUrl+'home/delete/',this.delete).then(function(response) {
  210.                        
  211.                     vm.getRows()
  212.                     vm.selectedAll = false
  213.                     vm.createNew()
  214.                     vm.showMessage('Deleted items successfully')
  215.                     vm.endLoading()
  216.                 })
  217.                
  218.             },
  219.             startLoading: function() {
  220.                 this.loading = true
  221.             },
  222.             endLoading: function() {
  223.                 this.loading = false
  224.             },
  225.             showMessage: function(message, status = 'success') {
  226.                 this.message = {text:message, status:status}
  227.                 this.removeMessage()
  228.             },
  229.             removeMessage: function() {
  230.                 var msg = this
  231.                 setTimeout(function() {
  232.                     msg.message = {text:'', status:''}
  233.                 }, 5000)
  234.             }
  235.         }
  236.     })
  237.     </script>
  238.  
  239. </body>
  240. </html>
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