From 62d70543af8fde8fc2c2f33d11370d948da04331 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 17 Jun 2022 19:26:22 +0800
Subject: [PATCH] fix: handle project name length in frontend

---
 packages/nc-gui/components/CreateOrEditProject.vue |  7 +++++--
 packages/nc-gui/pages/project/id.vue               |  7 +++++--
 packages/nc-gui/pages/project/xcdb.vue             | 10 ++++++++--
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/CreateOrEditProject.vue b/packages/nc-gui/components/CreateOrEditProject.vue
index 831b4fa489..fe943c6354 100644
--- a/packages/nc-gui/components/CreateOrEditProject.vue
+++ b/packages/nc-gui/components/CreateOrEditProject.vue
@@ -89,7 +89,7 @@
                       ref="name"
                       v-model="project.title"
                       v-ge="['project', 'name']"
-                      :rules="form.titleRequiredRule"
+                      :rules="form.titleValidationRule"
                       :height="20"
                       :label="$t('placeholder.projName')"
                       autofocus
@@ -963,7 +963,10 @@ export default {
       /** ************** START : form related ****************/
       form: {
         portValidationRule: [v => /^\d+$/.test(v) || 'Not a valid port'],
-        titleRequiredRule: [v => !!v || 'Title is required'],
+        titleValidationRule: [
+          v => !!v || 'Title is required',
+          v => v.length <= 50 || 'Project name exceeds 50 characters',
+        ],
         requiredRule: [v => !!v || 'Field is required'],
         folderRequiredRule: [v => !!v || 'Folder path is required']
       },
diff --git a/packages/nc-gui/pages/project/id.vue b/packages/nc-gui/pages/project/id.vue
index 46069ba5bf..1a70589d7b 100644
--- a/packages/nc-gui/pages/project/id.vue
+++ b/packages/nc-gui/pages/project/id.vue
@@ -84,7 +84,7 @@
                   <v-text-field
                     v-model="project.title"
                     v-ge="['project','name']"
-                    :rules="form.titleRequiredRule"
+                    :rules="form.titleValidationRule"
                     :height="20"
                     label="Enter Project Name"
                     autofocus
@@ -650,7 +650,10 @@ export default {
       /** ************** START : form related ****************/
       form: {
         portValidationRule: [v => /^\d+$/.test(v) || 'Not a valid port'],
-        titleRequiredRule: [v => !!v || 'Title is required'],
+        titleValidationRule: [
+          v => !!v || 'Title is required',
+          v => v.length <= 50 || 'Project name exceeds 50 characters',
+        ],
         requiredRule: [v => !!v || 'Field is required'],
         folderRequiredRule: [v => !!v || 'Folder path is required']
       },
diff --git a/packages/nc-gui/pages/project/xcdb.vue b/packages/nc-gui/pages/project/xcdb.vue
index 18534c3a86..8c1c32aeb3 100644
--- a/packages/nc-gui/pages/project/xcdb.vue
+++ b/packages/nc-gui/pages/project/xcdb.vue
@@ -39,7 +39,7 @@
               :full-width="false"
               class="nc-metadb-project-name"
               :label="$t('placeholder.projName')"
-              :rules="[v => !!v || $t('general.required')]"
+              :rules="form.titleValidationRule"
             />
 
             <!--            <div class="wrapper mb-5 mt-5">
@@ -109,7 +109,13 @@ export default {
            icon: require('@/assets/img/grpc-icon-color.png'),
            type: 'img'
          }, */
-    ]
+    ],
+    form: {
+      titleValidationRule: [
+        v => !!v || 'Title is required',
+        v => v.length <= 50 || 'Project name exceeds 50 characters',
+      ],
+    },
   }),
   computed: {
     typeIcon() {