Merge pull request #1124 from nocodb/refactor/i18n-general2

Refactor/i18n general2

packages/nc-gui/components/ProjectTreeView.vue

@@ -32,7 +32,7 @@
           <v-text-field
             v-else
             v-model="search"
-            placeholder="Search tables"
+            :placeholder="$t('placeholder.searchProjectTree')"
             dense
             hide-details
             class="elevation-0 mr-2  pl-3 pr-1 caption nc-table-list-filter"
@@ -162,7 +162,7 @@
                       <v-tooltip v-if="!isNonAdminAccessAllowed(item)" top>
                         <template #activator="{ on }">
                           <span v-if="item.type === 'tableDir'" class="body-2 font-weight-medium" v-on="on">
-                            Tables<template v-if="item.children && item.children.length"> ({{
+                            {{ $t('objects.tables') }}<template v-if="item.children && item.children.length"> ({{
                               item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length
                             }})</template></span>
                           <span v-else class="body-2 font-weight-medium" v-on="on">
@@ -174,7 +174,7 @@
                         v-else
                       >
                         <span v-if="item.type === 'tableDir'" class="body-2 font-weight-medium">
-                          Tables<template v-if="item.children && item.children.length"> ({{
+                          {{ $t('objects.tables') }}<template v-if="item.children && item.children.length"> ({{
                             item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length
                           }})</template></span>
                         <span v-else class="caption font-weight-regular">

packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue

@@ -20,7 +20,10 @@
           v-if="!i"
           :key="i + '_2'"
           class="caption d-flex align-center"
-        >where</span>
+        >
+        <!-- where -->
+        {{ $t('labels.where') }}
+        </span>
 
         <v-select
           v-else
@@ -44,7 +47,7 @@
           :key="i + '_5'"
           v-model="filter.field"
           class="caption "
-          placeholder="Field"
+          :placeholder="$t('objects.field')"
           solo
           flat
           dense
@@ -62,7 +65,7 @@
           v-model="filter.field"
           class="caption nc-filter-field-select"
           :items="fieldList"
-          placeholder="Field"
+          :placeholder="$t('objects.field')"
           solo
           flat
           dense
@@ -79,7 +82,7 @@
           v-model="filter.op"
           class="flex-shrink-1 flex-grow-0 caption  nc-filter-operation-select"
           :items="opList"
-          placeholder="Operation"
+          :placeholder="$t('labels.operation')"
           solo
           flat
           style="max-width:120px"
@@ -126,7 +129,8 @@
       <v-icon small color="grey">
         mdi-plus
       </v-icon>
-      Add Filter
+      <!-- Add Filter -->
+      {{ $t('activity.addFilter') }}
     </v-btn>
     <slot />
   </div>

packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue

@@ -19,7 +19,8 @@
           <v-icon small class="mr-1" color="grey  darken-3">
             mdi-filter-outline
           </v-icon>
-          Filter
+          <!-- Filter -->
+          {{ $t('activity.filter') }}
           <v-icon small color="#777">
             mdi-menu-down
           </v-icon>
@@ -38,7 +39,10 @@
           color="grey"
         >
           <template #label>
-            <span class="grey--text caption">Auto apply</span>
+            <span class="grey--text caption">
+              {{ $t('msg.info.filterAutoApply') }}
+              <!-- Auto apply -->
+              </span>
           </template>
         </v-checkbox>
 

packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue

@@ -19,7 +19,8 @@
           <v-icon small class="mr-1" color="#777">
             mdi-eye-off-outline
           </v-icon>
-          Fields
+          <!-- Fields -->
+          {{ $t('objects.fields') }}
           <v-icon small color="#777">
             mdi-menu-down
           </v-icon>
@@ -86,7 +87,7 @@
           flat
           class="caption mt-3 mb-2"
           color="grey"
-          placeholder="Search fields"
+          :placeholder="$t('placeholder.searchFields')"
           hide-details
           @click.stop
         >
@@ -137,16 +138,21 @@
           @click.stop
         >
           <template #label>
-            <span class="caption">Show System Fields</span>
+            <span class="caption">
+              <!-- Show System Fields -->
+              {{ $t('activity.showSystemFields') }}
+              </span>
           </template>
         </v-checkbox>
       </v-list-item>
       <v-list-item dense class="mt-2 list-btn mb-3">
         <v-btn small class="elevation-0 grey--text" @click.stop="showAll">
-          Show All
+          <!-- Show All -->
+          {{ $t('general.showAll') }}
         </v-btn>
         <v-btn small class="elevation-0 grey--text" @click.stop="hideAll">
-          Hide All
+          <!-- Hide All -->
+          {{ $t('general.hideAll') }}
         </v-btn>
       </v-list-item>
     </v-list>

packages/nc-gui/components/project/spreadsheet/components/moreActions.vue

@@ -34,7 +34,8 @@
               mdi-download-outline
             </v-icon>
             <span class="caption">
-              Download as CSV
+              <!-- Download as CSV -->
+              {{ $t('activity.downloadCSV') }}
             </span>
           </v-list-item-title>
         </v-list-item>
@@ -48,7 +49,8 @@
               mdi-upload-outline
             </v-icon>
             <span class="caption ">
-              Upload CSV
+              <!-- Upload CSV -->
+              {{ $t('activity.uploadCSV') }}
             </span>
 
             <span class="caption grey--text">(<x-icon small color="grey lighten-2">
@@ -66,7 +68,8 @@
               mdi-view-list-outline
             </v-icon>
             <span class="caption ">
-              Shared View List
+              <!-- Shared View List -->
+              {{ $t('activity.listSharedView') }}
             </span>
           </v-list-item-title>
         </v-list-item>  <v-list-item

packages/nc-gui/components/project/spreadsheet/components/shareViewMenu.vue

@@ -17,7 +17,8 @@
       <v-icon size="13" class="mr-1" color="#777">
         mdi-open-in-new
       </v-icon>
-      Share View
+      <!-- Share View -->
+      {{ $t('activity.shareView') }}
     </v-btn>
     <!--      </template>
 

packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue

@@ -19,7 +19,8 @@
           <v-icon small class="mr-1" color="#777">
             mdi-sort
           </v-icon>
-          Sort
+          <!-- Sort -->
+          {{ $t('activity.sort') }}
           <v-icon small color="#777">
             mdi-menu-down
           </v-icon>
@@ -38,7 +39,7 @@
             v-model="sort.field"
             class="caption nc-sort-field-select"
             :items="fieldList"
-            label="Field"
+            :label="$t('objects.field')"
             solo
             flat
             dense
@@ -54,7 +55,7 @@
             v-model="sort.order"
             class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
             :items="[{text : 'A -> Z', value: ''},{text : 'Z -> A', value: '-'}]"
-            label="Operation"
+            :label="$t('labels.operation')"
             solo
             flat
             dense
@@ -71,7 +72,8 @@
         <v-icon small color="grey">
           mdi-plus
         </v-icon>
-        Add Sort Option
+        <!-- Add Sort Option -->
+        {{ $t('activity.addSort') }}
       </v-btn>
     </div>
   </v-menu>

packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue

@@ -50,7 +50,7 @@
           dense
           solo
           hide-details
-          :placeholder="searchField ? `Search '${searchField}' column` : 'Search all columns'"
+          :placeholder="searchField ? $t('placeholder.searchColumn', {searchField}) : 'Search all columns'"
           class="elevation-0 pa-0 flex-grow-1 caption search-field"
           @keyup.enter="searchQuery = searchQueryVal"
           @blur="searchQuery = searchQueryVal"
@@ -138,6 +138,7 @@
         <v-icon small class="mx-n1" color="grey lighten-1">
           mdi-circle-small
         </v-icon>
+        <!-- tooltip="Reload view data" -->
         <x-icon
           tooltip="Reload view data"
           icon.class="nc-table-reload-btn mx-1"
@@ -165,10 +166,12 @@
         <!--          btn.class="nc-add-new-row-btn"-->
         <!--          @click="insertNewRow(true,true)"-->
         <!--        >-->
+
+        <!--          tooltip="Add new row"-->
         <x-icon
           v-if="isEditable && relationType !== 'bt'"
           icon.class="nc-add-new-row-btn mx-1"
-          tooltip="Add new row"
+          :tooltip="$t('activity.addRow')"
           :disabled="isLocked"
           small
           :color="['success','']"
@@ -219,7 +222,7 @@
           :disabled="isLocked"
           small
           :color="['red',''] "
-          tooltip="Delete table"
+          :tooltip="$t('activity.deleteTable')"
           @click="checkAndDeleteTable"
         >
           mdi-delete-outline
@@ -524,13 +527,22 @@
             v-if="relationType !== 'bt'"
             @click="insertNewRow(false)"
           >
-            <span class="caption">Insert New Row</span>
+            <span class="caption">
+              <!-- Insert New Row -->
+              {{ $t('activity.insertRow') }}
+            </span>
           </v-list-item>
           <v-list-item @click="deleteRow">
-            <span class="caption">Delete Row</span>
+            <span class="caption">
+              <!-- Delete Row -->
+              {{ $t('activity.deleteRow') }}
+            </span>
           </v-list-item>
           <v-list-item @click="deleteSelectedRows">
-            <span class="caption">Delete Selected Rows</span>
+            <span class="caption">
+              <!-- Delete Selected Rows -->
+              {{ $t('activity.deleteSelectedRow') }}
+            </span>
           </v-list-item>
         </template>
         <template v-if="rowContextMenu.col && !rowContextMenu.col.rqd && !rowContextMenu.col.virtual">

packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue

@@ -244,7 +244,9 @@
                 <v-icon small color="pink" v-on="on">
                   mdi-plus
                 </v-icon>
-                <span class="ml-1 caption grey--text ">New Row</span>
+                <span class="ml-1 caption grey--text ">
+                  {{ $t('activity.addRow') }}
+                </span>
               </template>
               <span class="caption"> Add new row</span>
             </v-tooltip>

packages/nc-gui/components/project/tableTabs/columnsMock.vue

@@ -69,7 +69,7 @@
         class="error text-right"
         @click="deleteTable('showDialog')"
       >
-        Delete Table  
+        {{ $t('activity.deleteTable') }}  
 
         <v-progress-circular
           v-if="progress.deleteTable"

packages/nc-gui/components/project/tableTabs/constraints.vue

@@ -45,7 +45,7 @@
         class="error text-right"
         @click="deleteTable('showDialog')"
       >
-        Delete Table
+        {{ $t('activity.deleteTable') }}
       </v-btn>
       <v-btn
         icon

packages/nc-gui/components/project/tableTabs/indexes.vue

@@ -65,7 +65,7 @@
       <x-btn
         v-ge="['indexes','delete-table']"
         outlined
-        tooltip="Delete Table"
+        :tooltip="$t('activity.deleteTable')"
         small
         color="error "
         class="error text-right"

packages/nc-gui/components/project/tableTabs/relations.vue

@@ -15,7 +15,7 @@
       class=" text-right"
       @click="deleteTable('showDialog')"
     >
-      Delete Table
+      {{ $t('activity.deleteTable') }}
     </v-btn>
     <v-btn @click="throwError()">
       error

packages/nc-gui/components/project/tableTabs/triggers.vue

@@ -65,14 +65,14 @@
           <x-btn
             v-ge="['triggers','delete']"
             outlined
-            tooltip="Delete Table"
+            :tooltip="$t('activity.deleteTable')"
             small
             icon="mdi-delete-outline"
             class="error text-right"
             color="error "
             @click="deleteTable('showDialog')"
           >
-            Delete Table
+            {{ $t('activity.deleteTable') }}
           </x-btn>
         </v-toolbar>
         <v-skeleton-loader v-if="loading" type="table" />

packages/nc-gui/components/projectTabs.vue

@@ -253,9 +253,10 @@
         <!--      </v-tabs-items>-->
       </v-tabs-items>
 
+      <!-- tooltip: Add new table -->
       <x-icon
         v-if="_isUIAllowed('addTable')"
-        tooltip="Create new table"
+        :tooltip="$t('tooltip.addTable')"
         icon-class="add-btn"
         :color="[ 'white','grey lighten-2']"
         @click="dialogCreateTableShow = true"

packages/nc-gui/components/sponsorMini.vue

@@ -14,14 +14,16 @@
         />
       </template>
     </v-img>
+    <!-- You can help us! -->
     <v-card-title v-if="!nav" class="pb-2" :class="{'body-2 justify-center mt-n2' : nav}">
-      You can help us
+      {{ $t('msg.info.sponsor.header') }}
     </v-card-title>
     <v-card-text v-if="!nav" class="pb-0">
       <p class="caption text-left body-1 textColor--text text--lighten-1">
         <template>
-          We are a tiny team working full time to make NocoDB open source. We believe a tool like NocoDB should be
+          <!-- We are a tiny team working full time to make NocoDB open source. We believe a tool like NocoDB should be
-          available freely to every problem solver on internet.
+          available freely to every problem solver on internet. -->
+          {{ $t('msg.info.sponsor.message') }}
         </template>
       </p>
     </v-card-text>
@@ -30,7 +32,7 @@
         <v-icon small color="red" class="mr-2">
           mdi-cards-heart
         </v-icon>
-        Sponsor Us
+        {{ $t('activity.sponsorUs') }}
       </v-btn>
     </v-card-actions>
   </v-card>

packages/nc-gui/components/templates/editor.vue

@@ -578,7 +578,10 @@
           <v-icon>mdi-plus</v-icon>
         </v-btn>
       </template>
-      <span class="caption">Add new table</span>
+      <span class="caption">
+        <!--Add new table-->
+        {{ $t('tooltip.addTable') }}
+      </span>
     </v-tooltip>
   </div>
 </template>

packages/nc-gui/lang/en.json

@@ -260,6 +260,7 @@
     "createTable": "Table Create",
     "refreshTable": "Tables Refresh",
     "renameTable": "Table Rename",
+    "deleteTable": "Table Delete",
     "addField": "Add new field to this table",
     "setPrimary": "Set as Primary value",
     "addRow": "Add new row",
@@ -344,7 +345,7 @@
     },
     "searchProjectTree": "Search tables",
     "searchFields": "Search fields",
-    "searchColumn": "Search {search} column",
+    "searchColumn": "Search {searchField} column",
     "searchApps": "Search apps",
     "searchModels": "Search models",
     "noItemsFound": "No items found",

packages/nc-gui/layouts/default.vue

@@ -22,7 +22,8 @@
               ><v-icon color="primary">alpha-c-circle </v-icon> -->
             </v-btn>
           </template>
-          Home
+          <!-- Home -->
+          {{ $t('general.home') }}
           <span
             class="caption ml-1 font-weight-light"
           >(v{{
@@ -67,7 +68,8 @@
               </template>
 
             </v-toolbar-items>-->
-      <span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">Loading <v-icon small color="grey">mdi-spin mdi-loading</v-icon></span>
+            <!-- loading -->
+      <span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">{{ $t('general.loading') }} <v-icon small color="grey">mdi-spin mdi-loading</v-icon></span>
 
       <span
         v-shortkey="[ 'ctrl','shift', 'd']"
@@ -121,7 +123,8 @@
               <v-icon small class="mr-1">
                 mdi-account-supervisor-outline
               </v-icon>
-              Share
+              <!-- Share -->
+              {{ $t('activity.share') }}
             </x-btn>
           </div>
 
@@ -236,7 +239,9 @@
               </v-icon>
             </template>
             <h3 class="pa-3">
-              {{ $vuetify.theme.dark ? 'It does come in Black (^⇧B)' : 'Does it come in Black ? (^⇧B)' }}
+              <!-- "dark": "It does come in Black (^⇧B)",
+              "light": "Does it come in Black ? (^⇧B)" -->
+              {{ $vuetify.theme.dark ? $t('tooltip.theme.dark') :  $t('tooltip.theme.light')  }}
               <i />
             </h3>
           </v-tooltip>
@@ -339,17 +344,19 @@
 
               <v-divider />
 
+              <!-- Copy Auth Token -->
+              <!-- "Auth token copied to clipboard" -->
               <v-list-item
                 v-if="isDashboard"
                 v-clipboard="$store.state.users.token"
                 dense
-                @click.stop="$toast.success('Auth token copied to clipboard').goAway(3000)"
+                @click.stop="$toast.success($t('msg.toast.authToken')).goAway(3000)"
               >
                 <v-list-item-title>
                   <v-icon key="terminal-dash" small>
                     mdi-content-copy
                   </v-icon>&nbsp;
-                  <span class="font-weight-regular caption">Copy auth token</span>
+                  <span class="font-weight-regular caption">{{ $t('activity.account.authToken') }}</span>
                 </v-list-item-title>
               </v-list-item>
 
@@ -374,7 +381,7 @@
                     {{ isGql ? 'mdi-graphql' : 'mdi-code-json' }}
                   </v-icon>&nbsp;
                   <span class="font-weight-regular caption">
-                    {{ isGql ? 'GraphQL APIs' : 'Swagger APIs Doc' }}</span>
+                    {{ isGql ? 'GraphQL APIs' : 'Swagger APIs' }}</span>
                 </v-list-item-title>
               </v-list-item>
               <v-divider />
@@ -382,7 +389,7 @@
                 <v-list-item-title>
                   <v-icon small>
                     mdi-information-outline
-                  </v-icon>&nbsp; <span class="font-weight-regular caption">Copy Project info</span>
+                  </v-icon>&nbsp; <span class="font-weight-regular caption">{{ $t('activity.account.projInfo') }}</span>
                 </v-list-item-title>
               </v-list-item>
 
@@ -391,7 +398,7 @@
                   <v-icon key="terminal-dash" small>
                     mdi-palette
                   </v-icon>&nbsp;
-                  <span class="font-weight-regular caption">Themes</span>
+                  <span class="font-weight-regular caption">{{ $t('activity.account.themes') }}</span>
                 </v-list-item-title>
               </v-list-item>
 
@@ -401,7 +408,7 @@
                 <v-list-item-title>
                   <v-icon small>
                     mdi-logout
-                  </v-icon>&nbsp; <span class="font-weight-regular caption">Sign Out</span>
+                  </v-icon>&nbsp; <span class="font-weight-regular caption">{{ $t('general.signOut') }}</span>
                 </v-list-item-title>
               </v-list-item>
             </template>
@@ -422,14 +429,14 @@
                   mdi-account-plus-outline
                 </v-icon> &nbsp; <span
                   class="font-weight-regular caption"
-                >Sign Up</span>
+                >{{ $t('general.signUp') }}</span>
               </v-list-item-title>
             </v-list-item>
             <v-list-item v-if="!user && !isThisMobile" dense to="/user/authentication/signin">
               <v-list-item-title>
                 <v-icon small>
                   mdi-login
-                </v-icon> &nbsp; <span class="font-weight-regular caption">Login</span>
+                </v-icon> &nbsp; <span class="font-weight-regular caption">{{ $t('general.signIn') }}</span>
               </v-list-item-title>
             </v-list-item>
             <!--            <v-list-item @click="openPricingPage">-->