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 v-if="!editing" :value="deck.note" type="info">
      {{ deck.note }}
    </v-alert>

    <v-container v-if="!editing" style="position: relative" grid-list-md fluid>
      <v-layout row wrap>
        <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm6 md4>
          <v-card>
            <v-card-title>{{ part.count }} {{ part.heading }}</v-card-title>
            <v-list dense subheader>
              <Card
                v-for="card in part.cards"
                :key="card.serial"
                :count="card.count"
                :serial="card.serial"
                :dbentry="card.dbentry"
              ></Card>
            </v-list>
          </v-card>
        </v-flex>

        <v-btn fab absolute bottom right @click.native="editing = true">
          <v-icon>edit</v-icon>
        </v-btn>
      </v-layout>
    </v-container>
    <DeckEditor
      :visible="editing"
      :id="deck.id"
      :value="deck_list"
      @close="editing = false"
      @change="$emit('change')"
    />
  </v-expansion-panel-content>
</template>

<script>
import Card from './Card.vue'
import DeckEditor from './forms/DeckEditor.vue'

export default {
  name: 'Deck',

  props: {
    deck: Object
  },

  components: {
    Card,
    DeckEditor
  },

  data: () => ({
    editing: false
  }),

  computed: {
    deck_parts() {
      let retval = ['Forwards', 'Backups', 'Summons, Monsters & more'].map(
        item => ({
          heading: item,
          cards: [],
          count: 0
        })
      )

      this.deck.cards.forEach(card => {
        let target
        switch (card.dbentry.type) {
          case 'Forward':
            target = 0
            break
          case 'Backup':
            target = 1
            break
          default:
            target = 2
            break
        }
        retval[target].cards.push(card)
        retval[target].count += card.count
      })

      retval.forEach(part =>
        part.cards.sort(
          (card_l, card_r) => card_l.dbentry.cost - card_r.dbentry.cost
        )
      )

      return retval
    },

    deck_list() {
      let lines = []

      // begin with deck name and note
      lines.push('Deck Name: ' + this.deck.name)
      lines.push(this.deck.note)
      lines.push('')

      // list each deck part
      this.deck_parts.forEach(part => {
        lines.push(`${part.heading} (${part.count}):`)

        part.cards.forEach(card =>
          lines.push(`${card.count}x ${card.serial} "${card.dbentry.name}"`)
        )
        lines.push('')
      })

      return lines.join('\n')
    }
  }
}
</script>