github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): use I18n instead of hardcoded text

pull/7664/head
Ramesh Mane 9 months ago
parent
cccc2babfc
commit
fd202851d7
4 changed files with 56 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/nc-gui/components/general/FormBanner.vue
  2. 62
      packages/nc-gui/components/smartsheet/Form.vue
  3. 9
      packages/nc-gui/composables/useSharedFormViewStore.ts
  4. 19
      packages/nc-gui/lang/en.json

2
packages/nc-gui/components/general/FormBanner.vue
Unescape View File

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
interface Props { interface Props {
bannerImageUrl?: string bannerImageUrl?: string | null
} }
const { bannerImageUrl } = defineProps<Props>() const { bannerImageUrl } = defineProps<Props>()
</script> </script>

62
packages/nc-gui/components/smartsheet/Form.vue
Unescape View File

@ -538,8 +538,8 @@ useEventListener(
<div v-if="formViewData.submit_another_form || !isPublic" class="text-center mt-4"> <div v-if="formViewData.submit_another_form || !isPublic" class="text-center mt-4">
<NcButton type="primary" size="medium" @click="submitted = false"> <NcButton type="primary" size="medium" @click="submitted = false">
{{ $t('activity.submitAnotherForm') }}</NcButton {{ $t('activity.submitAnotherForm') }}
> </NcButton>
</div> </div>
</div> </div>
</div> </div>
@ -723,10 +723,10 @@ useEventListener(
<span data-testid="nc-form-input-label"> <span data-testid="nc-form-input-label">
{{ element.label || element.title }} {{ element.label || element.title }}
</span> </span>
<span v-if="element.required" class="text-red-500">&nbsp;*</span> <span v-if="isRequired(element, element.required)" class="text-red-500">&nbsp;*</span>
</div> </div>
<div class="nc-form-help-text text-gray-500 text-[13px] leading-5 mt-2" data-testid="nc-form-help-text"> <div class="nc-form-help-text text-gray-500 text-sm mt-2" data-testid="nc-form-help-text">
{{ element.description }} {{ element.description }}
</div> </div>
</div> </div>
@ -747,7 +747,7 @@ useEventListener(
{{ element.label || element.title }} {{ element.label || element.title }}
</span> </span>
</NcTooltip> </NcTooltip>
<span v-if="element.required" class="text-red-500">&nbsp;*</span> <span v-if="isRequired(element, element.required)" class="text-red-500">&nbsp;*</span>
</div> </div>
<a-form-item class="my-0 !mb-2"> <a-form-item class="my-0 !mb-2">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
@ -798,7 +798,7 @@ useEventListener(
:rows="1" :rows="1"
auto-size auto-size
hide-details hide-details
class="form-meta-input text-sm nc-form-input-help-text" class="form-meta-input nc-form-input-help-text"
data-testid="nc-form-input-help-text" data-testid="nc-form-input-help-text"
:placeholder="$t('msg.info.formHelpText')" :placeholder="$t('msg.info.formHelpText')"
@keydown.enter.prevent @keydown.enter.prevent
@ -838,7 +838,7 @@ useEventListener(
:rules="[ :rules="[
{ {
required: isRequired(element, element.required), required: isRequired(element, element.required),
message: `${element.label || element.title} is required`, message: `${$t('msg.error.fieldRequired', { value: 'This Field' })}`,
}, },
]" ]"
> >
@ -886,8 +886,8 @@ useEventListener(
<div class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg"> <div class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg">
<a-switch v-e="['a:form-view:field:show-on-condition']" size="small" /> <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" />
<div> <div>
<div class="font-medium text-gray-800">Show on condtions</div> <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
<div class="text-gray-500">Shows field only when conditions are met</div> <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -896,10 +896,10 @@ useEventListener(
<template #footer> <template #footer>
<div <div
v-if="!visibleColumns.length" v-if="!visibleColumns.length && isEditable"
class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center" class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
> >
Select fields from right panel to add here {{ $t('title.selectFieldsFromRightPannelToAddHere') }}
</div> </div>
</template> </template>
</Draggable> </Draggable>
@ -914,7 +914,7 @@ useEventListener(
data-title="nc-form-clear" data-title="nc-form-clear"
@click="clearForm" @click="clearForm"
> >
Crear Form {{ $t('activity.clearForm') }}
</NcButton> </NcButton>
<NcButton <NcButton
html-type="submit" html-type="submit"
@ -947,11 +947,10 @@ useEventListener(
<div class="flex flex-wrap justify-between items-center gap-2"> <div class="flex flex-wrap justify-between items-center gap-2">
<div class="flex gap-3"> <div class="flex gap-3">
<div class="text-base font-bold text-gray-900"> <div class="text-base font-bold text-gray-900">
<!-- {{ $t('objects.fields') }} --> {{ $t('objects.viewType.form') }} {{ $t('objects.fields') }}
Form Fields
</div> </div>
<NcBadge color="border-gray-200" class=""> <NcBadge color="border-gray-200">
{{ visibleColumns.length }}/{{ localColumns.length }} Field {{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
</NcBadge> </NcBadge>
</div> </div>
@ -960,7 +959,6 @@ useEventListener(
:trigger="['click']" :trigger="['click']"
overlay-class-name="nc-dropdown-form-add-column" overlay-class-name="nc-dropdown-form-add-column"
> >
<!-- v-if="localColumns.length" -->
<NcButton <NcButton
type="secondary" type="secondary"
size="small" size="small"
@ -970,7 +968,7 @@ useEventListener(
> >
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<component :is="iconMap.plus" class="w-4 h-4" /> <component :is="iconMap.plus" class="w-4 h-4" />
<span> Add Field </span> <span> {{ $t('activity.addFieldFromFormView') }} </span>
</div> </div>
</NcButton> </NcButton>
@ -1020,7 +1018,7 @@ useEventListener(
> >
<div class="w-4 h-4 flex-none mr-2"></div> <div class="w-4 h-4 flex-none mr-2"></div>
<div class="flex-1 flex flex-row items-center truncate cursor-pointer"> <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
<div class="flex-1 font-base">Select all fields</div> <div class="flex-1 font-base">{{ $t('activity.selectAllFields') }}</div>
<NcSwitch :checked="visibleColumns.length === localColumns.length" @change="handleAddOrRemoveAllColumns" /> <NcSwitch :checked="visibleColumns.length === localColumns.length" @change="handleAddOrRemoveAllColumns" />
</div> </div>
</div> </div>
@ -1057,7 +1055,7 @@ useEventListener(
{{ field.label || field.title }} {{ field.label || field.title }}
</span> </span>
</NcTooltip> </NcTooltip>
<span v-if="field.required" class="text-red-500">&nbsp;*</span> <span v-if="isRequired(field, field.required)" class="text-red-500">&nbsp;*</span>
</div> </div>
<NcSwitch :checked="!!field.show" :disabled="field.required" /> <NcSwitch :checked="!!field.show" :disabled="field.required" />
</div> </div>
@ -1083,10 +1081,10 @@ useEventListener(
> >
<div class="p-4 flex flex-col space-y-4 border-b border-gray-200"> <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
<!-- Appearance Settings --> <!-- Appearance Settings -->
<div class="text-base font-bold text-gray-900">Appearance Settings</div> <div class="text-base font-bold text-gray-900">{{ $t('labels.appearanceSettings') }}</div>
<div> <div>
<div class="text-gray-800">Background Color</div> <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
<div class="flex justify-start"> <div class="flex justify-start">
<LazyGeneralColorPicker <LazyGeneralColorPicker
:model-value="(formViewData.meta as Record<string,any>).background_color" :model-value="(formViewData.meta as Record<string,any>).background_color"
@ -1136,22 +1134,21 @@ useEventListener(
" "
/> />
<a-switch v-else :checked="false" size="small" :disabled="true" /> <a-switch v-else :checked="false" size="small" :disabled="true" />
<span class="ml-4">Hide NocoDB Branding</span> <span class="ml-4">{{ $t('labels.hideNocodbBranding') }}</span>
</div> </div>
</div> </div>
<div class="p-4 flex flex-col space-y-4"> <div class="p-4 flex flex-col space-y-4">
<!-- Post Form Submission Settings --> <!-- Post Form Submission Settings -->
<div class="text-base font-bold text-gray-900"> <div class="text-base font-bold text-gray-900">
Post Form Submission Settings {{ $t('msg.info.postFormSubmissionSettings') }}
<!-- {{ $t('msg.info.afterFormSubmitted') }} -->
</div> </div>
<!-- Show this message --> <!-- Show this message -->
<div> <div>
<div class="text-gray-800 mb-2"> <div class="text-gray-800 mb-2">
Display Message Display Message
<!-- {{ $t('msg.info.showMessage') }} --> <!-- {{ $t('msg.info.formDisplayMessage') }} -->
</div> </div>
<a-textarea <a-textarea
v-model:value="formViewData.success_msg" v-model:value="formViewData.success_msg"
@ -1240,10 +1237,18 @@ useEventListener(
} }
&:not(.nc-cell-longtext) { &:not(.nc-cell-longtext) {
@apply px-2 py-2; @apply px-2 py-2;
}
:deep(textarea) { :deep(textarea) {
@apply !p-2; @apply !p-2;
} }
}
&.nc-cell-json {
@apply h-auto;
& > div {
@apply w-full;
}
}
} }
.form-meta-input { .form-meta-input {
@ -1264,6 +1269,9 @@ useEventListener(
.nc-input-required-error { .nc-input-required-error {
max-width: 100%; max-width: 100%;
white-space: pre-line; white-space: pre-line;
:deep(.ant-form-item-explain-error) {
@apply mt-2;
}
} }
:deep(.nc-cell-attachment) { :deep(.nc-cell-attachment) {

9
packages/nc-gui/composables/useSharedFormViewStore.ts
Unescape View File

@ -76,7 +76,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
}), }),
) )
const fieldRequired = (fieldName = 'Value') => helpers.withMessage(t('msg.error.fieldRequired', { value: fieldName }), required) const fieldRequired = (fieldName = 'This Field') =>
helpers.withMessage(t('msg.error.fieldRequired', { value: fieldName }), required)
const formColumns = computed(() => const formColumns = computed(() =>
columns.value?.filter((c) => c.show).filter((col) => !isVirtualCol(col) || isLinksOrLTAR(col.uidt)), columns.value?.filter((c) => c.show).filter((col) => !isVirtualCol(col) || isLinksOrLTAR(col.uidt)),
@ -158,7 +159,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
!isVirtualCol(column) && !isVirtualCol(column) &&
((column.rqd && !column.cdf) || (column.pk && !(column.ai || column.cdf)) || column.required) ((column.rqd && !column.cdf) || (column.pk && !(column.ai || column.cdf)) || column.required)
) { ) {
obj.localState[column.title!] = { required: fieldRequired(column.label || column.title) } obj.localState[column.title!] = { required: fieldRequired() }
} else if ( } else if (
isLinksOrLTAR(column) && isLinksOrLTAR(column) &&
column.colOptions && column.colOptions &&
@ -168,13 +169,13 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
if ((col && col.rqd && !col.cdf) || column.required) { if ((col && col.rqd && !col.cdf) || column.required) {
if (col) { if (col) {
obj.virtual[column.title!] = { required: fieldRequired(column.label || column.title) } obj.virtual[column.title!] = { required: fieldRequired() }
} }
} }
} else if (isVirtualCol(column) && column.required) { } else if (isVirtualCol(column) && column.required) {
obj.virtual[column.title!] = { obj.virtual[column.title!] = {
minLength: minLength(1), minLength: minLength(1),
required: fieldRequired(column.label || column.title), required: fieldRequired(),
} }
} }
} }

19
packages/nc-gui/lang/en.json
Unescape View File

@ -421,7 +421,8 @@
"restrict": "Restrict", "restrict": "Restrict",
"setNull": "Set NULL", "setNull": "Set NULL",
"setDefault": "Set Default" "setDefault": "Set Default"
} },
"selectFieldsFromRightPannelToAddHere": "Select fields from right panel to add here"
}, },
"labels": { "labels": {
"selectYear": "Select Year", "selectYear": "Select Year",
@ -683,7 +684,12 @@
"incompleteConfiguration": "Incomplete configuration", "incompleteConfiguration": "Incomplete configuration",
"selectField": "Select a field", "selectField": "Select a field",
"selectFieldLabel": "Make changes to field properties by selecting a field from the list" "selectFieldLabel": "Make changes to field properties by selecting a field from the list"
} },
"appearanceSettings":"Appearance Settings",
"backgroundColor":"Background Color",
"hideNocodbBranding":"Hide NocoDB Branding",
"showOnConditions": "Show on condtions",
"showFieldOnConditionsMet":"Shows field only when conditions are met"
}, },
"activity": { "activity": {
"goToToday": "Go to Today", "goToToday": "Go to Today",
@ -907,7 +913,10 @@
"openInOpenStreetMap": "OSM" "openInOpenStreetMap": "OSM"
}, },
"toggleMobileMode": "Toggle Mobile Mode", "toggleMobileMode": "Toggle Mobile Mode",
"startCommenting": "Start commenting!" "startCommenting": "Start commenting!",
"clearForm": "Clear Form",
"addFieldFromFormView": "Add Field",
"selectAllFields": "Select all fields"
}, },
"tooltip": { "tooltip": {
"reachedSourceLimit": "Limited to only one data source for the moment", "reachedSourceLimit": "Limited to only one data source for the moment",
@ -1166,14 +1175,14 @@
"afterEnablePwd": "Access is password restricted", "afterEnablePwd": "Access is password restricted",
"privateLink": "This view is shared via a private link", "privateLink": "This view is shared via a private link",
"privateLinkAdditionalInfo": "People with private link can only see cells visible in this view", "privateLinkAdditionalInfo": "People with private link can only see cells visible in this view",
"afterFormSubmitted": "After form is submitted", "postFormSubmissionSettings": "Post Form Submission Settings",
"apiOptions": "Access Base via", "apiOptions": "Access Base via",
"submitAnotherForm": "Show 'Submit Another Form' button", "submitAnotherForm": "Show 'Submit Another Form' button",
"showBlankForm": "Show a blank form after 5 seconds", "showBlankForm": "Show a blank form after 5 seconds",
"emailForm": "E-mail me at", "emailForm": "E-mail me at",
"showSysFields": "Show system fields", "showSysFields": "Show system fields",
"filterAutoApply": "Auto apply", "filterAutoApply": "Auto apply",
"showMessage": "Show this message", "formDisplayMessage": "Display Message",
"viewNotShared": "Current view is not shared!", "viewNotShared": "Current view is not shared!",
"showAllViews": "Show all shared views of this table", "showAllViews": "Show all shared views of this table",
"collabView": "Collaborators with edit permissions or higher can change the view configuration.", "collabView": "Collaborators with edit permissions or higher can change the view configuration.",

Write Preview
Loading…
Cancel
Save