the-office/client/src/components/SeasonList.vue

<template>
    <div class="accordion" role="tablist">
        <b-card class="season-card" v-for="season in seasons" :key="season.season_id">
            <b-card-header header-tag="header" role="tab">
                <a class="no-link align-items-center justify-content-between d-flex"
                   v-b-toggle="'accordion-' + season.season_id">
                    <h5 class="mb-0 pu-0 mu-0 season-title">
                        Season {{ season.season_id }}
                    </h5>
                    <b-icon class="" icon="chevron-down"></b-icon>
                </a>
            </b-card-header>
            <b-collapse :id="'accordion-' + season.season_id" accordion="accordion-season-list">
                <b-card-body class="h-100 px-0">
                    <b-list-group>
                        <template v-for="episode in season.episodes">
                            <b-list-group-item :id="`s-${season.season_id}-ep-${episode.episode_id}`"
                                               :key="`rl-${episode.episode_id}`">
                                <router-link class="no-link"
                                             :to="`/${season.season_id}/${episode.episode_id}`">
                                    Episode {{ episode.episode_id }} - "{{ episode.title }}"
                                </router-link>
                            </b-list-group-item>
                            <b-popover show :key="`bpop-${episode.episode_id}`" variant="secondary" delay="25"
                                       :target="`s-${season.season_id}-ep-${episode.episode_id}`"
                                        triggers="hover" placement="right">
                                <template v-slot:title>{{ episode.title }}</template>
                                {{ episode.description }}
                            </b-popover>
                        </template>
                    </b-list-group>
                </b-card-body>
            </b-collapse>
        </b-card>
    </div>
</template>

<style lang="scss">
    @import "../assets/scss/_variables";

    .season-card > .card-body > .card-header {
        cursor: pointer;
    }

    .bi-chevron-down {
        -moz-transition: all 0.25s ease-in-out;
        -webkit-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
    }

    .collapsed > .bi-chevron-down {
        text-align: right;
    }

    .not-collapsed > .bi-chevron-down {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    .b-popover  {
        background: transparent;
    }
    .popover-header {
        background-color: $grey-3;
        border-color: $grey-2;
        color: white;
    }

    .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
        /*left: 1px;*/
        /*border-width: 0.5rem 0.5rem 0.5rem 0;*/
        border-right-color: $grey-2;
    }

    .popover-body {
        color: white;
        background-color: $grey-2;
    }

    .season-title { color: $grey-8; cursor: pointer; }

    .accordion.list-group-item {
        border-radius: 0;
        border-width: 0 0 0 0;
        border-bottom-width: 1px;
        padding-left: 30px;
        font-weight: 500;

        &:first-child { border-top-width: 1px; }

        &:last-child { border-bottom-width: 0; }
    }

    .accordion {
        .list-group-item {
            padding: 10px 20px;

            a { display: block; }

            .badge { float: right; min-width: 36px; }
        }

        .card-body { padding: 0; }
    }

    .card-header {
        background-color: $grey-2;
        border-bottom: 1px solid rgba(0, 0, 0, 0.88);
        font-family: 'Montserrat', sans-serif;
    }

    .card {
        background-color: inherit;
        /*border: 3px solid #0a0a0a;*/
        /*border-radius: 0;*/
        padding-bottom: 0;
        /*&:not(:first-child) { border-top-width: 0; }*/
        /*&:not(:last-child) { border-bottom-width: 0; }*/
    }

    .list-group-item {
        border-color: rgba(24, 24, 24, 0.82);
        background-color: $grey-3;
        color: $grey-8;
        border-left-width: 0;
        border-right-width: 0;

        &:hover { background-color: $grey-2; }
    }

    .no-link {
        color: inherit;
        text-decoration: none;

        &:hover {
            color: inherit;
            text-decoration: none;
        }
    }
</style>

<script>
import axios from 'axios';

export default {
  name: 'SeasonList',
  data() {
    return {
      seasons: [],
    };
  },
  methods: {
    getSeasons() {
      const path = `${process.env.VUE_APP_BASE_APP_URL}/api/episodes/`;
      axios.get(path)
        .then((res) => {
          this.seasons = res.data;
        })
        .catch((error) => {
          // eslint-disable-next-line no-console
          console.error(error);
        });
    },
  },
  created() {
    this.getSeasons();
  },
};
</script>