feat: move project create pages to subpages

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

packages/nc-gui-v2/components.d.ts

@@ -7,6 +7,9 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ACard: typeof import('ant-design-vue/es')['Card']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']

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

@@ -81,14 +81,14 @@ const visible = ref(true)
             <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
               <div
                 class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                @click="navigateTo('/create')"
+                @click="navigateTo('/project/create')"
               >
                 <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
                 <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
               </div>
               <div
                 class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                @click="navigateTo('/create-external')"
+                @click="navigateTo('/project/create-external')"
               >
                 <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
                 <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />

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

@@ -50,13 +50,16 @@ const formatTitle = (title: string) =>
           </div>
         </template>
         <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
-          <div class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2" @click="navigateTo('/create')">
+          <div
+            class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+            @click="navigateTo('/projects/create')"
+          >
             <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
             <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
           </div>
           <div
             class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-            @click="navigateTo('/create-external')"
+            @click="navigateTo('/projects/create-external')"
           >
             <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
             <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />

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

@@ -13,7 +13,7 @@ const { projects = [] } = defineProps<Props>()
 
 const emit = defineEmits(['delete-project'])
 
-const { $e } = useNuxtApp()
+const { $e } = useNxuxtApp()
 
 const openProject = async (project: ProjectType) => {
   await navigateTo(`/nc/${project.id}`)

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

@@ -1,150 +1,13 @@
-<script lang="ts" setup>
-import { createVNode } from '@vue/runtime-core'
-import { Modal } from 'ant-design-vue'
-import type { ProjectType } from 'nocodb-sdk'
-import { useToast } from 'vue-toastification'
-import { navigateTo } from '#app'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
-import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
-import MdiPlus from '~icons/mdi/plus'
-import MdiDatabaseOutline from '~icons/mdi/database-outline'
-import MdiFolderOutline from '~icons/mdi/folder-outline'
-import ExclamationCircleOutlined from '~icons/mdi/information-outline'
-
-const navDrawerOptions = [
-  {
-    title: 'My NocoDB',
-    icon: MdiFolderOutline,
-  },
-  /* todo: implement the api and bring back the options below
-   {
-    title: "Shared With Me",
-    icon: MdiAccountGroup
-  },
-  {
-    title: "Recent",
-    icon: MdiClockOutline
-  },
-  {
-    title: "Starred",
-    icon: MdiStar
-  } */
-]
-
-const route = useRoute()
-
-const { $api, $state } = useNuxtApp()
-const toast = useToast()
-
-const response = await $api.project.list({})
-const projects = $ref(response.list)
-const activePage = $ref(navDrawerOptions[0].title)
-const deleteProject = (project: ProjectType) => {
-  Modal.confirm({
-    title: 'Do you want to delete the project?',
-    // icon: createVNode(ExclamationCircleOutlined),
-    content: 'Some descriptions',
-    okText: 'Yes',
-    okType: 'danger',
-    cancelText: 'No',
-    async onOk() {
-      try {
-        await $api.project.delete(project.id as string)
-        projects.splice(projects.indexOf(project), 1)
-      } catch (e) {
-        toast.error(await extractSdkResponseErrorMsg(e))
-      }
-    },
-  })
-}
-
-const visible = ref(true)
-</script>
-
 <template>
   <NuxtLayout>
-    <template #sidebar>
+    <div class="w-full nc-container">
-      <div class="flex flex-col h-full">
+      <NuxtPage />
-        <div class="flex p-4">
-          <v-menu class="select-none">
-            <template #activator="{ props }">
-              <div
-                class="color-transition hover:(bg-gray-100 dark:bg-secondary/25) dark:(bg-secondary/50 !text-white shadow-gray-600) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
-                @click="props.onClick"
-              >
-                <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
-                {{ $t('title.newProj') }}
-              </div>
-            </template>
-
-            <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
-              <div
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                @click="navigateTo('/create')"
-              >
-                <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
-                <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
-              </div>
-              <div
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                @click="navigateTo('/create-external')"
-              >
-                <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
-                <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
-              </div>
-            </v-list>
-          </v-menu>
-        </div>
-
-        <a-menu class="mx-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
-          <a-menu-item
-            v-for="(option, index) in navDrawerOptions"
-            :key="index"
-            class="f!rounded-r-lg"
-            @click="activePage = option.title"
-          >
-            <div class="flex items-center gap-4">
-              <component :is="option.icon" />
-
-              <span class="font-semibold">
-                {{ option.title }}
-              </span>
-            </div>
-          </a-menu-item>
-        </a-menu>
-
-        <general-social />
-
-        <general-sponsors :nav="true" />
     </div>
-    </template>
-
-    <v-container class="flex-1 mb-12">
-      <div class="flex">
-        <div class="flex-1 text-2xl md:text-4xl font-bold text-gray-500 dark:text-white p-4">
-          {{ activePage }}
-        </div>
-
-        <div class="self-end flex text-4xl mb-1">
-          <MaterialSymbolsGridView
-            :class="route.name === 'projects-index' ? 'text-primary dark:(!text-secondary/75)' : ''"
-            class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/projects')"
-          />
-          <MaterialSymbolsFormatListBulletedRounded
-            :class="route.name === 'projects-index-list' ? 'text-primary dark:(!text-secondary/75)' : ''"
-            class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/projects/list')"
-          />
-        </div>
-      </div>
-
-      <a-divider class="!mb-4 lg:(!mb-8)" />
-
-      <NuxtPage :projects="projects" @delete-project="deleteProject" />
-    </v-container>
-
-    <a-modal></a-modal>
   </NuxtLayout>
 </template>
+
+<style scoped>
+.nc-container {
+  height: calc(100vh - var(--header-height));
+}
+</style>

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

@@ -28,11 +28,50 @@ const createProject = async () => {
   }
   loading.value = false
 }
