Merge branch 'redmine-issue/13748' into 'develop'

REDMINE_ISSUE-13748 | Nombre de caractère dans le nom du signalement

See merge request !380

src/assets/styles/base.css

@@ -162,6 +162,12 @@ body {
   color: #9f3a38;
 }
 
+#form-layers .infoslist{
+  list-style: none;
+  padding-left: 0;
+  color: #38989f;
+}
+
 /* Fix semantic ui overflow when is too long */
 .layer-item .form div.text {
   width: 100%
@@ -224,13 +230,26 @@ body {
   padding: 0;
 }
 
+.infoslist {
+  margin-top: 0.1rem;
+  padding: 0;
+}
+
 .errorlist > li {
   list-style: none;
   color: rgb(177, 55, 55);
   border:  thin solid rgb(197, 157, 157);
   border-radius: 3px;
   background-color: rgb(250, 241, 242);
-  padding: 1rem;
+  padding: 0.5rem 1rem;
+}
+
+.infoslist > li {
+  list-style: none;
+  color: #38989f;
+  border-radius: 3px;
+  padding: 0;
+  text-align: right;
 }
 
 /* ---------------------------------- */

src/views/Feature/FeatureEdit.vue

@@ -32,6 +32,17 @@
             :name="form.title.html_name"
             @blur="updateStore"
           >
+          <ul
+            id="infoslist-title"
+            class="infoslist"
+          >
+            <li
+              v-for="info in form.title.infos"
+              :key="info"
+            >
+              {{ info }}
+            </li>
+          </ul>
           <ul
             id="errorlist-title"
             class="errorlist"
@@ -379,6 +390,7 @@ export default {
       form: {
         title: {
           errors: [],
+          infos: [],
           id_for_label: 'name',
           field: {
             max_length: 128,
@@ -491,6 +503,16 @@ export default {
     },
   },
 
+  watch: {
+    'form.title.value': function(newValue) {
+      if (newValue.length === 128) {
+        this.form.title.infos.push('Le nombre de caractères et limité à 128.');
+      } else {
+        this.form.title.infos = [];
+      }
+    }
+  },
+
   created() {
     this.$store.commit(
       'feature-type/SET_CURRENT_FEATURE_TYPE_SLUG',