Simple product list

sirchris · sirchris · commit 1d1ce63ca339 · 2018-05-26T17:48:00.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "vue-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --open",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "vee-validate": "^2.0.9",
+    "vue": "^2.5.16"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.0-beta.11",
+    "@vue/cli-plugin-eslint": "^3.0.0-beta.11",
+    "@vue/cli-service": "^3.0.0-beta.11",
+    "vue-template-compiler": "^2.5.16"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+        <title>Simple vue-app</title>
+    </head>
+
+    <body>
+        <noscript>
+            <strong>We're sorry but vue-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+        </noscript>
+
+        <div id="app"></div>
+
+        <!-- built files will be auto injected -->
+    </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,56 @@
+<template>
+    <div id="app">
+        <img src="./assets/logo.png">
+
+        <ProductList msg="Product list injected from App.js" :products="products"/>
+
+        <add-product @onAddProduct="handleAddProduct"></add-product>
+    </div>
+</template>
+
+<script>
+    import AddProduct from './components/AddProduct';
+    import ProductList from './components/ProductList';
+    import VeeValidate from 'vee-validate';
+    import Vue from 'vue';
+
+    Vue.use(VeeValidate);
+
+    export default {
+        name: 'app',
+        components: {
+            AddProduct,
+            ProductList
+        },
+        data() {
+            return {
+                products: [{
+                    id: 0,
+                    name: 'Pizza'
+                }, {
+                    id: 1,
+                    name: 'Burger'
+                }, {
+                    id: 1,
+                    name: 'Orange juice'
+                }]
+            }
+        },
+        methods: {
+            handleAddProduct(product) {
+                this.products.push(product);
+            }
+        }
+    }
+</script>
+
+<style>
+    #app {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        color: #2c3e50;
+        font-family: 'Avenir', Helvetica, Arial, sans-serif;
+        margin-top: 60px;
+        text-align: center;
+    }
+</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/AddProduct.vue b/src/components/AddProduct.vue
@@ -0,0 +1,52 @@
+<template>
+    <form @submit.prevent="onSubmit()">
+        <input name="product" v-model="newProduct.name" type="text" v-validate="'required|min:3'">
+
+        <button>Add hardcoded text</button>
+
+        <div v-show="errors.has('product')">
+            {{ errors.first('product') }}
+        </div>
+    </form>
+</template>
+
+
+<script>
+    export default {
+        name: 'AddProduct',
+        data() {
+            return {
+                newProduct: {
+                    name: ''
+                }
+            }
+        },
+        methods: {
+            onSubmit() {
+                this.$validator.validateAll().then(result => {
+                    if (!result) {
+                        return;
+                    }
+
+                    this.$emit('onAddProduct', {
+                        id: Date.now(),
+                        ...this.newProduct
+                    });
+
+                    this.newProduct.name = '';
+                    this.$validator.reset();
+                });
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    form {
+        margin-top: 20px;
+    }
+
+    form button {
+        margin-left: 10px;
+    }
+</style>
diff --git a/src/components/Product.vue b/src/components/Product.vue
@@ -0,0 +1,19 @@
+<template>
+    <li>{{ product.name }} <button v-on:click="removeCurrent(product)">Usuń</button></li>
+</template>
+
+<script>
+    export default {
+        name: 'Product',
+        props: {
+            product: Object
+        },
+        methods: {
+            removeCurrent(product) {
+                this.$emit('onRemoveProduct', {
+                    id: product.id,
+                });
+            }
+        }
+    }
+</script>
diff --git a/src/components/ProductList.vue b/src/components/ProductList.vue
@@ -0,0 +1,54 @@
+<template>
+    <div>
+        <h1>{{ msg }}</h1>
+
+        <ul v-if="products.length" class="list">
+            <Product v-for="product in products" v-bind:product="product" @onRemoveProduct="handleRemoveProduct"/>
+        </ul>
+
+        <p v-else>No products!</p>
+
+        <button v-on:click="removeLastItem()">Remove last item</button>
+        <button v-on:click="sortList()">Sort products</button>
+    </div>
+</template>
+
+<script>
+    import Product from './Product';
+
+    export default {
+        name: 'ProductList',
+        props: {
+            msg: String,
+            products: {
+                type: Array,
+            }
+        },
+        components: {
+            Product
+        },
+        methods: {
+            removeLastItem() {
+                this.products.pop();
+            },
+
+            handleRemoveProduct(id) {
+                this.products.splice(this.products.indexOf(id), 1);
+            },
+
+            sortList() {
+                return this.products.sort((a, b) => a.name > b.name );
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .list {
+        list-style: none;
+    }
+
+    button {
+        margin: 0 5px;
+    }
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')
