From 4f37bd8f18863f6117c91a16d35be040e77cf026 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 11 Jul 2022 14:58:44 +0200
Subject: [PATCH] feat(gui-v2): add list view

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/nc-gui-v2/pages/projects/index.vue   |  4 +--
 .../nc-gui-v2/pages/projects/index/list.vue   | 31 +++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index 96c2f54fa8..62d78f51c3 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -59,7 +59,7 @@ const navDrawerOptions = [
 
         <div class="self-end flex text-2xl">
           <MaterialSymbolsFormatListBulletedRounded
-            :class="route.name === 'projects-list' ? 'text-primary' : ''"
+            :class="route.name === 'projects-index-list' ? 'text-primary' : ''"
             class="cursor-pointer p-1 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/projects/list')"
           />
@@ -71,7 +71,7 @@ const navDrawerOptions = [
         </div>
       </div>
 
-      <v-divider class="lg:(!mb-8)" />
+      <v-divider class="!mb-4 lg:(!mb-8)" />
 
       <NuxtPage :projects="projects" />
     </v-container>
diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
index a62ddb9334..44f883b55b 100644
--- a/packages/nc-gui-v2/pages/projects/index/list.vue
+++ b/packages/nc-gui-v2/pages/projects/index/list.vue
@@ -6,9 +6,36 @@ interface Props {
   projects: ProjectType[]
 }
 
-const props = defineProps<Props>()
+const { projects } = defineProps<Props>()
+
+const { $e } = useNuxtApp()
+
+const openProject = async (project: ProjectType) => {
+  await navigateTo(`/nc/${project.id}`)
+  $e('a:project:open', { count: projects.length })
+}
 </script>
 
 <template>
-  <div>List view</div>
+  <div>
+    <div class="grid grid-cols-3 gap-2 prose-md p-2 font-semibold">
+      <div>{{ $t('general.title') }}</div>
+      <div>Status</div>
+      <div>Updated At</div>
+    </div>
+
+    <v-divider class="col-span-3" />
+
+    <template v-for="project of projects" :key="project.id">
+      <div
+        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm) p-2 transition-color ease-in duration-100"
+        @click="openProject(project)"
+      >
+        <div class="font-semibold">{{ project.title || 'Untitled' }}</div>
+        <div>{{ project.status }}</div>
+        <div>{{ project.updated_at }}</div>
+      </div>
+      <v-divider class="col-span-3" />
+    </template>
+  </div>
 </template>