paper-dynasty-website/components/Marketplace.vue

<template>
  <div>
    <!-- Filters -->
    <details :open="showFilters" @toggle="toggleFilters">
      <summary role="button" class="contrast" style="margin-bottom: 1rem;">
        {{ showFilters ? 'Hide Filters' : 'Show Filters' }}
      </summary>
    
      <!-- Filters Panel -->
      <div class="container" style="background: var(--pico-card-background-color); padding: 1rem; border-radius: var(--pico-border-radius);">
  
        <label for="filter-min-cost">Min Cost:</label>
        <input v-model.number="marketplace.filters.minCost" id="filter-min-cost" type="number" placeholder="Min cost" />
    
        <label for="filter-max-cost">Max Cost:</label>
        <input v-model.number="marketplace.filters.maxCost" id="filter-max-cost" type="number" placeholder="Max cost" />
    
        <label for="filter-rarity">Rarity:</label>
        <select v-model="marketplace.filters.rarities" id="filter-rarity" multiple size="6">
          <option value="Replacement">Replacement</option>
          <option value="Reserve">Reserve</option>
          <option value="Starter">Starter</option>
          <option value="All-Star">All-Star</option>
          <option value="MVP">MVP</option>
          <option value="Hall of Fame">Hall of Fame</option>
        </select>
    
        <button @click="applyFilters" class="contrast" style="margin-top: 1rem;">
          Apply Filters
        </button>
      </div>
    </details>

    <!-- Loading -->
    <div v-if="pending" class="container" style="text-align: center; padding: 2rem;">
      <p>Loading players...</p>
    </div>

    <!-- No Results -->
    <div v-else-if="!playerList || playerList.length === 0" class="container" style="text-align: center; padding: 2rem;">
      <p>No players found. Try adjusting your filters!</p>
    </div>

    <!-- Player Cards -->
    <section v-else class="grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; text-align: center;">
      <article v-for="player in playerList" :key="player.player_id" class="card player-card">
        <NuxtLink :to="`/players/${player.player_id}`" style="text-decoration: none; color: inherit;">
          <img :src="player?.player_headshot" alt="Player Headshot" class="headshot" />
          <h2 class="name">{{ player?.player_name }}</h2>
          <p class="franchise">{{ player?.franchise_name }}</p>

          <img :src="player?.player_card_image" alt="Player Card" class="card-image" />
          <img v-if="player?.player_card_image2" :src="player?.player_card_image2" alt="Player Card 2" class="card-image" />

          <div class="rarity" :style="{ backgroundColor: '#' + player.rarity_color }">
            {{ player.rarity_name }}
          </div>

          <p class="cardset">{{ player?.cardset_name }}</p>
          <p class="cost">Cost: {{ player?.player_cost }}₼</p>
        </NuxtLink>
      </article>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { useMarketplaceStore } from '~/stores/marketplace'
import type { MarketplacePlayer } from '~/types/MarketplacePlayer'

const marketplace = useMarketplaceStore()
const client = useSupabaseClient()
const router = useRouter()
const route = useRoute()

const showFilters = ref(false)
// Track the current filters from the URL query
const currentQuery = ref(route.query)

const toggleFilters = () => {
  showFilters.value = !showFilters.value
}

const applyFilters = async () => {
  console.log('Applying filters:', marketplace.filters)

  router.replace({
    query: {
      minCost: marketplace.filters.minCost || undefined,
      maxCost: marketplace.filters.maxCost || undefined,
      rarities: marketplace.filters.rarities.length > 0 ? marketplace.filters.rarities : undefined
    }
  })
}

const fetchPlayers = async () => {
  let query = client.from('marketplace')
    .select('*')
    .limit(20)

  // Apply filter conditions based on the store values
  if (marketplace.filters.minCost > 0) {
    query = query.gte('player_cost', marketplace.filters.minCost)
  }
  if (marketplace.filters.maxCost > 0) {
    query = query.lte('player_cost', marketplace.filters.maxCost)
  }
  if (marketplace.filters.rarities.length > 0) {
    query = query.in('rarity_name', marketplace.filters.rarities)
  }

  const { data, error } = await query

  if (error) {
    console.error('Supabase error: ', error)
  }

  return data
}

// For useAsyncData, access filters via the store
const { data: playerList, pending, error, refresh } = await useAsyncData<MarketplacePlayer[] | null>(
  'player-list', // Use a static key
  fetchPlayers, // Fetch players with current filters
  {
    // Only refetch when filters change
    lazy: true,
    server: false
  }
)

onMounted(() => {
  const { minCost, maxCost, rarities } = route.query

  marketplace.setFilters({
    minCost: minCost ? Number(minCost) : 0,
    maxCost: maxCost ? Number(maxCost) : 0,
    // rarities: rarities
    //   ? Array.isArray(rarities) ? rarities : [rarities]
    //   : []
  })
})

// Watch for changes to the query params and refetch
watch(() => route.query, async (newQuery) => {
  // Update filters based on query params
  if (JSON.stringify(newQuery) !== JSON.stringify(currentQuery.value)){
    currentQuery.value = newQuery // Update the tracked query

    marketplace.setFilters({
      minCost: newQuery.minCost ? Number(newQuery.minCost) : 0,
      maxCost: newQuery.maxCost ? Number(newQuery.maxCost) : 0,
      rarities: newQuery.rarities ? (Array.isArray(newQuery.rarities) ? newQuery.rarities : [newQuery.rarities]) : []
    })

    // Trigger refetch
    await refresh()
  }
}, { immediate: true }) // Set immediate to true to run on initial load

</script>

<style scoped>
.player-card {
  max-width: 400px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 16px;
  text-align: center;
}

.headshot {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 8px;
}

.name {
  font-size: 1.5rem;
  margin: 0;
}

.franchise {
  color: #666;
  font-size: 1rem;
  margin-bottom: 8px;
}

.card-image {
  width: 100%;
  height: auto;
  margin: 12px 0;
}

.rarity {
  color: white;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.cardset {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 8px;
}

.cost {
  font-weight: bold;
  font-size: 1.2rem;
}
</style>