fix: improve UX for long-strings translation: autoconvert multiline/single-line input, crop too long strings from table

Author: ivictbor

custom/ListCell.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="text-sm text-gray-900 dark:text-white min-w-32">
+    {{ limitedText }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed  } from 'vue';
+import { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common';
+
+
+const limitedText = computed(() => {
+  const text = props.record[props.column.name];
+  return text?.length > 50 ? text.slice(0, 50) + '...' : text;
+});
+
+const props = defineProps<{
+  column: AdminForthResourceColumnCommon;
+  record: any;
+  meta: any;
+  resource: AdminForthResourceCommon;
+  adminUser: AdminUser;
+}>();
+
+</script>

custom/SingleMultiInput.vue

@@ -0,0 +1,76 @@
+<template>
+  <Input 
+    ref="input"
+    v-if="shortValue"
+    class="w-full"
+    :modelValue="props.record[props.column.name]"
+    :disabled="props.column.editReadonly"
+    @update:modelValue="($event) => emit('update:value', $event)" />
+  <textarea 
+    v-else
+    ref="textarea"
+    :disabled="props.column.editReadonly"
+    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5
+      dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+    :value="props.record[props.column.name]" 
+    @input="($event) => { autoResizeTextArea(); emit('update:value', $event.target.value) }" />
+
+</template>
+
+<script setup lang="ts">
+import { Input } from "@/afcl";
+import type {
+  AdminForthResourceColumnCommon,
+  AdminForthResourceCommon,
+  AdminUser,
+} from "@/types/Common";
+import { computed, defineProps, defineEmits, type Ref, watch, nextTick, ref, onMounted } from "vue";
+
+const shortValue: Ref<boolean> = computed(() => (props.record[props.column.name]?.length || 0) < 50);
+
+const props = defineProps<{
+  column: AdminForthResourceColumnCommon;
+  record: any;
+  meta: any;
+  resource: AdminForthResourceCommon;
+  adminUser: AdminUser;
+}>();
+
+const emit = defineEmits(["update:value"]);
+
+const input: Ref<HTMLInputElement | HTMLTextAreaElement | null> = ref(null);
+const textarea: Ref<HTMLInputElement | HTMLTextAreaElement | null> = ref(null);
+
+// Auto resize function
+const autoResizeTextArea = () => {
+  // Use nextTick to ensure the DOM update is done before measuring
+  nextTick(() => {
+    if (!textarea.value) return
+
+    // Reset the height to shrink if content is removed
+    textarea.value.style.height = 'auto'
+    // Set it to the scrollHeight to make it grow
+    textarea.value.style.height = textarea.value.scrollHeight + 3 + 'px'
+  })
+}
+
+watch(() => shortValue.value, async () => {
+  await nextTick();
+  if (shortValue.value) {
+    input.value?.focus();
+  } else {
+    textarea.value?.focus();
+    await nextTick();
+    autoResizeTextArea();
+  }
+});
+
+
+onMounted(async () => {
+  if (!shortValue.value) {
+    await nextTick();
+    autoResizeTextArea();
+  }
+});
+</script>
+

custom/tsconfig.json

@@ -4,11 +4,11 @@
     "paths": {
       "@/*": [
         // "node_modules/adminforth/dist/spa/src/*"
-        "../../../spa/src/*"
+        "../../../adminforth/spa/src/*"
       ],
       "*": [
         // "node_modules/adminforth/dist/spa/node_modules/*"
-        "../../../spa/node_modules/*"
+        "../../../adminforth/spa/node_modules/*"
       ],
       "@@/*": [
         // "node_modules/adminforth/dist/spa/src/*"

index.ts

@@ -165,6 +165,21 @@ export default class I18nPlugin extends AdminForthPlugin {
         throw new Error(`Field ${this.trFieldNames[lang]} not found for storing translation for language ${lang}
            in resource ${resourceConfig.resourceId}, consider adding it to columns or change trFieldNames option to remap it to existing column`);
       }
+
+      column.components = column.components || {};
+      
+      // set edit and create custom component - SingleMultiInput.vue
+      column.components.edit = {
+        file: this.componentPath('SingleMultiInput.vue'),
+      };
+      column.components.create = {
+        file: this.componentPath('SingleMultiInput.vue'),
+      };
+
+      // set ListCell for list
+      column.components.list = {
+        file: this.componentPath('ListCell.vue'),
+      };
     }
 
     this.enFieldName = this.trFieldNames['en'] || 'en_string';
@@ -186,6 +201,16 @@ export default class I18nPlugin extends AdminForthPlugin {
       throw new Error(`Field ${this.enFieldName} not found column to store english original string in resource ${resourceConfig.resourceId}`);
     }
 
+    enColumn.components = enColumn.components || {};
+    enColumn.components.edit = {
+      file: this.componentPath('SingleMultiInput.vue'),
+    };
+    enColumn.components.create = {
+      file: this.componentPath('SingleMultiInput.vue'),
+    };
+    enColumn.components.list = {
+      file: this.componentPath('ListCell.vue'),
+    };
     enColumn.editReadonly = true;
 
     // if sourceFieldName defined, check it exists