Add additional data when fetching teams

Added TeamWithRoleSchema to extend TeamRoleSchema with team role/TL data.

availabili.tf/src/client/index.ts

@@ -34,6 +34,7 @@ export type { TeamInviteSchemaList } from './models/TeamInviteSchemaList';
 export type { TeamLogsTfIntegrationSchema } from './models/TeamLogsTfIntegrationSchema';
 export { TeamRole } from './models/TeamRole';
 export type { TeamSchema } from './models/TeamSchema';
+export type { TeamWithRoleSchema } from './models/TeamWithRoleSchema';
 export type { UpdateEventJson } from './models/UpdateEventJson';
 export type { ValidationError } from './models/ValidationError';
 export type { ValidationErrorElement } from './models/ValidationErrorElement';

availabili.tf/src/client/models/TeamWithRoleSchema.ts

@@ -0,0 +1,15 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type TeamWithRoleSchema = {
+    createdAt: string;
+    id: number;
+    isTeamLeader: boolean;
+    minuteOffset: number;
+    playerCount: number;
+    role: string;
+    teamName: string;
+    tzTimezone: string;
+};
+

availabili.tf/src/client/models/ViewTeamsResponse.ts

@@ -2,8 +2,8 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-import type { TeamSchema } from './TeamSchema';
+import type { TeamWithRoleSchema } from './TeamWithRoleSchema';
 export type ViewTeamsResponse = {
-    teams: Array<TeamSchema>;
+    teams: Array<TeamWithRoleSchema>;
 };
 

availabili.tf/src/components/TeamsListSidebar.vue

@@ -11,27 +11,54 @@ onMounted(() => {
 </script>
 
 <template>
-  <aside>
-    <div>
-      <div class="teams-header">
-        <h3>Your Teams</h3>
-        <RouterLink to="/team/register">
+  <div>
+    <div class="teams-header">
+      <h2>
+        <i class="bi bi-people-fill margin"></i>
+        Your Teams
+      </h2>
+      <div class="button-group">
+        <button class="small">
+          <i class="bi bi-person-plus-fill margin" />
+          Join a team
+        </button>
+        <RouterLink class="button" to="/team/register">
           <button class="small accent">
             <i class="bi bi-plus-circle-fill margin"></i>
             New
           </button>
         </RouterLink>
       </div>
-      <div
-        v-if="teams.teams"
-        v-for="team in teams.teams"
-      >
-        <RouterLink :to="'/team/id/' + team.id">
-          {{ team.teamName }}
-        </RouterLink>
-      </div>
     </div>
-  </aside>
+    <div
+      v-if="teams.teamsWithRole"
+      v-for="(team, _, i) in teams.teamsWithRole"
+    >
+      <div class="team-item">
+        <div class="major-info">
+          <RouterLink :to="'/team/id/' + team.id">
+            {{ team.teamName }}
+          </RouterLink>
+          <span class="tag" v-if="team.isTeamLeader">Team Leader</span>
+          <span class="tag">{{ teams.roleNames[team.role] }}</span>
+        </div>
+        <div class="member-info">
+          <div class="subtext">
+            {{ team.playerCount }} member(s)
+          </div>
+          <RouterLink
+            class="button"
+            :to="{ 'name': 'schedule', 'query': { 'teamId': team.id } }"
+          >
+            <button class="icon" v-tooltip="'View schedule'">
+              <i class="bi bi-calendar-fill"></i>
+            </button>
+          </RouterLink>
+        </div>
+      </div>
+      <hr v-if="i < Object.keys(teams.teams).length - 1" />
+    </div>
+  </div>
 </template>
 
 <style scoped>
@@ -48,4 +75,43 @@ aside {
 .teams-header h3 {
   font-weight: 600;
 }
+
+.button-group {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.team-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 1rem 0;
+}
+
+.team-item a {
+  color: var(--text);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.tag {
+  font-size: 9pt;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  background-color: var(--crust);
+}
+
+.team-item .major-info, .team-item .member-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.member-info button.icon {
+  color: var(--overlay-0);
+}
+
+.member-info button.icon:hover {
+  color: var(--text);
+}
 </style>

availabili.tf/src/main.ts

@@ -6,7 +6,6 @@ import { createPinia } from "pinia";
 import VueSelect from "vue-select";
 import { TooltipDirective } from "vue3-tooltip";
 import "vue3-tooltip/tooltip.css";
-import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 
 import App from "./App.vue";
 import router from "./router";

availabili.tf/src/stores/teams.ts

@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { reactive, type Reactive } from "vue";
 import { useClientStore } from "./client";
 import { useAuthStore } from "./auth";
-import { type TeamSchema, type RoleSchema, type ViewTeamMembersResponse, type CreateTeamJson } from "@/client";
+import { type TeamSchema, type RoleSchema, type ViewTeamMembersResponse, type CreateTeamJson, type TeamWithRoleSchema } from "@/client";
 
 export type TeamMap = { [id: number]: TeamSchema };
 
@@ -11,8 +11,14 @@ export const useTeamsStore = defineStore("teams", () => {
   const clientStore = useClientStore();
   const client = clientStore.client;
 
-  const teams: Reactive<{ [id: number]: TeamSchema }> = reactive({});
-  const teamMembers: Reactive<{ [id: number]: ViewTeamMembersResponse[] }> = reactive({});
+  const teams = reactive<{ [id: number]: TeamSchema }>({});
+  const teamsWithRole = reactive<{ [id: number]: TeamWithRoleSchema }>({});
+  const teamMembers = reactive<{ [id: number]: ViewTeamMembersResponse[] }>({});
+
+  const roleNames: { [key: string]: string } = {
+    "Player": "Player",
+    "CoachMentor": "Coach/Mentor",
+  };
 
   async function fetchTeams() {
     const response = await clientStore.call(
@@ -21,6 +27,7 @@ export const useTeamsStore = defineStore("teams", () => {
     );
     response.teams.forEach((team) => {
       teams[team.id] = team;
+      teamsWithRole[team.id] = team;
     });
     return response;
   }
@@ -70,6 +77,8 @@ export const useTeamsStore = defineStore("teams", () => {
 
   return {
     teams,
+    teamsWithRole,
+    roleNames,
     teamMembers,
     fetchTeams,
     fetchTeam,

backend-flask/models/team.py

@@ -102,6 +102,24 @@ class TeamSchema(spec.BaseModel):
             created_at=team.created_at,
         )
 
+class TeamWithRoleSchema(TeamSchema):
+    role: str
+    is_team_leader: bool
+    player_count: int
+
+    @classmethod
+    def from_player_team(cls, player_team: "PlayerTeam"):
+        return cls(
+            id=player_team.team.id,
+            team_name=player_team.team.team_name,
+            tz_timezone=player_team.team.tz_timezone,
+            minute_offset=player_team.team.minute_offset,
+            created_at=player_team.team.created_at,
+            role=player_team.team_role.name,
+            is_team_leader=player_team.is_team_leader,
+            player_count=len(player_team.team.players),
+        )
+
 from models.player_team import PlayerTeam
 from models.team_invite import TeamInvite
 from models.team_integration import (