├── .eslintrc
├── .gitignore
├── .tern-project
├── LICENSE
├── README.md
├── css
    └── app.css
├── gulpfile.js
├── index.html
├── items.json
├── js
    ├── app.js
    ├── bundle.js
    └── components
    │   ├── item-list
    │       ├── index.js
    │       └── template.html
    │   └── transaction
    │       ├── index.js
    │       └── template.html
└── package.json


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |     "parser": "babel-eslint",
3 |     "env": {
4 |         "browser": true
5 |     }
6 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | 


--------------------------------------------------------------------------------
/.tern-project:
--------------------------------------------------------------------------------
 1 | {
 2 |     "ecmaVersion": 5,
 3 |     "libs": [
 4 |         "browser"
 5 |     ],
 6 |     "loadEagerly": [
 7 |         "./js"
 8 |     ],
 9 |     "dontLoad": [
10 |         "./node_modules"
11 |     ]
12 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Alex Sears
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # pos-system-vuejs-blog
2 | The repo for the source code for the blog post "Create a POS system using Vue.js"
3 | 


--------------------------------------------------------------------------------
/css/app.css:
--------------------------------------------------------------------------------
1 | button {
2 |     outline: none;
3 | }
4 | 
5 | td > span,
6 | i.fa-times {
7 |     cursor: pointer;
8 | }


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var browserify = require('browserify');
 3 | var partialify = require('partialify');
 4 | var source = require('vinyl-source-stream');
 5 | 
 6 | gulp.task('js', function() {
 7 |     browserify('js/app.js')
 8 |         .transform(partialify)
 9 |         .bundle()
10 |         .pipe(source('bundle.js'))
11 |         .pipe(gulp.dest('js'))
12 | });
13 | 
14 | gulp.task('default', ['js']);


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 6 |     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7 | 
 8 |     <title>POS System</title>
 9 | 
10 |     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
11 |     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
12 |     <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
13 |     <link rel="stylesheet" href="/css/app.css">
14 | </head>
15 | <body>
16 | 
17 | <div class="container">
18 |     <div class="row" id="pos">
19 |         <div class="col-md-8 col-md-offset-2">
20 |             <h1>Point of Sale</h1>
21 |             <div class="row">
22 |                 <div class="col-md-6">
23 |                     <transaction items="{{ lineItems }}" edit="{{ toggleEdit }}" remove="{{ removeItem }}"></transaction>
24 |                 </div>
25 |                 <div class="col-md-6">
26 |                     <item-list items="{{ items }}" add="{{ onItemClick }}"></item-list>
27 |                 </div>
28 |             </div>
29 |         </div>
30 |     </div>
31 | </div>
32 | 
33 | 
34 | <script src="/js/bundle.js"></script>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/items.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         "name": "Apple",
 4 |         "price": 2.99
 5 |     },
 6 |     {
 7 |         "name": "Orange",
 8 |         "price": 0.99
 9 |     },
10 |     {
11 |         "name": "Banana",
12 |         "price": 5.99
13 |     },
14 |     {
15 |         "name": "TV",
16 |         "price": 199.99
17 |     },
18 |     {
19 |         "name": "X-Box One",
20 |         "price": 299.99
21 |     },
22 |     {
23 |         "name": "iPhone 6 Plus",
24 |         "price": 299.99
25 |     },
26 |     {
27 |         "name": "Cup",
28 |         "price": 3.99
29 |     },
30 |     {
31 |         "name": "Yogurt",
32 |         "price": 0.49
33 |     },
34 |     {
35 |         "name": "Hat",
36 |         "price": 9.99
37 |     }
38 | ]


--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var Vue = require('vue');
 4 | var $ = require('jQuery');
 5 | 
 6 | new Vue({
 7 |     el: '#pos',
 8 |     data: {
 9 |         items: [],
10 |         lineItems: []
11 |     },
12 |     created: function() {
13 |         $.get('/items.json', function(items) {
14 |             this.items = items;
15 |         }.bind(this), 'json');
16 |     },
17 |     components: {
18 |         transaction: require('./components/transaction'),
19 |         itemList: require('./components/item-list')
20 |     },
21 |     methods: {
22 |         onItemClick: function(item) {
23 |             var found = false;
24 | 
25 |             for (var i = 0; i < this.lineItems.length; i++) {
26 |                 if (this.lineItems[i].item === item) {
27 |                     this.lineItems[i].numberOfItems++;
28 |                     found = true;
29 |                     break;
30 |                 }
31 |             }
32 | 
33 |             if (!found) {
34 |                 this.lineItems.push({ item: item, numberOfItems: 1, editing: false });
35 |             }
36 |         },
37 |         toggleEdit: function(lineItem) {
38 |             lineItem.editing = !lineItem.editing;
39 |         },
40 |         removeItem: function(lineItem) {
41 |             for (var i = 0; i < this.lineItems.length; i++) {
42 |                 if (this.lineItems[i] === lineItem) {
43 |                     this.lineItems.splice(i, 1);
44 |                     break;
45 |                 }
46 |             }
47 |         }
48 |     }
49 | });


