Apply different strategies to handle field descriptions

htdocs/src/components/hCustomForm.vue

@@ -50,6 +50,7 @@
       :specs="{}"
       :type="type"
       :value="val"
+      @focus="$emit('focus', $event)"
       @input="val = $event;$emit('input', val)"
     />
 
@@ -60,6 +61,7 @@
       :fields="form.fields"
       :services="services"
       :value="val"
+      @focus="$emit('focus', $event)"
       @input="val = $event;$emit('input', val)"
     />
 

htdocs/src/components/hFields.vue

@@ -41,15 +41,19 @@
       :edit="edit"
       :index="index"
       :services="services"
+      :show-description="shouldShowDescription(index)"
       :specs="specs"
       :type="specs.type"
       :value="val[specs.id]"
+      @focus="focusChanged(index)"
       @input="val[specs.id] = $event;$emit('input', val)"
     />
   </div>
 </template>
 
 <script>
+import FieldsDescription from '@/mixins/fieldsDescription'
+
 export default {
   name: 'HFields',
 
@@ -57,6 +61,8 @@ export default {
     hResourceValue: () => import('@/components/hResourceValue')
   },
 
+  mixins: [FieldsDescription],
+
   props: {
     edit: {
       type: Boolean,

htdocs/src/components/hResourceValue.vue

@@ -40,8 +40,10 @@
     :edit-toolbar="editToolbar"
     :index="index"
     :services="services"
+    :show-description="showDescription"
     :specs="specs"
     :type="type"
+    @focus="$emit('focus', $event)"
     @input="$emit('input', $event)"
     @delete-service="$emit('delete-service', $event)"
     @save-service="$emit('save-service', $event)"
@@ -79,6 +81,10 @@ export default {
       type: Object,
       default: null
     },
+    showDescription: {
+      type: Boolean,
+      default: true
+    },
     specs: {
       type: Object,
       default: null

htdocs/src/components/hResourceValueInput.vue

@@ -38,8 +38,8 @@
     <label v-if="specs.label" :for="'spec-' + index + '-' + specs.id" :title="specs.label" class="col-md-4 col-form-label text-truncate text-md-right text-primary">{{ specs.label }}</label>
     <label v-else :for="'spec-' + index + '-' + specs.id" :title="specs.label" class="col-md-4 col-form-label text-truncate text-md-right text-primary">{{ specs.id }}</label>
     <b-col md="8">
-      <h-resource-value-input-raw v-model="val" :edit="edit" :index="index" :specs="specs" @focus="show_description = true" @blur="show_description = false" />
-      <p v-if="specs.description" v-show="user_getSettings.fieldhint > 2 || (user_getSettings.fieldhint > 1 && show_description)" class="text-justify" style="line-height: 1.1">
+      <h-resource-value-input-raw v-model="val" :edit="edit" :index="index" :specs="specs" @focus="$emit('focus')" />
+      <p v-if="specs.description" v-show="showDescription || specs.choices !== undefined" class="text-justify" style="line-height: 1.1">
         <small class="text-muted">{{ specs.description }}</small>
       </p>
     </b-col>
@@ -47,8 +47,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-
 export default {
   name: 'HResourceValueInput',
 
@@ -69,6 +67,10 @@ export default {
       type: Number,
       required: true
     },
+    showDescription: {
+      type: Boolean,
+      default: true
+    },
     specs: {
       type: Object,
       default: null
@@ -93,9 +95,7 @@ export default {
       set (val) {
         this.$emit('input', val)
       }
-    },
-
-    ...mapGetters('user', ['user_getSettings'])
+    }
   },
 
   methods: {

htdocs/src/components/hResourceValueObject.vue

@@ -52,8 +52,10 @@
           :edit-toolbar="editToolbar"
           :index="index"
           :services="services"
+          :show-description="shouldShowDescription(index)"
           :specs="spec"
           :type="spec.type"
+          @focus="focusChanged(index)"
           @save-service="$emit('save-service', function () { serviceEdit=false; if ($event) { $event() } })"
         />
         <b-button v-else :disable="value['']" @click="createObject(spec)">
@@ -88,9 +90,11 @@
         :edit="editChildren"
         :index="index"
         :services="services"
+        :show-description="shouldShowDescription(index)"
         :specs="spec"
         :type="spec.type"
         :value="val[spec.id]"
+        @focus="focusChanged(index)"
         @input="val[spec.id] = $event;$emit('input', val)"
         @save-service="$emit('save-service', $event)"
       />
@@ -99,6 +103,7 @@
 </template>
 
 <script>
+import FieldsDescription from '@/mixins/fieldsDescription'
 import ServiceSpecsApi from '@/services/ServiceSpecsApi'
 import Vue from 'vue'
 
@@ -109,6 +114,8 @@ export default {
     hResourceValue: () => import('@/components/hResourceValue')
   },
 
+  mixins: [FieldsDescription],
+
   props: {
     edit: {
       type: Boolean,

htdocs/src/components/hSourceState.vue

@@ -32,7 +32,7 @@
   -->
 
 <template>
-  <h-custom-form v-if="val" :form="form" :value="val.Source" @input="val.Source = $event; $emit('input', val)">
+  <h-custom-form v-if="val" :form="form" :value="val.Source" @focus="$emit('focus', $event)" @input="val.Source = $event; $emit('input', val)">
     <h-resource-value-simple-input
       v-if="state === 0"
       id="src-name"
@@ -43,6 +43,7 @@
       :placeholder="sourceName + ' account 1'"
       required
       :value="val._comment"
+      @focus="$emit('focus', $event)"
       @input="val._comment = $event;$emit('input', val)"
     />
   </h-custom-form>

htdocs/src/mixins/fieldsDescription.js

@@ -0,0 +1,57 @@
+// Copyright or © or Copr. happyDNS (2020)
+//
+// contact@happydns.org
+//
+// This software is a computer program whose purpose is to provide a modern
+// interface to interact with DNS systems.
+//
+// This software is governed by the CeCILL license under French law and abiding
+// by the rules of distribution of free software.  You can use, modify and/or
+// redistribute the software under the terms of the CeCILL license as
+// circulated by CEA, CNRS and INRIA at the following URL
+// "http://www.cecill.info".
+//
+// As a counterpart to the access to the source code and rights to copy, modify
+// and redistribute granted by the license, users are provided only with a
+// limited warranty and the software's author, the holder of the economic
+// rights, and the successive licensors have only limited liability.
+//
+// In this respect, the user's attention is drawn to the risks associated with
+// loading, using, modifying and/or developing or reproducing the software by
+// the user in light of its specific status of free software, that may mean
+// that it is complicated to manipulate, and that also therefore means that it
+// is reserved for developers and experienced professionals having in-depth
+// computer knowledge. Users are therefore encouraged to load and test the
+// software's suitability as regards their requirements in conditions enabling
+// the security of their systems and/or data to be ensured and, more generally,
+// to use and operate it in the same conditions as regards security.
+//
+// The fact that you are presently reading this means that you have had
+// knowledge of the CeCILL license and that you accept its terms.
+
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters('user', ['user_getSettings'])
+  },
+
+  data () {
+    return {
+      focusedField: null
+    }
+  },
+
+  methods: {
+    focusChanged (curField) {
+      this.focusedField = curField
+      this.$emit('focus')
+    },
+
+    shouldShowDescription (curField) {
+      return (this.showDescription === undefined || this.showDescription) && (
+        this.user_getSettings.fieldhint > 2 || (
+          this.user_getSettings.fieldhint > 1 && this.focusedField === curField))
+    }
+  }
+}