feat: add team composable

composables/useTeam.ts

@@ -0,0 +1,34 @@
+import type { Team } from '~/types'
+
+export function useTeam() {
+  const currentTeam = useState<Team | null>('team', () => null)
+
+  const teamList = useState<Team[]>('teamList', () => [])
+
+  async function fetchTeamList() {
+    const data = [{
+      name: 'Team A',
+    }, {
+      name: 'Team B',
+    }, {
+      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,
+    fetchTeamList,
+    selectTeam,
+    deleteTeam,
+  }
+}

layouts/entrySidebar.vue

@@ -1,25 +1,28 @@
 <script setup lang="ts">
-const createTeamModalRef = ref()
+import type { Team } from '~/types'
+
+const { currentTeam, teamList, fetchTeamList, deleteTeam } = useTeam()
 
+const createTeamModalRef = ref()
 const menus = ref([
   { icon: 'i-heroicons-star', label: 'Favorites list' },
   { icon: 'i-heroicons-clock', label: 'Recent visits' },
 ])
 
-const teams = ref([{
-  name: 'Team A',
-}, {
-  name: 'Team B',
-}, {
-  name: 'Team C',
-}])
+onMounted(() => {
+  fetchTeamList()
+})
+
+function selectTeam(team: Team) {
+  currentTeam.value = team
+}
 
 function createTeam() {
   createTeamModalRef.value.show()
 }
 
-function submitCreateTeam(team: { name: string }) {
-  teams.value.push(team)
+function submitCreateTeam(team: Team) {
+  teamList.value.push(team)
 }
 </script>
 
@@ -43,12 +46,13 @@ function submitCreateTeam(team: { name: string }) {
       <div class="mt-4">
         <div class="flex items-center text-xs font-semibold">
           <span class="mr-2">Your teams</span>
-          <UButton icon="i-heroicons-folder-plus" size="2xs" variant="ghost" @click="createTeam" />
+          <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 teams" :key="`team__${index}`" class="p-2 my-2 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">
+          <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 align-middle">{{ team.name }}</span>
+            <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>
         </ul>
       </div>

pages/dashboard.vue

@@ -2,7 +2,9 @@
 definePageMeta({
   layout: 'entry-sidebar',
 })
-const title = ref('Team A')
+
+const { currentTeam } = useTeam()
+
 const { $client } = useNuxtApp()
 
 const { pending, error, data: projects } = $client.protected.projectList.useQuery()
@@ -11,7 +13,7 @@ const { pending, error, data: projects } = $client.protected.projectList.useQuer
 <template>
   <div class="p-8">
     <h1 class="text-2xl pb-4 font-semibold border-b border-gray-200 dark:border-gray-800">
-      {{ title }}
+      {{ currentTeam?.name }}
     </h1>
 
     <div class="flex items-center my-8">

types.d.ts

@@ -11,3 +11,7 @@ export type SessionUser = Pick<User, 'id' | 'email' | 'username'>
 export interface Session {
   user: SessionUser
 }
+
+export interface Team {
+  name: string
+}