From 3491d45a05da95d53c46792a6dc8a42f0a637fa3 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 10 Jul 2022 11:11:44 +0200
Subject: [PATCH] feat(gui-v2): move grid view to nested page

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/nc-gui-v2/pages/projects/index.vue   | 151 ++----------------
 .../nc-gui-v2/pages/projects/index/index.vue  | 149 +++++++++++++++++
 2 files changed, 162 insertions(+), 138 deletions(-)
 create mode 100644 packages/nc-gui-v2/pages/projects/index/index.vue

diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index 1367312890..88701ebcde 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -1,25 +1,13 @@
 <script lang="ts" setup>
-import type { ProjectType } from 'nocodb-sdk'
-import { navigateTo } from '#app'
-import useColors from '~/composables/useColors'
-import MdiStarOutline from '~icons/mdi/star-outline'
-import MdiMenuDown from '~icons/mdi/menu-down'
-import MdiDeleteOutline from '~icons/mdi/delete-outline'
-import MdiPlus from '~icons/mdi/plus'
-import MdiDatabaseOutline from '~icons/mdi/database-outline'
+import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
+import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
 
-const { $api, $e } = useNuxtApp()
-const { getColorByIndex } = useColors()
+const { $api } = useNuxtApp()
 
 const response = await $api.project.list({})
 const projects = $ref(response.list)
 const activePage = $ref()
 
