Merge pull request codecasts#108 from vedovelli/feature/finish-implem…

…ent-element Feature/finish implement element. This will close codecasts#13
amcosta · Jan 11, 2017 · 3533f23 · 3533f23
2 parents 584de17 + 41af567
commit 3533f23
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 110 deletions.
diff --git a/client/package.json b/client/package.json
@@ -16,7 +16,6 @@
     "axios": "^0.15.2",
     "bootstrap-sass": "^3.3.7",
     "element-ui": "^1.0.7",
-    "font-awesome": "^4.7.0",
     "jquery": "^3.1.1",
     "localforage": "^1.4.3",
     "lodash": "^4.17.2",

diff --git a/client/src/app/auth/components/forms/singin.vue b/client/src/app/auth/components/forms/singin.vue
@@ -41,15 +41,15 @@
 </script>
 
 <template>
-  <form class="well" @submit.prevent="submit">
-    <div class="form-group">
-      <label for="email" class="control-label">E-mail</label>
-      <input type="email" class="form-control" id="email" v-model="email">
-    </div>
-    <div class="form-group">
-      <label for="password" class="control-label">Password</label>
-      <input type="password" class="form-control" id="password" v-model="password">
-    </div>
-    <button class="btn btn-primary btn-block" type="submit">Login</button>
-  </form>
+  <div class="well">
+    <el-form ref="form">
+      <el-form-item label="E-mail">
+        <el-input v-model="email"></el-input>
+      </el-form-item>
+      <el-form-item label="Password">
+        <el-input v-model="password" type="password"></el-input>
+      </el-form-item>
+      <el-button @click="submit">Login</el-button>
+    </el-form>
+  </div>
 </template>
diff --git a/client/src/app/categories/form.vue b/client/src/app/categories/form.vue
@@ -59,9 +59,8 @@
       * from the server
       */
       fetch() {
-        this.$refs.firstInput.focus()
-
         const id = this.$route.params.id
+
         /**
         * This same component is used for create
         * and update so we have to check if
@@ -153,11 +152,12 @@
 </script>
 
 <template>
-  <form @submit.prevent="submit" class="well">
-    <div class="form-group">
-      <label for="name" class="control-label">Category Name</label>
-      <input ref="firstInput" type="text" id="name" class="form-control" v-model="category.name">
-    </div>
-    <button class="btn btn-primary btn-xs" type="submit">Salvar</button>
-  </form>
+  <div class="well">
+    <el-form ref="form" :model="category" label-width="120px">
+      <el-form-item label="Category name">
+        <el-input v-model="category.name"></el-input>
+      </el-form-item>
+      <el-button @click="submit">Save</el-button>
+    </el-form>
+  </div>
 </template>
diff --git a/client/src/app/categories/main.vue b/client/src/app/categories/main.vue
@@ -208,16 +208,6 @@
       */
       this.fetchPaginated()
     },
-    /**
-    * This hook is called every time DOM
-    * gets updated.
-    */
-    updated() {
-      /**
-      * start Bootstrap Tooltip
-      */
-      jQuery('[data-toggle="tooltip"]').tooltip()
-    },
   }
 </script>
 
@@ -279,6 +269,7 @@
 <style scoped>
   .pagination {
     float: right;
+    margin-top: 20px;
   }
   .button-within-header {
     margin-top: 32px;

diff --git a/client/src/app/products/form.vue b/client/src/app/products/form.vue
@@ -63,8 +63,6 @@
       * from the server
       */
       fetch() {
-        this.$refs.firstInput.focus()
-
         const id = this.$route.params.id
         /**
         * This same component is used for create
@@ -183,19 +181,21 @@
 </script>
 
 <template>
-  <form @submit.prevent="submit" class="well">
-    <div class="form-group">
-      <label for="name" class="control-label">Product Name</label>
-      <input ref="firstInput" type="text" id="name" class="form-control" v-model="product.name">
-    </div>
-    <div class="form-group">
-      <label for="category" class="control-label">Category</label>
-      <select name="category" id="category" class="form-control" v-model="product.category">
-        <option v-for="category in categories" :value="category.id">
-          {{ category.name }}
-        </option>
-      </select>
-    </div>
-    <button class="btn btn-primary btn-xs" type="submit">Salvar</button>
-  </form>
+  <div class="well">
+    <el-form ref="form" :model="product" label-width="120px">
+      <el-form-item label="Product name">
+        <el-input v-model="product.name"></el-input>
+      </el-form-item>
+      <el-form-item label="Category">
+        <el-select v-model="product.category" placeholder="Select Category" filterable>
+          <el-option
+            v-for="category in categories"
+            :label="category.name"
+            :value="category.id">
+          </el-option>
+        </el-select>
+        <el-button @click="submit">Save</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
diff --git a/client/src/app/products/main.vue b/client/src/app/products/main.vue
@@ -178,16 +178,6 @@
       */
       this.fetch()
     },
-    /**
-    * This hook is called every time DOM
-    * gets updated.
-    */
-    updated() {
-      /**
-      * start Bootstrap Tooltip
-      */
-      jQuery('[data-toggle="tooltip"]').tooltip()
-    },
   }
 </script>
 
