feat: define collection & visted page

OsmanthusBeer · Oct 11, 2023 · f96b0e8 · f96b0e8
1 parent a4589f4
commit f96b0e8
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 77 deletions.
diff --git a/composables/useTeam.ts b/composables/useTeam.ts
@@ -5,30 +5,33 @@ export function useTeam() {
 
   const teamList = useState<Team[]>('teamList', () => [])
 
+  async function fetchTeamInfo(id: string) {
+    currentTeam.value = teamList.value.find((team: Team) => team.id === id) || null
+  }
+
   async function fetchTeamList() {
     const data = [{
+      id: '1',
       name: 'Team A',
     }, {
+      id: '2',
       name: 'Team B',
     }, {
+      id: '3',
       name: 'Team C',
     }]
     teamList.value = data
   }
 
-  async function selectTeam(team: Team) {
-    currentTeam.value = team
-  }
-
   async function deleteTeam(team: Team) {
     teamList.value.splice(teamList.value.findIndex((item: Team) => item.name === team.name), 1)
   }
 
   return {
     currentTeam,
     teamList,
+    fetchTeamInfo,
     fetchTeamList,
-    selectTeam,
     deleteTeam,
   }
 }
diff --git a/layouts/entrySidebar.vue b/layouts/entrySidebar.vue
@@ -1,22 +1,18 @@
 <script setup lang="ts">
 import type { Team } from '~/types'
 
-const { currentTeam, teamList, fetchTeamList, deleteTeam } = useTeam()
+const { teamList, fetchTeamList, deleteTeam } = useTeam()
 
 const createTeamModalRef = ref()
 const menus = ref([
-  { icon: 'i-heroicons-star', label: 'Favorites list' },
-  { icon: 'i-heroicons-clock', label: 'Recent visits' },
+  { icon: 'i-heroicons-star', label: 'Collection list', to: '/collection' },
+  { icon: 'i-heroicons-clock', label: 'Visted list', to: '/visited' },
 ])
 
 onMounted(() => {
   fetchTeamList()
 })
 
-function selectTeam(team: Team) {
-  currentTeam.value = team
-}
-
 function createTeam() {
   createTeamModalRef.value.show()
 }
