From c00bf4758844378ce2b3777e92ca2c15a74bbf30 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Thu, 22 Mar 2018 12:20:23 -0300
Subject: [PATCH] Adds button to HelpButton component. Create getHelperMessage
 and getHelperTitle functions on i18n object to access Help information on
 each entities.

---
 .../components/edition/field-edition-form.vue | 55 ++++++++++------
 .../edition/filter-edition-form.vue           | 34 +++++++---
 src/admin/components/lists/fields-list.vue    | 15 +++--
 src/admin/components/lists/filters-list.vue   | 15 +++--
 .../{help-tooltip.vue => help-button.vue}     | 64 ++++++++++++++++---
 src/admin/js/main.js                          |  3 +
 src/admin/js/utilities.js                     | 26 +++++++-
 src/admin/other/grip-icon.vue                 | 11 ----
 src/admin/scss/tainacan-admin.scss            |  9 ---
 9 files changed, 161 insertions(+), 71 deletions(-)
 rename src/admin/components/other/{help-tooltip.vue => help-button.vue} (51%)
 delete mode 100644 src/admin/other/grip-icon.vue

diff --git a/src/admin/components/edition/field-edition-form.vue b/src/admin/components/edition/field-edition-form.vue
index 9c6c7c9ed..bb9421671 100644
--- a/src/admin/components/edition/field-edition-form.vue
+++ b/src/admin/components/edition/field-edition-form.vue
@@ -7,8 +7,12 @@
             :message="formErrors['name'] != undefined ? formErrors['name'] : ''"> 
             <label class="label">
                 {{$i18n.get('label_name')}} 
-                  <span class="required-field-asterisk" :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span> 
-                  <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a></label>
+                <span class="required-field-asterisk" :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span> 
+                <help-button 
+                    :title="$i18n.getHelperTitle('fields', 'name')" 
+                    :message="$i18n.getHelperMessage('fields', 'name')">
+                </help-button>
+            </label>
             <b-input v-model="editForm.name" name="name" @focus="clearErrors('name')"></b-input>
         </b-field>
 
@@ -16,9 +20,13 @@
             :addons="false"
             :type="formErrors['description'] != undefined ? 'is-danger' : ''" 
             :message="formErrors['description'] != undefined ? formErrors['description'] : ''">
-            <label class="label">{{$i18n.get('label_description')}} <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon>
-            <help-tooltip title="Ajuda Gente!" message="Este é um exemplo de mensagem de ajuda. Aqui vai um monte de informações úteis."></help-tooltip>
-            </a></label>
+            <label class="label">
+                {{$i18n.get('label_description')}}
+                <help-button 
+                    :title="$i18n.getHelperTitle('fields', 'description')" 
+                    :message="$i18n.getHelperMessage('fields', 'description')">
+                </help-button>
+            </label>
             <b-input type="textarea" name="description" v-model="editForm.description" @focus="clearErrors('description')" ></b-input>
         </b-field>
 
@@ -26,7 +34,13 @@
             :addons="false"
             :type="formErrors['status'] != undefined ? 'is-danger' : ''" 
             :message="formErrors['status'] != undefined ? formErrors['status'] : ''">
-            <label class="label">{{$i18n.get('label_status')}} <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a></label>
+            <label class="label">
+                {{$i18n.get('label_status')}} 
+                <help-button 
+                    :title="$i18n.getHelperTitle('fields', 'status')" 
+                    :message="$i18n.getHelperMessage('fields', 'status')">
+                </help-button>
+            </label>
             <div class="inline-block">
                 <b-radio 
                     @focus="clearErrors('label_status')"
@@ -62,7 +76,10 @@
                     name="required">
                     {{ $i18n.get('label_required') }}
                 </b-checkbox>
-                <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a>
+                <help-button 
+                    :title="$i18n.getHelperTitle('fields', 'required')" 
+                    :message="$i18n.getHelperMessage('fields', 'required')">
+                </help-button>
             </b-field>
 
             <b-field
@@ -76,7 +93,10 @@
                     name="multiple">
                     {{ $i18n.get('label_allow_multiple') }}
                 </b-checkbox>
