refactor: i18n for import menu, help center, lock type, pagination

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -245,7 +245,8 @@ function openTableCreateDialog() {
 
               <template #overlay>
                 <a-menu class="!py-0 rounded text-sm">
-                  <a-menu-item-group title="QUICK IMPORT FROM" class="!px-0 !mx-0">
+                  <!--                  Quick Import From -->
+                  <a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
                     <a-menu-item
                       v-if="isUIAllowed('airtableImport')"
                       key="quick-import-airtable"
@@ -253,7 +254,6 @@ function openTableCreateDialog() {
                     >
                       <div class="color-transition nc-project-menu-item group">
                         <MdiTableLarge class="group-hover:text-accent" />
-                        <!-- TODO: i18n -->
                         Airtable
                       </div>
                     </a-menu-item>
@@ -261,7 +261,6 @@ function openTableCreateDialog() {
                     <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
                       <div class="color-transition nc-project-menu-item group">
                         <MdiFileDocumentOutline class="group-hover:text-accent" />
-                        <!-- TODO: i18n -->
                         CSV file
                       </div>
                     </a-menu-item>
@@ -269,7 +268,6 @@ function openTableCreateDialog() {
                     <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
                       <div class="color-transition nc-project-menu-item group">
                         <MdiCodeJson class="group-hover:text-accent" />
-                        <!-- TODO: i18n -->
                         JSON file
                       </div>
                     </a-menu-item>
@@ -281,7 +279,6 @@ function openTableCreateDialog() {
                     >
                       <div class="color-transition nc-project-menu-item group">
                         <MdiFileExcel class="group-hover:text-accent" />
-                        <!-- TODO: i18n -->
                         Microsoft Excel
                       </div>
                     </a-menu-item>
@@ -297,8 +294,8 @@ function openTableCreateDialog() {
                       class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
                     >
                       <MdiOpenInNew class="group-hover:text-accent" />
-                      <!-- TODO: i18n -->
-                      Request a data source you need?
+                      <!-- Request a data source you need? -->
+                      {{ $t('label.requestDataSource') }}
                     </a>
                   </a-menu-item>
                 </a-menu>

packages/nc-gui-v2/components/general/HelpAndSupport.vue

@@ -20,8 +20,8 @@ const openSwaggerLink = () => {
     @click="showDrawer = true"
   >
     <MdiCommentTextOutline class="mr-1" />
-    <!-- todo: i18n -->
-    <div>APIs & Support</div>
+    <!-- APIs & Support -->
+    <div>{{ $t('title.APIsAndSupport') }}</div>
   </div>
 
   <a-drawer
@@ -34,8 +34,8 @@ const openSwaggerLink = () => {
     :body-style="{ padding: '12px 24px 0 24px', background: '#fafafa' }"
   >
     <div class="flex flex-col w-full h-full p-4 pb-0">
-      <!-- todo: i18n -->
-      <a-typography-title :level="4" class="!mb-6 !text-gray-500">Help center</a-typography-title>
+      <!-- Help center -->
+      <a-typography-title :level="4" class="!mb-6 !text-gray-500">{{ $t('title.helpCenter') }}</a-typography-title>
 
       <GeneralSocialCard class="!w-full nc-social-card">
         <template #before>
@@ -48,8 +48,8 @@ const openSwaggerLink = () => {
             >
               <div class="ml-3 flex items-center text-sm">
                 <LogosSwagger />
-                <!--            todo:  i18n -->
-                <span class="ml-3">{{ project.title }} : Swagger Documentation</span>
+                <!--            Swagger Documentation -->
+                <span class="ml-3">{{ project.title }} : {{ $t('title.swaggerDocumentation') }}</span>
               </div>
             </nuxt-link>
           </a-list-item>

packages/nc-gui-v2/components/general/ShareBaseButton.vue

@@ -22,8 +22,6 @@ const { isUIAllowed } = useUIPermission()
     >
       <div class="flex items-center space-x-1">
         <MdiAccountPlusOutline class="mr-1 nc-share-base" />
-        <!-- todo: i18n       <div>{{ $t('activity.share') }}</div> -->
-
         <div>{{ $t('activity.inviteTeam') }}</div>
       </div>
     </div>

packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue

@@ -13,17 +13,17 @@ const types = {
   [LockType.Personal]: {
     title: 'title.personalView',
     icon: MdiAccountIcon,
-    subtitle: 'Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.',
+    subtitle: 'msg.info.collabView',
   },
   [LockType.Collaborative]: {
     title: 'title.collabView',
     icon: MdiAccountGroupIcon,
-    subtitle: 'Collaborators with edit permissions or higher can change the view configuration.',
+    subtitle: 'msg.info.lockedView',
   },
   [LockType.Locked]: {
     title: 'title.lockedView',
     icon: MdiLockOutlineIcon,
-    subtitle: 'No one can edit the view configuration until it is unlocked.',
+    subtitle: 'msg.info.personalView',
   },
 }
 
@@ -41,7 +41,7 @@ const selectedView = inject(ActiveViewInj)
         <component :is="types[type].icon" class="text-gray-500" />
         {{ $t(types[type].title) }}
         <div class="nc-subtitle whitespace-normal">
-          {{ types[type].subtitle }}
+          {{ $t(types[type].subtitle) }}
         </div>
       </div>
     </div>

packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue

@@ -49,7 +49,7 @@ function onPressEnter() {
       v-model:value="search.query"
       size="small"
       class="max-w-[200px]"
-      placeholder="Filter query"
+      :placeholder="$t('palceholder.filterQuery')"
       :bordered="false"
       @press-enter="onPressEnter"
     >

packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue

@@ -123,9 +123,10 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
             <a-menu-divider />
             <a-sub-menu key="download">
               <template #title>
+                <!--                Download -->
                 <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                   <MdiDownload class="group-hover:text-accent text-gray-500" />
-                  Download
+                  {{ $t('general.download') }}
                   <div class="flex-1" />
 
                   <MaterialSymbolsChevronRightRounded
@@ -139,10 +140,11 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
             </a-sub-menu>
             <template v-if="isUIAllowed('csvImport') && !isView && !isPublicView && !isSqlView">
               <a-sub-menu key="upload">
+                <!--                Upload -->
                 <template #title>
                   <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                     <MdiUpload class="group-hover:text-accent text-gray-500" />
-                    Upload
+                    {{ $t('general.upload') }}
                     <div class="flex-1" />
 
                     <MaterialSymbolsChevronRightRounded
@@ -199,8 +201,8 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
                 @click="showApiSnippetDrawer = true"
               >
                 <MdiXml class="text-gray-500" />
-                <!-- todo: i18n translation -->
-                Get API Snippet
+                <!-- Get API Snippet -->
+                {{ $t('activity.getApiSnippet') }}
               </div>
             </a-menu-item>
           </a-menu-item-group>

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -517,8 +517,9 @@ const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) =
               </div>
             </a-menu-item>
 
+            <!--            Clear cell -->
             <a-menu-item v-if="contextMenuTarget" @click="clearCell(contextMenuTarget)">
-              <div class="nc-project-menu-item">Clear cell</div>
+              <div class="nc-project-menu-item">{{ $t('activity.clearCell') }}</div>
             </a-menu-item>
 
             <a-menu-item v-if="contextMenuTarget" @click="addEmptyRow(contextMenuTarget.row + 1)">

packages/nc-gui-v2/components/smartsheet/Pagination.vue

@@ -19,7 +19,7 @@ const page = computed({
 <template>
   <div class="flex items-center mb-1">
     <span v-if="count !== null && count !== Infinity" class="caption ml-5 text-gray-500">
-      {{ count }} record{{ count !== 1 ? 's' : '' }}
+      {{ count }} {{ count !== 1 ? $t('objects.records') : $t('objects.record') }}
     </span>
 
     <div class="flex-1" />

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

@@ -10,7 +10,7 @@ const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
         <AntDesignMenuUnfoldOutlined v-if="isOpen" />
         <AntDesignMenuFoldOutlined v-else />
 
-        Views
+        {{ $t('objects.views') }}
       </div>
     </a-button>
   </div>

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

@@ -102,7 +102,7 @@ const newRowState = computed(() => {
       <div class="flex mb-4 items-center gap-2 px-12">
         <a-input
           v-model:value="childrenExcludedListPagination.query"
-          placeholder="Filter query"
+          :placeholder="$t('palceholder.filterQuery')"
           class="max-w-[200px]"
           size="small"
         ></a-input>

packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@@ -22,6 +22,7 @@ import {
   watch,
 } from '#imports'
 import { TabType } from '~/composables'
+import {useI18n} from "vue-i18n";
 
 definePageMeta({
   hideHeader: true,
@@ -87,6 +88,8 @@ const themePrimaryColor = ref<any>(theme.value.primaryColor)
 
 const themeAccentColor = ref<any>(theme.value.accentColor)
 
+const { t } = useI18n()
+
 // Chrome provides object so if custom picker used we only edit primary otherwise use complement as accent
 watch(themePrimaryColor, (nextColor) => {
   const hexColor = nextColor.hex8 ? nextColor.hex8 : nextColor
@@ -109,7 +112,7 @@ watch(themeAccentColor, (nextColor) => {
 })
 
 if (!route.params.type && isUIAllowed('teamAndAuth')) {
-  addTab({ type: TabType.AUTH, title: 'Team & Auth' })
+  addTab({ type: TabType.AUTH, title: t('title.teamAndAuth') })
 }
 
 const copyProjectInfo = async () => {

packages/nc-gui-v2/pages/[projectType]/form/[viewId]/index.vue

@@ -146,8 +146,8 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
               <a-input-password v-model:value="password" :placeholder="$t('msg.info.signUp.enterPassword')" />
             </a-form-item>
 
-            <!-- todo: i18n -->
-            <a-button type="primary" html-type="submit">Unlock</a-button>
+            <!-- Unlock -->
+            <a-button type="primary" html-type="submit">{{ $t('general.unlock') }}</a-button>
           </a-form>
         </div>
       </a-modal>