From fd202851d7e2019f893af8e16d089942f209608a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 22 Feb 2024 16:17:55 +0000
Subject: [PATCH] fix(nc-gui): use I18n instead of hardcoded text

---
 .../nc-gui/components/general/FormBanner.vue  |  2 +-
 .../nc-gui/components/smartsheet/Form.vue     | 64 +++++++++++--------
 .../composables/useSharedFormViewStore.ts     |  9 +--
 packages/nc-gui/lang/en.json                  | 19 ++++--
 4 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/packages/nc-gui/components/general/FormBanner.vue b/packages/nc-gui/components/general/FormBanner.vue
index 26a7a55c52..d34176641f 100644
--- a/packages/nc-gui/components/general/FormBanner.vue
+++ b/packages/nc-gui/components/general/FormBanner.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 interface Props {
-  bannerImageUrl?: string
+  bannerImageUrl?: string | null
 }
 const { bannerImageUrl } = defineProps<Props>()
 </script>
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 72fbcf870c..ef54604a35 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -538,8 +538,8 @@ useEventListener(
 
                 <div v-if="formViewData.submit_another_form || !isPublic" class="text-center mt-4">
                   <NcButton type="primary" size="medium" @click="submitted = false">
-                    {{ $t('activity.submitAnotherForm') }}</NcButton
-                  >
+                    {{ $t('activity.submitAnotherForm') }}
+                  </NcButton>
                 </div>
               </div>
             </div>
@@ -723,10 +723,10 @@ useEventListener(
                           <span data-testid="nc-form-input-label">
                             {{ element.label || element.title }}
                           </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 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 }}
                         </div>
                       </div>