-                <a class="help-button">  <b-icon size="is-small" icon="help-circle-outline"></b-icon></a>
+                <help-button 
+                    :title="$i18n.getHelperTitle('fields', 'multiple')" 
+                    :message="$i18n.getHelperMessage('fields', 'multiple')">
+                </help-button>
             </b-field>
 
             <b-field 
@@ -90,16 +110,19 @@
                     name="collecion_key">
                     {{ $i18n.get('label_unique_value') }}
                 </b-checkbox>
-                <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a>
+                <help-button 
+                    :title="$i18n.getHelperTitle('fields', 'unique')" 
+                    :message="$i18n.getHelperMessage('fields', 'unique')">
+                </help-button>
             </b-field>
         </b-field>
 
         <component
-                :errors="formErrors['field_type_options']"
-                v-if="(editForm.field_type_object && editForm.field_type_object.form_component) || editForm.edit_form == ''"
-                :is="editForm.field_type_object.form_component"
-                :field="editForm"
-                v-model="editForm.field_type_options">
+            :errors="formErrors['field_type_options']"
+            v-if="(editForm.field_type_object && editForm.field_type_object.form_component) || editForm.edit_form == ''"
+            :is="editForm.field_type_object.form_component"
+            :field="editForm"
+            v-model="editForm.field_type_options">
         </component>
         <div v-html="editForm.edit_form" v-else></div>
 
@@ -117,7 +140,6 @@
 
 <script>
 import { mapActions } from 'vuex';
