From 5af7fbfbf99a44d8e76cc88e5c3bf3e8b9f0e623 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 26 Feb 2018 09:35:20 -0300
Subject: [PATCH] Adds IDs to Collection and Item creation. Adds props ID to
 Tainacan Field Types in order to allow tests automation.

---
 src/admin/components/primary-menu.vue         |  9 ++++--
 src/admin/components/secondary-menu.vue       | 30 ++++++++++++++++++-
 .../pages/edition/collection-edition-page.vue |  3 ++
 src/admin/pages/edition/item-edition-page.vue |  7 +++--
 src/classes/field-types/checkbox/Checkbox.vue |  5 ++--
 src/classes/field-types/date/Date.vue         | 10 +++++--
 src/classes/field-types/numeric/Numeric.vue   | 14 +++++----
 src/classes/field-types/radio/Radio.vue       |  4 ++-
 .../field-types/relationship/Relationship.vue |  4 ++-
 .../field-types/selectbox/Selectbox.vue       |  6 +++-
 .../field-types/tainacan-form-item.vue        |  4 +--
 src/classes/field-types/text/Text.vue         |  7 +++--
 src/classes/field-types/textarea/Textarea.vue | 13 +++++---
 13 files changed, 90 insertions(+), 26 deletions(-)

diff --git a/src/admin/components/primary-menu.vue b/src/admin/components/primary-menu.vue
index d81002e9e..a670fc95b 100644
--- a/src/admin/components/primary-menu.vue
+++ b/src/admin/components/primary-menu.vue
@@ -15,6 +15,7 @@
                 <li><router-link tag="a" to="/items" :class="activeRoute == 'ItemsPage' ? 'is-active':''">
                     <b-icon size="is-small" icon="note-multiple"></b-icon> <span class="menu-text">{{ $i18n.get('items')}}</span>
                 </router-link></li>
+                <div class="separator"></div>
                 <li><router-link tag="a" to="/fields" :class="activeRoute == 'FieldsPage' ? 'is-active':''">
                     <b-icon size="is-small" icon="format-list-checks"></b-icon> <span class="menu-text">{{ $i18n.get('fields')}}</span>
                 </router-link></li>
@@ -54,7 +55,7 @@ export default {
     },
     created () {
         this.isCompressed = (this.$route.params.id != undefined);
-        this.activeRoute = this.$route.to;
+        this.activeRoute = this.$route.name;
     }
 }
 </script>
@@ -89,7 +90,11 @@ export default {
                 -webkit-transition: opacity 0.15s linear, visibility 0.15s linear;
             }
         }
