Transactions created, need link from nav

src/router/index.ts

@@ -52,6 +52,12 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('../views/ScheduleView.vue'),
     props: castScheduleRouteParams
   },
+  {
+    path: '/transactions/:seasonNumber?/:weekNumber?',
+    name: 'transactions',
+    component: () => import('../views/TransactionsView.vue'),
+    props: castTransactionsRouteParams
+  },
   {
     path: '/managers/:managerName?',
     name: 'managers',
@@ -87,6 +93,13 @@ function castScheduleRouteParams(route: { params: { seasonNumber: string, weekNu
   }
 }
 
+function castTransactionsRouteParams(route: { params: { seasonNumber: string, weekNumber: string } }) {
+  return {
+    seasonNumber: Number.isNaN(Number.parseInt(route.params.seasonNumber)) ? undefined : Number(route.params.seasonNumber),
+    weekNumber: Number.isNaN(Number.parseInt(route.params.weekNumber)) ? undefined : Number(route.params.weekNumber)
+  }
+}
+
 function castManagersRouteParams(route: { params: { managerName: string } }) {
   return {
     managerName: route.params.managerName

src/services/transactionsService.ts

@@ -25,6 +25,17 @@ export async function fetchTransactionsByTeamAndWeek(seasonNumber: number, teamA
   return transactionsResponse.transactions
 }
 
+export async function fetchTransactionsByWeek(seasonNumber: number, weekNumber: number): Promise<Transaction[]> {
+  const response = await fetch(`${SITE_URL}/api/v3/transactions?season=${seasonNumber}&week_start=${weekNumber}&week_end=${weekNumber}`)
+
+  const transactionsResponse: {
+    count: number
+    transactions: Transaction[]
+  } = await response.json()
+
+  return transactionsResponse.transactions
+}
+
 export async function fetchTransactionsForCurrentSeasonByPlayerName(playerName: string): Promise<Transaction[]> {
   const response = await fetch(`${SITE_URL}/api/v3/transactions?season=${CURRENT_SEASON}&player_name=${playerName}`)
 

src/views/TransactionsView.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="transactions-view centerDiv">
+    <!-- Transaction Header -->
+    <div class="row">
+      <div class="col-sm-12">
+        <h1>Season {{seasonNumber}} Transactions</h1>
+      </div>
+    </div>
+    <!-- Week Buttons -->
+    <div class="row">
+      <div class="col-sm">
+        <button v-if="selectedWeekNumber > 1" class="btn btn-outline-primary m-1"
+          @click="$router.push({ name: 'transactions', params: { seasonNumber: seasonNumber, weekNumber: selectedWeekNumber - 1 } })">
+          &lt;&lt; Week {{ selectedWeekNumber - 1 }}
+        </button>
+        <button class="btn btn-primary m-1">
+          Week {{ selectedWeekNumber }}
+        </button>
+        <!-- TODO might want to do regular season week + post season week amount here -->
+        <button v-if="selectedWeekNumber < 21" class="btn btn-outline-primary m-1"
+          @click="$router.push({ name: 'transactions', params: { seasonNumber: seasonNumber, weekNumber: selectedWeekNumber + 1 } })">
+          Week {{ selectedWeekNumber + 1 }} &gt;&gt;
+        </button>
+      </div>
+    </div>
+    <!-- Transaction tables for selected week and the next -->
+    <div class="row">
+      <div class="col-sm-6">
+        <h3 id="week1-heading">Week {{ selectedWeekNumber }}</h3>
+        <div class="table-responsive-xl">
+          <table class="table table-sm table-striped" id="week1">
+            <thead class="thead-dark">
+              <tr>
+                <th>Week</th>
+                <th>Player</th>
+                <th>Old Team</th>
+                <th>New Team</th>
+              </tr>
+            </thead>
+            <tbody id="curr-week-table">
+              <tr v-for="transaction in weekTransactions" :key="transaction.id">
+                <td>{{ selectedWeekNumber }}</td>
+                <td>
+                  <RouterLink :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: transaction.player.name } }">
+                    {{ transaction.player.name }}
+                  </RouterLink>
+                </td>
+                <td>
+                  <RouterLink :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: transaction.oldteam.abbrev } }">
+                    {{ transaction.oldteam.sname }}
+                  </RouterLink>
+                </td>
+                <td>
+                  <RouterLink :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: transaction.newteam.abbrev } }">
+                    {{ transaction.newteam.sname }}
+                  </RouterLink>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div v-if="selectedWeekNumber < 21" class="col-sm-6">
+        <h3 id="week2-heading">Week {{ selectedWeekNumber + 1 }}</h3>
+        <div class="table-responsive-xl">
+          <table class="table table-sm table-striped" id="week2">
+            <thead class="thead-dark">
+              <tr>
+                <th>Week</th>
+                <th>Player</th>
+                <th>Old Team</th>
+                <th>New Team</th>
+              </tr>
+            </thead>
+            <tbody id="next-week-table">
+              <tr v-for="transaction in nextWeekTransactions" :key="transaction.id">
+                <td>{{ selectedWeekNumber + 1 }}</td>
+                <td>
+                  <RouterLink :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: transaction.player.name } }">
+                    {{ transaction.player.name }}
+                  </RouterLink>
+                </td>
+                <td>
+                  <RouterLink :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: transaction.oldteam.abbrev } }">
+                    {{ transaction.oldteam.sname }}
+                  </RouterLink>
+                </td>
+                <td>
+                  <RouterLink :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: transaction.newteam.abbrev } }">
+                    {{ transaction.newteam.sname }}
+                  </RouterLink>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { type LeagueInfo, fetchCurrentLeagueInfo } from '@/services/currentService'
+import { fetchTransactionsByWeek, type Transaction } from '@/services/transactionsService'
+import { CURRENT_SEASON } from '@/services/utilities'
+
+export default {
+  name: 'TransactionsView',
+  data() {
+    return {
+      currentWeekNumber: 0,
+      weekTransactions: [] as Transaction[],
+      nextWeekTransactions: [] as Transaction[]
+    }
+  },
+  props: {
+    seasonNumber: { type: Number, default: CURRENT_SEASON },
+    weekNumber: { type: Number, required: false }
+  },
+  created() {
+    this.fetchCurrentWeekNumber()
+    this.fetchData()
+  },
+  computed: {
+    selectedWeekNumber(): number {
+      if (this.weekNumber || this.weekNumber === 0) return this.weekNumber
+      return this.currentWeekNumber
+    }
+  },
+  watch: {
+    seasonNumber(newValue, oldValue) {
+      if (newValue !== oldValue){ 
+        this.weekTransactions = []
+        this.nextWeekTransactions = []
+        this.fetchData()
+      }
+    },
+    selectedWeekNumber(newValue, oldValue) {
+      if (newValue !== oldValue) { 
+        this.weekTransactions = []
+        this.nextWeekTransactions = []
+        this.fetchData()
+      }
+    }
+  },
+  methods: {
+    async fetchCurrentWeekNumber(): Promise<void> {
+      const leagueInfo: LeagueInfo = await fetchCurrentLeagueInfo()
+      this.currentWeekNumber = leagueInfo.week
+    },
+    async fetchData(): Promise<void> {
+      this.weekTransactions = await fetchTransactionsByWeek(this.seasonNumber, this.selectedWeekNumber)
+      console.log('curr', this.weekTransactions)
+      this.nextWeekTransactions = await fetchTransactionsByWeek(this.seasonNumber, this.selectedWeekNumber + 1)
+      console.log('next', this.nextWeekTransactions)
+    }
+  }
+}
+</script>