├── .gitignore
├── dist
    ├── crudtable.js
    └── crudtable.js.map
├── gulpfile.js
├── package.json
├── readme.md
├── resources
    └── assets
    │   └── js
    │       ├── components
    │           ├── CrudInsert.vue
    │           └── CrudWrapper.vue
    │       └── crudtable.js
└── sample.gif


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var elixir = require('laravel-elixir');
 2 | require('laravel-elixir-vueify');
 3 | /*
 4 |  |--------------------------------------------------------------------------
 5 |  | Elixir Asset Management
 6 |  |--------------------------------------------------------------------------
 7 |  |
 8 |  | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 9 |  | for your Laravel application. By default, we are compiling the Sass
10 |  | file for our application, as well as publishing vendor resources.
11 |  |
12 |  */
13 | 
14 | elixir(function(mix) {
15 |     mix.browserify('crudtable.js','./dist/crudtable.js');
16 | });
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "crudtable",
 3 |   "version": "1.0.0",
 4 |   "description": "crud table plugin",
 5 |   "main": "gulpfile.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/heruujoko/crudtable.git"
12 |   },
13 |   "author": "heruujoko",
14 |   "license": "MIT",
15 |   "bugs": {
16 |     "url": "https://github.com/heruujoko/crudtable/issues"
17 |   },
18 |   "homepage": "https://github.com/heruujoko/crudtable#readme",
19 |   "devDependencies": {
20 |     "babel-core": "^6.11.4",
21 |     "babel-plugin-transform-runtime": "^6.12.0",
22 |     "babel-preset-es2015": "^6.9.0",
23 |     "babel-preset-react": "^6.11.1",
24 |     "babel-preset-stage-2": "^6.13.0",
25 |     "babel-runtime": "^6.11.6",
26 |     "babelify": "^7.3.0",
27 |     "bootstrap-sass": "^3.3.0",
28 |     "browserify": "^13.0.1",
29 |     "gulp": "^3.9.1",
30 |     "laravel-elixir": "^5.0.0",
31 |     "laravel-elixir-vueify": "^1.0.3",
32 |     "vue-hot-reload-api": "^2.0.5",
33 |     "vueify": "^8.7.0"
34 |   },
35 |   "dependencies": {
36 |     "jquery": "~2.1.0",
37 |     "js-cookie": "^2.1.2",
38 |     "lodash": "^4.15.0",
39 |     "stringify": "^5.1.0",
40 |     "sweetalert": "^1.1.3",
41 |     "vue": "^1.0.26",
42 |     "vue-resource": "^0.9.3",
43 |     "vue-router": "^0.7.13",
44 |     "vue-select": "^1.3.3",
45 |     "vue-tables": "^1.4.64"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | ## Synopsis
 2 | 
 3 | This library helps you create more functional table easily.
 4 | 
 5 | ## Sample
 6 | 
 7 | ![sample](https://github.com/heruujoko/crudtable/blob/master/sample.gif)
 8 | 
 9 | Fiddle : https://jsfiddle.net/heruujoko/vj7ds7um/2/
10 | 
11 | Note: the fiddle is just to show how to set up the HTML tags and may not have the full table functionality since I can't provide an API to serve the table.
12 | 
13 | ## Installation
14 | 
15 | Include [crudtable.js](https://github.com/heruujoko/crudtable/blob/master/dist/crudtable.js) to your page, and just wrap it inside a div with id "crudsection"
16 | 
17 | ```html
18 | <div id="crudsection">
19 |   <crud-table endpoint="link_to_your_api_endpoint" columns="your_column_json_spec"></crud-table>
20 | </div>  
21 | ```
22 | 
23 | ## Column JSON Spec Sample
24 | 
25 | ```json
26 | [
27 |   { "label": "name" , "type":"text", "required": true},
28 |   { "label": "email" , "type":"email", "required": true},
29 |   { "label": "password" , "type":"password", "required": true},
30 |   { "label": "description" , "type":"textarea", "required": true},
31 | ]
32 | ```    
33 | 
34 | Supported form type :
35 | 
36 | 1. text
37 | 2. textarea
38 | 3. email
39 | 4. password
40 | 
41 | ## API endpoint
42 | 
43 | This library assumes your API has common resources structures and match the JSON Spec for the forms
44 | 
45 | 1. GET http://your_endpoint/
46 | ```json
47 |   [
48 |     {
49 |       "name": "name",
50 |       "email": "email",
51 |       "password": "password",
52 |       "description": "description"
53 |     },
54 |     {
55 |       "name": "name",
56 |       "email": "email",
57 |       "password": "password",
58 |       "description": "description"
59 |     }
60 |   ]
61 | ```
62 | 2. GET http://your_endpoint/{id}
63 | ```json
64 |     {
65 |       "name": "name",
66 |       "email": "email",
67 |       "password": "password",
68 |       "description": "description"
69 |     }
70 | ```
71 | 2. POST http://your_endpoint/
72 | 3. PUT http://your_endpoint/{id}
73 | ```json
74 |     {
75 |       "name": "name",
76 |       "email": "email",
77 |       "password": "password",
78 |       "description": "description"
79 |     }
80 | ```
81 | 4. DELETE http://your_endpoint/{id}
82 | 
83 | ## What's Next
84 | 
85 | Add select , multiselect and file options for forms.
86 | 


--------------------------------------------------------------------------------
/resources/assets/js/components/CrudInsert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button class="btn btn-primary" href="#crud_insert_modal" data-toggle="modal">Add New +</button>
 3 |   <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="crud_insert_modal" class="modal fade">
 4 |   <div class="modal-dialog">
 5 |     <div class="modal-content">
 6 |       <div class="modal-header">
 7 |         <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
 8 |         <h4 class="modal-title">Add New</h4>
 9 |       </div>
10 |       <div class="modal-body">
11 | 
12 |         <form>
13 |           <div class="form-group" v-for="col in column_object">
14 |             <label class="control-label">{{ col.label | capitalize }}</label>
15 |             <input class="form-control" type="text" v-if="col.type == 'text'" v-model="form_data[col.label]">
16 |             <input class="form-control" type="password" v-if="col.type == 'password'" v-model="form_data[col.label]">
17 |             <input class="form-control" type="email" v-if="col.type == 'email'" v-model="form_data[col.label]">
18 |             <textarea class="form-control" v-if="col.type == 'textarea'" v-model="form_data[col.label]"></textarea>
19 |             <label class="warning-label" style="color:#F27474;" v-if="col.warning && (!form_data[col.label] && submitting )">This field is required.<label>
20 |           </div>
21 |           <button @click="submit_form" class="btn btn-primary">Submit</button>
22 |         </form>
23 |       </div>
24 |     </div>
25 |   </div>
26 | </template>
27 | <script>
28 |   export default {
29 |     data(){
30 |       return {
31 |         submitting: false,
32 |         form_success: true,
33 |         column_object: [],
34 |         form_data:{},
35 |         _ : {},
36 |         endpoint: ""
37 |       };
38 |     },
39 |     methods: {
40 |       validate_form: function(){
41 |         this.form_success = true;
42 |         this.column_object.map((input) => {
43 |           if(this._.has(input,'required') && (input.required == true)){
44 |             var required_id = this._.findIndex(this.column_object,function(i){ return i.label == input.label});
45 |             if(this.form_data[input.label]){
46 |               this.column_object[required_id].warning = false;
47 |               this.form_success = true;
48 |             } else {
49 |               this.column_object[required_id].warning = true;
50 |               this.form_success = false;
51 |             }
52 |           }
53 |         });
54 |       },
55 |       submit_form: function(e){
56 |         e.preventDefault();
57 |         this.submitting = true;
58 |         this.validate_form();
59 |         if(this.form_success){
60 |           this.$http.post(this.endpoint,this.form_data).then((response) => {
61 |             $("#crud_insert_modal").modal('toggle');
62 |             this.$dispatch('update_table');
63 |             swal("Success!", "action performed.", "success");
64 |             this.form_data = {};
65 |           },(response)=>{
66 |             swal("Oops!", "action failed.", "error");
67 |             this.form_data = {};
68 |           });
69 |         }
70 |       }
71 |     },
72 |     watch: {
73 |       'column_object': {
74 |         handler: function(){
75 |           this.validate_form();
76 |         },
77 |         deep: true
78 |       }
79 |     },
80 |     ready(){
81 |       this._ = this.$parent.lodash;
82 |       this.endpoint = this.$parent.endpoint;
83 |       this.swal = this.$parent.swal;
84 |       var parsed_column = JSON.parse(this.$parent.columns);
85 |       parsed_column.map((col) => {
86 |         col.warning = false;
87 |       });
88 |       this.column_object = parsed_column;
89 |     }
90 |   }
91 | </script>
92 | 


--------------------------------------------------------------------------------
/resources/assets/js/components/CrudWrapper.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="" style="margin-bottom: 20px;">
  3 |     <crud-insert></crud-insert>
  4 |   </div>
  5 |   <br>
  6 |   <v-client-table :data="table_data" :columns="column_header" :options="options"></v-client-table>
  7 |   <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="crud_edit_modal" class="modal fade">
  8 |       <div class="modal-dialog">
  9 |           <div class="modal-content">
 10 |               <div class="modal-header">
 11 |                   <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
 12 |                   <h4 class="modal-title">Edit Data</h4>
 13 |               </div>
 14 |               <div class="modal-body">
 15 |                   <form>
 16 |                       <div class="form-group" v-for="col in column_object">
 17 |                         <label class="control-label">{{ col.label | capitalize }}</label>
 18 |                         <input class="form-control" type="text" v-if="col.type == 'text'" v-model="form_data[col.label]">
 19 |                         <input class="form-control" type="password" v-if="col.type == 'password'" v-model="form_data[col.label]">
 20 |                         <input class="form-control" type="email" v-if="col.type == 'email'" v-model="form_data[col.label]">
 21 |                         <textarea class="form-control" v-if="col.type == 'textarea'" v-model="form_data[col.label]"></textarea>
 22 |                         <label class="warning-label" style="color:#F27474;" v-if="col.warning && (!form_data[col.label] && submitting )">This field is required.<label>
 23 |                       </div>
 24 |                       <button @click="edit_submit_form" class="btn btn-primary">Submit</button>
 25 |               </form>
 26 |           </div>
 27 |       </div>
 28 |   </div>
 29 | </template>
 30 | <script>
 31 |   import _ from 'lodash'
 32 |   import CrudInsert from './CrudInsert.vue'
 33 |   import swal from 'sweetalert'
 34 |   export default {
 35 |     data(){
 36 |       return {
 37 |         lodash: _,
 38 |         swal: swal,
 39 |         vue: {},
 40 |         table_data: [],
 41 |         form_data:{},
 42 |         column_header: [],
 43 |         column_object: [],
 44 |         form_success: true,
 45 |         submitting: false,
 46 |         edit_id:0
 47 |       };
 48 |     },
 49 |     props: ['columns','endpoint'],
 50 |     components: {
 51 |       CrudInsert: CrudInsert
 52 |     },
 53 |     methods: {
 54 |       fetch_data: function(){
 55 |         this.$http.get(this.endpoint).then((response) => {
 56 |           this.table_data = response.data;
 57 |           this.add_actions();
 58 |         },(response) => {
 59 |           swal("Oops!", "failed to load data.", "error");
 60 |         });
 61 |       },
 62 |       fetch_edit:function(id){
 63 |         this.$http.get(this.endpoint+"/"+id).then((response) => {
 64 |           this.form_data = response.data;
 65 |         });
 66 |       },
 67 |       add_actions: function(){
 68 |         this.table_data.map(function(rowdata){
 69 |           rowdata.action = "<div class=\"dropdown\">"+
 70 |           "<button class=\"btn btn-primary btn-sm dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\">Action "+
 71 |           "<span class=\"caret\"></span></button>"+
 72 |               "<ul class=\"dropdown-menu\">"+
 73 |               "<li><a @click=\"this.$parent.edit_row("+rowdata.id+")\">Edit</a></li>"+
 74 |               "<li><a @click=\"this.$parent.delete_row("+rowdata.id+")\">Delete</a></li>"+
 75 |               "</ul>"+
 76 |               "</div>";
 77 |         });
 78 |       },
 79 |       edit_row: function(id){
 80 |         console.log('edit row '+id);
 81 |         this.fetch_edit(id);
 82 |         this.edit_id = id;
 83 |         $("#crud_edit_modal").modal('toggle');
 84 |       },
 85 |       delete_row: function(id){
 86 |         var vm = this;
 87 |         swal({
 88 |           title: "Are you sure?",
 89 |           text: "This action cannot be undone",
 90 |           type: "warning",
 91 |           showCancelButton: true,
 92 |           confirmButtonColor: "#DD6B55",
 93 |           confirmButtonText: "Yes, delete it!",
 94 |           closeOnConfirm: false
 95 |         },function(){
 96 |           vm.$http.delete(vm.endpoint+"/"+id).then((response) => {
 97 |             if(response.status == 200){
 98 |               swal("Deleted!", "delete success.", "success");
 99 |               vm.fetch_data();
100 |             } else {
101 |               console.log(response);
102 |               swal("Oops!", "problem has occured", "error");
103 |             }
104 |           });
105 |         });
106 |       },
107 |       edit_submit_form: function(e){
108 |         e.preventDefault();
109 |         this.submitting = true;
110 |         this.validate_form();
111 |         if(this.form_success){
112 |           this.$http.put(this.endpoint+"/"+this.edit_id,this.form_data).then((response) => {
113 |             if(response.status == 200){
114 |               $("#crud_edit_modal").modal('toggle');
115 |               swal("Updated!", "update success.", "success");
116 |               this.fetch_data();
117 |             }
118 |           },(response) => {
119 |             $("#crud_edit_modal").modal('toggle');
120 |             swal("Oops!", "problem occured.", "error");
121 |             this.fetch_data();
122 |           });
123 |         }
124 |       },
125 |       validate_form: function(){
126 |         var vm = this;
127 |         this.form_success = true;
128 |         this.column_object.map((input) => {
129 |           if(vm.lodash.has(input,'required') && (input.required == true)){
130 |             var required_id = vm.lodash.findIndex(vm.column_object,function(i){ return i.label == input.label});
131 |             console.log(required_id);
132 |             if(this.form_data[input.label]){
133 |               this.column_object[required_id].warning = false;
134 |             } else {
135 |               this.column_object[required_id].warning = true;
136 |               this.form_success = false;
137 |             }
138 |           }
139 |         });
140 |       }
141 |     },
142 |     ready(){
143 |       var parsed = JSON.parse(this.columns);
144 |       parsed.map((col) => {
145 |         col.warning = false;
146 |       });
147 |       this.column_object = parsed;
148 |       parsed.map((col) => {
149 |         this.column_header.push(col.label);
150 |       });
151 |       this.column_header.push("action");
152 |       this.fetch_data();
153 |     },
154 |     events:{
155 |       'update_table': 'fetch_data'
156 |     }
157 |   }
158 | </script>
159 | 


--------------------------------------------------------------------------------
/resources/assets/js/crudtable.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Resource from 'vue-resource'
 3 | import VueTables from 'vue-tables'
 4 | import CrudWrapper from './components/CrudWrapper.vue'
 5 | 
 6 | Vue.config.devtools = true;
 7 | Vue.use(VueTables.client, {
 8 |   compileTemplates: true,
 9 |   highlightMatches: true,
10 |   filterByColumn: false,
11 |   texts: {
12 |     filter: "Search:"
13 |   },
14 |   datepickerOptions: {
15 |     showDropdowns: true
16 |   },
17 |   perPage: 8,
18 |   perPageValues: [8,10,25,50,100]
19 | });
20 | Vue.use(Resource);
21 | new Vue({
22 |   el: "#crudsection",
23 |   data: {
24 |     vue: Vue
25 |   },
26 |   components: {
27 |     CrudTable: CrudWrapper
28 |   },
29 |   ready(){
30 |     console.log("parent ready");
31 |   }
32 | });
33 | 


--------------------------------------------------------------------------------
/sample.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/heruujoko/crudtable/ac34bf5a77234635b5fd60b26dcfdfef2ec52a5a/sample.gif


--------------------------------------------------------------------------------