Browse Source

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

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
pull/3445/head
Raju Udava 2 years ago
parent
commit
9fd11bf8bb
  1. 11
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  2. 12
      packages/nc-gui-v2/components/general/HelpAndSupport.vue
  3. 2
      packages/nc-gui-v2/components/general/ShareBaseButton.vue
  4. 8
      packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue
  5. 2
      packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
  6. 10
      packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
  7. 3
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  8. 2
      packages/nc-gui-v2/components/smartsheet/Pagination.vue
  9. 2
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
  10. 2
      packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
  11. 5
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
  12. 4
      packages/nc-gui-v2/pages/[projectType]/form/[viewId]/index.vue

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

@ -245,7 +245,8 @@ function openTableCreateDialog() {
<template #overlay> <template #overlay>
<a-menu class="!py-0 rounded text-sm"> <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 <a-menu-item
v-if="isUIAllowed('airtableImport')" v-if="isUIAllowed('airtableImport')"
key="quick-import-airtable" key="quick-import-airtable"
@ -253,7 +254,6 @@ function openTableCreateDialog() {
> >
<div class="color-transition nc-project-menu-item group"> <div class="color-transition nc-project-menu-item group">
<MdiTableLarge class="group-hover:text-accent" /> <MdiTableLarge class="group-hover:text-accent" />
<!-- TODO: i18n -->
Airtable Airtable
</div> </div>
</a-menu-item> </a-menu-item>
@ -261,7 +261,6 @@ function openTableCreateDialog() {
<a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')"> <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
<div class="color-transition nc-project-menu-item group"> <div class="color-transition nc-project-menu-item group">
<MdiFileDocumentOutline class="group-hover:text-accent" /> <MdiFileDocumentOutline class="group-hover:text-accent" />
<!-- TODO: i18n -->
CSV file CSV file
</div> </div>
</a-menu-item> </a-menu-item>
@ -269,7 +268,6 @@ function openTableCreateDialog() {
<a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')"> <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
<div class="color-transition nc-project-menu-item group"> <div class="color-transition nc-project-menu-item group">
<MdiCodeJson class="group-hover:text-accent" /> <MdiCodeJson class="group-hover:text-accent" />
<!-- TODO: i18n -->
JSON file JSON file
</div> </div>
</a-menu-item> </a-menu-item>
@ -281,7 +279,6 @@ function openTableCreateDialog() {
> >
<div class="color-transition nc-project-menu-item group"> <div class="color-transition nc-project-menu-item group">
<MdiFileExcel class="group-hover:text-accent" /> <MdiFileExcel class="group-hover:text-accent" />
<!-- TODO: i18n -->
Microsoft Excel Microsoft Excel
</div> </div>
</a-menu-item> </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)" class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
> >
<MdiOpenInNew class="group-hover:text-accent" /> <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>
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>

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

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

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

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

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

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

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

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

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

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

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

@ -517,8 +517,9 @@ const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) =
</div> </div>
</a-menu-item> </a-menu-item>
<!-- Clear cell -->
<a-menu-item v-if="contextMenuTarget" @click="clearCell(contextMenuTarget)"> <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>
<a-menu-item v-if="contextMenuTarget" @click="addEmptyRow(contextMenuTarget.row + 1)"> <a-menu-item v-if="contextMenuTarget" @click="addEmptyRow(contextMenuTarget.row + 1)">

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

@ -19,7 +19,7 @@ const page = computed({
<template> <template>
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<span v-if="count !== null && count !== Infinity" class="caption ml-5 text-gray-500"> <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> </span>
<div class="flex-1" /> <div class="flex-1" />

2
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" /> <AntDesignMenuUnfoldOutlined v-if="isOpen" />
<AntDesignMenuFoldOutlined v-else /> <AntDesignMenuFoldOutlined v-else />
Views {{ $t('objects.views') }}
</div> </div>
</a-button> </a-button>
</div> </div>

2
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"> <div class="flex mb-4 items-center gap-2 px-12">
<a-input <a-input
v-model:value="childrenExcludedListPagination.query" v-model:value="childrenExcludedListPagination.query"
placeholder="Filter query" :placeholder="$t('palceholder.filterQuery')"
class="max-w-[200px]" class="max-w-[200px]"
size="small" size="small"
></a-input> ></a-input>

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

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

4
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-input-password v-model:value="password" :placeholder="$t('msg.info.signUp.enterPassword')" />
</a-form-item> </a-form-item>
<!-- todo: i18n --> <!-- Unlock -->
<a-button type="primary" html-type="submit">Unlock</a-button> <a-button type="primary" html-type="submit">{{ $t('general.unlock') }}</a-button>
</a-form> </a-form>
</div> </div>
</a-modal> </a-modal>

Loading…
Cancel
Save