Products form now using Element UI

amcosta · Dec 29, 2016 · daec22f · daec22f
1 parent 06c8ddb
commit daec22f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 21 deletions.
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">
+      <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-form-item>
+      <el-button @click="submit">Save</el-button>
+    </el-form>
+  </div>
 </template>
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,7 @@
         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>')

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,
 }