Add managers to NavBar, layout active/retired names and link to individual manager page

src/components/NavBar.vue

@@ -25,6 +25,11 @@
             :to="{ name: 'team', params: { seasonNumber: seasonNumber(), teamAbbreviation: 'FA' } }">Free Agents
           </RouterLink>
         </li>
+        <li class="nav-item">
+          <RouterLink class="nav-link" :to="{ name: 'managers' }">
+            Managers
+          </RouterLink>
+        </li>
         <li class="nav-item">
           <a class="nav-link" href="/rules">Rules Ref</a>
         </li>

src/router/index.ts

@@ -47,6 +47,12 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('../views/ScheduleView.vue'),
     props: castScheduleRouteParams
   },
+  {
+    path: '/managers/:managerName?',
+    name: 'managers',
+    component: () => import('../views/ManagerView.vue'),
+    props: castManagersRouteParams
+  },
 ]
 
 function castTeamsRouteParams(route: { params: { teamAbbreviation: string, seasonNumber: string } }) {
@@ -70,6 +76,12 @@ function castScheduleRouteParams(route: { params: { seasonNumber: string, weekNu
   }
 }
 
+function castManagersRouteParams(route: { params: { managerName: string } }) {
+  return {
+    managerName: route.params.managerName
+  }
+}
+
 const router = createRouter({
   history: createWebHistory(), //import.meta.env.BASE_URL),
   routes,

src/services/managerService.ts

@@ -0,0 +1,21 @@
+import type { Manager } from './apiResponseTypes'
+import { SITE_URL } from './utilities'
+
+export async function fetchActiveManagers(): Promise<Manager[]> {
+  return await fetchManagers(true)
+}
+
+export async function fetchRetiredManagers(): Promise<Manager[]> {
+  return await fetchManagers(false)
+}
+
+async function fetchManagers(active: boolean): Promise<Manager[]> {
+  const response = await fetch(`${SITE_URL}/api/v3/managers?active=${active}&short_output=true`)
+
+  const managersResponse: {
+    count: number
+    managers: Manager[]
+  } = await response.json()
+
+  return managersResponse.managers
+}

src/views/ManagerView.vue

@@ -1,12 +1,39 @@
 <template>
   <div class="manager-view centerDiv">
 
+    <div v-if="!managerName" class="row">
+      <div class="row">
+        <h1 style="text-align:center">Active</h1>
+      </div>
+      <div class="row">
+        <div class="col-sm-2 my-1" v-for="manager in activeManagers.slice().sort((a, b) => a.name.localeCompare(b.name))"
+          :key="manager.id">
+          <RouterLink :to="{ name: 'managers', params: { managerName: manager.name } }">
+            <h5>{{ manager.name }}</h5>
+          </RouterLink>
+        </div>
+      </div>
+
+      <div class="row">
+        <h1 style="text-align:center">Retired</h1>
+      </div>
+      <div class="row">
+        <div class="col-sm-2 my-1" v-for="manager in retiredManagers.slice().sort((a, b) => a.name.localeCompare(b.name))"
+          :key="manager.id">
+          <RouterLink :to="{ name: 'managers', params: { managerName: manager.name } }">
+            <h5>{{ manager.name }}</h5>
+          </RouterLink>
+        </div>
+      </div>
+    </div>
+    <div v-else>
       <div class="row">
         <div class="col-sm-12">
           <h1 id="manager-name">{{ managerName }}</h1>
         </div>
 
         <div>🚧 Coming Soon 🚧</div>
+      </div>
 
       <!-- <div class="col-sm-12">
         <h3 id="manager-record">Career Record: 294-218</h3>
@@ -100,16 +127,49 @@
         </div>
       </div> -->
     </div>
-
   </div>
 </template>
 
 <script lang="ts">
+import type { Manager } from '@/services/apiResponseTypes'
+import { fetchActiveManagers, fetchRetiredManagers } from '@/services/managerService'
+
 
 export default {
   name: 'ManagerView',
+  data() {
+    return {
+      activeManagers: [] as Manager[],
+      retiredManagers: [] as Manager[]
+    }
+  },
   props: {
-    managerName: { type: String, required: true },
+    managerName: { type: String, default: undefined },
+  },
+  computed: {
+    zippedManagers(): { active: Manager | undefined, retired: Manager | undefined }[] {
+      return this.activeManagers.map((mgr, idx) => {
+        return {
+          active: mgr,
+          retired: idx < this.retiredManagers.length ? this.retiredManagers[idx] : undefined
+        }
+      })
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  watch: {
+    managerName(newValue, oldValue) {
+      if (newValue !== oldValue)
+        this.fetchData()
+    }
+  },
+  methods: {
+    async fetchData(): Promise<void> {
+      this.activeManagers = await fetchActiveManagers()
+      this.retiredManagers = await fetchRetiredManagers()
+    }
   }
 }
 </script>