@@ -37,10 +33,16 @@ function submitCreateTeam(team: Team) {
       </div>
       <!-- menu list -->
       <ul class="mt-8">
-        <li v-for="(menu, index) in menus" :key="`menu__${index}`" class="py-2 my-2 rounded cursor-pointer text-gray-700  hover:text-gray-800 dark:text-gray-300 dark:hover:text-white">
-          <UIcon :name="menu.icon" />
-          <span class="ml-2 font-semibold">{{ menu.label }}</span>
-        </li>
+        <NuxtLink
+          v-for="(menu, index) in menus" :key="index" v-slot="{ navigate }"
+          :to="{ path: menu.to }"
+          custom
+        >
+          <li class="py-2 my-2 rounded cursor-pointer text-gray-700  hover:text-gray-800 dark:text-gray-300 dark:hover:text-white" @click="navigate">
+            <UIcon :name="menu.icon" />
+            <span class="ml-2 font-semibold">{{ menu.label }}</span>
+          </li>
+        </NuxtLink>
       </ul>
       <!-- team list -->
       <div class="mt-4">
@@ -49,11 +51,17 @@ function submitCreateTeam(team: Team) {
           <UButton icon="i-heroicons-folder-plus" size="sm" variant="ghost" @click="createTeam" />
         </div>
         <ul class="h-3/5 overflow-auto mt-2">
-          <li v-for="(team, index) in teamList" :key="`team__${index}`" class="group p-2 my-2 flex items-center rounded cursor-pointer text-gray-700 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white" @click="selectTeam(team)">
-            <UKbd>{{ team.name?.[0] }}</UKbd>
-            <span class="ml-4 font-semibold">{{ team.name }}</span>
-            <UButton class="hidden ml-auto group-hover:flex" icon="i-heroicons-x-circle" size="2xs" variant="ghost" @click.stop="deleteTeam(team)" />
-          </li>
+          <NuxtLink
+            v-for="team in teamList" :key="team.id" v-slot="{ navigate }"
+            :to="{ path: `/t/${team.id}` }"
+            custom
+          >
+            <li class="group p-2 my-2 flex items-center rounded cursor-pointer text-gray-700 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white" @click="navigate">
+              <UKbd>{{ team.name?.[0] }}</UKbd>
+              <span class="ml-4 font-semibold">{{ team.name }}</span>
+              <UButton class="hidden ml-auto group-hover:flex" icon="i-heroicons-x-circle" size="2xs" variant="ghost" @click.stop="deleteTeam(team)" />
+            </li>
+          </NuxtLink>
         </ul>
       </div>
       <!-- bottom menu -->

diff --git a/pages/collection.vue b/pages/collection.vue
@@ -0,0 +1,11 @@
+<script setup>
+definePageMeta({
+  layout: 'entry-sidebar',
+})
+</script>
+
+<template>
+  <div class="p-8">
+    collection
+  </div>
+</template>
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
@@ -2,63 +2,8 @@
 definePageMeta({
   layout: 'entry-sidebar',
 })
-
-const { currentTeam } = useTeam()
-
-const { $client } = useNuxtApp()
-
-const { pending, error, data: projects } = $client.protected.projectList.useQuery()
 </script>
 
 <template>
-  <div class="p-8">
-    <h1 class="text-2xl pb-4 font-semibold border-b border-gray-200 dark:border-gray-800">
-      {{ currentTeam?.name }}
-    </h1>
-
-    <div class="flex items-center my-8">
-      <UInput class="w-44 mr-4" icon="i-heroicons-magnifying-glass-20-solid" size="sm" color="white" :trailing="false" />
-      <UButton @click="navigateTo('/p/create')">
-        Create Project
-      </UButton>
-    </div>
-    <div v-if="pending" class="grid grid-cols-4 gap-4">
-      <UCard v-for="n in 4" :key="n">
-        <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
-        <div class="mt-2 space-y-2">
-          <USkeleton class="h-4 w-[250px]" />
-          <USkeleton class="h-4 w-[100px]" />
-        </div>
-      </UCard>
-    </div>
-    <UAlert
-      v-else-if="error"
-      title="Fetch project list error" icon="i-heroicons-x-circle-solid"
-      color="red" variant="outline"
-    >
-      <template #description>
-        {{ JSON.stringify(error) }}
-      </template>
-    </UAlert>
-    <div
-      v-else
-      class="grid grid-cols-4 gap-4"
-    >
-      <NuxtLink
-        v-for="project in projects" :key="project.id"
-        v-slot="{ navigate }" :to="{ path: `/p/${project.id}` }"
-        custom
-      >
-        <UCard
-          class="space-y-2 cursor-pointer"
-          @click="navigate"
-        >
-          <p>{{ project.name }}</p>
-          <p class="text-xs text-slate-400">
-            {{ project.description }}
-          </p>
-        </UCard>
-      </NuxtLink>
-    </div>
-  </div>
+  <h1>dashboard</h1>
 </template>
diff --git a/pages/t/[id]/index.vue b/pages/t/[id]/index.vue
@@ -0,0 +1,69 @@
+<script setup>
+definePageMeta({
+  layout: 'entry-sidebar',
+})
+const { currentTeam, fetchTeamInfo } = useTeam()
+
+const { $client } = useNuxtApp()
+
+onBeforeMount(() => {
+  const route = useRoute()
+  const id = route.params.id
+  fetchTeamInfo(id)
+})
+
+const { pending, error, data: projects } = $client.protected.projectList.useQuery()
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl pb-4 font-semibold border-b border-gray-200 dark:border-gray-800">
+      {{ currentTeam?.name }}
+    </h1>
+
+    <div class="flex items-center my-8">
+      <UInput class="w-44 mr-4" icon="i-heroicons-magnifying-glass-20-solid" size="sm" color="white" :trailing="false" />
+      <UButton @click="navigateTo('/p/create')">
+        Create Project
+      </UButton>
+    </div>
+    <div v-if="pending" class="grid grid-cols-4 gap-4">
+      <UCard v-for="n in 4" :key="n">
+        <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
+        <div class="mt-2 space-y-2">
+          <USkeleton class="h-4 w-[250px]" />
+          <USkeleton class="h-4 w-[100px]" />
+        </div>
+      </UCard>
+    </div>
+    <UAlert
+      v-else-if="error"
+      title="Fetch project list error" icon="i-heroicons-x-circle-solid"
+      color="red" variant="outline"
+    >
+      <template #description>
+        {{ JSON.stringify(error) }}
+      </template>
+    </UAlert>
+    <div
+      v-else
+      class="grid grid-cols-4 gap-4"
+    >
+      <NuxtLink
+        v-for="project in projects" :key="project.id"
+        v-slot="{ navigate }" :to="{ path: `/p/${project.id}` }"
+        custom
+      >
+        <UCard
+          class="space-y-2 cursor-pointer"
+          @click="navigate"
+        >
+          <p>{{ project.name }}</p>
+          <p class="text-xs text-slate-400">
+            {{ project.description }}
+          </p>
+        </UCard>
+      </NuxtLink>
+    </div>
+  </div>
+</template>
diff --git a/pages/visited.vue b/pages/visited.vue
@@ -0,0 +1,11 @@
+<script setup>
+definePageMeta({
+  layout: 'entry-sidebar',
+})
+</script>
+
+<template>
+  <div class="p-8">
+    visited
+  </div>
+</template>
diff --git a/types.d.ts b/types.d.ts
@@ -13,5 +13,6 @@ export interface Session {
 }
 
 export interface Team {
+  id: string
   name: string
 }