Merge pull request #8945 from aignatov-bio/ai-sci-12437-imporve-tags-manage-microinteractions

Improve tags manage mictointeractions [SCI-12437]

app/javascript/vue/shared/tags_input.vue

@@ -31,7 +31,7 @@
       <template v-slot:flyout>
         <div class="flex flex-col">
           <div class="max-h-[40vh] overflow-auto">
-            <div v-if="validTagName && canCreate" @click="createTag" class="py-2 cursor-pointer hover:bg-sn-super-light-grey px-3 flex items-center gap-2">
+            <div v-if="validTagName && canCreate" @click="createTag" class="btn btn-light btn-black w-32">
               <i class="sn-icon sn-icon-new-task"></i>
               {{ i18n.t('tags.tags_input.create_tag') }}
             </div>

app/javascript/vue/tags/index.vue

@@ -10,7 +10,7 @@
                :addingNewRow="addingNewRow"
                @tableReloaded="reloadingTable = false"
                @startCreate="addingNewRow = true"
-               @cancelCreation="addingNewRow = false;"
+               @cancelCreation="cancelCreation"
                @changeColor="changeColor"
                @changeName="changeName"
                @createRow="createTag"
@@ -164,6 +164,9 @@ export default {
     openMergeModal(event, rows) {
       this.mergeIds = rows.map(row => row.id);
     },
+    cancelCreation() {
+      this.addingNewRow = false;
+    },
     createTag(newTag) {
       this.addingNewRow = false;
       axios.post(this.createUrl, {

app/javascript/vue/tags/renderers/name.vue

@@ -1,15 +1,20 @@
 <template>
-  <div class="w-full h-10 flex flex-col justify-center">
+  <div ref="inputContainer" class="w-full h-10 flex flex-col justify-center">
     <div v-if="!editing && this.params.data.name.length > 0" class="ml-[3px]" @click="startEditing">{{ tagName }}</div>
-    <input v-else
-      ref="nameInput"
-      class="sci-table-input"
-      :class="{ 'error': error }"
-      @keydown.enter="saveName($event, true);"
-      v-model="tagName"
-      @blur="saveName"
-      @change="saveName" />
-    <div v-if="error" class="text-xs text-sn-alert-passion">{{ error }}</div>
+    <template v-else>
+      <input
+        type="text"
+        ref="nameInput"
+        class="sci-table-input"
+        :class="{ 'error': error }"
+        @keydown.enter="saveName"
+        @keydown.escape="cancelEditing"
+        @keydown="handleKeydown"
+        v-model="tagName"
+        @blur="saveName"
+        @change="saveName" />
+      <div v-if="error" class="text-xs text-sn-alert-passion">{{ error }}</div>
+    </template>
   </div>
 </template>
 
@@ -23,7 +28,7 @@ export default {
   },
   computed: {
     isValid() {
-      return this.tagName.length >= GLOBAL_CONSTANTS.NAME_MIN_LENGTH;
+      return this.tagName.length >= GLOBAL_CONSTANTS.NAME_MIN_LENGTH && this.tagName.length <= GLOBAL_CONSTANTS.NAME_MAX_LENGTH;
     }
   },
   data() {
@@ -41,6 +46,13 @@ export default {
       }
     }
   },
+  mounted() {
+    if (this.$refs.nameInput) {
+      this.$nextTick(() => {
+        this.$refs.nameInput.focus();
+      });
+    }
+  },
   methods: {
     startEditing() {
       this.editing = true;
@@ -48,9 +60,35 @@ export default {
         this.$refs.nameInput.focus();
       });
     },
-    saveName(e, withSave = false) {
+    cancelEditing() {
+      this.editing = false;
+      this.tagName = this.params.data.name;
+      this.error = null;
+      this.params.dtComponent.cancelCreation();
+    },
+    handleKeydown(event) {
+      // Prevent arrow keys from moving the table selection
+      if (event.key === 'ArrowLeft') {
+        event.stopPropagation();
+        this.$refs.nameInput.selectionStart -= 1;
+      } else if (event.key === 'ArrowRight') {
+        event.stopPropagation();
+        this.$refs.nameInput.selectionEnd += 1;
+      } else if (event.key === 'Home') {
+        event.stopPropagation();
+        this.$refs.nameInput.selectionStart = 0;
+      } else if (event.key === 'End') {
+        event.stopPropagation();
+        this.$refs.nameInput.selectionEnd = this.tagName.length;
+      }
+    },
+    saveName() {
       if (!this.isValid) {
-        this.error = this.i18n.t('tags.index.too_short_name', { count: GLOBAL_CONSTANTS.NAME_MIN_LENGTH });
+        if (this.tagName.length < GLOBAL_CONSTANTS.NAME_MIN_LENGTH) {
+          this.error = this.i18n.t('tags.index.too_short_name', { count: GLOBAL_CONSTANTS.NAME_MIN_LENGTH });
+        } else if (this.tagName.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH) {
+          this.error = this.i18n.t('tags.index.too_long_name', { count: GLOBAL_CONSTANTS.NAME_MAX_LENGTH });
+        }
         this.params.dtComponent.setTemplateValue(this.tagName, 'name', this.isValid);
         return;
       } else {
@@ -69,8 +107,7 @@ export default {
         this.params.dtComponent.$emit('changeName', this.tagName, this.params.data);
       } else {
         this.params.dtComponent.setTemplateValue(this.tagName, 'name', this.isValid);
-
-        if (withSave) this.params.dtComponent.createRow();
+        this.params.dtComponent.createRow();
       }
     }
   }

config/locales/en.yml

@@ -4245,6 +4245,7 @@ en:
       created_on: "Created on"
       updated_on: "Updated on"
       too_short_name: "too short (minimum is %{count} characters)"
+      too_long_name: "too long (maximum is %{count} characters)"
       toolbar:
         delete: "Delete"
         merge: "Merge into"