fix: i18n for Link cell and record

packages/nc-gui/components/smartsheet/column/LinkOptions.vue

@@ -7,6 +7,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:value'])
 
+const { t } = useI18n()
+
 const vModel = useVModel(props, 'value', emit)
 
 const { validateInfos, setAdditionalValidations } = useColumnCreateStoreOrThrow()
@@ -17,7 +19,7 @@ setAdditionalValidations({
       validator: (_, value: string) => {
         return new Promise((resolve, reject) => {
           if (value?.length > 59) {
-            return reject(new Error('The length exceeds the max 59 characters'))
+            return reject(t('msg.length59Required'))
           }
           resolve(true)
         })
@@ -29,7 +31,7 @@ setAdditionalValidations({
       validator: (_, value: string) => {
         return new Promise((resolve, reject) => {
           if (value?.length > 59) {
-            return reject(new Error('The length exceeds the max 59 characters'))
+            return reject(t('msg.length59Required'))
           }
           resolve(true)
         })
@@ -49,14 +51,14 @@ vModel.value.meta = {
 <template>
   <a-row class="my-2" gutter="8">
     <a-col :span="12">
-      <a-form-item v-bind="validateInfos['meta.singular']" label="Singular Label">
-        <a-input v-model:value="vModel.meta.singular" placeholder="Link" class="!w-full nc-link-singular" />
+      <a-form-item v-bind="validateInfos['meta.singular']" :label="$t('labels.singularLabel')">
+        <a-input v-model:value="vModel.meta.singular" :placeholder="$t('general.link')" class="!w-full nc-link-singular" />
       </a-form-item>
     </a-col>
 
     <a-col :span="12">
-      <a-form-item v-bind="validateInfos['meta.plural']" label="Plural Label">
-        <a-input v-model:value="vModel.meta.plural" placeholder="Links" class="!w-full nc-link-plural" />
+      <a-form-item v-bind="validateInfos['meta.plural']" :label="$t('labels.pluralLabel')">
+        <a-input v-model:value="vModel.meta.plural" :placeholder="$t('general.links')" class="!w-full nc-link-plural" />
       </a-form-item>
     </a-col>
   </a-row>

packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue

@@ -58,8 +58,8 @@ const isLinks = computed(() => vModel.value.uidt === UITypes.Links)
     <div class="border-2 p-6">
       <a-form-item v-bind="validateInfos.type" class="nc-ltar-relation-type">
         <a-radio-group v-model:value="vModel.type" name="type" v-bind="validateInfos.type">
-          <a-radio value="hm">Has Many</a-radio>
-          <a-radio value="mm">Many To Many</a-radio>
+          <a-radio value="hm">{{ $t('title.hasMany') }}</a-radio>
+          <a-radio value="mm">{{ $t('title.manyToMany') }}</a-radio>
         </a-radio-group>
       </a-form-item>
 
@@ -132,7 +132,9 @@ const isLinks = computed(() => vModel.value.uidt === UITypes.Links)
 
           <div class="flex flex-row">
             <a-form-item>
-              <a-checkbox v-model:checked="vModel.virtual" name="virtual" @change="onDataTypeChange">Virtual Relation</a-checkbox>
+              <a-checkbox v-model:checked="vModel.virtual" name="virtual" @change="onDataTypeChange">{{
+                $t('title.virtualRelation')
+              }}</a-checkbox>
             </a-form-item>
           </div>
         </template>

packages/nc-gui/components/virtual-cell/Links.vue

@@ -29,6 +29,8 @@ const childListDlg = ref(false)
 
 const { isUIAllowed } = useRoles()
 
+const { t } = useI18n()
+
 const { state, isNew } = useSmartsheetRowStoreOrThrow()
 
 const { relatedTableMeta, loadRelatedTableMeta, relatedTableDisplayValueProp } = useProvideLTARStore(
@@ -47,18 +49,18 @@ loadRelatedTableMeta()
 const textVal = computed(() => {
   if (isForm?.value) {
     return state.value?.[colTitle.value]?.length
-      ? `${+state.value?.[colTitle.value]?.length} records Linked`
-      : 'No records linked'
+      ? `${+state.value?.[colTitle.value]?.length} ${t('msg.recordsLinked')}`
+      : t('msg.noRecordsLinked')
   }
 
   const parsedValue = +value?.value || 0
 
   if (!parsedValue) {
-    return 'No records linked'
+    return t('msg.noRecordsLinked')
   } else if (parsedValue === 1) {
-    return `1 ${column.value?.meta?.singular || 'Link'}`
+    return `1 ${column.value?.meta?.singular || t('general.link')}`
   } else {
-    return `${parsedValue} ${column.value?.meta?.plural || 'Links'}`
+    return `${parsedValue} ${column.value?.meta?.plural || t('general.links')}`
   }
 })
 

packages/nc-gui/components/virtual-cell/components/Header.vue

@@ -14,34 +14,37 @@ const { relation, relatedTableTitle, displayValue, showHeader, tableTitle } = de
   displayValue?: string
 }>()
 
+const { t } = useI18n()
+
 const relationMeta = computed(() => {
   if (relation === 'hm') {
     return {
-      title: 'Has Many Relation',
+      title: t('msg.hm.title'),
       icon: HasManyIcon,
-      tooltip_desc: 'A single record from table ',
-      tooltip_desc2: ' can be linked with a multiple records from table ',
+      tooltip_desc: t('msg.hm.tooltip_desc'),
+      tooltip_desc2: t('msg.hm.tooltip_desc2'),
     }
   } else if (relation === 'mm') {
     return {
-      title: 'Many to Many Relation',
+      title: t('msg.mm.title'),
       icon: ManytoManyIcon,
-      tooltip_desc: 'Multiple records from table ',
-      tooltip_desc2: ' can be linked with multiple records from table ',
+
+      tooltip_desc: t('msg.mm.tooltip_desc'),
+      tooltip_desc2: t('msg.mm.tooltip_desc2'),
     }
   } else if (relation === 'bt') {
     return {
-      title: 'Belongs to Relation',
+      title: t('msg.bt.title'),
       icon: BelongsToIcon,
-      tooltip_desc: 'A single record from table ',
-      tooltip_desc2: ' can be linked with a record from table ',
+      tooltip_desc: t('msg.bt.tooltip_desc'),
+      tooltip_desc2: t('msg.bt.tooltip_desc2'),
     }
   } else {
     return {
-      title: 'One to One Relation',
+      title: t('msg.oo.title'),
       icon: OnetoOneIcon,
-      tooltip_desc: 'A single record from table ',
-      tooltip_desc2: ' can be linked with a single record from table ',
+      tooltip_desc: t('msg.oo.tooltip_desc'),
+      tooltip_desc2: t('msg.oo.tooltip_desc2'),
     }
   }
 })

packages/nc-gui/components/virtual-cell/components/ListChildItems.vue

@@ -242,7 +242,7 @@ onKeyStroke('Escape', () => {
     >
       <InboxIcon class="w-16 h-16 mx-auto" />
       <p>
-        No records are linked from table
+        {{ $t('msg.noRecordsAreLinkedFromTable') }}
         {{ relatedTableMeta?.title }}
       </p>
       <NcButton
@@ -250,7 +250,7 @@ onKeyStroke('Escape', () => {
         data-testid="nc-child-list-button-link-to"
         @click="emit('attachRecord')"
       >
-        <div class="flex items-center gap-1"><MdiPlus /> Link more records</div>
+        <div class="flex items-center gap-1"><MdiPlus /> {{ $t('title.linkMoreRecords') }}</div>
       </NcButton>
     </div>
 
@@ -258,10 +258,13 @@ onKeyStroke('Escape', () => {
 
     <div class="flex flex-row justify-between bg-white relative pt-1">
       <div v-if="!isForm" class="flex items-center justify-center px-2 rounded-md text-gray-500 bg-brand-50">
-        {{ childrenListCount || 0 }} records {{ childrenListCount !== 0 ? 'are' : '' }} linked
+        {{ childrenListCount || 0 }} {{ $t('objects.records') }} {{ childrenListCount !== 0 ? $t('general.are') : '' }}
+        {{ $t('general.linked') }}
       </div>
       <div v-else class="flex items-center justify-center px-2 rounded-md text-gray-500 bg-brand-50">
-        {{ state?.[colTitle]?.length || 0 }} records {{ state?.[colTitle]?.length !== 0 ? 'are' : '' }} linked
+        {{ state?.[colTitle]?.length || 0 }} {{ $t('objects.records') }}
+        {{ state?.[colTitle]?.length !== 0 ? $t('general.are') : '' }}
+        {{ $t('general.linked') }}
       </div>
       <div class="flex absolute items-center py-2 justify-center w-full">
         <a-pagination
@@ -277,13 +280,13 @@ onKeyStroke('Escape', () => {
         />
       </div>
       <div class="flex flex-row gap-2">
-        <NcButton v-if="!isForm" type="ghost" class="nc-close-btn" @click="vModel = false"> Finish </NcButton>
+        <NcButton v-if="!isForm" type="ghost" class="nc-close-btn" @click="vModel = false"> {{ $t('general.finish') }} </NcButton>
         <NcButton
           v-if="!readonly && childrenListCount > 0"
           data-testid="nc-child-list-button-link-to"
           @click="emit('attachRecord')"
         >
-          <div class="flex items-center gap-1"><MdiPlus /> Link more records</div>
+          <div class="flex items-center gap-1"><MdiPlus /> {{ $t('title.linkMoreRecords') }}</div>
         </NcButton>
       </div>
     </div>

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -176,7 +176,7 @@ onKeyStroke('Escape', () => {
         <a-input
           ref="filterQueryRef"
           v-model:value="childrenExcludedListPagination.query"
-          :placeholder="`Search in ${relatedTableMeta?.title}`"
+          :placeholder="`${$t('general.searchIn')} ${relatedTableMeta?.title}`"
           class="w-full !rounded-md nc-excluded-search"
           size="small"
           :bordered="false"
@@ -193,7 +193,7 @@ onKeyStroke('Escape', () => {
       <!-- Add new record -->
       <NcButton
         v-if="!isPublic"
-        type="ghost"
+        type="secondary"
         size="xl"
         class="!text-brand-500"
         @click="
@@ -203,7 +203,7 @@ onKeyStroke('Escape', () => {
           }
         "
       >
-        <div class="flex items-center gap-1"><MdiPlus /> New Record</div>
+        <div class="flex items-center gap-1"><MdiPlus /> {{ $t('activity.newRecord') }}</div>
       </NcButton>
     </div>
 
@@ -271,7 +271,7 @@ onKeyStroke('Escape', () => {
     <div v-else class="py-2 h-[420px] flex flex-col gap-3 items-center justify-center text-gray-500">
       <InboxIcon class="w-16 h-16 mx-auto" />
       <p>
-        There are no records in table
+        {{ $t('msg.thereAreNoRecordsInTable') }}
         {{ relatedTableMeta?.title }}
       </p>
     </div>
@@ -279,8 +279,8 @@ onKeyStroke('Escape', () => {
 
     <div class="flex flex-row justify-between bg-white relative pt-1">
       <div v-if="!isForm" class="flex items-center justify-center px-2 rounded-md text-gray-500 bg-brand-50">
-        {{ relation === 'bt' ? (row.row[relatedTableMeta?.title] ? '1' : 0) : childrenListCount ?? 'No' }} records
-        {{ childrenListCount !== 0 ? 'are' : '' }} linked
+        {{ relation === 'bt' ? (row.row[relatedTableMeta?.title] ? '1' : 0) : childrenListCount ?? 'No' }}
+        {{ $t('objects.records') }} {{ childrenListCount !== 0 ? 'are' : '' }} {{ $t('general.linked') }}
       </div>
       <div class="flex absolute items-center py-2 justify-center w-full">
         <a-pagination
@@ -295,7 +295,7 @@ onKeyStroke('Escape', () => {
           show-less-items
         />
       </div>
-      <NcButton class="nc-close-btn ml-auto" type="ghost" @click="vModel = false"> Finish </NcButton>
+      <NcButton class="nc-close-btn ml-auto" type="ghost" @click="vModel = false"> {{ $t('general.finish') }} </NcButton>
     </div>
     <Suspense>
       <LazySmartsheetExpandedForm

packages/nc-gui/lang/en.json

@@ -51,6 +51,8 @@
     "or": "Or",
     "add": "Add",
     "edit": "Edit",
+    "link": "Link",
+    "links": "Links",
     "remove": "Remove",
     "import": "Import",
     "logout": "Log Out",
@@ -118,6 +120,7 @@
     "confirm": "Confirm",
     "generate": "Generate",
     "copy": "Copy",
+    "are": "are",
     "misc": "Miscellaneous",
     "lock": "Lock",
     "unlock": "Unlock",
@@ -145,7 +148,9 @@
     "source": "Source",
     "destination": "Destination",
     "active": "Active",
-    "inactive": "Inactive"
+    "inactive": "Inactive",
+    "linked": "linked",
+    "finish": "Finish"
   },
   "objects": {
     "workspace": "Workspace",
@@ -265,6 +270,10 @@
     "hideAll":"Hide all",
     "hideSystemFields": "hideSystemFields",
     "removeFile": "Remove File",
+    "hasMany": "Has Many",
+    "manyToMany": "Many to Many",
+    "virtualRelation": "Virtual Relation",
+    "linkMoreRecords": "Link more records",
     "downloadFile": "Download File",
     "renameTable": "Rename Table",
     "renamingTable": "Renaming Table",
@@ -337,6 +346,8 @@
     "renameFile": "Rename File"
   },
   "labels": {
+    "singularLabel": "Singular Label",
+    "pluralLabel": "Plural Label",
     "optional": "Optional",
     "clickToMake": "Click to make",
     "visibleForRole": "visible for role:",
@@ -749,14 +760,43 @@
     "selectField": "Select field"
   },
   "msg": {
+    "hm": {
+      "title": "Has Many Relation",
+      "icon": "HasManyIcon",
+      "tooltip_desc": "A single record from table ",
+      "tooltip_desc2": " can be linked with multiple records from table "
+    },
+    "mm": {
+      "title": "Many to Many Relation",
+      "icon": "ManytoManyIcon",
+      "tooltip_desc": "Multiple records from table ",
+      "tooltip_desc2": " can be linked with multiple records from table "
+    },
+    "bt": {
+      "title": "Belongs to Relation",
+      "icon": "BelongsToIcon",
+      "tooltip_desc": "A single record from table ",
+      "tooltip_desc2": " can be linked with a record from table "
+    },
+    "oo": {
+      "title": "One to One Relation",
+      "icon": "OnetoOneIcon",
+      "tooltip_desc": "A single record from table ",
+      "tooltip_desc2": " can be linked with a single record from table "
+    },
+    "noRecordsAreLinkedFromTable": "No records are linked from table",
+    "noRecordsLinked": "No records linked",
+    "recordsLinked": "records linked",
     "acceptOnlyValid": "Accepts only",
     "apiTokenCreate": "Create personal API tokens to use in automation or external apps.",
     "selectFieldToSort": "Select Field to Sort",
+    "thereAreNoRecordsInTable": "There are no records in table",
     "createWebhookMsg1": "Get started with web-hooks!",
     "createWebhookMsg2": "Create web-hooks to power you automations,",
     "createWebhookMsg3": "Get notified as soon as there are changes in your data",
     "areYouSureUWantTo": "Are you sure you want to delete the following",
     "idColumnRequired": "ID column is required, you can rename this later if required.",
+    "length59Required": "The length exceeds the max 59 characters",
     "warning": {
       "dbValid": "Please make sure database you are trying to connect is valid! This operation can cause schema loss!!",
       "barcode": {