@adminforth/i18n 1.3.3 → 1.3.4

package/build.log

@@ -11,10 +11,11 @@ custom/ListCell.vue
 custom/SingleMultiInput.vue
 custom/datepickerLocales.ts
 custom/dayjsLocales.ts
+custom/eventBus.ts
 custom/langCommon.ts
 custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
 
-sent 31,064 bytes  received 229 bytes  62,586.00 bytes/sec
-total size is 30,197  speedup is 0.96
+sent 32,174 bytes  received 248 bytes  64,844.00 bytes/sec
+total size is 31,254  speedup is 0.96

package/custom/ListCell.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative group flex items-center">
+  <div class="relative group flex items-center" ref="listCell">
     <!-- Normal value display -->
     <div v-if="column.editReadonly" class="flex items-center" :class="limitedText?.length > 50 ? 'min-w-48 max-w-full' : 'min-w-32'">
       {{ limitedText? limitedText : '-' }}
@@ -36,7 +36,7 @@
     </div>
 
     <!-- Edit mode -->
-     <div v-else class="flex flex-col gap-2" @click.stop>
+     <div v-else class="flex flex-col gap-2 trans-editor" @click.stop>
       <div class="flex items-center max-w-full gap-2"
         :class="limitedText?.length > 50 ? 'min-w-72' : 'min-w-64'"
         ref="inputHolder"
@@ -86,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, computed, nextTick } from 'vue';
+import { ref, Ref, computed, nextTick, onMounted } from 'vue';
 import { IconPenSolid, IconCheckOutline, IconXOutline, IconQuestionCircleSolid } from '@iconify-prerendered/vue-flowbite';
 import { callAdminForthApi } from '@/utils';
 import { showErrorTost, showSuccesTost } from '@/composables/useFrontendApi';
@@ -94,7 +94,9 @@ import ColumnValueInputWrapper from '@/components/ColumnValueInputWrapper.vue';
 import { useI18n } from 'vue-i18n';
 import Tooltip from '@/afcl/Tooltip.vue';
 import Checkbox from '@/afcl/Checkbox.vue';
+import { eventBus } from './eventBus'
 
+const listCell = ref(null);
 const { t } = useI18n();
 const props = defineProps(['column', 'record', 'resource', 'adminUser', 'meta']);
 const isEditing = ref(false);
@@ -109,11 +111,23 @@ const unmasked = ref({});
 const inputHolder = ref(null);
 
 const limitedText = computed(() => {
+  if (props.column.name == props.meta?.enFieldName && anyEditorOpen.value) {
+    return props.record[props.column.name]; // keep english text 
+  }
   const text = props.record[props.column.name];
   return text?.length > 50 ? text.slice(0, 50) + '...' : text;
 });
 
 const reviewed: Ref<boolean> = ref(false);
+const anyEditorOpen = ref(false);  // if any editor for lang page is open
+
+onMounted(() => {
+  eventBus.on(`editing-changed-${props.record.id}`, async () => {
+    console.log('editing-changed', props.record.id);
+    await nextTick();
+    anyEditorOpen.value = listCell.value?.closest('tr')?.querySelector('.trans-editor') !== null;
+  });
+});
 
 
 const originalReviewed = ref(false);
@@ -134,11 +148,14 @@ async function startEdit() {
   if (inputHolder.value) {
     inputHolder.value.querySelector('input, textarea, select')?.focus();
   }
+  eventBus.emit(`editing-changed-${props.record.id}`, null);
 }
 
 function cancelEdit() {
   isEditing.value = false;
   editValue.value = null;
+  eventBus.emit(`editing-changed-${props.record.id}`, null);
+
 }
 
 function setCurrentValue(field, value, arrayIndex = undefined) {
@@ -170,6 +187,8 @@ function setCurrentValue(field, value, arrayIndex = undefined) {
     currentValues.value[field] = value;
     editValue.value = value;
   }
+  eventBus.emit(`editing-changed-${props.record.id}`, null);
+
 }
 
 async function saveEdit() {

package/custom/eventBus.ts

@@ -0,0 +1,12 @@
+const handlers = {}
+export const eventBus = {
+  on(event, fn) {
+    (handlers[event] ||= []).push(fn)
+  },
+  off(event, fn) {
+    handlers[event] = (handlers[event] || []).filter(f => f !== fn)
+  },
+  emit(event, data) {
+    (handlers[event] || []).forEach(fn => fn(data))
+  }
+}

package/dist/custom/ListCell.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative group flex items-center">
+  <div class="relative group flex items-center" ref="listCell">
     <!-- Normal value display -->
     <div v-if="column.editReadonly" class="flex items-center" :class="limitedText?.length > 50 ? 'min-w-48 max-w-full' : 'min-w-32'">
       {{ limitedText? limitedText : '-' }}
@@ -36,7 +36,7 @@
     </div>
 
     <!-- Edit mode -->
-     <div v-else class="flex flex-col gap-2" @click.stop>
+     <div v-else class="flex flex-col gap-2 trans-editor" @click.stop>
       <div class="flex items-center max-w-full gap-2"
         :class="limitedText?.length > 50 ? 'min-w-72' : 'min-w-64'"
         ref="inputHolder"
@@ -86,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, computed, nextTick } from 'vue';
+import { ref, Ref, computed, nextTick, onMounted } from 'vue';
 import { IconPenSolid, IconCheckOutline, IconXOutline, IconQuestionCircleSolid } from '@iconify-prerendered/vue-flowbite';
 import { callAdminForthApi } from '@/utils';
 import { showErrorTost, showSuccesTost } from '@/composables/useFrontendApi';