+
+const formState = reactive({
+  username: '',
+  password: '',
+  remember: true,
+})
+const onFinish = (values: any) => {
+  console.log('Success:', values)
+}
+
+const onFinishFailed = (errorInfo: any) => {
+  console.log('Failed:', errorInfo)
+}
 </script>
 
 <template>
-  <NuxtLayout>
+  <a-card class="w-[500px] mx-auto mt-10">
-    <v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
+
+    <h3 class="text-3xl text-center"> {{ $t('activity.createProject') }}</h3>
+
+    <a-form
+      :model="formState"
+      name="basic"
+      layout="vertical"
+      autocomplete="off"
+      @finish="onFinish"
+      @finishFailed="onFinishFailed"
+    >
+      <a-form-item
+        :label="$t('labels.projName')"
+        name="title"
+        :rules="[{ required: true, message: 'Please input your username!' }]"
+      >
+        <a-input  class="nc-metadb-project-name" v-model:value="formState.username" />
+      </a-form-item>
+
+      <a-form-item style="text-align: center">
+        <a-button type="primary" html-type="submit" class="mx-auto flex justify-self-center">
+          <MaterialSymbolsRocketLaunchOutline class="mr-1" /> <span> {{ $t('general.create') }} </span></a-button
+        >
+      </a-form-item>
+    </a-form>
+  </a-card>
+  <!--    <v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
       <v-container fluid class="flex justify-center items-center h-3/4">
         <v-card max-width="500">
           <v-container class="pb-10 px-12">
@@ -55,20 +94,5 @@ const createProject = async () => {
         </v-card>
       </v-container>
     </v-form>
-  </NuxtLayout>
+  </NuxtLayout> -->
 </template>
-
-<style scoped>
-:deep(label) {
-  font-size: 0.75rem;
-}
-
-.wrapper {
-  border: 2px solid var(--v-backgroundColor-base);
-  border-radius: 4px;
-}
-
-.main {
-  height: calc(100vh - 48px);
-}
-</style>