@@ -249,6 +239,7 @@
 <style scoped>
   .pagination {
     float: right;
+    margin-top: 20px;
   }
   .button-within-header {
     margin-top: 32px;

diff --git a/client/src/assets/sass/app.scss b/client/src/assets/sass/app.scss
@@ -6,10 +6,19 @@
 @import "variables";
 
 // Bootstrap
-@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
-
-// Font-awesome
-@import "../../../node_modules/font-awesome/scss/font-awesome.scss";
+// You can look at node_modules/bootstrap-sass/assets/stylesheets/bootstrap
+// To see what can be included here. If you want/need to whole Bootstrap
+// then just uncomment the line below. Don't forget to remove all other
+// bootstrap related lines (lines 14-21)
+// @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
+@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
+@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
+@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize";
+@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
+@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type";
+@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid";
+@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/wells";
+@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navs";
 
 // SweetAlert
 @import "../../../node_modules/sweetalert/dev/sweetalert.scss";
diff --git a/client/src/components/general/alerts.vue b/client/src/components/general/alerts.vue
@@ -1,7 +1,6 @@
 
 <script>
   import { mapState, mapActions } from 'vuex'
-  import { isEmpty } from 'lodash'
 
   export default {
     computed: {
@@ -13,7 +12,13 @@
         return this.messages.error.length > 0
       },
       hasValidationMessages() {
-        return !isEmpty(this.messages.validation)
+        return this.messages.validation.length > 0
+      },
+      formatedErrorMessage() {
+        return this.messages.error.map(msg => `&bull; ${msg}`).join('<br>')
+      },
+      formatedValidationMessage() {
+        return this.messages.validation.map(msg => `&bull; ${msg}`).join('<br>')
       },
     },
     methods: {
@@ -34,35 +39,33 @@
 </script>
 
 <template>
-  <div>
-
-    <!-- Success messages -->
-    <div class="alert alert-success" v-show="hasSuccessMessage">
-      <button type="button" class="close" aria-label="Close" @click="dismiss('success')">
-        <span aria-hidden="true">&times;</span>
-      </button>
-      {{ messages.success }}
-    </div>
+  <div class="alerts-container">
+    <el-alert
+      :title="messages.success"
+      v-show="hasSuccessMessage"
+      type="success"
+      @close="dismiss('success')"
+      show-icon></el-alert>
 
-    <!-- Error messages -->
-    <div class="alert alert-danger" v-show="hasErrorMessages">
-      <button type="button" class="close" aria-label="Close" @click="dismiss('error')">
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <ul>
-        <li v-for="error in messages.error">{{ error }}</li>
-      </ul>
-    </div>
+    <el-alert
+      :title="formatedErrorMessage"
+      v-show="hasErrorMessages"
+      type="error"
+      @close="dismiss('error')"
+      show-icon></el-alert>
 
-    <!-- Validation messages -->
-    <div class="alert alert-danger" v-show="hasValidationMessages">
-      <button type="button" class="close" aria-label="Close" @click="dismiss('validation')">
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <ul>
-        <li v-for="error in messages.validation">{{ error[0] }}</li>
-      </ul>
-    </div>
+    <el-alert
+      :title="formatedErrorMessage"
+      v-show="hasValidationMessage"
+      type="warning"
+      @close="dismiss('validation')"
+      show-icon></el-alert>
 
   </div>
 </template>
+
+<style scoped>
+  .alerts-container {
+    padding-top: 16px;
+  }
+</style>
diff --git a/client/src/includes.js b/client/src/includes.js
@@ -1,5 +1,4 @@
 
 /* eslint-disable no-undef */
 window.$ = window.jQuery = require('jquery')
-require('bootstrap-sass')
 require('sweetalert')
diff --git a/client/src/store/actions.js b/client/src/store/actions.js
@@ -15,6 +15,6 @@ export default {
     commit(TYPES.MAIN_SET_MESSAGE, { type: 'success', message: '' })
     commit(TYPES.MAIN_SET_MESSAGE, { type: 'error', message: [] })
     commit(TYPES.MAIN_SET_MESSAGE, { type: 'warning', message: '' })
-    commit(TYPES.MAIN_SET_MESSAGE, { type: 'validation', message: {} })
+    commit(TYPES.MAIN_SET_MESSAGE, { type: 'validation', message: [] })
   },
 }
diff --git a/client/src/store/state.js b/client/src/store/state.js
@@ -5,7 +5,7 @@ export default {
     success: '',
     error: [],
     warning: '',
-    validation: {},
+    validation: [],
   },
   fetching: false,
 }
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -2477,10 +2477,6 @@ [email protected]:
   dependencies:
     debug "^2.2.0"
 
-font-awesome@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
-
 for-in@^0.1.5:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8"
@@ -3893,11 +3889,7 @@ lower-case@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.3.tgz#c92393d976793eee5ba4edb583cf8eae35bd9bfb"
 
-lru-cache@2:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952"
-
-[email protected]:
+lru-cache@2, [email protected]:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
 
@@ -4393,13 +4385,7 @@ on-finished@~2.3.0:
   dependencies:
     ee-first "1.1.1"
 
-[email protected], once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  dependencies:
-    wrappy "1"
-
-once@~1.3.0, once@~1.3.3:
+[email protected], once@^1.3.0, once@~1.3.0, once@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
   dependencies: