node-fftcg/frontend/src/components/Deck.vue

<template>
  <v-expansion-panel-content>
    <template v-slot:header>
      <span class="subheading">{{ deck.name }}</span>
    </template>

    <v-alert :value="deck.note" type="info">
      {{ deck.note }}
    </v-alert>

    <v-container grid-list-md fluid>
      <v-layout row wrap>
        <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm4>
          <v-card>
            <v-card-title>{{ part.count }} {{ part.heading }}</v-card-title>
            <v-list dense subheader>
              <v-list-tile v-for="card in part.cards" :key="card.serial" avatar>
                <v-list-tile-avatar color="yellow">
                  <span>{{ card.dbentry.cost }}</span>
                </v-list-tile-avatar>

                <v-list-tile-content>
                  <v-list-tile-title>{{ card.dbentry.name }}</v-list-tile-title>
                </v-list-tile-content>

                <v-list-tile-avatar>
                  <span>{{ card.count }}</span>
                </v-list-tile-avatar>
              </v-list-tile>
            </v-list>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-expansion-panel-content>
</template>

<script>
export default {
  name: 'Deck',

  props: {
    deck: Object
  },

  computed: {
    deck_parts() {
      let retval = {
        forwards: {
          heading: 'Forwards',
          cards: this.deck.cards.filter(card => card.dbentry.type === 'Forward')
        },
        backups: {
          heading: 'Backups',
          cards: this.deck.cards.filter(card => card.dbentry.type === 'Backup')
        },
        rest: {
          heading: 'Summons, Monsters & more',
          cards: this.deck.cards.filter(
            card =>
              card.dbentry.type != 'Forward' && card.dbentry.type != 'Backup'
          )
        }
      }

      for (let i = 0; i < Object.keys(retval).length; i++) {
        let key = Object.keys(retval)[i]
        retval[key].count = retval[key].cards.reduce(
          (result, card) => result + card.count,
          0
        )
        retval[key].cards.sort(
          (card_l, card_r) => card_l.dbentry.cost - card_r.dbentry.cost
        )
      }

      return retval
    }
  }
}
</script>