-import HelpTooltip from '../other/help-tooltip.vue';
 
 export default {
     name: 'FieldEditionForm',
@@ -137,9 +159,6 @@ export default {
         isRepositoryLevel: false,
         collectionId: ''
     },
-    components: {
-        HelpTooltip
-    },
     created() {
         this.editForm = this.editedField;
         this.oldForm = JSON.parse(JSON.stringify(this.originalField));
diff --git a/src/admin/components/edition/filter-edition-form.vue b/src/admin/components/edition/filter-edition-form.vue
index 62b277706..12d7b40b5 100644
--- a/src/admin/components/edition/filter-edition-form.vue
+++ b/src/admin/components/edition/filter-edition-form.vue
@@ -7,8 +7,11 @@
             :message="formErrors['name'] != undefined ? formErrors['name'] : ''">
             <label class="label">
                 {{$i18n.get('label_name')}} 
-                  <span class="required-field-asterisk" :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span> 
-                  <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a>
+                <span class="required-field-asterisk" :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span> 
+                <help-button 
+                    :title="$i18n.getHelperTitle('filters', 'name')" 
+                    :message="$i18n.getHelperMessage('filters', 'name')">
+                </help-button>
             </label>
             <b-input v-model="editForm.name" name="name" @focus="clearErrors('name')"></b-input>
         </b-field>
@@ -17,7 +20,13 @@
             :addons="false" 
             :type="formErrors['description'] != undefined ? 'is-danger' : ''" 
             :message="formErrors['description'] != undefined ? formErrors['description'] : ''">
-            <label class="label">{{$i18n.get('label_description')}} <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a></label>
+            <label class="label">
+                {{$i18n.get('label_description')}} 
+                <help-button 
+                    :title="$i18n.getHelperTitle('filters', 'description')" 
+                    :message="$i18n.getHelperMessage('filters', 'description')">
+                </help-button>    
+            </label>
             <b-input type="textarea" name="description" v-model="editForm.description" @focus="clearErrors('description')" ></b-input>
         </b-field>
 
@@ -25,7 +34,13 @@
             :addons="false"
             :type="formErrors['status'] != undefined ? 'is-danger' : ''" 
             :message="formErrors['status'] != undefined ? formErrors['status'] : ''">
-            <label class="label">{{$i18n.get('label_status')}} <a class="help-button"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a></label>
+            <label class="label">
+                {{$i18n.get('label_status')}} 
+                <help-button 
+                    :title="$i18n.getHelperTitle('filters', 'status')" 
+                    :message="$i18n.getHelperMessage('filters', 'status')">
+                </help-button>
+            </label>
             <div class="inline-block">
                 <b-radio 
                     @focus="clearErrors('label_status')"
@@ -46,14 +61,13 @@
                 </b-radio>
             </div>
         </b-field>
-        <br>
 
         <component
-                :errors="formErrors['filter_type_options']"
-                v-if="(editForm.filter_type_object && editForm.filter_type_object.form_component) || editForm.edit_form == ''"
-                :is="editForm.filter_type_object.form_component"
-                :filter="editForm"
-                v-model="editForm.filter_type_options">
+            :errors="formErrors['filter_type_options']"
+            v-if="(editForm.filter_type_object && editForm.filter_type_object.form_component) || editForm.edit_form == ''"
+            :is="editForm.filter_type_object.form_component"
+            :filter="editForm"
+            v-model="editForm.filter_type_options">
         </component>
         <div v-html="editForm.edit_form" v-else></div>
 
diff --git a/src/admin/components/lists/fields-list.vue b/src/admin/components/lists/fields-list.vue
index 7187a5659..31b91fabe 100644
--- a/src/admin/components/lists/fields-list.vue
+++ b/src/admin/components/lists/fields-list.vue
@@ -37,9 +37,9 @@
                                 v-if="field.id != undefined"
                                 class="label-details">  
                                   ({{ $i18n.get(field.field_type_object.component) }})  
-                                    <em v-if="(editForms[field.id] != undefined && editForms[field.id].saved != true) || field.status == 'auto-draft'"> 
+                                    <span class="not-saved" v-if="(editForms[field.id] != undefined && editForms[field.id].saved != true) || field.status == 'auto-draft'"> 
                                       {{ $i18n.get('info_not_saved') }}
-                                    </em>
+                                    </span>
                             </span>
                             <span class="loading-spinner" v-if="field.id == undefined"></span>
                             <span class="controls" v-if="field.id !== undefined">
@@ -377,6 +377,11 @@ export default {
                 font-weight: normal;
                 color: $gray;
             }
+            .not-saved {
+                font-style: italic;
+                font-weight: bold;
+                color: $danger;
+            }
             .controls { 
                 position: absolute;
                 right: 5px;
@@ -396,7 +401,7 @@ export default {
                 cursor: default;
                 background-color: white !important;
 
-                .label-details, .icon {
+                .handle .label-details, .handle .icon, .handle .not-saved {
                     color: $gray !important;
                 }
             } 
@@ -406,7 +411,7 @@ export default {
                 .field-name {
                     color: $primary;
                 }
-                .label-details, .icon {
+                .handle .label-details, .handle .icon, .handle .not-saved {
                     color: $gray !important;
                 }
             }
@@ -419,7 +424,7 @@ export default {
             border-color: $secondary;
             color: white !important;
 
-            .label-details, .icon {
+            .label-details, .icon, .not-saved {
                 color: white !important;
             }
 
diff --git a/src/admin/components/lists/filters-list.vue b/src/admin/components/lists/filters-list.vue
index a8afb2e9e..32a1e6e32 100644
--- a/src/admin/components/lists/filters-list.vue
+++ b/src/admin/components/lists/filters-list.vue
@@ -31,16 +31,16 @@
                                 <grip-icon></grip-icon>
                                 <span 
                                     class="filter-name"
-                                    :class="{'is-danger': formWithErrors == filter.id || filter.status == 'auto-draft' || (editForms[filter.id] != undefined && editForms[filter.id].saved != true) }">
+                                    :class="{'is-danger': formWithErrors == filter.id }">
                                     {{ filter.name }}
                                 </span>
                                 <span   
                                     v-if="filter.filter_type_object != undefined"
                                     class="label-details">  
                                     ({{ $i18n.get(filter.filter_type_object.component) }})  
-                                        <em v-if="(editForms[filter.id] != undefined && editForms[filter.id].saved != true) ||filter.status == 'auto-draft'"> 
+                                        <span class="not-saved" v-if="(editForms[filter.id] != undefined && editForms[filter.id].saved != true) ||filter.status == 'auto-draft'"> 
                                         {{ $i18n.get('info_not_saved') }}
-                                        </em>
+                                        </span>
                                 </span> 
                                 <span class="loading-spinner" v-if="filter.id == undefined"></span>
                                 <span class="controls" v-if="filter.filter_type != undefined">
@@ -488,6 +488,11 @@ export default {
                 font-weight: normal;
                 color: $gray;
             }
+            .not-saved {
+                font-style: italic;
+                font-weight: bold;
+                color: $danger;
+            }
             .controls { 
                 position: absolute;
                 right: 5px; 
@@ -512,7 +517,7 @@ export default {
                 cursor: default;
                 background-color: white !important;
 
-                .label-details, .icon {
+                .handle .label-details, .handle .icon, .handle .not-saved {
                     color: $gray !important;
                 }
             } 
@@ -522,7 +527,7 @@ export default {
                 .field-name {
                     color: $primary;
                 }
-                .label-details, .icon {
+                .handle .label-details, .handle .icon, .handle .not-saved {
                     color: $gray !important;
                 }
             }
diff --git a/src/admin/components/other/help-tooltip.vue b/src/admin/components/other/help-button.vue
similarity index 51%
rename from src/admin/components/other/help-tooltip.vue
rename to src/admin/components/other/help-button.vue
index 993de1687..ee6e31e43 100644
--- a/src/admin/components/other/help-tooltip.vue
+++ b/src/admin/components/other/help-button.vue
@@ -1,17 +1,25 @@
 <template>
-    <div class="help-tooltip">
-        <div class="help-tooltip-header">
-            <h5>{{ title }}</h5>
-        </div>
-        <div class="help-tooltip-body">
-            <p>{{ message }}</p>
-        </div>
-    </div>
+    <span class="help-wrapper">
+        <a class="help-button" @click="isOpened = !isOpened"><b-icon size="is-small" icon="help-circle-outline"></b-icon></a>
+        <div class="help-tooltip" :class="{ 'opened': isOpened }">
+            <div class="help-tooltip-header">
+                <h5>{{ title }}</h5><a @click="isOpened = false"><b-icon icon="close"></b-icon></a>
+            </div>
+            <div class="help-tooltip-body">
+                <p>{{ message }}</p>
+            </div>
+        </div>   
+    </span>
 </template>
 
 <script>
 export default {
-    name: 'HelpTooltip',
+    name: 'HelpButton',
+    data() {
+        return {
+            isOpened: false
+        }
+    },
     props: {
         title: '',
         message: ''
@@ -20,6 +28,26 @@ export default {
 </script>
 
 <style lang="scss">
+
+    @import "../../scss/_variables.scss";
+
+    .help-wrapper {
+        position: relative;
+    }
+
+    a.help-button .icon {
+        i, i::before { font-size: 0.9em !important; }
+        color: $gray;
+        &:hover {
+            color: $primary !important;
+        }
+    }
+
+    .help-tooltip.opened {
+        visibility: visible;
+        opacity: 1;
+    }
+
     .help-tooltip {
         color: #000;
         background-color: #e8f9f5;
@@ -30,14 +58,30 @@ export default {
         z-index: 99999999999999;
         bottom: 100%;
         left: 0%;
-        display: block;
         min-width: 250px;
+        display: block;
+        visibility: hidden;
+        opacity: 0;
+        transition: opacity 0.3s ease;
 
         .help-tooltip-header {
             padding: 0.8em 0.8em 0.6em 0.8em;
             border-bottom: 1px solid #909293;
             font-size: 18px;
             font-weight: bold;
+
+            h5 {
+                margin-right: 25px;
+            }
+            .icon {
+                color: #909293 !important;
+                right: 14px;
+                top: 14px;
+                position: absolute;
+                &:hover {
+                    color: black !important;
+                }
+            }
         }
 
         .help-tooltip-body {
diff --git a/src/admin/js/main.js b/src/admin/js/main.js
index 15a9de354..c988ba60c 100644
--- a/src/admin/js/main.js
+++ b/src/admin/js/main.js
@@ -26,6 +26,7 @@ import TaincanFiltersList from '../../classes/filter-types/tainacan-filters-list
 
 // Remaining imports
 import AdminPage from '../admin.vue'
+import HelpButton from '../components/other/help-button.vue';
 import draggable from 'vuedraggable'
 import store from '../../js/store/store'
 import router from './router'
@@ -56,6 +57,8 @@ Vue.component('tainacan-form-selectbox', FormSelectbox);
 
 Vue.component('tainacan-form-item', TaincanFormItem);
 Vue.component('tainacan-filters-list', TaincanFiltersList);
+
+Vue.component('help-button', HelpButton);
 Vue.component('draggable', draggable);
 
 /* Filters */
diff --git a/src/admin/js/utilities.js b/src/admin/js/utilities.js
index dffdb74a2..7497d950b 100644
--- a/src/admin/js/utilities.js
+++ b/src/admin/js/utilities.js
@@ -14,7 +14,7 @@ I18NPlugin.install = function (Vue, options = {}) {
     Vue.prototype.$i18n = {
         get(key) {
             let string = tainacan_plugin.i18n[key];
-            return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n key: " + tainacan_plugin.i18n[key];
+            return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n key: " + key;
         },
         getFrom(entity, key) {
             if (entity == 'categories') // Temporary hack, while we decide this terminology...
@@ -22,8 +22,28 @@ I18NPlugin.install = function (Vue, options = {}) {
             if (tainacan_plugin.i18n['entities_labels'][entity] == undefined)
                 return 'Invalid i18n entity: ' + entity;
             let string = tainacan_plugin.i18n['entities_labels'][entity][key];
-            return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n key: " + tainacan_plugin.i18n[key];
-        }
+            return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n key: " + key;
+        },
+        getHelperTitle(entity, key) {
+            if (entity == 'categories') // Temporary hack, while we decide this terminology...
+                entity = 'taxonomies'
+            if (tainacan_plugin.i18n['helpers_label'][entity] == undefined)
+                return 'Invalid i18n entity: ' + entity;
+            if (tainacan_plugin.i18n['helpers_label'][entity][key] == undefined)
+                return 'Invalid i18n key: ' + key;
+            let string = tainacan_plugin.i18n['helpers_label'][entity][key].title;
+            return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n helper object.";
+        },
+        getHelperMessage(entity, key) {
+            if (entity == 'categories') // Temporary hack, while we decide this terminology...
+                entity = 'taxonomies'
+            if (tainacan_plugin.i18n['helpers_label'][entity] == undefined)
+                return 'Invalid i18n entity: ' + entity;
+            if (tainacan_plugin.i18n['helpers_label'][entity][key] == undefined)
+                return 'Invalid i18n key: ' + key;
+            let string = tainacan_plugin.i18n['helpers_label'][entity][key].description;
+            return (string != undefined && string != null && string != '' ) ? string : "Invalid i18n helper object. ";
+        },
     }
 
 }
diff --git a/src/admin/other/grip-icon.vue b/src/admin/other/grip-icon.vue
deleted file mode 100644
index 6a93dae9e..000000000
--- a/src/admin/other/grip-icon.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 12.8 12.8" class="grip-icon"><circle cx="1.5" cy="1.5" r="1.5" class="undefined"/><circle cx="6.4" cy="1.5" r="1.5" class="undefined"/><circle cx="11.3" cy="1.5" r="1.5" class="undefined"/><circle cx="1.5" cy="6.4" r="1.5" class="undefined"/><circle cx="6.4" cy="6.4" r="1.5" class="undefined"/><circle cx="11.3" cy="6.4" r="1.5" class="undefined"/><circle cx="1.5" cy="11.3" r="1.5" class="undefined"/><circle cx="6.4" cy="11.3" r="1.5" class="undefined"/><circle cx="11.3" cy="11.3" r="1.5" class="undefined"/></svg>
-</template>
-
-<script>
-export default {
-    name: 'GripIcon'
-}
-</script>
-
-
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index 4f4aba5dd..47f2def1e 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -99,15 +99,6 @@ html {
             color: $danger;
         }
     }
-    a.help-button, a.help-button i, a.help-button i::before{
-        font-size: 0.9em !important;
-        color: $gray;
-        position: relative;
-        &:hover {
-            color: $primary !important;
-            i, i::before {color: $primary !important;}
-        }
-    }
     .input, .textarea {
         font-size: 14px;
         border: none;