-
+        .separator {
+            height: 2px;
+            background-color: $primary-darker;
+            width: 100%;
+        }
         li{
             a {
                 color: white;
diff --git a/src/admin/components/secondary-menu.vue b/src/admin/components/secondary-menu.vue
index 1ed2ca0e1..ce1ee31b9 100644
--- a/src/admin/components/secondary-menu.vue
+++ b/src/admin/components/secondary-menu.vue
@@ -1,6 +1,13 @@
 <template>
-    <nav id="secondary-menu" role="navigation" aria-label="secondary navigation" class="column is-2 is-sidebar-menu">
+    <nav id="secondary-menu" role="navigation" aria-label="secondary navigation" class="column is-sidebar-menu">
         <aside class="menu">
+            <div class="menu-header">
+                <ul class="menu-list"><li><router-link tag="a" to="/">
+                    <b-icon size="is-medium" icon="chevron-left"></b-icon>
+                    <img class="tainacan-logo" :src="logoHeader"/>
+                </router-link></li></ul> 
+            </div>
+
             <ul class="menu-list">
                 <li><router-link tag="a" :to="{ path: `/collections/${id}/items`}" :class="activeRoute == 'ItemsList' ? 'is-active':''">{{ $i18n.get('items')}}</router-link></li>
                 <li><router-link tag="a" :to="{ path: `/collections/${id}/edit`}" :class="activeRoute == 'CollectionEditionPage' ? 'is-active':''">{{ $i18n.get('edit')}}</router-link></li>
@@ -16,6 +23,7 @@ export default {
     name: 'SecondaryMenu',
     data(){
         return {
+            logoHeader: '../wp-content/plugins/tainacan/admin/images/tainacan_logo_header.png',
             activeRoute: 'ItemsList'
         }
     },
@@ -45,6 +53,26 @@ export default {
         transition: max-width 0.3s linear;
         max-width: 180px; 
 
+        .menu-header {
+            background-color: $primary-dark;
+            height: 62px;
+            a { padding: 1em 1.2em; }
+            .icon {
+                position: absolute;
+                opacity: 0;
+                visibility: hidden;
+                transition: opacity 0.2s linear, visibility 0.2s linear;
+                -webkit-transition: opacity 0.2s linear, visibility 0.2s linear;  
+            }
+            .tainacan-logo {
+                max-height: 28px;
+                opacity: 1;
+                visibility: visible;
+                transition: opacity 0.15s linear, visibility 0.15s linear;
+                -webkit-transition: opacity 0.15s linear, visibility 0.15s linear;
+            }
+        }
+
         li{
             a {
                 color: white;
diff --git a/src/admin/pages/edition/collection-edition-page.vue b/src/admin/pages/edition/collection-edition-page.vue
index 048845f88..56da12ac5 100644
--- a/src/admin/pages/edition/collection-edition-page.vue
+++ b/src/admin/pages/edition/collection-edition-page.vue
@@ -4,11 +4,13 @@
         <form label-width="120px">
             <b-field label="Título">
                 <b-input
+                    id="tainacan-text-name"
                     v-model="form.name">
                 </b-input>
             </b-field>
             <b-field label="Descrição">
                 <b-input
+                        id="tainacan-text-description"
                         type="textarea"
                         v-model="form.description"
                         >
@@ -16,6 +18,7 @@
             </b-field>
             <b-field label="Status">
                 <b-select
+                        id="tainacan-select-status"
                         v-model="form.status"
                         placeholder="Selecione um status">
                     <option
diff --git a/src/admin/pages/edition/item-edition-page.vue b/src/admin/pages/edition/item-edition-page.vue
index 6ac82aa07..5064f352b 100644
--- a/src/admin/pages/edition/item-edition-page.vue
+++ b/src/admin/pages/edition/item-edition-page.vue
@@ -3,10 +3,11 @@
         <h1 class="is-size-3">Item creation  <b-tag v-if="item != null && item != undefined" :type="'is-' + getStatusColor(item.status)" v-text="item.status"></b-tag></h1>
         <form label-width="120px">
             <b-field label="Status">
-                <b-select
+                <b-select id="status-select"
                         v-model="form.status"
                         placeholder="Selecione um status">
                     <option
+                            id="{{'status-option-' + statusOption.value}}"
                             v-for="statusOption in statusOptions"
                             :key="statusOption.value"
                             :value="statusOption.value"
@@ -32,15 +33,17 @@
                     </section>
                 </b-upload>
             </b-field>
-            <tainacan-form-item
+            <tainacan-form-item                  
                     v-for="(field, index) in fieldList"
                     v-bind:key="index"
                     :field="field"></tainacan-form-item>
             <button
+                id="button-cancel-item-creation"
                 class="button"
                 type="button"
                 @click="cancelBack">Cancelar</button>
             <a
+                id="button-submit-item-creation"
                 @click="onSubmit"
                 class="button is-success is-hovered">Salvar</a>
         </form>
diff --git a/src/classes/field-types/checkbox/Checkbox.vue b/src/classes/field-types/checkbox/Checkbox.vue
index ad143d2c3..f6ddcb0d6 100644
--- a/src/classes/field-types/checkbox/Checkbox.vue
+++ b/src/classes/field-types/checkbox/Checkbox.vue
@@ -4,11 +4,11 @@
             v-for="option,index in getOptions"
             class="field">
             <b-checkbox
+                    :id="id"
                     v-model="checked"
                     :native-value="option"
             >{{ option }}</b-checkbox>
         </div>
-
     </div>
 </template>
 
@@ -30,7 +30,8 @@
             options: {
                 type: String
             },
-            value: [String, Number, Array]
+            value: [String, Number, Array],
+            id: ''
         },
         watch: {
             checked: function(val){
diff --git a/src/classes/field-types/date/Date.vue b/src/classes/field-types/date/Date.vue
index 6204612fd..f69509119 100644
--- a/src/classes/field-types/date/Date.vue
+++ b/src/classes/field-types/date/Date.vue
@@ -1,8 +1,9 @@
 <template>
     <b-datepicker
-              v-model="dateValue"
-              @blur="onBlur"
-              @input="onInput($event)"></b-datepicker>
+            :id="id"
+            v-model="dateValue"
+            @blur="onBlur"
+            @input="onInput($event)"></b-datepicker>
 </template>
 
 <script>
@@ -12,6 +13,9 @@
                 dateValue: new Date()
             }
         },
+        props: {
+            id: ''
+        },
         methods: {
             onBlur() {
                 this.$emit('blur');
diff --git a/src/classes/field-types/numeric/Numeric.vue b/src/classes/field-types/numeric/Numeric.vue
index 0a1174448..65d984c3b 100644
--- a/src/classes/field-types/numeric/Numeric.vue
+++ b/src/classes/field-types/numeric/Numeric.vue
@@ -1,10 +1,11 @@
 <template>
     <b-input
-              type="number"
-              :value="inputValue"
-              @blur="onBlur"
-              @change="onBlur"
-              @input="onInput($event)"></b-input>
+            :id="id"
+            type="number"
+            :value="inputValue"
+            @blur="onBlur"
+            @change="onBlur"
+            @input="onInput($event)"></b-input>
 </template>
 
 <script>
@@ -14,6 +15,9 @@
                 inputValue: ''
             }
         },
+        props: {
+            id: ''
+        },
         methods: {
             onBlur() {
                 this.$emit('blur');
diff --git a/src/classes/field-types/radio/Radio.vue b/src/classes/field-types/radio/Radio.vue
index 04be22384..0f9e34334 100644
--- a/src/classes/field-types/radio/Radio.vue
+++ b/src/classes/field-types/radio/Radio.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         <b-radio
+                :id="id"
                 v-for="option,index in getOptions"
                 :key="index"
                 v-model="checked"
@@ -24,7 +25,8 @@
             },
             options: {
                 type: String
-            }
+            },
+            id: ''
         },
         computed: {
             getOptions(){
diff --git a/src/classes/field-types/relationship/Relationship.vue b/src/classes/field-types/relationship/Relationship.vue
index ed447ce1e..84799402b 100644
--- a/src/classes/field-types/relationship/Relationship.vue
+++ b/src/classes/field-types/relationship/Relationship.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         <b-autocomplete
+                :id="id"
                 v-model="selected"
                 :data="options"
                 @input="search"
@@ -32,7 +33,8 @@
             },
             collection_id: {
                 type: Number
-            }
+            },
+            id: ''
         },
         methods: {
             setResults(option){
diff --git a/src/classes/field-types/selectbox/Selectbox.vue b/src/classes/field-types/selectbox/Selectbox.vue
index 29e7f1ec7..620b4c85e 100644
--- a/src/classes/field-types/selectbox/Selectbox.vue
+++ b/src/classes/field-types/selectbox/Selectbox.vue
@@ -1,6 +1,9 @@
 <template>
     <div>
-        <b-select v-model="selected" @input="onChecked()">
+        <b-select 
+            :id = "id"
+            v-model="selected" 
+            @input="onChecked()">
             <option
                     v-for="option,index in getOptions"
                     :key="index"
@@ -27,6 +30,7 @@
                 type: String
             },
             value: [String, Number, Array],
+            id: ''
         },
         computed: {
             getOptions(){
diff --git a/src/classes/field-types/tainacan-form-item.vue b/src/classes/field-types/tainacan-form-item.vue
index 8dc078b52..e1219ea5d 100644
--- a/src/classes/field-types/tainacan-form-item.vue
+++ b/src/classes/field-types/tainacan-form-item.vue
@@ -3,10 +3,10 @@
                  :message="getErrorMessage"
                  :type="fieldTypeMessage">
             <div>
-                <component :is="field.field.field_type_object.component" v-model="inputs[0]" :field="field" @blur="changeValue()"></component>
+                <component :id="field.field.field_type_object.component + '-' + field.field.slug" :is="field.field.field_type_object.component" v-model="inputs[0]" :field="field" @blur="changeValue()"></component>
                 <div v-if="field.field.multiple == 'yes'">
                     <div v-if="index > 0" v-for="(input, index) in inputsList " v-bind:key="index" class="multiple-inputs">
-                        <component :is="field.field.field_type_object.component" v-model="inputs[index]" :field="field" @blur="changeValue()"></component><a class="button" v-if="index > 0" @click="removeInput(index)">-</a>
+                        <component :id="field.field.field_type_object.component + '-' + field.field.slug" :is="field.field.field_type_object.component" v-model="inputs[index]" :field="field" @blur="changeValue()"></component><a class="button" v-if="index > 0" @click="removeInput(index)">-</a>
                     </div>
                     <a class="button" @click="addInput">+</a>
                 </div>
diff --git a/src/classes/field-types/text/Text.vue b/src/classes/field-types/text/Text.vue
index 660ed61da..2f54b7d6c 100644
--- a/src/classes/field-types/text/Text.vue
+++ b/src/classes/field-types/text/Text.vue
@@ -1,5 +1,7 @@
 <template>
-    <b-input :value="inputValue"
+    <b-input
+    :id="id"
+    :value="inputValue"
     @blur="onBlur"
     @input="onInput($event)"></b-input>
 </template>
@@ -8,11 +10,12 @@
     export default {
         data() {
             return {
-                inputValue: ''
+                inputValue: '',
             }
         },
         props: {
             value: [String, Number, Object],
+            id: ''
         },
         methods: {
             onBlur() {
diff --git a/src/classes/field-types/textarea/Textarea.vue b/src/classes/field-types/textarea/Textarea.vue
index f2afabcc3..e16fc7b01 100644
--- a/src/classes/field-types/textarea/Textarea.vue
+++ b/src/classes/field-types/textarea/Textarea.vue
@@ -1,8 +1,10 @@
 <template>
-    <b-input type="textarea"
-              :value="inputValue"
-              @blur="onBlur"
-              @input="onInput($event)"></b-input>
+    <b-input 
+            :id="id"
+            type="textarea"
+            :value="inputValue"
+            @blur="onBlur"
+            @input="onInput($event)"></b-input>
 </template>
 
 <script>
@@ -12,6 +14,9 @@
                 inputValue: ''
             }
         },
+        props: {
+            id: ''
+        },
         methods: {
             onBlur() {
                 this.$emit('blur');