From f8c622ea361e3184f08242bd16659ecb4e6ff8f4 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 26 Jul 2024 16:46:31 -0300
Subject: [PATCH] Adds option to define maxlenght on simple text metadata.

---
 .../metadata-types/text/FormText.vue          | 29 ++++++++++++++++---
 .../metadata-types/text/TainacanText.vue      | 23 ++++++++++++++-
 .../text/class-tainacan-text.php              |  6 +++-
 src/views/admin/scss/_control.scss            |  4 +++
 4 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/src/views/admin/components/metadata-types/text/FormText.vue b/src/views/admin/components/metadata-types/text/FormText.vue
index f0824b4fd..3a1918b68 100644
--- a/src/views/admin/components/metadata-types/text/FormText.vue
+++ b/src/views/admin/components/metadata-types/text/FormText.vue
@@ -1,5 +1,19 @@
 <template>
-    <section> 
+    <section>
+        <b-field :addons="false">
+            <label class="label is-inline">
+                {{ $i18n.getHelperTitle('tainacan-text', 'maxlength') }}
+                <help-button
+                        :title="$i18n.getHelperTitle('tainacan-text', 'maxlength')"
+                        :message="$i18n.getHelperMessage('tainacan-text', 'maxlength')" />
+            </label>
+            <b-numberinput
+                    v-model="maxlength"
+                    name="maxlength"
+                    step="1"
+                    min="0"
+                    @update:model-value="onUpdateMaxlength" />
+        </b-field> 
         <b-field
                 :addons="false"
                 :label="$i18n.getHelperTitle('tainacan-text', 'display_suggestions')">
@@ -39,21 +53,28 @@
         data() {
             return {
                 displaySuggestions: String,
-                mask: String
+                mask: String,
+                maxlength: [Number, null]
             }
         },
         created() {
             this.displaySuggestions = this.value && this.value.display_suggestions ? this.value.display_suggestions : 'no';
             this.mask = this.value && this.value.mask ? this.value.mask : '';
+            this.maxlength = this.value && this.value.maxlength ? Number(this.value.maxlength) : null;
         },
         methods: {
             onUpdateDisplaySuggestions(value) {
                 this.displaySuggestions = value;
-                this.$emit('update:value', { display_suggestions: value, mask: value == 'yes' ? '' : this.mask });
+                this.$emit('update:value', { display_suggestions: value, mask: value == 'yes' ? '' : this.mask, maxlength: this.maxlength });
             },
             onUpdateMask(value) {
                 this.mask = value;
-                this.$emit('update:value', { display_suggestions: this.displaySuggestions, mask: value });
+                this.$emit('update:value', { display_suggestions: this.displaySuggestions, mask: value, maxlength: this.maxlength });
+            },
+            onUpdateMaxlength(value) {
+                if (value == 0) value = null;
+
+                this.$emit('update:value', { maxlength: value, display_suggestions: this.displaySuggestions, mask: this.mask });
             }
         }
     }
diff --git a/src/views/admin/components/metadata-types/text/TainacanText.vue b/src/views/admin/components/metadata-types/text/TainacanText.vue
index 38bf99051..b45b5377c 100644
--- a/src/views/admin/components/metadata-types/text/TainacanText.vue
+++ b/src/views/admin/components/metadata-types/text/TainacanText.vue
@@ -10,10 +10,17 @@
                     :disabled="disabled"
                     :value="value"
                     :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
+                    :maxlength="getMaxlength"
                     @focus="onMobileSpecialFocus"
                     @complete="($event) => getMask ? onInput($event.detail.value) : null"
                     @input="($event) => getMask ? null : onInput($event.target.value)"
                     @blur="onBlur">
+            <small
+                    v-if="getMaxlength"
+                    class="help counter"
+                    :class="{ 'is-invisible': !isInputFocused }" >
+                {{ value.length }} / {{ getMaxlength }}
+            </small>
         </div>
         <b-autocomplete
                 v-else
@@ -26,6 +33,7 @@
                 clearable
                 :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
                 check-infinite-scroll
+                :maxlength="getMaxlength"
                 @blur="onBlur"
                 @update:model-value="($event) => { search($event); }"
                 @select="onSelect"
@@ -81,7 +89,8 @@
                 totalFacets: 0,
                 query: '',
                 currentCollectionId: '',
-                filter: undefined
+                filter: undefined,
+                isInputFocused: false,
             }
         },
         computed: {
@@ -99,6 +108,12 @@
                     };
                 else
                     return false;
+            },
+            getMaxlength() {
+                if ( this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== null && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== undefined && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== '' )
+                    return Number(this.itemMetadatum.metadatum.metadata_type_options.maxlength);
+                else
+                    return undefined;
             }
         },
         created() {
@@ -108,9 +123,14 @@
         },
         methods: {
             onInput(value) {
+                const inputRef = this.$refs['tainacan-item-metadatum_id-' + this.itemMetadatum.metadatum.id + (this.itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + this.itemMetadatum.parent_meta_id) : '')];
+                if ( inputRef && this.getMaxlength && !inputRef.checkHtml5Validity() )
+                    return;
+
                 this.$emit('update:value', value);
             },
             onBlur() {
+                this.isInputFocused = false;
                 this.$emit('blur');
             },
             onSelect(option){
@@ -190,6 +210,7 @@
                 this.search(this.searchQuery);
             }, 250),
             onMobileSpecialFocus() {
+                this.isInputFocused = true;
                 this.$emit('mobile-special-focus');
             }
         }
diff --git a/src/views/admin/components/metadata-types/text/class-tainacan-text.php b/src/views/admin/components/metadata-types/text/class-tainacan-text.php
index 28f4ae23f..12fae33d1 100644
--- a/src/views/admin/components/metadata-types/text/class-tainacan-text.php
+++ b/src/views/admin/components/metadata-types/text/class-tainacan-text.php
@@ -42,7 +42,11 @@ class Text extends Metadata_Type {
 					__( 'Define a pattern of fixed characters that will be used to mask the input. Learn how to build mask patterns <a target="_blank" href="%1$s">here</a>.', 'tainacan' ),
 					'https://imask.js.org/guide.html#masked-pattern'
 				)
-            ]
+			],
+			'maxlength' => [
+				'title' => __( 'Maximum of characters', 'tainacan' ),
+				'description' => __( 'Limits the character input to a maximum value an displays a counter.', 'tainacan' ),
+			]
         ];
     }
 	
diff --git a/src/views/admin/scss/_control.scss b/src/views/admin/scss/_control.scss
index 2bee5b171..1cd1a06aa 100644
--- a/src/views/admin/scss/_control.scss
+++ b/src/views/admin/scss/_control.scss
@@ -10,6 +10,10 @@
     &.has-icons-left {
         .icon {
             height: 100%;
+
+            &:has(+.help) { // Maxlenght count in autocomplete needs this
+                height: 32px;
+            }
             .mdi::before {
                 color: var(--tainacan-info-color);
                 display: inline-block;