@@ -94,7 +94,9 @@ import ColumnValueInputWrapper from '@/components/ColumnValueInputWrapper.vue';
 import { useI18n } from 'vue-i18n';
 import Tooltip from '@/afcl/Tooltip.vue';
 import Checkbox from '@/afcl/Checkbox.vue';
+import { eventBus } from './eventBus'
 
+const listCell = ref(null);
 const { t } = useI18n();
 const props = defineProps(['column', 'record', 'resource', 'adminUser', 'meta']);
 const isEditing = ref(false);
@@ -109,11 +111,23 @@ const unmasked = ref({});
 const inputHolder = ref(null);
 
 const limitedText = computed(() => {
+  if (props.column.name == props.meta?.enFieldName && anyEditorOpen.value) {
+    return props.record[props.column.name]; // keep english text 
+  }
   const text = props.record[props.column.name];
   return text?.length > 50 ? text.slice(0, 50) + '...' : text;
 });
 
 const reviewed: Ref<boolean> = ref(false);
+const anyEditorOpen = ref(false);  // if any editor for lang page is open
+
+onMounted(() => {
+  eventBus.on(`editing-changed-${props.record.id}`, async () => {
+    console.log('editing-changed', props.record.id);
+    await nextTick();
+    anyEditorOpen.value = listCell.value?.closest('tr')?.querySelector('.trans-editor') !== null;
+  });
+});
 
 
 const originalReviewed = ref(false);
@@ -134,11 +148,14 @@ async function startEdit() {
   if (inputHolder.value) {
     inputHolder.value.querySelector('input, textarea, select')?.focus();
   }
+  eventBus.emit(`editing-changed-${props.record.id}`, null);
 }
 
 function cancelEdit() {
   isEditing.value = false;
   editValue.value = null;
+  eventBus.emit(`editing-changed-${props.record.id}`, null);
+
 }
 
 function setCurrentValue(field, value, arrayIndex = undefined) {
@@ -170,6 +187,8 @@ function setCurrentValue(field, value, arrayIndex = undefined) {
     currentValues.value[field] = value;
     editValue.value = value;
   }
+  eventBus.emit(`editing-changed-${props.record.id}`, null);
+
 }
 
 async function saveEdit() {

package/dist/custom/eventBus.ts

@@ -0,0 +1,12 @@
+const handlers = {}
+export const eventBus = {
+  on(event, fn) {
+    (handlers[event] ||= []).push(fn)
+  },
+  off(event, fn) {
+    handlers[event] = (handlers[event] || []).filter(f => f !== fn)
+  },
+  emit(event, data) {
+    (handlers[event] || []).forEach(fn => fn(data))
+  }
+}

package/dist/index.js

@@ -166,6 +166,7 @@ export default class I18nPlugin extends AdminForthPlugin {
                         pluginInstanceId: this.pluginInstanceId,
                         lang,
                         reviewedCheckboxesFieldName: this.options.reviewedCheckboxesFieldName,
+                        enFieldName: this.enFieldName,
                     },
                 };
             }
@@ -194,6 +195,9 @@ export default class I18nPlugin extends AdminForthPlugin {
             };
             enColumn.components.list = {
                 file: this.componentPath('ListCell.vue'),
+                meta: {
+                    enFieldName: this.enFieldName,
+                }
             };
             enColumn.editReadonly = true;
             // if sourceFieldName defined, check it exists

package/index.ts

@@ -188,6 +188,7 @@ export default class I18nPlugin extends AdminForthPlugin {
           pluginInstanceId: this.pluginInstanceId,
           lang,
           reviewedCheckboxesFieldName: this.options.reviewedCheckboxesFieldName,
+          enFieldName: this.enFieldName,
         },
       };
     }
@@ -220,6 +221,9 @@ export default class I18nPlugin extends AdminForthPlugin {
     };
     enColumn.components.list = {
       file: this.componentPath('ListCell.vue'),
+      meta: {
+        enFieldName: this.enFieldName,
+      }
     };
     enColumn.editReadonly = true;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/i18n",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",