--------------------------------------------------------------------------------
/js/components/item-list/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     template: require('./template.html'),
3 |     props: ['items', 'add'],
4 |     methods: {
5 |         itemClicked: function(item) {
6 |             this.add(item);
7 |         }
8 |     }
9 | };


--------------------------------------------------------------------------------
/js/components/item-list/template.html:
--------------------------------------------------------------------------------
1 | <div class="list-group">
2 |     <button class="list-group-item item" v-repeat="item: items" v-on="click: itemClicked(item)">
3 |         <strong>{{ item.name }}</strong> - {{ item.price }}
4 |     </button>
5 | </div>


--------------------------------------------------------------------------------
/js/components/transaction/index.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     template: require('./template.html'),
 3 |     props: ['items', 'edit', 'remove'],
 4 |     computed: {
 5 |         subtotal: function() {
 6 |             var subtotal = 0;
 7 | 
 8 |             this.items.forEach(function(item) {
 9 |                 subtotal += item.item.price * item.numberOfItems;
10 |             });
11 | 
12 |             return subtotal;
13 |         },
14 |         tax: function() {
15 |             return this.subtotal * 0.065;
16 |         },
17 |         total: function() {
18 |             return this.subtotal + this.tax;
19 |         }
20 |     },
21 |     methods: {
22 |         toggleEdit: function(item) {
23 |             this.edit(item);
24 |         },
25 |         removeItem: function(item) {
26 |             this.remove(item);
27 |         }
28 |     }
29 | };


--------------------------------------------------------------------------------
/js/components/transaction/template.html:
--------------------------------------------------------------------------------
 1 | <table class="table table-striped table-hover table-bordered table-responsive" v-if="items.length">
 2 |     <thead>
 3 |         <tr>
 4 |             <th>Name</th>
 5 |             <th>Number of Items</th>
 6 |             <th>Amount</th>
 7 |             <th></th>
 8 |         </tr>
 9 |     </thead>
10 |     <tbody>
11 |         <tr v-repeat="item: items">
12 |             <td>{{ item.item.name }}</td>
13 |             <td>
14 |                 <span v-if="!item.editing" v-on="dblclick: toggleEdit(item)">{{ item.numberOfItems }}</span>
15 |                 <input v-if="item.editing" v-on="blur: toggleEdit(item)" type="number" v-model="item.numberOfItems">
16 |             </td>
17 |             <td>{{ item.numberOfItems * item.item.price | currency }}</td>
18 |             <td><i class="fa fa-times" v-on="click: removeItem(item)"></i></td>
19 |         </tr>
20 |     </tbody>
21 | </table>
22 | <p v-if="!items.length">No items have been added.</p>
23 | 
24 | <table class="table">
25 |     <tbody>
26 |         <tr>
27 |             <td>Subtotal:</td>
28 |             <td>{{ subtotal | currency }}</td>
29 |         </tr>
30 |         <tr>
31 |             <td>Tax:</td>
32 |             <td>{{ tax | currency }}</td>
33 |         </tr>
34 |         <tr>
35 |             <td>Total:</td>
36 |             <td>{{ total | currency }}</td>
37 |         </tr>
38 |     </tbody>
39 | </table>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "devDependencies": {
 3 |     "babel-eslint": "^4.1.3",
 4 |     "browserify": "^11.2.0",
 5 |     "eslint": "^1.6.0",
 6 |     "gulp": "^3.9.0",
 7 |     "partialify": "^3.1.5",
 8 |     "vinyl-source-stream": "^1.1.0"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^3.3.5",
12 |     "font-awesome": "^4.4.0",
13 |     "jquery": "^2.1.4",
14 |     "vue": "^0.12.16"
15 |   }
16 | }
17 | 


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