@adminforth/i18n 1.2.4 → 1.3.0

package/build.log

@@ -16,5 +16,5 @@ custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
 
-sent 24,836 bytes  received 229 bytes  50,130.00 bytes/sec
-total size is 23,969  speedup is 0.96
+sent 30,826 bytes  received 229 bytes  62,110.00 bytes/sec
+total size is 29,971  speedup is 0.97

package/custom/ListCell.vue

@@ -1,25 +1,200 @@
 <template>
-  <div class="text-sm text-gray-900 dark:text-white min-w-32">
-    {{ limitedText }}
+  <div class="relative group flex items-center" @click.stop>
+    <!-- Normal value display -->
+    <div v-if="!isEditing" class="flex items-center" :class="limitedText?.length > 50 ? 'min-w-48 max-w-full' : 'min-w-32'">
+      {{ limitedText? limitedText : '-' }}
+
+      <span v-if="meta?.reviewedCheckboxesFieldName && limitedText" class="flex items-center ml-2">
+        <Tooltip
+        >
+          <template #tooltip>
+              {{ record[meta?.reviewedCheckboxesFieldName]?.[props.column.name] ? t('Translation is reviewed') : t('Translation is not reviewed') }}
+          </template> 
+          <IconCheckOutline 
+            v-if="record[meta?.reviewedCheckboxesFieldName]?.[props.column.name]"
+            class="w-5 h-5 text-green-500"
+          />
+          <IconQuestionCircleSolid 
+            v-else
+            class="w-5 h-5 text-yellow-500"
+          />
+        </Tooltip>
+      </span>
+
+      <button 
+        v-if="!column.editReadonly"
+        @click="startEdit"
+        class="ml-2 opacity-0 group-hover:opacity-100 transition-opacity"
+      >
+        <IconPenSolid class="w-5 h-5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"/>
+      </button>
+    </div>
+
+    <!-- Edit mode -->
+     <div v-else class="flex flex-col gap-2">
+      <div class="flex items-center max-w-full gap-2"
+        :class="limitedText?.length > 50 ? 'min-w-72' : 'min-w-64'"
+        ref="inputHolder"
+      >
+        <ColumnValueInputWrapper
+          class="flex-grow"
+          ref="input"
+          :source="'edit'"
+          :column="column"
+          :currentValues="currentValues"
+          :mode="mode"
+          :columnOptions="columnOptions"
+          :unmasked="unmasked"
+          :setCurrentValue="setCurrentValue"
+        />
+        <div class="flex gap-1">
+          <button 
+            @click="saveEdit"
+            :disabled="saving || (originalReviewed === reviewed && originalValue === currentValues[props.column.name])"
+            class="text-green-600 hover:text-green-700 dark:text-green-500 dark:hover:text-green-400 disabled:opacity-50"
+            
+          >
+            <IconCheckOutline class="w-5 h-5" />
+          </button>
+          <button 
+            @click="cancelEdit"
+            :disabled="saving"
+            class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-400"
+          >
+            <IconXOutline class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+      <div v-if="meta?.reviewedCheckboxesFieldName">
+        <label class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-0 cursor-pointer select-none">
+          <Checkbox
+            v-model="reviewed"
+            :disabled="saving"
+          /> 
+          {{ t('Translation is reviewed') }}
+        </label>
+        
+      </div>
+    </div>
+    
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed  } from 'vue';
-import { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common';
+import { ref, Ref, computed, nextTick } from 'vue';
+import { IconPenSolid, IconCheckOutline, IconXOutline, IconQuestionCircleSolid } from '@iconify-prerendered/vue-flowbite';
+import { callAdminForthApi } from '@/utils';
+import { showErrorTost, showSuccesTost } from '@/composables/useFrontendApi';
+import ColumnValueInputWrapper from '@/components/ColumnValueInputWrapper.vue';
+import { useI18n } from 'vue-i18n';
+import Tooltip from '@/afcl/Tooltip.vue';
+import Checkbox from '@/afcl/Checkbox.vue';
 
+const { t } = useI18n();
+const props = defineProps(['column', 'record', 'resource', 'adminUser', 'meta']);
+const isEditing = ref(false);
+const editValue = ref(null);
+const saving = ref(false);
+const input = ref(null);
+const columnOptions = ref({});
+const mode = ref('edit');
+const currentValues = ref({});
+const unmasked = ref({});
+
+const inputHolder = ref(null);
 
 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;
-}>();
+const reviewed: Ref<boolean> = ref(false);
+
+
+const originalReviewed = ref(false);
+const originalValue = ref(null);
+
+async function startEdit() {
+  const value = props.record[props.column.name];
+  currentValues.value = {
+    [props.column.name]: props.column.isArray?.enabled 
+      ? (Array.isArray(value) ? value : [value]).filter(v => v !== null && v !== undefined)
+      : value,
+  };
+  reviewed.value = props.record[props.meta?.reviewedCheckboxesFieldName]?.[props.column.name] || false;
+  originalReviewed.value = reviewed.value;
+  originalValue.value = value;
+  isEditing.value = true;
+  await nextTick();
+  if (inputHolder.value) {
+    inputHolder.value.querySelector('input, textarea, select')?.focus();
+  }
+}
+
+function cancelEdit() {
+  isEditing.value = false;
+  editValue.value = null;
+}
+
+function setCurrentValue(field, value, arrayIndex = undefined) {
+  if (arrayIndex !== undefined && props.column.isArray?.enabled) {
+    // Handle array updates
+    if (!Array.isArray(currentValues.value[field])) {
+      currentValues.value[field] = [];
+    }
+    
+    const newArray = [...currentValues.value[field]];
+    
+    if (arrayIndex >= newArray.length) {
+      // When adding a new item, always add null
+      newArray.push(null);
+    } else {
+      // For existing items, handle type conversion
+      if (props.column.isArray?.itemType && ['integer', 'float', 'decimal'].includes(props.column.isArray.itemType)) {
+        newArray[arrayIndex] = value !== null && value !== '' ? +value : null;
+      } else {
+        newArray[arrayIndex] = value;
+      }
+    }
+    
+    // Assign the new array
+    currentValues.value[field] = newArray;
+    editValue.value = newArray;
+  } else {
+    // Handle non-array updates
+    currentValues.value[field] = value;
+    editValue.value = value;
+  }
+}
+
+async function saveEdit() {
+  saving.value = true;
+  try {
+    const result = await callAdminForthApi({
+      method: 'POST',
+      path: `/plugin/${props.meta.pluginInstanceId}/update-field`,
+      body: {
+        resourceId: props.resource.resourceId,
+        recordId: props.record._primaryKeyValue,
+        field: props.column.name,
+        value: currentValues.value[props.column.name],
+        reviewed: reviewed.value,
+      }
+    });
+
+    if (result.error) {
+      showErrorTost(result.error);
+      return;
+    }
 
-</script>
+    showSuccesTost(t('Field updated successfully'));
+    props.record[props.column.name] = result.record[props.column.name];
+    if (props.meta?.reviewedCheckboxesFieldName) {
+      props.record[props.meta?.reviewedCheckboxesFieldName] = result.record[props.meta?.reviewedCheckboxesFieldName];
+    }
+    isEditing.value = false;
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/dist/custom/ListCell.vue

@@ -1,25 +1,200 @@
 <template>
-  <div class="text-sm text-gray-900 dark:text-white min-w-32">
-    {{ limitedText }}
+  <div class="relative group flex items-center" @click.stop>
+    <!-- Normal value display -->
+    <div v-if="!isEditing" class="flex items-center" :class="limitedText?.length > 50 ? 'min-w-48 max-w-full' : 'min-w-32'">
+      {{ limitedText? limitedText : '-' }}
+
+      <span v-if="meta?.reviewedCheckboxesFieldName && limitedText" class="flex items-center ml-2">
+        <Tooltip
+        >
+          <template #tooltip>
+              {{ record[meta?.reviewedCheckboxesFieldName]?.[props.column.name] ? t('Translation is reviewed') : t('Translation is not reviewed') }}
+          </template> 
+          <IconCheckOutline 
+            v-if="record[meta?.reviewedCheckboxesFieldName]?.[props.column.name]"
+            class="w-5 h-5 text-green-500"
+          />
+          <IconQuestionCircleSolid 
+            v-else
+            class="w-5 h-5 text-yellow-500"
+          />
+        </Tooltip>
+      </span>
+
+      <button 
+        v-if="!column.editReadonly"
+        @click="startEdit"
+        class="ml-2 opacity-0 group-hover:opacity-100 transition-opacity"
+      >
+        <IconPenSolid class="w-5 h-5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"/>
+      </button>
+    </div>
+
+    <!-- Edit mode -->
+     <div v-else class="flex flex-col gap-2">
+      <div class="flex items-center max-w-full gap-2"
+        :class="limitedText?.length > 50 ? 'min-w-72' : 'min-w-64'"
+        ref="inputHolder"
+      >
+        <ColumnValueInputWrapper
+          class="flex-grow"
+          ref="input"
+          :source="'edit'"
+          :column="column"
+          :currentValues="currentValues"
+          :mode="mode"
+          :columnOptions="columnOptions"
+          :unmasked="unmasked"
+          :setCurrentValue="setCurrentValue"
+        />
+        <div class="flex gap-1">
+          <button 
+            @click="saveEdit"
+            :disabled="saving || (originalReviewed === reviewed && originalValue === currentValues[props.column.name])"
+            class="text-green-600 hover:text-green-700 dark:text-green-500 dark:hover:text-green-400 disabled:opacity-50"
+            
+          >
+            <IconCheckOutline class="w-5 h-5" />
+          </button>
+          <button 
+            @click="cancelEdit"
+            :disabled="saving"
+            class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-400"
+          >
+            <IconXOutline class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+      <div v-if="meta?.reviewedCheckboxesFieldName">
+        <label class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-0 cursor-pointer select-none">
+          <Checkbox
+            v-model="reviewed"
+            :disabled="saving"
+          /> 
+          {{ t('Translation is reviewed') }}
+        </label>
+        
+      </div>
+    </div>
+    
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed  } from 'vue';
-import { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common';
+import { ref, Ref, computed, nextTick } from 'vue';
+import { IconPenSolid, IconCheckOutline, IconXOutline, IconQuestionCircleSolid } from '@iconify-prerendered/vue-flowbite';
+import { callAdminForthApi } from '@/utils';
+import { showErrorTost, showSuccesTost } from '@/composables/useFrontendApi';
+import ColumnValueInputWrapper from '@/components/ColumnValueInputWrapper.vue';
+import { useI18n } from 'vue-i18n';
+import Tooltip from '@/afcl/Tooltip.vue';
+import Checkbox from '@/afcl/Checkbox.vue';
 
+const { t } = useI18n();
+const props = defineProps(['column', 'record', 'resource', 'adminUser', 'meta']);
+const isEditing = ref(false);
+const editValue = ref(null);
+const saving = ref(false);
+const input = ref(null);
+const columnOptions = ref({});
+const mode = ref('edit');
+const currentValues = ref({});
+const unmasked = ref({});
+
+const inputHolder = ref(null);
 
 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;
-}>();
+const reviewed: Ref<boolean> = ref(false);
+
+
+const originalReviewed = ref(false);
+const originalValue = ref(null);
+
+async function startEdit() {
+  const value = props.record[props.column.name];
+  currentValues.value = {
+    [props.column.name]: props.column.isArray?.enabled 
+      ? (Array.isArray(value) ? value : [value]).filter(v => v !== null && v !== undefined)
+      : value,
+  };
+  reviewed.value = props.record[props.meta?.reviewedCheckboxesFieldName]?.[props.column.name] || false;
+  originalReviewed.value = reviewed.value;
+  originalValue.value = value;
+  isEditing.value = true;
+  await nextTick();
+  if (inputHolder.value) {
+    inputHolder.value.querySelector('input, textarea, select')?.focus();
+  }
+}
+
+function cancelEdit() {
+  isEditing.value = false;
+  editValue.value = null;
+}
+
+function setCurrentValue(field, value, arrayIndex = undefined) {
+  if (arrayIndex !== undefined && props.column.isArray?.enabled) {
+    // Handle array updates
+    if (!Array.isArray(currentValues.value[field])) {
+      currentValues.value[field] = [];
+    }
+    
+    const newArray = [...currentValues.value[field]];
+    
+    if (arrayIndex >= newArray.length) {
+      // When adding a new item, always add null
+      newArray.push(null);
+    } else {
+      // For existing items, handle type conversion
+      if (props.column.isArray?.itemType && ['integer', 'float', 'decimal'].includes(props.column.isArray.itemType)) {
+        newArray[arrayIndex] = value !== null && value !== '' ? +value : null;
+      } else {
+        newArray[arrayIndex] = value;
+      }
+    }
+    
+    // Assign the new array
+    currentValues.value[field] = newArray;
+    editValue.value = newArray;
+  } else {
+    // Handle non-array updates
+    currentValues.value[field] = value;
+    editValue.value = value;
+  }
+}
+
+async function saveEdit() {
+  saving.value = true;
+  try {
+    const result = await callAdminForthApi({
+      method: 'POST',
+      path: `/plugin/${props.meta.pluginInstanceId}/update-field`,
+      body: {
+        resourceId: props.resource.resourceId,
+        recordId: props.record._primaryKeyValue,
+        field: props.column.name,
+        value: currentValues.value[props.column.name],
+        reviewed: reviewed.value,
+      }
+    });
+
+    if (result.error) {
+      showErrorTost(result.error);
+      return;
+    }
 
-</script>
+    showSuccesTost(t('Field updated successfully'));
+    props.record[props.column.name] = result.record[props.column.name];
+    if (props.meta?.reviewedCheckboxesFieldName) {
+      props.record[props.meta?.reviewedCheckboxesFieldName] = result.record[props.meta?.reviewedCheckboxesFieldName];
+    }
+    isEditing.value = false;
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/dist/index.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { AdminForthPlugin, Filters, suggestIfTypo, AdminForthDataTypes } from "adminforth";
+import { AdminForthPlugin, Filters, suggestIfTypo, AdminForthDataTypes, RAMLock } from "adminforth";
 import iso6391 from 'iso-639-1';
 import path from 'path';
 import fs from 'fs-extra';
@@ -162,6 +162,11 @@ export default class I18nPlugin extends AdminForthPlugin {
                 // set ListCell for list
                 column.components.list = {
                     file: this.componentPath('ListCell.vue'),
+                    meta: {
+                        pluginInstanceId: this.pluginInstanceId,
+                        lang,
+                        reviewedCheckboxesFieldName: this.options.reviewedCheckboxesFieldName,
+                    },
                 };
             }
             this.enFieldName = this.trFieldNames['en'] || 'en_string';
@@ -616,6 +621,17 @@ ${JSON.stringify(strings.reduce((acc, s) => {
                 throw new Error(`Field ${this.trFieldNames[lang]} should be not required in resource ${resourceConfig.resourceId}`);
             }
         }
+        if (this.options.reviewedCheckboxesFieldName) {
+            // ensure type is JSON
+            const column = resourceConfig.columns.find(c => c.name === this.options.reviewedCheckboxesFieldName);
+            if (!column) {
+                const similar = suggestIfTypo(resourceConfig.columns.map((col) => col.name), this.options.reviewedCheckboxesFieldName);
+                throw new Error(`Field ${this.options.reviewedCheckboxesFieldName} not found in resource ${resourceConfig.resourceId}${similar ? `Did you mean '${similar}'?` : ''}`);
+            }
+            if (column.type !== AdminForthDataTypes.JSON) {
+                throw new Error(`Field ${this.options.reviewedCheckboxesFieldName} should be of type JSON in resource ${resourceConfig.resourceId}, but it is ${column.type}`);
+            }
+        }
         // ensure categoryFieldName defined and is string
         if (!this.options.categoryFieldName) {
             throw new Error(`categoryFieldName option is not defined. It is used to categorize translations and return only specific category e.g. to frontend`);
@@ -797,5 +813,47 @@ ${JSON.stringify(strings.reduce((acc, s) => {
                 return translations;
             })
         });
+        const lock = new RAMLock();
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/update-field`,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser, headers }) {
+                const { resourceId, recordId, field, value, reviewed } = body;
+                const resource = this.adminforth.config.resources.find(r => r.resourceId === resourceId);
+                // Create update object with just the single field
+                const updateRecord = { [field]: value };
+                // Use AdminForth's built-in update method
+                const connector = this.adminforth.connectors[resource.dataSource];
+                let oldRecord;
+                let result;
+                yield lock.run(`edit-trans-${recordId}`, () => __awaiter(this, void 0, void 0, function* () {
+                    // put into lock so 2 editors will not update the same record at the same time
+                    oldRecord = yield connector.getRecordByPrimaryKey(resource, recordId);
+                    if (this.options.reviewedCheckboxesFieldName) {
+                        let oldValue;
+                        if (!oldRecord[this.options.reviewedCheckboxesFieldName]) {
+                            oldValue = {};
+                        }
+                        else {
+                            oldValue = Object.assign({}, oldRecord[this.options.reviewedCheckboxesFieldName]);
+                        }
+                        oldValue[field] = reviewed;
+                        updateRecord[this.options.reviewedCheckboxesFieldName] = Object.assign({}, oldValue);
+                    }
+                    result = yield this.adminforth.updateResourceRecord({
+                        resource,
+                        recordId,
+                        record: updateRecord,
+                        oldRecord,
+                        adminUser
+                    });
+                }));
+                if (result.error) {
+                    return { error: result.error };
+                }
+                const updatedRecord = yield connector.getRecordByPrimaryKey(resource, recordId);
+                return { record: updatedRecord };
+            })
+        });
     }
 }

package/index.ts

@@ -1,4 +1,4 @@
-import AdminForth, { AdminForthPlugin, Filters, suggestIfTypo, AdminForthDataTypes } from "adminforth";
+import AdminForth, { AdminForthPlugin, Filters, suggestIfTypo, AdminForthDataTypes, RAMLock } from "adminforth";
 import type { IAdminForth, IHttpServer, AdminForthComponentDeclaration, AdminForthResourceColumn, AdminForthResource, BeforeLoginConfirmationFunction, AdminForthConfigMenuItem } from "adminforth";
 import type { PluginOptions } from './types.js';
 import iso6391, { LanguageCode } from 'iso-639-1';
@@ -6,6 +6,8 @@ import path from 'path';
 import fs from 'fs-extra';
 import chokidar from 'chokidar';
 import  { AsyncQueue } from '@sapphire/async-queue';
+
+
 console.log = (...args) => {
   process.stdout.write(args.join(" ") + "\n");
 };
@@ -182,6 +184,11 @@ export default class I18nPlugin extends AdminForthPlugin {
       // set ListCell for list
       column.components.list = {
         file: this.componentPath('ListCell.vue'),
+        meta: {
+          pluginInstanceId: this.pluginInstanceId,
+          lang,
+          reviewedCheckboxesFieldName: this.options.reviewedCheckboxesFieldName,
+        },
       };
     }
 
@@ -732,6 +739,19 @@ JSON.stringify(strings.reduce((acc: object, s: { en_string: string }): object =>
       }
     }
 
+    if (this.options.reviewedCheckboxesFieldName) {
+      // ensure type is JSON
+      const column = resourceConfig.columns.find(c => c.name === this.options.reviewedCheckboxesFieldName);
+      if (!column) {
+        const similar = suggestIfTypo(resourceConfig.columns.map((col) => col.name), this.options.reviewedCheckboxesFieldName);
+        throw new Error(`Field ${this.options.reviewedCheckboxesFieldName} not found in resource ${resourceConfig.resourceId}${similar ? `Did you mean '${similar}'?` : ''}`);
+      }
+      if (column.type !== AdminForthDataTypes.JSON) {
+        throw new Error(`Field ${this.options.reviewedCheckboxesFieldName} should be of type JSON in resource ${resourceConfig.resourceId}, but it is ${column.type}`);
+      }
+    }
+
+
     // ensure categoryFieldName defined and is string
     if (!this.options.categoryFieldName) {
       throw new Error(`categoryFieldName option is not defined. It is used to categorize translations and return only specific category e.g. to frontend`);
@@ -940,6 +960,57 @@ JSON.stringify(strings.reduce((acc: object, s: { en_string: string }): object =>
       }
     });
 
+    const lock = new RAMLock();
+
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/update-field`,
+      handler: async ({ body, adminUser, headers }) => {
+        const { resourceId, recordId, field, value, reviewed } = body;
+
+        const resource = this.adminforth.config.resources.find(r => r.resourceId === resourceId);
+        // Create update object with just the single field
+        const updateRecord = { [field]: value };
+        
+        // Use AdminForth's built-in update method
+        const connector = this.adminforth.connectors[resource.dataSource];
+
+        let oldRecord;
+        let result;
+        await lock.run(`edit-trans-${recordId}`,  async () => {
+          // put into lock so 2 editors will not update the same record at the same time
+          oldRecord = await connector.getRecordByPrimaryKey(resource, recordId)
+
+          if (this.options.reviewedCheckboxesFieldName) {
+            let oldValue;
+            if (!oldRecord[this.options.reviewedCheckboxesFieldName]) {
+              oldValue = {}
+            } else {
+              oldValue = {...oldRecord[this.options.reviewedCheckboxesFieldName]};
+            }
+            oldValue[field] = reviewed;
+            updateRecord[this.options.reviewedCheckboxesFieldName] = { ...oldValue };
+          }
+
+          result = await this.adminforth.updateResourceRecord({
+            resource,
+            recordId,
+            record: updateRecord,
+            oldRecord,
+            adminUser
+          });
+        });
+
+        if (result.error) {
+          return { error: result.error };
+        }
+
+        const updatedRecord = await connector.getRecordByPrimaryKey(resource, recordId);
+
+        return { record: updatedRecord };
+      }
+    });
+
   }
 
 }

package/package.json

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

package/types.ts

@@ -42,4 +42,11 @@ export interface PluginOptions {
    *  not AdminForth applications
    */
   externalAppOnly?: boolean;
+
+
+  /**
+   * You can enable "Reviewed" checkbox for each translation string by defing this field,
+   * it should be a JSON field (underlyng database type should be TEXT or JSON)
+   */
+  reviewedCheckboxesFieldName?: string;
 }