@@ -747,7 +747,7 @@ useEventListener(
                               {{ element.label || element.title }}
                             </span>
                           </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>
                         <a-form-item class="my-0 !mb-2">
                           <div class="flex gap-2 items-center">
@@ -798,7 +798,7 @@ useEventListener(
                               :rows="1"
                               auto-size
                               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"
                               :placeholder="$t('msg.info.formHelpText')"
                               @keydown.enter.prevent
@@ -838,7 +838,7 @@ useEventListener(
                             :rules="[
                               {
                                 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">
                           <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" />
                           <div>
-                            <div class="font-medium text-gray-800">Show on condtions</div>
-                            <div class="text-gray-500">Shows field only when conditions are met</div>
+                            <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
+                            <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
                           </div>
                         </div>
                       </div>
@@ -896,10 +896,10 @@ useEventListener(
 
                   <template #footer>
                     <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"
                     >
-                      Select fields from right panel to add here
+                      {{ $t('title.selectFieldsFromRightPannelToAddHere') }}
                     </div>
                   </template>
                 </Draggable>
@@ -914,7 +914,7 @@ useEventListener(
                     data-title="nc-form-clear"
                     @click="clearForm"
                   >
-                    Crear Form
+                    {{ $t('activity.clearForm') }}
                   </NcButton>
                   <NcButton
                     html-type="submit"
@@ -947,11 +947,10 @@ useEventListener(
               <div class="flex flex-wrap justify-between items-center gap-2">
                 <div class="flex gap-3">
                   <div class="text-base font-bold text-gray-900">
-                    <!-- {{ $t('objects.fields') }} -->
-                    Form Fields
+                    {{ $t('objects.viewType.form') }} {{ $t('objects.fields') }}
                   </div>
-                  <NcBadge color="border-gray-200" class="">
-                    {{ visibleColumns.length }}/{{ localColumns.length }} Field
+                  <NcBadge color="border-gray-200">
+                    {{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
                   </NcBadge>
                 </div>
 
@@ -960,7 +959,6 @@ useEventListener(
                   :trigger="['click']"
                   overlay-class-name="nc-dropdown-form-add-column"
                 >
-                  <!-- v-if="localColumns.length" -->
                   <NcButton
                     type="secondary"
                     size="small"
@@ -970,7 +968,7 @@ useEventListener(
                   >
                     <div class="flex gap-2 items-center">
                       <component :is="iconMap.plus" class="w-4 h-4" />
-                      <span> Add Field </span>
+                      <span> {{ $t('activity.addFieldFromFormView') }} </span>
                     </div>
                   </NcButton>
 
@@ -1020,7 +1018,7 @@ useEventListener(
                   >
                     <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 font-base">Select all fields</div>
+                      <div class="flex-1 font-base">{{ $t('activity.selectAllFields') }}</div>
                       <NcSwitch :checked="visibleColumns.length === localColumns.length" @change="handleAddOrRemoveAllColumns" />
                     </div>
                   </div>
@@ -1057,7 +1055,7 @@ useEventListener(
                                 {{ field.label || field.title }}
                               </span>
                             </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>
                           <NcSwitch :checked="!!field.show" :disabled="field.required" />
                         </div>
@@ -1083,10 +1081,10 @@ useEventListener(
             >
               <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
                 <!-- 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 class="text-gray-800">Background Color</div>
+                  <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
                   <div class="flex justify-start">
                     <LazyGeneralColorPicker
                       :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" />
-                  <span class="ml-4">Hide NocoDB Branding</span>
+                  <span class="ml-4">{{ $t('labels.hideNocodbBranding') }}</span>
                 </div>
               </div>
 
               <div class="p-4 flex flex-col space-y-4">
                 <!-- Post Form Submission Settings -->
                 <div class="text-base font-bold text-gray-900">
-                  Post Form Submission Settings
-                  <!-- {{ $t('msg.info.afterFormSubmitted') }} -->
+                  {{ $t('msg.info.postFormSubmissionSettings') }}
                 </div>
 
                 <!-- Show this message -->
                 <div>
                   <div class="text-gray-800 mb-2">
                     Display Message
-                    <!-- {{ $t('msg.info.showMessage') }} -->
+                    <!-- {{ $t('msg.info.formDisplayMessage') }} -->
                   </div>
                   <a-textarea
                     v-model:value="formViewData.success_msg"
@@ -1240,9 +1237,17 @@ useEventListener(
   }
   &:not(.nc-cell-longtext) {
     @apply px-2 py-2;
+
+    :deep(textarea) {
+      @apply !p-2;
+    }
   }
-  :deep(textarea) {
-    @apply !p-2;
+
+  &.nc-cell-json {
+    @apply h-auto;
+    & > div {
+      @apply w-full;
+    }
   }
 }
 
@@ -1264,6 +1269,9 @@ useEventListener(
 .nc-input-required-error {
   max-width: 100%;
   white-space: pre-line;
+  :deep(.ant-form-item-explain-error) {
+    @apply mt-2;
+  }
 }
 
 :deep(.nc-cell-attachment) {
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 08578be8b1..86413ecab9 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -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(() =>
     columns.value?.filter((c) => c.show).filter((col) => !isVirtualCol(col) || isLinksOrLTAR(col.uidt)),
@@ -158,7 +159,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         !isVirtualCol(column) &&
         ((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 (
         isLinksOrLTAR(column) &&
         column.colOptions &&
@@ -168,13 +169,13 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
         if ((col && col.rqd && !col.cdf) || column.required) {
           if (col) {
-            obj.virtual[column.title!] = { required: fieldRequired(column.label || column.title) }
+            obj.virtual[column.title!] = { required: fieldRequired() }
           }
         }
       } else if (isVirtualCol(column) && column.required) {
         obj.virtual[column.title!] = {
           minLength: minLength(1),
-          required: fieldRequired(column.label || column.title),
+          required: fieldRequired(),
         }
       }
     }
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 61b23ad71a..4c1c0b7a16 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -421,7 +421,8 @@
       "restrict": "Restrict",
       "setNull": "Set NULL",
       "setDefault": "Set Default"
-    }
+    },
+    "selectFieldsFromRightPannelToAddHere": "Select fields from right panel to add here"
   },
   "labels": {
     "selectYear": "Select Year",
@@ -683,7 +684,12 @@
       "incompleteConfiguration": "Incomplete configuration",
       "selectField": "Select a field",
       "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": {
     "goToToday": "Go to Today",
@@ -907,7 +913,10 @@
       "openInOpenStreetMap": "OSM"
     },
     "toggleMobileMode": "Toggle Mobile Mode",
-    "startCommenting": "Start commenting!"
+    "startCommenting": "Start commenting!",
+    "clearForm": "Clear Form",
+    "addFieldFromFormView": "Add Field",
+    "selectAllFields": "Select all fields"
   },
   "tooltip": {
     "reachedSourceLimit": "Limited to only one data source for the moment",
@@ -1166,14 +1175,14 @@
       "afterEnablePwd": "Access is password restricted",
       "privateLink": "This view is shared via a private link",
       "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",
       "submitAnotherForm": "Show 'Submit Another Form' button",
       "showBlankForm": "Show a blank form after 5 seconds",
       "emailForm": "E-mail me at",
       "showSysFields": "Show system fields",
       "filterAutoApply": "Auto apply",
-      "showMessage": "Show this message",
+      "formDisplayMessage": "Display Message",
       "viewNotShared": "Current view is not shared!",
       "showAllViews": "Show all shared views of this table",
       "collabView": "Collaborators with edit permissions or higher can change the view configuration.",