fix(nc-gui): use i18n translation in multified editor

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -33,6 +33,7 @@ interface moveOp {
   index: number
   order: number
 }
+const { t } = useI18n()
 
 const { $api } = useNuxtApp()
 
@@ -228,7 +229,7 @@ const duplicateField = async (field: TableExplorerColumn) => {
     case UITypes.Lookup:
     case UITypes.Rollup:
     case UITypes.Formula:
-      return message.info('Not available at the moment')
+      return message.info(t('msg.info.notAvailableAtTheMoment'))
     case UITypes.SingleSelect:
     case UITypes.MultiSelect:
       fieldPayload = {
@@ -270,7 +271,7 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
   const col = fields.value.find((col) => compareCols(col, state))
   if (!col) return
 
-  const diffs = diff(col, state)
+  const diffs = diff(col, state) as Partial<TableExplorerColumn>
 
   // hack to prevent update status `Updated Field` when clicking on field first time
   let isUpdated = true
@@ -389,13 +390,13 @@ const onMove = (_event: { moved: { newIndex: number; oldIndex: number } }) => {
   if (op?.op === 'update') {
     const diffs = diff(op.column, field)
     if (!(Object.keys(diffs).length === 1 && 'column_order' in diffs)) {
-      message.warning('You cannot move field that is being edited. Either save or discard changes first')
+      message.warning(t('msg.warning.multiField.moveEditedField'))
       return
     }
   }
 
   if (op?.op === 'delete') {
-    message.warning('You cannot move field that is deleted. Either save or discard changes first')
+    message.warning(t('msg.warning.multiField.moveDeletedField'))
     return
   }
 
@@ -563,7 +564,7 @@ const isColumnsValid = computed(() => fields.value.every((f) => isColumnValid(f)
 
 const saveChanges = async () => {
   if (!isColumnsValid.value) {
-    message.error('Please complete the configuration of all fields before saving')
+    message.error(t('msg.error.multiFieldSaveValidation'))
     return
   } else if (!loading.value && ops.value.length < 1 && moveOps.value.length < 1 && visibilityOps.value.length < 1) {
     return
@@ -640,7 +641,7 @@ const saveChanges = async () => {
 
     visibilityOps.value = []
   } catch (e) {
-    message.error('Something went wrong')
+    message.error(t('msg.error.somethingWentWrong'))
   } finally {
     loading.value = false
   }
@@ -648,7 +649,7 @@ const saveChanges = async () => {
 
 const toggleVisibility = async (checked: boolean, field: Field) => {
   if (field.fk_column_id && fieldStatuses.value[field.fk_column_id]) {
-    message.warning('You cannot change visibility of a field that is being edited. Please save or discard changes first.')
+    message.warning(t('msg.warning.multiField.fieldVisibility'))
     return
   }
   if (visibilityOps.value.find((op) => op.column.fk_column_id === field.fk_column_id)) {
@@ -742,7 +743,7 @@ onKeyDown('Backspace', () => {
 onKeyDown('ArrowRight', () => {
   if (document.activeElement?.tagName === 'TEXTAREA') return
   if (activeField.value) {
-    const input = document.querySelector('.nc-fields-input')
+    const input = document.querySelector('.nc-fields-input') as HTMLInputElement
     if (input) {
       input.focus()
     }
@@ -821,7 +822,7 @@ watch(
             data-testid="nc-field-search-input"
             v-model:value="searchQuery"
             class="!h-8 !px-1 !rounded-lg !w-72"
-            placeholder="Search field"
+            :placeholder="$t('placeholder.searchFields')"
           >
             <template #prefix>
               <GeneralIcon icon="search" class="mx-1 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
@@ -849,7 +850,7 @@ watch(
               >
                 <div class="flex items-center gap-2">
                   <GeneralIcon icon="plus" class="w-3" />
-                  New Field
+                  {{ $t('labels.multiField.newField') }}
                 </div>
               </NcButton>
             </NcTooltip>
@@ -860,7 +861,7 @@ watch(
               :disabled="(!loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1) || isLocked"
               @click="clearChanges()"
             >
-              Reset
+              {{ $t('general.reset') }}
             </NcButton>
             <NcTooltip :disabled="isLocked">
               <template #title> {{ `${renderCmdOrCtrlKey()} + S` }} </template>
@@ -876,7 +877,7 @@ watch(
                 "
                 @click="saveChanges()"
               >
-                Save changes
+                {{ $t('labels.multiField.saveChanges') }}
               </NcButton>
             </NcTooltip>
           </div>
@@ -956,7 +957,7 @@ watch(
                         class="bg-red-50 text-red-700"
                         data-testid="nc-field-status-deleted-field"
                       >
-                        Deleted field
+                        {{ $t('labels.multiField.deletedField') }}
                       </NcBadge>
                       <NcBadge
                         v-else-if="fieldStatus(field) === 'add'"
@@ -965,7 +966,7 @@ watch(
                         class="bg-green-50 text-green-700"
                         data-testid="nc-field-status-new-field"
                       >
-                        New field
+                        {{ $t('labels.multiField.newField') }}
                       </NcBadge>
 
                       <NcBadge
@@ -975,7 +976,7 @@ watch(
                         class="bg-orange-50 text-orange-700"
                         data-testid="nc-field-status-updated-field"
                       >
-                        Updated field
+                        {{ $t('labels.multiField.updatedField') }}
                       </NcBadge>
                       <NcBadge
                         v-if="!isColumnValid(field)"
@@ -984,7 +985,7 @@ watch(
                         class="ml-1 bg-yellow-50 text-yellow-700"
                         data-testid="nc-field-status-incomplete-configuration"
                       >
-                        Incomplete configuration
+                        {{ $t('labels.multiField.incompleteConfiguration') }}
                       </NcBadge>
                     </div>
                     <NcButton
@@ -998,7 +999,7 @@ watch(
                     >
                       <div class="flex items-center text-xs gap-1">
                         <GeneralIcon icon="reload" />
-                        Restore
+                        {{ $t('general.restore') }}
                       </div>
                     </NcButton>
                     <NcDropdown
@@ -1053,7 +1054,7 @@ watch(
                               @click="duplicateField(field)"
                               data-testid="nc-field-item-action-duplicate"
                             >
-                              <Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span>
+                              <Icon class="iconify text-gray-800" icon="lucide:copy" /><span>{{ $t('general.duplicate') }}</span>
                             </NcMenuItem>
                             <NcMenuItem
                               v-if="!field.pv"
@@ -1061,14 +1062,18 @@ watch(
                               @click="addField(field, true)"
                               data-testid="nc-field-item-action-insert-above"
                             >
-                              <Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>Insert above</span>
+                              <Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>{{
+                                $t('general.insertAbove')
+                              }}</span>
                             </NcMenuItem>
                             <NcMenuItem
                               key="table-explorer-insert-below"
                               @click="addField(field)"
                               data-testid="nc-field-item-action-insert-below"
                             >
-                              <Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>Insert below</span>
+                              <Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>{{
+                                $t('general.insertBelow')
+                              }}</span>
                             </NcMenuItem>
 
                             <a-menu-divider class="my-1.5" />
@@ -1081,7 +1086,7 @@ watch(
                             >
                               <div class="text-red-500">
                                 <GeneralIcon icon="delete" class="group-hover:text-accent -ml-0.25 -mt-0.75 mr-0.5" />
-                                Delete
+                                {{ $t('general.delete') }}
                               </div>
                             </NcMenuItem>
                           </template>
@@ -1147,7 +1152,7 @@ watch(
                         class="bg-red-50 text-red-700"
                         data-testid="nc-field-status-deleted-field"
                       >
-                        Deleted field
+                        {{ $t('labels.multiField.deletedField') }}
                       </NcBadge>
 
                       <NcBadge
@@ -1157,7 +1162,7 @@ watch(
                         class="bg-orange-50 text-orange-700"
                         data-testid="nc-field-status-updated-field"
                       >
-                        Updated field
+                        {{ $t('labels.multiField.updatedField') }}
                       </NcBadge>
                     </div>
                     <NcButton
@@ -1171,7 +1176,7 @@ watch(
                     >
                       <div class="flex items-center text-xs gap-1">
                         <GeneralIcon icon="reload" />
-                        Restore
+                        {{ $t('general.restore') }}
                       </div>
                     </NcButton>
                     <NcDropdown
@@ -1252,9 +1257,9 @@ watch(
               />
               <div v-else class="w-[25rem] flex flex-col justify-center p-4 items-center">
                 <img src="~assets/img/fieldPlaceholder.svg" class="!w-[18rem]" />
-                <div class="text-2xl text-gray-600 font-bold text-center pt-6">Select a field</div>
+                <div class="text-2xl text-gray-600 font-bold text-center pt-6">{{ $t('labels.multiField.selectField') }}</div>
                 <div class="text-center text-sm px-2 text-gray-500 pt-6">
-                  Make changes to field properties by selecting a field from the list
+                  {{ $t('labels.multiField.selectFieldLabel') }}
                 </div>
               </div>
             </div>

packages/nc-gui/lang/en.json

@@ -157,6 +157,8 @@
     "groupingField": "Grouping Field",
     "insertAfter": "Insert After",
     "insertBefore": "Insert Before",
+    "insertAbove": "Insert above",
+    "insertBelow": "Insert below",
     "hideField": "Hide Field",
     "sortAsc": "Sort Ascending",
     "sortDesc": "Sort Descending",
@@ -189,7 +191,8 @@
     "shift": "Shift",
     "enter": "Enter",
     "seconds": "Seconds",
-    "paste": "Paste"
+    "paste": "Paste",
+    "restore": "Restore"
   },
   "objects": {
     "workspace": "Workspace",
@@ -642,7 +645,16 @@
     "changeWsName": "Change Workspace Name",
     "pressEnter": "Press Enter",
     "newFormLoaded": "New form will be loaded after",
-    "webhook": "Webhook"
+    "webhook": "Webhook",
+    "multiField": {
+      "newField": "New field",
+      "saveChanges": "Save changes",
+      "updatedField": "Updated field",
+      "deletedField": "Deleted field",
+      "incompleteConfiguration": "Incomplete configuration",
+      "selectField": "Select a field",
+      "selectFieldLabel": "Make changes to field properties by selecting a field from the list"
+    }
   },
   "activity": {
     "openInANewTab": "Open in a new tab",
@@ -1048,7 +1060,12 @@
         "barcodeFieldsCannotBeDirectlyChanged": "Warning: Barcode fields cannot be directly changed."
       },
       "duplicateProject": "Are you sure you want to duplicate the base?",
-      "duplicateTable": "Are you sure you want to duplicate the table?"
+      "duplicateTable": "Are you sure you want to duplicate the table?",
+      "multiField": {
+        "fieldVisibility": "You cannot change visibility of a field that is being edited. Please save or discard changes first.",
+        "moveEditedField": "You cannot move field that is being edited. Either save or discard changes first",
+        "moveDeletedField": "You cannot move field that is deleted. Either save or discard changes first"
+      }
     },
     "info": {
       "disabledAsViewLocked": "Disabled as View is locked",
@@ -1211,7 +1228,8 @@
       "goToNext": "Go to next",
       "thankYou": "Thank you!",
       "submittedFormData": "You have successfully submitted the form data.",
-      "editingSystemKeyNotSupported": "Editing system key not supported"
+      "editingSystemKeyNotSupported": "Editing system key not supported",
+      "notAvailableAtTheMoment": "Not available at the moment"
     },
     "error": {
       "nameRequired": "Name Required",
@@ -1289,7 +1307,9 @@
       "fieldRequired": "{value} cannot be empty.",
       "projectNotAccessible": "Base not accessible",
       "copyToClipboardError": "Failed to copy to clipboard",
-      "pasteFromClipboardError": "Failed to paste from clipboard"
+      "pasteFromClipboardError": "Failed to paste from clipboard",
+      "multiFieldSaveValidation": "Please complete the configuration of all fields before saving",
+      "somethingWentWrong": "Something went wrong"
     },
     "toast": {
       "exportMetadata": "Base metadata exported successfully",