-const openProject = async (project: ProjectType) => {
-  await navigateTo(`/nc/${project.id}`)
-  $e('a:project:open', { count: projects.length })
-}
-
 const navDrawerOptions = [
   {
     title: 'My NocoDB',
@@ -38,21 +26,14 @@ const navDrawerOptions = [
     icon: 'mdi-star',
   },
 ]
-
-const formatTitle = (title: string) =>
-  title
-    .split(' ')
-    .map((w) => w[0])
-    .slice(0, 2)
-    .join('')
 </script>
 
 <template>
   <NuxtLayout>
     <template #sidebar>
       <v-navigation-drawer :permanent="true" width="300">
-        <div class="flex flex-column h-100">
-          <div class="advance-menu flex-1 pt-8" />
+        <div class="flex flex-col h-full">
+          <div class="flex-1 pt-8" />
           <v-divider />
           <!-- todo: implement extras component
             <Extras class="pl-6" />
@@ -63,8 +44,8 @@ const formatTitle = (title: string) =>
       </v-navigation-drawer>
     </template>
 
-    <v-container class="flex-grow-1 py-9 px-15 h-100" style="overflow-y: auto">
-      <div class="d-flex">
+    <v-container class="flex-1 py-9 px-15 h-full">
+      <div class="flex">
         <div class="prose-xl p-2">
           {{ $t('title.myProject') }}
         </div>
@@ -72,122 +53,16 @@ const formatTitle = (title: string) =>
         <h2 class="display-1 ml-5 mb-7 font-weight-medium textColor--text text--lighten-2 flex-grow-1">
           {{ activePage }}
         </h2>
-      </div>
-      <v-divider class="mb-3" />
-      <div class="nc-project-item-container flex flex-wrap relative d-100">
-        <div
-          v-for="(project, i) of projects"
-          :key="project.id"
-          class="group nc-project-item elevation-0 flex items-center justify-center flex-column py-5"
-        >
-          <div
-            class="nc-project-thumbnail cursor-pointer uppercase flex items-center justify-center transition-color ease duration-300"
-            :style="{ backgroundColor: getColorByIndex(i) }"
-            @click="openProject(project)"
-          >
-            {{ formatTitle(project.title) }}
-
-            <MdiStarOutline class="nc-project-star-icon group-hover:opacity-100" @click.stop />
-
-            <v-menu>
-              <template #activator="{ props }">
-                <MdiMenuDown class="nc-project-option-menu-icon group-hover:opacity-100" @click.stop="props.onClick" />
-              </template>
-
-              <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2">
-                <div class="grid grid-cols-6 cursor-pointer hover:bg-gray-200 flex items-center p-2" @click.stop>
-                  <MdiDeleteOutline class="col-span-2 mr-1 mt-[1px] text-red text-lg" />
-                  <div class="col-span-4 text-sm xl:text-md">{{ $t('general.delete') }}</div>
-                </div>
-              </v-list>
-            </v-menu>
-          </div>
-
-          <div class="text-center pa-2 nc-project-title body-2 font-weight-medium">
-            {{ project.title }}
-          </div>
-        </div>
 
-        <div class="w-[150px] flex items-center justify-center flex-column">
-          <v-menu>
-            <template #activator="{ props }">
-              <div
-                class="cursor-pointer nc-project-thumbnail opacity-50 hover:opacity-100 bg-gray-400 uppercase flex items-center justify-center transition-color ease duration-300"
-                @click="props.onClick"
-              >
-                <MdiPlus />
-              </div>
-              <div class="text-center p-2">
-                {{ $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('/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('/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')" />
-              </div>
-            </v-list>
-          </v-menu>
+        <div class="self-end">
+          <MaterialSymbolsFormatListBulletedRounded />
+          <MaterialSymbolsGridView />
         </div>
       </div>
+      <v-divider class="mb-3" />
+
+      <NuxtPage :projects="projects" />
     </v-container>
   </NuxtLayout>
 </template>
 
-<style scoped>
-.nc-project-item {
-  @apply w-[150px] items-center;
-}
-
-.nc-project-thumbnail {
-  height: 100px;
-  width: 100px;
-  font-size: 50px;
-  color: white;
-  font-weight: bold;
-  border-radius: 4px;
-  margin-inside: auto;
-  position: relative;
-}
-
-.nc-project-option-menu-icon,
-.nc-project-star-icon {
-  width: auto;
-  height: 1.5rem;
-  position: absolute;
-  opacity: 0;
-  transition: 0.3s opacity;
-}
-
-.nc-project-star-icon {
-  @apply top-1 right-1 transform hover:(scale-120 text-primary/75) transition-all duration-100 ease;
-}
-
-.nc-project-option-menu-icon {
-  @apply bottom-1 right-1 transform hover:(scale-150 text-gray-500) transition-all duration-100 ease;
-}
-
-.nc-project-title {
-  text-transform: capitalize;
-  text-align: center;
-}
-
-.nc-project-thumbnail {
-  background-image: linear-gradient(#0002, #0002);
-  opacity: 0.5;
-}
-
-.nc-project-thumbnail:hover {
-  opacity: 1;
-}
-</style>
diff --git a/packages/nc-gui-v2/pages/projects/index/index.vue b/packages/nc-gui-v2/pages/projects/index/index.vue
new file mode 100644
index 0000000000..4eb5ded804
--- /dev/null
+++ b/packages/nc-gui-v2/pages/projects/index/index.vue
@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import type { ProjectType } from 'nocodb-sdk'
+import { navigateTo } from '#app'
+import useColors from '~/composables/useColors'
+import MdiStarOutline from '~icons/mdi/star-outline'
+import MdiMenuDown from '~icons/mdi/menu-down'
+import MdiDeleteOutline from '~icons/mdi/delete-outline'
+import MdiPlus from '~icons/mdi/plus'
+import MdiDatabaseOutline from '~icons/mdi/database-outline'
+
+interface Props {
+  projects: ProjectType[]
+}
+
+const { projects } = defineProps<Props>()
+
+const { $e } = useNuxtApp()
+
+const { getColorByIndex } = useColors()
+
+const openProject = async (project: ProjectType) => {
+  await navigateTo(`/nc/${project.id}`)
+  $e('a:project:open', { count: projects.length })
+}
+
+const formatTitle = (title: string) =>
+  title
+    .split(' ')
+    .map((w) => w[0])
+    .slice(0, 2)
+    .join('')
+</script>
+
+<template>
+  <div class="nc-project-item-container flex flex-wrap relative d-100">
+    <div
+      v-for="(project, i) of projects"
+      :key="project.id"
+      class="group nc-project-item elevation-0 flex items-center justify-center flex-column py-5"
+    >
+      <div
+        class="nc-project-thumbnail cursor-pointer uppercase flex items-center justify-center transition-color ease duration-300"
+        :style="{ backgroundColor: getColorByIndex(i) }"
+        @click="openProject(project)"
+      >
+        {{ formatTitle(project.title) }}
+
+        <MdiStarOutline class="nc-project-star-icon group-hover:opacity-100" @click.stop />
+
+        <v-menu>
+          <template #activator="{ props }">
+            <MdiMenuDown class="nc-project-option-menu-icon group-hover:opacity-100" @click.stop="props.onClick" />
+          </template>
+
+          <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2">
+            <div class="grid grid-cols-6 cursor-pointer hover:bg-gray-200 flex items-center p-2" @click.stop>
+              <MdiDeleteOutline class="col-span-2 mr-1 mt-[1px] text-red text-lg" />
+              <div class="col-span-4 text-sm xl:text-md">{{ $t('general.delete') }}</div>
+            </div>
+          </v-list>
+        </v-menu>
+      </div>
+
+      <div class="text-center pa-2 nc-project-title body-2 font-weight-medium">
+        {{ project.title }}
+      </div>
+    </div>
+
+    <div class="w-[150px] flex items-center justify-center flex-column">
+      <v-menu>
+        <template #activator="{ props }">
+          <div
+            class="cursor-pointer nc-project-thumbnail opacity-50 hover:opacity-100 bg-gray-400 uppercase flex items-center justify-center transition-color ease duration-300"
+            @click="props.onClick"
+          >
+            <MdiPlus />
+          </div>
+          <div class="text-center p-2">
+            {{ $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('/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('/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')" />
+          </div>
+        </v-list>
+      </v-menu>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.nc-project-item {
+  @apply w-[150px] items-center;
+}
+
+.nc-project-thumbnail {
+  height: 100px;
+  width: 100px;
+  font-size: 50px;
+  color: white;
+  font-weight: bold;
+  border-radius: 4px;
+  margin-inside: auto;
+  position: relative;
+}
+
+.nc-project-option-menu-icon,
+.nc-project-star-icon {
+  width: auto;
+  height: 1.5rem;
+  position: absolute;
+  opacity: 0;
+  transition: 0.3s opacity;
+}
+
+.nc-project-star-icon {
+  @apply top-1 right-1 transform hover:(scale-120 text-primary/75) transition-all duration-100 ease;
+}
+
+.nc-project-option-menu-icon {
+  @apply bottom-1 right-1 transform hover:(scale-150 text-gray-500) transition-all duration-100 ease;
+}
+
+.nc-project-title {
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.nc-project-thumbnail {
+  background-image: linear-gradient(#0002, #0002);
+  opacity: 0.5;
+}
+
+.nc-project-thumbnail:hover {
+  opacity: 1;
+}
+</style>