feat(gui-v2): add project title edit page

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/pages/index/index/index.vue

@@ -81,7 +81,7 @@ const formatTitle = (title: string) =>
                   <div class="col-span-4 text-sm xl:text-md">{{ $t('general.delete') }}</div>
                 </div>
               </a-menu-item>
-              <a-menu-item>
+              <a-menu-item @click.stop="navigateTo(`/project/${project.id}`)">
                 <div class="grid grid-cols-6 cursor-pointer flex items-center p-2">
                   <MdiEditOutline class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
                   <div class="col-span-4 text-sm xl:text-md">{{ $t('general.edit') }}</div>

packages/nc-gui-v2/pages/project/index/[id].vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { onMounted } from '@vue/runtime-core'
+import type { Form } from 'ant-design-vue'
+import type { ProjectType } from 'nocodb-sdk'
+import { ref } from 'vue'
+import { navigateTo, useNuxtApp, useRoute } from '#app'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { projectTitleValidator } from '~/utils/projectCreateUtils'
+import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
+
+const loading = ref(false)
+
+const { $api, $toast, $state } = useNuxtApp()
+const route = useRoute()
+
+const nameValidationRules = [
+  {
+    required: true,
+    message: 'Title is required',
+  },
+  projectTitleValidator,
+]
+
+const formState = reactive({
+  title: '',
+})
+
+const getProject = async () => {
+  try {
+    const result: ProjectType = await $api.project.read(route.params.id as string)
+    formState.title = result.title as string
+  } catch (e: any) {
+    $toast.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+const renameProject = async () => {
+  loading.value = true
+  try {
+    await $api.project.update(route.params.id as string, formState)
+
+    navigateTo(`/nc/${route.params.id}`)
+  } catch (e) {
+    $toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
+  }
+  loading.value = false
+}
+
+const form = ref<typeof Form>()
+
+// hide sidebar
+$state.sidebarOpen.value = false
+
+// select and focus title field on load
+onMounted(async () => {
+  await getProject()
+  const input = form.value?.$el?.querySelector('input')
+  if (input) {
+    input.setSelectionRange(0, formState.title.length)
+    input.focus()
+  }
+})
+</script>
+
+<template>
+  <a-card class="w-[500px] mx-auto !mt-100px shadow-md">
+    <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.editProject') }}</h3>
+
+    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="renameProject">
+      <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
+        <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
+      </a-form-item>
+
+      <a-form-item style="text-align: center" class="mt-2">
+        <a-button type="primary" html-type="submit" class="mx-auto flex justify-self-center">
+          <MaterialSymbolsRocketLaunchOutline class="mr-1" />
+          <span> {{ $t('general.edit') }} </span></a-button
+        >
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>